/* Body*/

body {

    background-color: rgb(0, 0, 0) !important;

}



#admin {

    background-color: rgb(255, 255, 255) !important;

}



.userBackGround {

    width: 100%;

    height:auto;

    background-attachment: fixed;

    background-repeat: no-repeat;

    background-size: cover;

}



#play {

    background-image: url(https://www.youtube.com);

}





#vid {

    position: absolute; right: 0; bottom: 0; top: 0;

    min-width: 100%; min-height: 100%;

    width: 100%; height: auto; z-index: 1;

    background: url(Output.mp4);

    background-size: cover;

    margin-bottom: -10%;

  }





/* Materialize */



/** Font **/



@font-face {

    font-family: Courier;

    src: url('../fonts/agency-fb.ttf');

}



@font-face {

    font-family: Courier;

    font-weight: bold;

    src: url('../fonts/agency-fb-bold.ttf');

}



p {

    font-family: Agency, sans-serif;

    min-width: 100%;

}



ul {

    font-family: Agency, sans-serif;

    font-weight: 0;

    margin: 0 !important;

    list-style-type: square !important;

    list-style-position: inside !important;

}



span {

    font-weight: bold;

}



.navbar {

    background-color: rgb(1, 101, 216);

    height: 60px;

}



/** Parallax **/



.logo {

    position: absolute;

    height: 100%;

    width: 100%;

    z-index: 1;

}



/* Materialize override */

.row {

    margin-bottom: 0 !important;

}



/* Icones contact/reseaux sociaux */



a {

    color: black !important;

}



a:hover {

    text-decoration: none !important;

}



#logoPrice {

    position: absolute;

    z-index: 5;

    width: 6.5%;

    height: 14.8%;

    margin-left: 0.9%;

    margin-top: 0.8%;

}



#logoPrice2 {

    position: absolute;

    z-index: 5;

    width: 7.2%;

    height: 14.8%;

    margin-left: 9%;

    margin-top: 0.7%;

}



.contactIcons {

    position: absolute;

    height: 5%;

    width: 2%;

    left: 91%;

    top: 1%;

    margin-top: 1%;

    

}



.contactIcons2 {

    position: absolute;

    height: 5%;

    width: 2%;

    left: 94%;

    top: 1%;

    margin-top: 1%;

   

}



.contactIcons3 {

    position: absolute;

    height: 5%;

    width: 2%;

    left: 97%;

    top: 1%;

    margin-top: 1%;

    

}



.contactIcons4 {

    position: absolute;

    height: 5%;

    width: 2%;

    left: 88%;

    top: 1%;

    margin-top: 1%;

  

}



.contactIcons5 {

    position: absolute;

    height: 5%;

    width: 2%;

    left: 85%;

    top: 1%;

    margin-top: 1%;

   



}



.icons {

    position: absolute;

    height: auto;

    width: 100%;

    margin-top: 1%;

    left: 10%;

    top: 1%;

    z-index: 3;

}



#allIcons {

    z-index: 4;

}



#champ {

    margin-left: 20%;

}



/** Titres **/



h1 {

    display: none;

}



/*** Composite image ***/



.navbar.fixed-top {

    position: absolute;

    height: auto;

    width: 100%;

}



.multi_bg {

    position: relative;

    height: auto;

    width: 100% !important;

    

    background-size: cover;

    background-position: top;

}



#headerBridge {

    z-index: 2 !important;

    

}



.bg_bridge {

    height: auto;

    width: 100%;

background-attachment: fixed;

}



.row.first {

    justify-content: space-between;

}



.bp_logo {

    position: absolute;

    height: auto !important;

    width: 27% !important;

    align-self: flex-end;

    left: 70%;

    top: 69%;

}

#allLogo {

    z-index: 3 !important;



}



.col-3.header_cable {

    padding-right: 0;

    z-index: 2;

}



.col-3.header_bush {

    padding-right: 0;

}



#headerCable {

    height: auto;

    width: 100%;

    

}



#headerBush {

    height: auto;

    width: 100%;

}



#logoBp {

    position: static;

    margin-left: 75%;

    width: 25%;

    z-index: 2;

}



@keyframes loop {

    from { transform: translateX(0); }

    to { transform: translateX(-30%); }

  }



/** Quick links **/



text {

    font-family: Agency, Helvetica, sans-serif;

    font-size: 6px;

}



.svgQuick,

.quickLinks {

    position: absolute;

    left: 71%;

    top: 90%;

    width: 29%;

    height: auto;

    font-weight: bold;

}



