*, *:before, *:after { box-sizing: border-box; }



html { 
    height: 100%; 
    width: 100%; 
    background: aaa;
}


/* Main Nav */
input, .menu_small, #liste_menu_small{
    display: none;
}

#main-nav { 
    position: absolute; 
    width: 100vw; 
    background-color: #F6A58C;
    z-index:100; 
    height: 75px; 
    top:100%;
} /* Height of header */


#main-nav.fixed{ 
    position: fixed; 
    top:0;
}

.logo{
    width: 225px;
    float: left;
    position: absolute;
    top: 2px;
    margin-left: 24px;
}

.logo:hover {
    transform: translateX(10px);
    transition: all ease .8s;
}

#main-nav-list {
    /* width: 460px; */
    /* margin: 0 auto; */
    position: absolute;
    right: 20px;
    bottom: 15px;
    display: block;

}
#main-nav li { 
    float: left; 
    text-align: center; 
    padding-top: 10px;
    position: relative;
    
}
#main-nav li a{ 
    color: #A12B26;
}

#main-nav li a:hover{ 
    color: #fff;
    transition: all ease-in-out .8s;
}
/*Ligne de dessous : virer la couleur du background, ajouter triangle*/
#main-nav .current a {

    font-size: 28px;
}
#main-nav .current a:after {
    content: "";
    position: absolute;
    top: 53px;
    left: calc(175px / 2 - 8px); /*190px ->cf largeur du lien*/
    height: 20px;
    width: 16px;
    background-image: url(up-arrow1.png);
    background-repeat: no-repeat;
    animation-name: fadeIn;
    animation-duration: 2s;

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**/
#main-nav a{ 
    padding: 10px; 
    display: block; 
    width: 175px;/*190px ->si chgmt, changer le positionnmt du after*/
    text-decoration: none; 
    text-transform: uppercase;
    font-size: 28px;


}
#main-nav a.langues	 { 
    /*display: inline; */
    width: auto;
    color: #D8624E; 
    text-decoration: none; 
    text-transform: uppercase;
    font-size: 28px;
}

.langue_affichee{
    color: #D8624E; 

}


.langue_affichee:hover{
    color: #fff;
    transition: all ease-in-out .8s;

}

.langue_affichee:after {
    content: "";
    position: absolute;
    top: 53px;
    left: 14px;
    height: 20px;
    width: 16px;
    background-image: url(up-arrow1.png);
    background-repeat: no-repeat;

}

/*
.border_contact{
    border-right: 1px solid #D8624E;
}
*/
label {
    width: 190px;
display: block;
    height: 37px;
    position: absolute;
    top: 25px;
    z-index: 6;
    transition: all ease-in-out .5s;
}

#liste_menu_small {
    position: absolute;
    flex-direction: column;
    display: flex;
    align-items: center;
    top: 50px;
    width: 100%;
    height: 170px;
    opacity: .95;
    padding: 0 50px;
    background-color: #FCD8CF;
    transition: all ease-in-out .3s;
}

#liste_menu_small li a{
    border-bottom: 1px solid #fff;
    width: 500px;
    text-align: center;
    display: block;
}

#liste_menu_small li{
    line-height: 10px;
}

ul#liste_menu_small li:first-child{
    margin-top: 35px;
}

input:not(:checked)~#liste_menu_small{
    display: none;
}/* "+" une des balises du même héritage qu'input, directement après input; "~" une des balises du même héritage qu'input, ici qui est l'enfant de <nav>*/

input:checked~#liste_menu_small{
    display: block;
}
input:checked+label::after{
    content: "";
    background-image: url(../Images/Romy_Ravor_close.png);
    background-repeat: no-repeat;
    background-size: 20px;
position: absolute;
    top: 39px;
 left: 40px;
    height: 20px;
    width: 20px;
        
    }

/***********Media Queries**************/
@media (min-width: 801px) and (max-width: 1000px){
    #main-nav a{ 
        font-size: 23px;
}
    #main-nav a.langues	 { 
        font-size: 23px;
}
    #main-nav .current a {
        font-size: 23px;
}
    #main-nav .current a:after {
    left: calc(130px / 2 - 8px); /*190px ->cf largeur du lien*/
	top: 45px;
}
    #main-nav a{ 
    width: 130px;/*190px ->si chgmt, changer le positionnmt du after*/
}
    .logo{
        width: 190px;
        top: 8px;

}
}

@media (min-width: 601px) and (max-width: 800px){
    .logo{
        width: 170px;
        top: 11px;

}

    #main-nav-list, .menu_large{
        display: none;
    }
    .menu_small{
        display: block;
        position: fixed;
    left: calc(90vw - 57px);
        font-size: 23px;
                text-transform: uppercase;
}
    .menu_small:hover{ 
        color: #fff;
        transition: all ease-in-out .8s;

}
    .border_contact{
        border-right: 0px;
    }
    .langue_affichee:after {
        height: 0;
        width: 0;
}
    #main-nav {
    top: 0;
}

}

@media (min-width: 450px) and (max-width: 600px){
    .logo{
        width: 133px;
        top: 16px;

}
    #main-nav-list, .menu_large{
        display: none;
    }
    .menu_small{
        display: block;
        font-size: 20px;
        position: fixed;
    left: calc(90vw - 57px);
        text-transform: uppercase;
}
    .menu_small:hover{ 
        color: #fff;
        transition: all ease-in-out .8s;
}
     .border_contact{
        border-right: 0px;
    }
    .langue_affichee:after {
        height: 0;
        width: 0;
}
    #main-nav {
    top: 0;
}

}
@media (max-width: 600px){
label {
    top: 14px;
}
}
@media (max-width: 449px){
.logo{
    width: 120px;
    top: 19px;

}
    #main-nav-list, .menu_large{
        display: none;
    }
    

    .menu_small{
   width: 190px;
	display: block;
    font-size: 20px;
    position: relative;
    left: calc(90vw - 57px);
    top: -3px;
    text-transform: uppercase;
    width: 57px;
}
    .menu_small:hover{ 
        color: #fff;
        transition: all ease-in-out .8s;
}
    .border_contact{
        border-right: 0px;
    }
    .langue_affichee:after {
        height: 0;
        width: 0;
}
    #main-nav {
    top: 0;
}
#liste_menu_small li a {
    border-bottom: 1px solid #fff;
    width: 267px;
    text-align: center;
    display: block;
}

}


/***********Fin Media queries***********/