@import "sections/services-listing.css";

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html, body{font-family:  Arial,Helvetica,sans-serif; margin:0px; padding:0px; width:100%; height:auto; overflow-x:hidden; background:rgba(255,255,255,1);}
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}
.wrapper {position:relative; width:90%; max-width:1200px; margin:0 auto;}
.wrapper.center {text-align:center;}
.wrapper.paddingTop {padding:100px 0;}
.close-form {position:absolute; right:30px; top:30px; width:20px; cursor:pointer;}
#world {position:fixed; left:0; top:0; width:100%; height:100vh; z-index:10;}
.padding {padding:0 15%;}
.clear {clear:both;}
.line {position:relative; float:left; width:100%; height:1px; background:rgba(255,255,255,0.1); margin:30px 0;}
main {position:relative; width:100%; height:auto; z-index:100;}
.gradient {position:absolute; display:none; pointer-events:none; left:0; z-index:10; top:0; width:100%; height:100%; background: -moz-linear-gradient(left,  rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
}
.img-full {width:100%; padding:40px 0;}
.img-height {width:auto; height:230px; padding:120px 0;}
/* dimensions & placement of ParticleSlider */
#particle-slider {
  width: 1000px;
  height: 300px;
  margin:32vh auto;
}
/* hide control & slide sources */
#particle-slider div {
  display: none;
}

