/* Guilherme Rizzo Castanheira 

        TRAVEL FORM
*/

@import url('some google sans-serif font');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
*::after,
*::before{
    box-sizing: inherit;
}
html{
    font-size: 20px;
    line-height: 1.5;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    
}

main {
    width: 90%;
    margin: 0 auto;
    border: 1px solid #aaa;
}


header {
  /* photo cover */
  
/*    background: url('https://images.unsplash.com/photo-1495953852792-8b6722cbd195?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=47a3d2e40224dd1c8965d024e1d19a84&auto=format&fit=crop&w=1350&q=80');*/
    background: url(../img/car_dogs.jpg); /* dogs photo */
    background-size: cover; /* DO NOT USE "COVER" */
    background-position: 20% 50%; /* to set the dogs on screen */
    background-repeat: no-repeat;
  
}

header img {
  /* site logo */
    float: left;
    width: 20%;
    max-height: 80%;
}

 
header h1 {
    
    text-align: right;
    color: hsla(0, 0%, 82%, 1);
    text-shadow: 1px 2px 4px black;
    font-size: 3.5rem;
    padding: 0.5rem;
    vertical-align: top;
    min-height: 13rem; /* to keep the cover height - DON'T CHANGE! */
/*    position: relative;*/
/*    object-position: top;*/
/*    float: right;*/
}


form {
  padding: 1rem;
  width: 100%;
}

/* all the form boxes */
.form-box {
  padding: 1rem;
}


input {
  /* input selectors */
  width: 100%;
  margin: 0;
  padding: 0.5rem;
  font-size: 1rem;
  color: hsla(26, 100%, 19%, 1);
}

input#min.price::after{
    content: "$" attr(data-price);
    display: block;
    margin-top: -1.5rem;
    color: hsla(26, 100%, 19%, 1);
  
}
input.price#max::after{
    content: "$" attr(data-price);
    display: block;
    margin-top: -1.5rem;
    color: hsla(26, 100%, 19%, 1);
}

.search-btn {
  background-color: hsla(26, 100%, 38%, 1);
  color: white;
  padding:7px;
  font-size: 1rem;
  padding: 0.5rem;
  
}


/* ************** MEDIA QUERIES ************** */


/* TABLET */

@media all and (min-width:768px){
    form {
        display: flex;
        flex-wrap: wrap;  
        flex-direction: row;      
    }
  
    .form-box.place{
          flex-basis: 100%;
    }
    .form-box {
          flex-basis: 50%;
      }
    .form-box.search {
        display: flex;
        justify-content: flex-end;
        align-items:flex-end;
    }
}

/* DESKTOP */

@media all and (min-width:1024px){
    main{
        display:flex;
        flex-wrap: nowrap;
    }
}