/* -------------------------------- 

Slider

-------------------------------- */
.cd-hero ul li img{ width:100%; height:100%;}
.cd-hero { position:relative; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.cd-hero-slider { position:relative; overflow:hidden; padding:0; margin:0; list-style:none;}.cd-hero-slider li { position:absolute; top:0; left:0; width:100%; height:100%; -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -ms-transform:translateX(100%); -o-transform:translateX(100%); transform:translateX(100%);}.cd-hero-slider li.selected { /* this is the visible slide */
	position:relative; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);}.cd-hero-slider li.move-left { /* slide hidden on the left */
	-webkit-transform:translateX(-100%); -moz-transform:translateX(-100%); -ms-transform:translateX(-100%); -o-transform:translateX(-100%); transform:translateX(-100%);}.cd-hero-slider li.is-moving, .cd-hero-slider li.selected { /* the is-moving class is assigned to the slide which is moving outside the viewport */	-webkit-transition:-webkit-transform 0.5s; -moz-transition:-moz-transform 0.5s; transition:transform 0.5s;}
.cd-bg-video .cd-full-width.text-center{ text-align:center;}

@media only screen and (max-width:768px) {
	 .cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width { padding-top:100px;}
	 .cd-hero-slider { height:400px;}
	.overlay2 img { width:auto; height:400px;}
	 .cd-hero-slider h2 { font-size:2em !important;}
	 .cd-hero-slider h3, .cd-hero-slider p{ /*display:none;*/}
	 .cd-hero-slider .cd-half-width { width:80%;}
	 .cd-hero-slider .cd-img-container { display:none;}
	 .cd-hero-slider .cd-btn{ margin-top:10px !important; padding:6px 15px; font-size:12px;}
	 .cd-slider-nav a i { font-size:20px !important;}
}

@media only screen and (min-width:1170px) {
  .cd-hero-slider { height:600px;}
}

/* -------------------------------- 

Single slide style

-------------------------------- */
.cd-hero-slider li { background-position:center center; background-size:cover; background-repeat:no-repeat;}.cd-hero-slider li:first-of-type { background-color:#2c343b;}

/*.cd-hero-slider li:nth-of-type(2) {
  background-color:#3d4952; background-image:url("../assets/tech-1-mobile.jpg");}.cd-hero-slider li:nth-of-type(3) {
  background-color:#586775; background-image:url("../assets/tech-2-mobile.jpg");}
*/
.cd-hero-slider li:nth-of-type(4) {
  background-color:#2c343b; background-image:url("../img/slider/video-replace-mobile.jpg");}
.cd-hero-slider .cd-full-width,.cd-hero-slider .cd-half-width { position:absolute; width:100%; height:100%; z-index:100; left:0; top:0; /* this padding is used to align the text */
	text-align:left; /* Force Hardware Acceleration in WebKit */
	-webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform:translateZ(0); -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0); transform:translateZ(0);}.cd-hero-slider .cd-img-container { /* hide image on mobile device 
	display:block;*/}
  .cd-hero-slider .cd-img-container img { max-width:100%; position:absolute; left:40%; top:50%; bottom:auto; right:auto; -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%);}
