* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}
:root   
    {
    font-size: 62.5%;
    }
body 
    {
    background-image: url(../images/css-background.jpg);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.8rem; /* rem stands for root em - 1.4rem is equivalent to 14px */
    }
.bodyimage-wrap
    {
    overflow: hidden;
    }
.bodyimage-bg
    {
    opacity: 0.4;
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    }
.bodyimage-content
    {
    position: relative;
    }
header 
    {
    background-color: rgb(6, 240, 248);
    min-height: 100px; /* fixed height instead of min-height */
    padding: 8px 8px 20px 8px;
    position: fixed; top: 0; left: 0;
    width: 100%; /* return the header block to its natural 100% width */
    z-index: 9; /* controls the layering of positioned elements. Bigger number is on top */
    }

#slanted-design-element 
    {
    background-color: rgb(77, 241, 247);
    min-height: 250px;
    transform: skewY(4deg);
    z-index: 8;
    margin-bottom: 50px;
    }
h1
    {
    background-color: rgb(236, 228, 228);
    box-shadow: inset 0px 0px 4px 3px rgb(248, 246, 246);
    margin-left: 15%; margin-right: 15%; margin-top: 5px; margin-bottom: 2px;
    padding: 8px 8px;
    text-align: center;
    text-shadow: 0px 0px 3px rgb(169, 170, 169);
    color: rgb(26, 27, 27);
    font-size: 3rem;
    border: 2px solid white;
    z-index: 100;
    }
h2
    {
    background-color: rgb(209, 208, 203);
    padding: 8px 8px;
    margin-left: 30%;
    margin-right: 30%;
    color: rgb(51, 54, 53);
    font-size: 2.5rem;
    text-align: center;
    border-radius: 5%;
    }
/* styles for nav menus 1 */
nav#nav1 
    {
    margin: 50px;
    position: fixed auto;
    }
nav#nav1 ul
    {
    list-style-type: none; /* change to square or circle..*/
    text-align: center;
    margin: 10px;
    }
nav#nav1 li
    {
    border: 2px solid yellow;
    display: inline-block;
    margin: 10px;
    height: 300px;
    width: 300px;
    margin-top: 10%;
    }

nav#nav1 a
    {
    height: 100%;
    width: 100%;
    display: block;   
    background-size: cover;
    text-decoration: none;
    font-weight: bold;
    overflow: hidden;
    }
nav#nav1 a span
    {  
    background-color: rgb(252, 153, 5);
    display: inline-block;
    transform: translateY(-60px);
    transition: 300ms ease-in-out;
    color: rgb(250, 250, 249);
    font-size: 2rem;
    }
nav#nav1 a:hover span
    {
    transform: translateY(50px)
    }

nav#nav1 li:nth-child(1) a
    {
    background-image: url(../images/scarpa-thumb.jpg);
    background-position: 60%;
    background-size: 100%;
    }
    nav#nav1 li:nth-child(2) a
    {
    background-image: url(../images/samsung-thumb.png);
    background-position: 40%;
    background-size: 100%;
    
    }
    nav#nav1 li:nth-child(3) a
    {
    background-image: url(../images/asolo-thumb.jpg);
    background-position: 40%;
    background-size: 100%;
    }
    nav#nav1 li:nth-child(4) a
    {
    background-image: url(../images/zamberian-thumb.png);
    background-size: 170%;
    background-position: 60%;
    }
    nav#nav1 li:nth-child(5) a
    {
    background-image: url(../images/la-sportiva-thumb.png);
    background-size: 140%;
    background-position: 40%;
    }
    nav#nav1 li:nth-child(6) a
    {
    background-image: url(../images/salewa-thumb.png);
    background-position: 50%;
    }
    
/* swaps the hover to a new picture */
nav#nav1 li:nth-child(1) a:hover
    {
    background-image: url(../images/scarpa-horz.jpg);
    background-position: 20%;
    background-size: 150%;
    
    }
nav#nav1 li:nth-child(2) a:hover
    {
    background-image: url(../images/samsung-horz.jpg);
    background-position: 5%;
    background-size: 100%;
    }
nav#nav1 li:nth-child(3) a:hover
    {
    background-image: url(../images/asolo-vertical.jpg);
    background-size: 140%;
    background-position: 5%;
    }
    nav#nav1 li:nth-child(4) a:hover
    {
    background-image: url(../images/zamberlan-verticle.png);
    background-size: 100%;
    background-position: 0%;
    }
nav#nav1 li:nth-child(5) a:hover
    {
    background-image: url(../images/la-sportiva-sitemap.jpg);
    background-size: 100%;
    }
nav#nav1 li:nth-child(6) a:hover
    {
    background-image: url(../images/salewa-sitemap.jpg);
    background-size: 140%;
    background-position: 3%;
    }
    /*  styles for nav menu */
.button1 
    {
        display: block; /* make them into a block element*/
        background-color: rgb(50, 134, 230);
        color: white;
        font-weight: bold;
        text-decoration: none; /*remove the underline*/
        border-radius: 16px;
        padding: 12px; /* space between text and border */
        width: 200px;
        text-align: center;
        margin: 10px auto;
    
        /* transition effect for button hover */
        transition: all 300ms ease-in-out;
    }
    /*pseudo class*/
.button1:hover 
    {
        background-color: rgb(21, 248, 70);
        color: black;
    }