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

/* #Font-Face
================================================== */


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




/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { font-family: 'Avenir Next', sans-serif; -webkit-font-smoothing : antialiased; -moz-osx-font-smoothing:grayscale;font-size: 18px; color: #5c5c5c; }
body { background: #fff; }
input, select, textarea { font-family: 'Avenir Next', sans-serif; font-size: 18px; color: #888888; }
img { border: 0; display: block; }
ul, li { list-style: none; }
:focus { outline: none; }
.noScroll { height: 100%; overflow-y: hidden; }
@keyframes floating {
	from { transform: translate(0,  0px); }
	65%  { transform: translate(0, 15px); }
	to   { transform: translate(0, -0px); }
}
.fade-out { opacity: 0; transition: opacity 0.5s ease-out;  }
.fade-in { opacity: 1;transition: opacity 0.5s ease-in;}

::-moz-selection { color: white;background: #341e68;}
::selection {color: white;background: #341e68;}

@-moz-keyframes spin {from { -moz-transform: rotate(-180deg); }to { -moz-transform: rotate(0deg); }}
@-webkit-keyframes spin {from { -webkit-transform: rotate(180deg); }to { -webkit-transform: rotate(0deg); }}
@keyframes spin {from {transform:rotate(180deg);}to {transform:rotate(0deg);}}

.videoMute { opacity:0.6;background:url('../images/icon-mute.svg') no-repeat; background-size:contain; width:35px;height:35px; position: relative; bottom: 50px; right: 15px; float:right; z-index:9999; cursor: pointer; color: #fff; border-radius: 50%; padding: 8px;}
.videoMute:hover { opacity:1;}
.videoMute.videoUnmute { background-image:url('../images/icon-unmute.svg');}


.spin { -webkit-animation: spin 1s 1 cubic-bezier(0.215, 0.610, 0.355, 1.000); animation: spin 1s 1 cubic-bezier(0.215, 0.610, 0.355, 1.000); }
.grecaptcha-badge{ visibility: collapse !important;  }

/* ### 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); }
.centered.zoom {   padding-right: calc((100% - 1500px) / 2);padding-left: calc((100% - 1500px) / 2);}
h1,h2,h3,h4,h5,h6,strong { font-weight: normal; }
.button { padding: 6px 20px; border: 1px solid #fc8d0d; border-radius: 20px; color: #fc8d0d; text-decoration: none; transition: 0.5s; display: inline-block; }
.button:hover { background: #fc8d0d; color: #fff; }
.button.orange { background: #fc8d0d; color: #fff; }
.button.orange:hover { background: none; color: #fc8d0d; }
.more { text-align: center; }
.more .button { background: #fc8d0d; color: #fff; padding: 12px 40px; border-radius: 25px; }
.more .button:hover { background: none; color: #fc8d0d; }
.link { color: #f88916; text-decoration: none; border-bottom: 1px dotted transparent; }
.link:hover { border-color: #f88916; }
.readMore { color: #f88916; text-decoration: none; border-bottom: 1px dotted transparent; display: inline-block; padding-right: 22px; background: url(../images/icon-arrow-orange.svg) no-repeat right; font-size:18px;margin-top:10px;}
.readMore:hover { border-color: #f88916; }

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

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

/* ### header container ### */
#headerCntr { position: relative; width: 100%; padding-top: 70px; padding-bottom: 120px; z-index:9;}
#headerCntr .logo { float: left; position: relative; z-index: 101; width: 91px; height: 46px; background: url(../images/logo-purple.svg) no-repeat; text-indent: -9999px; background-size: 100%; }
#headerCntr.is-active .logo { background: url(../images/logo-white.svg) no-repeat; background-size: 100%; }
#headerCntr .mobileMenu { display: none; cursor: pointer; float: left; width: 55px; height: 55px; transition: 0.5s; overflow: hidden; margin-top: -10px;  position: relative; z-index: 101; }
#headerCntr .mobileMenu span { display: block; height: 2px; text-indent: -9999px; border-radius: 5px; position: absolute; top: 50%; right: 25%; left: 25%; transition: 0.5s; }
#headerCntr .mobileMenu span:before,
#headerCntr .mobileMenu span:after { display: block; width: 100%; height: 2px; content: ''; border-radius: 5px; background-color: #000; transition-duration: 0.5s,0.5s; position: absolute; left: 0; }
#headerCntr .mobileMenu span:before { top: -4px; }
#headerCntr .mobileMenu span:after { bottom: -4px; }
#headerCntr.is-active .mobileMenu span:before, #headerCntr.is-active .mobileMenu span:after { background-color: #fff; }

#headerCntr.is-active .mobileMenu span { background: none; }
#headerCntr.is-active .mobileMenu.is-active span:before,
#headerCntr.is-active .mobileMenu.is-active span:after { transition-delay: 0s, 0.5s; }
#headerCntr.is-active .mobileMenu span:before { top: 0; transform: rotate(45deg); }
#headerCntr.is-active .mobileMenu span:after { bottom: 0; transform: rotate(-45deg); }
#headerCntr h1 { color: #341e68; font-size: 20px; float: left; margin: 20px 0 0 35px; }

	/* ### menu box ### */
	.menuBox { float: right; margin-top: 20px; }
	.menuBox ul { overflow: hidden; width: auto; }
	.menuBox ul li { margin-left: 45px; float: left; font-size: 20px; }
	.menuBox ul li a { color: #f97a0f; text-decoration: none; display: block; padding-bottom: 2px; position: relative; }
	.menuBox ul li a:after { content: ''; transition: 0.5s; width: 0; border-bottom: 1px solid #f97a0f; position: absolute; bottom: 0; left: 0; }
	.no-touch .menuBox ul li a:hover:after, .menuBox ul li.is-active a:after { width: 100%; }
	.menuBox ul li.language { font-size: 16px; margin-top: 5px; }
	.menuBox ul li.language a { color: #888888; }
	.menuBox ul li.language a:after { display: none; }
	.menuBox ul li.language a:hover { color: #33286c; }
	.menuBox .mobileInformation { display: none; }	
	.menuBox.home ul li.language a { color: white; }
	.menuBox.home ul li.language a:hover { color:white; text-decoration:underline;}	

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

	/* ### introduction box ### */
	.introductionBox { padding-top: 120px; padding-bottom: 150px; overflow: hidden; position: relative; }
	.introductionBox.about { padding-top: 80px;}
	.introductionBox.text { padding-top: 80px; padding-bottom: 150px; }
	.introductionBox.details { padding-top: 100px; padding-bottom: 120px; }
	.introductionBox .content { float: left; padding-left: 0px; width: 50%; padding-right: 30px; }
	.introductionBox .back {margin-bottom: 20px;margin-top: -44px;display: block;width:fit-content;background : url(../images/icon-arrow-orange-back.svg) no-repeat left; padding:0 0 0 22px;}
	.introductionBox figure { float: left; width: 50%; margin-top: 0px; padding-left: 30px; }
	.introductionBox figure.home { margin-top:-80px;}
	.introductionBox figure img { width: 100%; animation-delay: 1500ms; }
	.introductionBox .curves { position: absolute; top: 0; right: 0; width: auto; text-align: right; }
	.introductionBox h1, .introductionBox h2 { font-size: 30px; line-height: 43px; margin-bottom: 30px; animation-delay: 500ms; color: #5c5c5c; }
	.introductionBox h2 { color: #341e68;font-family: 'Avenir Next Demi', sans-serif;}
	.introductionBox h1 span { color: #341e68; font-family: 'Avenir Next Demi', sans-serif; }
	.introductionBox p { line-height: 31px; animation-delay: 1000ms; font-size: 20px; }
	.introductionBox p a { text-decoration: none; color: #5c5c5c; border-bottom: 1px dotted #5c5c5c; }
	.introductionBox p a:hover { border-color: #f37a21; color: #f37a21; }
	.introductionBox .details { float: left; width: 30%; margin-top: 15px; animation-delay: 1000ms; }
	.introductionBox ul { list-style: none; }
	.introductionBox li { overflow: hidden; margin-bottom: 10px; color: #000000; font-size: 20px; }
	.introductionBox li span { float: left; color: #888888; font-size: 14px; width: 100px; }
	.introductionBox li strong { float: left; width: calc(100% - 100px); }
	.introductionBox .download { margin-left: 100px; display: inline-block; padding-right: 25px; background: url(../images/icon-arrow-orange-diagonal.svg) no-repeat right; color: #fc8d0d; font-size: 18px; text-decoration: none; margin-top: 20px; }
	.introductionBox .download:hover { text-decoration: underline; }
	.introductionBox .hightlighted { font-size: 30px; line-height: 43px; margin-bottom: 0; animation-delay: 500ms; color: #5c5c5c; }
	.introductionBox .hightlighted.about { padding: 40px 0; }
	.introductionBox .hightlighted span { color: #341e68; font-family: 'Avenir Next Demi', sans-serif; }
	.introductionBox .button { margin-top: 40px; padding: 13px 25px; border-radius: 25px; }
	.introductionBox address { font-style: normal; line-height: 27px; color: #888888; float: left; margin-top: 60px; padding-left: 50px; font-size: 18px; }
	.introductionBox address a.tel { color: #888888; text-decoration: none; }
	.introductionBox address img { display: inline-block; vertical-align: middle; margin: -7px 0 0 5px; }
.introductionBox.contact { padding-bottom: 100px; }
	
	/* New blob banner */
	.introductionBox.home { overflow:initial;}
	.introductionBox.home figure { width:95%;margin-right:-45%;margin-top:-490px !important;margin-bottom:-100px; margin-left:-50px; filter:grayscale(100%) brightness(34%) sepia(76%) hue-rotate(215deg) saturate(390%) contrast(1);}
	/*.introductionBox figure svg image { x:-28%;}*/


	/* ### recent box ### */
	.recentBox { margin-bottom: 100px; clear:both;}
	.recentBox h2 { text-align: center; font-size: 20px; color: #000000; margin-bottom: 40px; }
	.recentBox.overview h2 { font-size: 26px; text-align: left; color: #5c5c5c; margin-bottom: 25px; width: 70%; }
	.recentBox .holder { margin-right: -45px; overflow: hidden; display: flex; align-items: stretch; flex-wrap: wrap; }
	.recentBox .block { width: 50%; float: left; padding: 0 45px 45px 0; }
	.recentBox .block:nth-child(even) { animation-delay: 500ms; }
	.recentBox figure { width: 100%; transition: 0.5s; overflow: hidden; border-radius:5px; }
	.recentBox figure img { width: 100%; transition: 0.5s; }
	.recentBox figure:hover img { transform: matrix(1.239,0,0,1.203,0,0); }
	.recentBox figure:hover { transform: matrix(0.909,0,0,0.914,0,0); }
	.recentBox .content { padding: 35px; }
	.recentBox h3 { font-size: 26px; margin-bottom: 20px; color: #5c5c5c; width: 70%; }
	.recentBox p { margin-bottom: 20px; width: 80%; line-height: 28px; }
	.recentBox .category { font-size: 20px; color: #000; margin-bottom: 10px; }
	.recentBox .category span { color: #888888; font-size: 14px; padding-left: 10px; }

	/* ### brand box ### */
	.brandBox { padding-top: 150px; padding-bottom: 150px; background: #e8edf3; overflow: hidden; }
	.brandBox .holder { overflow: hidden; padding-left: 40px; padding-right: 40px; }
	.brandBox h2 { font-size: 20px; color: #000000; margin-bottom: 70px; }
	.brandBox .column { float: left; width: 50%; }
	.brandBox .column:first-of-type { padding-right: 55px; }
	.brandBox .column:last-of-type { padding-left: 55px; }
	.brandBox ul { list-style: none; overflow: hidden; display: flex; align-items: stretch; flex-wrap: wrap; }
	.brandBox li { width: 33.33%; padding: 10px; padding-left: 0; }
	.brandBox li a { display: block; text-align: center; cursor:default;}
	.brandBox li a img { display: inline-block; max-width: 82%; opacity: 0.5; }
	.brandBox li a:hover img { opacity: 1; }
	.brandBox h3 { padding: 30px 0 30px 135px; margin-bottom: 20px; background: url(../images/logo-powers.svg) no-repeat left; font-size: 26px; color: #5c5c5c; line-height: 35px; }
	.brandBox .link { color: #cf021b; display: inline-block; padding-right: 30px; background: url(../images/icon-arrow-red.svg) no-repeat center right 2px; text-decoration: none; border-bottom: 1px dotted transparent; }
	.brandBox .link:hover { border-color: #cf021b; }
	.brandBox p { margin-bottom: 20px; line-height: 28px; }

	/* ### overview box ### */
	.overviewBox { background-color: #e8edf3; padding-top: 110px; padding-bottom: 40px; }
	.overviewBox.small { padding-top: 80px; }
	.overviewBox .holder { margin-right: -45px; overflow: hidden; display: flex; align-items: stretch; flex-wrap: wrap; }
	.overviewBox .block { width: 33.33%; float: left; padding: 0 45px 45px 0; }
	.overviewBox.small .block { width: 25%; }
	.overviewBox figure { width: 100%; overflow: hidden; border-radius:5px;}
	.overviewBox figure img { width: 100%; transition: 0.5s; }
	.overviewBox figure:hover img { transform: matrix(1.126,0,0,1.119,0,0); }
	.overviewBox .content { padding: 30px; }
	.overviewBox.small .content { padding: 20px 0px; }
	.overviewBox h2, .overviewBox h3 { font-size: 18px; margin-bottom: 0px; }
	.overviewBox p { margin-bottom: 20px; }
	.overviewBox .category { font-size: 20px; color: #000; margin-bottom: 13px; }
	.overviewBox .category span { color: #888888; font-size: 14px; padding-left: 10px; }
	.overviewBox h4 { color: #000; font-size: 20px; text-align: center; margin-bottom: 80px; }
	.overviewBox.small h2 { color: #000; font-size: 20px; text-align: center; margin-bottom: 80px; }

	/* ### phone box ### */
	.phoneBox { margin-bottom: 110px; position: relative; }
	.phoneBox:after { content: ''; background: #fbb320; width: 100%; z-index: 0; position: absolute; top: 0; left: 0; height: calc(100% - 90px); }
	.phoneBox .left { margin-top: 50px; float: left; position: relative; z-index: 1; }
	.phoneBox .right { margin-top: -85px; float: right; position: relative; z-index: 1; }
	.phoneBox .floating { animation-name: floating; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
	.phoneBox .floating-right { animation-delay: 1s !important; }

	/* ### text box ### */
	.textBox { margin-bottom: 150px; }
	.textBox p { max-width: 745px; margin: 0 auto; font-size: 20px; line-height: 31px; color: #5c5c5c; text-align: center; }
	.textBox p strong { font-weight:600;}
	.textBox.centered h2 { text-align:center;color:black;}
	.textBox .text { text-align: left; max-width: 800px; margin: 0 auto; }
	.textBox .text p { text-align: left; margin-bottom: 30px; max-width: 100% }
	.textBox .text p strong { font-family: 'Avenir Next Demi', sans-serif; }
	.textBox .text p a, .textBox p a { text-decoration:none;color:#f97a0f;}
	.textBox .text p a:hover,.textBox p a:hover { text-decoration:underline;}
	.textBox h2 { margin-bottom: 35px; color: #5c5c5c; }
	.textBox ul { color: #888888; padding-left: 20px; }
	.textBox li { list-style-type: square; font-size: 20px; margin-bottom: 5px; }
	.textBox .text h2 { font-size: 30px; }
	
	.textBox.quoteBox h2:before, .quoteBox h2:after { content:'"';position:relative;}
	.textBox.quoteBox img { text-align:center;margin:0 auto;border-radius:50%;max-width:150px;margin-bottom:20px;}
	.textBox.quoteBox p strong { font-size:16px; font-weight:bold;color:black;}
	

	/* ### work box ### */
	.workBox { margin-bottom: 150px; /*overflow: hidden;*/ }
	.workBox.workDetail { margin-top:0; /*margin-top: 170px;*/ }
	.workBox.workDetail.right { margin-top:0; /*margin-top: -180px;*/ }
	.workBox .block { display: flex; align-items: center; margin-bottom: -50px; flex-wrap: wrap; }
	.workBox .block:nth-of-type(even),.workBox .block.second { flex-direction: row-reverse; }
	.workBox figure { width: 48%; }
	.workBox figure img { width: 100%; border-radius:5px;}
	.workBox .text { padding: 50px; width: 52%; padding-left: 80px; }
	.workBox h2 { font-size: 26px; color: #000000; margin-bottom: 25px; }
	.workBox .block:nth-of-type(even) .text,.workBox .block.second .text { padding-right: 80px; padding-left: 50px; }
	.workBox p strong { font-family: 'Avenir Next Demi', sans-serif; }
	.workBox p a { color: #f88916; text-decoration: none; border-bottom: 1px dotted transparent; }
	.workBox p a:hover { border-color: #f88916; }


	/* ### gallery box ### */
	.galleryBox { padding-top: 100px; margin-bottom: 100px; position: relative; }
	.galleryBox:after { background: #84dbff; content: ''; width: 100%; left: 0; top: 0; height: calc(100% - 115px); position: absolute; }
	.galleryBox figure { text-align: center; position: relative; z-index: 1; }
	.galleryBox figure img { display: inline-block; max-width: 100%; }
	.galleryBox video { max-width:100%;z-index:300;position:relative;margin:0 auto;display:inherit;cursor:pointer; margin-top:100px;border-radius:10px;     box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.44);-webkit-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.44);  -moz-box-shadow: 0px 0px 30px -6px rgba(0,0,0,0.44);}
	/* ### project box ### */
	.projectBox { background: #fff; text-align: center; padding-bottom: 70px; }
	.projectBox figure { width: 100%; /*margin-bottom: 85px;*/ }
	.projectBox figure img { width: 100%; }
	.projectBox video { width:100%;}
	.projectBox.double { display: flex;flex-wrap: wrap; }
	.projectBox.double figure { width:50%; float:left;margin-bottom:70px;}
	
	@media only screen and (max-width: 767px) { .projectBox.double figure { width:100%;margin:0;} .projectBox.double figure:nth-child(2) { margin-bottom:70px;}}

	/* ### team box ### */
	.teamBox { background: #e8edf3; padding-top: 150px; padding-bottom: 150px; text-align: center; }
	.teamBox h2 { color: #000000; font-size: 26px; margin-bottom: 30px; }
	.teamBox h3 { color: #000; font-size: 20px; margin-bottom: 10px; }
	.teamBox ul { text-align: center; overflow: hidden; display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; }
	.teamBox li { width: 25%; padding: 0 20px; margin-bottom: 50px; }
	.teamBox li a { display: block;text-decoration: none; color:#fc8d0d;margin-top:5px;}
	.teamBox li a:hover { text-decoration:underline;}
	.teamBox figure { margin-bottom: 25px; }
	.teamBox figure img { display: inline-block; border-radius: 50%;border:5px solid white; }
	.teamBox p { color: #5c5c5c; font-size: 18px; }

	/* ### banner box ### */
	.bannerBox { height: 600px; background-size: cover; background-position: center; position: relative; }
	.bannerBox .text { position: absolute; top: 50%; left: 0; width: 100%; text-align: center; transform: translateY(-50%); }
	.bannerBox h2 { font-size: 30px; color: #fff; margin-bottom: 35px; }
	.bannerBox .button:hover { background: #fff; }

	/* ### map box ### */
	.mapBox { width: 100%; }
	.mapBox .map { position: relative; width: 100%; height: 540px; }
	.mapBox .gm-style { filter: grayscale(100%); filter: gray; }
	#map .gmap_marker { font-family:'Avenir Next', sans-serif;font-size:18px;-webkit-font-smoothing: antialiased;padding:20px; }
	#map .gmap_marker strong { font-weight:800;font-size:20px;}

	/* ### popup box ### */
	.popupBox { display: none; }
	.popupBox .overlay { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: #341e68; border: 10px solid #fff; }
	.popupBox .popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 580px; z-index: 1001; }
	.popupBox h3 { color: #fff; font-size: 30px; margin-bottom: 20px; }
	.popupBox p { color: #fff; margin-bottom: 30px; }
	.popupBox p a { color:white !important;font-weight:600;}
	.popupBox form { width: 100%; }
	.popupBox fieldset { border: none; }
	.popupBox .row { overflow: hidden; margin-bottom: 14px; margin-right: -15px; }
	.popupBox input[type="text"], .popupBox input[type="email"] { float: left; width: calc(50% - 15px); background: #716296; padding: 15px; margin-right: 15px; border-radius: 5px; border: none; color: #fff; }
	.popupBox textarea{ width: calc(100% - 15px); background: #716296; padding: 15px; height: 150px; border-radius: 5px; border: none; color: #fff; }
	
	.popupBox .contactField.error { border: 2px red solid;}
	
	.popupBox ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
		color: rgba(255,255,255,0.4);
	}
	.popupBox ::-moz-placeholder { /* Firefox 19+ */
		color: rgba(255,255,255,0.4);
	}
	.popupBox :-ms-input-placeholder { /* IE 10+ */
		color: rgba(255,255,255,0.4);
	}
	.popupBox :-moz-placeholder { /* Firefox 18- */
		color: rgba(255,255,255,0.4);
	}
	.popupBox button,.popupBox input[type=submit] { padding: 15px 30px; border-radius: 30px; background: #fc8d0d url(../images/icon-arrow-white.svg) no-repeat center right 30px; padding-right: 60px; background-size: 18px; font-size: 18px; color: #fff; transition: none; cursor: pointer; margin-top: 10px; font-family: 'Avenir Next', sans-serif; }
	.popupBox button:hover,.popupBox input[type=submit]:hover { background: #fff url(../images/icon-arrow-orange.svg) no-repeat center right 30px; color: #fc8d0d; border-color: #fff; }
	.popupBox .close { position: fixed; top: 40px; right: 40px; z-index: 1002; }

	/* ### cta box ### */
	.ctaBox { max-width: 910px; padding: 80px 55px 60px; margin: 0 auto 20px; background: #e8edf3; }
	.ctaBox h2 { font-size: 30px; margin-bottom: 35px; color: #5c5c5c; }
	.ctaBox p { font-size: 20px; line-height: 31px; margin-bottom: 35px; }
	.ctaBox .button { padding: 12px 40px; border-radius: 25px; }

/* ### footer container ### */
#footerCntr { overflow: hidden; width: 100%; padding-top: 100px; padding-bottom: 20px; }
#footerCntr .top { overflow: hidden; margin-bottom: 75px; }
#footerCntr .bottom { padding: 0 45px; }
#footerCntr h2 { font-size: 26px; margin-bottom: 25px; padding-left: 40px; color: #000000; }
#footerCntr p { margin-bottom: 20px; max-width: 80%; line-height: 28px; }
#footerCntr .column { padding: 0 40px; width: 50%; float: left; }
#footerCntr .column h2 { padding-left: 0; }
#footerCntr address { float: left; width: 50%; font-style: normal; line-height: 28px; }
#footerCntr address a.phone { color: #f88916; text-decoration: none; }
#footerCntr .bottom p { font-size: 14px; padding-left: 50px; background: url(../images/logo-grey.svg) no-repeat left; }
#footerCntr .bottom p a { margin-left: 15px; }
#footerCntr h3 { display: none; }

/* #Media Queries
================================================== */

@media only screen and (max-width: 1360px) {
	.centered { padding-left: 45px; padding-right: 45px; }
	.phoneBox.laptops .right img { width: 45vw; }
	.phoneBox.laptops .left img { width: 45vw; }
	
}

@media only screen and (max-width: 1299px) {
	.introductionBox .content { padding-left: 0; }
	.introductionBox .details { width: 50%; }
	.recentBox .content { padding-left: 0; padding-right: 0; }
	.brandBox .column:first-of-type { padding-left: 0; }
	.brandBox .column:last-of-type { padding-right: 0; }
	#footerCntr .column:first-of-type { padding-left: 0; }
	#footerCntr .column:last-of-type { padding-right: 0; }
	#footerCntr h2 { padding-left: 0; }
	#footerCntr .bottom { padding: 0; }
	.overviewBox .content { padding-left: 0; padding-right: 0; }
	.overviewBox .block { width: 50%; }
	.phoneBox .left img { width: 400px; }
	.phoneBox .right img { width: 400px; }
	.workBox .text { padding: 50px 0 50px 35px; }
	.workBox .block { margin-bottom: 0; }
	.overviewBox.small .block { width: 33.33%; }
	.workBox .block:nth-of-type(even) .text,.workBox .block.second .text { padding-left: 0; }
	.introductionBox .curves { width: 50%; }
	.recentBox p { width: 100%; }
	.recentBox h3 { width: 100%; }
	.brandBox .holder { padding: 0; }
	.brandBox .column:first-of-type { padding-right: 20px; }
	.brandBox .column:last-of-type { padding-left: 20px; }
	.brandBox h3 br { display: none; }
}

@media only screen and (max-width: 979px) {
	.introductionBox { padding-top: 30px; padding-bottom: 150px; }
	.introductionBox .content { width: 100%; padding-right: 0; margin-bottom: 50px; }
	.introductionBox figure { width: 100%; text-align: center; margin-top: 40px }
	.introductionBox figure img { display: inline-block; }
	.introductionBox figure.home { margin-top:0px;}
	.introductionBox .back { display:inline-block;}
	
	.introductionBox.home figure svg image { x:0}
	.introductionBox.home figure { display:block; position:relative;margin:-100px 0px 50px 0 !important;width:100%;}
	
	.recentBox h3 { font-size: 23px; line-height: 27px; }
	.brandBox { padding-top: 120px; padding-bottom: 120px; }
	.brandBox h2 { margin-bottom: 50px; }
	.brandBox li { width: 50%; padding: 0 10px; }
	.brandBox h3 { background-size: 65px; padding-left: 90px; font-size: 23px; line-height: 27px; }
	.brandBox h3 br { display: none; }
	html, body { font-size: 17px; }
	#footerCntr h2 { font-size: 24px; }
	#footerCntr address { width: 100%; margin-bottom: 20px; }
	.phoneBox .left img { width: 300px; }
	.phoneBox .right img { width: 300px; }
	.phoneBox .right { margin-top: -50px; }
	.phoneBox:after { height: calc(100% - 30px); }
	.textBox { margin-bottom: 120px; }
	.workBox h2 { font-size: 22px; line-height: 30px; }
	.workBox h2 br { display: none; }
	.workBox .text { padding-left: 45px; padding-top: 10px; padding-bottom: 0; }
	.workBox .block:nth-of-type(even) .text ,.workBox .block.second .text { padding-right: 40px; }
	.workBox .block { margin-bottom: 60px; }
	.workBox .block { align-items: flex-start; }
	.workBox { margin-bottom: 30px; }
	.workBox.workDetail { margin-bottom: 0; }
	.workBox.workDetail.right { margin-bottom: 0;margin-top:0px; }
	.workBox.workDetail .text { padding-bottom: 10px; }
	.galleryBox { padding-top: 70px; margin-bottom: 60px; }
	.projectBox figure { margin-bottom: 60px; }
	.overviewBox.small .holder { margin-right: -25px; }
	.overviewBox.small .block { padding: 0 25px 0 0; }
	.overviewBox.small .content { padding: 20px 0; }
	.introductionBox .curves { position: static; width: 100%; margin-right: -50px; float: right; }
	.teamBox li { width: 33.33%; }
	.teamBox figure img { width: 150px; }
	.bannerBox { height: 315px; }
	.introductionBox.contact .content { width: 70%; }
	.introductionBox.contact .details { width: 30%; }
	.introductionBox address { padding-left: 0; width: 100%; }
	.introductionBox address:nth-of-type(2) { margin-top: 30px; }
	.introductionBox.contact { padding-bottom: 30px; }
	.mapBox .map { height: 420px; }
	#footerCntr .column.text p { max-width: 100%; }
	#footerCntr .column.text:first-of-type, #footerCntr .column.text:last-of-type { padding-right: 0; }
	#footerCntr .column.text:last-of-type { padding-right: 0!important; }
	#footerCntr .column.address:last-of-type { width: 40%; float: right; }
	.introductionBox li strong br { display: none; }
	.introductionBox .details { width: 100%; }
	.brandBox .column:first-of-type { padding-right: 30px; }
	.brandBox .column:last-of-type { padding-left: 30px; }
	.introductionBox h1, .introductionBox h2 { width: 90%; }
	.introductionBox p { font-size: 20px; }
	.recentBox .block .button { border: none; padding: 0; padding-right: 25px; background: url(../images/icon-arrow-orange.svg) no-repeat right; }
	.recentBox p { font-size: 16px; }
	.brandBox .holder { padding-left: 0; padding-right: 0; }
	.brandBox h3 { padding-top: 0px; font-size: 22px; line-height: 31px; background-position: 0px 0px; margin-bottom: 15px; }
	#footerCntr .column:first-of-type { padding-right: 0; }
	#footerCntr p { max-width: 100%; }
	#footerCntr .column .button { border: none; padding: 0; padding-right: 25px; background: url(../images/icon-arrow-orange.svg) no-repeat right; }
	#footerCntr h2 { font-size: 22px; }
	#footerCntr p { font-size: 16px; }
	#footerCntr .top { margin-bottom: 50px; }
	#footerCntr .top { margin-bottom: 40px; }
	.recentBox.overview h2 { font-size: 20px; margin-bottom: 15px; width: 100%; }
	.workBox.workDetail { margin-top: 120px; }
	.workBox p { line-height: 27px; }
	.introductionBox .hightlighted.about { padding-top: 0; }
	.teamBox p { font-size: 15px; }
	.introductionBox.text { padding-top: 20px; padding-bottom: 40px; }
	.ctaBox .button { padding: 12px 25px; border-radius: 25px; }
	.introductionBox.details { padding-top: 20px; padding-bottom: 100px; }
	.overviewBox .category { margin-bottom: 5px; }
	.overviewBox.small .content { padding-bottom: 40px; }
}

@media only screen and (max-width: 900px) {
.phoneBox.laptops .right { margin-top:-300px;}
.phoneBox.laptops .right img { width: 90vw; }
.phoneBox.laptops .left img { width: 90vw; }
}

@media only screen and (max-width: 767px) {
	.centered { padding-left: 25px; padding-right: 25px; }
	.menuBox { display: none; margin-top: 0; }
	#headerCntr .mobileMenu { display: block; float: right; margin-right: -15px; }
	#headerCntr { padding-top: 30px; }
	.introductionBox h1 { font-size: 22px; line-height: 33px; }
	.introductionBox figure { display: none; }
	.introductionBox { padding-bottom: 0px; }
	.introductionBox .hightlighted { font-size: 22px; line-height: 33px; }
	.introductionBox .details { width: 100%; }
	.introductionBox li { font-size: 16px; }
	.introductionBox li:nth-child(1), .introductionBox li:nth-child(2) { width: 50%; float: left; }
	.introductionBox li:nth-child(3) { clear: both; width: 100%; float: left; }
	.introductionBox li span { width: 100%; }
	.introductionBox .download { margin-left: 0; }
	.introductionBox.contact .content { width: 100%; }
	.introductionBox.contact .details { width: 100%; }
	.introductionBox.contact .content { margin-bottom: 0; }
	.introductionBox address { margin-top: 30px; }
	.introductionBox h2 { font-size: 25px; margin-bottom: 20px; line-height:30px;}
	.introductionBox .hightlighted.about { padding-top: 0; }
	
	.introductionBox.home figure { display:block; position:relative;margin:-96px 0 0 -55px !important;width:170%;}
	
	.recentBox h2 { text-align: left; margin-bottom: 25px; }
	.recentBox .category { font-size: 16px; display: block!important; line-height:23px;}
	.recentBox .category span { display: none; }
	html, body { font-size: 15.5px; }
	.button { font-size: 16px; }
	.recentBox .holder { margin-right: -25px; }
	.recentBox .block { padding: 0 25px 0 0; }
	.recentBox h3 { font-size: 16px; line-height: 20px; }
	.recentBox.overview h2 { font-size: 16px; line-height: 20px; }
	.recentBox .block .button { display: none; }
	.recentBox { margin-bottom: 60px; }
	.brandBox { padding-top: 50px; padding-bottom: 50px; }
	.brandBox .column { width: 100%; padding: 0; margin-bottom: 50px; }
	.brandBox h2 { margin-bottom: 20px; }
	.brandBox h3 { background-size: 45px; padding-left: 60px; font-size: 18px; line-height: 21px; margin-bottom: 0; }
	.brandBox p { line-height:24px;font-size:16px;}
	.brandBox li a img { padding-bottom:10px;}
	#footerCntr h2 { display: none; }
	#footerCntr .column:first-of-type { display: none; }
	#footerCntr { padding-top: 70px; padding-bottom: 15px; }
	#footerCntr .column { padding: 0; width: 100%; text-align: center; }
	#footerCntr .top { margin-bottom: 20px; }
	#footerCntr .bottom p { padding: 0; padding-top: 40px; background-position: center top; text-align: center; max-width: 100%; }
	#footerCntr h3 { display: block; text-align: center; font-size: 18px; color: #000000; margin-bottom: 10px; }
	#headerCntr .logo { width: 80px; }
	.recentBox .content { padding-top: 20px; padding-bottom: 20px; }
	.overviewBox .holder { margin-right: -25px; }
	.overviewBox .block { padding: 0 25px 0 0; }
	.menuBox  { position: fixed; top: 0; left: 0; width: 100%; background: #341e68; padding-top: 125px; text-align: center; height: 100vh; z-index: 100; }
	.menuBox ul { height: calc(100vh - 279px); overflow-y: auto; padding-bottom: 20px; }
	.menuBox ul li { float: none; width: 100%; margin: 0; font-size: 22px; margin-bottom: 15px; }
	.menuBox ul li.language { font-size: 18px; margin-top: 40px; }
	.menuBox ul li a { color: #fff; display: inline-block; }
	.menuBox ul li a:after { border-color: #fff; }
	
	.menuBox.home ul li.language a { color: #888888; }
	.menuBox.home ul li.language a:hover { color:white;}	
	
	
	.menuBox .mobileInformation { background: #fff; padding: 25px 0 69px; text-align: center; display: block; }
	.menuBox .mobileInformation p { color: #341e68; font-size: 16px; line-height: 20px; }
	.menuBox .mobileInformation p a { color: #341e68; text-decoration: none; display: block; }
	#headerCntr h1 { margin: 10px 0 0 10px; font-size: 16px; }
	#headerCntr { padding-bottom: 80px; }
	.overviewBox p.category { font-size: 16px; display: block!important; }
	.overviewBox .category span { display: none; }
	.overviewBox h2 { font-size: 15px; }
	.overviewBox { padding-top: 70px; padding-bottom: 30px; }
	.phoneBox .right { margin-top: -150px; }
	.phoneBox { margin-bottom: 50px; }
	.workBox figure { width: 100%; }
	.workBox .text { padding: 20px 0; width: 100%; }
	.workBox .block { margin-bottom: 50px; }
	.projectBox { padding-bottom: 50px; }
	.projectBox figure { margin-bottom: 40px; }
	.overviewBox.small { padding-top: 60px; }
	.overviewBox h4 { margin-bottom: 60px; }
	.overviewBox.small .block { width: 50%; }
	.phoneBox .left { margin-top: -50px; }
	.phoneBox .right { margin-top: -50px; }
	.textBox p { font-size: 16px; line-height: 24px; text-align:left;}
	.textBox.centered h2 { font-size:21px; line-height:26px; margin-bottom:10px;text-align:left;}
	.quoteBox p, .quoteBox h2 {text-align:center;}
	.workBox h2 { font-size: 21px; line-height: 26px; }
	.galleryBox { padding-top: 50px; }
	.galleryBox:after { height: calc(100% - 50px); }
	.galleryBox { margin-bottom: 40px; }
	.galleryBox video { margin-top:30px;}
	.textBox { margin-bottom: 80px; }
	.teamBox li { width: 100%; text-align: left; padding-left: 0; padding-right: 0; margin-bottom: 20px; }
	.teamBox { padding-top: 70px; padding-bottom: 70px; }
	.teamBox figure { float: left; margin-right: 15px; margin-bottom: 0; }
	.teamBox figure img { width: 85px; }
	.teamBox h3 { font-size: 18px; margin-bottom: 5px; }
	.teamBox p { font-size: 18px; }
	.bannerBox h2 { font-size: 22px; line-height: 25px; }
	.bannerBox { height: 215px; }
	.workBox h2 br { display: none; }
	.workBox .block:nth-of-type(even) .text, .workBox .block.second .text { padding-right:0;}
	.teamBox h2 { font-size: 20px; }
	.popupBox .close { position: absolute;top:20px;right:20px; }
	.popupBox .popup { width: 100%; left: 0; top: 50px; transform: none; padding: 0 30px; position: absolute; }
	.popupBox input[type="text"], .popupBox input[type="email"] { width: calc(100% - 15px); margin-bottom: 15px; }
	.popupBox .row { margin-bottom: 0; }
	.ctaBox { padding: 60px 30px; }
	.ctaBox h2 { font-size: 22px; margin-bottom: 20px; }
	.ctaBox p { font-size: 16px; line-height: 24px; }
	#footerCntr .column.text { text-align: left; width: 100%; display: block!important; }
	#footerCntr .column.text h2 { display: block; font-size: 17px; line-height: 20px; margin-bottom: 15px; }

	.brandBox .column:first-of-type { padding-right: 0px; }
	.brandBox .column:last-of-type { padding-left: 0px; }

	#footerCntr .column.address:last-of-type { float: none; width: 100%; }
	.introductionBox h1, .introductionBox h2 { width: 100%; }
	.introductionBox p { font-size: 16px; line-height: 24px; }
	.recentBox h3 { font-size: 14px; }
	.recentBox.overview h3 { font-size: 22px; line-height:35px;}
	.recentBox p { display: none; }
	.brandBox h2 { font-size: 18px; }
	.brandBox h3 { background-size: 40px; padding-left: 50px; }
	#footerCntr address { font-size: 16px; line-height: 24px; }
	#footerCntr .bottom p a { margin-left: 3px; }
	.recentBox.overview .block { width: 100%; }
	.introductionBox li strong { width: 100%; }
	.workBox h2 { color: #000; }
	.overviewBox h2, .overviewBox h3 { font-size: 14px; }
	.teamBox h3 { font-size: 15px; }
	.teamBox p { font-size: 15px; }
	.introductionBox.contact { padding-bottom: 80px; }
	.popupBox h3 { font-size: 22px; }
	.popupBox p { line-height: 22px; }
	.popupBox p a { color:white !important;font-weight:800;}
	.popupBox input[type="text"], .popupBox input[type="email"], .popupBox textarea { padding: 10px 15px; border-radius: 3px; font-size: 15px; }
	.popupBox button { padding: 12px 25px; background-image: none; font-size: 16px; }
	.introductionBox.text { padding-bottom: 20px; }
	.projectBox { padding-bottom: 20px; }
	figure.zoom img { width:130%; margin-left:-15%;max-width:none;}
	video.zoom { width:130% !important; margin-left:-15%;max-width:none;margin-top:-50px;}
	
	.textBox .text h2 { font-size: 22px; margin-bottom: 20px; }
	.textBox li { font-size: 16px; }
	.textBox .text p { margin-bottom: 20px; }
	.textBox { margin-bottom: 60px; }
	#footerCntr { padding-top: 50px; }
	.overviewBox .content .readMore { display: none; }
	.teamBox h2 { color: #000; }
	#footerCntr p { margin-bottom: 40px; }
	.overviewBox .content { padding-top: 20px; }
	.overviewBox p.category { margin-bottom: 10px; }
	.workBox.workDetail p { line-height: 24px; }
	.workBox.about p { font-size: 16px; line-height: 24px; }
	.popupBox .overlay { position: absolute; }
	.ctaBox .button { font-size: 16px; padding: 8px 30px; }
	.workBox h2 { margin-bottom: 10px; }
	.popupBox button:hover { background-image: none; }

}

@media only screen and (max-width: 400px) {
	.phoneBox.laptops .right img { width: 100vw; }
	.phoneBox.laptops .left img { width: 100vw; }
	.phoneBox.laptops .right {margin-top:-90px;}
	.brandBox li a img { padding-bottom:20px;}
}









/********************************************************
HOME ANIMATION
********************************************************/

@keyframes bounceIn{
  0%{opacity: 0;transform: scale(0.3) translate3d(0,0,0);}
  50%{opacity: 0.9;transform: scale(1.1);}
  100%{ opacity: 1;transform: scale(1) translate3d(0,0,0);}
}

@-webkit-keyframes bounceIn {
  0%{opacity: 0;transform: scale(0.3) translate3d(0,0,0);}
  50%{opacity: 0.9;transform: scale(1.1);}
  100%{ opacity: 1;transform: scale(1) translate3d(0,0,0);}
}	
	

@keyframes floating {
	from { transform: translate(0,  0px); }
	65%  { transform: translate(0, -15px); }
	to   { transform: translate(0, -0px); }
}

@-webkit-keyframes floating {
	from { transform: translate(0,  0px); }
	65%  { transform: translate(0, 15px); }
	to   { transform: translate(0, -0px); }
}


#f01back 	{ animation-delay:0.2s; }
#f02laptop 	{ animation-delay:0.3s;}
#f03tablet 	{ animation-delay:0.4s; }
#f04lock 	{ animation-delay:0.5s; }
#f05card 	{ animation-delay:0.6s; }
#f06lock 	{ animation-delay:0.7s; }
#f07eye 	{ animation-delay:0.8s; }

.bounce {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
  filter: alpha(opacity=1);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;

  animation-name: bounceIn;
  animation-duration: 600ms;
  animation-fill-mode: forwards;

  -webkit-animation-name: bounceIn;
  -webkit-animation-duration: 600ms;
  -webkit-animation-fill-mode: forwards;

-webkit-transition: all 1000ms cubic-bezier(0.230, 0.575, 0.185, 1); /* older webkit */
-webkit-transition: all 1000ms cubic-bezier(0.230, 0.575, 0.185, 1.035); 
   -moz-transition: all 1000ms cubic-bezier(0.230, 0.575, 0.185, 1.035); 
     -o-transition: all 1000ms cubic-bezier(0.230, 0.575, 0.185, 1.035); 
        transition: all 1000ms cubic-bezier(0.230, 0.575, 0.185, 1.035); /* custom */

-webkit-transition-timing-function: cubic-bezier(0.230, 0.575, 0.185, 1); /* older webkit */
-webkit-transition-timing-function: cubic-bezier(0.230, 0.575, 0.185, 1.035); 
   -moz-transition-timing-function: cubic-bezier(0.230, 0.575, 0.185, 1.035); 
     -o-transition-timing-function: cubic-bezier(0.230, 0.575, 0.185, 1.035); 
        transition-timing-function: cubic-bezier(0.230, 0.575, 0.185, 1.035); /* custom */


}

.floating { 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
	
	animation-delay:0s !important;
	animation-name: floating; 
	animation-duration: 5s; 
	animation-iteration-count: infinite; 
	animation-timing-function: ease-in-out;
	
	-webkit-animation-delay:0s !important;
	-webkit-animation-name: floating; 
	-webkit-animation-duration: 5s; 
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-timing-function: ease-in-out;
}