/*

Theme Name: Photostuff

Theme URI: http://www.seyoch.nl/

Description: Webdesign for Studio Foto&Zo.

Author: Jules Heynen, Mediadesigner/Owner @ Seyoch MediaDesign

Author URI: http://www.seyoch.nl/

Version: 1.0

Tags: Photo Stuff, Studio, White, Orange, Fullscreen Homepage



License: only studiofotozo.nl

License URI: www.seyoch.nl/algemenevoorwaarden

*/



@charset "utf-8";

/* CSS Document */



/* 	main color: 	232828
	second color:	4E5C5E
	
	White:			E4E7E8
	shade light:	9DA9AB
	shade dark:		69786A

	old color:		f6881f;
 */



/*-------------------------------------------------------------------
	CSS RESET & PRESETS
-------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
	font-family: 'Roboto', sans-serif;
	vertical-align:top;
	box-sizing:border-box;
}
:focus { outline: 0;}
ol, ul { list-style: none;}
.clearfix{ clear:both; width:100%; margin:0; padding:0; height:0;}
.a_nodeco, .a_nodeco:hover, .a_nodeco:active, .a_nodeco:visited{ text-decoration:none; }
a, a img{border:none; text-decoration:none; outline:none;}

/*-------------------------------------------------------------------
	TYPOGRAPHY
-------------------------------------------------------------------*/
p, h1, h2, h3, h4, h5, h6{line-height:1.5;}
p{font-size:14px;}

h1{	
	font-size:72px;
	line-height:80px;
	font-weight:700;
	font-style:normal;
	color:#232828;
	letter-spacing:-2px;
}
h2{	
	font-size:36px; 
	line-height:40px;
	font-weight:700; 
	font-style:normal; 
	color:#666; 
}
h3{	font-size:20px; font-weight:normal; font-style:normal; color:#232828; }
h4{	font-size:20px; font-weight:bold; font-style:italic; color:#232828; }

@media only screen and (max-width: 756px) {
	h1{ font-size:36px;}
	h2{ font-size:24px;}
	.port_item_info{ font-size:12px;}
}

/*-------------------------------------------------------------------
	FRAME
-------------------------------------------------------------------*/

html{
	width:100%;
	min-height:100%;
	background-color:#fff;
	color:#0a0a0a;
	
}
body{
	width:100%;
	min-height:100%;
 }
#pagewrapper{
	position:relative;
	width:100%;
	min-height:100vh;
	vertical-align:top;
} 

/*-------------------------------------------------------------------
	HEADER
-------------------------------------------------------------------*/

#header{
	position:relative;
	width:100%;
	height:83px;
	background-color:rgba(255,255,255,035);
	z-index:80;
	border-bottom:2px solid #232828;
}
#logo_a{
	float:left;
	display:block;
	margin:0px; padding:0px;
}
#logo{
	height:120px;
	margin: 24px 24px;
    padding:0px;
    box-shadow: 0px 2px 6px 0px rgba(23,28,28,0.3);
}
@media only screen and (max-width: 1024px) {
	#logo{
		height:100px;
		margin: 25px;
		padding:0px;
	}
}
/*-------------------------------------------------------------------
	MENU - MAIN TOP
-------------------------------------------------------------------*/


#menu{
	display:block;
	float:right;
	position:relative;
	margin-right:50px;
	z-index:88;
	background-color:#none;
}

