/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html {
  overflow-x:hidden;
}

body {
  margin: 0 0 0 0;
  background-color: #efefef;
  color: black;
  font-family: 'roboto', sans-serif;  
}

header {
  background-color: #fff;
  background-image: url('https://i.imgur.com/mZZ7aIG.jpg');
  background-repeat: no-repeat;
  background-position: center;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

header #text {
  font-family: 'varela round', sans-serif;
  color: #ffffff;
  font-size: 50pt;
  font-weight: bold;
  position: absolute;
  vertical-align: middle;
  top: 75vh;
  left: 130px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
  
header img {
  height: 100px;
  line-height: 100px;
  position: absolute;
  top: 80vh;
  left: 45px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

header.smaller {
  background-color: #fff;
  background-image: none;
  width: 100%;
  height: 90px;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

header.smaller #text{
  font-family: 'varela round', sans-serif;
  color: #418257;
  font-size: 20pt;
  font-weight: bold;
  margin-left: 100px;
  vertical-align: middle;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
  
header.smaller img {
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: 15px;
  left: 45px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}  
  

footer {
  font-family: 'varela round', sans-serif;
  overflow-x: hidden;
}


div {
  margin: 0 0 0 0;
  font-family: 'roboto', sans-serif;
  font-size: 14pt;
  overflow-x: hidden;
}

#headerphoto {
  height: 50vh;
  background-color: #e9e9e9;
  background-image: url('https://i.imgur.com/mZZ7aIG.jpg');
  background-position: center -90px;
  background-repeat: no-repeat;
  background-size: 70%;
}

#maintext {
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.5);
}

.text {
  margin-left: 20%;
  margin-right: 20%;
}
  
#socialmedia {
  font-size: 20pt;
  margin: 0 0 0 0;
  background-color: #418257;
  width: 100%;
  height: 5vw;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #fff;
}

#lastfooter {
  font-size: 20pt;
  margin: 0 0 0 0;
  background-color: #284F35;
  width: 100%;
  height: 10vw;
  overflow-x: hidden;
  overflow-y: hidden;
  color: #fff;
}