/*	
	Layout styles for Evalenis.nl
	Author: J.N. van Oosten (www.jannico.nl)

	Table of Contents
	==================================================
	- General Styles
	- Media Queries
		- Desktop large
		- Desktop small up to 1024 pixels (netbooks)
		- Desktop small
		- Tablet to desktop
		- Tablet
		- Landscape phones
		- Portrait phones
		- EXAMPLE Media Queries for Responsive Design
*/

/* =============================================================================
	General Styles
   ========================================================================== */
::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

body {
	background: url("../img/bg_menu.jpg") no-repeat scroll center -99px #fff;
	color: #48237C;
	font: 16px/22px 'Text Me One', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding-bottom: 50px;
}

h1, h2, h3, h4, h5, h6 {
	color: #48237c;
	font-family: 'Libre Baskerville', "Georgia", "Times New Roman", serif;
	font-weight: normal;
}

	h1 { font-size: 36px; line-height: 40px; margin-bottom: 20px;}
	h2 { font-size: 25px; line-height: 30px; margin-bottom: 10px; }
	h3 { font-size: 18px; line-height: 24px; margin-bottom: 8px; }
	h4 { font-size: 11px; line-height: 20px; margin-bottom: 4px; }
	h5 { font-size: 10px; line-height: 1em; }
	
strong,
b {
	color: #48237C;
}

img {
	max-width: 100%;
	height: auto;
}

#large_image img {
  max-width: auto;
}

li {
    list-style: disc inside none;
}
	
/* =============================================================================
	Header + menu
   ========================================================================== */
header {
    margin-bottom: 60px !important;
    padding-top: 1px !important;
}

	header > div {
		display: block;
		padding-top: 0;
	}

		#logo_wrapper {
			display: block;
			margin: -4px 0 0 -11px;
		}

			#logo_wrapper::after {
				background: url("../img/logo_eva_lenis_illustrator.png") no-repeat scroll 0 0 transparent;
				content: "";
				display: block;
				height: 62px;
				margin: 12px 0 0 85px;
				position: absolute;
				width: 133px;
			}

				#logo {
					display: block;
					float: left;
					height: 82px;
					width: 93px;
				}
	
		header nav{
			display: block;
			float: right;
			margin-top: 18px;
		}
		
			header nav a{
				background-color: transparent;
				background-repeat: no-repeat;
				display: block;
				float: left;
				height: 50px;
				margin-left: 20px;
				text-indent: -999em;
				-webkit-transition: all 0.1s ease-in;
				-moz-transition: all 0.1s ease-in;
				-ms-transition: all 0.1s ease-in;
				-o-transition: all 0.1s ease-in;
				transition: all 0.1s ease-in;
				width: 50px;
			}
		
				header nav a:hover {
					-webkit-transform: scale(1.3);
					-moz-transform: scale(1.3);
					-ms-transform: scale(1.3);
					-o-transform: scale(1.3);
					transform: scale(1.3);
				}
		
		header #link_home {background-image: url("../img/home.gif"); background-position: center center;}	
		header #link_about {background-image: url("../img/info.gif"); background-position: center center;}	
		header #link_contact {background-image: url("../img/contact.gif"); background-position: center center;}

/* =============================================================================
	Frontpage
   ========================================================================== */
