/* 

!!!!!!!!IMPORTANT!!!!!!

There are no RESET STYLES in this stylesheet, so when adding the stylesheet line to your html files, it MUST GO BELOW the stylesheets that contain RESET STYLES 

*/

/* main */

/* Add a background color to the phone and tablet navigation */

nav.topnav {
    background-color: #333;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
}

/* Style the links inside the phone and tablet navigation */
nav.topnav a {
    float: left; /* when you float items to the left and display: block, they appear in a line */
    display: block;
    font-family: 'Lora', sans-serif;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1em;
    font-weight: normal;
    margin: 0 auto;
}

/* Change the color of phone and tablet links on hover */
nav.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
nav.topnav .icon {
    display: none;
}


/* end main */


@media screen and (max-width: 1024px) { /* tablet and smaller */

/* hide the computer screen navigation bar */
nav.computernav {
    display: none;
    }    
    
/* style the phone and tablet navigation */    
    
/* When the screen is max 1024px wide, hide all links, except for the first one ("Home"). Show the link that contains the icon that should open and close the topnav (.icon) */
nav.topnav a:not(n-1) {
    display: none;
}

nav.topnav a.icon {
    float: right;
    display: block;
}

nav.topnav.responsive {
    position: relative;
    top: 0;
}
    
nav.topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
}
    
nav.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
    
    
} /* End 1024 query -- DO NOT DELETE */

@media screen and (min-width: 1025px) and (orientation: landscape) { /* laptop and and larger */
    
/* make the computer navigation visible and style it */ 
    
nav.computernav {
    display: block;
    width: 50%;
    background-color: transparent;
    text-align: center;
    margin: auto;
    margin-top: 5px;
    padding: 12px 0px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    } 
    
nav.computernav.home {
        background-color: #fff;
    }
    
nav.computernav li {
    display: inline; /* makes a list appear in a line */
    font-family: 'Lora', sans-serif;
    font-size: 1.25em; /* 20 / 16 */
    letter-spacing: .1em; /* 1.6 / 16 */
}

nav.computernav a {
    padding: 10px 16px 11px 16px;
    font-weight: normal;
}
    
nav.computernav a:link {
    color: #202d44;
    text-decoration: none;   
}

nav.computernav a:visited {
    color: #202d44;    
}

nav.computernav a:hover {
    color: green;
    background-color: red;
}

nav.computernav a:active {
    color: #202d44; 
}

/* end computer navigation styling */

    
/* hide the phone and tablet navigation */
    
nav.topnav {
    display: none;
    } 
    
} /* End 1025 query -- DO NOT DELETE */