.quickText {

    fill: rgb(280, 280, 280);

}



.quickText:hover {

    fill: rgb(230, 145, 35);

}



/** Section 2 - Story - **/



#story {

    position: relative;

    height: auto;

    width: 100%;

    padding: 0px;

    margin-top: 0%;

    background-color: black;

}



.storyCont {

    position: absolute;

}



.storyBgTop {

    position: absolute;

    height: auto;

    width: 100%;

    top: -1.7%;

    left: 0%;

    min-width: 60%;

}



.storyBgBot {

    position: absolute;

    height: auto;

    width: 100%;

    top: 0%;

    left: 0;

}



.storyRow {

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    padding-top: 4%;

    padding-bottom: 4.5%;

}



.vertical-align {

    min-height: 100%;

    min-height: 100vh;

    display: flex;

    align-items: center;

}



.storyText {

    position: static;

    display: flex;

    text-align: center;

    color: rgb(220, 220, 220);

    font-weight: 0;

    font-size: 20px;

    margin-top: 2vh;

    min-width: 100px;

}



.storyText2 {

    position: relative;

    display: flex;

    text-align: center;

    color: rgb(140, 140, 140);

    font-weight: 0;

    font-size: 1.2vw;

    margin-top: 2vh;

}



#storyTitle {

    position: absolute;

    height: auto;

    width: 2%;

    top: 25%;

    left: 2%;

    animation-duration: 5s;

    animation-name: glissement1;

}



#storyChar {

    position: absolute;

    height: auto;

    width: 4%;

    top: 17%;

    left: 93%;

}



/** - Widget steam - **/



.center {

    margin: auto;

    max-width: 646px;

}



#widget {

    position: relative;

    height: auto;

    width: 100%;

    padding-top: 14px;

    margin-top: 0%;

    background-color: #282e39;

    z-index: 100;

}



.container-fluid.widget {

    height: 168px;

}



.widgetIframe {

    height: 188px;

    width: 646px;

}



/** Section 3 - Media - **/



#medias {

    position: relative;

    height: auto;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    z-index: 1;

    overflow: hidden;

    

}



.mediasCont {

    position: relative;

    padding-bottom: 40%;

    height: auto;

}



#mediasTitle {

    position: absolute;

    height: auto;

    width: 2%;

    bottom: 39%;

    left: 2%;

}

/*/////////////////////////////////////////////////////*/

.videoCont {

    position: absolute;

    left: 26%;

    top: 17%;

    width: 43vw !important;

    object-fit: cover;



}



.slider {

    height: 49vh !important;



}



#precedent,

#suivant {

    cursor: pointer;

    transition: opacity 0.3s ease;

    opacity: 0;

    position: absolute;

    font-size: 100px;

    color: rgba(220, 220, 220, 0.8);

    background-color: rgba(0, 0, 0, 0.8);

    padding: 10px;

}



#precedent {

    left: 0;

}



#suivant {

    right: 0;

}



#slider:hover #precedent,

#slider:hover #suivant {

    opacity: 1;

}



.slides {

    height: 45vh !important;

}



.mediasVids {

    position: absolute;

    height: auto;

    width: 60%;

    left: 10%;

    margin-top: 27%;

}



.mediasVids:hover {

    transition: transform .2s;

    transform: scale(1.1);

    z-index: 2;

}



.mediasVids2 {

    position: absolute;

    height: auto;

    width: 60%;

    left: 10%;

    margin-top: 68%;

}



.mediasVids2:hover {

    transition: transform .2s;

    transform: scale(1.1);

    z-index: 2;

}



.mediasVids3 {

    position: absolute;

    height: auto;

    width: 60%;

    margin-top: 68%;

    left: 30%;

}



.mediasVids3:hover {

    transition: transform .2s;

    transform: scale(1.1);

    z-index: 2;

}



.mediasVids4 {

    position: absolute;

    height: auto;

    width: 60%;

    left: 30%;

    margin-top: 27%;

}



.mediasVids4:hover {

    transition: transform .2s;

    transform: scale(1.1);

    z-index: 2;

}



/** Medias parallax **/



.block {

    width: 100%;

    height: 100%;

    position: absolute;

    overflow: hidden;

    left: 0;

}



.img-parallax {

    width: 100vmax;

    z-index: -2;

    position: absolute;

    bottom: 0 !important;

    left: 50%;

    transform: translate(-50%, 0);

    pointer-events: none

}



/** Separator **/



.container-fluid.separator {

    padding: 0px;

}



