@font-face {
    font-family: "AvenirNextBold";
    src: url("../fonts/avenirnextltpro-boldcn.otf") format("opentype");
}

html, body {
    font-family:AvenirNextBold,sans-serif;
    font-size:16px;
    font-weight:400;
    color:#fff;
    background-color:#050001;
}

a {color:#004673;}
a.active,
a:hover {color:#e72800; text-decoration:none;}

h1, .h1 {font-size:2.520rem; font-family:'Oswald',sans-serif; font-weight:400; text-transform:uppercase;}
h2, .h2 {font-size:2.285rem; font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;}
h3, .h3 {font-size:1.714rem; font-family:'Oswald',sans-serif; font-weight:400; text-transform:uppercase;}
h4, .h4 {font-size:0.875rem; color:#004673; font-weight:500; text-transform:uppercase;}

@media (min-width: 992px) {
    html, body {font-size:21px;}
}

/** bootstrap override **/
.btn {border-radius:0; text-transform:uppercase;}
.btn-primary {color:#fff; background-color:#e72800; border:none;}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {color:#000; background-color:#808285;;}
.btn-sm {font-size:0.75rem; padding-top: 7px;}

.bg-white {color:#231f20;}

@media screen and (max-width: 767px) {
    .container {max-width:100%;}
}

/** common **/
.text-red {color:#e72800;}
.text-grey {color:#808285;}

.text-large {font-size:1.429rem; line-height:1.75em;}

main {padding-top:6rem; overflow:hidden;}
.content {position:relative; padding:2.5rem 0; z-index:2;}

p {line-height:2em;}

/** CTA **/
.cta {position:relative; padding:4rem 0; background-color:#050001; z-index:2;}
.cta h3 span {color:#e72800;}
.cta h3 + span {font-size:1.333rem; letter-spacing:0.075em;}
.cta .btn {padding:0.5rem 2rem; font-size:1.333rem; font-family:'Oswald',sans-serif; font-weight:500; letter-spacing:0.1em;}

/** header **/
header {width:100%; position:absolute; top:0; left:0; z-index:999;}
header .header-logo img {max-width:145px;}

header ul {padding:0; list-style-type:none;}
header nav ul li {margin:2rem 1rem}
header ul li a {font-size:1.35rem; color:#fff; font-weight:400; text-transform:uppercase;}

header .menu-wrapper {width:100%; height:100%; padding-top:200px; position:fixed; top:0; right:-100%; background:#000; transition:right 0.3s ease; overflow-y:scroll; z-index:99; text-align:center;}
header .menu-wrapper.active {right:0;}
header .header-social ul {display:flex;}
header .header-social ul li {padding:0 0.5rem;}

header .header-menu-toggle {font-size:2.5rem;}
header .header-menu-toggle a {color:#fff;}
header .header-menu-toggle a:hover {color:#e72800;}

body.mobile-menu-active {overflow-y:hidden;}

.header-logo, .header-social, .header-menu-toggle {z-index:999;}

@media (min-width: 992px) {
    header .header-logo img {max-width:none;}
    header .menu-wrapper {display:block; width:auto; height:auto; padding-top:0; position:static; top:auto; left:auto; background:transparent; overflow:visible;}
    header ul {display:flex;}
    header nav ul li {margin:0;}
    header nav ul li:not(:last-child)::after {content:'|'; padding:0 0.5rem; color:#fff; font-family:arial,sans-serif;}
    header ul li a, header .header-social ul li a {font-size:0.857rem}
}

/** banner **/
.banner {
    background:url('../../media/static/word-map.jpg') 22% top no-repeat;
    backgrounc-color:#050001;
    z-index:1;
}
.banner-home h1 {width:100%; text-align:right;}

@media screen and (max-width: 767px) {
    .banner-home h1 {width:50%;}
    .banner-about, .banner-giving {padding-top:25%;}
}


/** homepage **/
.home-headings h3 {margin:1.15rem 0;}
.home-headings p {font-size:1.430rem; font-style:italic; letter-spacing:0.075em;}

.home-image {position:absolute; right:0; bottom:-2.5rem; z-index:2;}

@media screen and (max-width: 991px) {
    .home-image {max-width:35%; bottom:0; left:10%;}
}
@media screen and (max-width: 767px) {
    .home-image {max-width:50%; bottom:0; left:0;}
}

/** Giving back **/
.giving .carousel-container {width: 540px;}
.giving .carousel-img-box { height: 540px; overflow: hidden;}
.giving .carousel-indicators-holder {display: flex; justify-content: center; align-items: center;}
.giving .carousel-indicators {position: static; align-items: center; margin: 0; padding-top: 3px;}
.giving .carousel-indicators li {width: auto; height: auto; font-size: 2rem; line-height: 1; color: #bebebe; margin-left: 10px; margin-right: 10px; text-align: center; background: transparent; box-sizing: border-box; border: none; opacity: 1; text-indent: initial;}
.giving .carousel-indicators li.active {color: #e72800;}
.giving .carousel-control-prev, .carousel-control-next {width: 50px; height: 50px; position: relative; opacity: 1;}
.giving .carousel-control-prev:after {content: ''; border: 15px solid transparent; border-right: 30px solid #000000;}
.giving .carousel-control-next:after {content: ''; border: 15px solid transparent; border-left: 30px solid #000000;}
.giving .carousel-control-prev-icon, .carousel-control-next-icon {display: none;}
.giving .sr-only {display: none;}
.giving .btn {padding: 0.5rem 2rem;font-size: 1.333rem;font-family: 'Oswald',sans-serif;font-weight: 500;letter-spacing: 0.1em;}
@media screen and (max-width: 767px) {
    .giving .carousel-container {width: 400px;}
    .giving .carousel-img-box { height: 400px; }
    .giving .carousel-indicators li {font-size: 1.6rem; margin-left: 5px; margin-right: 5px;}
    .giving .carousel-control-prev:after {border: 12px solid transparent; border-right: 20px solid #000000;}
    .giving .carousel-control-next:after {border: 12px solid transparent; border-left: 20px solid #000000;}
}
@media screen and (max-width: 420px) {
    .giving .carousel-container {width: 300px;}
    .giving .carousel-img-box { height: 300px; }
}

/** Circuits **/
.main-circuits + .cta {color:#000; background-color:#fff;}

.container-circuits {padding-top:150px; background:url('../../media/static/banner-circuits.png') top right no-repeat;}

.video-desc {margin:0.5rem 0 0; font-size:1.143rem; line-height:1em; letter-spacing:0.15em; text-transform:uppercase;}
.video-equip {font-size:0.619rem; text-transform:uppercase;}

.embed {position:relative; width:100%; padding-top:25px; padding-bottom:56.25%;}
.embed iframe {position:absolute; top:0; left:0; width:100%; height:100%;}

/** contact **/


/** footer **/
footer {position:relative; padding:2.5rem 0; background-color:#d1d3d4; z-index:2;}
footer a {color:#231f20; font-family:'Oswald',sans-serif; font-weight:500;}
footer ul {margin-left:2rem; padding:0; list-style-type:none;}
footer ul li {margin-bottom:0.5rem; text-transform:uppercase;}

footer form input, footer form textarea {width:100%; font-size:0.750rem; color:#231f20; background-color:#eeefef; border:0;}
footer form textarea {min-height:5rem; padding-top:2.25em !important;}
footer form label,
footer form .form-code input::placeholder {color:#808285; font-size:0.525rem; font-style:italic; text-transform:uppercase;}
footer form .form-code > div {background-color:#eeefef;}
footer form .form-code img {width:40%; margin-left:2%;}
footer form .form-code input {width:50%; height:1rem; padding:1.3em 0.75em; border:none;}
footer form .form-code input::placeholder {opacity:1;}

.copyright {position:relative; padding:1.25rem 0 0.75rem; font-size:0.575rem; color:#000; font-family: 'Roboto', sans-serif; font-weight:400; letter-spacing:0.15em; z-index:2;}

/** form general **/
form .float-label {position:relative; z-index:2;}
form .float-label:focus {outline:0; box-shadow:0;}
form .float-label::placeholder {color:transparent;}
form .float-label, form .float-label + label {height:1em; padding:1.3em 0.75em; line-height:1;}
form textarea.float-label {height:auto;}
form .float-label + label {position:absolute; top:0; left:0.75rem; user-select:none; transition:transform .25s; transform-origin:0 0; z-index:2;}
form .float-label:required + label::before {content:'* ';}
form .float-label:focus + label,
form .float-label:not(:placeholder-shown) + label {height:2em; transform:translate(1%, -90%) scale(0.8); z-index:3;}
form textarea.float-label:focus + label,
form textarea.float-label:not(:placeholder-shown) + label {transform:translate(1%, -10%) scale(0.8);}
form .float-label:invalid {}