.whiteoverlay {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	opacity:0.8;
	background: rgb(33,151,224); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(33,151,224,1) 0%, rgba(70,195,250,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,151,224,1)), color-stop(100%,rgba(70,195,250,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(33,151,224,1) 0%,rgba(70,195,250,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(33,151,224,1) 0%,rgba(70,195,250,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(33,151,224,1) 0%,rgba(70,195,250,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(33,151,224,1) 0%,rgba(70,195,250,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2197e0', endColorstr='#46c3fa',GradientType=0 ); /* IE6-9 */

}

/* Schriften */
h2 {position:relative; font-size:40px; width:auto; line-height:55px; font-weight:400; z-index:100; color:rgba(255,255,255,1); -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
h3 {width:100%; opacity:1; font-size:30px; letter-spacing:1px; line-height:35px; font-weight:400; color:rgba(70,195,250,1); -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
h4 {width:100%; opacity:1; font-size:25px; letter-spacing:1px; line-height:35px; font-weight:300; color:rgba(70,195,250,1); -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
p {font-size:16px; line-height:30px; font-weight:300; color:rgba(25,25,25,0.6); margin-top:30px; padding:0; letter-spacing:1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
a {font-size:16px; text-decoration:none; line-height:28px; font-weight:300; color:rgba(70,195,250,1); padding:0; margin:0; letter-spacing:1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
a:hover {text-decoration:none;}
a.big {display:inline-block; width:auto; color:#fff; margin-top:20px; padding:12px 50px; font-size:16px; font-weight:400; border-radius:40px; background:rgba(70,195,250,1); -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
a.big:hover {transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);}
b {font-weight: 400;}

/* Button */
a.button {display:inline-block; width:auto; border-radius:23px; color:#fff; margin-top:10px; padding:8px 30px; font-size:16px; font-weight:400; background:rgba(70,195,250,1); -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}


/* Header */
header {position:absolute; top:20px; left:0; width:100%; height:80px; padding:0 40px; z-index:9998; background:rgba(255,255,255,.0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
header h1 {margin:0; padding:0;}
header h1 a {float:left; width:180px; margin-top:8px; height:100px; background:rgba(255,255,255,.0);}
header h1 a img {width:100%; margin-left:0px; visibility:hidden;}
header h1 a img.animated{visibility:visible;}
header.scrollforce {position:fixed; background:rgba(255,255,255,1); top:0; height:60px;}
header.scrollforce h1 a {float:left; width:110px; margin-top:12px; height:100px; background:rgba(255,255,255,.0);}
header.scroll {position:fixed; background:rgba(255,255,255,1); top:0; height:60px;}
header.scroll h1 a {float:left; width:110px; margin-top:12px; height:100px; background:rgba(255,255,255,.0);}
header #menu-wrapper{float:right; margin-top:10px; visibility:hidden;}
header #menu-wrapper.animated{visibility:visible;}
header #menu {float:left; position:relative; width:60px; height:60px; background:rgba(70,195,250,0.9);-webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
#nav-toggle{position:absolute;top:50%;left:50%;width:30px;height:30px;margin-left:-15px;cursor:pointer;padding:0;z-index:99999}
#nav-toggle span,#nav-toggle span:after,#nav-toggle span:before{cursor:pointer;border-radius:1px;height:2px;width:30px;background:rgba(255,255,255,1);position:absolute;display:block;content:'';-webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-ms-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}
header #menu:hover #nav-toggle>span:before{top:0;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
header #menu:hover #nav-toggle>span:after{-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);bottom:0;}
#nav-toggle span:before{top:-10px}
#nav-toggle span:after{bottom:-10px;}
#nav-toggle.active span{-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg); background:#FFF;}
#nav-toggle.active span:after,#nav-toggle.active span:before{top:0;background:#FFF;}
header.scroll #menu-wrapper{float:right; margin-top:0px;}
header.scroll #menu {float:left; position:relative; width:60px; height:60px; background:rgba(70,195,250,0);-webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
header.scroll #nav-toggle span, header.scroll #nav-toggle span:after, header.scroll #nav-toggle span:before{cursor:pointer;border-radius:1px;height:2px;width:30px;background:rgba(70,195,250,1);position:absolute;display:block;content:'';-webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-ms-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}
header.scrollforce #menu-wrapper{float:right; margin-top:0px;}
header.scrollforce #menu {float:left; position:relative; width:60px; height:60px; background:rgba(70,195,250,0);-webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
header.scrollforce #nav-toggle span, header.scroll #nav-toggle span:after, header.scroll #nav-toggle span:before{cursor:pointer;border-radius:1px;height:2px;width:30px;background:rgba(70,195,250,1);position:absolute;display:block;content:'';-webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-ms-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}

/* Navigation */
nav {position:fixed; top:50px; left:0; width:100%; height:100vh; background:rgba(255,255,255,0.9); z-index:9993; visibility:hidden;  opacity:0; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
nav.active {visibility:visible; opacity:1; transform: translate3d(0,-50px,0); -moz-transform: translate3d(0,-50px,0); -webkit-transform: translate3d(0,-50px,0);}
nav .nav_wrapper {width:100%; height:100vh;}
nav ul {list-style:none; margin:20vh 0 0 0; width:100%; padding:0;}
nav ul li {list-style:none; width:100%;}
nav ul li a {display:block; padding:15px 0; width:100%; text-align:center; color:rgba(25,25,25,1); font-weight:400; font-size:30px; letter-spacing:2px; text-decoration:none;}
nav ul li a.active {display:block;}
nav ul li a:hover {color:rgba(70,195,250,1);}
nav ul li a.current {color:rgba(70,195,250,1);}
nav p {margin:30px 0 0 0; text-align:center; line-height:24px; font-size:15px; color:rgba(25,25,25,1); padding:20px 0 0 0; }
nav p a {font-size:14px;}
nav .social {display:inline-block; width:30px; height:30px; margin:0 5px; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
nav .social img {width:100%;}


/* ContentBoxes */
.content {position:relative;z-index:9991; padding:60px 0; width:100%; height:auto; overflow:hidden; background:rgba(255,255,255,1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.content.grey {background:rgba(240,245,250,1);}
.content.blue {background:rgba(70,195,250,1);}
.content .contentleft {float:left; width:50%; padding:0 50px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.content .contentright {float:left; width:50%; text-align:center; padding:0 0 0 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.content .imgfull {width:100%; padding:50px 0;}
.content .imghalf {width:70%; padding:50px 0;}
.content.slider {padding:0; height:70vh;text-align:left;}
.content.slider.detail {height:90vh;}
.content.slider h2 {margin-top:38vh; width:40%; color:rgba(25,25,25,1);}
.content.slider p {position:relative; z-index:9991; margin-top:20px; width:40%; color:rgba(25,25,25,1);}

.content.first {height:60px; padding-top:60px;}
.content.first h2 {margin-top:50px; width:100%; text-align:center; margin-bottom:0; padding:0; font-size:40px;}
.content.first p {margin-top:0px; width:100%; text-align:center; color:rgba(255,255,255,1); position:relative; z-index:100;}
.content.first .background {position:absolute; display:none; left:0; top:0; width:100%; height:100%; background:rgba(70,80,90,1); background-size:cover;}

.content.video {padding:0; background:#fff; min-height:600px; max-height:60vh; overflow:hidden!important; z-index:-100!important;}
.content.video h2 {color:#FFF; font-weight:700; font-size:50px; margin:0; padding:0;}
.content.video .smallline {position:relative; width:100px; height:2px; background:rgba(10,20,30,1); margin:30px auto;}
.content.video p {color:#FFF; font-weight:300; font-size:18px;}

.content.linkto {padding:150px 0; background:rgba(70,195,250,1);}
.content.linkto h5, .content.linkto .h5 {font-size:35px; color:#FFF; margin-top:0; padding-top:0;}
.content.linkto a {font-size:25px; color:#FFF;}

.contactform {position:relative; z-index:100; display: block; height:auto; width:90%; max-width:1200px; margin:0 auto; padding:70px 0; overflow:hidden!important;}
.contactform .contactform__inner {float:left; border:none; background:rgba(10,20,30,0.8); padding:30px 25px 20px 25px; width:100%; max-width:550px;}
.contactform .contactform__inner fieldset {border:none;}
.contactform .contactform__inner input, .contactform .contactform__inner textarea {width:100%; font-size:18px; padding:10px 20px; margin:10px 0 0 0; background:rgba(255,255,255,1); border:none; outline:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.contactform .contactform__inner input[type="submit"] {width:200px; background:rgba(70,195,250,1); color:rgba(255,255,255,1); }
.contactform h3 {color:rgba(255,255,255,1); margin:0 0 0 15px; padding:0;}
.contactform p {color:rgba(255,255,255,1); margin:0 0 0 15px; padding:0; font-weight:400;}
#message {float:left; width:100%; margin:0; padding: 0; }
.error_message {float:left; font-weight:400; font-size:18px; display: block; padding:10px 10px; line-height: 22px; background:transparent; color:rgba(10,20,30,1);  }

.content.serviceimg {padding:300px 0; background:url(../images/2.jpg)no-repeat center center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
.content.serviceimg h2 {color:#FFF; margin:0; padding:0;}
.content.serviceimg p {color:#FFF; margin:0; padding:0;}


.content.serviceNav {padding:0; background:rgba(10,20,30,1);}
.content.serviceNav a {float:left; margin:0; padding:0; width:20%; height:60px; line-height:60px; text-align:center; color:#FFF;}

/* Team */
.team {position:relative; width:300px; text-align:center; display:inline-block; padding:30px 40px 0 40px;}
.team .img-wrapper {background-color:#000; width:230px; height:230px; border-radius:50%; margin:0 auto;}
.team img {width:230px; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
.team h5 {position:absolute; opacity:0; left:0; top:95px; width:100%; text-align:center; font-size:22px; font-weight:400; height:auto; color:#FFF;}
.team h5 i {font-size:14px; opacity:0.6;}
.team:hover img {opacity:0.6;}
.team:hover h5 {opacity:1;}

/* Footer */
footer {position:relative;z-index:300;padding:20px 0 0 0; width:100%; height:auto; text-align:center; background:rgba(255,255,255,1); border-top:1px solid rgba(240,240,240,1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
footer p {color:rgba(10,20,30,0.7); margin:0; padding:0; font-size:14px; line-height:24px;}
footer .copy {width:100%; height:auto; border-top:1px solid rgba(10,20,30,0.1); padding:20px 0 20px 0; margin-top:30px; background:rgba(10,20,30,0);}
footer .social {width:40px; display:inline-block; margin:30px 15px 30px 15px; -webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-ms-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}
footer .social img {width:100%;}
footer .copy p {float:left; width:auto; color:rgba(10,20,30,0.7); margin:0; padding:0; font-size:12px; font-weight:400;}
footer .copy a {float:right; font-size:12px; margin-left:20px; font-weight:400;}
footer .copy img {text-align:center; width:20px; position:absolute; top:-5px; left:50%; margin-left:-10px;}
footer .social:hover {transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2);}


/* Loader */
.loader {position:fixed; left:0; top:0; opacity:1; width:100%; height:100vh; overflow:hidden; z-index:9999; background:rgba(255,255,255,1); -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
.loader-wrap {position:absolute; left:50%; top:50%; width:60px; height:80px; margin:-70px 0 0 -20px;}
.loader-wrap img {width:60px;}
.loader.fadeOut {display:none;}

/* Service */
.service {display:inline-block; position:relative; z-index:100; width:33%; margin:0; text-align:center; padding:50px 40px 0  40px; background:rgba(255,255,255,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.service img {width:70px; padding:30px 0; visibility:hidden;}
.service img.animated {visibility:visible;}
.service h4 {margin:0; padding:0; font-weight:400; color:rgba(10,20,30,1); diplay:block;}
.service ul {list-style:none; margin:20px 0 0 0; padding:0;}
.service ul li {font-size:16px; position:relative; line-height:30px; font-weight:300; color:rgba(25,25,25,0.6); margin-top:10px; padding:0; letter-spacing:1px;}
.service ul li img {width:20px; position:absolute; margin-left:-30px; top:-25px;}
.service .particle-slider {float:none; position:relative; height:450px; width:100%; transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.9);}

/* BlogList */
.bloglist {list-style:none; margin:0; padding:0;}
.bloglist li {width:100%; padding:20px 0; border-bottom:1px solid rgba(10,20,30,0.1); cursor:pointer; background:url(../images/arrow-right.svg)no-repeat right; background-size:30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-ms-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}
.bloglist li img {float:left; height:50px; width:auto; padding:8px 40px 0 20px;}
.bloglist li:hover {padding-left:30px;}
.bloglist li:hover img {float:left; height:50px; width:auto; padding:8px 40px 0 20px; -webkit-animation:spin 0.3s linear;
    -moz-animation:spin 0.3s linear;
    animation:spin 0.3s linear;}
.bloglist li h3 {float:left;font-size:24px; margin:0; padding:0; width:60%;}
.bloglist li:hover h3 {color:rgba(70,195,250,1);}
.bloglist li.active h3 {color:rgba(70,195,250,1);}
.bloglist li p {float:left; margin:0; padding:0;width:60%;}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.blogpost {background:rgba(255,255,255,1); border:solid 12px rgba(240,245,250,1); margin-top:0px; position:relative; z-index:9991; text-align:left; float:left; width:33.33%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.blogpost img {vertical-align:top; width:100%;}
.blogpost h3 {color:rgba(70,195,250,1); font-size:25px; width:100%; padding:0px 30px 0 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.blogpost h3 i {font-size:15px; color:rgba(25,25,25,0.6);}
.blogpost p {color:rgba(25,25,25,0.6); width:100%; margin:0; padding:0 30px; padding-bottom:50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

.service-text {position:fixed; width:50%; z-index:9996; min-height:100vh; right:0; top:0; visibility:hidden; background:rgba(255,255,255,0.9); padding-top:150px;}
.service-text.animated {visibility:visible;}
.service-text .contentleft {float:left; width:75%;}
.service-back {font-weight:700;}

/* Map */
.map-wrapper {position:relative; width:100%; height:700px; overflow:hidden;}
#map-canvas {position:absolute; left:0; top:0; width:100%; height:100%; opacity:1; z-index:10; -webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-ms-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}
.gmnoprint {display:none;}
.gm-style-cc {display:none;}
.map-info {position:relative; top:90px; z-index:9995; width:100%; text-align:center; height:auto; min-width:250px; background:rgba(70,195,250,0); padding:35px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.map-info h3 {width:100%; font-size:35px; color:rgba(255,255,255,1); margin:0; padding:0 0 20px 0;}
.map-info p {color:rgba(255,255,255,1); font-weight:400; margin:0; padding:0;}
.map-info a {color:rgba(10,20,30,1); font-weight:400;}

/* ReferenzenSlider */
.carousel_wrapper {position:relative; width:100%; height:auto;}
.carouselinfo {position:absolute; z-index:1000;right:140px; bottom:10px; padding:50px 50px; height:auto; width:400px; background:rgba(255,255,255,0.95); text-align:center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.carouselinfo h3 {margin:0; padding:0; color:rgba(25,25,25,1);}
.carouselinfo h3 b {color:rgba(70,195,250,1); font-size:16px;}
.carouselinfo p {margin-top:20px;}
.carouselinfo .close_info {float:right; width:15px; margin:-20px -20px 0 0; cursor:pointer;}
.carouselinfo .close_info img {width:100%;}

.carouselitem {height:auto; width:100vw; background:transparent;}
.carouselitem img {height:auto; width:100vw;}
.carouselitem.device {position:relative; width:auto; background:rgba(255,255,255,0); }
.carouselitem.ref {width:400px; background:#fff4e8;}
.carouselitem.ref h3 img {height:60px; width:auto; margin:0 auto;}
.carouselitem.ref h3 {text-align:center; width:100%; margin:0; padding:0; padding-top:39vh; color:#000; border:none;}
.carouselitem.ref h3 b {font-weight:300; font-size:15px; opacity:0.5;}
.carouselitem.ref.dark h3 {color:#FFF;}

.carouselitem .mockup {position:relative; height:auto; width:100vw;}
.carouselitem .mockup2 {position:absolute; left:0; top:0; z-index:500; height:auto; width:100vw;}

.carouselitem .ui {position:absolute; left:0; top:0; height:auto; width:100vw; z-index:400;}
.carouselitem .ui2 {position:absolute; left:0; top:0; height:auto; width:100vw; z-index:600;}

.carouselitem.scale {transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -o-transform: scale(0.9); -ms-transform: scale(0.9);}

.item-2 {position:absolute; top:0; left:0; width:100%; z-index:100;}
.item-ui {position:absolute; top:0; left:0; width:100%;}
.item-ui-2 {position:absolute; top:0; left:0; width:100%; z-index:200;}

.item.small {height:auto; width:100%; margin:0;}
.item.small .mockup {position:relative; height:auto; width:100%;}
.item.small .mockup2 {position:absolute;  left:0; top:0; height:auto; width:100%;}
.item.small .ui {position:absolute; left:0; top:0; height:auto; width:100%; z-index:400;}
.item.small .ui2 {position:absolute; left:0; top:0; height:auto; width:100%; z-index:600;}


.ref_tumb {position:relative; float:left; background-color:#FFF; width:100%; height:auto; margin:0px; text-align:left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.ref_tumb:hover .caption {opacity:0;}
.caption {position:absolute; left:0; top:0; width:100%; text-align:left; height:100%; opacity:0; background:rgba(255,255,255,.9) url(../images/search.svg)no-repeat center center; background-size:30px; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
.caption h2 {position:absolute; bottom:30px; left:30px; font-size:24px; margin:0; padding:0; line-height:30px;}
.caption h2 b {font-size:16px; font-weight:400; margin:0; padding:0;}
.content.work {padding:0;}

.eden_bg {background:rgba(10,20,30,1) url(../projects/eden-bg.jpg)no-repeat center center; background-attachment:fixed;  -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
.loco-bg {background:rgba(10,20,30,1) url(../projects/loco-bg.jpg)no-repeat center center; background-attachment:fixed;  -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
.hoffmans-bg {background:rgba(10,20,30,1) url(../projects/hoffmans-bg.jpg)no-repeat center center;   -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-attachment:fixed;}
.clouddoku-bg {background:rgba(10,20,30,1) url(../projects/clouddoku-bg.jpg)no-repeat center center; background-attachment:fixed;  -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
.gruene-bg {background:rgba(10,20,30,1) url(../projects/gruene-bg.jpg)no-repeat center center; background-attachment:fixed;  -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
.pp_bg {background:rgba(10,20,30,1) url(../projects/pp_bg.svg)no-repeat center center; background-attachment:fixed;  -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}


@-webkit-keyframes circleBounce {
  0% {-webkit-transform: scale(0.9); opacity: 0;}
  20% {opacity: 0.5;}
  50% {opacity: 1;}
  80% {opacity: 0.5;}
  100% {-webkit-transform: scale(1.1); opacity:0;}
}

@-moz-keyframes circleBounce {
  0% {-moz-transform: scale(0.9); opacity: 0;}
  20% {opacity: 0.5;}
  50% {opacity: 1;}
  80% {opacity: 0.5;}
  100% {-moz-transform: scale(1.1); opacity:0;}
}

@keyframes circleBounce {
  0% {transform: scale(0.9); opacity: 0;}
  20% {opacity: 0.5;}
  50% {opacity: 1;}
  80% {opacity: 0.5;}
  100% {transform: scale(1.1); opacity:0;}
}

.scrolldown {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 6px;
  height: 6px;
  border: 3px solid #fff;
  border-top: none;
  border-left: none;
  cursor:pointer;
  z-index:100;
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 50% 50%;
   -moz-transform: rotate(45deg);
  -moz-transform-origin: 50% 50%;
  -transform: rotate(45deg);
  transform-origin: 50% 50%;
}

.scrolldown:after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 23px); /*circle = 1+50+1 = 52px*/
  left: calc(50% - 23px); /*arrow = 3+3 = 6px*/
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,1);
  border-radius: 50%;
  -moz-animation: circleBounce 1.2s linear infinite;
  animation: circleBounce 1.2s linear infinite;
  -webkit-animation: circleBounce 1.2s linear infinite;
}

.scrolldown:hover:after {
  background-color: rgba(255,255,255,.15);
}



.left-content {
  float:left;
  display:block;
  width:50%;
  padding:50px 60px 50px 60px;
  text-align:left;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.right-content {
  float:left;
  display:block;
  width:50%;
  padding:50px 0 50px 60px;
  text-align:left;
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.right-content img, .left-content img {height:200px; margin:-50px 0 0 0; padding:0;}

.left-content {
  text-align:right;
}
.left-content p {
  margin:50px 0 0 0;
  font-size:24px;
  font-weight:300;
  height:400px;
  width:100%;
  color:rgba(10,20,30,1);
}

.left-item {
  margin:150px 0 0 0;
  font-size:24px;
  font-weight:400;
  height:300px;
  width:100%;
  color:rgba(10,20,30,1);
}

.right-content p {
  margin:25px 0 0 0;
  font-size:17px;
  font-weight:300;
  height:auto;
  width:100%;
  color:rgba(10,20,30,0.6);
}

.right-content p i {
  margin:50px 0 0 0;
  font-size:18px;
  font-weight:300;
  height:auto;
  width:100%;
  color:rgba(10,20,30,0.6);
}

.right-item {
  margin:150px 0 0 0;
  font-size:24px;
  font-weight:400;
  height:300px;
  width:100%;
  color:rgba(10,20,30,1);
}


.left-content img, .right-content img {
  width:20px;
  height:20px;
  display:inline-block;
  margin:0 5px -5px 0;
}

.getpadding {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7 ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.left-content .more-padding {
  margin-left:-300px;
  opacity:0;
}
.right-content .more-padding {
  margin-left:300px;
  opacity:0;
}

.left-content .particle-slider {
  float:left;
  width: 100%;
  height: 300px;
  margin:0 auto 0 auto;
}


.service .particle-slider {
  float:left;
  width: 100%;
  height: 300px;
  margin:-80px auto 0 auto;
}

/* hide control & slide sources */
.particle-slider div {
  display: none;
}


/*Project Items */
.container {position:relative; width:100%;}
.item {float:left; width:33.33%; height:auto; overflow:hidden; background:transparent; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.item .item-img-wrapper {position:relative; background:rgba(50,175,230,1);}
.item img {width:100%; vertical-align:top;}
.item h3 {position:absolute; font-size:25px; width:100%; text-align:left; left:30px; top:0px; color:rgba(255,255,255,1); font-weight:400; opacity:0;}
.item h3 b {font-size:16px; color:rgba(25,25,25,1); font-weight:400;}

.item.ref-tumb:hover img {opacity:0.2;}
.item.ref-tumb:hover h3 {opacity:1;}

/* HomeSlider */
.agency-slider .slide-zoom {width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position:center bottom;}
.slick-list {padding:0!important;}
.slick-slider.agency-slider {height:100%!important; padding-bottom:70px;}

.slick-slider.work-slider {height:auto!important; padding-bottom:70px;}
.workSlider {padding:0;}


/* New Project */

.project-tumb {float:left; position:relative; overflow:hidden; width:33.33%; text-align:center; height:auto; background:rgba(255,255,255,1); border:10px solid #fff;}
.project-tumb img {-webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
.project-tumb img.overlay {width:100%; z-index:100; vertical-align:top;}
.project-tumb h4 {color:rgba(10,20,30,1); font-size:30px; width:150%; position:absolute; left:-25%; top:33%; z-index:100; opacity:0; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear; transform: scale(1.4); -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4);}
.project-tumb h4 b {font-size:14px; font-weight:300; letter-spacing:1px; color:rgba(70,195,250,1);}
.project-tumb:hover img.overlay {opacity:0.1; transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2);}
.project-tumb:hover h4 {opacity:1; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1);}
.project-tumb .tumb-bg {position:absolute; left:0; top:0; width:101%; height:101%; -webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
.project-tumb:hover .tumb-bg {opacity:0.1;}



.content-slider {
  width: 100%;
  position: relative;
  padding: 0 40px 30px 40px;
  background: #fff;
  background: rgba(255, 255, 255, 0.5);
}
@media (min-width: 60em) {
  .content-slider {
    margin-top: 40px;
    width: 65.88078%;
    height: 400px;
  }
}
@media (min-width: laptop) {
  .content-slider {
    margin-top: 40px;
    width: 65.88078%;
    height: 400px;
  }
}

.slider {
  position: relative;
  text-align: center;
  float: left;
  width: 100%;
}

.slides {
  position: relative;
  top: 0;
  bottom: 0;
  padding: 0 0 30px;
  width: 100%;
}
.slides li {
  right: 0;
  left: 99999px;
  z-index: 10;
  opacity: 0;
  display: inline-block;
  visibility: hidden;
  position: relative;
  display: none;
}
.slides .active {
  -webkit-animation: fadeIn 2s;
          animation: fadeIn 2s;
  opacity: 1;
  left: 0;
  visibility: visible;
  display: initial;
}

.arrow {
  position: absolute;
  top: 90%;
  bottom: 0;
  padding: 25px;
  /* Arrow size */
  cursor: pointer;
  font-size: 4em;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  z-index: 20;
}
@media (min-width: 60em) {
  .arrow {
    top: 85%;
  }
}
@media (min-width: laptop) {
  .arrow {
    top: 85%;
  }
}

.prev {
  left: 10px;
}
.prev:before {
  content: "\f104";
  position: absolute;
  top: -8px;
  left: 4px;
}

.next {
  right: 10px;
}
.next:before {
  content: "\f105";
  position: absolute;
  top: -8px;
  right: 4px;
}

/* navigation */
.navigation {
  width: 100%;
  bottom:-80px;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  font-size: 0;
  height: 60px;
  z-index: 10;
  text-align: center;
}

.navigation li {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.navigation a {
  display: block;
  padding: 15px 4px;
}
.navigation span {
  display: block;
  width: 15px;
  height: 15px;
  background-color:rgba(255,255,255,1);
  border-radius: 100%;
  -webkit-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out .1s;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
      transform: scale(0.8);
}
.navigation a:hover span, .navigation a.active span {
  opacity: 1;
  background-color:rgba(10,20,30,1);
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
}

.zeiten {
	padding-left:30px;
	background:url('../images/uhr.svg')no-repeat center left;
	background-size:17px;
}

.radio {
  display: inline-block;
  width:auto;
  float:left;
  padding:0!important;
  padding-right: 20px;
  font-size: 18px;
  line-height: 39px;
  cursor: pointer;
  margin:0 20px 0 0;
  color:#FFF;
}
.radio:hover .inner {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5);
  opacity: .5;
}
.radio input {
  height: 1px;
  width: 1px;
  opacity: 0;
}
.radio input:checked + .outer .inner {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.radio input:checked + .outer {
  border: 3px solid #0b70b4;
}
.radio input:focus + .outer .inner {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  background-color: rgba(70,195,250,1);
}
.radio .outer {
  height: 20px;
  width: 20px;
  display: block;
  float: left;
  margin: 7px 9px 10px 10px;
  border: 3px solid #0c70b4;
  border-radius: 50%;
  background-color: #fff;
}
.radio .inner {
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  height: 16px;
  width: 16px;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  display: block;
  margin: 2px;
  border-radius: 50%;
  background-color: #0b70b4;
  opacity: 0;
}

.service-box {
	float:left;
	width:50%;
	height:150px;
	background:rgba(70,195,250,1);
	border:5px solid #fff;
	text-align:center;
	padding:30px 0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}


.service-box span {
	width:100%;
	display:block;
	font-size:18px;
	color:#FFF;
	line-height:30px;
	margin:10px 0 0 0;
}

.service-box span i {
	font-size:25px;
}

.wrapper-left {
	float:left;
	width:60%;
	padding:0 50px 0 0;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

.wrapper-right {
	float:right;
	width:40%;
	padding:0 0 0 50px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    left: 9999px;
  }
  to {
    opacity: 1;
    left: 0px;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    left: 9999px;
  }
  to {
    opacity: 1;
    left: 0px;
  }
}


.social {
  position: relative;
}
.social .tooltip {
  pointer-events: none;
  position: absolute;
  z-index: 9999;
  left: 50%;
  top: -40px;
  opacity: 0;
  -moz-transition: ease-out opacity 300ms 0ms;
  -o-transition: ease-out opacity 300ms 0ms;
  -webkit-transition: ease-out opacity 300ms;
  -webkit-transition-delay: 0ms;
  transition: ease-out opacity 300ms 0ms;
}
.social .tooltip span {
  display: block;
  white-space: nowrap;
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 0px 8px;
  left: -50%;
  font-size: 14px;
  font-weight:400;
  color: #fff;
}
.social .tooltip span:after {
  top: 99%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-top-color: rgba(0, 0, 0, 0.6);
  border-width: 6px;
  left: 50%;
  margin-left: -6px;
}

.social .tooltip span.facebook {
	background:#567cba;
}

.social .tooltip span.facebook:after {
	border-top-color:#567cba;
}

.social .tooltip span.twitter {
	background:#7ccced;
}

.social .tooltip span.twitter:after {
	border-top-color:#7ccced;
}

.social .tooltip span.google {
	background:#4b4b4b;
}

.social .tooltip span.google:after {
	border-top-color:#4b4b4b;
}

.social .tooltip span.xing {
	background:#0d5a5e;
}

.social .tooltip span.xing:after {
	border-top-color:#0d5a5e;
}

.social:hover span {
  opacity: 1;
}

.kreis-top {
	position:absolute;
	top:15px;
	left:0;
	right:0;
	margin:0 auto;
	width:10px;
	height:10px;
	border-radius:5px;
	background:rgba(10,20,30,0.2);
}

.line-top {
	position:absolute;
	top:25px;
	left:0;
	right:0;
	margin:0 auto;
	width:1px;
	height:45px;
	background:rgba(10,20,30,0.2);
}

.line-bottom {
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:0 auto;
	width:1px;
	height:50px;
	background:rgba(10,20,30,0.2);
}

.servicebubble {
	position:relative;
	width:100%;
}

.servicebubble img {
	width:100%;
	vertical-align:top;
}

.servicebubble span {
	position:absolute;
	left:0;
	right:0;
	top:50%;
	margin:-70px auto 0 auto;
	width:100%;
	height:35px;
	color:#000;
	text-align:center;
	font-size:40px;
	line-height:100%;
	vertical-align:center;
	line-height:28px;
	-webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;
}

.servicebubble span i {
	font-size:14px;
	line-height:1px;
	color:rgba(10,20,30,0.5);
}

.servicebubble a {
	position:absolute;
	left:25%;
	top:5%;
	width:200px;
	height:200px;
	border-radius:50%;
	background:#5ac9fb;
	color:#FFF;
	line-height:200px;
	text-align:center;
	font-size:25px;
	-webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;
}

.servicebubble a:hover {
	transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);
}

.servicebubble a.show {
	opacity:1;
}

.servicebubble a.black {
	position:absolute;
	left:60%;
	top:15%;
	width:160px;
	height:160px;
	border-radius:50%;
	background:#000;
	color:#FFF;
	line-height:160px;
	text-align:center;
	font-size:20px;
}

.servicebubble a.black.black2 {
	left:10%;
	top:30%;
}

.servicebubble a.blue2 {
	left:15%;
	top:60%;
}

.servicebubble a.black.black3 {
	left:55%;
	top:70%;
}

.servicebubble a.blue3 {
	left:70%;
	top:40%;
}

.video-viewport {
    position:absolute;
    top: 0;
    overflow: hidden;
    z-index: -1; /* for accessing the video by click */
    /*background:transparent url('../images/poster.jpg') no-repeat 0 0;*/
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}



.vh {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.animation-container {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width:100%;
  margin:20% 0 0 0; 
}
.animation-container > .words {
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  opacity: 0;
  color:#FFF;
  font-size:50px;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.animation-container > .words:nth-of-type(1) {
  -webkit-animation-name: animation1;
          animation-name: animation1;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
.animation-container > .words:nth-of-type(2) {
  -webkit-animation-name: animation2;
          animation-name: animation2;
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
}
.animation-container > .words:nth-of-type(3) {
  -webkit-animation-name: animation3;
          animation-name: animation3;
  -webkit-animation-delay: 2.15s;
          animation-delay: 2.15s;
}
.showmobile {display:none;}
.width40 {width:40%; float:right;}
.clientLogo {float:left; width:25%; padding:20px 30px;-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background:#FFF; border:5px solid rgba(70,195,250,1);}

/*@media (min-width:1824px){
  .content.video video {margin-top:-200px;}
}*/


@media (max-width:1024px){
  .item {width:50%;}
  .project-tumb {float:left; position:relative; overflow:hidden; width:50%; text-align:center; height:auto; background:rgba(255,255,255,1); border:10px solid #fff;}
.blogpost {background:rgba(255,255,255,1); border:solid 12px rgba(240,245,250,1); margin-top:0px; position:relative; z-index:9991; text-align:left; float:left; width:50%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.clientLogo {width:33.33%;}
}

@media (max-width:768px){
  .item {width:100%;}
  .service {display:inline-block; position:relative; z-index:100; width:100%; margin:0; text-align:center; padding:50px 40px 0  40px; background:rgba(255,255,255,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
  footer .copy img {display:none;}
  .hidemobile {display:none;}
  .showmobile {display:block;}
.animation-container {
  display: inline-block;
  vertical-align: top;
  position: relative;
  width:100%;
  margin:28% 0 0 0; 
}
.servicebubble {
  position:relative;
  width:120%;
  height:800px;
  margin:0 0 0 -15%;
}
.servicebubble span {
  display:none;
  }
.animation-container > .words {font-size:35px;}
.project-tumb {float:left; position:relative; overflow:hidden; width:100%; text-align:center; height:auto; background:rgba(255,255,255,1); border:10px solid #fff;}
.blogpost {background:rgba(255,255,255,1); border:solid 12px rgba(240,245,250,1); margin-top:0px; position:relative; z-index:9991; text-align:left; float:left; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.contactform .contactform__inner {float:left; border:none; background:rgba(10,20,30,0.8); padding:30px 25px 20px 25px; width:90%; max-width:550px;}
nav ul li a {display:block; padding:10px 0; width:100%; text-align:center; color:rgba(25,25,25,1); font-weight:400; font-size:24px; letter-spacing:2px; text-decoration:none;}
.left-content {width:100%; padding:30px 5%;}
.right-content {width:100%; padding:30px 5%; text-align:center;}
.content.serviceNav a {float:left; margin:0; padding:0; width:50%; height:60px; line-height:60px; text-align:center; color:#FFF;}
.content.first {height:30px; padding-top:30px;}


/* Header */
header {position:absolute; top:20px; left:0; width:100%; height:80px; padding:0 0px; z-index:9998; background:rgba(255,255,255,.0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
header h1 a {float:left; width:120px; margin-top:8px; height:100px; background:rgba(255,255,255,.0);}
header #menu-wrapper{float:right; margin-top:10px; visibility:hidden;}
header #menu-wrapper.animated{visibility:visible;}
header #menu {float:left; position:relative; width:40px; height:40px; background:rgba(70,195,250,0.9);-webkit-transition:all 300ms linear; -moz-transition:all 300ms linear; -o-transition:all 300ms linear; -ms-transition:all 300ms linear; transition:all 300ms linear;}
#nav-toggle{position:absolute;top:50%;left:50%;width:30px;height:30px;margin-left:-15px;cursor:pointer;padding:0;z-index:99999}
#nav-toggle span,#nav-toggle span:after,#nav-toggle span:before{cursor:pointer;border-radius:1px;height:2px;width:30px;background:rgba(255,255,255,1);position:absolute;display:block;content:'';-webkit-transition:all 250ms ease-in-out;-moz-transition:all 250ms ease-in-out;-ms-transition:all 250ms ease-in-out;-o-transition:all 250ms ease-in-out;transition:all 250ms ease-in-out}
header #menu:hover #nav-toggle>span:before{top:0;-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}
header #menu:hover #nav-toggle>span:after{-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);bottom:0;}
#nav-toggle span:before{top:-10px}
#nav-toggle span:after{bottom:-10px;}
#nav-toggle.active span{-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg); background:#FFF;}
#nav-toggle.active span:after,#nav-toggle.active span:before{top:0;background:#FFF;}

.content.video {padding:0; background:#fff; min-height:400px; max-height:60vh; overflow:hidden!important; z-index:-100!important;}


.wrapper.paddingTop {padding:0 0 20px 0;}
.width40 {width:100%; float:left;}

.clientLogo {width:50%;}

.padding {padding:0 5%;}


}



/* Querys */




@-webkit-keyframes animation1 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  15% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  35% {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  40% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes animation1 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  15% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  35% {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  40% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes animation2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  35% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  55% {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  70% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes animation2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  20% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  30% {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  35% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  55% {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  70% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@-webkit-keyframes animation3 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  30% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  45% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  65% {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  80% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@keyframes animation3 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  30% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  40% {
    opacity: 1;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  45% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  65% {
    opacity: 1;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
  80% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}