/*
    Theme Name: AM3D
    Version: 1.0
    Author: Bastien (Rose & Piment)
*/

@font-face {
    font-family: 'FjallaOne Re';
    src: url('fonts/FjallaOne-Regular.woff2') format('woff2'),
        url('fonts/FjallaOne-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Roboto Re';
    src: url('fonts/Roboto-Regular.woff2') format('woff2'),
        url('fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Roboto Bo';
    src: url('fonts/Roboto-Bold.woff2') format('woff2'),
        url('fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: block;
}


/*--------------------------------------------------------------
    Generale
--------------------------------------------------------------*/

:root {
    --bleu-1: #00315b;
    --couleur-sec-1: #00a9e4;
    --gris-1: #757575;
}

body,
html {
    width: 100%;
    height: auto;
    font-size: 14px;
}
body {
    font-family: 'Roboto Re', Helvetica, sans-serif;
    color: var(--bleu-1);
}

section {
    padding: 3rem 0;
}

a {
    color: var(--bleu-1);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}
a:hover {
    color: var(--bleu-1);
    text-decoration: underline;
}

b,
strong {
    font-family: 'Roboto Bo', Helvetica, sans-serif;
    font-weight: initial;
}

p {
    color: var(--bleu-1);
    margin-bottom: 20px;
    letter-spacing: 1px;
    font-size: 1rem;
}
p:last-of-type {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
}

.card {
    border: 0;
    border-radius: 0;
}
.card .card-img-top,
.card .card-img {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-radius: 0;
}

.modal .modal-content {
    border-radius: 0;
}
.modal .modal-content .modal-title {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
    color: var(--couleur-sec-1);
    text-transform: uppercase;
    font-size: 1.3rem;
}

.bg-bleu {
    background-color: var(--couleur-sec-1);
}

.fancybox-caption__body {
    font-size: 1.5rem;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10+ CSS here */
    .card > * {
        flex: 0 0 auto;
    }
}


/*--------------------------------------------------------------
    Fond
--------------------------------------------------------------*/

#page-top {
    background-color: var(--bleu-1);
    background-repeat: no-repeat;
    background-size: cover;
}


/*--------------------------------------------------------------
    Top Bar
--------------------------------------------------------------*/

.top-bar {
    padding: 1rem 0;
}
.top-bar ul li a {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.4rem;
}


/*--------------------------------------------------------------
    Header
--------------------------------------------------------------*/

header {
    position: relative;
}
header .header {
    position: absolute;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    padding: 4rem;
}
header .header h1.logo {
    max-width: 350px;
}

header .header .navbar {
    background-color: #fff;
    margin: 0 auto;
    padding: 1rem;
}
header .header .navbar li {
    display: inline-block;
    border-right: 1px solid var(--couleur-sec-1);
}
header .header .navbar li:last-child {
    border-right: 0;
}
header .header .navbar li a {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
    color: var(--bleu-1);
    text-transform: uppercase;
    font-size: 1.5rem;
    padding: .7rem 4.5rem !important;
}
header .header .navbar li a:hover,
header .header .navbar li a:focus {
    color: var(--couleur-sec-1);
}
header .header .navbar-nav {
    display: block !important;
    text-align: center;
}

header .header .baseline h2 {
    color: var(--bleu-1);
    text-transform: uppercase;
    font-size: 2.6rem;
    text-align: right;
}
header .header .baseline h3 {
    color: var(--couleur-sec-1);
    text-transform: uppercase;
    font-size: 2.2rem;
    text-align: right;
}

@media screen and (max-width: 1200px) {
    header .header .navbar li a {
        padding: .7rem 2.5rem !important;
    }
}

@media screen and (max-width: 992px) {
    header .header {
        padding: 1rem;
    }
    header .header .navbar li a {
        padding: .7rem 1.5rem !important;
    }
}

@media screen and (max-width: 768px) {
    header .header .navbar {
        margin-top: 0 !important;
    }
    header .header .navbar li {
        display: block;
        border-right: 0;
    }
}

@media screen and (max-width: 576px) {
    header .header .baseline h2 {
        font-size: 2rem;
    }
    header .header .baseline h3 {
        font-size: 1.5rem;
    }
    header .header .navbar li a {
        font-size: 1.2rem;
    }
}


/*--------------------------------------------------------------
    Navigation Sticky
--------------------------------------------------------------*/

#stickyNav {
    display: none;
}
#stickyNav.fixed {
    transition-property: margin-top,margin-right;
    transition-duration: .5s,.1s;
    transition-delay: 0;
    transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
    -moz-transition-property: margin-top,margin-right;
    -moz-transition-duration: .5s,.1s;
    -moz-transition-delay: 0;
    -moz-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
    -o-transition-property: margin-top,margin-right;
    -o-transition-duration: .5s,.1s;
    -o-transition-delay: 0;
    -o-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
    -ms-transition-property: margin-top,margin-right;
    -ms-transition-duration: .5s,.1s;
    -ms-transition-delay: 0;
    -ms-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
    -webkit-transition-property: margin-top,margin-right;
    -webkit-transition-duration: .5s,.1s;
    -webkit-transition-delay: 0;
    -webkit-transition-timing-function: cubic-bezier(0.22,0.99,0.62,1);
    display: block;
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    width: 100%;
}
#stickyNav.fixed li {
    display: inline-block;
    border-right: 1px solid var(--couleur-sec-1);
}
#stickyNav.fixed li:last-child {
    border-right: 0;
}
#stickyNav.fixed li a {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
    color: var(--bleu-1);
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: .5rem 1.5rem !important;
}
#stickyNav.fixed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,49,91, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
#stickyNav.fixed .navbar-toggler {
    border: 1px solid var(--couleur-sec-1);
}

