*{
    padding: 0px;
    margin: 0;
    font-family: Rubik, sans-serif;

}


.about_me_body a{
  color: #1e5c9f;
  
}

ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;a
    overflow: hidden;
    background-color: #b9b9b9;
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 10fr 1fr;
    
}

.nav-items{
    text-align: center;
    margin: auto;
   
}
  
  li {
    float: left;
  }
  
  .nav-items li a{
    font-size: 2vh;
    display: block;
    color: black;
    text-align: center;
    margin: 1vh 1vw;
    text-decoration: none;
    padding: 1px 1px;
    
    
  }


.nav img{
  height: 3vh;

}

  
  /* Change the link color on hover */
  .nav-items li a:hover {
    color: #1e5c9f;

  }





.hero_section .button1:hover, .button2:hover{
  background-color: rgba(31, 31, 31, 0.3);
}

.hero_section img{
  height: 9vw;
  margin: 8vw 0 0 4vw;
}

.hero_section{
    height: 38vw;
    background: url(assets/hero.jpg);
    background-size: 100vw;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: 1fr 1fr;
    
  

}   

.hero_section .button1, .button2{
  background-color: rgba(79, 79, 79, .3);

  color: white;

  border: #1e5c9f 0.2vw solid;
  border-radius: 0.7vw;
  text-decoration: none;
  margin: 1vw;
  width: 16vw;
  padding: 0.2vw;
  
}

.hero_section .button1 a, .button2 a{
  text-decoration: none;
  color: white;
}

.hero_section .div1{
  height: 6vh;
}


.hero_section .div3{
display: grid;
  grid-template-columns: 1fr 3fr 3fr 2fr;
  font-size: 2vw;
  text-align: center;
}

.hero_section .div3 .button1, .button2{
  height: fit-content;
}




footer{
  grid-template-columns: repeat(2, 1fr);
  background-color: #b9b9b9;
  height: 4030h;
  display: grid;
  text-align: center;
}



footer h2 a{

  color: white;
  font-size: 15px;
  text-decoration: none;
}

.footerright{
  text-align: center;
  background-color: #b9b9b9;
  margin: 0;
}


.copyright{
  text-align: center;
  background-color: #b9b9b9;
  margin: 0;
}

.card-deck{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  
}

.card{
  margin: 10px;
}

.card-title{
  font-size: 3vh;
}

.card-text{
  font-weight: 350;
}

.card p{
  color: #5e5e5e;
  font-size: 1.6vh;
}

.card .images{
  display: grid;
  grid-template-columns: 1fr 1fr;
}


.about_pilates_body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  padding: 30px;
}

.about_pilates_help{
  display: grid;
  height: 800px;
}


.about_pilates_help {
  background-color: #c4c4c41e;
  padding: 30px;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  line-height: 300%;
}

.about_pilates_help h4{
    color: #1e5c9f;
}


.about_dancefit_body{
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  padding: 30px;
}

.about_dancefit_body img{
  max-height: 40vh;
  margin: 2vh 8vw;
}


.about_me_body{
  padding: 30px;

}

.about_me_body h5{
  color: #1e5c9f;
}

.about_me_body_top{
  display: grid;
  grid-template-columns: 2fr 1fr;
}

.about_me_body_top img{
  width: 30vw;
}




.title{
  padding: 2vh 2vw 2vh 2vw;
  text-align: center;
}

h5.subtitle{
  padding: 2vh 2vw 2vh 2vw;
}
h6.subtitle{
  padding: 2vh 2vw 2vh 2vw;
  font-weight: 200;
}



table td{
  padding: 2vh 3vw 2vh 3vw;
  border: 5px solid white;
  width: 500px;
}

.table_box {
  display: grid;
  text-align: center;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}


p.locations_body{
  padding: 4vw ;
}


#timetable tr.header{
  font-weight: 700;
  background-color: #1e5c9f;
  color: white;
}


.timetable_body{
  padding: 2vh 3vh 2vw 3vh
}

table tr{
  background-color: rgb(247, 247, 247);
  
}


.contact_body{
  font-size: 20px;
  margin: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
 
}

.contact_body img{
  width: 70px;
  padding: 10px;
}

.contact_body h5{
  font-size: 20px;
}

.newsletter{
  background-color: #f1f1f1;
  padding: 20px;
  height: fit-content;
}


form button{
  padding: 10px;
  margin: 20px;
}

form input{
  padding: 10px;
  width: 32vw;
}

.healthform_body p {
 padding: 2vh 4vw;
 font-size: 20px;
}

.healthform_body a{
  padding: 2vh 4vw;
  

}


.map_container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 20px;
  z-index: 2;

}

#map{ 
  width: 60vw;
  height: 50vh;
  align-items: center;
  margin-bottom: 3vh;
  z-index: 2;
}



.location{
  padding: 3vw ;
}

.location_instructions{
  padding: 2vw;
}

.location_information{
  padding: 2vw;
}


.about_dancefit_what_to_expect{
  display: grid;
  padding: 5vw 5vh;
  background-color: #c4c4c41e;
}



.dropbtn{
  display: none;
}

.dropdown-content a {
  display: none;
}

.dropdown {
  list-style-type: none;
}


/* media queries */

@media  (max-width: 1250px) {
  .nav-items li a {

    display: none;
    
  }

  ul.nav{
    display: none;
  }

  .contact_body{
    display: block;
  }

  form input{
    width: 65vw;
    font-size: 3vw;
  }

  .about_dancefit_body img{
    margin: 0;
    padding: 0;

  }

  .about_dancefit_body, .about_pilates_body{
    display: block;
  }

  .about_me_body_top, .about_pilates_body{
  display: block;
  }

  .about_me_body_top img, .about_pilates_body img{
    display: none;
  }

  .about_pilates_help{
    display: inline-block;
  }



  /* Dropdown Button */
.dropbtn {
  display: inline;
  color: white;
  padding: 16px;
  border: none;

}

.dropbtn img{
  height: 4vw;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
  list-style-type: none;
  z-index: 1;
  
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 30vw;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  width: 30vw;
  z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}



}

@media (max-width: 900px){
  .card-deck{
    display: inline;
      }
      
  .hero_section{
    background: url(assets/hero_mobile.jpg);
    height: 100vw;
    background-size: 100vw;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    }
    
  




}

@media (max-width: 660px){
  .about_dancefit_body img, .about_pilates_body img{
    margin: 0;
    padding: 0;


    display: none;
  }
}