#home_container.loading {
	background: url("../img/loading.gif") no-repeat scroll center center transparent;
	min-height: 600px;
}
	
	#item_wrapper {
	}

		#item_wrapper .item {
			float: left;
			margin: 0 15px 20px 0;
			padding: 0;
		}

			#item_wrapper .item figcaption {
				display: none;
			}

				#item_wrapper .item img {
					-webkit-transition: all 0.3s ease-in;
					-moz-transition: all 0.3s ease-in;
					-ms-transition: all 0.3s ease-in;
					-o-transition: all 0.3s ease-in;
					transition: all 0.3s ease-in;
					 max-width: 100%;
				}

					.no-touch #item_wrapper .item:hover img {
						-webkit-transform: scale(1.2);
						-moz-transform: scale(1.2);
						-ms-transform: scale(1.2);
						-o-transform: scale(1.2);
						transform: scale(1.2);
					}

					.no-touch #item_wrapper .item img.fade{
						opacity: 0.2;
					}
					
					.touch #item_wrapper .item a:active > img,
					.touch #item_wrapper .item a:focus > img {
						opacity: 0.2;
					}
			
	/* Animations */
	.masonry,
	.masonry .masonry-brick {
		-webkit-transition-duration: 0.7s;
		-moz-transition-duration: 0.7s;
		-ms-transition-duration: 0.7s;
		-o-transition-duration: 0.7s;
		transition-duration: 0.7s;
	}

	.masonry {
		-webkit-transition-property: height, width;
		-moz-transition-property: height, width;
		-ms-transition-property: height, width;
		-o-transition-property: height, width;
		transition-property: height, width;
	}

	.masonry .masonry-brick {
		-webkit-transition-property: left, right, top;
		-moz-transition-property: left, right, top;
		-ms-transition-property: left, right, top;
		-o-transition-property: left, right, top;
		transition-property: left, right, top;
	}
	
/* =============================================================================
	Portfolio Item page
   ========================================================================== */
#large_image {
	background: url("../img/loading.gif") no-repeat scroll center center transparent;
	min-height: 300px;
	margin-bottom: 15px;
	max-width: 100%;
}

	#large_image img {
	}

	#large_image figcaption {
		display: none;
	}
	
#large_movie {
	background: url("../img/loading.gif") no-repeat scroll center 20px transparent;
	min-height: 300px;
	margin-bottom: 15px;
	max-width: 100%;
}
	
	#large_movie  iframe {
		width: 100%;
	}
	
	#large_movie  iframe  + iframe {
		margin-top: 20px;
	}

#thumbs_wrapper {
	display: block;
}

	#thumbs_wrapper .thumb {
		border: 1px solid rgba(0, 0, 0, 0.1);
		display: block;
		float: left;
		height: 75px;
		margin: 0 15px 15px 0;
		padding: 2px;
		width: 75px;
		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-ms-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
	}

	#thumbs_wrapper .active.thumb {
		opacity: 0.3;
	}

			#thumbs_wrapper .thumb:hover:after {
				background: url("../img/vergrootglas.gif") no-repeat scroll center center #fff;
				-webkit-background-size: 90%;
				-moz-background-size: 90%;
				background-size: 90%;
				content: "";
				display: block;
				height: 76px;
				margin: -81px 0 0;
				position: relative;
				width: 75px;
			}

			#thumbs_wrapper .thumb.active:after {
				background-color: rgba(255, 255, 255, 0.7);
				content: "";
				display: block;
				height: 75px;
				margin: -80px 0 0;
				position: relative;
				width: 75px;
			}

			#thumbs_wrapper .thumb.active:hover:after {
				background-image: none;
			}
	
	/* Magnifier */
	#magnifier {
		border-color: #FFD702 !important;
		border-color: rgba(255, 215, 2,0.6) !important;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		border-width: 2px !important;
		-webkit-box-shadow: 0 0 10px rgba(255, 255, 255, 0.9) inset, 0 0 10px rgba(0, 0, 0, 0.9);
		-moz-box-shadow: 0 0 10px rgba(255, 255, 255, 0.9) inset, 0 0 10px rgba(0, 0, 0, 0.9);
		-ms-box-shadow: 0 0 10px rgba(255, 255, 255, 0.9) inset, 0 0 10px rgba(0, 0, 0, 0.9);
		box-shadow: 0 0 10px rgba(255, 255, 255, 0.9) inset, 0 0 10px rgba(0, 0, 0, 0.9);
		cursor: none !important;
	}
	
#sale_image {
	width: 120px;
}
	