@media screen and (max-width: 768px) {
    #stickyNav.fixed li {
        display: block;
        border-right: 0;
    }
}


/*--------------------------------------------------------------
    Carousel
--------------------------------------------------------------*/
#carouselAccueil:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(149, 149, 151, 0.4);
    z-index: 1;
}
#carouselAccueil .carousel-item {
    height: 50rem;
    min-height: 550px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: bottom;
}

.carousel-caption * {
    color: #fff;
}

.carousel-indicators .active {
    background-color: var(--couleur-sec-1);
}


/*--------------------------------------------------------------
    Nos valeurs
--------------------------------------------------------------*/

#nos-valeurs * {
    color: #fff;
}


/*--------------------------------------------------------------
    Metiers
--------------------------------------------------------------*/

#metiers {
    padding: 0;
}
#metiers h2 {
    background-color: var(--couleur-sec-1);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    padding: 1rem 0 0.8rem 0;
    margin: 0;
}
#metiers .card {
    background-color: #fff;
}
#metiers .card .card-body {
    padding: 0;
}
#metiers .card .card-body .card-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
}
#metiers .card .card-body .card-text h3 {
    font-size: 1.4rem;
    color: var(--couleur-sec-1);
}
#metiers .card .card-body .card-text h3:after {
    content: "";
    width: 2rem;
    height: 3px;
    background-color: var(--bleu-1);
    position: absolute;
    left: 0;
    bottom: -1rem;
    right: 0;
    margin: 0 auto;
}


/*--------------------------------------------------------------
    Activité
--------------------------------------------------------------*/

#activite {
    background-color: var(--couleur-sec-1);
    padding-bottom: 0;
    margin: 0 -1rem;
}
#activite h2 {
    color: #fff;
    margin-bottom: 2rem;
    text-align: center;
    text-transform: uppercase;
}
#activite .card {
    background-color: transparent;
}
#activite .card .card-img-top {
    max-width: 70px;
    margin: 0 auto;
}
#activite .card .card-body .card-title {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
    color: var(--bleu-1);
    text-transform: uppercase;
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 0;
}
#activite .card .card-body a {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
    color: #fff;
    font-size: 1.1rem;
    text-align: center;
    display: block;
}


/*--------------------------------------------------------------
    Amenagement
--------------------------------------------------------------*/

#amenagement {
    padding: 0;
}
#amenagement .card {
    background-color: transparent;
}
#amenagement .card .card-body .card-title {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: 0;
}
#amenagement .card .card-body .card-title:after {
    content: "";
    width: 2rem;
    height: 3px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
}

.modal.amenagement .modal-content {
    background: var(--bleu-1);
    background: linear-gradient(27deg, var(--bleu-1) 0%, rgb(24, 69, 95) 71%, var(--couleur-sec-1) 92%);
    border: 0;
}
.modal.amenagement .modal-content .modal-body * {
    color: #fff;
}
.modal.amenagement .modal-content .modal-body .title {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
    color: #fff;
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 0.5rem;
}


/*--------------------------------------------------------------
    Entreprise
--------------------------------------------------------------*/

#entreprise h2 {
    color: var(--bleu-1);
    text-align: center;
    text-transform: uppercase;
}

/*--------------------------------------------------------------
    Services
--------------------------------------------------------------*/

#services .card .card-img-top {
    max-width: 100px;
}
#services .card .card-body .card-title {
    font-family: 'FjallaOne Re', Helvetica, sans-serif;
    text-align: center;
    font-size: 1.3rem;
}


