@import "./animation.css";

:root{
    --background-nav: rgba(125,125,125,0.5);
    /*--background-nav: #8a887c;*/
    /* --background-nav: #8a887c00; */
    --pink-narbonne : #e81988;
    --orange-lclr : rgb(241, 142, 0);
    --blue-lclr : rgb(0, 90, 187);
}

body{
    width: 1080px;
    height: 1920px;
    overflow: hidden;
    background: grey;
    margin: 0;
}
#inlineBody{
	width: 380px;
    height: 670px;
}
.imageContainer{
    height: 1550px;
    overflow: hidden;
}

.image{
    position: absolute;
    top:0;
    left:0;
    z-index: 0;
}

.touchShow{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100000;
}

.hide{
    visibility: hidden ;
}

canvas{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.inlineContainer{
	width: 380px !important;
    height: 670px !important;
    position: relative;
    margin: auto;
    background-size: contain;
}
#container{
    background-image: url(../images/home/fond_temp.jpg);
    width: 1080px;
    height: 1920px;
    position: relative;
    margin: auto;
    background-size: contain;
}
.page_container{
    position: absolute;
    top: 0;
    left: 0;
    width: 1080px;
    /*height: 1560px;*/
    height: 1920px;
}
#home_container{
    position: unset;
}

#spinner_container{
    font-family: monospace;

    display: flex;
    font-size: 9em;
    flex-direction: column;
    font-weight: 600;
    z-index: 10;
    color: rgb(0, 255, 20);
    text-align: center;
    text-align: center;
    width: 100%;
    height: 1920px;
    font-size: 5em;
    justify-content: center;
    background-color: black;
}
.video{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.videoPromo{
    z-index: 100000000;
}
.width100{
    width: 100%;
}

#spinner_text{
margin-bottom: 2em !important;
}
#spinner_container p{
    margin:0;
    padding: 0;
}
.onTouch{
    background-color: rgba(255, 255, 255, 0.5);
}