/* General page styling*/
html{
    line-height: 2; /* Sets the line height to 2 times the current font-size - eg if font size is 1.5rem, line height = 3rem. */
   
}
body {
    font-family: 'Cairo', sans-serif; /* Web font. San-serif is the 'fall-back' font - in case the web font does not load. */
    font-size: 100%;
}

header {
    background: #28bec2; /*Gradient background colour*/
}

.container {
  background-color: #EEEE;
}

/*Link styling*/
a {
  color: #eeeeee;
  text-decoration: none; /*no underlining of link*/
}
/*Open animation for burger menu*/
.menu-open {
  transform: translate(0px, 930px);
}

nav {
  background-color: #28bec2;
} 
/*nav blocks styling*/
nav li {
  display: block;
}
/*Nav text styling*/
nav li a {
  background-color: none;
  border: 2px solid transparent;
  color: #eeeeee ;
  display: block;
  font-size: 1.1rem;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;

}

nav li a:hover, nav li a:focus {
  background: #cdd0d1;
  border-color: transparent;
  color:#CAF0F8;
}



/* Menu 'burger' icon */

.burger {
    margin-left: 85%;
}


/* Background for the 'burger' */
 .toggle {
  background:#404446;
  color: crimson;
  cursor: pointer;
  display: block;
  left: -65px;
  position: absolute;
  padding: 15px 15px 10px;
}

/*Styling of the individual bars that make up the burger.*/
.toggle .bar1,
.toggle .bar2,
.toggle .bar3 {
  background: black;
  height: 4px;
  margin-bottom: 8px;
  transition: all 3.0s; /*Speed of transition from bars to cross (when tapped)*/
  width: 35px;
}

/* Change it to an X */
.burger.open .toggle .bar1 {
  transform: rotate(45deg) translate(8px, 11px);
}
.burger.open .toggle .bar2 {
  opacity: 0;
}
.burger.open .toggle .bar3 {
  transform: rotate(-45deg) translate(5px, -10px);
}

/*styling of the footer size*/
footer {
  width: 100%;
  padding: 1%;
  background-color: rgb(47, 190, 194);
  margin:0 auto;
  text-align: center;
}

/*The following two styling are used to adjust the image size in the footer*/
.icon {
  float: left;
  width: 20%;
}

.address_int {
  width: 80%;
}

/*Limit the length of hr*/
#hr {
  margin: 0 8% 0 8%;
}

/*The following styling is for the about us section on the home/index page*/
#aboutus {
  display:inline-block;
  float: left;
  overflow: hidden;
  text-align: justify;
  padding: 10px;
}

#values h1 {
  text-decoration: underline;
  padding-left: 35%;

}

#values {
  display: inline-block;
  float: left;
}

/*The following two styles are applied to the safety page*/
#safetypage {
  padding: 0 5% 0 5%;
  margin: 2% 0 2% 0; 
}

#safetypage h1 {
  text-align: center;
  text-decoration: underline;
}

/*The following two styles are applied to the contact us page*/
#contactinfo {
  padding: 0 5% 0 5%;
  margin: 2% 0 2% 0; 
}

#google-map {
  width: 100%;
  height: 450px;
}

/*The following styles are applied to the fees page*/
#feespage {
  padding: 0 5% 0 5%;
  margin: 2% 0 2% 0; 
}

#feespage h1 {
  text-align: center;
  text-decoration: underline;
}
.float {
  float: left;
}

main { /*The following styling is for the main on each page, for content*/
  display: inline-block;
  width: 100%;

}

.gallery a {/*The following styling is to add gaps above each image in the gallery*/
  margin-top: 10px;
  
}





/*The following styling is only applied when the viewport is at least 750px wide - ie bigger screens*/
@media (min-width: 992px) {
  
  /*'burger' not displayed*/
  nav .toggle, .burger {
    display: none;
  }

  /*Menu in inline block (across top of screen)*/
  nav {
    margin: 0;
    padding: 95px 0;
    width:100%;

  }

  /*Items on menu are also an inline-block (rather than under each other)*/
  #menu li{
    display: block;
    padding:50px 50px;
    width: 100%;
    
  }

  nav li {
    padding:0px 35px;
    text-align: center;
  }

  nav li a {
    text-align: center;
  }

  .gallery a {
    padding: 1%;
  }

  



 

/*The following styling is only applied when the viewport is at least 1200px wide - ie bigger screens*/
@media (min-width: 1200px) {

  nav li{
    padding:0px 50px;
  }

  #aboutus p {
    font-size:1.2rem;

  }



  #aboutus {
    padding-top: 10px;
  }

  /*This styling is used to adjust the font size of the paragraph under lg size*/
  #guidelines p {
    font-size:140%;

  }



}

@media (min-width: 1400px) {

  nav li{
    padding:0px 68px;
    
  }
  #aboutus p {
    font-size:1.4rem;

  }

  /*This styling is used to adjust the font size of the paragraph under md size*/
  #guidelines p {
    font-size:160%;

  }
  .images {
    margin-left: 3%;
  }
}
}