.separator {

    position: absolute;

    height: auto;

    width: 100%;

    top: 98.2%;

}



.separator2 {

    position: absolute;

    height: auto;

    width: 100%;

    top: -36%;

    left: 0;

}



/** Section 4 - Gameplay - **/



#gameplay {

    position: inherit;

    z-index: 0;

    background-color: rgb(33, 33, 33);

    color: rgb(210, 210, 210);

    padding-top: 2.8%;

    padding-bottom: 3.8%;

    height: auto;

    width: 100%;

}



.gameplayCont,

.gameplayRow {

    position: relative;

    justify-content: center;

    z-index: 5;

}



#gameplayTitle {

    position: absolute;

    height: auto;

    width: 2%;

    top: 44%;

    left: 2%;

}



.gameplayCol {

    margin-right: 100%;

}



.gameplayCol2 {

    margin-left: 1%;

}



.lead {

    display: flexbox !important;

}



.lead2 {

    display: flexbox;

    margin-bottom: 0 !important;

    padding-bottom: 4%;

    margin-top: 3%;

}



.lead3 {

    display: flexbox;

    margin-bottom: 0 !important;

    margin-top: 3%;

    padding-bottom: 4%;

}



.gameplayBgTop {

    position: absolute;

    height: auto;

    width: 100%;

    bottom: -28%;

    z-index: 2;

}



.gameplayBgBot {

    position: absolute;

    height: auto;

    width: 100%;

    z-index: 2;

    margin-left: -0.9%;

    margin-bottom: 0% !important;

}



#gameplayBorder{

    margin-top: -0.1% !important;

    width: 100%;

    position: absolute;

    height: auto;

    margin-left: -0.9%;

}



.gifSize {

    width: 100%;

    height:auto;

    background-attachment: fixed;

    min-width: auto !important;

    max-width: 100% !important;

    max-height: 100%;

}



/** slider **/



.custom-slider {

    display: none;

    margin: auto !important;

    height: 50vh !important;

    width: 100%;

}



.slide-container {



    width: 100%;

    height: 60vh;

    position: absolute;

  

}



.slide-container>.prev,

.next {

    cursor: pointer;

    position: absolute;

    top: 40%;

    transform: translateY(-50%);

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: white;

    font-size: 30px;

    background-color: #b6b5b5;

    transition: background-color 0.6s ease;

}



.prev {

    left: -100px;

    margin-top: -17.8%;

}



.next {

    right: -100px;

    margin-top: -17.8%;

}



.prev:hover,

.next:hover {

    background-color: rgba(255, 255, 255, 0.5);

}



.slide-index {

    color: #ffffff;

    font-size: 13px;

    padding: 15px;

    position: absolute;

    top: 0;

}



.slide-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

}



.slide-dot {

    text-align: center;

}



.dot {

    cursor: pointer;

    height: 10px;

    width: 10px;

    margin: 0 2px;

    background-color: #646464;

    border-radius: 50%;

    display: inline-block;

    transition: background-color 0.8s ease;

}



.active,

.dot:hover {

    background-color: #ffffff;

}

/*/////////////////////////////////////////////////////*/

@media screen and ( max-width: 1300px){

    #medias {

        width: 100%;



    }

}



/** responsive gif **/



@media (min-width: 70em) {

    .wrap {

        display: table;

        table-layout: fixed;

        width: 100%;

    }



    .wrap>* {

        display: table-cell;

        table-layout: fixed;

    }



    .wrap> :first-child {

        width: 70%;

    }

}



/** Section 5 - Studio - **/



.studioRow {

    position: relative;

    padding-top: 5%;

    padding-bottom: 3%;

}



#studio {

    position: relative;

}



.studioP {

    position: relative;

    font-size: 1.15vw ;

    font-weight: 00 !important;

    margin-bottom: 4% !important;

    color: rgb(210, 210, 210);

    text-align: justify;

}



.studioP2 {

    position: relative;

    margin-top: 1%;

    font-size: 1.15vw;

    font-weight: 00 !important;

    margin-bottom: 5% !important;

    color: rgb(210, 210, 210);

    text-align: justify;

}



#studioTitle {

    position: absolute;

    width: 2%;

    top: 31%;

    left: 2%;

}



.studioImg {

    position: relative;

    float: right;

    height: auto;

    width: 11%;

    margin-top: -4%;

    margin-right: 4%;

    margin-left: 4%;

    display: block;

}



.studioBgBot {

    position: absolute;

    height: auto;

    width: 100%;

    top: 97%;

}



/************************ Footer ***************************/

