/*   
Theme Name: Qoost Theme
Theme URI: http://www.qoost.nl;
Description: A Costum Wordpress theme for Qoost
Author: Pixel Monsters
Author URI: http://pixel-monsters.nl;
Version: 0.9
*/

/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 13px Helmet, Freesans, sans-serif;}

/* Using local fonts? Check out Font Squirrel's webfont generator: http://www.fontsquirrel.com/tools/webfont-generator */

/* We like off-black for text. */
body, select, input, textarea {color: #333;}

a {color: #03f;}
a:hover {color: #69f;}

/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;} 

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;} 

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }


/* And here begins the Wordpress fun.
-------------------------------------------------------------------------------*/

#page-wrap {width: 960px; margin: 20px auto;}

.post {}

.entry-content {}
.entry-content a {}
.entry-content a:hover {}

#meta {}
.postmetadata {}

#sidebar {}

.navgation {}
.next-posts {}
.prev-posts {}

#searchform {}
#s {}
#searchsubmt {}
	
ol.commentlist {list-style: none;}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {border-bottom: 1px dotted #666; padding: 10px;}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {font-style: normal;}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {float:right; margin: 0 0 10px 10px;}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {font-size: 10px;}
ol.commentlist li.comment div.comment-meta a {color: #ccc;}
ol.commentlist li.comment p {}
ol.commentlist li.comment ul {}
ol.commentlist li.comment div.reply {font-size: 11px;}
ol.commentlist li.comment div.reply a {font-weight: bold;}
ol.commentlist li.comment ul.children {list-style: none; margin: 10px 0 0;}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {border-left: 5px solid #555; margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-3 {border-left: 5px solid #999; margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-4 {border-left: 5px solid #bbb; margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {background: #fff;}
ol.commentlist li.odd {background: #f6f6f6;}
ol.commentlist li.parent {border-left: 5px solid #111;}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}


/* Print styles!
-------------------------------------------------------------------------------*/
@media print {

}

/*fonts*/
@font-face { 
	font-family: 'Segan-Light'; 
	src:url('./_/fonts/Segan-Light.ttf.woff') format('woff'),
	url('./_/fonts/Segan-Light.ttf.svg#Segan-Light') format('svg'),
	url('./_/fonts/Segan-Light.ttf.eot'),
	url('./_/fonts/Segan-Light.ttf.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal; 
}

@font-face {
  	font-family: 'always-forever';
    src:  url('./_/fonts/always-forever.ttf.woff') format('woff'),
    url('./_/fonts/always-forever.ttf.svg#always-forever') format('svg'),
    url('./_/fonts/always-forever.ttf.eot'),
    url('./_/fonts/always-forever.eot?#iefix') format('embedded-opentype'); 
    font-weight: normal;
    font-style: normal;
}

/*standart css*/
html{
	height: 100%;
}

.wrapper{
	height: 100%;
	width: 100%;
	position: absolute;

}

.inner{
	width: 960px;
	margin: auto;
}

/*navigatie*/
nav {
	position: absolute;
	height: 55px;
	z-index: 110;
	width: 100%;
	background: rgba(0, 70, 106, 0.8);
	bottom: 0px;
	box-shadow: 1px 5px 10px 0px rgba(29, 29, 29, 0.5);
}

nav ol{
	margin: 0px 0px 0px 205px;
}

nav li{
	float: left;
	list-style: none;
	margin: 0px 90px 0px 0px;
}

nav a{
	color: #6fc6dd;
	text-decoration: none;
	font-size: 25px;
	line-height: 55px;
}

nav .togglemenu{
	display: none;
}
.sticky{
	position: fixed;
	top: 0px;
}

/*header*/
.header{
	width: 100%;
	height: 100%;
	background: #0090bf;
	background: url('./_/images/header-bg.png') no-repeat top right #0090bf;
}

.header img{
	margin: 136px 0px 0px 0px;
	padding: 0px 0px 0px 15px;
}

.header h2{
	font-family: 'Segan-Light';
	font-size: 37.5px;
	position: absolute;
	text-align: right;
	bottom: 150px;
	color: #ffffff;
	width: 960px; /*even groot als de inner*/
	font-weight: normal;
	padding: 0px 15px 0px 0px;
}

/*quote*/
.quote {
	width: 100%;
	height: 295px;
	
}

#quote_1{
	background: url('./_/images/qoute1_bg.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

#quote_2{
	background: url('./_/images/qoute2_bg.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}

.quote h3{
	font-family: 'Segan-Light';
	font-size: 33.33px;
	color: #ffffff;
	padding: 92px 100px 92px 100px;
	font-weight: normal;
	text-align: center;

}

/*portfoio*/
.portfolio{
	width: 100%;
	overflow: hidden;
	position: relative;
	height: 590px;
}

.portfolio h1{
	font-family: 'Segan-Light';
	font-size: 37.5px;
	color: #0090bf;
	padding: 90px 0px 0px 0px;
	text-align: center;
	font-weight: normal;
}

.portfolio ul{
	position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    margin: 62px 0px 10px 0px;
}

.portfolio li{
	height: 175px;
	width: 240px;
	background: blue;
	float: left;
	overflow: hidden;
    width: 12.5%; /* Fallback */
    width: -webkit-calc(100% / 8);
    width: calc(100% / 8);
    position: relative;
}

.portfolio li img{
	height: auto;
	width: 100%;
}

.portfolio li a div {
    position: absolute;
    background: rgba(0,144,191,0.5);
    width: 100%;
    height: 100%;
}

.portfolio li a div span{
	font-family: 'Segan-Light';
	font-size: 25px;
	display: block;
	padding: 10px 0;
	margin: 40px 20px 20px 20px;
	text-transform: uppercase;
	font-weight: normal;
	color: rgba(255,255,255,0.9);
	/*text-shadow: 1px 1px 1px rgba(0,0,0,0.2);*/
	/*border-bottom: 1px solid rgba(255,255,255,0.5);*/
	/*box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 -10px 0 rgba(255,255,255,0.3);*/
}

.portfolio h4{
	font-family: 'Segan-Light';
	font-size: 25px;
	color: #0090bf;
	padding: 0px 0px 15px 0px;
	text-align: center;
	cursor: pointer;
	font-weight: normal;
}

/*portfolio placeholder*/
#portfolioplaceholder{
	background: url('./_/images/footer-bg.png') no-repeat top right #ffffff;
	position: absolute;
	height: 100%;
	top: 0px;
	right: 100%;
	width: 100%;
	text-align: center;
	display:none;
}

#portfolioplaceholder #back{
	font-family: 'Segan-Light';
	font-size: 25px;
	color: #0090bf;
	padding: 65px 0px 0px 19px; 
	cursor: pointer;
	text-align: left;
}

#portfolioplaceholder .arrows{
	width: 187px;
	float: left;
	cursor: pointer;
	position: relative;
}

#portfolioplaceholder #left{
	text-align: right;
	padding: 0px 50px 0px 0px;
	top: 138px;
}

#portfolioplaceholder #right{
	padding: 0px 0px 0px 50px;
	top: 138px;
}

#portfolioplaceholder .arrows p{
	font-family: 'Segan-Light';
	font-size: 33px;
	color: #0090bf;
}

#portfolioplaceholder #imageplaceholder{
	width: 585px;
	height: 385px;
	float: left;
	overflow: hidden;
	margin: -49px 0px 0px 0px;
}

#portfolioplaceholder #imageplaceholder ul{
	margin: 0px;
	width: 10000000px;
	height: 385px;
	overflow: hidden;
}

