html, body {
top: 0;
bottom: 0;
left: 0;
right: 0;
height:100%;
width:100%;
font-size: 15px;
cursor: crosshair;
user-select: none;
overflow-style: none;
scrollbar-width: none;
scroll-behavior: smooth;
color: rgba(255, 255, 255, 1.0);
background: linear-gradient(180deg, rgba(0, 0, 0, 1.0) 0%, rgba(0, 0, 0, 1.0) 100%);
font-family: "Times New Roman", Times, serif;
}

html::-webkit-scrollbar,
html::-moz-scrollbar,
html::-ms-scrollbar,
html::-o-scrollbar,
html::scrollbar {
display: none;
}

/*
======================================================================
------------------------------ PRELOADER -----------------------------
======================================================================
*/

#black-preloader {
z-index: 999999999999999;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 1.0);
}

@keyframes preload {
0% {transform:scale(0);}
50% {transform:scale(1);}
100% {transform:scale(0);}
}

/*
======================================================================
-------------------------------- LOGO --------------------------------
======================================================================
*/

#black-preloader .logo {
position: fixed;
margin-top: -200px;
margin-left: -200px;
top: 50%;
left: 50%;
height: 400px;
width: 400px;
pointer-events: none;
filter: grayscale(0%);
animation: preload 2s ease-in-out infinite;
}

/*
======================================================================
---------------------------- LINK BOX --------------------------------
======================================================================
*/

.link-box {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: none;
}

.link-box iframe {
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
border: none;
overflow-y: scroll;
}

/*
======================================================================
-------------------------- CREDITS PROTECT ---------------------------
======================================================================
*/

.credits-protect {
z-index: 100000000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: none;
background: rgba(0, 0, 0, 0.5);
}

/*
======================================================================
---------------------------- TOP CREDITS -----------------------------
======================================================================
*/

.topcredits {
z-index: 400000000;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
line-height: 50px;
text-align: center;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border-bottom: solid 1px rgba(255, 255, 255, 1.0);
transition: all 0.5s ease-in-out;
}

.topcredits:hover {
height: 60px;
line-height: 60px;
}

/*
======================================================================
-------------------------- BOTTOM CREDITS ----------------------------
======================================================================
*/

.bottomcredits {
z-index: 400000000;
position: fixed;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
line-height: 50px;
text-align: center;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
border-top: solid 1px rgba(255, 255, 255, 1.0);
transition: all 0.5s ease-in-out;
}

.bottomcredits:hover {
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.0);
}

/*
======================================================================
--------------------------- CLOSE CREDITS ----------------------------
======================================================================
*/

.close-credits {
z-index: 600000000;
position: fixed;
bottom: 50px;
left: 50%;
height: 40px;
width: 100px;
line-height: 40px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 1.0);
border-top: solid 1px rgba(255, 255, 255, 1.0);
transform: translateX(-50%);
transition: all 0.5s ease-in-out;
}

.close-credits:hover {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
bottom: 0px;
height: 90px;
width: 100%;
line-height: 90px;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
}

/*
======================================================================
------------------------------ LANDING -------------------------------
======================================================================
*/

.top-landing {
z-index: 200000000;
position: fixed;
top: 50%;
left: 50%;
font-size: 30px;
text-align: center;
text-transform: uppercase;
border-radius: 0;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.0);
border: solid 1px rgba(255, 255, 255, 0.0);
transform: translateX(-50%) translateY(-50%);
transition: all 0.5s ease-in-out;
}

.bottom-landing {
z-index: 200000000;
position: fixed;
margin-top : 20px;
top: 50%;
left: 50%;
font-size: 15px;
text-align: center;
text-transform: uppercase;
border-radius: 0;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.0);
border: solid 1px rgba(255, 255, 255, 0.0);
transform: translateX(-50%);
transition: all 0.5s ease-in-out;
}

.top-landing:hover,
.middle-landing:hover,
.bottom-landing:hover {
color: rgba(255, 255, 255, 0.5);
}

/*
========================================================================
----------------------------- PUBLIC AUDIO -----------------------------
========================================================================
*/

