/* CSS Document */

@font-face {
  font-family: "Oswald";
  src: url(font/Oswald-VariableFont_wght.ttf) format("truetype");
}


.inputTEXTE {
width:96%;
    background-color:#FFF;
    padding:10px;
    border:1px solid #BBB;
    border-radius:5px;
    font-size:15px;
    padding-left:1%;
    padding-right:1%;
    padding-top:10px;
    padding-bottom:10px;
}


.inputSUBMITcouleur {
   width:100%;
    height:50px;
   font-size:18px;
    border:1px solid #000;
    border-radius:5px;
    background-color:#000;
    text-align:center;
    line-height:35px;
    color:#FFF;

    
}

/* *************************************************************** */
/* ECRAN LARGES */
/* *************************************************************** */
@media only screen and (min-width: 1200px) {
    
    
    .header{
        width:100%;
        min-height:100px;
        height:130px;
    }
    
    
    .logo{
        width:250px;
        float:left;
        width:250px;
        margin-left:30px;
    }
 
    
     .headline{
         width:500px;
         float:right;
         width:500px;
         text-align:right;
         margin-right:30px;
    }
      .colonne_gauche{
        float:left;
          width:500px;
       
    }
    body{
        background-image: url('images/fond-ruban.jpg');
    }
    
 .colonne_droite {
     float:right;
    visibility:visible;
     display: block;
     
    }
    
    
    .bloc_bas{
        
        width:820px;
        margin-left:auto;
        margin-right:auto;
        height:auto;
        margin-top:50px;
    }
}
/* *************************************************************** */
/* TABLETTE */
/* *************************************************************** */
@media only screen and (min-width: 601px) and (max-width : 1199px) {
    
    
     .header{
        width:100%;
        min-height:100px;
        height:200px;
    }
    
    .logo{
        float:none;
        margin-left:auto;
        margin-right:auto;
        width:100%
    }
    
     .headline{
         float:none;
        margin-left:auto;
        margin-right:auto;
         width:100%;
         text-align:center;
    }
    
    body{
        background-image: url('images/fond-ruban.jpg');
    }
  
   .colonne_gauche{
       
       width:90%;
       max-width:500px;
       margin-left:auto;
       margin-right:auto;
       
    }
    
    .colonne_droite{
     visibility: hidden;
    display: none;
    }
    
    .bloc_bas{
        
        width:100%;
        
        height:auto;
        margin-top:50px;
    }
 
}
/* *************************************************************** */
/* MOBILE*/
/* *************************************************************** */
@media only screen and (max-width: 600px) {
    
    
    .header{
        width:100%;
        min-height:100px;
        height:200px;
    }
    
     .logo{
        float:none;
        margin-left:auto;
        margin-right:auto;
        width:100%
    }
    
     .headline{
         float:none;
        margin-left:auto;
        margin-right:auto;
         width:100%;
         text-align:center;
    }
    
    body{
        background-image: url('images/fond-ruban2.jpg');
    }
    
    
    .logo{
        float:left;
    }
    
    .colonne_droite{
     visibility: hidden;
    display: none;
    }
    
    .colonne_gauche{
       
       width:90%;
       margin-left:auto;
       margin-right:auto;
       
    }
    
    .bloc_bas{
        
        width:100%;
        
        height:auto;
        margin-top:50px;
    }
  
}