main{
    height: 100%;
}

.affichage-heure{
    position: absolute;
    background-color: #ddd;
    border-radius: 10px;
    top: 20px;
    left: 10px;
}

#affichage_media{
   width: 100%;
    height: 100%; 
    position: relative;
}

#affichage_media iframe{
    width: 100%;
    height: 100%;
}


body,
h1,
h2 {
    background-color: white !important;
    color: black !important;
    font-size: 24px !important;
}

main{
    padding-top: 0;
}

header, footer{
    display: none;
}

.showroom-h1 {
    font-size: 250% !important;
    text-transform: uppercase;
}

.showroom-h2 {
    font-size: 140% !important;
    margin-bottom: 30px;
}

.logo-title{
    height: 150px;
    position: absolute;
    top: 0;
    z-index: 10;
}

.logo-garage{
    height: 100px !important;
    margin: 20px 20px 0px 0px;
    position: relative;
    top: -20px;
    right: -50px;
    background-color: #162133;
    border-bottom-left-radius: 20px;
    padding-left: 10px;
}

.showroom-header-img {
    max-height: 150px;
}

.showroom-slide {
    height: 600px;
    max-height: 600px !important;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    animation: ease-in-out 1s forwards fadeAnimLeft;
    position: relative;
    top: -50px;
}

@keyframes fadeAnim{
    0%{ opacity: 0;}
    100%{opacity: 1;}
}

.square-text-co2{
    margin: 0 !important;
}

.showroom-equipements {
    font-size: 90% !important;
    position: relative;
    animation: ease-in-out 1s forwards fadeAnim;
}

.showroom-equipements-portrait{
    font-size: 90% !important;
    position: relative;
    animation: ease-in-out 1s forwards fadeAnim;
}

.showroom-equipements ul{
    height: 105px;
    overflow: hidden;
    margin-top: 30px;
}

.titre-panneau-deux{
    margin: 0px 0px 20px 0px;
    font-family: 'AssistantBold';
    font-size: 25px !important;
}

.p-caracteristiques {
    font-size: 20px !important;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #d93a3f;
    font-family: 'AssistantLight';
}

.div-co2-txt-img{
    position: relative;
    top: -3px;
}

.img-vignette-critair{
    width: 60px;
}

lettre_categorie{
    font-weight: bold;
}

.h2-vehicule-km {
    color: #d93a3f !important;
}

.h2-vehicule-energie {
    color: #d93a3f !important;
}

.div-img-vente {
    margin-top: 40px;
}