#menu .menu-item-has-children > a{
	padding-right:32px;
}
#menu .menu-item-has-children > a:before{
	display:block;
	position:absolute;
	top:32px; right:10px;
	/*font-family: 'dotcomgly';
    content: '\e802';*/
	 font-family: 'Glyphicons Halflings';
 	 content: "\e114";

	  font-style: normal;
	  font-weight: normal;
	  line-height: 1;
	  font-size:12px;
	margin-left:7px;
}/* '' */
#menu ul{
	font-size:14px;
}
#menu ul li{
	display:inline-block;
	height:79px;
	position:relative;
}
#menu > ul > li > a{
	display:block;
	padding:32px 10px;
	color:#121212;
	text-decoration:none;
	font-size:12px;
	text-transform:uppercase;
	width:100%;
	height:60px;
}
#menu > ul > li > a:after{
	  display: block;
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0;
  height: 5px;
  background-color: #232828;
  content: "";
  transition: width 0.25s;
}
#menu > ul > li > a:hover {
  color: #232828;
}
#menu > ul > li > a:hover:after {
  width: 100%;
}
#menu ul li:hover a{
	color:#232828;
}
#menu ul ul{
	display:none;
	position:absolute;
	left:-20px; top:80px;
	background-color:#FFF;
	min-width:150px;
}
#menu ul li:hover ul{
	display:block;
}
#menu ul ul li{
	height:auto;
	width:100%;
}
#menu ul ul li~li{
	border-top:dotted 1px #232828;
}
#menu ul ul li a{
	display:block;
	padding:3px 10px;
	color:#121212;
	text-decoration:none;
	font-size:12px;
	text-transform:uppercase;
	width:100%;
}

#menu ul li:hover ul li a{
	display:block;
	padding:10px 28px;
	width:100%;
	color:#000;
	font-weight:normal;
	box-sizing:border-box;
}
#menu ul li ul li:hover a{
	color:#232828;
}

#menu_hamburger{
	display:none;
	padding:20px;
	font-size:36px;
	float:right;
	z-index:89;
	color:#333;
	
}
#menu_hamburger:hover{ color:#232828; }

@media only screen and (max-width: 960px) {
	#menu_hamburger{display:block;}
	#menu{display:none;}
}



/*-------------------------------------------------------------------
	CONTENT
-------------------------------------------------------------------*/
#contentwrapper{
	position:relative;
	width:100%;
	min-height:80vh;
	background-color:#none;
	overflow:auto;
	margin:0px;	
	border:none;
	padding-bottom:50px;
}
#content{
	position:relative;
	z-index:10;
	background-color:#FFF;
	margin:0 auto;
	margin-top:50px;
	box-sizing:border-box;
	width:100%;
	padding:50px 12%;
	border:none;
}

@media only screen and (max-width: 960px) {
	#content{padding:30px 6%;}
}


#sideimg_content{
	float:right;
	width:200px;
}
#sideimg_content_left{
	float:left;
	width:280px;
}
#sideimg_content img.the_side_img{
	width:200px;
	margin-bottom:40px;
}
#sideimg_content_left img.the_side_img{
	width:280px;
	margin-bottom:40px;
}
#contact_part, #contact_part p{
	font-size:12px;
}
#real_content{
	padding-right:220px;
	width:100%;
}
#real_content_right{
	padding-left:318px;
	width:100%;
}
@media only screen and (max-width: 960px) {
	#sideimg_content{width:150px;}
	#sideimg_content img.the_side_img{width:150px;}
	#real_content{padding-right:165px;}
}
@media only screen and (max-width: 756px) {
	#sideimg_content{
		float:none;
		display:block;
		width:80%;
		margin:0 auto;
	}
	img.the_side_img{width:100%;}
	#contact_part{display:none;}
	#real_content{padding-right:0px;}
	#real_content_right{padding-left:0px;}
}
#bottom_img{
	position:relative;
	width:100%;
	margin-top:50px;
}
.the_bottom_img{
	display:block;
	position:relative;
	margin:0px;
	width:100%;
	height:auto;
}
/*-------------------------------------------------------------------
	TEMPLATE TOP IMAGE PARTS
-------------------------------------------------------------------*/

#template_top_img{
    position: relative;
    display:block;
    margin: 0;
    padding: 0;
}
    #template_top_image{
        position: relative;
        display: block;
        width: 100%;
        height: 50vh;
        background-size: cover !important;
        background-position: center !important;
    }
        h1.template_top_image_heading{
            display: block;
            position: absolute;
            margin: 0 auto;
            bottom: 0;
            padding: 30px 100px;
            width: 100%;
            max-width: 1680px;
            color:rgba(255,255,255,0.8);
        }