.public-audio .cover {
z-index: 7000;
position: fixed;
bottom: 30px;
right: 70px;
width: 40px;
height: 40px;
opacity: 1.0;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 0;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
transition: all 0.5s ease-in-out;
}

.public-audio .open {
z-index: 7000;
position: fixed;
bottom: 30px;
right: 70px;
width: 40px;
height: 40px;
opacity: 0.0;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 0;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
transition: all 0.5s ease-in-out;
}

.public-audio:hover .cover {opacity: 0.0;}
.public-audio:hover .open {opacity: 1.0;}

/*
======================================================================
------------------------------ ALERTING ------------------------------
======================================================================
*/

.alerting {
z-index: 500000000;
position: fixed;
padding-top: 10px;
padding-bottom: 10px;
top: 0;
left: 0;
width: 100%;
text-align: center;
color: rgba(255, 255, 255, 1.0);
background: rgba(160, 0, 0, 0.5);
border-bottom: none;
transition: all 0.5s ease-in-out;
}

.alerting:hover {
padding-top: 20px;
padding-bottom: 20px;
color: rgba(255, 255, 255, 1.0);
background: rgba(160, 0, 160, 0.5);
}

/*
======================================================================
-------------------------- BLACK NUMBERS -----------------------------
======================================================================
*/

.black-zero {
z-index: 7000;
position: fixed;
bottom: 30px;
left: 50%;
width: 190px;
height: 40px;
cursor: pointer;
line-height: 40px;
text-align: center;
text-transform: uppercase;
border-radius: 10px;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
border: solid 1px rgba(255, 255, 255, 1.0);
transform: translateX(-50%);
transition: all 0.5s ease-in-out;
}

.black-one {
z-index: 7000;
position: fixed;
margin-right: 55px;
bottom: 30px;
right: 50%;
width: 40px;
height: 40px;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 10px;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
border: solid 1px rgba(255, 255, 255, 1.0);
transition: all 0.5s ease-in-out;
}

.black-two {
z-index: 7000;
position: fixed;
margin-right: 5px;
bottom: 30px;
right: 50%;
width: 40px;
height: 40px;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 10px;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
border: solid 1px rgba(255, 255, 255, 1.0);
transition: all 0.5s ease-in-out;
}

.black-three {
z-index: 7000;
position: fixed;
margin-left: 5px;
bottom: 30px;
left: 50%;
width: 40px;
height: 40px;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 10px;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
border: solid 1px rgba(255, 255, 255, 1.0);
transition: all 0.5s ease-in-out;
}

.black-four {
z-index: 7000;
position: fixed;
margin-left: 55px;
bottom: 30px;
left: 50%;
width: 40px;
height: 40px;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 10px;
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
border: solid 1px rgba(255, 255, 255, 1.0);
transition: all 0.5s ease-in-out;
}

.black-zero:hover,
.black-one:hover,
.black-two:hover,
.black-three:hover,
.black-four:hover {
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
}

/*
======================================================================
-------------------------- WHITE NUMBERS -----------------------------
======================================================================
*/

.white-one {
z-index: 7000;
position: fixed;
margin-right: 30px;
bottom: 80px;
right: 50%;
width: 40px;
height: 40px;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 10px;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
transition: all 0.5s ease-in-out;
}

.white-two {
z-index: 7000;
position: fixed;
bottom: 80px;
left: 50%;
width: 40px;
height: 40px;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 10px;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
transform: translateX(-50%);
transition: all 0.5s ease-in-out;
}

.white-three {
z-index: 999999;
position: fixed;
margin-left: 30px;
bottom: 80px;
left: 50%;
width: 40px;
height: 40px;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 10px;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
transition: all 0.5s ease-in-out;
}

.white-one:hover,
.white-two:hover,
.white-three:hover {
color: rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 0.5);
border: solid 1px rgba(255, 255, 255, 1.0);
}

/*
========================================================================
---------------------------- MEMBRES AUDIO -----------------------------
========================================================================
*/

.membres-audio .cover {
z-index: 999999;
position: fixed;
bottom: 80px;
right: 120px;
width: 40px;
height: 40px;
opacity: 1.0;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 0;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
transition: all 0.5s ease-in-out;
}