.tr-spe-ocasion {
    transition-duration: 0.2s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.td-spe-ocasion {
    font-size: 20px;
    color: white;
}

.showroom-header-vo {
    margin-top: 40px;
    padding-left: 40px;
    position: relative;
}

.showroom-header-vo-portrait{
    margin-top: 20px;
    position: relative;
    top: 0px;
}

.showroom-header-vo-row {
    padding-left: 100px;
}

.liste-equipement-li {
    font-size: 12px !important;
    list-style-type: none;
    border-left: #d93a3f solid 2px;
    padding-left: 10px;
}

.liste-equipement-li-portrait {
    font-size: 13px !important;
    list-style-type: none;
    border-left: #d93a3f solid 2px;
    padding-left: 10px;
}

/* Carousel */
.carousel-general-portrait {
    margin-top: 10px;
}


/* Right panel */
.showroom-right-panel {
    padding-right: 100px;
    padding-top: 20px;
    animation: ease-in-out 1s forwards fadeAnimTop;
}

.showroom-right-panel-portrait{
    animation: ease-in-out 1s forwards fadeAnimTop;
}

.div-caracteristiques {
    padding: 10px;
    border-radius: 10px;
    height: 960px;
}

.div-caracteristiques-table {
    width: 100%;
    position: relative;
    top: -10px;
}

.champs-caracteristiques {
    display: flex;
    justify-content: space-between;
    color: #162133;
    font-family: 'AssistantExtraLight';
    font-size: 20px !important;
}

.champs-caracteristiques-frais {
    position: relative;
    top: -15px;
    color: #162133;
    font-family: 'AssistantExtraLight';
    font-size: 14px !important;
}

.champs-caracteristiques-provenance {
    position: relative;
    top: -10px;
    color: #162133;
    font-family: 'AssistantExtraLight';
    font-size: 16px !important;
}

.square-text-marque {
    font-size: 40px !important;
    color: #162133;
    text-transform: uppercase;
    margin-right: 10px;
    margin-bottom: 0;
    font-family: 'AssistantBold';
}

.square-text-modele {
    font-size: 30px !important;
    color: #d93a3f;
    text-transform: uppercase;
    margin-bottom: 0;
    font-family: 'AssistantRegular';
    position: relative;
    top: -15px;
}

.square-text-version {
    font-size: 25px !important;
    color: black;
    font-family: 'AssistantRegular';
    position: relative;
    top: -20px;
    margin: 0;
    text-transform: uppercase;
}

.span-prix {
    font-size: 60px !important;
    font-family: 'AssistantBold';
    color: #d93a3f;
    position: absolute;
    right: 0;
    top: -20px;
    text-align: right;
    z-index: 99;
}

.span-prix-portrait{
    font-size: 60px !important;
    font-family: 'AssistantBold';
    color: #d93a3f;
    position: absolute;
    right: 0;
    text-align: right;
    z-index: 99;
    padding-right: 20px;
}

.ttc {
    font-size: 20px !important;
    font-family: 'AssistantRegular';
}

.pictos-img-occasions {
    width: 20px;
    height: 20px;
    margin: 10px 10px 0px 0px;
    color: #162133;
}

.p-occas-solo-titre-caracteristique {
    font-size: 20px !important;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #162133;
    font-family: 'AssistantLight';
}

.img-co2 {
    width: 120px;
}

.indice-co2 {
    font-size: 20px !important;
    font-weight: 400;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #d93a3f;
    font-family: 'AssistantLight';
}

.chargement-barre-vo{
    position: relative;
    width: 100%;
    height: 15px;
    background-color: #eee;
    animation: ease-in-out 1s forwards fadeAnim;
}

.chargement-barre-vo div{
    position: relative;
    width: 0%;
    height: 100%;
    background-color: #d93a3f;
    animation: animBarreChargementVO linear forwards; 
}

@keyframes animBarreChargementVO{
    0%{}
    100%{width: 100%;}
}

.showroom-controls-div{
    position: absolute;
    text-align: right;
    top: -30px;
    right: -30px;
    width: 200px;
    height: 200px;
    font-size: 50px;
    color: #fafafa;
    z-index: 999;
    transform: scale(0.5);
    transition-duration: 0.5s;
}

.showroom-controls-div:hover{
    color: #bbb;
    top: 20px;
    right: 20px;
    transform: scale(1);
}

.showroom-controls-div-portrait{
    position: absolute;
    text-align: right;
    top: 100px;
    right: -30px;
    width: 200px;
    height: 200px;
    font-size: 50px;
    color: #fafafa;
    z-index: 999;
    transform: scale(0.5);
    transition-duration: 0.5s;
}

.showroom-controls-div-portrait:hover{
    color: #bbb;
    top: 150px;
    right: 20px;
    transform: scale(1);
}

.showroom-controls-div-portrait:hover a i{
    color: #bbb;
}

.showroom-controls-div:hover a i{
    color: #bbb;
}

.showroom-controls-button{
    cursor: pointer;
}

.showroom-controls-button a i, .showroom-controls-button-close a i{
    color: #fafafa;
    transition-duration: 0.5s;
}

.showroom-controls-button-close a i:hover{
    color: red;
}

.showroom-controls-button i:hover, .showroom-controls-button a i:hover{
    color: #d93a3f;
}

.fullscreen-button-showroom i{
    cursor: pointer;
}

#fullscreen_opera{
    display: none;
}

#fullscreen_chrome{
    display: none;
}

#fullscreen_safari{
    display: none;
}

#fullscreen_firefox{
    display: none;
}

#fullscreen_ie{
    display: none;
}

.div-modal-showroom-fullscreen{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.8);
    z-index: 9999;
}

.div-modal-showroom{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.div-modal-showroom p{
    color: white;
    padding-top: 50px;
    font-family: 'AssistantRegular';
    font-size: 40px !important;
    text-align: center;
}

.div-modal-showroom small{
    color: white;
    padding-top: 50px;
    font-family: 'AssistantRegular';
    font-size: 20px !important;
    text-align: center;
}

touche{
    color: #d93a3f;
}

.showroom-miniatures-div-full{
    overflow: hidden;
    display: flex;
    position: relative;
    animation: ease-in-out 1s forwards fadeAnimRight;
}

.showroom-miniatures-div-full-portrait{
    overflow: hidden;
    display: flex;
    position: relative;
    animation: ease-in-out 1s forwards fadeAnimRight;
}

@keyframes fadeAnimRight{
    0%{ opacity: 0; transform: translateX(300px);}
    100%{opacity: 1; transform: translateX(0px);}
}

@keyframes fadeAnimLeft{
    0%{ opacity: 0; transform: translateX(-300px);}
    100%{opacity: 1; transform: translateX(0px);}
}

@keyframes fadeAnimTop{
    0%{ opacity: 0; transform: translateY(50px);}
    100%{opacity: 1; transform: translateY(0px);}
}


.showroom-miniature-gradient{
    position: absolute;
    background-image: linear-gradient(to right, transparent, transparent, transparent, transparent, transparent, #ffffff);
    height: 100%;
    width: 100%;
}

.img-miniatures-showroom{
    height: 185px;
    margin: 10px;
}