/*-------------------------------------------------------------------
	CONTENT PARTS
-------------------------------------------------------------------*/

#content {
	color:#666;
	overflow:hidden;
	line-height:1.5;
}
#content p{ line-height:1.5; margin-bottom:12px;}
#content h1{
	margin-bottom:38px;
	letter-spacing:-2px;
}
#content h2{margin-bottom:25px;}
#content a{color:#232828; text-decoration:none; font-weight:700;}
#content a:hover{color:#333; text-decoration:none;}
#content a:visited{color:#232828; text-decoration:none;}

#content .full_img{ display:block; width:100%; }
#content img{ display:block; max-width:100%; height:auto;}
.post{
	margin-bottom:20px;	
	position:relative;
}
.post~.post{
	border-top:2px solid #232828;
	margin-top:20px;
	padding-top:20px;
}
.archive_title_a{
	display:block;
	padding-right:30%;
	text-decoration:none; 
	color:#666;
	
}
.archive_title_a:visited{text-decoration:none; color:#666;}
.archive_title_a:hover h2{text-decoration:none; color:#232828;}
.the_date{
	position:absolute;
	top:0;
	right:0;
	background-color:#232828;
	color:#fff;
	padding:5px;
	font-size:14px;
}
.the_date span.d{
	display:block;
	font-size:20px;
	font-weight:bold;
}
.the_date span.m{
	text-transform:uppercase;
}
.the_date span.y{
	font-style:italic;
}
.post h1{
	padding-right:60px;
}
.blog_img{
	width:100%;
	background-size:cover;
	height:346px;
	margin-bottom:20px;
}




iframe#Gmap{margin-bottom:20px;}

form#contact_form{
	margin-bottom:50px;
}
.formlabel{
	padding-top:20px;
	padding-bottom:5px;
}
input.formtxt{
	padding:5px;
	width:50%;
	border:1px solid #999;
}
textarea.formtxt_area{
	padding:5px;
	width:100%;
	height:500px;
	border:1px solid #999;
}
input#formsubmit{
	padding:10px;
	border-radius:5px;
	background-color:#232828;
	color:#fff;
	margin:30px;
	border:none;
}

/*-------------------------------------------------------------------
	FOOTER CSS
-------------------------------------------------------------------*/


#social_wrap{
	position:relative;
	width:100%;
	overflow:auto;
	margin:0px;	
	padding-bottom:150px;
}
 #social_placer{
	position:relative;
	 margin:0 auto;
	margin-top:5px;
	max-width:500px;
	text-align:center;
 }
  #social_placer:after{
	  position:relative;
	  display:block;
	  margin:0 auto;
	  content:"";
	  font-size:16px;
	  font-weight:400;
	  color:#232828;
	  text-align:center;
  }

  a.social_a{
	  text-decoration:none; outline:none;
	  display:inline-block;
	  opacity:0.75;
  }
  a.social_a:hover{ opacity:1;}
  #fb{}
  #li{}
  #in{}
  a.social_a img{
	  width:51px; height:51px;
  }


#footer{ 
	display:block;
	position:absolute;
	bottom:0px;
	width:100%;
	height:30px;
	border-top: 2px solid #232828;
	background:#FFF;
	z-index:1;
}
#footerfoot{padding:10px 50px;}
#footerfoot:after{
	display:block;
	content:"";
	clear:both;
	}
.footer_part{}
  a.copyright{ text-decoration:none; color:#232828;}
	  #footer_left{ float:left; padding: 10px;} 
	  #footer_right{ float:right;}




#fnav{
	float:right;
	margin:10px 2px;
}
#fnav ul{
	
}
#fnav ul li{
	display:inline-block;
}
#fnav ul li a{
	text-decoration:none;
	color:#666;
	font-size:14px;
	margin:10px 1px;
}
	


/*----------------------------------------------------------------------
	CSS HOME PAGE 
--------------------------------------------------------------------- */