.membres-audio .open {
z-index: 999999;
position: fixed;
bottom: 80px;
right: 120px;
width: 40px;
height: 40px;
opacity: 0.0;
cursor: pointer;
line-height: 40px;
text-align: center;
border-radius: 0;
color: rgba(0, 0, 0, 1.0);
background: rgba(255, 255, 255, 0.5);
border: solid 1px rgba(0, 0, 0, 1.0);
transition: all 0.5s ease-in-out;
}

.membres-audio:hover .cover {opacity: 0.0;}
.membres-audio:hover .open {opacity: 1.0;}

/*
======================================================================
--------------------------------- AOS --------------------------------
======================================================================
*/

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/

.black-section {
z-index: 1;
position: relative;
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
background: rgba(0, 0, 0, 1.0);
filter: grayscale(0%);
}

.white-section {
z-index: 1;
position: relative;
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
background: rgba(255, 255, 255, 1.0);
filter: grayscale(0%);
}

.invert-section {
z-index: 1;
position: relative;
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
background: rgba(255, 255, 255, 1.0);
filter: grayscale(0%) invert(100%) contrast(100%);
}

.dark-section {
z-index: 1;
position: relative;
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
background: rgba(0, 0, 0, 0.5);
filter: grayscale(100%);
}

.bright-section {
z-index: 1;
position: relative;
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
background: rgba(255, 255, 255, 0.5);
filter: grayscale(100%);
}

.blank-section {
z-index: 1;
position: relative;
padding-top: 60px;
padding-bottom: 60px;
overflow: hidden;
background: rgba(0, 0, 0, 0.0);
filter: grayscale(0%);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/

.hero {
display: flex;
width: 100%;
height: 100vh;
position: relative;
align-items: center;
}

.hero .container {
z-index: 3;
position: relative;
}

.hero h1 {
margin-bottom: 10px;
font-size: 50px;
text-align: center;
text-transform: uppercase;
transition: all 0.5s ease-in-out;
}

.hero h2 {
font-size: 25px;
text-align: center;
text-transform: uppercase;
transition: all 0.5s ease-in-out;
}

.hero span {
margin-bottom: 5px;
font-size: 15px;
text-align: center;
text-transform: uppercase;
transition: all 0.5s ease-in-out;
}

.hero h1:hover,
.hero h2:hover,
.hero span:hover {
color: rgba(255, 255, 255, 0.5);
}

/*--------------------------------------------------------------
# Postulations Section
--------------------------------------------------------------*/

.postulations {
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
border: solid 1px rgba(0, 0, 0, 1.0);
background: rgba(0, 0, 0, 1.0);
filter: grayscale(0%) contrast(100%);
transition: all 0.5s ease-in-out;
}

/*--------------------------------------------------------------
# Expositions Section
--------------------------------------------------------------*/

.expositions {
padding-top: 30px;
padding-bottom: 30px;
padding-left: 40px;
padding-right: 40px;
border: solid 1px rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
filter: grayscale(0%) contrast(100%);
transition: all 0.5s ease-in-out;
}

/*--------------------------------------------------------------
# XXXXXXXXXXMessage Section
--------------------------------------------------------------*/

.XXXXXXXXXXmessage {
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
border: solid 1px rgba(0, 0, 0, 1.0);
background: rgba(0, 0, 0, 1.0);
filter: grayscale(0%) contrast(100%);
transition: all 0.5s ease-in-out;
}

/*--------------------------------------------------------------
# Formulaire Section
--------------------------------------------------------------*/

.formulaire iframe {
height: 600px;
width: 100%;
border: none;
}

/*--------------------------------------------------------------
# Personnes Section
--------------------------------------------------------------*/

#personnes .slider-contenu {
height: 100%;
width: 100%;
padding: 20px 0;
overflow-x: auto;
align-items: center;
justify-content: center;
}

#personnes .slider-contenu::-webkit-scrollbar {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.5);
}

#personnes .slider-contenu::-webkit-scrollbar-thumb {
cursor: pointer;
background: rgba(255, 255, 255, 1.0);
}