#back_link {
	display: block;
}
	
	#back_link img {
		max-width: 84px;
	}
	
	/* Social media */
	#social_wrapper {
	}
	
		#social_wrapper .social_btn_wrapper {
			display: block;
			cursor: pointer;				
			float: left;
			height: 30px;
			margin: 0 10px 10px 0;
		}
	
			#social_wrapper .social_btn_wrapper .social_icon {
				height: 30px;
				line-height: 29px;
				text-align: left;
				text-indent: -999em;
				width: 100%;
			}
	
			#social_wrapper .social_btn_wrapper .social_btn {		
				height: 20px;
				display: none;
				margin-top: 5px;
			}
		
		#btn_google {
			text-align: center;
			width: 70px;
		}
		
			#btn_google .social_icon {
				background: url("../img/social/google_plus.gif") no-repeat scroll 0 0 #fff;
			}
		
			#btn_google .social_btn > div {
				display: block;
				margin: 0 auto !important;
				width: 60px !important;
			}
			
		#btn_facebook {
			text-align: center;
			width: 112px;
		}
		
			#btn_facebook .social_icon {
				background: url("../img/social/facebook.gif") no-repeat scroll 0 0 #fff;
			}
		
			#btn_facebook .social_btn > div {
				display: block;
				margin: -1px auto 0 !important;
				width: 112px !important;
			}
		
				#btn_facebook .fb_iframe_widget span {
					height: 20px !important;
					width: 112px !important;
				}
		
				#btn_facebook .fb_iframe_widget iframe {
					height: 120px !important;
					width: 212px !important;
				}
			
		#btn_twitter {
			text-align: center;
			width: 99px;
		}
		
			#btn_twitter .social_icon {
				background: url("../img/social/twitter.gif") no-repeat scroll 0 0 #fff;
			}
		
			#btn_twitter .social_btn > iframe {
				display: block;
				margin: 0 auto 0 !important;
				width: 99px !important;
			}
			
		#btn_pinterest {
			text-align: center;
			width: 60px;
		}
		
			#btn_pinterest .social_icon {
				background: url("../img/social/pin-it.gif") no-repeat scroll 0 0 #fff;
			}
		
			#btn_pinterest .social_btn > a {
				display: block;
				margin: 0 auto 0 !important;
			}
			
		#btn_thumblr {
			text-align: center;
			width: 90px;
		}
		
			#btn_thumblr .social_icon {
				background: url("../img/social/tumblr.gif") no-repeat scroll 0 0 #fff;
			}
		
			#btn_thumblr .social_btn > span {
				display: block;
				margin: 0 auto 0 !important;
				width: 85px !important;
			}
	
/* =============================================================================
	About page
   ========================================================================== */
#over-eva-lenis-illustrator p:first-child:first-letter {
    color: #FFFFFF;
    display: none;
    text-indent: -9999em;
}

#over-eva-lenis-illustrator img.justifyleft {
    float: left;
    width: 83px;
}

#over-eva-lenis-illustrator img.justifyright {
    float: right;
	margin-left: 20px;
}

	#over-eva-lenis-illustrator img.justifyright:first-child {
		margin-top: 50px;
	}
	
#over-eva-lenis-illustrator h2 {
	margin-top: 25px;
}
	
/*
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/
*/
 
/* This element holds injected scripts inside iframes that in some cases may stretch layouts. So, we're just hiding it. */
#fb-root {
	display: none;
}
 
/* To fill the container and nothing else */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
	width: 100% !important;
}
 
/* Twitter */
#twitter-widget-0 {
	width: 100% !important;
}
	
/* =============================================================================
	Contact page
   ========================================================================== */
#contact_schaar {
    float: right;
    margin-top: -290px;
    width: 290px;
}

