/****************** telephones ***********/

@media screen and (max-width: 768px) {
      
    html, body {
      
       font-family: "Segoe UI",Arial,sans-serif;
        box-sizing: border-box;
        background:url('../img/metro.jpg');
        background-attachment: fixed;
        background-size: cover;
        margin: 0;
        padding: 0;
      }
    
      /*********        Top       *************/
    .header {
      color: black;
      background-color: white;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-top : 10px;
      padding-bottom : 10px;
    }
    .header a:hover {
      color: rgb(21, 105, 124);
      transition:0.2s;
    }
    #fauteuil {
      font-size: 70px;
      float: left;
      margin-left:2px;
      margin-top: 12px;
      }
    #fauteuil:hover, .fa-plus:hover, .fa-minus:hover {
      cursor: pointer;
    }
    .fas {
    color: #23B4D3;
    }
    
    .fas, .fa-map-marker-alt, .fas .fa-train {
    color: #23B4D3;
    }
    
    .fa-plus-square {
      color:white;
    }
    
     .fas .fa-trash-.alt .delete .submit{
        color: white;
      }
      
    .nav-principale {
      display:flex;
      flex-direction: row;
      justify-content: flex-end;
      width:90%;
    }  
    .nav-principale a {
      text-decoration : none;
      color : #23B4D3;
      font-size:20px;
      margin-right : 10%;
    }
    main {
      width:100%;
    border-radius:9px;
    background-color: white;
    margin:110px auto;
  
    text-align:center;
    }
    
    .station_query {
      position:relative;
      top:0px;
      left: 0px;
      margin : 0 auto;
      width:100%;
    }
    h1 {
      color: #23B4D3;
    /*  font-family: 'Merienda', cursive;
      padding: 30px;/*
      text-decoration: underline;
      */font-size: 35px;
    }
    h2 {
      color:white;
      text-shadow: black 1px 1px;
      font-family: 'Merienda', cursive;
      
    
    }
    .form {
      margin-bottom:20px ;
    }
    .intro {
      font-family: "Segoe UI",Arial,sans-serif;
      font-weight:200px;
      background-color:rgb(243,243,243);
      display: inline-block;
  }
   b {
    color: rgb(183,51,126);
   }
    #metro_input {
      font-style : italic;
      background-color: rgb(177, 177, 177);
      color: rgb(255, 255, 255);
      margin: 10px 40px;
      width : 75%;
      height: 30px;
      transition:0.8s;
    }
    #metro_input:hover{
      font-style: normal;
      background-color: whitesmoke;
      color:black;
      transition:0.8s;
    
    }
    #metro_input:focus{
      font-style: normal;
      background-color: whitesmoke;
      color:black;
      }
    
    input[type=submit], .submit {
      border-radius:2px;
      border : none;
      background-color:#23B4D3;
      color: white;
      padding: 8px;
      text-decoration: none;
    
    }
    input[type=submit]:hover, .submit:hover {
      background-color:rgb(21, 105, 124);
      color: white;
      transition:0.2s;
    }
    
    input[type=submit]:focus {
      background-color:rgb(21, 105, 124);
      color: white;
    }
    .italic {
        opacity: 0.6;
    }
    .italic a {
        color: #23B4D3;
        
    }
    .station_query iframe{
      width:100%;
      height: 350px ;
    }
    iframe {
      border:none;
      box-sizing: border-box;
      margin-top: -1px;
      width : 100%;
      height: 500pt;
    }
    /*class pour le bandeau de la map == ne marche pas*/
 
    #map-canvas:nth-of-type(2) ,.i4ewOd-pzNkMb-haAclf, .i4ewOd-pzNkMb-haAclf, .i4ewOd-pzNkMb-haAclf .QUIbkc {
      display: none;
    }
 
    /*propositions metro*/
    .propositions.selected {
      overflow: auto;
      display: flex;
      justify-content: center;
    }
    .propositions {
      font-family: sans-serif;
    }
    
     .autocomplete-suggestions{
      background-color:rgb(50, 167, 194);
      max-height: 100%;
      overflow: auto;
      border: solid gray 1px;
    
     
    }
    .autocomplete-selected{
      transition: 0.2s;
      background-color:white;
      color: rgb(21, 105, 124);
      cursor: pointer;
    }
    .italic {
        opacity: 0.5;
    }
    
    .station_img {
      max-width: 210px;
      display: block;
      text-align: center;
      margin: auto;
      padding-bottom: 20px;
    }
    .description.overlay  {
      display:block;
      /*background-color: rgb(215,215,215);*/
      background-color:rgb(50, 167, 194);
    }
    .description img {
      display:none;
      
    }
    
    .submit {
    text-decoration: none;
    cursor:pointer;
    margin :5px 5px;
    }
    
    
    #resultats_recherche {
    background-size: cover;
    background-repeat: no-repeat;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    
      
}
    /*new_toilet*/
    #new-toilet>form{
      display: flex;
      flex-direction: column;
      width: 80%;
      justify-content: center;
      margin: 0 auto;
      text-align: left;
    }
    .row {
      
      display: flex;
      flex-direction:row;
      justify-content: space-around;
    }
    .none img {
      vertical-align : center;
    }
    .none {
      color: #23B4D3;
      font-size: 20px;
    }
    .none_picture {
      width:100%;
    }
    
    .hidden {
      display:none;
    }
    .copyright {
      color: #23B4D3;
    }
}

