body{
    background-color: white;
    margin:0;
    font-family: "roboto";
    font-size: 20px;
    
}

/************************************/
/***** FONTS / LINKS / ICONE   *****       
***********************************/



@font-face {
    font-family: "mister";
    src: url("../fonts/Mister-Brown.otf/") format("otf"),
         url("../fonts/mister-brown.ttf") format('ttf'),
         url("../fonts/mister-brown.woff") format("woff");;
        
  }

@font-face{
    font-family: "roboto";
    src: url("../fonts/Roboto-Regular.ttf") format("ttf");
}


a,a:hover,a:active{text-decoration: none;}
a{color:black;}
a:hover{color:#8C8C8C;}
ul{list-style: none;}
.input-group-text{background-color: white;}
.btn-red{color:white;background-color: #000000;}
.btn-red:hover{color:white;background-color: #000000;}

/********************************************/
/***** PAGE LOGIN / PAGE INSCRIPTION ********       
********************************************/
main#login{height: 100vh;}
main#login h1,main#inscription h1{font-family: "mister";color:#000000;font-size: 70px;} /*FC4F5C*/
main#login section{z-index: 0;position: fixed;height: 100vh;}


img[alt*="newtelapps"]{width: 5%;padding: 10px 0;}

#slogan{display: flex;flex-wrap: wrap;align-items: center;}

hr{width:100px;height: 5px;background-color:black;}

main#login section:nth-child(2){background-color:#000000 ;z-index: 1;position: relative;top:90%;height: 100vh;} /* #FC4F5C */


#form_login{
    background-color: white;
    display:flex; 
    flex-wrap: wrap-reverse;
    padding: 10% 0;
    position: relative;
    top:-8%;
    -webkit-box-shadow: 4px 2px 24px -18px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 2px 24px -18px rgba(0,0,0,0.75);
    box-shadow: 4px 2px 24px -18px rgba(0,0,0,0.75);        
    height: 80vh;
    transition: 2s;
    animation: slideDown 2s;
}


.form-connexion select{
    /*border: none;*/
    background-color: white;
   

}
.form-row-prefixe{display: flex;justify-content: flex-start;}
.form-row-prefixe .col-md-1,.form-row-prefixe .col-md-5{padding-left: 0!important;padding-right: 0!important;}
#info-login{padding: 0 50px;}

.active_item{background:#000000;color:white;}
#element_lang{position:absolute;top:0;right:30px;}
#element_lang .lang-nav{display:flex;}
#element_lang .lang{margin-left:10px;}

/****************************
        TRANSITION
****************************/



@keyframes slideDown{
    from{
        transform: translateY(70px);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideDownRight{
    from{
        transform: translateX(200px);
        opacity: 0;
    }
    to{
        transform: translateX(0);
        opacity: 1;
    }
}










/************************************
              ORDINATEUR
*************************************/
@media screen and (min-width: 1024px){}



/************************************
               TABLETTE
*************************************/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    /* Styles pour cette Media Queries */
}



/************************************
              TABLETTE XS
*************************************/
@media screen and (min-width: 481px) and (max-width: 767px ){

    #logo_login{height: auto!important;}
    #info_login::before{
        width: 80%;
        height: 60%;
        position: absolute;
        top:20%;
        left:10%;
    }
    #info_login::after{
        width: 50px;
        height: 50px;
        top:15%;
        left:5%;
    }

    main#login section{z-index: 0;position: inherit;height:50vh;}
    
}


/************************************
            SMARTPHONE
*************************************/

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
   
    #logo_login{height: auto!important;}
    #logo_login{height: auto!important;}
    #info_login::before{
        width: 80%;
        height: 60%;
        position: absolute;
        top:20%;
        left:10%;
    }
    #info_login::after{
        width: 50px;
        height: 50px;
        top:15%;
        left:5%;
    }
    main#login section{z-index: 0;position: inherit;height:50vh;}
}

/**** IPHONE 5 ***/
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
   
    #logo_login{height: auto!important;}
    #logo_login{height: auto!important;}
    #info_login::before{
        width: 80%;
        height: 60%;
        position: absolute;
        top:20%;
        left:10%;
    }
    #info_login::after{
        width: 50px;
        height: 50px;
        top:15%;
        left:5%;
    }
    main#login section{z-index: 0;position: inherit;height:50vh;}
}

/**** IPHONE 4 ***/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5){
    
    #logo_login{height: auto!important;}
    #logo_login{height: auto!important;}

}