#sliderwrppr{
	position:absolute;
	top:0px;
	padding-top:0px;
	z-index:1 !important;
	height:100vh;
	width:100%;
	background:#1a1a1a;
}
#slidercontainer{
	position: absolute;
	top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
	z-index:2 !important;
}
.slider{
	position: absolute;
	top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
}

.page_fullsize_banner{
	position:relative;
	width:100%;
	height:100%;
	background-color:#1a1a1a;
	background-size:cover !important;
	background-position:center !important;
}
	.slide_info{
		position:absolute;
		width:100%;
		top:35vh;
		padding:25px;
		background:rgba(0,0,0,0.3);
		color:#fff;
		text-align:center;
	}
			.slide_title{
				margin-bottom:16px;
				font:700 50px/60px 'Kameron';
				letter-spacing:-1px;
				color:#FFF;
				text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
			}
			.slide_text p{
				font-size:16px;
				font:400 33px/40px 'Kameron';
				color:#E4E7E8;
				text-shadow: 1px 1px 5px rgba(0,0,0,0.3);
			}

@media only screen and (max-width: 960px) {
			.slide_title{
				margin-bottom:14px;
				font:700 42px/50px 'Kameron';
			}
			.slide_text{
				font-size:16px;
				font:400 30px/46px 'Kameron';
			}
}
@media only screen and (max-width: 756px) {
			.slide_title{
				margin-bottom:14px;
				font:700 36px/43px 'Kameron';
			}
			.slide_text{
				font-size:16px;
				font:400 25px/30px 'Kameron';
			}
}


/*----------------------------------------------------------------------
	CSS PORTFOLIO SINGLE PAGE 
--------------------------------------------------------------------- */

#back2portfoliogrid{
	position:relative;
	float:right;
}
#back2portfoliogrid a{
	color:#232828;
	font-weight:700;
	letter-spacing:-1px;
	font-size:14px;
}
#project{
	width:50%;
	float:left;
	height:auto;
}
 #portalshortinfo{ 
	margin-bottom:20px;
}
 #portalshortinfo h1{}
 #portalshortinfo .date{ color:#CCC;}
 #portalshortinfo p{}

#photos{
	position:relative;
	width: 100%;	
}
#gallery{
	postion:relative;
	width: 100%;
}
.galleryPhoto{
	display:block;
	position:relative;
	float:left;
	width:23%;
	padding-bottom:18%;
	background-size:cover;
	position:relative;
	margin:1%;
}
.rollover{
	position:absolute;
	top:0;
	left:0;
	width:100%; height:100%;
	background-color:none;
	transition: background-color 0.35s;
	
}
.rollover:hover{
	background-color:rgba(0,0,0,0.5)
}
.rollover_center{
	margin:0 auto;
	position:relative;
	margin-top:35%;
	padding-top:-15px;
	text-align:center;
	color:#FFF;
	display:none;
	visibility:hidden;
	transition: visibility 0.35s;
	transition-delay: visibility 0.35s;
}
.rollover_center:after{
	position:relative;
	 font-family: 'Glyphicons Halflings';
 	 content:"\e140";

	  font-style: normal;
	  font-weight: normal;
	  line-height: 1;
	  font-size:30px;
}/* 'î ‚' */
.rollover:hover .rollover_center{
	display:block;
	visibility:visible;
}

/*----------------------------------------------------------------------
	CSS LIGHTBOX NAVIGATOR 
--------------------------------------------------------------------- */

#lb_navigator{
	position:absolute;
	bottom:0px;
	width:100%;
	text-align:center;
}
  #lb_buttons{
	  display:inline-block;
	  width:auto;
	  margin:0 auto;
	  padding:10px;
	  background-color:rgba(255,255,255,0.5);
  }
    a.lightbox_button{
		display:inline-block;
		padding:4px;
	}
.nav_sphere{
	width:24px;
	height:24px;
	background-color:#232828;
	color:#fff;
	border-radius:12px;
	text-align:center;
	padding-top:2px;
	
	
}


/*----------------------------------------------------------------------
	CSS PORTFOLIO GRID PAGE 
--------------------------------------------------------------------- */

