@media screen and (min-width:375px){
*{
margin:0;
padding:0;
}

#MediaGrid .Line{
width:1200px;
display:block;
margin-left:15%;
}

#topper img{
width:15%;
height:10%;
display:block;
margin:auto;
}

#Map iframe{
display:block;
margin:auto;
}

.Lighter{
color:#d7d7d7;
font-size:300;
}
.over{
margin-left:45%;
}block

#Events i{
margin-right:2.5%;
}

body{
background-color:#FFF;
width:100%;
}
iframe{
background-color:#FAF7F7;
}

nav{
width:100%;
height:5%;
background-color:#262026;
position:relative;
}

nav ul{
display:grid;
grid-template-columns:repeat(5, 1fr);
place-items: center;
}

#Past{
display:grid;
grid-template-columns:repeat(4, 1fr);
place-items: center;
}

#DayOne{
display:grid;
grid-template-columns:repeat(7, 1fr);
grid-template-rows:repeat(2, 1fr);
place-items: center;
}

#Community{
display:grid;
grid-template-columns:repeat(5, 1fr);
grid-template-rows:repeat(2, 1fr);
place-items: center;
}

#Allies{
display:grid;
grid-template-columns:repeat(5, 1fr);
grid-template-rows:repeat(2, 1fr);
place-items: center;
}

#Supporters{
display:grid;
grid-template-columns:repeat(5, 1fr);
grid-template-rows:repeat(2, 1fr);
place-items: center;
}

#Friends{
display:grid;
grid-template-columns:repeat(4, 1fr);
grid-template-rows:repeat(2, 1fr);
place-items: center;
}

#Partners{
display:grid;
grid-template-columns:repeat(4, 1fr);
grid-template-rows:repeat(2, 1fr);
place-items: center;
}
#Past img{
height:100%;
}

#DayOne img{
height:100%;
}

#Community img{
height:100%;
}

#Allies img{
height:100%;
}

#Supporters img{
height:100%;
}

#Friends img{
height:100%;
}

#Partners img{
height:100%;
}
.hide button{
display:none;
}

#Partners{
display:grid;
grid-template-columns:repeat(4, 1fr);
grid-template-rows:repeat(2, 1fr);
place-items: center;
}

#MediaGrid{
display:grid;
grid-template-columns:60% 40%;
justify-items: center; 
}
#MediaGrid img{
margin:0;
width:95%;
height:85%;
}



#MediaGrid button{
align-items:end;
padding:0;
margin-left:0;
width:40%;
height:10%;
background-color:#d7d7d7;
}

.HorGrid{
display:grid;
grid-template-columns:repeat(3, 1fr)
}

.HorGrid img{
height:100%;
}

#MediaGrid a{
align-items:end;
font-weight:400;
font-family: "Sriracha", serif;
font-size:20px;
list-style:none;
text-decoration:none;
color:#000;
margin:0;
padding:0;
}

#MediaGrid p{
font-size:3em;
align-items: start;
margin:0;
padding:0;
}
#topper{
width:100%;
height:auto;
background-color:#262026;
}
#Programs p{
font-size:30px;
}

ul{
list-style:none;
display:block;
margin:auto;
}



.item1 button{
margin-top:20%;
}

#videohero{
display:block;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
width:70%;
}

#videohero2{
display:block;
margin:auto;
margin-top:2.5%;
margin-bottom:2.5%;
width:70%;
}

ul li{
display:inline-block;
text-align:center;
margin-left:20px;

}

video{
width:100%;
}

nav ul li a{
text-decoration:none;
color:#edf1db;
font-family:ariel,times,helvitca;
font-size:30px;
}

nav:hover{
height:15%;
transition:all .5s ease-in-out;
}
ul li a:hover{
color:#a6acaf;
transition: all 1s ease-in-out;
}

ul li .unders{
display:none;
position:absolute;
z-index:999;
}

ul li:hover .unders{
display:block;
width:25%;
padding:0;
margin:0;
text-align:left;

}

.unders li{
margin-left:-1.5%;
}
.space{
height:1.5%;
}
h1{
text-align:center;
text-shadow:.5px .25px #ffe66e;
font-size:55px;
}

h3{
font-size:45px;
}

h4{
font-size:40px;
}

h5{
font-size:35px;
font-weigth:700;
text-align:center;

}
.icons li{
width:10%;
margin-left:80px;
margin-top:1.5%;
}

#contact p{
margin-left:10px;
}

.fa-tiktok{
font-size:70px;
color:#edf1db;
}

.fa-instagram{
font-size:70px;
color:#edf1db;
}

.fa-youtube{
font-size:70px;
color:#edf1db;
}

.fa-facebook{
font-size:70px;
color:#edf1db;
}

.fa-linkedin{
font-size:70px;
color:#edf1db;
}


.fa-blogger-b{
font-size:70px;
color:#edf1db;
}


.fa-blogger-b:hover{
transition: all .5s ease-in-out;
color:#FF5722;
}



.fa-tiktok:hover{
text-shadow: 4px 8px #69c9d0;
transition: all .5s ease-in-out;
color:#ee1d52;
}

.fa-instagram:hover{
transition: all .5s ease-in-out;
color:#c32aa3;
}