#portfolioplaceholder #imageplaceholder li{
	float: left;
	width: 585px;
	height: 385px;
	background: none;
}

/*#portfolioplaceholder ul{*/
#portfolioplaceholder .bollen{
	height: 62px;
}

#portfolioplaceholder .bollen li{
	width: 16px;
	height: 16px;
	background: #0090bf;
	border-radius: 16px;
	text-align:center;
	display: inline-block;
	margin: 27px 10px 10px 0px;
	opacity: 0.5;
	float: none;
	cursor: pointer;
}

#portfolioplaceholder li.selected{
	opacity: 1;
}

#portfolioplaceholder #omschrijving{
	font-family: 'Segan-Light';
	font-size: 25px;
	color: #0090bf;
	margin: -10px 0px 0px 0px;
}

/*responsive*/
@media screen and (max-width: 2520px) {
   .portfolio li {
        width: 10%; /* Fallback */
        width: -webkit-calc(100% / 10);
        width: calc(100% / 10);
    }
}

@media screen and (max-width: 2280px) {
   .portfolio li {
        width: 11,1111%; /* Fallback */
        width: -webkit-calc(100% / 9);
        width: calc(100% / 9);
    }
}

@media screen and (max-width: 2040px) {
   .portfolio li {
        width: 25%; /* Fallback */
        width: -webkit-calc(100% / 8);
        width: calc(100% / 8);
    }
}

@media screen and (max-width: 1800px) {
   .portfolio li {
        width: 14,2857%; /* Fallback */
        width: -webkit-calc(100% / 7);
        width: calc(100% / 7);
    }
}