.cd-hero-slider .cd-img-container.img-right img{  left:65%;}.cd-hero-slider .cd-bg-video-wrapper { /* hide video on mobile device */
	display:none; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden;}.cd-hero-slider .cd-bg-video-wrapper video { /* you won't see this element in the html, but it will be injected using js */	display:block; min-height:100%; min-width:100%; max-width:none; height:auto; width:auto; position:absolute; left:50%; top:50%; bottom:auto; right:auto; -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%);}.cd-hero-slider h2, .cd-hero-slider p { text-shadow:0 1px 3px rgba(0, 0, 0, 0.1); line-height:1.2; margin:0 auto 14px; color:#fff; width:100%; max-width:400px;}.cd-hero-slider h2 { font-size:48px;}
.cd-hero-slider h3 { font-size:24px; color:#fff;}.cd-hero-slider p { font-size:1.4rem; line-height:1.4;}.cd-hero-slider .cd-btn { display:inline-block; margin-top:30px; color:#fff;}
.cd-hero-slider .cd-btn.secondary { background-color:rgba(22, 26, 30, 0.8);}
.cd-hero-slider .cd-btn:nth-of-type(2) { margin-left:1em;}
.no-touch .cd-hero-slider .cd-btn:hover { background-color:#d44457;}
.no-touch .cd-hero-slider .cd-btn.secondary:hover { background-color:#161a1e;}

@media only screen and (min-width:768px) {
	.cd-hero-slider li:nth-of-type(2) { background-image:none;}
	.cd-hero-slider li:nth-of-type(3) { background-image:none;}
	.cd-hero-slider li:nth-of-type(4) { background-image:none;}
	.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width { padding-top:100px;}
	.cd-hero-slider .cd-bg-video-wrapper { display:block;}
	.cd-hero-slider .cd-half-width { width:50%;}
	.cd-hero-slider .cd-half-width:first-of-type { left:10%;}
	.cd-hero-slider .cd-half-width:nth-of-type(2) { right:10%; left:auto;}
	.cd-hero-slider .cd-half-width:nth-of-type(3) { left:13%; right:auto;}
	.cd-hero-slider .cd-img-container { display:block;}
	.cd-hero-slider h2, .cd-hero-slider p { max-width:100%;}
	.cd-hero-slider h2 { font-size:2em;}
	.cd-hero-slider .cd-btn { font-size:1.4rem;}
}
@media only screen and (min-width:1170px) {
  .cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width { padding-top:120px;}
	.cd-hero-slider .cd-full-width.left-align { text-align:left; left:13%;}
	.cd-hero-slider .cd-full-width.right-align { text-align:right; right:13%; left:auto;}
	.cd-hero-slider .cd-full-width.right-align h2{ max-width:100%; width:100%;}
	.cd-hero-slider h2, .cd-hero-slider p { margin-bottom:20px;}
	.cd-hero-slider h2 { font-size:3.2em;}
	.cd-half-width h2{  font-size:2.5em;}
	.cd-hero-slider p { font-size:1.2em;}
}

/* -------------------------------- 

Single slide animation

-------------------------------- */
@media only screen and (min-width:768px) {
  .cd-hero-slider .cd-half-width { opacity:0; -webkit-transform:translateX(40px); -moz-transform:translateX(40px); -ms-transform:translateX(40px); -o-transform:translateX(40px); transform:translateX(40px);}
	.cd-hero-slider .move-left .cd-half-width { -webkit-transform:translateX(-40px); -moz-transform:translateX(-40px); -ms-transform:translateX(-40px); -o-transform:translateX(-40px); transform:translateX(-40px);}
	.cd-hero-slider .selected .cd-half-width { /* this is the visible slide */
		opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);}
	.cd-hero-slider .is-moving .cd-half-width { /* this is the slide moving outside the viewport 
		wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
		-webkit-transition:opacity 0s 0.5s, -webkit-transform 0s 0.5s; -moz-transition:opacity 0s 0.5s, -moz-transform 0s 0.5s; transition:opacity 0s 0.5s, transform 0s 0.5s;}
	.cd-hero-slider li.selected.from-left .cd-half-width:nth-of-type(2), .cd-hero-slider li.selected.from-right .cd-half-width:first-of-type { /* this is the selected slide - different animation if it's entering from left or right */
		-webkit-transition:opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s; -moz-transition:opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s; transition:opacity 0.4s 0.2s, transform 0.5s 0.2s;}
	.cd-hero-slider li.selected.from-left .cd-half-width:first-of-type, .cd-hero-slider li.selected.from-right .cd-half-width:nth-of-type(2) { /* this is the selected slide - different animation if it's entering from left or right */
		-webkit-transition:opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s; -moz-transition:opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s; transition:opacity 0.4s 0.4s, transform 0.5s 0.4s;}
	.cd-hero-slider .cd-full-width h2, .cd-hero-slider .cd-full-width p, .cd-hero-slider .cd-full-width .cd-btn { opacity:0; -webkit-transform:translateX(100px); -moz-transform:translateX(100px); -ms-transform:translateX(100px); -o-transform:translateX(100px); transform:translateX(100px);}
	.cd-hero-slider .move-left .cd-full-width h2, .cd-hero-slider .move-left .cd-full-width p, .cd-hero-slider .move-left .cd-full-width .cd-btn { opacity:0; -webkit-transform:translateX(-100px); -moz-transform:translateX(-100px); -ms-transform:translateX(-100px); -o-transform:translateX(-100px); transform:translateX(-100px);}
	.cd-hero-slider .selected .cd-full-width h2, .cd-hero-slider .selected .cd-full-width p, .cd-hero-slider .selected .cd-full-width .cd-btn { /* this is the visible slide */
		opacity:1; -webkit-transform:translateX(0); -moz-transform:translateX(0); -ms-transform:translateX(0); -o-transform:translateX(0); transform:translateX(0);}
	.cd-hero-slider li.is-moving .cd-full-width h2, .cd-hero-slider li.is-moving .cd-full-width p, .cd-hero-slider li.is-moving .cd-full-width .cd-btn { /* this is the slide moving outside the viewport 
		wait for the end of the transition on the li parent before set opacity to 0 and translate to 100px/-100px */
		-webkit-transition:opacity 0s 0.5s, -webkit-transform 0s 0.5s; -moz-transition:opacity 0s 0.5s, -moz-transform 0s 0.5s; transition:opacity 0s 0.5s, transform 0s 0.5s;}
	.cd-hero-slider li.selected h2 { -webkit-transition:opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s; -moz-transition:opacity 0.4s 0.2s, -moz-transform 0.5s 0.2s; transition:opacity 0.4s 0.2s, transform 0.5s 0.2s;}
	.cd-hero-slider li.selected p { -webkit-transition:opacity 0.4s 0.3s, -webkit-transform 0.5s 0.3s; -moz-transition:opacity 0.4s 0.3s, -moz-transform 0.5s 0.3s; transition:opacity 0.4s 0.3s, transform 0.5s 0.3s;}
	.cd-hero-slider li.selected .cd-btn { -webkit-transition:opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s, background-color 0.2s 0s; -moz-transition:opacity 0.4s 0.4s, -moz-transform 0.5s 0.4s, background-color 0.2s 0s; transition:opacity 0.4s 0.4s, transform 0.5s 0.4s, background-color 0.2s 0s;}
}
/* -------------------------------- 

Slider navigation

-------------------------------- */

.cd-slider-nav { position:absolute; width:100%; bottom:110px; z-index:2; text-align:center; height:55px;}.cd-slider-nav nav, .cd-slider-nav ul, .cd-slider-nav li, .cd-slider-nav a { height:100%;}.cd-slider-nav nav { display:inline-block; position:relative;}.cd-slider-nav .cd-marker {  position:absolute;  bottom:0;  left:38px;  width:60px;  height:100%; -webkit-transition:-webkit-transform 0.2s, box-shadow 0.2s; -moz-transition:-moz-transform 0.2s, box-shadow 0.2s; transition:transform 0.2s, box-shadow 0.2s;}
.cd-slider-nav .cd-marker.item-2 { -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -ms-transform:translateX(100%); -o-transform:translateX(100%); transform:translateX(100%);}.cd-slider-nav .cd-marker.item-3 { -webkit-transform:translateX(200%); -moz-transform:translateX(200%); -ms-transform:translateX(200%); -o-transform:translateX(200%); transform:translateX(200%);}.cd-slider-nav .cd-marker.item-4 { -webkit-transform:translateX(300%); -moz-transform:translateX(300%); -ms-transform:translateX(300%); -o-transform:translateX(300%); transform:translateX(300%);}.cd-slider-nav .cd-marker.item-5 { -webkit-transform:translateX(400%); -moz-transform:translateX(400%); -ms-transform:translateX(400%); -o-transform:translateX(400%); transform:translateX(400%);}.cd-slider-nav ul::after { clear:both; content:""; display:table;}.cd-slider-nav li { display:inline-block; width:60px; float:left;}.cd-slider-nav li.selected a { color:#fff;}.no-touch .cd-slider-nav li.selected a:hover { background-color:transparent;}

.cd-slider-nav ul li a{  background:rgba(0,0,0,.3);  margin-right:5px;}.cd-slider-nav ul li.selected a{ background:rgba(0,0,0,.8);}
.cd-slider-nav a { display:block; position:relative; padding-top:35px; font-size:11px; font-weight:700; color:#b8b8b8; -webkit-transition:background-color 0.2s; -moz-transition:background-color 0.2s; transition:background-color 0.2s;}
.cd-slider-nav a{  padding-top:10px;}
.cd-slider-nav a i{ font-size:24px; display:block;}
.no-touch .cd-slider-nav a:hover { background-color:rgba(0, 1, 1, 0.5);}.cd-slider-nav li:first-of-type a::before { background-position:0 0;}.cd-slider-nav li.selected:first-of-type a::before { background-position:0 -24px;}.cd-slider-nav li:nth-of-type(2) a::before { background-position:-24px 0;}.cd-slider-nav li.selected:nth-of-type(2) a::before { background-position:-24px -24px;}.cd-slider-nav li:nth-of-type(3) a::before { background-position:-48px 0;}.cd-slider-nav li.selected:nth-of-type(3) a::before { background-position:-48px -24px;}.cd-slider-nav li:nth-of-type(4) a::before { background-position:-72px 0;}.cd-slider-nav li.selected:nth-of-type(4) a::before { background-position:-72px -24px;}.cd-slider-nav li:nth-of-type(5) a::before { background-position:-96px 0;}.cd-slider-nav li.selected:nth-of-type(5) a::before { background-position:-96px -24px;}
@media only screen and (min-width:768px) {
  .cd-slider-nav { height:70px;}
	.cd-slider-nav .cd-marker, .cd-slider-nav li { width:76px; height:62px;}
	.cd-slider-nav a { padding-top:10px; text-transform:uppercase;}
	.cd-slider-nav a::before { top:18px;}
}

/* -------------------------------- 

Javascript disabled

-------------------------------- */
.no-js .cd-hero-slider li { display:none;}.no-js .cd-hero-slider li.selected { display:block;}
.no-js .cd-slider-nav { display:none;}