/** Footer Icons **/



#footer {

    color: rgb(110, 110, 110);

    background-color: black;

    position: relative;

}



.footerContact {

    display: flex;

    justify-content: center;

}



.footerIcon {

    position: absolute;

    height: auto;

    width: 100%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.footerIcon:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



.footerIcon2 {

    position: absolute;

    height: auto;

    width: 100%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.footerIcon2:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



.footerIcon3 {

    position: absolute;

    height: auto;

    width: 100%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.footerIcon3:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



.footerIcon4 {

    position: absolute;

    height: auto;

    width: 100%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.footerIcon4:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



.footerIcon5 {

    position: absolute;

    height: auto;

    width: 100%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.footerIcon5:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



.contactLink {

    position: absolute;

    height: 9%;

    width: 2%;

    margin-top: 1%;

    left: 49%;

}



.contactLink2 {

    position: absolute;

    height: 9%;

    width: 2%;

    margin-top: 1%;

    left: 52%;

}



.contactLink3 {

    position: absolute;

    height: 9%;

    width: 2%;

    margin-top: 1%;

    left: 55%;

}



.contactLink4 {

    position: absolute;

    height: 9%;

    width: 2%;

    margin-top: 1%;

    left: 46%;

}



.contactLink5 {

    position: absolute;

    height: 9%;

    width: 2%;

    margin-top: 1%;

    left: 43%;

}



/** Footer Middleware **/



.footerMiddleware {

    display: flex;

    justify-content: center;

    align-items: center;

}



.middlewareLink {

    position: absolute;

    height: 18%;

    width: 5%;

    margin-top: 4%;

    left: 33%;

}



.middlewareLink2 {

    position: absolute;

    height: 27%;

    width: 10%;

    margin-top: 4%;

    left: 44%;

}



.middlewareLink4 {

    position: absolute;

    height: 15%;

    width: 8%;

    margin-top: 4%;

    left: 59%;

}



.MiddlewareIcon {

    position: absolute;

    height: auto;

    width: 100%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.MiddlewareIcon:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



.MiddlewareIcon2 {

    position: absolute;

    height: auto;

    width: 100%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.MiddlewareIcon2:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



.MiddlewareIcon3 {

    position: absolute;

    height: auto;

    width: 100%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.MiddlewareIcon3:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



.MiddlewareIcon4 {

    position: absolute;

    height: auto;

    width: 100%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.MiddlewareIcon4:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



/** Footer Elsware Experience **/



.elswareExperience {

    display: flex;

    justify-content: center;

    align-items: center;

    height: auto;

    width: auto;

}



.elswareLogo {

    position: absolute;

    width: 24vw;

    margin-top: 10%;

    left: 38%;

    filter: brightness(0.75);

    -webkit-filter: brightness(0.75);

    -moz-filter: brightness(0.75);

    -o-filter: brightness(0.75);

    -ms-filter: brightness(0.75);

    transition: 0.6s ease-out;

}



.elswareLogo:hover {

    filter: brightness(1.5);

    -webkit-filter: brightness(1.5);

    -moz-filter: brightness(1.5);

    -o-filter: brightness(1.5);

    -ms-filter: brightness(1.5);

}



.elswareLegals {

    margin-top: 16%;

    font-size: 0.9vw;

    color: rgb(110, 110, 110);

}



/********** Responsive **********/



@media screen and (min-width:1514px) {

    .multi_bg {

        background-image: url(../img/Header_Background_2750.png);

    }



    .gameplayBgBot {

        bottom: -8%;

    }

}



@media screen and (min-width: 420px) and (max-width: 1500px) {

    .multi_bg {

        background-image: url(../img/Header_Background_1080.png);

    }

}



@media screen and (max-width: 375px) {

    .multi_bg {

        background-image: url(../img/Header_Background_420.png);

    }



    .gameplayBgBot {

        bottom: -18%;

    }



    .storyBgTop {

        top: -3%;

    }

}



@media screen and (min-width: 375px) and (max-width: 414px) {

    .multi_bg {

        background-image: url(../img/Header_Background_420.png);

    }



    .storyBgTop {

        top: -3%;

    }

}



/********** form **********/



#formulaire {

    border: solid black 2px;

    border-radius: 10px;

    margin: 0 auto;

    width: 60%;

    margin-top: 100px;

    padding: 2%;

}



.th {

    height: 60px;

    margin-top: 20px;

}



@media screen and (max-width: 991px) {

    #formulaire {

        width: 80%;

        height: auto;

        margin-top: 25%;

    }

}