/*

	Theme Name: Fount V2
	Theme URI: https://www.erikbouwers.nl
	Author: Erik Bouwers
	Author URI: https://www.erikbouwers.nl
	Description: Wordpress template voor fount.eu
	Version: 2.0
	Tags: fount
	Text Domain: fount

*/
html { box-sizing: border-box; } 
*, *:before, *:after { box-sizing: inherit;  } 
html, body { padding: 0px; margin: 0px; font-family: Arial; font-size: 12px; line-height: 15px; }
body { font-family: 'Raleway', sans-serif; font-size: 21px; line-height: 30px; }

.header { padding: 30px 0px 30px 0px; }
.header .logo { overflow: hidden; }
.header .logo img { float: left; }
.header .hamburger {}
.header .navigatie {}

.placeholder { height: 800px; background-color: #F0F0F0; position: relative; margin-bottom: 30px; }
.placeholder:before { content: "placeholder"; position: absolute; top: calc((420px - 30px) / 2); left: 0px; width: 100%; text-align: center; }

.featuredimage { overflow: hidden; margin-bottom: 0px; }
.featuredimage img { width: 100%; height: auto; float: left; }

.footer { background-color: #252760; color: #FFFFFF; border-radius: 10px; margin-bottom: 20px; }
.footer h3 {  font-size: 25px; line-height: 30px; text-transform: uppercase; }
.footer p {  font-size: 19px; line-height: 25px; }
.footer .footer-aboutus {}
.footer .footer-getintouch {}
.footer .footer-socialmedia {}
.footer .footer-socialmedia img { width: 32px; }
.footer a { color: #FFFFFF; }

.sidebar { }
.sidebar .sidebar-casestudy { padding-bottom: 30px; }
.sidebar .sidebar-casestudy .sidebar-casestudy-image {}
.sidebar .sidebar-casestudy .sidebar-casestudy-image img { width: 100%; height: auto; }
.sidebar .sidebar-casestudy .sidebar-casestudy-title { }
.sidebar .sidebar-casestudy .sidebar-casestudy-title h3 { color: #EE7D00; }
.sidebar .sidebar-casestudy .sidebar-casestudy-excerpt{}
.sidebar .sidebar-casestudy .sidebar-casestudy-goals { overflow: hidden; margin: 0px -5px; }
.sidebar .sidebar-casestudy .sidebar-casestudy-goals .sidebar-casestudy-goal { float: left; width: calc((100% / 4) - 10px); margin: 5px; }
.sidebar .sidebar-casestudy .sidebar-casestudy-goals .sidebar-casestudy-goal img { float: left; width: 100%; height: auto; }

.slider {}
.slider:after { pointer-events: none; content: ""; width: 100%; max-width: 1080px; height: 100%; max-height: 420px; position: absolute; top: 0px; left: 0px; background-image: url('assets/png/slider.png'); background-repeat: no-repeat; background-size: 100% auto; }
.slider .slider-casestudy { display: none; }
.slider .slider-casestudy:first-child { display: block; }
.slider .slider-casestudy img { float: left; width: 100%; height: auto; margin-bottom: 32px; }

.slider .slider-casestudy .slider-casestudy-text { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.50); position: absolute; bottom: 62px; right: 30px; font-size: 18px; line-height: 24px; font-weight: bold; color: #FFFFFF;}
.slider .slider-casestudy .slider-casestudy-button { position: absolute; bottom: 0px; right: 0px; display: block; font-weight: bold; background-color: #EE7D00; padding: 5px 10px; color: #FFFFFF; font-size: 17px; line-height: 22px; text-decoration: none; }
.slider .slider-casestudy .slider-casestudy-button:hover { background-color: #252760; }


@media (max-width: 767px) {
	
	.container { padding: 0px 15px 0px 15px; }
	
	.slider .slider-casestudy .slider-casestudy-text { position: absolute; bottom: 47px; right: 15px; text-align: center; }
	
}

@media (min-width: 768px) and (max-width: 991px) {
	
	.container { max-width: 750px; margin: 0px auto 0px auto; padding: 0px 15px 0px 15px; }
	
}

@media (min-width: 992px) and (max-width: 1199px) {
	
	.container { max-width: 970px; margin: 0px auto 0px auto; padding: 0px 15px 0px 15px; }
	
}

@media (min-width: 1200px) {
	
	.container { max-width: 1110px; margin: 0px auto 0px auto; padding: 0px 15px 0px 15px; }
	
}

@media (max-width: 991px) {
	
	
	.header { overflow: hidden; }
	.header .logo {  }
	.header .logo img { height: 40px !important; max-width: auto !important; width: auto !important; }
	.header .hamburger { position: relative; float: right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; width: 30px; height: 30px; }
	.header .hamburger span { display: block; position: absolute; height: 6px; width: 100%; background: #000000; border-radius: 6px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
	.header .hamburger.open span { background: #000000; }
	.header .hamburger span:nth-child(1) { top: 0px; }
	.header .hamburger span:nth-child(2),.header .hamburger span:nth-child(3) { top: 12px; }
	.header .hamburger span:nth-child(4) { top: 24px; }
	.header .hamburger.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
	.header .hamburger.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
	.header .hamburger.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
	.header .hamburger.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; }
	.header .navigatie { display: none; }
	.header .navigatie.open { display: block; height: 100vh; }
	.header .navigatie ul { list-style: none; padding: 10px 0px 10px 0px; margin: 30px 0px 0px 0px; }
	.header .navigatie ul > li { position: relative; }
	.header .navigatie ul > li > a { color: #000000; padding: 10px 0px 10px 0px; display: block; font-weight: 600; text-decoration: none; }
	.header .navigatie ul > li:hover > a { color: #ee7c00; }
	.header .navigatie ul > li.current_page_parent > a { color: #ee7c00; }
	.header .navigatie ul > li.current_page_item > a { color: #ee7c00; }
	.header .navigatie ul > li.current-page-ancestor > a { color: #ee7c00; }
	.header .navigatie > ul > li.menu-item-has-children:before { content: ""; position: absolute; top: 18px; left: 0px; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #000000 transparent transparent transparent; }
	.header .navigatie ul > li > ul {  }
	.header .navigatie ul > li > ul > li {  }
	.header .navigatie ul > li > ul > li a {  padding: 5px 10px 5px 35px; }
	.header .navigatie ul > li > ul > li:before { content: ""; position: absolute; top: 12px; left: 20px; width: 0; height: 0; border-style: solid;border-width: 3px 0 3px 6px; border-color: transparent transparent transparent #000000;}
	
	.page { padding: 40px 0px 40px 0px;  }
	.page.page-sidebar {}
	.page.page-sidebar .wrapper {}
	.page.page-sidebar .wrapper .sidebar {}
	.page.page-sidebar .wrapper .content {}
	
	.footer {  }
	.footer .footer-aboutus { padding: 20px 20px 20px 20px; }
	.footer .footer-getintouch { padding: 0px 20px 0px 20px; }
	.footer .footer-socialmedia { padding: 20px 20px 20px 20px; }
	
}

@media (min-width: 992px) {
	
	.header { overflow: hidden; }
	.header .logo { float: left; }
	.header .hamburger { display: none; }
	.header .navigatie { display: block !important;  float: right; padding-top: 21px; }
	.header .navigatie ul { padding: 0px; margin: 0px; list-style: none;  }
	.header .navigatie ul > li { float: left; position: relative; text-transform: uppercase; }
	.header .navigatie ul > li a:after { color: #000000; content: "|"; display: inline-block; padding-left: 10px; }
	.header .navigatie ul > li:last-child a:after { display: none; }
	.header .navigatie ul > li > a {padding: 10px 5px 10px 5px;display: block;color: #000000;font-weight: 600;text-decoration: none;font-size: 14px;letter-spacing: 0px;}
	.header .navigatie ul > li.current_page_parent > a { color: #000000; }
	.header .navigatie ul > li.current_page_item > a { color: #000000; }
	.header .navigatie ul > li.current-page-ancestor > a { color: #000000; }
	.header .navigatie ul > li:hover > a { color: #707070; }
	.header .navigatie ul > li.menu-item-has-children > a { padding: 10px 10px 10px 20px; }
	.header .navigatie ul > li.menu-item-has-children:before { content: ""; position: absolute; top: 18px; left: 0px; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #000000 transparent transparent transparent; }
	.header .navigatie ul > li > ul { display: none; position: absolute; top: 40px; left: 0px; z-index: 9000; }
	.header .navigatie ul > li:hover > ul { display: block; }
	.header .navigatie ul > li > ul > li { white-space: nowrap; display: block; width: 100%; border-top: 2px solid rgba(0, 0, 0, 0.00); }
	.header .navigatie ul > li > ul > li a {  padding: 5px 10px 5px 25px; background-color: #FFFFFF; }
	.header .navigatie ul > li > ul > li:before { content: ""; position: absolute; top: 12px; left: 10px; width: 0; height: 0; border-style: solid;border-width: 3px 0 3px 6px; border-color: transparent transparent transparent #000000;}	

	.page { padding: 40px 0px 40px 0px; }
	.page.page-sidebar {}
	.page.page-sidebar .wrapper { overflow: hidden; }
	.page.page-sidebar .wrapper .sidebar { float: left; width: 320px; min-height: 1px; margin-right: 30px; }
	.page.page-sidebar .wrapper .content { float: right; width: calc(100% - 350px); }

	.footer { overflow: hidden; }
	.footer .footer-aboutus { padding: 20px 20px 0px 20px; float: left; width: calc(40% - 20px); }
	.footer .footer-getintouch { padding: 20px 20px 0px 20px; float: left; width: calc(40% - 20px); }
	.footer .footer-socialmedia { padding: 20px 20px 0px 20px; float: left; width: calc(20% - 20px); }
	
}

.featuredimage { opacity: 0.00; animation: fadeIn 1.0s linear 0.125s 1 normal forwards; }
.slider { opacity: 0.00; animation: fadeIn 1.0s linear 0.125s 1 normal forwards; }
@keyframes fadeIn { from {opacity:0.00;} to {opacity:1.00;} }

*[popup] { cursor: pointer; }

.popup { z-index: 8888; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; display: table; }
.popup .popup-wrapper { display: table-cell; width: 100%; height: 100%; vertical-align: middle; padding: 30px; }
.popup .popup-wrapper .popup-content { position: relative; display: block; margin: 0px auto; border: 1px solid #CDCDCD; background-color: #FFFFFF;  }
.popup .popup-wrapper .popup-content .close { cursor: pointer; position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; width: 40px; height: 40px; opacity: 0.3; border: 3px solid #333; border-radius: 100%; }
.popup .popup-wrapper .popup-content .close:hover { opacity: 1; }
.popup .popup-wrapper .popup-content .close:before, 
.popup .popup-wrapper .popup-content .close:after { top: 4px; position: absolute; left: 16px; content: ' '; height: 26px; width: 3px; background-color: #333; }
.popup .popup-wrapper .popup-content .close:before { transform: rotate(45deg); }
.popup .popup-wrapper .popup-content .close:after { transform: rotate(-45deg); }
.popup .popup-wrapper .popup-content .content { width: 100%; height: 100%; overflow: auto; }

.popup .popup-wrapper .popup-content .content { color: #5D5A5A; }
.popup .popup-wrapper .popup-content .content h3 { margin: 0px; padding: 0px; text-transform: uppercase; font-size: 17px; line-height: 22px;  }
.popup .popup-wrapper .popup-content .content p { font-size: 17px; line-height: 22px; }

.popup .popup-wrapper .popup-content .content .content-goal {  }
.popup .popup-wrapper .popup-content .content .content-goal .content-goal-image { padding: 30px 30px 30px 30px; }
.popup .popup-wrapper .popup-content .content .content-goal .content-goal-image img { width: 100%; height: auto; max-width: 128px; }
.popup .popup-wrapper .popup-content .content .content-goal .content-goal-content { padding: 0px 30px 0px 30px; }

.popup .popup-wrapper .popup-content .content .content-team {}
.popup .popup-wrapper .popup-content .content .content-team .content-team-image {}
.popup .popup-wrapper .popup-content .content .content-team .content-team-image img { width: 100%; height: auto; padding: 5px; background-color: #FFFFFF; -webkit-box-shadow: 10px 10px 25px 0px rgb(0 0 0 / 25%); -moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.25); box-shadow: 10px 10px 25px 0px rgb(0 0 0 / 25%); }
.popup .popup-wrapper .popup-content .content .content-team .content-team-content {}

.popup .popup-wrapper .popup-content .content .content-client {}
.popup .popup-wrapper .popup-content .content .content-client .content-client-image {}
.popup .popup-wrapper .popup-content .content .content-client .content-client-image img { width: 100%; height: auto; padding: 5px; background-color: #FFFFFF; -webkit-box-shadow: 10px 10px 25px 0px rgb(0 0 0 / 25%); -moz-box-shadow: 10px 10px 25px 0px rgba(0,0,0,0.25); box-shadow: 10px 10px 25px 0px rgb(0 0 0 / 25%); }
.popup .popup-wrapper .popup-content .content .content-client .content-client-content {}

.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-left .content-casestudy-image { overflow: hidden; }
.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-left .content-casestudy-image img { float: left; width: 100%; height: auto; }
.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-left .content-casestudy-goals { overflow: hidden; margin: 5px -5px 25px -5px; }
.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-left .content-casestudy-goals img { float: left; width: calc((100% / 4) - 10px); margin: 5px; height: auto; }

.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-right .content-casestudy-client { overflow: hidden; }
.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-right .content-casestudy-client img { height: 120px; width: auto; float: left; }

@media (max-width: 991px) {
	
	.popup .popup-wrapper .popup-content { max-width: 360px; max-height: 100vh; }
	.popup .popup-wrapper .popup-content .content { max-width: 960px; max-height: calc(100vh - 120px); }
	
	.popup .popup-wrapper .popup-content .content .content-team .content-team-image { padding: 30px; overflow: hidden; }
	.popup .popup-wrapper .popup-content .content .content-team .content-team-image img { float: left; width: 100%; height: auto; }
	.popup .popup-wrapper .popup-content .content .content-team .content-team-content { padding: 30px; }
	
	.popup .popup-wrapper .popup-content .content .content-client .content-client-image { padding: 30px; overflow: hidden; }
	.popup .popup-wrapper .popup-content .content .content-client .content-client-image img { float: left; width: 100%; height: auto; }
	.popup .popup-wrapper .popup-content .content .content-client .content-client-content { padding: 30px 30px 0px 30px; }
	
	.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-left { padding: 30px; overflow: hidden; }
	.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-right { padding: 30px; }
	
}

@media (min-width: 992px) {
	
	.popup .popup-wrapper .popup-content { max-width: 960px; max-height: 720px; }
	.popup .popup-wrapper .popup-content .content {max-width: 900px;max-height: 550px;}
	
	.popup .popup-wrapper .popup-content .content .content-team { overflow: hidden; }
	.popup .popup-wrapper .popup-content .content .content-team .content-team-image { float: left; width: 320px; padding: 30px; overflow: hidden; }
	.popup .popup-wrapper .popup-content .content .content-team .content-team-image img { float: left; width: 100%; height: auto; }
	.popup .popup-wrapper .popup-content .content .content-team .content-team-content { float: right; width: calc(100% - 320px); padding: 120px 30px 30px 30px; }
	
	.popup .popup-wrapper .popup-content .content .content-client { overflow: hidden; }
	.popup .popup-wrapper .popup-content .content .content-client .content-client-image { float: left; width: 320px; padding: 30px; overflow: hidden; }
	.popup .popup-wrapper .popup-content .content .content-client .content-client-image img { float: left; width: 100%; height: auto; }
	.popup .popup-wrapper .popup-content .content .content-client .content-client-content { float: right; width: calc(100% - 320px); padding: 120px 30px 30px 30px; }
	
	.popup .popup-wrapper .popup-content .content .content-casestudy { overflow: hidden; }
	.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-left { float: left; width: 320px; padding: 30px; overflow: hidden; }
	.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-right {float: right;width: calc(100% - 320px);padding: 30px 10px 30px 10px;}
	
	.popup.popup-small .popup-wrapper .popup-content { max-width: 520px; max-height: 520px; }
	.popup.popup-small .popup-wrapper .popup-content .content { max-width: 520px; max-height: 520px; }
	.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-left { height: 100vh; max-height: 720px; }
	
	
	.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-left { position: relative; }
	.popup .popup-wrapper .popup-content .content .content-casestudy .content-casestudy-left .content-casestudy-goals { position: absolute; bottom: 0px; left: 30px; width: calc(100% - 50px); }
	
}

.popup { visibility: hidden; opacity: 0; -webkit-transition: visibility 0s, opacity 0.3s linear; -moz-transition: visibility 0s, opacity 0.3s linear; transition: visibility 0s, opacity 0.3s linear; }
.popup-content { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-70deg); -moz-transform: rotateY(-70deg); -ms-transform: rotateY(-70deg); transform: rotateY(-70deg); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } 
.popup.popup-active { visibility: visible; opacity: 1; background-color: rgba(0, 0, 0, 0.25); }
.popup.popup-active .popup-content {-webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1; }