/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('../fonts/icomoon.css');

/* #Site Styles
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: 'Poppins', sans-serif; font-size: 16px; color: #4d4d4d; }
body { background: #fff; }
input, select, textarea, button { font-family: 'Poppins', sans-serif; font-size: 16px; color: #4d4d4d; }
img { border: 0; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; position: relative; max-width: 1300px; }
.centered { padding-right: calc((100% - 1300px) / 2); padding-left: calc((100% - 1300px) / 2); }
.button { display: inline-block; background: #000; padding: 10px 25px; border-radius: 3px; color: #fff; text-transform: uppercase; font-size: 16px; font-weight: 600; text-decoration: none; transition: 0.5s; }
.button:hover { background: #222121; }

.title { text-align: center; }
.title h2, .title h3, .title h4 { font-size: 25px; color: #333333; display: inline-block; position: relative; padding: 10px 25px; letter-spacing: 10px; text-transform: uppercase; text-align: center; }
.title h2 span, .title h3 span, .title h4 span { display: block; font-size: 13px; text-transform: none; letter-spacing: normal; font-weight: normal; }
.title h2:before, .title h3:before, .title h4:before { content: ''; position: absolute; top: 0; left: 0; width: 100px; border-top: 1px solid #ccc; }
.title h2:after, .title h3:after, .title h4:after { content: ''; position: absolute; bottom: 15px; right: 0; width: 60px; border-top: 1px solid #ccc; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow-x: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { position: absolute; width: 100%; padding: 60px; padding-top: 220px; top: 0; left: 0; z-index: 100; transition: 0.5s; }
#headerCntr.scrolled { position: fixed; background: #fff; padding-top: 35px; padding-bottom: 35px; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); }
#headerCntr.scrolled .menuIcon { color: #333333; top: 20px; }
#headerCntr.scrolled .logo { top: 10px; }
#headerCntr.scrolled .logo:before { color: #000; font-size: 48px; }

#headerCntr.is-active { background: #fff; }
#headerCntr .logo { position: absolute; top: 65px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); transition: 0.5s; text-decoration: none; }
#headerCntr .logo:before { content: '\e900'; color: #fff; font-size: 100px; font-family: 'icomoon'; }
#headerCntr .menuIcon { color: #fff; text-decoration: none; font-size: 25px; position: absolute; top: 95px; left: 60px; transition: 0.5s; }
#headerCntr .menuIcon:before { content: '\e912'; font-family: 'icomoon'; }
#headerCntr.is-active .logo:before { color: #000; }
#headerCntr.is-active .menuIcon { background: url(../img/menu-close.svg) no-repeat; width: 41px; height: 41px; text-indent: -9999px; }

.mm-opened #headerCntr .mobileMenu span { background: none; }
.mm-opened #headerCntr .mobileMenu.is-active span:before,
.mm-opened #headerCntr .mobileMenu.is-active span:after { transition-delay: 0s, 0.2s; }
.mm-opened #headerCntr .mobileMenu span:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.mm-opened #headerCntr .mobileMenu span:after { bottom: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

	/* ### menu box ### */
	.menuBox { text-align: center; display: none; }
	#headerCntr.scrolled .menuBox { padding-top: 50px; }
	.menuBox ul { overflow: hidden; display: inline-block; margin-bottom: 50px; }
	.menuBox ul li { margin-bottom: 15px; color: #333333; font-size: 24px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
	.menuBox ul li a { display: block; padding-bottom: 5px; color: #333333; text-decoration: none; position: relative; }
	.menuBox ul li a:after { content: ''; width: 26px; border-bottom: 3px solid #fc561c; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: none; }
	.menuBox ul li a:hover:after { display: block; }
	#headerCntr.is-active .menuBox { display: block; }

/* ### content container ### */
#contentCntr { width: 100%; }

	/* ### banner box ### */
	.bannerBox { width: 100%; height: 766px; position: relative; background: url(../img/banner.jpg) no-repeat center top; background-size: cover; }
	
	/* ### ----------------------------------- ### */
	.bannerBox.subPage { background: url(../img/banner-sub.jpg) no-repeat center; background-size: cover; } 
	.bannerBox.subPage.sinke { background: url(../img/banner-sub-01.jpg) no-repeat center; background-size: cover; } 
	.bannerBox.subPage.nxxt { background: url(../img/banner-sub-02.jpg) no-repeat center; background-size: cover; } 
	.bannerBox.subPage.mbjz { background: url(../img/banner-sub-03.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.orb { background: url(../img/banner-sub-04.jpg) no-repeat center; background-size: cover; } 
	.bannerBox.subPage.quantibus { background: url(../img/banner-sub-05.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.sms { background: url(../img/banner-sub-06.jpg) no-repeat center; background-size: cover; }  
	.bannerBox.subPage.waltmann { background: url(../img/banner-sub-07.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.vbo { background: url(../img/banner-sub-08.jpg) no-repeat center; background-size: cover; } 
	.bannerBox.subPage.novy { background: url(../img/banner-sub-09.jpg) no-repeat center; background-size: cover; }  
	.bannerBox.subPage.unite { background: url(../img/banner-sub-20.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.hex { background: url(../img/banner-sub-21.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.olfit { background: url(../img/banner-sub-10.jpg) no-repeat center; background-size: cover; }  
	
	.bannerBox.subPage.blachi { background: url(../img/banner-sub-16.jpg) no-repeat center; background-size: cover; } 
	.bannerBox.subPage.credits { background: url(../img/banner-sub-17.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.raad { background: url(../img/banner-sub-18.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.carligto { background: url(../img/banner-sub-14.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.bruiloft { background: url(../img/banner-sub-15.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.fysio { background: url(../img/banner-sub-11.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.bom { background: url(../img/banner-sub-12.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.styling { background: url(../img/banner-sub-19.jpg) no-repeat center; background-size: cover; }
	.bannerBox.subPage.nci { background: url(../img/banner-sub-13.jpg) no-repeat center; background-size: cover; }
	
	
	.bannerBox .text { padding-top: 340px; text-align: center; max-width: 1020px; margin: 0 auto; }
	.bannerBox .heading { color: #fff; text-transform: uppercase; position: relative; padding-top: 10px; padding-bottom: 10px; letter-spacing: 20px; font-size: 50px; font-weight: 600; }
	.bannerBox .heading span { color: #fc561c; }
	.bannerBox .heading:before { content: ''; width: 160px; border-top: 1px solid #fff; position: absolute; top: 0; left: 45px; }
	.bannerBox .heading:after { content: ''; width: 80px; border-top: 1px solid #fff; position: absolute; bottom: 0; right: 60px; }
	.bannerBox .tagline { font-size: 16px; color: #fff; margin-top: -10px; margin-bottom: 60px; }
	.bannerBox .tagline span { font-weight: 600; }

	/* ### about box ### */
	.aboutBox { width: 100%; background: #f3f3f3; padding-top: 120px; padding-bottom: 80px; position: relative; }
	.aboutBox:before { content: ''; height: 170px; border-left: 1px solid #cccccc; position: absolute; top: -85px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
	.aboutBox .text { max-width: 1200px; margin: 0 auto; overflow: hidden; }
	.aboutBox .download { width: 35%; float: left; text-align: right; }
	.aboutBox .tab { display: inline-block; padding-bottom: 20px; }
	.aboutBox .tab li { float: left; margin-left: 15px; font-weight: 500; }
	.aboutBox .tab li a { color: #333; font-size: 14px; text-decoration: none; display: block; padding-bottom: 5px; border-bottom: 2px solid transparent; }
	.aboutBox .tab li a:hover, .aboutBox .tab li.ui-tabs-active a { border-bottom-color: #fc561c; }
	.aboutBox .download p { line-height: 24px; margin-bottom: 30px; }
	.aboutBox .download strong { font-weight: 600; }
	.aboutBox .photo { width: 30%; float: left; text-align: center; }
	.aboutBox .photo figure { display: inline-block; border: 1px solid #cccccc; border-radius: 50%; padding: 10px; }
	.aboutBox .photo figure img { border-radius: 50%; }
	.aboutBox .details { width: 35%; float: left; }
	.aboutBox .details .title { letter-spacing: 5px; font-size: 15px; text-transform: uppercase; font-weight: 500; text-align: left; margin-bottom: 20px; }
	.aboutBox .details ul { overflow: hidden; margin-bottom: -20px; }
	.aboutBox .details li { float: left; width: 50%; font-size: 15px; margin-bottom: 20px; }
	.aboutBox .details li strong { display: block; font-size: 20px; color: #333333; font-weight: 600; }
	.aboutBox .details li span { color: #fc561c; font-size: 40px; line-height: 20px; }
	.aboutBox .details li a { color: #fc561c; text-decoration: none; }
	.aboutBox .details li a:hover { text-decoration: underline; }
	.aboutBox .button { font-size: 12px; }
	.aboutBox .tab li:last-child { display: none; }
	.aboutBox #tabs-3 { display: none; }

	/* ### skill box ### */
	.skillBox { padding-top: 60px; padding-bottom: 60px; overflow: hidden; }
	.skillBox .title { margin-bottom: 50px; }
	.skillBox .skill { float: left; width: 50%; }
	.skillBox .skill ul { list-style: none; }
	.skillBox .skill li { overflow: hidden; font-size: 20px; margin-bottom: 20px; }
	.skillBox .skill li strong:before { font-family: icomoon; position: absolute; left: 0; top: 0; font-size: 25px; }
	.skillBox .skill li.experience-design strong:before { content: '\e903'; }
	.skillBox .skill li.photoshop strong:before { content: '\e914'; }
	.skillBox .skill li.illustrator strong:before { content: '\e90b'; }
	.skillBox .skill li.indesign strong:before { content: '\e90c'; }
	.skillBox .skill li.dreamweaver strong:before { content: '\e907'; }
	.skillBox .skill li.html5 strong:before { content: '\e90a'; }
	.skillBox .skill li.css3 strong:before { content: '\e902'; }
	.skillBox .skill li strong { float: left; width: 45%; padding-left: 45px; color: #333333; position: relative; }
	.skillBox .skill li strong span { color: #fd6834; font-size: 40px; line-height: 15px; }
	.skillBox .skill .ball { width: 15px; height: 15px; background: #e6e6e6; border-radius: 50%; margin-right: 15px; float: left; margin-top: 5px; }
	.skillBox .skill .ball.selected { background: #f53aa6; }
	.skillBox .graph { padding-left: 370px; height: 265px; float: right; width: 560px; background: url(../img/diagram.png) no-repeat left; padding-top: 65px; }
	.skillBox .graph li { font-size: 18px; margin-bottom: 12px; text-transform: uppercase; }
	.skillBox .graph li strong { font-size: 24px; padding-right: 10px; font-weight: 600; }

	/* ### portfolio box ### */
	.portfolioBox { position: relative; overflow: hidden; padding-bottom: 80px; }
	.portfolioBox:before { content: ''; width: 100%; height: 50%; top: 50%; left: 0; z-index: 0; background: #f3f3f3; position: absolute; }
	.portfolioBox .title { margin-bottom: 35px; position: relative; z-index: 1; }
	.portfolioBox .title h3 { text-align: left; }
	.portfolioBox .slider { position: relative; z-index: 1; }
	.portfolioBox .slide { position: relative; padding: 0 35px; opacity: 0.5; transition: 0.5s; }
	.portfolioBox .slide img { width: 100%; }
	.portfolioBox .previous { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 13%; width: 80px; height: 80px; background: #333333; border-radius: 50%; text-align: center; line-height: 80px; text-decoration: none; z-index: 3; }
	.portfolioBox .previous:before { content: '\e90e'; font-family: icomoon; color: #fff; }
	.portfolioBox .next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 13%; width: 80px; height: 80px; background: #333333; border-radius: 50%; text-align: center; line-height: 80px; text-decoration: none;  z-index: 3; }
	.portfolioBox .next:before { content: '\e915'; font-family: icomoon; color: #fff; }
	.portfolioBox .slick-center .slide { opacity: 1; }
	.portfolioBox .text { position: absolute; top: 0; left: 80px; height: 100%; padding-top: 100px; width: 50%;  }
	.portfolioBox .heading { font-size: 25px!important; font-weight: 600; color: #fff; margin-bottom: 5px; }
	.portfolioBox .heading span { color: #fd6834; font-size: 40px; }
	.portfolioBox .heading span.black { color: #222; }
	.portfolioBox .heading span.orange { color: #fd6834; }
	.portfolioBox .text.black p.heading { color: #222; }
	.portfolioBox .text.black p { color: #000; }
	.portfolioBox .text p { font-size: 13px; line-height: 18px; color: #fff; margin: 10px 0 0 0; }
	.portfolioBox .text .button { position: absolute; bottom: 40px; left: 0; font-size: 12px; }
	.portfolioBox .slick-dots { padding-right: calc((100% - 1200px) / 2); padding-left: calc((100% - 1200px) / 2); padding-top: 30px; overflow: hidden; }
	.portfolioBox .slick-dots li { float: left; font-size: 13px; color: #4c4c4c; }
	.portfolioBox .slick-dots li button { border: none; background: no-repeat; padding: 5px; font-size: 13px; color: #4c4c4c; cursor: pointer; }
	.portfolioBox .slick-dots .slick-active button { font-weight: 600; }

	/* ### experience box ### */
	.experienceBox { background: #f3f3f3; padding-bottom: 100px; overflow: hidden; }
	.experienceBox .title { margin-bottom: 35px; }
	.experienceBox .title h4 { text-align: left; }
	.experienceBox .text { float: left;  width: 65%; }
	.experienceBox figure { float: right; }
	.experienceBox figure img { max-width: 100%; }
	.experienceBox ul { list-style: none; }
	.experienceBox li { overflow: hidden; margin-bottom: 35px; }
	.experienceBox .left { float: left; width: 40%; }
	.experienceBox .left p { font-size: 14px; text-transform: uppercase; color: #4c4c4c; font-weight: 600; }
	.experienceBox .left p span { display: block; color: #999999; }
	.experienceBox .right { float: left; width: 60%; }
	.experienceBox .right p { font-size: 16px; line-height: 24px; }
	.experienceBox .right p strong { display: block; font-size: 18px; font-weight: 600; margin-bottom: 5px; }
	.experienceBox .right p span { color: #fc561c; }

	/* ### brand box ### */
	.brandBox { padding-top: 80px; padding-bottom: 80px; }
	.brandBox .title { margin-bottom: 50px; }
	.brandBox .title h4 { text-align: left; }
	.brandBox .logos { border: 2px solid #e2e2e2; padding: 25px 35px; }
	.brandBox ul { width: 100%; overflow-x: auto; white-space: nowrap; padding-bottom: 30px; }
	.brandBox li { display: inline-block; vertical-align: middle; margin:0 15px; }
	.brandBox li img { max-width: 100%; }

	/* ### detail box ### */
	.detailBox { padding-top: 70px; padding-bottom: 70px; position: relative; }
	.detailBox:after { content: ''; height: 115px; border-left: 1px solid #cccccc; position: absolute; bottom: -60px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
	.detailBox .text { width: 60%; }
	.detailBox .title { margin-bottom: 30px; text-align: left; }
	.detailBox .title h2:after { bottom: 0px; }
	.detailBox p { line-height: 24px; margin-bottom: 20px; }
	.detailBox .detail { width: 370px; background: #fff; padding: 70px 55px; box-shadow: 0px 0px 40px rgba(0,0,0,0.2); position: absolute; top: -150px; right: 0; border-radius: 3px; }
	.detailBox ul { list-style: none; }
	.detailBox li { margin-bottom: 25px; font-size: 12px; text-transform: uppercase; font-weight: 500; line-height: 18px; color: #fc561c; }
	.detailBox li strong { display: block; color: #333333; font-size: 17px; margin-bottom: 5px; font-weight: 500; }
	.detailBox .button { font-size: 12px; }

	/* ### project box ### */
	.projectBox { width: 100%; }
	.projectBox .projects { background: #f3f3f3; padding-top: 100px; overflow: hidden; margin-right: -25px; }
	.projectBox .slide { width: 50%; float: left; padding-right: 25px; }
	.projectBox .slide img { width: 100%; }
	.projectBox .responsive { padding-top: 130px; padding-bottom: 60px; overflow: hidden; }
	.projectBox .text { float: left; width: 30%; padding-right: 20px; }
	.projectBox .photo { float: left; width: 70%; }
	.projectBox .photo img { max-width: 100%; }
	.projectBox h3 { font-size: 20px; font-weight: 600; margin-bottom: 20px; }
	.projectBox h3 span { color: #fd6834; font-size: 40px; }
	.projectBox p { line-height: 24px; margin-bottom: 25px; }
	.projectBox p a { color: #fd6834; text-decoration: none; }
	.projectBox p a:hover { text-decoration: underline; }
	.projectBox .responsive ul { list-style: none; }
	.projectBox .responsive li { padding-left: 15px; position: relative; font-weight: 600; font-size: 16px; }
	.projectBox .responsive li:before { content: ''; width: 7px; height: 7px; background: #fd6834; position: absolute; top: 8px; left: 0; }
	.projectBox .figure { border: 1px solid #e2e2e2; margin-bottom: 100px; }
	.projectBox .figure img { width: 100%; }
	
	/* ### ----------------------------------- ### */
	.projectBox .website { background: #f3f3f3 url(../img/photo5.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.sinke { background: #f3f3f3 url(../img/photo16.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.nxxt { background: #f3f3f3 url(../img/photo6.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.mbjz { background: #f3f3f3 url(../img/photo7.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.orb { background: #f3f3f3 url(../img/photo37.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.quantibus { background: #f3f3f3 url(../img/photo8.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.sms { background: #f3f3f3 url(../img/photo9.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.waltmann { background: #f3f3f3 url(../img/photo10.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.vbo { background: #f3f3f3 url(../img/photo11.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.novy { background: #f3f3f3 url(../img/photo12.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.unite { background: #f3f3f3 url(../img/photo13.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.hex { background: #f3f3f3 url(../img/photo35.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.olfit { background: #f3f3f3 url(../img/photo19.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	
	.projectBox .website.blachi { background: #f3f3f3 url(../img/photo20.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.credits { background: #f3f3f3 url(../img/photo21.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.raad { background: #f3f3f3 url(../img/photo22.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.carligto { background: #f3f3f3 url(../img/photo23.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.bruiloft { background: #f3f3f3 url(../img/photo24.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.fysio { background: #f3f3f3 url(../img/photo25.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.bom { background: #f3f3f3 url(../img/photo26.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.styling { background: #f3f3f3 url(../img/photo27.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	.projectBox .website.nci { background: #f3f3f3 url(../img/photo28.jpg) no-repeat left bottom; padding-top: 70px; min-height: 575px; margin-bottom: 70px; }
	
	
	.projectBox .detail { float: right; width: 375px; padding-top: 160px; }
	.projectBox .detail p { font-size: 48px; line-height: 48px; }
	.projectBox .detail p span { font-size: 15px; text-transform: uppercase; margin-bottom: 10px; letter-spacing: 5px; display: block; font-weight: 500; line-height: 24px; }
	.projectBox .detail p strong { font-weight: 600; }
	.projectBox .controls { border-top: 1px solid #dddddd; padding-top: 45px; overflow: hidden; padding-bottom: 100px; }
	.projectBox .previous { float: left; font-size: 12px; font-weight: 500; text-transform: uppercase; text-decoration: none; color: #333333; }
	.projectBox .next { float: right; font-size: 12px; font-weight: 500; text-transform: uppercase; text-decoration: none; color: #333333; }
	.projectBox .slick-dots { width: 100%; text-align: center; padding: 20px 0; }
	.projectBox .slick-dots li { display: inline-block; float: none; margin: 0 10px; }
	.projectBox .slick-dots button { border: none; background: none; }
	.projectBox .slick-dots .slick-active { border-bottom: 2px solid #fc561c; }

	/* ### work box ### */
	.workBox { padding-bottom: 100px; overflow: hidden; }
	.workBox .title { margin-bottom: 30px; }
	.workBox .title h3 { text-align: left; }
	.workBox .workDesktop { margin-right: -25px; }
	.workBox .column { float: left; width: 30%; padding-right: 25px; }
	.workBox .column figure, .workBox .slide { margin-bottom: 30px; width: 100%; position: relative; }
	.workBox .column figure a { display: block; border: 1px solid #fff; }
	/*.workBox .column figure a:hover { box-shadow: 0px 0px 15px rgba(0,0,0,0.2); border: 1px solid #e2e2e2; }*/
	.workBox .column figure img { width: 100%; opacity: 0.5; }
	.workBox .column figure a:hover img { opacity: 1;}
	.workBox .text { position: absolute; top: 30px; left: 40px; z-index: 1; }
	.workBox .text.white p { color: #fff; }
	.workBox .column p { font-size: 18px; color: #222; font-weight: 600; }
	.workBox .column span { display: block; color: #989898; text-transform: uppercase; font-size: 11px; }
	.workBox .text.white span { color: #fff; }
	.workBox .column:nth-of-type(2){ width: 40%; }
	.workBox .workMobile { display: none; }
	/*.workBox .slick-current a { box-shadow: 0px 0px 15px rgba(0,0,0,0.2); border-color: #e2e2e2; display: block; }*/
	.workBox .slick-slide { padding: 10px; }
	.workBox figure { position: relative; }
	.workBox figure img { width: 100%; }
	.workBox .whiteBg { background: #fff; border: 1px solid #e2e2e2; }
	.workBox .purpleBg { background: #de4994; }
	.workBox .grayBg { background: #242524; }
	.workBox .orangeBg { background: #fd7748; }
	.workBox .gray1Bg { background: #3f3f3f; }
	.workBox .gray2Bg { background: #ececec; }
	.workBox .pinkBg { background: #f9516e; }

/* ### footer container ### */
#footerCntr { overflow: hidden; width: 100%; background: #333333; padding-top: 90px; padding-bottom: 60px; }
#footerCntr .contact { max-width: 1024px; margin: 0 auto; position: relative; }
#footerCntr .top { text-align: center; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around; border-bottom: 1px solid #4c4c4c; padding-bottom: 30px; margin-bottom: 30px; }
#footerCntr .top a { color: #cfcfcf; font-size: 14px; padding-top: 60px; position: relative; text-decoration: none; }
#footerCntr .top a:before { position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-family: icomoon; }
#footerCntr .top a.location:before { content: '\e910'; font-size: 35px; }
#footerCntr .top a.phone:before { content: '\e913'; font-size: 35px; }
#footerCntr .top a.email:before { content: '\e911'; font-size: 25px; }
#footerCntr .social { text-align: center; }
#footerCntr .social li { display: inline-block; margin: 0 15px; }
#footerCntr .social li a { color: #4c4c4c; text-decoration: none; font-size: 20px; }
#footerCntr .social li a:hover { color: #fff; }
#footerCntr .privacy { position: absolute; bottom: 0; right: 0; color: #4c4c4c; font-size: 14px; text-decoration: none; }
#footerCntr .privacy:hover { color: #fff; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 1300px) {
	.centered, .center { padding-left: 20px; padding-right: 20px; }
	.skillBox .skill { width: 100%; float: none; margin-bottom: 60px; }
	.skillBox .graph { float: none; margin: 0 auto; }
	.portfolioBox .slick-dots { padding-left: 50px; padding-right: 50px;  }
	#footerCntr .privacy { right: 20px; }
	.detailBox .detail { right: 20px; }
	.projectBox .responsive { padding-top: 70px; }
	.projectBox .figure { margin-left: 20px; margin-right: 20px; }
	
	/* ### ----------------------------------- ### */
	.projectBox .website { min-height: 800px; }
	.projectBox .website.sinke { min-height: 800px; }
	.projectBox .website.nxxt { min-height: 800px; }
	.projectBox .website.mbjz { min-height: 800px; }
	.projectBox .website.orb { min-height: 800px; }
	.projectBox .website.quantibus { min-height: 800px; }
	.projectBox .website.sms { min-height: 800px; }
	.projectBox .website.waltmann { min-height: 800px; }
	.projectBox .website.vbo { min-height: 800px; }
	.projectBox .website.novy { min-height: 800px; }
	.projectBox .website.unite { min-height: 800px; }
	.projectBox .website.hex { min-height: 800px; }
	.projectBox .website.olfit { min-height: 800px; }
	
	.projectBox .website.blachi { min-height: 800px; }
	.projectBox .website.credits { min-height: 800px; }
	.projectBox .website.raad { min-height: 800px; }
	.projectBox .website.carligto { min-height: 800px; }
	.projectBox .website.bruiloft { min-height: 800px; }
	.projectBox .website.fysio { min-height: 800px; }
	.projectBox .website.bom { min-height: 800px; }
	.projectBox .website.styling { min-height: 800px; }
	.projectBox .website.nci { min-height: 800px; }
	
	.projectBox .detail { padding-top: 0; width: 100%; text-align: center; }
	.skillBox .skill { max-width: 600px; margin: auto; }
}

@media only screen and (max-width: 979px) {
	.portfolioBox .slick-dots { padding-top: 10px; padding-bottom: 10px; }
	.bannerBox { background-position: top right -200px; }
	.bannerBox .tagline { margin-top: 30px; }
	.bannerBox .heading { line-height: 55px; }
	.aboutBox .download { width: 50%; }
	.aboutBox .photo { width: 50%; }
	.aboutBox .details { display: none; }
	.portfolioBox .text { position: static; padding-top: 30px; width: auto; }
	.portfolioBox .text .heading { font-size: 20px; line-height: 30px; }
	.portfolioBox .text .heading span.black { color: #fd6834; }
	.portfolioBox .text p { color: #333333; }
	.portfolioBox .text .button { position: static; float: right; }
	.portfolioBox .previous { left: 10px; }
	.portfolioBox .next { right: 10px; }
	.experienceBox .left { width: 100%; }
	.experienceBox .right { width: 100%; }
	.experienceBox .text { padding-right: 20px; }
	.experienceBox .left p { font-weight: 500; }
	.experienceBox { padding-bottom: 50px; }
	#footerCntr .top { margin-left: 20px; margin-right: 20px; }
	#footerCntr .privacy { position: static; text-align: center; display: block; }
	#footerCntr .social { padding-bottom: 20px; }
	#footerCntr { padding-bottom: 30px; }
	.aboutBox .tab li:last-child { display: block; }
	.aboutBox .details li strong { font-size: 18px; }
	.aboutBox #tabs-3 { display: block; }
	.aboutBox #tabs-3 .details { display: block!important; width: 100%; }
	.aboutBox #tabs-3 .details .title { display: none; }
	.aboutBox #tabs-3 .details li { width: 100%; margin-bottom: 0px; }
	.aboutBox #tabs-3 .details li strong { display: inline-block; padding-right: 10px; }
	.aboutBox #tabs-3 .details .button { margin-top: 50px; }
	.skillBox .graph { margin-top: 65px; }
	
	/* ### --------------------------------------------------- ### */
	.bannerBox.subPage { background-position: left -150px center; }
	.bannerBox.subPage.sinke { background-position: left -150px center; }
	.bannerBox.subPage.nxxt { background-position: left -150px center; }
	.bannerBox.subPage.mbjz { background-position: left -150px center; }
	.bannerBox.subPage.orb { background-position: left -150px center; }
	.bannerBox.subPage.quantibus { background-position: left -150px center; }
	.bannerBox.subPage.sms { background-position: left -150px center; }
	.bannerBox.subPage.waltmann { background-position: left -150px center; }
	.bannerBox.subPage.vbo { background-position: left -150px center; }
	.bannerBox.subPage.novy { background-position: left -150px center; }
	.bannerBox.subPage.unite { background-position: left -150px center; }
	.bannerBox.subPage.hex { background-position: left -150px center; }
	.bannerBox.subPage.olfit { background-position: left -150px center; }
	
	.bannerBox.subPage.blachi { background-position: left -150px center; }
	.bannerBox.subPage.credits { background-position: left -150px center; }
	.bannerBox.subPage.raad { background-position: left -150px center; }
	.bannerBox.subPage.carligto { background-position: left -150px center; }
	.bannerBox.subPage.bruiloft { background-position: left -150px center; }
	.bannerBox.subPage.fysio { background-position: left -150px center; }
	.bannerBox.subPage.bom { background-position: left -150px center; }
	.bannerBox.subPage.styling { background-position: left -150px center; }
	.bannerBox.subPage.nci { background-position: left -150px center; }
	
	
	.detailBox .detail { position: static; width: 100%; margin-top: -250px; padding: 50px 60px; overflow: hidden; margin-bottom: 60px; }
	.detailBox ul { overflow: hidden; }
	.detailBox li { float: left; width: 33.33%; }
	.detailBox .text { width: 100%; }
	.detailBox .title { text-align: center; }
	.detailBox .text { text-align: center; }
	.projectBox .text { width: 100%; padding-right: 0; padding-bottom: 50px; }
	.projectBox .photo { width: 100%; text-align: center; }
	.projectBox .photo img { display: inline-block; }
	.workBox { padding-bottom: 50px; }
	.workBox .workDesktop { display: none; }
	.workBox .workMobile { display: block; margin-right: -20px; }
	.workBox .workMobile p { font-size: 16px; color: #222; font-weight: 600; }
	.workBox .workMobile span { display: block; color: #989898; text-transform: uppercase; font-size: 12px; }
	.workBox .workMobile .slide img { width: 100%; }
	.workBox .slick-dots { width: 100%; text-align: center; padding: 20px 0; padding-right: 20px; }
	.workBox .slick-dots li { display: inline-block; float: none; margin: 0 10px; }
	.workBox .slick-dots button { border: none; background: none; }
	.workBox .slick-dots .slick-active { border-bottom: 2px solid #fc561c; }
	
	/* ### ----------------------------------- ### */
	.projectBox .website { background-size: 700px; min-height: 640px; }
	.projectBox .website.sinke { background-size: 700px; min-height: 640px; }
	.projectBox .website.nxxt { background-size: 700px; min-height: 640px; }
	.projectBox .website.mbjz { background-size: 700px; min-height: 640px; }
	.projectBox .website.orb { background-size: 700px; min-height: 640px; }
	.projectBox .website.quantibus { background-size: 700px; min-height: 640px; }
	.projectBox .website.sms { background-size: 700px; min-height: 640px; }
	.projectBox .website.waltmann { background-size: 700px; min-height: 640px; }
	.projectBox .website.vbo { background-size: 700px; min-height: 640px; }
	.projectBox .website.novy { background-size: 700px; min-height: 640px; }
	.projectBox .website.unite { background-size: 700px; min-height: 640px; }
	.projectBox .website.hex { background-size: 700px; min-height: 640px; }
	.projectBox .website.olfit { background-size: 700px; min-height: 640px; }
	
	.projectBox .website.blachi { background-size: 700px; min-height: 640px; }
	.projectBox .website.credits { background-size: 700px; min-height: 640px; }
	.projectBox .website.raad { background-size: 700px; min-height: 640px; }
	.projectBox .website.carligto { background-size: 700px; min-height: 640px; }
	.projectBox .website.bruiloft { background-size: 700px; min-height: 640px; }
	.projectBox .website.fysio { background-size: 700px; min-height: 640px; }
	.projectBox .website.bom { background-size: 700px; min-height: 640px; }
	.projectBox .website.styling { background-size: 700px; min-height: 640px; }
	.projectBox .website.nci { background-size: 700px; min-height: 640px; }
	
	
	.projectBox .responsive { padding-top: 30px; }
	.projectBox .controls { padding-bottom: 50px; }
}

@media only screen and (max-width: 767px) {
	.bannerBox { background-position: top right -300px; }
	#headerCntr .menuIcon { left: 40px; }
	.bannerBox .heading { font-size: 40px; }
	.aboutBox .download { width: 100%; text-align: center; padding-bottom: 40px; }
	.aboutBox .photo { width: 100%; text-align: center; }
	.aboutBox { padding-bottom: 40px; }
	.skillBox .graph { padding-left: 230px; background-size: 200px; max-width: 410px; height: 185px; margin-top: 10px; }
	.skillBox .graph ul { margin-top: -15px; }
	.skillBox .graph li { font-size: 14px; margin-bottom: -5px; }
	.skillBox .graph li strong { font-size: 20px; }
	.skillBox .skill li { font-size: 18px; }
	.skillBox .skill li strong { padding-right: 20px; }
	.portfolioBox .slick-dots { text-align: center; }
	.portfolioBox .slick-dots li { float: none; display: inline-block; }
	.experienceBox .text { width: 100%; padding-right: 0; }
	.experienceBox figure { display: none; }
	.experienceBox { padding-bottom: 20px; }
	#footerCntr .top { display: block; text-align: left; }
	#footerCntr .top a { display: block; padding-top: 0; padding-left: 50px; margin-bottom: 30px; }
	#footerCntr .top a br { display: none; }
	#footerCntr .top a:before { top: -5px; left: 0; -webkit-transform: none; transform: none; }
	#footerCntr .top a.phone:before { left: 10px; }
	#footerCntr { padding-top: 50px; }
	.portfolioBox .previous { top: 50%; width: 60px; height: 60px; line-height: 60px; }
	.portfolioBox .next { top: 50%; width: 60px; height: 60px; line-height: 60px; }
	.portfolioBox .slide { padding: 0 20px; }
	.portfolioBox .text .heading span.black { color: #fd6834; }
	.experienceBox .left p span { display: inline-block; }
	.brandBox .logos { padding: 20px; padding-bottom: 0; }
	.detailBox li { width: 100%; }
	.projectBox .figure { margin-bottom: 50px; }
	.projectBox .detail p { font-size: 40px; line-height: 50px; }
	
	/* ### ----------------------------------- ### */
	.projectBox .website { background-size: 500px; min-height: 600px; }
	.projectBox .website.sinke { background-size: 500px; min-height: 600px; }
	.projectBox .website.nnxt { background-size: 500px; min-height: 600px; }
	.projectBox .website.mbjz { background-size: 500px; min-height: 600px; }
	.projectBox .website.orb { background-size: 500px; min-height: 600px; }
	.projectBox .website.quantibus { background-size: 500px; min-height: 600px; }
	.projectBox .website.sms { background-size: 500px; min-height: 600px; }
	.projectBox .website.waltmann { background-size: 500px; min-height: 600px; }
	.projectBox .website.vbo { background-size: 500px; min-height: 600px; }
	.projectBox .website.novy { background-size: 500px; min-height: 600px; }
	.projectBox .website.unite { background-size: 500px; min-height: 600px; }
	.projectBox .website.hex { background-size: 500px; min-height: 600px; }
	.projectBox .website.olfit { background-size: 500px; min-height: 600px; }
	
	.projectBox .website.blachi { background-size: 500px; min-height: 600px; }
	.projectBox .website.credits { background-size: 500px; min-height: 600px; }
	.projectBox .website.raad { background-size: 500px; min-height: 600px; }
	.projectBox .website.carligto { background-size: 500px; min-height: 600px; }
	.projectBox .website.bruiloft { background-size: 500px; min-height: 600px; }
	.projectBox .website.fysio { background-size: 500px; min-height: 600px; }
	.projectBox .website.bom { background-size: 500px; min-height: 600px; }
	.projectBox .website.styling { background-size: 500px; min-height: 600px; }
	.projectBox .website.nci { background-size: 500px; min-height: 600px; }
}

@media only screen and (max-width: 479px) {
	.bannerBox { height: 453px; background: url(../img/banner-mobile.jpg) no-repeat top right; background-size: 100%; }
	#headerCntr { padding-top: 125px; }
	#headerCntr .menuIcon { top: 45px; }
	#headerCntr .logo { top: 30px;  }
	#headerCntr .logo:before { font-size: 60px; }
	.bannerBox .text { padding-top: 160px; }
	.skillBox .graph { padding-left: 140px; width: 280px; background-size: 120px; height: 120px; padding-top: 0; }
	.skillBox .graph ul { margin-top: 0; padding-top: 32px; }
	.skillBox .graph li { font-size: 12px; }
	.skillBox .graph li strong { font-size: 14px; }
	.bannerBox .heading { font-size: 25px; letter-spacing: 8px; line-height: 30px; }
	.bannerBox .heading:before { width: 90px; }
	.bannerBox .heading:after { width: 40px; }
	.title h2, .title h3, .title h4 { font-size: 19px; margin-top: 20px; letter-spacing: 3px; }
	.title h2, .title h3, .title h4 span{ padding-bottom: 20px; }
	.skillBox .skill .ball { float: none; display: inline-block; }
	.skillBox .skill { margin-bottom: 20px; }
	.skillBox { padding: 20px; }
	.portfolioBox .previous { width: 40px; height: 40px; line-height: 40px; top: 42%; }
	.portfolioBox .next { width: 40px; height: 40px; line-height: 40px; top: 42%; }
	.portfolioBox .text .button { padding: 5px 10px; }
	.portfolioBox { padding-bottom: 30px; }
	.portfolioBox .text .heading { line-height: 10px; }
	.portfolioBox .text .heading span.black { color: #fd6834; }
	.brandBox { padding-top: 40px; padding-bottom: 40px; }
	.menuBox ul li { font-size: 20px; margin-bottom: 5px; }
	.detailBox .detail { padding: 30px; }
	.bannerBox.subPage { background-position: left -180px center; }
	.projectBox .detail p { font-size: 30px; line-height: 35px; }
	
		/* ### ----------------------------------- ### */
	.projectBox .website { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.sinke { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.nxxt { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.mbjz { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.orb { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.quantibus { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.sms { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.waltmann { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.vbo { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.novy { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.unite { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.hex { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.olfit { background-size: 280px; min-height: 400px; padding-top: 0; }
	
	.projectBox .website.blachi { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.credits { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.raad { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.carligto { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.bruiloft { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.fysio { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.bom { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.styling { background-size: 280px; min-height: 400px; padding-top: 0; }
	.projectBox .website.nci { background-size: 280px; min-height: 400px; padding-top: 0; }
	
	.projectBox .responsive { padding-top: 10px; }
	.projectBox .controls { padding-bottom: 40px; }
	.aboutBox:before { height: 110px; top: -50px; }
	.bannerBox .tagline { line-height: 20px; margin-bottom: 40px; }
	.button { font-size: 12px; }
	
	
	
	/* ### --------------------------------------------------- ### */
	.bannerBox.subPage { background: url(../img/banner-sub-mobile.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.sinke { background: url(../img/banner-sub-mobile-01.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.nxxt { background: url(../img/banner-sub-mobile-02.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.mbjz { background: url(../img/banner-sub-mobile-03.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.orb { background: url(../img/banner-sub-mobile-04.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.quantibus { background: url(../img/banner-sub-mobile-05.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.sms { background: url(../img/banner-sub-mobile-06.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.waltmann { background: url(../img/banner-sub-mobile-07.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.vbo { background: url(../img/banner-sub-mobile-08.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.novy { background: url(../img/banner-sub-mobile-09.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.unite { background: url(../img/banner-sub-mobile-20.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.hex { background: url(../img/banner-sub-mobile-22.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.olfit { background: url(../img/banner-sub-mobile-10.jpg) no-repeat top right; background-size: 100%; }
	
	.bannerBox.subPage.blachi { background: url(../img/banner-sub-mobile-15.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.credits { background: url(../img/banner-sub-mobile-16.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.raad { background: url(../img/banner-sub-mobile-17.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.carligto { background: url(../img/banner-sub-mobile-14.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.bruiloft { background: url(../img/banner-sub-mobile-11.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.fysio { background: url(../img/banner-sub-mobile-21.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.bom { background: url(../img/banner-sub-mobile-13.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.styling { background: url(../img/banner-sub-mobile-18.jpg) no-repeat top right; background-size: 100%; }
	.bannerBox.subPage.nci { background: url(../img/banner-sub-mobile-12.jpg) no-repeat top right; background-size: 100%; }
	
	.detailBox .detail { margin-top: -200px; }
	.aboutBox .download ul { max-width: 300px; margin: 0 auto; }
	.skillBox .skill li strong { padding-left: 25px; width: 135px; padding-right: 7px; }
	.skillBox .skill li strong:before { font-size: 20px; }
	.skillBox .skill li { font-size: 13px; overflow: visible; padding: 2px 0; }
	.skillBox .skill li strong span { font-size: 30px; line-height: 5px; }
	.skillBox .skill .ball { width: 10px; height: 10px; margin-right: 1px; }
	.workBox .workMobile { margin-right: 0; }
	.workBox .workMobile p { font-size: 13px; color: #222; font-weight: 600; }
	.workBox .workMobile span { display: block; color: #989898; text-transform: uppercase; font-size: 10px; }
	.workBox .workMobile .text { left: 20px; top: 10px; }
	.aboutBox .details li { text-align: left; }
	.aboutBox .details li strong { font-size: 16px; }
	.aboutBox #tabs-3 .details li strong { padding-right: 2px; }
	.aboutBox { padding-top: 90px; }
	.projectBox .detail { padding-top: 40px; }
	.workBox .slick-dots li { margin: 0 5px; }
	.workBox .slick-dots li button { font-size: 12px; }
	.workBox .text { font-size: 13px; }
	.portfolioBox .heading { font-size: 15px!important; }
	.experienceBox .left p { font-weight: 400; }
}