/***************************************************************************************/
/************ tablettes*************/
@media screen and (min-width: 769px) and (max-width: 1024px){
  
    html, body {
      box-sizing: border-box;
      background:url('../img/metro.jpg');
      background-attachment: fixed;
      background-size: cover;
      margin: 0;
      padding: 0;
      font-family: "Segoe UI",Arial,sans-serif;
    }

     /*********        Top       *************/
    .header {
      color: black;
      background-color: white;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-top : 10px;
      padding-bottom : 10px;
    }
    .header a:hover {
      color: rgb(21, 105, 124);
      transition:0.2s;
    }
    #fauteuil {
      font-size: 70px;
      float: left;
      margin-left:10%;
      margin-top: 12px;
      }
    
    .connected {
      margin-left:12px;
    }
    .fas {
    color: #23B4D3;
    }
    
    .fas, .fa-map-marker-alt, .fas .fa-train {
    color: #23B4D3;
    }
    
    .fa-plus-square {
      color:white;
    }
    
     .fas .fa-trash-.alt .delete .submit{
        color: white;
      }
      #fauteuil:hover, .fa-plus:hover, .fa-minus:hover  {
        cursor: pointer;
      }
    
    .nav-principale {
      display:flex;
      flex-direction: row;
      justify-content: flex-end;
      width:90%;
    }  
    .nav-principale a {
      text-decoration : none;
      color : #23B4D3;
      font-size:20px;
      margin-right : 10%;
    }
    b {
      color: rgb(183,51,126);
     }
    
    .italic {
        opacity: 0.6;
    }
    .italic a {
        color: #23B4D3;
        
    }
