/*  
Theme Name: Yannick De Smet
Theme URI: http://yannick.de-smet.me/
Version: 1
Author: De Smet Yannick
Author URI: http://yannick.de-smet.me/
*/

/* RESET
****************************************************************************/
/* CSS reset based on the one of Eric Meyer */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 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: inherit; vertical-align: baseline; } :focus { outline: 0; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } .accessibility, .description, #logo span { position: absolute; margin-top: -9999%; }
* html .group { height: 1%; } *+html .group{ display: inline-block; } .group:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');


/* STRUCTURE
****************************************************************************/
body { margin: 0; padding: 0; background: #FFFFFF; }
.site { margin: 0 2%; text-align: center; }


/* HEADER
****************************************************************************/
.header { margin: 200px 0 100px 0; }
.header p, .header a { font: 400 26px/26px 'Amatic SC', cursive; margin: 20px 0 0 0; padding: 0; color: #666666; text-decoration: none; }
.header h1 a { font: 400 80px/76px 'Amatic SC', cursive; margin: 0; padding: 0; color: #666666; }
.header h2 a { font: 400 40px/46px 'Amatic SC', cursive; margin: 0; padding: 0; color: #888888; }


/* SIZES
****************************************************************************/
.largest { width: 100%; } .largest.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .largest.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
.large { width: 61.8047%; } .large.padded3 { width: 55.8047%; padding-left: 3%; padding-right: 3%; } .large.padded6 { width: 49.8047%; padding-left: 6%; padding-right: 6%; }
.half { width: 50%; } .half.padded3 { width: 44%; padding-left: 3%; padding-right: 3%; } .half.padded6 { width: 38%; padding-left: 6%; padding-right: 6%; }
.third { width: 33.3333%; } .third.padded3 { width: 27.3333%; padding-left: 3%; padding-right: 3%; } .third.padded6 { width: 21.3333%; padding-left: 6%; padding-right: 6%; }
.medium { width: 38.1953%; } .medium.padded3 { width: 32.1953%; padding-left: 3%; padding-right: 3%; } .medium.padded6 { width: 26.1953%; padding-left: 6%; padding-right: 6%; }
.small { width: 23.6064905791%; } .small.padded3 { width: 17.6064905791%; padding-left: 3%; padding-right: 3%; } .small.padded6 { width: 11.6064905791%; padding-left: 6%; padding-right: 6%; }
.quarter { width: 25%; } .quarter.padded3 { width: 19%; padding-left: 3%; padding-right: 3%; } .quarter.padded6 { width: 13%; padding-left: 6%; padding-right: 6%; }
.smallest { width: 19.09765%; } .smallest.padded3 { width: 13.09765%; padding-left: 3%; padding-right: 3%; } .smallest.padded6 { width: 7.09765%; padding-left: 6%; padding-right: 6%; }

/* PORTFOLIOLIST
****************************************************************************/
.portfolio { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0; list-style: none; }
.portfolio li { display: block; background: #efebe2; color: #191919; }
.portfolio li .projectmeta { width: 22.1953%; padding: 6% 8% 0 8%; }
.portfolio li img { width: 61.8047%; }
.portfolio li .projectmeta h3 { font: 400 45px/50px 'Amatic SC', cursive; margin: 0 0 40px 0; padding: 0; color: #191919; letter-spacing: 7px; }
.portfolio li .projectmeta p { font: 400 14px/25px 'Open Sans', Arial, sans-serif; margin: 0 0 30px 0; padding: 0; color: #191919; }
.portfolio li .projectmeta a { color: #191919; text-decoration: none; }
.portfolio li .projectmeta a.button { font: 600 13px/18px 'Open Sans', Arial, sans-serif; margin: 0 0 20px 0; padding: 10px 5%; letter-spacing: 5px; text-transform: uppercase; background: #424633; color: #efebe2; text-decoration: none; }
.portfolio li .projectmeta span { font: 400 10px/18px 'Open Sans', Arial, sans-serif; margin: 0; padding: 10px 5px; color: #a4a29c; display: block; }
.portfolio li.left img { float: right; }
.portfolio li.right img { float: left; }
.portfolio li.left .projectmeta { float: left; }
.portfolio li.right .projectmeta { float: right; }



/* POST
****************************************************************************/
.single { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0; }
.single article { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0; list-style: none; display: block; background: #efebe2; color: #191919; }
.single article .projectmeta { /*width: 32.1953%; padding: 3% 3% 1% 3%;*/ }
.single article .projectimage { /*width: 61.8047%;*/ /*min-height: 300px;*/ overflow: hidden; }
.single article img { width: 100%; display: block; }

.single article .projectmeta h1 { font: 400 45px/50px 'Amatic SC', cursive; margin: 30px 0 20px 0; padding: 0; color: #191919; letter-spacing: 7px; }
.single article .projectmeta h2 { font: 400 45px/50px 'Amatic SC', cursive; margin: 30px 0 20px 0; padding: 0; color: #191919; letter-spacing: 7px; }
.single article .projectmeta h4 { font: 400 30px/35px 'Amatic SC', cursive; margin: 20px 0 10px 0; padding: 0; color: #191919; letter-spacing: 3px; }
.single article .projectmeta img.projectLogo { width: auto; float: none; margin: 0 auto 15px; }
.single article .projectmeta p { font: 400 14px/25px 'Open Sans', Arial, sans-serif; margin: 0 0 30px 0; padding: 0; color: #191919; }
.single article .projectmeta p strong { font: 600 14px/25px 'Open Sans', Arial, sans-serif; }
.single article .projectmeta a { color: #191919; text-decoration: underline; font-weight: bold; }
.single article .projectmeta a.button { font: 600 13px/18px 'Open Sans', Arial, sans-serif; margin: 0 0 20px 0; padding: 10px 5%; letter-spacing: 5px; text-transform: uppercase; background: #424633; color: #efebe2; text-decoration: none; }
.single article .projectmeta span { font: 400 10px/18px 'Open Sans', Arial, sans-serif; margin: 0; padding: 10px 5px; color: #a4a29c; display: block; }
.single article .left .projectimage { float: left; }
.single article .right .projectimage { float: right; }
.single article .left .projectmeta { float: left; }
.single article .right .projectmeta { float: right; }

.single article .left .projectimage:first-child { float: right; }
.single article .right .projectimage:first-child { float: left; }
.single article .left.images .projectimage:first-child { float: left; }
.single article .right.images .projectimage:first-child { float: right; }

.single article #map-canvas { width: 1700px; max-width: 100%; height: 500px; max-height: 100%; }

.single article .quote { background-color: #f7f5f0; width: 70%; padding: 35px 15%; } 
.single article .quote blockquote { font: italic 26px/32px Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; margin: 0 0 35px; } 
.single article .quote blockquote cite { font: italic 14px/20px Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; color: #999; } 
.single article .quote blockquote cite a { color: #999; text-decoration: none; }  
.single article .quote blockquote cite a:hover { text-decoration: underline; } 

.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; }

.goback { width: 100%; max-width: 1500px; margin: 0 auto; padding: 0; text-align: left; }
.goback a { font: 400 25px/50px 'Amatic SC', cursive; margin: 30px 0; padding: 0; color: #191919; letter-spacing: 3px; text-decoration: none; }




/* NEXT POST
****************************************************************************/
.single .portfolio { width: 50%; max-width: 750px; margin: 0 auto; padding: 0; list-style: none; float: right; }
.single .portfolio li { display: block; background: #efebe2; color: #191919; }
.single .portfolio li .projectmeta { width: 30.1953%; padding: 3% 4% 0 4%; }
.single .portfolio li img { width: 61.8047%; }
.single .portfolio li .projectmeta h3 { font: 700 25px/30px 'Amatic SC', cursive; margin: 0 0 20px 0; padding: 0; color: #191919; letter-spacing: 2px; }
.single .portfolio li .projectmeta h3 strong { display: block; }
.single .portfolio li .projectmeta p { font: 400 14px/25px 'Open Sans', Arial, sans-serif; margin: 0 0 30px 0; padding: 0; color: #191919; }
.single .portfolio li .projectmeta a { color: #191919; text-decoration: none; }
.single .portfolio li .projectmeta a.button { font: 600 13px/18px 'Open Sans', Arial, sans-serif; margin: 0 0 20px 0; padding: 10px 5%; letter-spacing: 5px; text-transform: uppercase; background: #424633; color: #efebe2; text-decoration: none; }
.single .portfolio li .projectmeta span { font: 400 10px/18px 'Open Sans', Arial, sans-serif; margin: 0; padding: 10px 5px; color: #a4a29c; display: block; }
.single .portfolio li.left img { float: right; }
.single .portfolio li.right img { float: left; }
.single .portfolio li.left .projectmeta { float: left; }
.single .portfolio li.right .projectmeta { float: right; }






/* Fade in animation */
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } 
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }
@-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
.portfolio li.left.animated { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; }
.portfolio li.right.animated { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }


/* Screen between 1500px and 1200px */
@media screen and (min-width: 1200px) and (max-width: 1500px) {
	.portfolio li .projectmeta { width: 26.1953%; padding: 5% 6% 0 6%; }
	.portfolio li .projectmeta h3 { font: 400 40px/45px 'Amatic SC', cursive; margin: 0 0 25px 0; letter-spacing: 6px; }
}

/* Screen between 1200px and 1100px */
@media screen and (min-width: 1100px) and (max-width: 1200px) {
	.portfolio li .projectmeta { width: 30.1953%; padding: 4% 4% 0 4%; }
	.portfolio li .projectmeta h3 { font: 400 40px/45px 'Amatic SC', cursive; margin: 0 0 15px 0; letter-spacing: 6px; }
	.portfolio li .projectmeta p { font: 400 14px/23px 'Open Sans', Arial, sans-serif; }
}

/* Screen between 1100px and 600px */
@media screen and (min-width: 600px) and (max-width: 1100px) {
	.portfolio li { padding-bottom: 20px; }
	.portfolio li .projectmeta { width: 82%; padding: 2% 9%; }
	.portfolio li .projectmeta h3 { font: 400 45px/50px 'Amatic SC', cursive; margin: 5px 0 15px 0; padding: 0; color: #191919; letter-spacing: 7px; }
	.portfolio li .projectmeta p { font: 400 13px/20px 'Open Sans', Arial, sans-serif; margin: 0 0 25px 0; }
	.portfolio li .projectmeta a.seemore { margin: 0 0 30px 0; }
	.portfolio li img { width: 100%; }

	.largest { width: 100%; } .largest.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .largest.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.large { width: 100%; } .large.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .large.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.medium { width: 100%; } .medium.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .medium.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.third { width: 100%; } .third.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .third.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.small { width: 100%; } .small.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .small.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.smallest { width: 100%; } .smallest.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .smallest.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }

	.single article .projectmeta h1 { font: 400 45px/50px 'Amatic SC', cursive; padding: 0; color: #191919; letter-spacing: 7px; }
	.single article .projectmeta h2 { font: 400 45px/50px 'Amatic SC', cursive; padding: 0; color: #191919; letter-spacing: 7px; }
	.single article .quote { background-color: #f7f5f0; width: 90%; padding: 10px 5%; }
	.single article .projectmeta p { margin: 0 0 15px 0; }
}

/* Screen between 600px and 470px */
@media screen and (min-width: 470px) and (max-width: 600px) {
	
	.header { margin: 75px 0; }
	.header p, .header a { font: 400 16px/16px 'Amatic SC', cursive; }
	.header h1 a { font: 400 70px/66px 'Amatic SC', cursive; }
	.header h2 a { font: 400 30px/36px 'Amatic SC', cursive; }
	
	.portfolio li { padding-bottom: 20px; }
	.portfolio li .projectmeta { width: 84%; padding: 2% 8%; }
	.portfolio li .projectmeta h3 { font: 400 40px/45px 'Amatic SC', cursive; margin: 5px 0 15px 0; padding: 0; color: #191919; letter-spacing: 7px; }
	.portfolio li .projectmeta p { font: 400 13px/20px 'Open Sans', Arial, sans-serif; margin: 0 0 25px 0; }
	.portfolio li .projectmeta a.seemore { margin: 0 0 30px 0; }
	.portfolio li img { width: 100%; }

	.largest { width: 100%; } .largest.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .largest.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.large { width: 100%; } .large.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .large.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.medium { width: 100%; } .medium.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .medium.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.third { width: 100%; } .third.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .third.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.small { width: 100%; } .small.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .small.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.smallest { width: 100%; } .smallest.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .smallest.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }

	.single article .quote { background-color: #f7f5f0; width: 90%; padding: 10px 5%; }
	.single article .projectmeta p { margin: 0 0 15px 0; }
}
/* Screen smaller than 470px */
@media screen and (max-width: 470px) {
	
	.header { margin: 75px 0; }
	.header p, .header a { font: 400 16px/16px 'Amatic SC', cursive; }
	.header h1 a { font: 400 70px/66px 'Amatic SC', cursive; }
	.header h2 a { font: 400 30px/36px 'Amatic SC', cursive; }
	
	.portfolio li { padding-bottom: 20px; }
	.portfolio li .projectmeta { width: 86%; padding: 4% 7%; }
	.portfolio li .projectmeta h3 { font: 400 35px/40px 'Amatic SC', cursive; padding: 0; margin: 5px 0 15px 0; color: #191919; letter-spacing: 7px; }
	.portfolio li .projectmeta p { font: 400 13px/20px 'Open Sans', Arial, sans-serif; margin: 0 0 25px 0; }
	.portfolio li .projectmeta a.seemore { margin: 0 0 30px 0; }
	.portfolio li img { width: 100%; }

	.largest { width: 100%; } .largest.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .largest.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.large { width: 100%; } .large.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .large.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.medium { width: 100%; } .medium.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .medium.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.third { width: 100%; } .third.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .third.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.small { width: 100%; } .small.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .small.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }
	.smallest { width: 100%; } .smallest.padded3 { width: 94%; padding-left: 3%; padding-right: 3%; } .smallest.padded6 { width: 88%; padding-left: 6%; padding-right: 6%; }

	.single article .projectmeta h1 { font: 500 35px/40px 'Amatic SC', cursive; letter-spacing: 5px; }
	.single article .projectmeta h2 { font: 500 35px/40px 'Amatic SC', cursive; letter-spacing: 5px; }
	.single article .quote { background-color: #f7f5f0; width: 90%; padding: 35px 5%; }
	.single article #map-canvas { width: 100%; height: 150px; }
	.single article .projectmeta p { margin: 0 0 15px 0; }
	
	.goback { text-align: center; }
	.single .portfolio { width: 100%; }
	.single .portfolio li img { display: none; }
	.single .portfolio li .projectmeta { padding: 3% 0 0; width: 100%; }
}