@media screen and (max-width: 1560px) {
   .portfolio li {
        width: 16,6666%; /* Fallback */
        width: -webkit-calc(100% / 6);
        width: calc(100% / 6);
    }
}

@media screen and (max-width: 1320px) {
   .portfolio li {
        width: 20%; /* Fallback */
        width: -webkit-calc(100% / 5);
        width: calc(100% / 5);
    }
}

@media screen and (max-width: 1080px) {
   .portfolio li {
        width: 25%; /* Fallback */
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
    }
}

@media screen and (max-width: 840px) {
   .portfolio li {
        width: 33,3333%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
    }
}

@media screen and (max-width: 600px) {
   .portfolio li {
        width: 50%; /* Fallback */
        width: -webkit-calc(100% / 2);
        width: calc(100% / 2);
    }
}

@media screen and (max-width: 360px) {
   .portfolio li {
        width: 100%;
         width: -webkit-calc(100% / 1);
        width: calc(100% / 1);
    }

	.portfolio li img{
		height: auto;
		width: 100%;
	}

}

.portfolio h4{
	clear: both;
}

/*pakketten*/
.pakketten{
	width: 100%;
	height: 590px;
	background: #6fc6dd;
}

.pakketten h3{
	font-family: 'Segan-Light';
	font-size: 33.33px;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
}

.pakketten p{
	font-family: 'Segan-Light';
	font-size: 25px;
	color: #0090bf;
	font-weight: normal;
	text-align: center;
}

.pakketten #text1{
	padding: 100px 0px 0px 0px;
}

.pakketten #text2{
	padding: 42px 0px 0px 0px;
}


#qpakketen{
	margin: 24px 50px 0px 50px;
}

.qdiv{
	width: 33%;
	float: left;
	text-align: center;
}
.qdiv p{
	color: #ffffff;
}

/*reacties*/
.reacties{
	width: 100%;
	/*height: 295px;*//*orgineel*/
	height: 395px;
	background: #0090bf;
	text-align: center;
}

.reacties h3{
	font-family: 'Segan-Light';
	font-size: 33.33px;
	color: #ffffff;
	font-weight: normal;
	text-align: center;
	padding: 24px 0px 0px 0px;
	/*text-shadow: 0px 2px 2px rgba(29, 29, 29, 0.75);*/
}

/*reactie li*/
.reacties_li{
	display: none;
}

.reacties_li:first-child{
	display: block;
}

.reacties p{
	font-family: 'always-forever';
	font-size: 50px;
	color: #ffffff;
	padding: 0px 0px 0px 0px;
	height: 200px; /*werkt nog niet perfect*/
	display: table-cell;
	vertical-align: middle;
	width: 960px;
}

.reacties h4{
	font-family: 'Segan-Light';
	font-size: 25px;
	color: #ffffff;
	padding: 8px 0px 0px 0px;
	font-weight: normal;
}

.reacties li.bol{
	width: 16px;
	height: 16px;
	background: #ffffff;
	border-radius: 16px;
	text-align:center;
	display: inline-block;
	margin: 27px 10px 0px 0px;
	opacity: 0.5;
	cursor: pointer;
}

.reacties li.bol.selected{
	opacity: 1;
}

/*footer*/
footer{
	width: 100%;
	height: 590px;
	background: url('./_/images/footer-bg.png') no-repeat top right #ffffff;
	overflow: hidden;
	position: relative;
}

footer #logo-footer{
	margin: 99px 0px 108px 0px;
}

footer p{
	font-family: 'Segan-Light';
	font-size: 29px;
	color: #0090bf;
	font-weight: normal;
}

footer ul{
	margin: -61px 0px 0px 309px;
}


footer ul li{
	float: left;
	margin: 0px 15px 0px 0px;
}

footer #foto-me{
	position: relative;
	bottom: 348px;
	overflow: hidden;
}

/*portfolio placeholder*/
footer #map_overlay{
	background: red;
	position: absolute;
	height: 100%;
	top: 0px;
	right: 100%;
	width: 100%;
	text-align: center;
}

footer #back{
	position: absolute;
	z-index: 100;
	top:20px;
    left:50px;
    font-family: 'Segan-Light';
	font-size: 25px;
	color: #0090bf;
	cursor: pointer;
	text-align: left;
}

/*ipad portrait*/
@media only screen and (max-width: 768px) {
	.inner{
		width: 768px;
		margin: auto;
	}

	nav ol{
		margin: 0px 0px 0px 90px;

	}

	.header h2{
		width: 100%; 
	}

	/*portfolioplaceholder*/
	#portfolioplaceholder .arrows{
		width: 75px;
	}

	#portfolioplaceholder #left{
		text-align: right;
		padding: 0px 25px 0px 25px;
	}

	#portfolioplaceholder #right{
		padding: 0px 0px 0px 25px;
	}


	.reacties p{
		height: 225px; /*werkt nog niet perfect*/
		width: 768px;
	}

	footer .inner{
		width: 100%;
		padding: 0px 10px 0px 10px;
	}

	footer #foto-me{
		position: relative;
		bottom: 150px;
		overflow: hidden;
	}
}

