@font-face {
  font-family: 'Exan';
  src: URL('fonts/Exan-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Niconne';
  src: URL('fonts/ArchitectsDaughter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Lato';
  src: URL('fonts/VarelaRound-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'LatoL';
  src: URL('fonts/VarelaRound-Regular.ttf') format('truetype');
}
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-height: 100%;
  min-width: 100%;
  }
h2 {
  background-color: rgba(153, 153, 153, 0.2);
  padding-top: 1%;
  padding-left: 1%;
  padding-bottom: 1%;
  margin: 0;
  font-family: Exan;
  color: white;
  font-size: 1.5vw;
 }
 p {
  font-family:LatoL; color: white; font-size:1.2vw; padding-left: 1%; padding-bottom: 1%;
 }
  ul {
   margin: 0;
   font-family:LatoL;
   color: white;
   font-size: 1vw;
 }
 .bottom {
   background-color: rgba(255, 255, 255, 0.9);
   padding: 1%;
 }
 .clearfix::after {
   content: "";
   clear: both;
   display: table;
 }
 .clearfix {
   display: block;
   padding-bottom: 1%;
 }
 .intro.active .clearfix {
   display: block;
   padding-bottom: 1%;
 }
 .navbar {
   overflow: hidden;
   background-color: black;
 }

 .navbar a {
   float: left;
   font-size: 0.9vw;
   color: white;
   font-family: Exan;
   text-align: center;
   padding: 0.8vw 1vw;
   text-decoration: none;
 }

 .dropdown {
   float: left;
   overflow: hidden;
 }

 .dropdown .dropbtn {
   font-size: 0.9vw;
   border: none;
   outline: none;
   color: white;
   padding: 0.8vw 1vw;
   background-color: inherit;
   font-family: Exan;
   margin: 0;
 }

 .navbar a:hover, .dropdown:hover .dropbtn {
   background-color: red;
 }

 .dropdown-content {
   display: none;
   position: absolute;
   background-color: black;
   min-width: 160px;
   box-shadow: 0vw 0.5vw 1vw 0vw rgba(0,0,0,0.2);
   z-index: 1;
 }

 .dropdown-content a {
   float: none;
   color: white;
   padding: 0.7vw 1vw;
   font-family: Exan;
   text-decoration: none;
   display: block;
   text-align: left;
 }

 .dropdown-content a:hover {
   background-color: #333;
 }

 .dropdown:hover .dropdown-content {
   display: block;
 }
 
 .introg {
   font-family:Niconne; color: white; font-size:1.5vw; padding-top: 2.5%;
 }
 @media only screen and (max-width: 780px) {
 .introg {
   font-family:Niconne; color: white; font-size:2vw; padding-top: 3%;
 }	 
 p {
  font-family:LatoL; color: white; font-size:3.5vw; padding-left: 2%; padding-bottom: 2%; padding-right: 2%;
 }
 h2 {
  background-color: rgba(153, 153, 153, 0.2);
  padding-top: 2%;
  padding-left: 2%;
  padding-bottom: 2%;
  margin: 0;
  font-family: Exan;
  color: white;
  font-size: 3.2vw;
 }
 ul {
   margin: 0;
   font-family:LatoL;
   color: white;
   font-size: 2.8vw;
 }
  .navbar a {
   float: left;
   font-size: 2.1vw;
   color: white;
   font-family: Exan;
   text-align: center;
   padding: 2vw 2.6vw;
   text-decoration: none;
 }

 .dropdown {
   float: left;
   overflow: hidden;
 }

 .dropdown .dropbtn {
   font-size: 2.1vw;
   border: none;
   outline: none;
   color: white;
   padding: 2.1vw 2.6vw;
   background-color: inherit;
   font-family: Exan;
   margin: 0;
 }

 .navbar a:hover, .dropdown:hover .dropbtn {
   background-color: red;
 }

 .dropdown-content {
   display: none;
   position: absolute;
   background-color: black;
   min-width: 160px;
   box-shadow: 0vw 1.6vw 2.1vw 0vw rgba(0,0,0,0.2);
   z-index: 1;
 }

 .dropdown-content a {
   float: none;
   color: white;
   padding: 1.9vw 2.6vw;
   font-family: Exan;
   text-decoration: none;
   display: block;
   text-align: left;
 }
 .bg {
	 padding-bottom: 10%;
 }
}