/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*RESPONSIVE GRID*/


/*VERT NAV*/
@media screen and (max-width: 850px){
li {
float:none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: rgb(0, 0, 0);
}
li a {
display: block;
color: rgb(255, 255, 255);
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {background-color: rgb(180, 177, 177); color: rgb(255,255,255);}
}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/*VERT NAV*/
@media screen and (max-width: 650px){
li {
float:none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: rgb(0, 0, 0);
}
li a {
display: block;
color: rgb(255, 255, 255);
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {background-color: rgb(180, 177, 177); color: rgb(255,255,255);}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
@media screen and (max-width: 590px){
li {
    float:none;
    }

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: rgb(0, 0, 0);
}
li a {
display: block;
color: rgb(255, 255, 255);
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: rgb(180, 177, 177); color: rgb(255,255,255);}
}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
@media screen and (max-width: 395px){
li {
    float:none;
    }
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: rgb(0, 0, 0);
}
li a {
display: block;
color: rgb(255, 255, 255);
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {background-color: rgb(180, 177, 177); color: rgb(0, 0, 0);}
}
@media screen and (max-width: 850px){
[class^='grid-mod'] {
grid-template-columns: 17em;
grid-template-rows: auto;
font-size: 1.9em;
}
[class^='grid-mod'] h6 {text-align: center;}
main {margin-left: 4em;}
.content { text-align: center;}
.modal-content {width: 30%;}
}

@media screen and (max-width: 650px){
[class^='grid-mod'] {
grid-template-columns: 12em;
grid-template-rows: auto;
font-size: 1.2em;
}
[class^='grid-mod'] h6 { text-align: center;}
main {margin-left: 6em;}
.content {text-align: center;}
.modal-content {width: 30%;}
}

@media screen and (max-width: 590px){
[class^='grid-mod'] {
grid-template-columns: 14em;
grid-template-rows: auto;
font-size: 1.2em;
}
[class^='grid-mod'] h6 {text-align: center;}
main {margin-left: 2em;}
.content {text-align: center;}
.modal-content {width: 30%;}
}

@media screen and (max-width: 395px){
[class^='grid-mod'] {
grid-template-columns: 12em;
grid-template-rows: auto;
font-size: 0.8em;
}
[class^='grid-mod'] h6 {
text-align: center;
}
main {
margin-left: 4em;
}
.content {
text-align: center;
}
.modal-content {
width: 30%;
}
}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/* Media queries for tablets */
@media (max-width: 768px) {
.modal-content {
font-size: 1em;
width: 90%;
margin: 10% auto;
}
.gallery img {
width: 80px;
height: auto;
}
.close {
margin-right: 5px;
padding-right: 5px;
}
}
/* Media queries for mobile devices */
@media (max-width: 480px) {
.modal-content {
font-size: 0.7em;
width: 95%;
margin: 5% auto;
}
.gallery img {
width: 60px;
height: auto;
}
.close {
margin-right: 5px;
padding-right: 5px;
}
}

@media screen and (max-width: 500px){
footer {
font-size: 75%;
}
}