/*mobiel portrait*/
@media only screen and (max-width: 675px) {
	/*header mobiel*/
	.header img{
		margin: 136px 0px 0px 15px;
		width: 190px;
	}

	.header h2{
		text-align: right;
		margin: 75px 15px 0px 0px;
		width: 100%;
		left: 0px;
	}

	.inner{
		width: 100%;
		margin: auto;
	}

	/*nav*/
	nav {
		text-align: center;
		overflow:hidden;
	}

	nav ol{
		margin: 0px 0px 0px 0px;
	}
	nav li{
		float: none;
		margin: 0px 0px 0px 0px;
	}

	nav .togglemenu{
		display: block;
	}
	/*quote*/
	.quote {
		height: auto;
	}

	.quote h3{
		font-family: 'Segan-Light';
		font-size: 33.33px;
		color: #ffffff;
		padding: 25px 10px 25px 10px;
		font-weight: normal;
		text-align: center;

	}
	/*portfolio*/
	.portfolio{
		height: auto;
	}

	.portfolio ul{
	    height: 350px;
	}

	.portfolio li{
		/*width: 100%;*/
	}

	.portfolio li img{
		height: auto;
		/*width: 100%;*/
	}

	/*portfolio placeholder*/
	#portfolioplaceholder .arrows{
		width: 16px;
	}

	#portfolioplaceholder #left{
		padding: 0px 125px 0px 0px;
		top: 250px;
		width: 50%;
		position: absolute;

	}

	#portfolioplaceholder #right{
		padding: 0px 0px 0px 125px;
		top: 250px;
		width: 50%;
		position: absolute;
		right: 0px;
		text-align: left;
	}

	#portfolioplaceholder #imageplaceholder{
		width: 300px;
		height: 197px;
		background: red;
		float: none;
		margin: auto;

	}

	#portfolioplaceholder #imageplaceholder ul{
		height: 197px;
	}

	#portfolioplaceholder #imageplaceholder li{
		width: 300px;
		height: 197px;
	}

	/*pakketten*/
	.pakketten{
		height: auto;
		background: #6fc6dd;
		overflow:hidden;
	}

	.pakketten #text1{
		padding: 72px 10px 0px 10px;
	}

	.pakketten #text2{
		padding: 42px 10px 0px 10px;
	}

	#qpakketen{
		margin: 24px 15px 25px 10px;
	}

	.qdiv{
		width: 100%;
		float: none;
		text-align: center;
		overflow: hidden;
		margin: 25px 0px 0px 0px;
	}

	.qdiv img{
		float: left;
		margin: 0px 10px 0px 0px;
	}
	
	.qdiv p{
		float: left;
		text-align: left;
		font-size: 24px;
	}

	/*reacties*/
	.reacties{
		height: auto;
	}

	.reacties li{
		margin: 0px 10px 15px 0px;
	}


	.reacties li.bol{
		margin: 27px 10px 10px 0px;
	}

	.reacties p{
		font-size: 40px;
		height: 300px; /*werkt nog niet perfect*/
	}

	.reacties h4{
		font-size: 20px;
		height:  60px;
	}
	
	/*footer*/
	footer #foto-me{
		display: none;
	}


    footer ul{
		margin: 0px 0px 0px 0px;
	}

}/*end of mobiel css*/


/*only ipad fix*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
 	#quote_1{
		/*background: url('./_/images/qoute1_bg.jpg') no-repeat center center scroll; werkende*/ 
		background: url('./_/images/qoute1_bg.jpg') no-repeat center center scroll;
	}

	#quote_2{
		background: url('./_/images/qoute2_bg.jpg') no-repeat center center scroll; 
	}
}/*end ipad*/

/*Iphone 5 Fix*/
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
	 #quote_1{
		background: url('./_/images/qoute1_bg.jpg') no-repeat center center scroll; 
	}

	#quote_2{
		background: url('./_/images/qoute2_bg.jpg') no-repeat center center scroll; 
	}
}/*end iphone 5*/

/*Iphone < 5 Fix*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#quote_1{
		background: url('./_/images/qoute1_bg.jpg') no-repeat center center scroll; 
	}

	#quote_2{
		background: url('./_/images/qoute2_bg.jpg') no-repeat center center scroll; 
	}
}