/* Garza Graphics Studios */
/* CSS created by Garza Graphics Studios 2018*/

@media only screen and (max-width: 600px){
    main {
        width: 95%;
    }
    header {
        height: 6em;
        background-position: center;
        background-size: contain;
    }
     #homeLink {
        height: 7em;
        width: 90%;
    }
    nav {
        height: 3em;
        font-size: 1em;
        
    }
    
    nav ul, nav li {
        display: inline-block;
        margin: 0;
        padding: 0;
        text-align: center;
        line-height: 3em;
        width: 45%;
    }
    nav a:link, nav a:visited{
        text-decoration: none;
        color: #f5a72b;
        width: 4em;
    }
    nav ul {
        width: 100%;
    }
    nav a:hover, nav li:hover {
        color: white;
        background-color: #2a2a2a;
        border: 1px;
    }
    .photoBox, img {
        width: 100%;
    }

    .fSideLft {
        width: 95%;
        padding: .5em;
    }
    .fBoxCtr {
        width: 95%;
        padding: .5em;
        text-align: center;
    }
    .fSideRt {
        width: 95%;
        height: 5em;
        padding: .5em;
        background-image: url(images/GGLogoSM.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    
}

@media only screen and (min-width: 601px){
    
    main {
        width: 85%;
    }
    
    header {
        height: 9em;
        background-origin: content-box;
    }
    #homeLink {
        height: 9em;
        width: 40%;
    }
    nav {
        height: 2.5em;
        text-align: center;
    }
    nav ul, nav li, nav a:link, nav a:visited {
        padding: 0;
        margin:  0 20px;
        display:inline-block;
        text-decoration: none;
        text-align: center;
        color: #f5a72b;
        line-height: 2.5em;
        
    }
    
    nav a:hover {
        color: white;
        background-color: #2a2a2a;
    }
    .fSideLft {
        width: 15%;
        padding: .5em;
        float: left;
    }
    
    .photoBox{
        width: 48%;
        margin-right: 1%;
        float: left;
        
    }
    .photoBox img{
        width: 90%;
        
    }
    .fBoxCtr {
        width: 65%;
        padding: .5em;
        text-align: center;
        float: left;
    }
    .fSideRt {
        width: 10%;
        height: 4em;
        margin: .8% 0;
        padding: .5em;
        background-image: url(images/GGLogoSM.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        float: right;
    }

    
}

body {
    margin: 0;
    font-family: sans-serif;
    background-color: black;
    background-image: url(images/cave-art.png);
    background-repeat: no-repeat;
    background-size: cover;
    color: #9a9a9a;
    
}
main {
    min-width: 320px;
    margin: 0 auto;
    background-color: rgba(51, 51, 51, 0.92);
    overflow: hidden;
}
 .hLink, .hLink a:link, .hLink a:visited {
     text-decoration: none;
     color: #f5a72b;
     text-align: center;
}
a:link, a:visited {
    text-decoration: none;
    color: #f5a72b;
}
a:hover {
    color: #ffffff;
}
header {
    padding: 1.5em 1em;
    background-image: url(images/GGLogoOL.png);
    background-repeat: no-repeat;
    
}
.boxColor222{
    background-color: #222;
    border-top: 1px solid rgba(245, 167, 43, 0.29);
    border-bottom: 1px solid rgba(245, 167, 43, 0.29);
}

section {
    min-height: 20em;
    padding: .2em 2em;
    
}

article.mainScreen {
    padding: 4em 0em;
}
article.highLiteBox {
    overflow: hidden;
    border-top: 1px solid rgba(245, 167, 43, 0.15);
    border-bottom: 1px solid rgba(245, 167, 43, 0.15);
}
footer {
    min-height: 6em;
    clear: both;
}