*, *::after, *::before {
box-sizing : border-box;
}
html {
font-size : 75%;
}
body {
font-size : 1.6rem;
font-family : "Open Sans", sans-serif;
color : #3b2c2c;
background-color : #f2f2f2;
}
a {
color : #44cad4;
text-decoration : none;
}
img {
max-width : 100%;
}
.cd-header {
position : absolute;
z-index : 2;
top : 0;
left : 0;
width : 100%;
height : 50px;
background-color : #21272c;
}
@media only screen and (min-width: 768px) {
.cd-header {
height : 70px;
background-color : transparent;
}
}
#cd-logo {
float : left;
margin : 13px 0 0 5%;
}
#cd-logo img {
display : block;
}
@media only screen and (min-width: 768px) {
#cd-logo {
margin : 23px 0 0 5%;
}
}
.cd-primary-nav {
float : right;
margin-right : 5%;
width : 44px;
height : 100%;
}
.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 rgb(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 #333c44;
color : #ffffff;
}
@media only screen and (min-width: 768px) {
.cd-primary-nav {
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 : 0.6em 1em;
border-top : none;
}
}
.cd-hero {
position : relative;
}
.cd-hero-slider {
position : relative;
height : 360px;
overflow : hidden;
}
.cd-hero-slider li {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : auto;
min-height : 100%;
transform : translateX(100%);
}
.cd-hero-slider li.selected {
position : relative;
transform : translateX(0);
}
.cd-hero-slider li.move-left {
transform : translateX(-100%);
}
.cd-hero-slider li.is-moving, .cd-hero-slider li.selected {
transition : transform 0.5s;
}
@media only screen and (min-width: 768px) {
.cd-hero-slider {
height : 500px;
}
}
@media only screen and (min-width: 1170px) {
.cd-hero-slider {
height : 680px;
}
}
.cd-hero-slider li {
background-position : center center;
background-size : cover;
background-repeat : no-repeat;
}
.cd-hero-slider li:first-of-type {
background-color : #867c75;
}
.cd-hero-slider li:nth-of-type(2) {
background-color : #3d4952;
}
.cd-hero-slider li:nth-of-type(3) {
background-color : #cdcdcd;
}
.cd-hero-slider li:nth-of-type(4) {
background-color : #2c343b;
}
.cd-hero-slider li:nth-of-type(5) {
background-color : #2c343b;
}
.cd-hero-slider li:nth-of-type(6) {
background-color : #2c343b;
}
.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;
padding-top : 100px;
text-align : center;
backface-visibility : hidden;
transform : translateZ(0);
}
.cd-hero-slider .cd-img-container {
display : none;
}
.cd-hero-slider .cd-img-container img {
position : absolute;
left : 50%;
top : 50%;
bottom : auto;
right : auto;
transform : translateX(-50%) translateY(-50%);
}
.cd-hero-slider .cd-bg-video-wrapper {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
overflow : hidden;
}
.cd-hero-slider .cd-bg-video-wrapper video {
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 rgb(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 : 1.4rem;
line-height : 1.4;
}
.cd-hero-slider .cd-btn {
display : inline-block;
padding : 1.2em 1.4em;
margin-top : 0.8em;
background-color : rgb(212 68 87 / 0.9);
font-size : 1.3rem;
font-weight : 700;
letter-spacing : 1px;
color : #ffffff;
text-transform : uppercase;
box-shadow : 0 3px 6px rgb(0 0 0 / 0.1);
transition : background-color 0.2s;
}
.cd-hero-slider .cd-btn.secondary {
background-color : rgb(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 .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 : 45%;
}
.cd-hero-slider .cd-half-width:first-of-type {
left : 5%;
}
.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 : 1.4rem;
}
}
@media only screen and (min-width: 1170px) {
.cd-hero-slider .cd-full-width, .cd-hero-slider .cd-half-width {
padding-top : 220px;
}
.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 : 1.6rem;
}
}
@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 {
opacity : 1;
transform : translateX(0);
}
.cd-hero-slider .is-moving .cd-half-width {
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 {
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) {
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 {
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 {
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;
}
}
.cd-slider-nav {
position : absolute;
width : 100%;
bottom : 0;
z-index : 2;
text-align : center;
height : 55px;
}
.cd-slider-nav nav {
display : inline-block;
position : relative;
}
.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 : #2c343b;
}
.cd-slider-nav a {
display : block;
position : relative;
padding-top : 35px;
font-size : 1rem;
font-weight : 700;
color : #a8b4be;
}
.cd-slider-nav a::before {
content : '';
position : absolute;
width : 24px;
height : 24px;
top : 8px;
left : 50%;
right : auto;
}
.no-touch .cd-slider-nav a:hover {
background-color : rgb(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 : 80px;
}
.cd-slider-nav .cd-marker, .cd-slider-nav li {
width : 95px;
}
.cd-slider-nav a {
padding-top : 48px;
font-size : 1.1rem;
text-transform : uppercase;
}
.cd-slider-nav a::before {
top : 18px;
}
}
.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;
}
}
.no-js .cd-hero-slider li {
display : none;
}
.no-js .cd-hero-slider li.selected {
display : block;
}
.no-js .cd-slider-nav {
display : none;
}