/*
Theme Name: ploom
Author: Opacity (by Mihkel Rätsep)
Author URI: http://www.opacity.ee
Description: 
Version: 1.0
*/
@charset "utf-8";
/* ------------------------------------------------------------------------------*/
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #f7f7f7;
	color: #000;
	-webkit-appearance: none;
	-webkit-text-size-adjust: none;		
}
a {
	color: #000;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
ul, ol {
	margin: 0 0 2em 2em;
}
ul {
	list-style-type: disc;
}
ol {
	list-style-type: decimal;
}
li {
	margin-bottom: .3em;
	line-height: 1.47;
}
p {
	margin-bottom: 1.47em;
	line-height: 1.47;
}

/* => Lists */
/* ------------------------------------------------------------------------------*/
.list, .list li, .list .item, .sub-menu, .menu, .menu-item, .list p,
.wp-paginate, .wp-paginate li {
	margin: 0;
	padding: 0;
	background: none;
	list-style-type: none;
}
/* => Main navigation */
/* ------------------------------------------------------------------------------*/
#mainnav{
	position: absolute;
	right: 0;
	top: 82px;
}

#mainnav .current-menu-item a, 
#mainnav .current-menu-parent a, 
#mainnav .current-menu-ancestor a,
#mainnav a:hover {
	text-decoration: underline;
}
.wrap {
	width: 945px;
	margin: auto;
}

/* Header */
.header{
	width: 100%;
	height: 125px;
	position: relative;
}
.logo{
	position: absolute;
	left: 0;
	top: 55px;
}
.single .header,
.page .header{
	border-bottom: 1px solid #eee;
}
/* Home */
.illustrations{
	margin: 15px 0;
	text-align: center;
}
.illustrations .list{
	width: 960px;
	margin: auto;
}
.illustrations .item{
	width: 305px;
	display: inline-block;
	margin: 0 7px 14px;
	overflow: hidden;	
	text-align: left;
}
.illustrations a{
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.illustrations .photo{
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-bottom: 0;
	line-height: 0;
}
.illustrations .hover{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.9);
	font-size: 21px;
	opacity: 0;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
}
.illustrations .title{
	margin: 10px;
}

.illustrations a:hover .hover{
	opacity: 1;
}
.illustrations .item.gd-item{
	display: none;
}
.gd-toggle{
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;	
}
.gd-toggle:hover{
	opacity: .8;	
}
/* Single & Page */
.content{
	width: 600px;
	margin: 30px auto;
}
.content .title{
	font-size: 23px;
	margin-bottom: 15px;
	display: inline-block;
}
.page .title{
	display: none;
}
.content a{
	text-decoration: underline;
}
.content a:hover{
	text-decoration: none;
}
/* Footer */
.footer{
	width: 100%;
	border-top: 1px solid #eee;
	padding-top: 15px;
	position: relative;
}
.footer .by{
	position: absolute;
	right: 0;
	top: 18px;
}
@media screen and (max-width: 945px){
	.wrap{
		width: auto;
		margin: 0 10px;
	}
	.illustrations{
		margin: auto;
		width: 650px;
	}
	.illustrations .list{
		width: 100%;
	}
	.illustrations .item{
		width: 305px;
		display: inline-block;
	}
}

@media screen and (max-width: 640px){
	.header{
		height: 100px;
	}
	#mainnav{
		top: 70px;
	}
	.logo{
		width: 100%;
		top: 15px;
		left: auto;
		text-align: center;
	}	
	.illustrations{
		width: auto;
	}
	.illustrations .item{
		width: 47%;
	}
	.illustrations .item img{
		width: 100%;
		height: auto;
	}		
}

@media screen and (max-width: 600px){
	.content{
		width: auto;
		margin: 15px auto;
	}
	.single .content img{
		width: 100%;
		height: auto;
	}
	.content p{
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 500px){
	.illustrations .item{
		width: 40%;
	}
	
}
@media screen and (max-width: 360px){
	.logo img{
		width: 100%;
		height: auto;
	}
}

@media screen and (max-width: 321px){
	.illustrations{
		width: 100%;
	}		
	.illustrations .item{
		width: 100%;
		margin: 0 0 14px;
	}
	.illustrations img{
		width: 100%;
		height: auto;
	}

}