main {
      width:100%;
    border-radius:9px;
    background-color: white;
    margin:110px auto;
  
    text-align:center;
    }
    
    .station_query {
      position:relative;
      top:0px;
      left: 0px;
    }
    h1 {
      color: #23B4D3;/*
      
      font-family: 'Merienda', cursive;*/
      padding: 30px;/*
      text-decoration: underline;
      */font-size: 35px;
    }
    h2 {
      color:white;
      text-shadow: black 1px 1px;
      font-family: 'Merienda', cursive;
      
    
    }
    .form {
      margin-bottom:20px ;
    }
    .intro {
      font-family: "Segoe UI",Arial,sans-serif;
      font-weight:200px;
      background-color:rgb(243,243,243);
      display: inline-block;
  }
    
    #metro_input {
      font-style : italic;
      background-color: rgb(177, 177, 177);
      color: rgb(255, 255, 255);
      margin: 10px 40px;
      width : 75%;
      height: 30px;
      transition:0.8s;
    }
    #metro_input:hover{
      font-style: normal;
      background-color: whitesmoke;
      color:black;
      transition:0.8s;
    
    }
    #metro_input:focus{
      font-style: normal;
      background-color: whitesmoke;
      color:black;
      }
    
    input[type=submit], .submit {
      text-decoration: none;
      border-radius:2px;
      border : none;
      background-color:#23B4D3;
      color: white;
      padding: 8px;
    
    }
    input[type=submit]:hover, .submit:hover {
      background-color:rgb(21, 105, 124);
      color: white;
      transition:0.2s;
    }
    
    input[type=submit]:focus {
      background-color:rgb(21, 105, 124);
      color: white;
    }
      
      
    iframe {
      border:none;
      box-sizing: border-box;
      margin-top: -1px;
      width : 100%;
      height: 500pt;
    }
    
    /*class pour le bandeau de la map*/
    .map-canvas:nth-of-type(2), .i4ewOd-pzNkMb-haAclf, .i4ewOd-pzNkMb-haAclf .QUIbkc {
      display:none;
    }
    /*propositions metro*/
    
    
    .propositions.selected {
      overflow: auto;
      display: flex;
      justify-content: center;
    }
    .propositions {
      font-family: sans-serif;
    }
    
     .autocomplete-suggestions{
      background-color:rgb(50, 167, 194);
      max-height: 100%;
      overflow: auto;
    
     
    }
    .autocomplete-selected{
      transition: 0.2s;
      background-color:white;
      color: rgb(21, 105, 124);
      cursor: pointer;
    }
          
    #resultats_recherche {
      background-size: cover;
      background-repeat: no-repeat;
      display:flex;
      flex-direction:column;
      flex-wrap: wrap;
      
    }
    .station_img {
      max-width: 210px;
      display: block;
      text-align: center;
      margin: auto;
      padding-bottom: 20px;
    }
    .description.overlay {
      display:block;
      /*      background-color: rgb(215,215,215);*/
      background-color:rgb(50, 167, 194);
      
    }
      .container {
      margin : 0 auto;
      margin-top:70px;
      padding-bottom: 50px;
      position: relative;
      width: 80%;
    }
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #008CBA;
    }

    
    .container:hover .overlay {
      opacity: 1;
       
    }

    
    .container-contact2 {
      min-height: 0%;
    }
    
    .none {
      color: #23B4D3;
      font-size: 20px;
    }
    
    .copyright {
      color: #23B4D3;
    }
    .hidden {
      display:none;
    }
}


/****************DESKTOP********************/

@media screen and (min-width: 1024px) {


html, body {
    box-sizing: border-box;
    background:url('../img/metro.jpg');
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI",Arial,sans-serif;
  }

  /*********        Top       *************/
.header {
  color: black;
  background-color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top : 10px;
  padding-bottom : 10px;
}
.header a:hover {
  color: rgb(21, 105, 124);
  transition:0.2s;
}
#fauteuil {
  font-size: 70px;
  float: left;
  margin-left:10%;
  
  margin-top: 10px;
  }
  
#fauteuil:hover, .fa-plus:hover, .fa-minus:hover  {
  cursor: pointer;
}

.connected {
  margin-left:12px;
  }

.nav-principale {
  display:flex;
  flex-direction: row;
  justify-content: flex-end;
  width:90%;
}  
.nav-principale a {
  text-decoration : none;
  color : #23B4D3;
  font-size:20px;
  margin-right : 10%;
}
b {
  color: rgb(183,51,126);
 }
   /********    Main        *************************/
main {
  border-radius:9px;
  background-color: white;
  margin:110px auto;
  width  : 75%;
  text-align:center;
}
h1 {
  color: #23B4D3;
  /*
  font-family: 'Merienda', cursive;*/
  padding: 30px;/*
  text-decoration: underline;
  */font-size: 35px;
  color: #23B4D3;
}
h2 {
  color:white;
  text-shadow: black 1px 1px;
  font-family: 'Merienda', cursive;
  

}
.form {
  margin-bottom:20px ;
}
.intro {
  font-family: "Segoe UI",Arial,sans-serif;
  font-weight:200px;
  background-color:rgb(243,243,243);
  display: inline-block;
 padding: 25px 10px;
}
#metro_input {
  font-style : italic;
  background-color: rgb(177, 177, 177);
  color: rgb(255, 255, 255);
  margin: 10px 40px;
  width : 75%;
  height: 30px;
  transition:0.8s;
}
#metro_input:hover{
  font-style: normal;
  background-color: whitesmoke;
  color:black;
  transition:0.8s;

}
#metro_input:focus{
  font-style: normal;
  background-color: whitesmoke;
  color:black;
  }

