*{
 margin:0;
 padding:0;
 box-sizing: border-box;
 font-family:'Acme', sans-serif;
}

.logo {
 padding-top: 4%;
 padding-left: 4%;
}

#calcTarifa{
 font-size: 50px;
}

.styleP {
 line-height: 1.8;
}

.styleContainerTitle {
 color: black;
 background-image: url(../assets/images/taximax.jpg);
 background-size: cover;
 height: 100vh;
 background-repeat: no-repeat;
 background-position: center center;
 padding-left: 0;
}

.title{
 background-color: rgb(249,169,26);
 margin:5%;
 width: 450px;
 height: 230px;
 font-size: 20px;
 text-align: center;
}

.styleContainerInput {
 border: 1px solid gray;
 background-color: #c49d7c;
 margin-top: 2%;
 padding-top: 2%;
 height: 150px;
}

.iconsInput {
 position: absolute;
 margin-left: 70%;
 font-size: 2.5rem;
 color: rgb(233, 142, 5);
}

.tarifa{
 font-size: 50px;
 text-align: center;
}

.bg{
  background-color: rgb(230, 158, 42);
}
div #map{
 height: 50vh;
 border: 3px solid black;
 margin:3%;
}

.max{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 30px;
 margin-top: 6%;
}

.preferencia{
 font-size: 25px;
 text-align: center;
}

.font{
 font-size: 20px;
 margin:3%;
}

.footer-bg{
 background-color: #8f603d;
 font-size: 20px;
 color: white;
}

.text-footer{
  margin-top: 2%;
}

/* /media query */
@media (min-width: 306px) and (max-width: 767.98px) {

  .title{
    background-color: rgb(255,191,46);
    margin-right:10%;
    margin-left: 10%;
    width: 265px;
    height: 320px;
  }

  div #map{
   height: 60vh;
   border: 2px solid black;
   width:  90VW;
  }
  
  .font{
   font-size: 15px;
   margin:3%;
  }

  #calcTarifa{
   font-size: 30px;
  }
     
  .iconsInput {
    position: absolute;
    margin-left: 65%;
    font-size: 1.5rem;
    color: rgb(233, 51, 5);
    padding-top: 1%;
  }

  .styleContainerInput {
    border: 1px solid gray;
    background-color: #c49d7c;
    margin-top: 2%;
    height: 150px;
    width: 250px;
  }

}