/**************************************************************************
    Resolution Max-Width: 1600
***************************************************************************/
#products, #products ul  {
    list-style: none;
}
#products a {
    text-decoration: none;
    color: black;
}
body {
    background: url(/media/pictures/bg1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.background-small {
    width: 70%;
    height: 100%;
    background-color: rgba(255,255,255,0.7);
    margin: 0 auto;
    border-radius: 30px;
    padding: 25px 50px
}
.background-large {
    width: 70%;
    background-color: rgba(255,255,255,0.7);
    margin: 0 auto;
    border-radius: 30px;
    padding: 25px 50px
}
#callback {
    float: right;
    margin-right: 5%; 
}

.icon {
    width: 50px;
    height: 50px;
}

#logo {
    width: 25%;
    margin-left: 5%;
}

#pageTitle {
    margin-right: 10%;
    float:right;
}

nav {
    padding: 0 auto;
    max-width: 95%;
    margin: 0 auto;
    font-size: 1pc;
}

nav a:hover {
    text-decoration: underline;
    color: brown;
}

nav {
    background: green;
    border-radius: 30px;
}

nav ul {
    background: green;
    border-radius: 30px;
}

nav ul > li {
    float: left;
    list-style: none;
}

nav ul > li > a {
    display: block;
    text-decoration: none;
    padding: 7.5px 22px;
    position: relative;
    color: #000;
}

nav ul > li > ul {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

nav ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    position: absolute;
    border-radius: 0 0 3px 3px;
    z-index: 1;
}

nav ul > li > ul {
    width: 200px;
    position: absolute;
}
nav ul > li > ul > li {
    float: none;
    position: relative;
}
/*draws a barier around the nav ul and makes the unfloated elements below move down*/
nav  ul {
    overflow: hidden;
}

.navBlock {
    padding: 0 3.25%
}
.mainPic {
    max-width: 75%;
    display: block;
    margin: 0 auto;
}
#barrier {
    height: 100px;
    width: 50px;
    float: left
}
footer p {
    text-align: center;
}
footer ul {
    float: left;
    list-style: none;
}
#footerLeft {
    margin: 0 32%;
}
#footerRight {
    margin: 0 32%;
}

/**************************************************************************
    Resolution Max-Width: 1366
***************************************************************************/
@media screen and (max-width: 1366px){

    #footerLeft {
        margin: 0 18%;
    }
    #footerRight {
        margin: 0 18%;
    }
    nav ul > li > a {
        padding: 7.5px 14px;
    }
}

/**************************************************************************
    Resolution Max-Width: 1024
***************************************************************************/
@media screen and (max-width: 1024px){

    #footerLeft {
        margin: 0 16%;
    }
    #footerRight {
        margin: 0 16%;
    }
    nav ul > li > a {
        padding: 7.5px 10px;
    }

}
/**************************************************************************
    Resolution Max-Width: 960
***************************************************************************/
@media screen and (max-width: 960px){

    #footerLeft {
        margin: 0 12%;
    }
    #footerRight {
        margin: 0 12%;
    }
    nav ul > li > a {
        padding: 7.5px 0px;
    }
}
/**************************************************************************
    Resolution Max-Width: 800
***************************************************************************/
@media screen and (max-width: 800px){
    #pageTitle {
        float: none;
        padding: 0 45%;
    }
    #logo {
        width: 100%
    }
    nav ul > li {
        float: none;
        text-align: center;
    }
    #footerLeft {
        margin: 0 10%;
    }
    #footerRight {
        margin: 0 0%;
    }
    .mainPic {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    nav ul > li:hover > ul {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        border-radius: 0 0 3px 3px;
        z-index: -5;
    }
}
/**************************************************************************
    Resolution Max-Width: 720
***************************************************************************/
@media screen and (max-width: 720px){
    #pageTitle {
        float: none;
        padding: 0 45%;
    }
    #logo {
        width: 100%
    }
    nav ul > li {
        float: none;
        text-align: center;
    }
    #footerLeft {
        margin: 0 0%;
    }
    #footerRight {
        margin: 0 0%;
    }
    .mainPic {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    nav ul > li:hover > ul {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        border-radius: 0 0 3px 3px;
        z-index: -5;
    }
}
/**************************************************************************
    Resolution Max-Width: 650
***************************************************************************/
@media screen and (max-width: 650px){
    #pageTitle {
        float: none;
        padding: 0 45%;
    }
    #logo {
        width: 100%
    }
    nav ul > li {
        float: none;
        text-align: center;
    }
    #footerLeft {
        margin: 0 15%;
    }
    #footerRight {
        margin: 0 25%;
    }
    #barrier {
        visibility: hidden;
    }
    .mainPic {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    nav ul > li:hover > ul {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        border-radius: 0 0 3px 3px;
        z-index: -5;
    }
}
/**************************************************************************
    Resolution Max-Width: 600
***************************************************************************/
@media screen and (max-width: 600px){
    #pageTitle {
        float: none;
        padding: 0 45%;
    }
    #logo {
        width: 100%
    }
    nav ul > li {
        float: none;
        text-align: center;
    }
    #footerLeft {
        margin: 0 15%;
    }
    #footerRight {
        margin: 0 25%;
    }
    #barrier {
        visibility: hidden;
    }
    .mainPic {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    nav ul > li:hover > ul {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        border-radius: 0 0 3px 3px;
        z-index: -5;
    }
}
/**************************************************************************
    Resolution Max-Width: 480
***************************************************************************/
@media screen and (max-width: 480px){
    #pageTitle {
        float: none;
        text-align: center;
    }
    #logo {
        width: 100%
    }
    nav ul > li {
        float: none;
        text-align: center;
    }
    #footerLeft {
        margin: 0 10%;
    }
    #footerRight {
        margin: 0 25%;
    }
    #barrier {
        visibility: hidden;
    }
    .mainPic {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    nav ul > li:hover > ul {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        border-radius: 0 0 3px 3px;
        z-index: -5;
    }
}
/**************************************************************************
    Resolution Max-Width: 400
***************************************************************************/
@media screen and (max-width: 400px){
    #pageTitle {
        float: none;
    }
    #logo {
        width: 100%
    }
    nav ul > li {
        float: none;
        text-align: center;
    }
    #footerLeft {
        margin: 0 7%;
    }
    #footerRight {
        margin: 0 1%;
    }
    #barrier {
        visibility: hidden;
    }
    .mainPic {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    nav ul > li:hover > ul {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        border-radius: 0 0 3px 3px;
        z-index: -5;
    }
    body {
        margin: 0;
    }
}
/**************************************************************************
    Resolution Max-Width: 360
***************************************************************************/
@media screen and (max-width: 360px){
    #pageTitle {
        float: none;
    }
    #logo {
        width: 100%
    }
    nav ul > li {
        float: none;
        text-align: center;
    }
    #footerLeft {
        margin: 0 1%;
    }
    #footerRight {
        margin: 0 1%;
    }
    #barrier {
        visibility: hidden;
    }
    .mainPic {
        width: 100%;
        display: block;
        margin: 0 auto;
    }
    nav ul > li:hover > ul {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        border-radius: 0 0 3px 3px;
        z-index: -5;
    }
    body {
        margin: 0;
    }
}