@font-face 
{
  font-family: 'gilroy';
  src: url("./ressources/fonts/GilroyMedium.ttf");
}

body {
 margin: 0; padding: 0; width: 100%; height: 100%; font-family: "gilroy";  
 background: #aaa; background-image: url("ressources/baseExemple.jpg");  
 background: #fff; background-image: url(""); 
 background-size: 100%; background-repeat: no-repeat;

  cursor: url("ressources/cursor.png") 2 2, pointer;
 }
 
 ::-webkit-scrollbar {
    display: none;
 }

.sbbody { height: 100vh; width: 100%; position: absolute; top: 0; left: 2; font-family: "gilroy"}

#header-icon-part {
    position: absolute; height: 19vh; width: 9%; background-color: #fff;
}
#header-stations-part {
    position: absolute; left: 10%; height: 21vh; width: 96%;
}
#header-stations-drawer-container{
    position: absolute; left: 11.5%; height: 21vh; width: 85%; 
}
#header-stations-lineicon{
    position: absolute; left: 8.7%; height: 5vh; width: 2.5%; top: 12.2vh;
    background-image: url("ressources/lineIcon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#header-stations-drawer {
        width: 100%; height: 100%;
        background-size: 100% 100%; background-repeat: no-repeat; background-position: 50% 50%;
        left: 0; top: 0; position: absolute;
}

.stationText1{
    transform: translate(13%, 38%) rotate(-32deg);
    font-size: 1.5vh; color: #54AB43; font-weight : bold;
    text-align: left;
}
.stationText2{
    transform: translate(24%, 45%) rotate(-32deg);
    font-size: 1.2vh; color: #54AB43; font-weight : bold;
    text-align: left;
}
.stationText3{
    transform: translate(23%, 40%) rotate(-32deg);
    font-size: 1.5vh; color: #54AB43; font-weight : bold;
    text-align: left;
}
.substationText1{
    transform: translate(16%, 182%) rotate(0deg);
    font-size: 1.5vh; color: #54AB43; font-weight : bold;
    text-align: left;
}

#slider-display-part {
    position: absolute; left: 2%; top: 19.4vh; height: 73.6vh; width: 74%; background-color: #bbb;
    border-radius: 5vh; overflow: hidden;  
}
#slider_display_shadowbox {
    position: absolute; left: 2%; top: 19.4vh; height: 73.6vh; width: 74%;
    pointer-events: none; border-radius: 5vh; overflow: hidden;  
    box-shadow: rgba(30, 30, 73, 0.25) 0px 0px 15px 15px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
#slider-scroll-part {
    position: absolute; left: 5%; top: 94vh; height: 4vh; width: 68%; 
}
#info-stations-part {
    position: absolute; left: 77%; top: 23vh; height: 40vh; width: 22%;
}

#info-stations-station-name {
    position: absolute; left: 79%; top: 29.2vh; height: 5vh; width: 18%; 
    font-size: 1.65vh; color: #54AB43; text-align: center; font-weight : bold;
}
#info-stations-station-logos {
    position: absolute; left: 79%; top: 30vh; height: 14vh; width: 18%; 
    text-align: center;
}
#info-stations-station-infos {
    position: absolute;
    left: 80%;
    top: 45vh;
    height: 19.5vh;
    width: 16%;
    color: #214D74;
    text-align: justify;
}

#info-map-part {
    position: absolute;
    left: 10%;
    top: 10vh;
    height: 80vh;
    width: 80%;
    background-color: #fdd5;
    visibility: hidden;
    overflow: hidden;
    border-radius: 5vh;
    border-style: solid;
    border-color: #54AB43;
    border-width: 5px;
}
#imagemap:hover {
    transform: scale(1); user-select: none; 
}
#info-map-icon {
    position: absolute; left: 82%; top: 84vh; height: 12vh; width: 10%;
    background-image: url("ressources/seeOnMap.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#footer-icon-part {
    position: absolute; left: 93%; top: 90vh; height: 9vh; width: 6%;
}

#footer-textinfo1-part {
    position: absolute;
    left: 25%;
    top: 95vh;
    height: 5vh;
    width: 63%;
    background-image: url("ressources/textinfo1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}


#logo1-img {
    width: 100%;
    height: 100%;
    background-image: url("ressources/icon1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
#logo2-img{
        width: 100%;
        height: 100%;
        background-image: url("ressources/icon2.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
}
#infoStations-img{
        width: 100%;
        height: 110%;
        background-image: url("ressources/stationInfo.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 0%;
}

#logoStationInfo1-img{
        width: 10%; height: 100%; display: inline-block; margin: 1vh;
        background-image: url("ressources/picto/bus.png");
        background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
}
#logoStationInfo2-img{
        width: 10%; height: 100%; display: inline-block; margin: 1vh;
        background-image: url("ressources/picto/piste-cyclable.png");
        background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
}
#logoStationInfo3-img{
        width: 10%; height: 100%; display: inline-block; margin: 1vh;
        background-image: url("ressources/picto/train.png");
        background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
}
#logoStationInfo4-img{
        width: 10%; height: 100%; display: inline-block; margin: 1vh;
        background-image: url("ressources/picto/tram.png");
        background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
}
#logoStationInfo5-img{
        width: 10%; height: 100%; display: inline-block; margin: 1vh;
        background-image: url("ressources/picto/velo-parking.png");
        background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
}
#logoStationInfo6-img{
        width: 10%; height: 100%; display: inline-block; margin: 1vh;
        background-image: url("ressources/picto/lineo.png"); 
        background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
}
#logoStationInfo7-img{
        width: 10%; height: 100%; display: inline-block; margin: 1vh;
        background-image: url("ressources/picto/parking-relai.png");
        background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
}
#logoStationInfo8-img{
        width: 10%; height: 100%; display: inline-block;
        background-image: url("ressources/picto/aeroport.png"); margin: 1vh;
        background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
}
#logoStationInfo9-img{
        width: 10%; height: 100%; display: inline-block; margin: 1vh;
        background-image: url("ressources/picto/Metro.png");
        background-size: contain; background-repeat: no-repeat; background-position: 50% 50%;
}


#b2home1{
    position: absolute; left: 0%; top: 0%; height: 100vh; width: 100%;
    background-image: url("ressources/TISSEO_INTERFACE_METRO.jpg");
        background-size: 100% 100% ; background-repeat: no-repeat; background-position: 50% 50%;
}

#b2home2{
    position: absolute; left: 0%; top: 0%; height: 100vh; width: 100%;
    background-image: url("");
        background-size: 100% 100% ; background-repeat: no-repeat; background-position: 50% 50%;
}