input[type=submit], .submit {
  border-radius:2px;
  border : none;
  background-color:#23B4D3;
  color: white;
  padding: 8px;
  text-decoration: none;

}
input[type=submit]:hover, .submit:hover {
  background-color:rgb(21, 105, 124);
  color: white;
  transition:0.2s;
}

input[type=submit]:focus {
  background-color:rgb(21, 105, 124);
  color: white;
}
    
    .italic {
        opacity: 0.6;
    }
    .italic a {
        color: #23B4D3;
        
    }
iframe {
  border:none;
  box-sizing: border-box;
  margin-top: -1px;
  width : 100%;
  height: 500pt;
}

    /*class pour le bandeau de la map*/
    .map-canvas:nth-of-type(2), .i4ewOd-pzNkMb-haAclf, .i4ewOd-pzNkMb-haAclf .QUIbkc {
      display:none;
    }
/*propositions metro*/
.propositions.selected {
  overflow: auto;
  display: flex;
  justify-content: center;
}
.propositions {
  font-family: sans-serif;
}

 .autocomplete-suggestions{
  background-color:rgb(50, 167, 194);
  max-height: 100%;
  overflow: auto;

 
}
.autocomplete-selected{
  transition: 0.2s;
  background-color:white;
  color: rgb(21, 105, 124);
  cursor: pointer;
  
}

/*recherche*/
.station_query {
  position:relative;
  top:0px;
  left: 0px;

}
.metroSearched {
  color : red;
}
#resultats_recherche {
  display:flex;
  flex-direction:column;
  flex-wrap: wrap;
  
}
.station_img {
  margin: auto;
  display: block;
  height: auto;
  width: 180px;
  border-radius: 2px;
  border: solid white 2px;
  cursor: pointer;
}
.titre {
  color :  #23B4D3;
  text-shadow: white 1px 1px;
}
.container {
  padding : 10px;
  margin : 0 auto;
  margin-top:70px;
  padding-bottom: 50px;
  position: relative;
  width: 80%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.description {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  cursor: pointer;
  z-index: 0;
}

/******   404   *****/
#err404 {
  background-color: #D8D4D1;
  background-image: url("../img/404.jpg");
  background-repeat: no-repeat;
  max-height: 441px;
  max-width: 510px ;
  background-position: center;
}
#err404 .submit {
  margin-top : 300px;
}
/*********login-main*********/
.login_main{
  display: block;
  width : 50%;
  box-shadow : 2px 2px #23B4D3;
  padding: 10px;
  margin : 150px auto;
  text-align: center;
  background-color: rgb(216,212,209);
}
.login_main h2{
  text-align: center;
}
.login_main label {
  display: inline-block; /* La balise devient de type inline-block. */
  width: 110px;
  
}
.login_main .submit {
  margin : 15px;
}
/*main de connexion*/
/*.transparent {
  background-color: transparent;
}*/


.none {
  color: #23B4D3;
  font-size: 20px;
}
    /*new_toilet*/
#new-toilet>form{
      width  : 60%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 auto 10px;
      text-align: left;
    }
.row {
      
      display: flex;
      flex-direction:row;
      justify-content: space-around;
  }


    .fas {
    color: #23B4D3;
    }
    
    .fas, .fa-map-marker-alt, .fas .fa-train {
    color: #23B4D3;
    }
    
    .fa-plus-square {
      color:white;
    }
    
    .submit{
        color: white;
      }
    .hidden {
      display:none;
    }
    
    .copyright {
      color: #23B4D3;
    }
}