#portfoliogrid{
	position:relative;
	width:100%;
}
.port_item{
	position:relative;
	float:left;
	width:25%;
	margin:0px 0px;
	color:#232828; text-decoration:none;
	/* min-height:250px; */
	padding-bottom:25%;
	background-size:cover;
	background-position:center;
}
@media only screen and (max-width: 756px) {
	.port_item{
		width:50%;
		padding-bottom:50%;
	}
}
.port_item_info{
	position:absolute;
	bottom:0px;
	background-color:rgba(255,255,255,0.8);
	width:100%;
	text-align:center;
	padding:3px;
	opacity:0.7;
	transition: opacity 0.35s;
	border-top:1px solid #232828;
}
.port_item:hover .port_item_info{
	opacity:1;		
}

#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color:rgba(0,0,0,0.8); 
    text-align:center;
	display:none;
	z-index:97;
}
#lightbox p {
	display:block;
	position:absolute;
	top:0; right:0;
    text-align:right; 
    color:#fff; 
    padding:24px; 
    font-size:15px; 
	z-index:99;
}
#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:100%;
	max-height:100vh;
	z-index:98;
}
#lightbox_close{
	position:relative;
	z-index:100;
	cursor:pointer;}









/*----------------------------------------------------------------------
	CSS MOBILE NAVIGATION 
--------------------------------------------------------------------- */

    #total_MOB_NAV{
		display:none;
		position:absolute;
		top:0px;
		left:0px;
		width:100%; height:100%;
		background-color:#fff;
		color:#666;
		z-index:101 !important;
		overflow:auto;
	}
    #total_MOB_NAV_banner{
		width:100%;
		padding-top:10px;
		padding-bottom:10px;
		background-color:#FFF;
	}
    img.MOB_NAV_logo{ 
		height:30px;
		margin:15px 25px;
	}
        #MOB_NAV_close{
			position:absolute;
			top:0px; right:0px;
			padding:15px 30px;
			text-decoration:none;
			font-weight:700;
			text-align:center;
		}

    		#con_MOB_NAV{
				width:100%;
				
			} 
            .mob_nav{
				width:100%
			}
            .conclMOB_NAV li{
				border:none;
				border-top:1px solid #232828;
			}
            .conclMOB_NAV li a{
				display:block;
				padding:5px 10px;
				width:100%;
				text-align:center;
				text-decoration:none;
				color:#232828;
				font-weight:700;
				text-transform:uppercase;
				font-size:16px
			}
            .mob_nav li a:hover{
				text-decoration:none;
				color:#333;
			}
            .conclMOB_NAV ul{
				display:block;
				width:100%;
			}
            .conclMOB_NAV ul ul li{
				border-top:1px solid #232828;
			}
            .conclMOB_NAV ul ul li~li{
				border-top:dotted 1px #ccc;
			}
            .conclMOB_NAV ul ul li a{
				padding:5px;
				color:#666;
				font-size:14px;
				font-weight:500;
			}
            





/*----------------------------------------------------------------------
	CSS SHORTCODE : PRICING 
--------------------------------------------------------------------- */



#pricing_sphere{
	position:relative;
	display:block;
	border:none;
	background-color:#000;
	color:#fff;
	font-stretch:condensed;
		font-weight:500;
}
	.pr_size-s{
		width:100px;
		height:100px;
		border-radius:50px;
		font-size:36px;
		letter-spacing:-2px;
		padding-top:24px;
	}
	.pr_size-m{
		width:150px;
		height:150px;
		border-radius:75px;
		font-size:54px;
		letter-spacing:-4px;
		padding-top:32px;
	}
	.pr_size-l{
		width:200px;
		height:200px;
		border-radius:100px;
		font-size:68px;
		letter-spacing:-4px;
		padding-top:42px;
	}
		.pricing_price{
			display:block;
			width:100%;
			text-align:center;
			position:relative;
		}
		.pricing_from{
			display:none;
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			text-align:center;
			font-weight:500;
		}