.home.content{height:100%; padding:0; overflow:hidden;}
.home.content .wrap{position:absolute; top:52.5%; right:6%; width:70vh; height:70%; z-index:3; -webkit-transform:translate(0,-50%); transform:translate(0,-50%);}
.home.content .wrap h1 {position:absolute; top:-8px; right:110%; width: 500px; font-size:28px; line-height:36px; color:#fff; font-weight:400; font-style:italic; text-transform:uppercase; text-align: right; z-index:3;}
.home.content .wrap h1 span {font-style:italic; font-weight:600; color:#fff;}
.home.content .grid{position:relative; float:left; width:100%; height:100%;}
.home.content .grid div{position:relative; float:left; width:32.666%; padding-top:32.666%; margin-right:1%; margin-bottom:1%; background:no-repeat center / cover;}
.home.content .grid div:nth-of-type(3n){margin-right:0;}
.home.content .grid div:nth-of-type(5) a{background:#5b6773; font-size:22px; cursor:default;}
.home.content .grid div:nth-of-type(5) a p{font-size:20px;}
.home.content .grid div:nth-child(n+7){margin-bottom:0;}
.home.content .grid a{position:absolute; top:0; left:0; background:#11b5bc; width:100%; height:100%;}
.home.content .grid a p{position:absolute; top:50%; left:50%; font-size:18px; line-height:22px; font-weight:600; text-transform:uppercase; color:#fff; text-align:center; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%);}
.home.content .grid a:hover{background:#5b6773;}
.home.content .overlay {position: absolute; top: 0; left:0; background: #5b6773; height: 100%; width: 100%; opacity: 0.7; z-index: 2;}
.home.content .bg{position:absolute; top:-5%; left:-5%; width:110%; height:110%; background:no-repeat center / cover; z-index:1;}

.head{padding:160px 0 0; overflow:hidden;}
.head .full{margin:250px 0 150px; width:50%; z-index:4;}
.head h1{font-size:45px; line-height:45px; color:#fff; text-transform:uppercase; font-weight:700; margin:0;}
.head small{font-size:16px; line-height:30px; color:#fff; text-transform:uppercase; font-style:italic;}
.head p{font-size:17px; line-height:30px; color:#fff; margin-top:20px;}
.head p:nth-of-type(1){text-transform:uppercase; font-weight:600; font-style:italic; margin-top:40px;}
.head a{color:#fff;}
.head a:hover{color:#11b5bc;}
.head .slogan{position:absolute; top:240px; right:8%; width:500px; font-size:28px; line-height:36px; color:#fff; font-style:italic; text-transform:uppercase; text-align: right; z-index:3;}
.head .slogan span{font-style:italic; font-weight:600; color:#fff;}
.head .overlay{position: absolute; top: 0; left:0; background: #5b6773; height: 100%; width: 100%; opacity: 0.7; z-index: 2;}
.head .bg{position:absolute; top:-5%; left:-5%; width:110%; height:110%; background:url(/img/bg.jpg) no-repeat center / cover; z-index:1;}

.services{padding:0;}
.services .item{position:relative; float:left; width:50%; background:#000; overflow:hidden;}
.services .item .content{position:relative; float:left; width:220px; height:220px; margin-top:240px; padding:20px; font-size:20px; line-height:24px; text-transform:uppercase; font-weight:700; color:#fff; background:#11b5bc; z-index:2;}
.services .item .content span{position:absolute; bottom:20px; right:20px; font-size:14px; line-height:14px; background:url(/img/icons/arrow.png) no-repeat right -30px center / 24px 24px; transition:0.3s ease;}
.services .item .image{position:absolute; left:0; top:0; width:100%; height:100%; background:no-repeat #000 center / cover; z-index:1; transition:2s ease-out;}
.services .item:hover .content span{padding-right:30px; background-position:right -4px center;}
.services .item:hover .image{opacity:0.7; -webkit-transform:scale(1.03,1.03); transform:scale(1.03,1.03);}
.services.subs{padding:150px 0 80px; background:#5b6773;}
.services.subs .container{width:900px;}
.services.subs .item{width:47%; margin-right:6%; margin-bottom:80px; color:#fff; background:none;}
.services.subs .item:nth-of-type(2n){margin-right:0;}
.services.subs .item .image{position:relative; left:auto; top:auto; display:block; width:100%; height:280px; margin-bottom:45px; transition:0.3s ease;}
.services.subs .item h2{font-size:26px; font-weight:700; text-transform:uppercase;}
.services.subs .item h2 span{font-size:18px; line-height:28px; font-weight:300; font-style:italic;}
.services.subs .item p a{color:#fff; text-decoration:underline;}
.services.subs .item p a:hover{opacity:0.5;}
.services.subs .item:hover .image{transform:none; opacity:1;}
.services.subs .item .image:hover{filter:grayscale(0);}

/*.quote{background:url(/img/cta-bg.jpg) no-repeat #11b5bc right / auto 100%; padding:100px 0;}*/
.quote{background:#11b5bc; padding:100px 0;}
.quote .form{float:left; width:50%; color:#fff;}
.quote .form h3{font-size:35px; font-weight:700; text-transform:uppercase;}
.quote .form h3 span{display:block; font-size:18px; font-style:italic;}
.quote .form p{font-size:17px; line-height:30px; font-weight:700; font-style:italic; text-transform:uppercase;}
.quote .form form{margin-top:40px;}
.quote .form form table{width:100%;}
.quote .form form td{font-size:17px; font-weight:400; padding-bottom:8px;}
.quote .form form td:first-child{width:140px;}

.howwework{width:100% !important; margin:0 0 100px !important;}
.howwework .half{position:relative; width:70%; margin:0; margin:0 30% 40px 0;}
.howwework .half div{float:left;}
.howwework .half div:first-child{position:relative; width:30%; padding-top:30%; background:#11b5bc;}
.howwework .half div:first-child::after{position:absolute; content:""; left:50%; bottom:-50%; width:2px; height:100%; background:#11b5bc; z-index:-1;}
.howwework .half div:first-child p{position:absolute; top:50%; left:50%; width:80%; text-align:center; margin:0; font-style:normal; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.howwework .half div:last-child{width:70%; padding:30px 0  0 60px;}
.howwework .half div:last-child h3{color:#fff; font-size:20px; line-height:26px; margin:0 0 20px;}
.howwework .half div:last-child p{font-size:15px; line-height:26px; text-transform:none; font-style:normal; margin:0; font-weight:300;}
.howwework ol{margin-left:20px; width:70%;}
.howwework ol li{color:#fff; list-style: decimal; font-size:14px; line-height:24px; padding:8px 0 3px 10px;}
.howwework:last-child{margin-bottom:150px !important;}
.howwework .half:last-child div:first-child::after{display:none;}

.about .container{width:60% !important;}
.about.samantha{background:url(/img/demo/overons/samantha.jpg) no-repeat #11b5bc left / auto 100%;}
.about.adriaan{background:url(/img/demo/overons/adriaan.jpg) no-repeat #11b5bc right / auto 100%;}

.page{background-color:#5b6773; color:#fff;}
.page.blue{background-color:#11b5bc; padding:100px 0;}
.page .container{width:900px;}
.page h2, .page h3{margin:40px 0 20px;}
.page h2:first-child, .page h3:first-child{margin-top:0;}
.page p{text-align:justify;}
.page a{color:#11b5bc; text-decoration:underline;}
.page a:hover{color:#fff; text-decoration:underline;}

/*retina*/
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi){
.services .item .content span{background-image:url(/img/icons/arrow@2x.png);}
}
/*responsive*/
@media screen and (max-width:1500px){
.home.content .wrap{top:54%;}
.home.content .wrap h1{width:350px; font-size:24px; line-height:30px;}
.home.content .grid a p{font-size:16px; line-height:20px;}
.home.content .grid div:nth-of-type(5) a p{font-size:18px;}
.head .container{width:80%;}
.about .container{width:80% !important;}
}
@media screen and (max-width:1400px){
.home.content .wrap{right:6px;}
}
@media screen and (max-width:1280px){
.home.content .wrap{position:absolute; top:auto; bottom:6px; transform:none;}
.home.content .wrap h1{top:-20%; right:10%; width:90%; font-size:22px; line-height:28px;}
}
@media screen and (max-width:1100px){
.home.content .wrap{bottom:60px; right:40px;}
.home.content .wrap h1{top:60px; right:110%; width:340px;}
.head .full{width:70%; margin:150px 0 100px;}
.head .slogan{top:160px; width:400px; font-size:24px; line-height:32px;}
.services .item .content{margin-top:180px;}
.services.subs{padding:100px 0 10px;}
.services.subs .container, .page .container{width:80%;}
.howwework .half{width:90%; margin-right:10%;}
}
@media screen and (max-width:990px){
.home.content .wrap{right:10%; width:60vh; height:60%; bottom:70px;}
.home.content .wrap h1{right:0; top:-22%; width:70%;}
.services.subs .item{width:100%; margin-right:0;}
.quote .form{width:100%;}
.howwework:last-child{margin-bottom:100px !important;}
.howwework .half{width:100%; margin-right:0;}
.howwework .half div:last-child{padding:20px 0 0 40px;}
.howwework .half div:first-child::after{bottom:-100%; height:200%;}
.howwework ol{width:90%;}
.about .half{margin:0;}
.about.samantha{padding:0; background-position:left top; background-size:50% auto;}
.about.samantha .half:first-child, .about.adriaan .half:last-child{display:none;}
.about.samantha .half:last-child{margin-bottom:80px; width:40%; float:right;}
.about.adriaan{padding:0; background-position:right top; background-size:50% auto;}
.about.adriaan .half:first-child{margin-bottom:80px; width:40%; float:left;}
}
@media screen and (max-width:750px){
.home.content{height:auto;}
.home.content .wrap{position:relative; top:auto; right:auto; bottom:auto; width:100%; height:auto; margin-top:150px;}
.home.content .wrap h1{position:relative; float:right; right:auto; top:auto; width:85%; margin-right:9%; font-size:18px;}
/*.home.content .grid div{width:49%; padding-top:49%; margin:0 2% 7px 0;}
.home.content .grid div:nth-of-type(3n){margin-right:2%;}
.home.content .grid div:nth-of-type(2n){margin-right:0;}*/
.home.content .grid a p{font-size:14px; line-height:16px;}
.home.content .grid div:nth-of-type(5) a p{font-size:16px;}
.head{padding:100px 40px 40px;}
.head .container{width:100%;}
.head .slogan{position:relative; margin-top:50px; top:auto; right:auto; width:100%; font-size:18px; line-height:30px;}
.head .slogan span{font-style:italic; font-weight:600; color:#fff;}
.head .full{width:100%; margin:80px 0 0;}
.head h1{font-size:38px; line-height:38px;}
.head p{font-size:16px;}
.services .item{width:100%;}
.services .item .content{width:200px; height:200px; font-size:18px; line-height:22px;}
.services.subs .container, .page .container{width:100%;}
.services.subs{padding:0 0 40px;}
.services.subs .item{margin-bottom:40px;}
.services.subs .item:last-child{margin-bottom:0;}
.services.subs .item .image{margin-bottom:30px; height:220px;}
.services.subs .item h2, .services.subs .item p{padding:0 40px;}
.services.subs .item a.linkbtn{margin-left:40px;}
.quote{padding:40px;}
.quote{background-position:left 60% center;}
.quote .container{width:100%;}
.quote .form h3{font-size:25px; line-height:30px;}
.quote .form h3 span{font-size:14px;}
.quote .form p{font-size:15px; line-height:24px;}
.quote .form form td{font-size:15px;}
.quote .form table td:first-child{padding-right:0;}
.quote .form table td:last-child{padding-left:0;}
.quote .form form td:first-child{width:120px;}
.howwework{ margin:0 0 40px !important;}
.howwework:last-child{margin:0 !important;}
.howwework .half{margin:30px 0 0; padding-bottom:80px; background:url(/img/icons/arrow-down@2x.png) no-repeat bottom 10px center / 24px 24px;}
.howwework .half div:first-child{width:100%; padding:0; height:80px;}
.howwework .half div:first-child::after{display:none;}
.howwework .half div:first-child p{line-height:20px;}
.howwework .half div:last-child{padding:30px 0 0 0; width:100%;}
.howwework .half:last-child{margin:30px 0 0; padding-bottom:0; background:none;}
.about .container{width:100% !important;}
.about.samantha{background-size:100% auto;}
.about.samantha .half:last-child{width:80%; margin:600px 10% 40px;}
.about.adriaan{background-size:100% auto;}
.about.adriaan .half:first-child{width:80%; margin:400px 10% 40px;}
.page, .page.blue{padding:40px;}
.page .container{width:100%;}
.page h2, .page p{text-align:left;}
}
@media screen and (max-width:320px){
.about.samantha .half:last-child{margin:500px 10% 40px;}
.about.adriaan .half:first-child{margin:350px 10% 40px;}
.page .container{width:90%;}
}