#personnes .image-box-holder {
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
}

#personnes .image-box {
position: relative;
display: flex;
margin: 0 10px;
width: 300px;
height: 300px;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 0;
border: solid 1px rgba(255, 255, 255, 1.0);
background: rgba(0, 0, 0, 1.0);
transition: all 0.5s ease-in-out;
}

#personnes .image-box:hover {
background: rgba(0, 0, 0, 1.0);
}

#personnes .image-box img {
position: relative;
height: 100%;
width: 100%;
pointer-events: none;
opacity: 1.0;
transform: scale(1.0);
filter: grayscale(100%) contrast(120%);
transition: all 0.5s ease-in-out;
}

#personnes .image-box:hover img {
opacity: 0.5;
transform: scale(1.20);
filter: grayscale(100%) contrast(50%);
}

#personnes .image-box .title {
position: absolute;
bottom: 50%;
left: 50%;
font-size: 20px;
text-align: center;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.0);
transform: translateX(-50%);
transition: all 0.5s ease-in-out;
}

#personnes .image-box:hover .title {
color: rgba(255, 255, 255, 1.0);
}

#personnes .image-box .subtitle {
position: absolute;
top: 50%;
left: 50%;
font-size: 16px;
transform: translateX(-50%);
color: rgba(0, 0, 0, 0.0);
transition: all 0.5s ease-in-out;
}

#personnes .image-box:hover .subtitle {
color: rgba(255, 255, 255, 1.0);
}

#personnes .image-box .middle-span {
position: absolute;
bottom: 15px;
left: 50%;
cursor: pointer;
font-size: 20px;
transform: translateX(-50%);
color: rgba(0, 0, 0, 0.0);
transition: all 0.5s ease-in-out;
}

#personnes .image-box:hover .middle-span {
color: rgba(255, 255, 255, 1.0);
}

#personnes .image-box .middle-span:hover {
bottom: 10px;
font-size: 30px;
}

#personnes .image-box .left-span {
position: absolute;
margin-right: 10px;
bottom: 15px;
right: 50%;
cursor: pointer;
font-size: 20px;
color: rgba(0, 0, 0, 0.0);
transition: all 0.5s ease-in-out;
}

#personnes .image-box:hover .left-span {
color: rgba(255, 255, 255, 1.0);
}

#personnes .image-box .left-span:hover {
margin-right: 5px;
bottom: 10px;
font-size: 30px;
}

#personnes .image-box .right-span {
position: absolute;
margin-left: 10px;
bottom: 15px;
left: 50%;
cursor: pointer;
font-size: 20px;
color: rgba(0, 0, 0, 0.0);
transition: all 0.5s ease-in-out;
}

#personnes .image-box:hover .right-span {
color: rgba(255, 255, 255, 1.0);
}

#personnes .image-box .right-span:hover {
margin-left: 5px;
bottom: 10px;
font-size: 30px;
}

/*--------------------------------------------------------------
# Marques Section
--------------------------------------------------------------*/

#marques .slider-contenu {
height: 100%;
width: 100%;
padding: 20px 0;
overflow-x: auto;
align-items: center;
justify-content: center;
}

#marques .slider-contenu::-webkit-scrollbar {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.5);
}

#marques .slider-contenu::-webkit-scrollbar-thumb {
cursor: pointer;
background: rgba(255, 255, 255, 1.0);
}

#marques .image-box-holder {
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
}

#marques .image-box {
position: relative;
margin: 0 10px;
width: 300px;
height: 300px;
display: flex;
overflow: hidden;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 0;
background: rgba(0, 0, 0, 0.0);
transition: all 0.5s ease-in-out;
}

#marques .image-box:hover {
background: rgba(0, 0, 0, 0.0);
}

#marques .image-box img {
position: relative;
max-height: 100%;
max-width: 100%;
pointer-events: none;
opacity: 1.0;
transform: scale(1.0);
filter: grayscale(100%) contrast(100%);
transition: all 0.5s ease-in-out;
}

#marques .image-box:hover img {
opacity: 0.5;
transform: scale(1.20);
}

