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

Main Components 

-------------------------------- */
.cd-header { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 50px; background-color: #21272c; }
#cd-logo { float: left; margin: 13px 0 0 5%; }
#cd-logo img { display: block; }
.cd-primary-nav {  /* mobile first - navigation hidden by default, triggered by tap/click on navigation icon */
float: right; margin-right: 5%; width: 44px; height: 100%; background: url("../404.html") no-repeat center center; }
.cd-primary-nav ul { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-100%); }
.cd-primary-nav ul.is-visible { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); transform: translateY(50px); }
.cd-primary-nav a { display: block; height: 50px; line-height: 50px; padding-left: 5%; background: #21272c; border-top: 1px solid ; color: #ffffff; }
@media only screen and (min-width:768px) {
	.cd-primary-nav {    /* reset navigation values */
	width: auto; height: auto; background: none; }
	.cd-primary-nav ul { position: static; width: auto; transform: translateY(0); line-height: 70px; }
	.cd-primary-nav ul.is-visible { transform: translateY(0); }
	.cd-primary-nav li { display: inline-block; margin-left: 1em; }
	.cd-primary-nav a { display: inline-block; height: auto; font-weight: 600; line-height: normal; background: transparent; padding: .6em 1em; border-top: none; }
}

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

Slider

-------------------------------- */
.cd-hero {position: relative;}
.cd-hero-slider { position: relative; height: 380px; overflow: hidden; }
.cd-hero-slider li { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateX(100%); }
.cd-hero-slider li.selected {  /* this is the visible slide */
position: relative; transform: translateX(0); }
.cd-hero-slider li.move-left {  /* slide hidden on the left */
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 */
transition: transform 0.5s; }

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

Single slide style

-------------------------------- */
.cd-hero-wrapper { width: 100%; margin: 0 auto; }
img.cd-hero-imagem { width: 100%; }
.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width { position: absolute; width: 100%; height: 100%; z-index: 1; left: 0; top: 0;  /* this padding is used to align the text */ padding-top: 100px; text-align: center;  /* Force Hardware Acceleration in WebKit */ backface-visibility: hidden; transform: translateZ(0); }
.cd-hero-slider .cd-img-container {  /* hide image on mobile device */
display: none; }
.cd-hero-slider .cd-img-container img { position: absolute; left: 68%; top: 37%; bottom: auto; right: auto; transform: translateX(-50%) translateY(-50%); }
.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; 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: #ffffff; width: 90%; max-width: 400px; }
.cd-hero-slider h2 { font-size: 2.4rem; }
.cd-hero-slider p { font-size: 1rem; line-height: 1.4; }
.cd-hero-slider .cd-btn { display: inline-block; padding: 0.6em 1em; margin-top: .4em; background-color: rgba(212, 68, 87, 0.9); font-size: 1.3rem; font-weight: 500; letter-spacing: 1px; color: #ffffff; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); text-decoration: none; transition: background-color 0.2s; float: left; }
.cd-hero-slider .cd-btn.secondary {background-color: rgba(10, 52, 71, 0.9);}
.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: #0a3447;}
@media only screen and (min-width:768px) {
	.cd-hero-slider li:nth-of-type(2) { }
	.cd-hero-slider li:nth-of-type(3) { }
	.cd-hero-slider li:nth-of-type(4) { }
	.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width { padding-top: 150px; }
	.cd-hero-slider .cd-bg-video-wrapper { display: block; }
	.cd-hero-slider .cd-half-width { width: 54%; }
	.cd-hero-slider .cd-half-width:first-of-type { left: 0%; }
	.cd-hero-slider .cd-half-width:nth-of-type(2) { right: 5%; left: auto; }
	.cd-hero-slider .cd-img-container { display: block; }
	.cd-hero-slider h2, .cd-hero-slider p { max-width: 520px; }
	.cd-hero-slider h2 { font-size: 2.4em; font-weight: 300; }
	.cd-hero-slider .cd-btn { font-size: 1rem; }
}
@media only screen and (min-width:1170px) {
	.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width { padding-top: 35px; }
	.cd-hero-slider h2, .cd-hero-slider p {margin-bottom: 20px;}
	.cd-hero-slider h2 { font-size: 3.2em; }
	.cd-hero-slider p { font-size: 0.9rem; }
}

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

Single slide animation

-------------------------------- */
@media only screen and (min-width:768px) {
	.cd-hero-slider .cd-half-width { opacity: 0; transform: translateX(40px); }
	.cd-hero-slider .move-left .cd-half-width { transform: translateX(-40px); }
	.cd-hero-slider .selected .cd-half-width {    /* this is the visible slide */
	opacity: 1; 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 */
	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 */
	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 */
	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; 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; 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; 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 */
	transition: opacity 0s 0.5s, transform 0s 0.5s; }
	.cd-hero-slider li.selected h2 { transition: opacity 0.4s 0.2s, transform 0.5s 0.2s; }
	.cd-hero-slider li.selected p { transition: opacity 0.4s 0.3s, transform 0.5s 0.3s; }
	.cd-hero-slider li.selected .cd-btn { 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: 0;z-index: 2;text-align: center;height: 55px;background-color: rgba(255, 255, 255, 0.4);}
.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;padding: 0;bottom: 0;left: 0;width: 60px;height: 100%;color: #0a3447;background-color: #ffffff;border-top: 2px solid #0a3447;transition: transform 0.2s, box-shadow 0.2s;}
.cd-slider-nav .cd-marker.item-2 { transform: translateX(100%); }
.cd-slider-nav .cd-marker.item-3 { transform: translateX(200%); }
.cd-slider-nav .cd-marker.item-4 { transform: translateX(300%); }
.cd-slider-nav .cd-marker.item-5 { transform: translateX(400%); }
.cd-slider-nav ul::after { clear: both; content: ""; display: table; }
.cd-slider-nav li { display: inline-block;  /*width: 60px;*/ height: 35px; float: left; }
.cd-slider-nav li.selected a {color: #0a3447;height: 35px;}
.no-touch .cd-slider-nav li.selected a:hover { background-color: transparent; height: 35px; }
.cd-slider-nav a {display: block;position: relative;padding-top: 35px;font-size: 1rem;font-weight: 700;text-decoration: none;color: #fc4242;transition: background-color 0.2s;}
.cd-slider-nav a::before { content: ''; position: absolute; width: 24px; height: 24px; top: 8px; left: 50%; right: auto; transform: translateX(-50%); background: url(../404.html) no-repeat 0 0; }
.no-touch .cd-slider-nav a:hover { background-color: rgba(0, 1, 1, 0.5); height: 35px; }
.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: 56px; }
	.cd-slider-nav .cd-marker, .cd-slider-nav li { width: 75px; }
	.cd-slider-nav a { padding-top: 21px; font-size: 1.1rem; text-transform: uppercase; outline: 0; }
	.cd-slider-nav a::before { top: 18px; }
}

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

Main content

-------------------------------- */
.cd-main-content { width: 90%; max-width: 768px; margin: 0 auto; padding: 2em 0; }
.cd-main-content p { font-size: 1.4rem; line-height: 1.8; color: #999999; margin: 2em 0; }
@media only screen and (min-width:1170px) {
	.cd-main-content { padding: 3em 0; }
	.cd-main-content p { font-size: 1.6rem; }
}

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

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; }

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

Slider Edited

-------------------------------- */
.cd-hero h2 {border-radius: 3px;width: 100%;padding: 5px;/* text-align: left; */font-size: 24px;font-weight: bold;float: left;color: #ffffff;background: hsla(0, 0%, 0%, 0.85);text-transform: uppercase;}
.cd-hero p {background: rgba(0, 0, 0, 0.85);float: left;padding: 5px;width: 100%;text-align: left;text-shadow: 1px 1px 1px #000;border-radius: 5px;}
.cd-hero img { float: right; border-radius: 5px; }
.cd-hero .cd-btn:hover {/* color: #961e1a; */}
@media only screen and (max-width:768px) {
	.cd-slider-nav a { width: 35px; padding-top: 15px; }
	.cd-slider-nav .cd-marker { width: 35px; }
	.cd-hero-slider h2 { text-align: center; }
	.cd-hero-slider p { font-size: 0.8rem; text-align: center; }
	.cd-hero-slider { padding: 0 40px; text-align: center; }
	.cd-hero-slider .cd-btn { margin-top: .4em; font-size: 0.8rem !important; float: none; }
}