.fa-youtube:hover{
transition: all .5s ease-in-out;
color:#ff0000;
}

.fa-facebook:hover{
transition: all .5s ease-in-out;
color:#1877f2;
}

.fa-linkedin:hover{
transition: all .5s ease-in-out;
color:#0a66c2;
}

#PicLine{
display:flex;
grid-template-columns:repeat(4, 1fr);
width:100%;
}

#PicLine img{
width:25%;
height:350px;
display:flex;
grid-template-columns:repeat(4, 1fr);
}

#footer{
background-color:#262026;
width:100%;
height:auto;
}

.Line{
border-bottom: solid 10px gold;
width:80%;
display:block;
margin:auto;
}

img{
display:block;
margin:auto;
width:50%;
height:25%;
}

h2{
font-size:25px;
text-align:center;
}
#footer p{
color:#edf1db;
font-size:70%;
margin-left:1%;
}

.fa-envelope{
font-size:60px;
margin-left:1.5%;
color:#edf1db;
}

.fa-phone{
font-size:60px;
margin-left:2%;
color:#edf1db;
}

#AboutUS img{
margin-top:1.5%;
color:#edf1db;
}

.focused{
margin-top:5%;
margin-bottom:5%;
font-size:30px;
}

.Holdbox{
width:50%;
height:50%;
background-color:#000;
border-radius:10px;
background-color:#d9d9d9;
display:block;
margin:auto;
}

.Holdbox img{
filter: grayscale(90%);
width:50%;
height:50%;
}

.holder a{
display:block;
margin:auto;
color:#000;
font-size:50px;
text-align:center;
text-decoration:none;
font-weight:700;
font-family: "Sriracha", serif;
}

.Large img{
width: 80%;
}

.words{
font-family: "Actor", serif;
  font-weight: 400;
  font-style: normal;
font-size:20px;
padding-left:1.5%;
padding-right:1.5%;
}

.tinyfont{
font-size:10px;
}

#Programs a{
display:block;
margin:auto;
color:#000;
font-size:30px;
text-align:center;
text-decoration:none;
width:100%;
}

#footer a{
text-dedcoration:none;
color:#edf1db;;
list-style:none;
margin-left:1%;
}

#contact i{
color:#edf1db;
padding-right:1%;
}

#contact p{
color:#edf1db;
}

#contact{
color:#edf1db;
}
#contact a{
list-style:none;
text-decoration:none;
padding-right:1%;
font-size:10px;
color:#edf1db;
}

button{
width:40%;
height:10%;
background-color:#d7d7d7;
display:block;
margin:auto;
border-radius:100px;
margin-bottom:1.5%;
}

.Top a{
font-size:30px;
list-style:none;
text-decoration:none;
color:#262026;
}
.Top i{
color:#262026;
font-size:100px;
font-weight:900;
margin:0;
box-shadow:4px 8px #e8d162;
margin-bottom:1.5%;
margin-right:3.5%;
margin-top:1.5%;
}

button a{
font-weight:700;
font-family: "Sriracha", serif;
font-size:50px;
list-style:none;
text-decoration:none;
color:#262026;
}
}

}
@media screen and (min-width:412px){
nav ul li a{
font-size:20px;
padding-left:55px;
}

}
@media screen and (min-width:768px){
ul li:hover .unders{
margin-left:0;
}

h2{
font-size:40px;
}
h3{
font-size:35px;
}
h4{
font-size:27.5px;
}
.focused{
font-size:30px;
}
.tinyfont{
font-size:15px;
}

p{
font-size:30px;
}

#contact a{
font-size:30px;
}

#contact i{
margin-right:.5%;
color:#edf1db;
}

#contact p{
font-size:30px;
}

p{
font-size:20px;
}
}
@media screen and (min-width:1024px){
img{
height:40%;
}
#topper img{
height:15%;
}
.tinyfont{
font-size:20px;
}

nav ul li a{
padding-left:50px;
}

#contact a{
font-size:30px;
}

#contact i{
margin-right:1.5%;
color:#edf1db;
}

#contact p{
font-size:40px;
}

p{
font-size:30px;
}
.Holdbox{
width:70%;
height:1200px;
background-color:#000;
border-radius:10px;
background-color:#d9d9d9;
display:block;
margin:auto;
}

.Holdbox img{
width:50%;
height:40%;
}


.item1 button{
margin-top:40%;
}

}
@media screen and (min-width:1280px){
p{
font-size:30px;
}

nav ul li a{
font-size:32.5px;
margin-left:40px;
}
ul li{
margin-left:15px;
}

.unders li{
margin:0;
}

nav{
height:10%;
}

.tinyfont{
font-size:25px;
}

nav:hover{
height:20%;
}
#footer a{
text-dedcoration:none;
color:#edf1db;
list-style:none;
margin-left:1%;
}
.icons li{
margin-left:125px;
}

#contact p{
font-size:50px;
}
#contact a{
font-size:50px;
}
#topper img{
height:20%;
}

img{
height:70%;
}

#contact i{
color:#edf1db;
margin-right:2%;
}
.over{
float:left;
padding-left:1200px;
margin-top:-4%;
}
#Events i{
margin-right:2.5%;
}

}