/*--------------------------------------------------------------
    Reference
--------------------------------------------------------------*/

#reference {
    background-color: #fff;
    padding: 0;
}
#reference h2 {
    color: var(--bleu-1);
    text-align: center;
    text-transform: uppercase;
    padding: 3rem 0 0;
    margin: 0;
}
#reference-2 h3 {
    text-align: center;
    text-transform: uppercase;
    margin: 1.4rem 0 2rem;
}

#reference .videos .card .img {
    position: relative;
}
#reference .videos .card .img::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f144";
    color: var(--bleu-1);
    position: absolute;
    bottom: 0;
    left: 1rem;
    font-size: 4rem;
    z-index: 10;
}
#reference .videos .card .card-img:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}


/*--------------------------------------------------------------
    Contact
--------------------------------------------------------------*/

#contact {
    background-color: #fff;
}
#contact h2 {
    color: #fff;
    text-transform: uppercase;
}

#contact .contact-wrapper {
    background: var(--bleu-1);
    background: linear-gradient(27deg, var(--bleu-1) 0%, rgb(24, 69, 95) 71%, var(--couleur-sec-1) 92%);
}

#contact .adresse-wrapper img {
    max-width: 280px;
}
#contact .adresse-wrapper * {
    color: #fff;
}
#contact .adresse-wrapper .form-btn {
    float: right;
}
#contact .partenaires h3 {
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}
#contact .partenaires h3:after {
    content: "";
    width: 2rem;
    height: 3px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    right: 0;
    margin: 0 auto;
}

.wpcf7-list-item-label {
    color: #fff;
    text-align: justify;
    font-size: 0.75rem;
}
.grecaptcha-badge {
    display: none;
}


/*--------------------------------------------------------------
    Contact (Form)
--------------------------------------------------------------*/

#contact-us .form {
    width: 100%;
    padding: 15px;
    background: #f8f8f8;
    border: 1px solid rgba(0, 0, 0, 0.075);
    margin-bottom: 15px;
    color: #727272 !important;
    font-size: 13px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
#contact-us .form:hover {
    border: 1px solid var(--bleu-1);
}
#contact-us .form:focus {
    color: #fff;
    outline: none;
    border: 1px solid var(--bleu-1);
}
#contact-us textarea {
    height: 12rem;
    max-height: 12rem;
    max-width: 100%;
}
#contact-us .form-btn {
    display: block;
    height: auto;
    padding: 4px 15px;
    color: #fff;
    background-color: var(--couleur-sec-1);
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin: auto;
    text-transform: uppercase;
    float: right;
}
#contact-us .form-btn:focus,
#contact-us .form-btn:hover {
    background-color: var(--bleu-1);
    color: #fff;
    border: none;
}
#contact-us .form-btn:active {
    opacity: 0.9;
}
#contact-us .wpcf7-list-item {
    margin: 0 !important;
}


/*--------------------------------------------------------------
    Footer
--------------------------------------------------------------*/

footer {
    background-color: #fff;
}
footer .pre-footer {
}
footer .pre-footer * {
    color: var(--gris-1);
}
footer .pre-footer ul.nav_footer {
    list-style-type: none;
    padding: 0;
    margin-bottom: 1.5rem;
}
footer .pre-footer ul.nav_footer:last-of-type {
    margin-bottom: 0;
}
footer .pre-footer ul.nav_footer li {
    list-style: none;
    padding: 0 0 0.2em 0;
}
footer .pre-footer ul.nav_footer li:before {
    display: none;
}
footer .pre-footer ul.nav_footer li a {
    color: var(--gris-1);
    font-size: 1rem;
}
footer .pre-footer ul.nav_footer li a:hover {
    text-decoration: underline;
}

footer .footer {
    background-color: #fff;
    color: var(--gris-1);
    padding: 1rem 0;
}
footer .footer p {
    font-size: 0.70em;
    color: var(--gris-1);
    padding-bottom: 0px;
    margin-bottom: 0.5em;
}

@media screen and (max-width: 576px) {
    footer .pre-footer * {
        text-align: center;
    }
}


/*--------------------------------------------------------------
    Boutons
--------------------------------------------------------------*/

.form-btn {
    display: table;
    height: auto;
    padding: 4px 15px;
    color: #fff;
    background-color: var(--couleur-sec-1);
    border: none;
    border-radius: 0;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin: auto;
    text-transform: uppercase;
}
.form-btn:focus,
.form-btn:hover {
    background-color: var(--bleu-1);
    color: #fff;
    border: none;
}


/*--------------------------------------------------------------
    Logo Slider
--------------------------------------------------------------*/