#marques .image-box .title {
position: absolute;
bottom: 50%;
left: 50%;
font-size: 20px;
text-align: center;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.0);
transform: translateX(-50%);
transition: all 0.5s ease-in-out;
}

#marques .image-box:hover .title {
color: rgba(255, 255, 255, 1.0);
}

#marques .image-box .subtitle {
position: absolute;
top: 50%;
left: 50%;
font-size: 16px;
transform: translateX(-50%);
color: rgba(0, 0, 0, 0.0);
transition: all 0.5s ease-in-out;
}

#marques .image-box:hover .subtitle {
color: rgba(255, 255, 255, 1.0);
}

#marques .image-box .middle-span {
position: absolute;
bottom: 15px;
left: 50%;
cursor: pointer;
font-size: 20px;
transform: translateX(-50%);
color: rgba(0, 0, 0, 0.0);
transition: all 0.5s ease-in-out;
}

#marques .image-box:hover .middle-span {
color: rgba(255, 255, 255, 1.0);
}

#marques .image-box .middle-span:hover {
bottom: 10px;
font-size: 30px;
}

#marques .image-box .left-span {
position: absolute;
margin-right: 10px;
bottom: 15px;
right: 50%;
cursor: pointer;
font-size: 20px;
color: rgba(0, 0, 0, 0.0);
transition: all 0.5s ease-in-out;
}

#marques .image-box:hover .left-span {
color: rgba(255, 255, 255, 1.0);
}

#marques .image-box .left-span:hover {
margin-right: 5px;
bottom: 10px;
font-size: 30px;
}

#marques .image-box .right-span {
position: absolute;
margin-left: 10px;
bottom: 15px;
left: 50%;
cursor: pointer;
font-size: 20px;
color: rgba(0, 0, 0, 0.0);
transition: all 0.5s ease-in-out;
}

#marques .image-box:hover .right-span {
color: rgba(255, 255, 255, 1.0);
}

#marques .image-box .right-span:hover {
margin-left: 5px;
bottom: 10px;
font-size: 30px;
}

/*--------------------------------------------------------------
# Activités Section
--------------------------------------------------------------*/

.activites script {
height: 600px;
width: 100%;
border: none;
}

/*
======================================================================
------------------------------- VIDEO --------------------------------
======================================================================
*/

.video-box {
z-index: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.video-box video {
-webkit-z-index: -10000;
-moz-z-index: -10000;
-ms-z-index: -10000;
-o-z-index: -10000;
z-index: -10000;
-webkit-position: fixed;
-moz-position: fixed;
-ms-position: fixed;
-o-position: fixed;
position: fixed;
-webkit-top: 50%;
-moz-top: 50%;
-ms-top: 50%;
-o-top: 50%;
top: 50%;
-webkit-left: 50%;
-moz-left: 50%;
-ms-left: 50%;
-o-left: 50%;
left: 50%;
-webkit-height: auto;
-moz-height: auto;
-ms-height: auto;
-o-height: auto;
height: auto;
-webkit-width: auto;
-moz-width: auto;
-ms-width: auto;
-o-width : auto;
width: auto;
-webkit-min-height: 100%;
-moz-min-height: 100%;
-ms-min-height: 100%;
-o-min-height: 100%;
min-height: 100%;
-webkit-min-width: 100%;
-moz-min-width: 100%;
-ms-min-width: 100%;
-o-min-width: 100%;
min-width: 100%;
-webkit-pointer-events: none;
-moz-pointer-events: none;
-ms-pointer-events: none;
-o-pointer-events: none;
pointer-events: none;
-webkit-filter: grayscale(100%) contrast(100%) brightness(50%);
-moz-filter: grayscale(100%) contrast(100%) brightness(50%);
-ms-filter: grayscale(100%) contrast(100%) brightness(50%);
-o-filter: grayscale(100%) contrast(100%) brightness(50%);
filter: grayscale(100) contrast(100%) brightness(50%);
-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%);
}

/*
======================================================================
-------------------- VIDEO OVERLAY AND UNDERLAY ----------------------
======================================================================
*/

.video-underlay {
z-index: -15000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: none;
background: rgba(0, 0, 0, 1.0);
}