#contactform {
	margin-top: 50px;
}

	div.succes,
	div.errors {
		background-color: #48237C;
		color: #fff;
		display: inline-block;
		padding: 10px;
	}

		div.succes p,
		div.errors p {
			color: #fff;
			margin-bottom: 0;
		}

		div.succes strong,
		div.errors strong,
		div.succes h3,
		div.errors h3 {
			color: #fff;
		}

	form label {
		float: left;
		height: 60px;
		margin-right: 20px;
		text-indent: -999em;
		width: 280px;
	}	

	form input[type="text"], 
	form input[type="password"], 
	form input[type="email"], 
	form textarea, 
	form select {
		border: 2px solid #48237C;
		-webkit-border-radius: 0 0 0 0;
		-moz-border-radius: 0 0 0 0;
		border-radius: 0 0 0 0;
		font: 16px/22px 'Text Me One',"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
		margin: 8px 0 20px;
		padding: 6px;
		width: 360px;
	}
	
		form input[type="text"]:focus,
		form input[type="password"]:focus,
		form input[type="email"]:focus,
		form textarea:focus {
			border: 2px solid #48237C;
			color: #333;
			-moz-box-shadow: 0 0 5px 1px rgba(72, 35, 124, 0.6);
			-webkit-box-shadow: 0 0 5px 1px rgba(72, 35, 124, 0.6);
			box-shadow:  0 0 5px 1px rgba(72, 35, 124, 0.6); 
		}
	
	form textarea {
		height: 250px;
	}

	#contactform #name_wrapper label {
		background: url("/img/naam.gif") no-repeat scroll right -5px transparent;
	}

	#contactform #email_wrapper label {
		background: url("/img/e-mail.gif") no-repeat scroll right -5px transparent;
	}

	#contactform #message_wrapper label {
		background: url("/img/bericht.gif") no-repeat scroll right -5px transparent;
	}

	#contactform #submit {
		background: url("/img/verstuur.gif") no-repeat scroll 0 0 #FFFFFF !important;
		filter: none;
		border: 0 none;
		height: 50px;
		margin-bottom: 0;
		margin-left: 510px;
		text-indent: -999em;
		width: 177px;
		text-shadow: none;
		
		-webkit-transform: scale(0.9);
		-moz-transform: scale(0.9);
		-ms-transform: scale(0.9);
		-o-transform: scale(0.9);
		transform: scale(0.9);

		-webkit-transition: all 0.3s ease-in;
		-moz-transition: all 0.3s ease-in;
		-ms-transition: all 0.3s ease-in;
		-o-transition: all 0.3s ease-in;
		transition: all 0.3s ease-in;
	}

		#contactform #submit:hover {
			-webkit-transform: scale(1.2);
			-moz-transform: scale(1.2);
			-ms-transform: scale(1.2);
			-o-transform: scale(1.2);
			transform: scale(1.2);
		}

/* =============================================================================
	Media Queries
   ========================================================================== */
   
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		#large_image {
			-webkit-background-size: 40%;
			-moz-background-size: 40%;
			background-size: 40%;
			background-position: center 30px;
			min-height: 150px;
		}
		
		#contact_schaar {
			display: none;
		}

		form label {
			background-position: 0 0 !important;
			float: none;
			height: 65px;
			margin-right: 0;
			text-indent: -999em;
			width: 280px;
		}	

		#contactform #submit {
			margin-left: 0px;
			width: 200px;
		}
		
		#social_wrapper {
			margin-bottom: 2em;
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {

		h1 { font-size: 30px; line-height: 34px; margin-bottom: 14px;}
		h2 { font-size: 19px; line-height: 26px; margin-bottom: 10px; }
		h3 { font-size: 12px; line-height: 18px; margin-bottom: 8px; }
		h4 { font-size: 11px; line-height: 16px; margin-bottom: 4px; }
		h5 { font-size: 10px; line-height: 1em; }
	
		#logo_wrapper::after {
			display: none;
		}

			#large_image img {
				max-width: 100%;
				height: auto;
			}
			
		form input[type="text"], 
		form input[type="password"], 
		form input[type="email"], 
		form textarea, 
		form select {
			width: 90%;
		}
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/