/* Big tablets to 1655px: widths smaller than 1140px row */
@media only screen and (max-width: 1655px){

    .row {padding: 0 2%;}


    label {
        font-weight: 550;
    }    
    
    .header {
        height: 40vh;
    }
    
    hr {
        width: 60%;
        margin: auto;
    }
    
    .event-name {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #000;
      font-size: 100%;
      word-spacing: 4px;
      letter-spacing: 1px;
      text-align:center;
} 

.hotel-info {
    border-radius: 25px;
    font-weight: 400;
    font-size: 90%;
    width: 60%;    
    background-color:#e4e3e3;
    margin: auto;
    padding: 10px;
  }

  .hotel-info img {
    width: 45%;  
    float: left;
    padding: 15px 15px 15px 15px;
    object-fit: cover;
    
  }

  .hotel-location {
    line-height: 2;
    padding: 30px 0;
  }
    
}

/* Big tablets to 1200px: widths smaller than 1140px row */
@media only screen and (max-width: 1200px){

    .row {padding: 0 2%;}


    label {
        font-weight: 550;
    }    
    
    .header {
        height: 40vh;
    }
    
    .event-name {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #000;
      font-size: 100%;
      word-spacing: 4px;
      letter-spacing: 1px;
      text-align:center;
}

.event-logo img {
  display: block;  
  margin:auto;
  height: 40%;
  justify-content: center;
}

.hotel-info {
    border-radius: 25px;
    font-weight: 400;
    font-size: 80%;
    width: 60%;    
    background-color:#e4e3e3;
    
  }

  .hotel-info img {
    width: 40%;  
    float: left;
    object-fit: cover;
    padding: 20px;
    
    
  }

  .hotel-location {
    line-height: 2;
    padding: 30px;    
    
  }

  .welcome-text {
    margin: auto;
    width: auto;
  }
    
}


@media only screen and (max-width: 1140px){

    .row {padding: 0 2%;}


    label {
        font-weight: 550;
    }    
    
    .header {
        height: 40vh;
    }
    
    .event-name {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #000;
      font-size: 90%;
      word-spacing: 4px;
      letter-spacing: 1px;
      text-align:center;
}

.event-logo img {
  display: block;
  margin:auto;
  width: 40%;
  
}

.hotel-city {
    font-size: 130%;
}

.hotel-info {
    border-radius: 25px;
    font-weight: 400;
    font-size: 90%;
    width: 80%;    
    background-color:#e4e3e3;
    margin: auto;
    
    
  }

  .hotel-location {
    margin-top: 40px;
  }

  .hotel-info img {
    width: 50%;  
    object-fit: cover;
    padding: 15px 15px 15px 15px;
    
  }

  .hotel-location {
    line-height: 2;
    padding: 10px 0;
  }

    
}


/* Small tablets to big tablets: from 768-1023px */
@media only screen and (max-width: 1023px){
    
    body {font-size: 18px;}
    section {padding 60px 0;} 
    
    .header {
        height: 35vh;
    }
    
    .event-logo img {
      display: block;
      margin:auto;
      width: 70%;
      
  }
    
    .event-name {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #000;
      font-size: 80%;
      word-spacing: 4px;
      letter-spacing: 1px;
      text-align:center;
}

.hotel-info {
    border-radius: 25px;
    font-weight: 400;
    font-size: 80%;
    width: 70%;    
    background-color:#e4e3e3;
    margin: auto;
  }

  .hotel-img {
    width: 180%;  
    float: left;
    margin: 5%;
    
    
  }

  .hotel-location {
    line-height: 2;
    padding: 30px 0;
    font-size: 100%;
    text-align: center;
  }

    footer {
        background-color: #f0f0f0;
        width: 100%;
        padding: 10px;
        font-size: 100%;
        color: #fff;
        align-items:center;
      }
      
      footer p {
        color: #050505;
        text-align: center;
        margin-top: 20px;
      }
      
      footer img {
        height: 20%;
      }
    
    label {
        font-weight: 550;
    }
    
}