#logo-slider {
    padding-top: 0;
}
#logo-slider .slick-slide {
    margin: 0px 20px;
}
#logo-slider .slick-slide img {
    width: 100%;
}
#logo-slider .slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
#logo-slider .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
#logo-slider .slick-list:focus {
    outline: none;
}
#logo-slider .slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
#logo-slider .slick-slider .slick-track,
#logo-slider .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#logo-slider .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
#logo-slider .slick-track:before,
#logo-slider .slick-track:after {
    display: table;
    content: '';
}
#logo-slider .slick-track:after {
    clear: both;
}
#logo-slider .slick-loading .slick-track {
    visibility: hidden;
}
#logo-slider .slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
#logo-slider [dir='rtl'] .slick-slide {
    float: right;
}
#logo-slider .slick-slide img {
    display: block;
}
#logo-slider .slick-slide.slick-loading img {
    display: none;
}
#logo-slider .slick-slide.dragging img {
    pointer-events: none;
}
#logo-slider .slick-initialized .slick-slide {
    display: block;
}
#logo-slider .slick-loading .slick-slide {
    visibility: hidden;
}
#logo-slider .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
#logo-slider .slick-arrow.slick-hidden {
    display: none;
}


/*--------------------------------------------------------------
    IMG
--------------------------------------------------------------*/

#amenagement img:hover,
#reference-2 img:hover,
#metiers img:hover {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}


/*--------------------------------------------------------------
    Social
--------------------------------------------------------------*/

.icon-button {
    background-color: #fff;
    border-radius: 3rem;
    cursor: pointer;
    display: inline-block;
    font-size: 1.2rem;
    height: 2rem;
    line-height: 2rem;
    margin: 0 3px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 2rem;
}
.icon-button i {
    background: none;
    color: #fff;
    height: 2rem;
    left: 0;
    line-height: 2rem;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 2rem;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
}


/*--------------------------------------------------------------
    Parallax
--------------------------------------------------------------*/

.parallax {
    position: relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.parallax .overlay {
    background-color: rgba(0, 49, 91, 0.7);
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

.parallax-noir {
    background-color: rgba(0, 0, 0, 0.3);
}
.parallax-blanc {
    background-color: rgba(255, 255, 255, 0.8);
}

@media screen and (min-width: 576px) {
    .parallax {
        background-attachment: scroll;
    }
}


/*--------------------------------------------------------------
    Back to Top
--------------------------------------------------------------*/

div.btn-back-to-top {
    background-color: var(--couleur-sec-1);
    color: #fff;
    padding: 0.5rem 1rem;
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    -webkit-transform: translateY(200%);
    transform: translateY(200%);
    border-radius: 0;
}
div.btn-back-to-top:active,
div.btn-back-to-top:focus,
div.btn-back-to-top:hover {
    background-color: var(--bleu-1);
    color: #fff;
}
div.btn-back-to-top.scrolled {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
div.btn-top span {
    color: #fff;
    font-size: 2.8em;
    font-weight: 900;
}


/*--------------------------------------------------------------
    404
--------------------------------------------------------------*/

.erreur {
    height: 450px;
    background-color: #fff;
}
.erreur .text-wrapper {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.erreur .title {
    font-size: 5em;
    font-weight: 700;
    color: var(--bleu-1);
    position: relative;
    text-align: center;
    line-height: 1.2;
}
.erreur .subtitle {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--couleur-sec-1);
    position: relative;
    text-align: center;
    line-height: 1.2;
}
.erreur .buttons {
    margin-top: 4em;
}
.erreur .buttons a.button {
    background-color: var(--couleur-sec-1);
    text-decoration: none;
    padding: 15px;
    text-transform: uppercase;
    color: #fff;
    border-radius: 26px;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.erreur .buttons a.button:hover {
    background-color: var(--bleu-1);
    color: #fff !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


/*--------------------------------------------------------------
    Youtube Background
--------------------------------------------------------------*/

body .bg_video,
html .bg_video {
    background: #fff;
    position: absolute;
    z-index: -99;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
body .bg_video .tv,
html .bg_video .tv {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: unset;
    width: 100%;
    height: 100%;
}
body .bg_video .tv .screen,
html .bg_video .tv .screen {
    position: absolute;
    top: -50%;
    left: 50% !important;
    transition: opacity 0.5s;
    transform: translate(-50%);
    height: 100%;
}
body .bg_video .tv .screen.active,
html .bg_video .tv .screen.active {
    opacity: 1;
}
body .video_thumb,
html .video_thumb {
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) {
    body .bg_video,
    html .bg_video {
        position: relative;
        height: 555px;
        ;
    }
}