*{margin:0px}

body{max-width: 1200px;
margin: auto;
background-color: grey;}

h1 {font-size: 4vw;
text-align: center;}

h2 {font-size: 3vw;
text-align: center;
color:black}

a {font-size: 5vw;
color:#ff5e00;}
.grid-container {
	display: grid;
	
	
} 

 .grid-container > div {  
    padding: 4vw 3vw ;
    font-size: 3.5vw;
    font-weight: 550;
    font-family:'raleway'; 
  }

.header {background-color: white;}
.logo {width: 60%;
margin: auto;}

.header > h1 { max-height: 10vw;
  justify-self:left ;
  align-self: start;
  }

.top{display:grid;
  grid-template-columns: 1fr 1fr;
  height: 10vw;
  align-items: center;
  background-color: rgb(235, 75, 17);
 }
 .top > div > h1 {
  font-size: 5vw;
align-self:flex-end ;

}

.nav{max-height: 5vw;
  max-width: 20vw;
  justify-self:start ;
  align-self:center;
  padding: 1vw;

}



.grid-container  {background-color: white;
  
}

.grid-container > div.article2 {
  background-color:rgb(235, 75, 17) ;
  border-radius:20px;
}

.grid-container > div.article3  {
  background-color: grey;
 
  color:white;
 
}
.grid-container div.article3 ul li {font-size: 3vw;}
.grid-container div.article3 img {width: 100%;}

.grid-container > div.pic{padding: 0px;} 
 
.dropbtn {height: 5vw;
  min-width: 10vw;
  

}


/* Dropdown button on hover & focus */
.dropbtn:hover {
  background-color: #F1F1F1;
}

.dropdown {
	
  display: inline-block;
  text-align: left;
  position:relative;
  
}

.dropdown-content {
  display: none;
  background-color:black;
  opacity:99%;
  
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 20;
  
}
.dropdown-content a {
  color: rgb(235, 75, 17);
  padding: 5px 5px;
  text-decoration: none;
  display: block;
}

.show {display:block;}
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

.main{background-color:rgb(235, 75, 17);color:black;
min-height: 5vw;
}

.card{background-color:rgb(8, 141, 128);color:black;
  min-height: 5vw;
  width: 75%;
  margin: auto;
  margin-top: 25px;
  margin-bottom: 25px;
  border-radius: 10px;
  }

.card div p {text-align: center;}
.card > div > a > img {border-radius: 50%;
  width: 100%;
  padding-top: 2vw;
  padding-bottom:2vw;
}
.card a {font-size: 3.5vw;}
.card div a {color: black;
font-size: 3.5vw;}

.footer{background-color: black;
color: white;
text-align: center;}






@media only screen and (min-width: 200px) {
.grid-container {
  display: grid;
  grid-template-columns: 1fr ;
}


@media only screen and (min-width: 950px) {
  a {font-size: 2vw;}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  
  
}
.grid-container > div {font-size: 1.8vw;}

.grid-container div h1 {text-align: center;
  font-size: 3vw;}

  .grid-container div a{font-size: 3vw}

.header {
grid-column: 1 /span 2;
}
.header > h1 { max-height: 10vw;
  justify-self:left ;
  align-self: start;
  padding-top: 1vw;
padding-left: 12vw;}
h1 {text-align: center;}

.banner {
grid-column: 1 / span 2;
}

.main{
	grid-column: 1 / span 2;
}
.footer{
	grid-column: 1/ span 2;
} 

.grid-container div.article3 ul li {
line-height: 0.5vw;}