/* Size up to 830px:*/
@media only screen and (max-width: 830px){

    .row {padding: 0 2%;}


    label {
        font-weight: 550;
    }    
    
    .header {
        height: 40vh;
    }
    
    .event-name {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #000;
      font-size: 100%;
      word-spacing: 4px;
      letter-spacing: 1px;
      text-align:center;
}



    
}
/* Small phones to small tablets: from 481-767px */
@media only screen and (max-width: 767px){
    
    body {font-size: 16px;}
    section { padding: 30px 0;}
    
    .row, 
    .hero-text-box {padding: 0 4%;}
    
    .col { 
        width: 100%;
        margin: 0 0 4% 0;
    }
    
    label {
      padding: 8px 5px 10px 0;
      display: inline-block;
    }
    
    .header {
        height: 35vh;
    }
    
    

    
    h1 {font-size: 180%;}
    h2 {font-size: 120%;}
    
    
    .btn-app img {
        height: auto;
        width: 30%;
        }
    
    .event-name {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #000;
      font-size: 100%;
      word-spacing: 4px;
      letter-spacing: 1px;
      text-align:center;
}
    
.event-logo img {
    display: block;
    margin:auto;
    width: 60%;
    
}
    
 /* Big tablets to 1200px: widths smaller than 1140px row */
@media only screen and (max-width: 1200px){

    .row {padding: 0 2%;}


    label {
        font-weight: 550;
    }    
    
    .header {
        height: 40vh;
    }
    
    .event-name {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #000;
      font-size: 100%;
      word-spacing: 4px;
      letter-spacing: 1px;
      text-align:center;
}

.hotel-info {
    border-radius: 25px;
    font-weight: 400;
    font-size: 80%;
    width: 60%;    
    background-color:#e4e3e3;
    margin: auto;
  }

  .hotel-info img {
    width: 50%;  
    float: left;
    padding: 15px 30px 15px 20px;
    
  }

  .hotel-location {
    line-height: 2;
    padding: 30px 0;
  }

    
}   
    
   
    footer {
        background-color: #f0f0f0;
        width: 100%;
        padding: 10px;
        font-size: 100%;
        color: #fff;
        align-items:center;
      }
      
      footer p {
        color: #050505;
        text-align: center;
        margin-top: 20px;
      }
      
      .GES-logo img {
        display: block;
        margin-left: 20%;
        margin-right: 20%;
        width: 60%;
        margin-top: 30px;
      }

}

/* Small phones to small tablets: from 481-767px */
@media only screen and (max-width: 767px){

    .row {padding: 0 2%;}


    label {
        font-weight: 550;
    }    
    
    .header {
        height: 40vh;
    }

    .event-logo img {
      width: 50%;
    }
    
    .event-name {
      margin-top: 20px;
      margin-bottom: 10px;
      color: #000;
      font-size: 100%;
      word-spacing: 4px;
      letter-spacing: 1px;
      text-align:center;
}

.hotel-info {
    height: 90%;
    width: 70%;
    margin: auto;
    padding-bottom: 10px;
    background-color: #e4e3e3;
    
  }

.hotel-info img {
    margin-left: 2%;
    height: 50%;
    
    
  }

  .hotel-location {
    text-align: center;
    line-height: 2;
    padding: 30px;
    font-size: 120%;
    margin: auto; 
    
  }

    
    footer {
        background-color: #f0f0f0;
        width: 100%;
        padding: 10px;
        font-size: 100%;
        color: #fff;
        align-items:center;
      }
      
      footer p {
        color: #050505;
        text-align: center;
        margin-top: 20px;
      }
      
      .GES-logo img {
        display: block;
        margin-left: 20%;
        margin-right: 20%;
        width: 60%;
        margin-top: 30px;
      }

}


/* Small phones: from 0-480px *******************************************/
@media only screen and (max-width: 480px){
    
    section{ padding: 25px, 0;}
    .contact-form{width: 100%;}
    
   .header {
        height: 25vh;
    }
    
    .event-name {
      margin-top: 20px;
      margin-bottom: 20px;
      color: #000;
      font-size: 80%;
      word-spacing: 4px;
      letter-spacing: 1px;
      text-align:center;
}

    .event-logo img {
        display: block;
        margin: auto;
        width: 100%;
        
}
    
    .footer-text {
        font-size: 12px;
    }
    
        
    footer img {
            width: 50%;
          }
}  
    /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
            .col-25, .col-75, input[type=submit] {
            width: 100%;
            margin-top: 0;
            margin-left: 1%;
            
    }

         /* Small phones: from 0-250px *******************************************/
@media only screen and (max-width: 250px){   
        
       .header {
        height: 110vh;
}
    .event-logo img {
        display: block;
        margin-left: 20%;
        margin-right: 20%;
        width: 60%;
        margin-top: 30px;
} 

footer img {
    height: 80%;
  }
        
        
    }