html {
    line-height: 1.5; 
}

@media screen and (max-width: 600px) {
    html {
        font-size: 85%;
    }
}

@media screen and (min-width: 1200px) {
    html {
        font-size:  110%;
    }
}




/*Main Body styles for ALL pages*/

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 
    font-size: 87%;
    margin: 0;
    padding: 0;
    background-color: #3968A5;
}


/*Header styles for ALL pages*/

header {
    padding-top: 25px ;
    color: #3968A5;
    background-image: url(../images/tetons_in_fall.jpg);
    background-position: 15% 44%;
    background-repeat: no-repeat;
    background-size: 100%;   
}

header h1 {
    text-align: justify;
    margin: 0;
    color: lemonchiffon;
    font-weight: normal;
    font-size: 250%;
}


/*Main area styles for ALL pages*/

.main-area {
    width: 60%;
    float: left;
    padding-right: 40px;
    box-sizing: border-box;
    padding-top: 0px;
}

.main-area h1 {
    margin-top: 5%;
    font-size: 150%;
    font-weight: normal;
    font-style: bold;
    letter-spacing: 4px;
    word-spacing: 10px;
    text-shadow: 2px 10px 10px rgba(0, 0, 0, 0.4); 
    text-transform: uppercase;
}

.main-area p {
    font-size: 100%;
    text-align: left;
}


/*Container styles for ALL pages*/

.container {
    max-width: 940px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
}


/*Image with banner and hover: Wisconsin, Wyoming and USA pages*/

img {
    max-width: 100%;
    height: auto;
}

.image-banner {
    position: relative; 
    margin-bottom: 40px;
    overflow: hidden; 
}

.image-banner img{
    display: block;
    transition: all 3s;
}

.image-banner:hover img {
    transform: scale(1.5);
}

.banner-description {
    position: absolute;
    bottom: 0;
    left: 0;
    color: white;
    background-color:rgba(0, 0, 0, 0.4);
    padding: 15px 25px;
    opacity: 0;
    transform: translateY(100%);
    transition-property: all;
    transition-duration: 1s;
}

.image-banner:hover .banner-description {
    transform: translateY(0);
    opacity: 1;
}


/*TOP Site Navigation */

.site-nav {
    margin-top: 30px;
}

.site-nav ul {
    margin: 0 10px;
    padding: 0;
}

.site-nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
}

.site-nav a {
    display: block;
    text-decoration: none;
    color: lemonchiffon;
    padding: 10px 20px;
    border: 3px solid #3968A5;
    background-color: rgba(38, 55, 153, 0.4);
    transition-property: all;
    transition-duration: 2s;
}

.site-nav a:hover {
    background-color: rgba(4, 68, 57, 0.378);;
    color: rgb(235, 241, 138);
    transform: rotateY(20deg);
    transition: all .65s ease-in-out;
}


/*Toggle button for mobile version to minimize site navigation*/

.toggle-btn {
    display: none;
    cursor: pointer;
    color:lemonchiffon;
}

@media screen and (max-width: 600px) {
    .toggle-btn-visible {
        display: block;
    }

    .toggle-target-hidden {
        display: none;
    }

    .toggle-target-expanded {
        display: block;
    }   
}

.main-area .toggle-btn-visible {
    display: block;
}

.main-area .toggle-target-hidden {
    display: none;
}

.main-area .toggle-target-expanded {
    display: block;
}


@media screen and (max-width: 1200px) {
    .site-nav li {
        width: 33.332%;
        margin-right: 0;
    }

    .site-nav a {
        padding: 15px 0;
        margin-right: 5px;
        margin-bottom: 5px;
        text-align: center;
    }
}

@media screen and (max-width: 600px) {
    .site-nav li {
        width: 50%;
    }
}


/*Baisc Slideshow styles:Homepage*/

.cycle-slideshow {
    margin-bottom: 30px;
}

.slide {
    width: 100%;
    position: relative;
}

.slide img {
    display: block;
    background-size: cover;
}

.slide-text {
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.70);
    color: white;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.slide-text h3 {
    margin: 0;
}

@media screen and (max-width: 600px) {
    .slide-text {
        position: static;
        background-color: black;
    }
}


/*Prev and Next buttons-part of slideshow: Homepage*/

.cycle-prev, .cycle-next {
    position: absolute;
    top: 30%;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 50px 50px;
    display: block;
    cursor: pointer;
    font-size: 130%;
    z-index: 1000;
    opacity: 0;
    transition: opacity .5s;
}

.cycle-next {
    right: 0;
}

.cycle-slideshow:hover .cycle-prev,
.cycle-slideshow:hover .cycle-next {
    opacity: 1;
}


/*cycle pager-part of slideshow: Homepage*/

.cycle-pager {
    position: absolute;
    top: 20px;
    z-index: 1003;
    width: 100%;
    text-align: center;
}

.cycle-pager span {
    text-indent: -9000px;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white;
    margin: 0 4px;
    cursor: pointer;  
}

.cycle-pager .cycle-pager-active {
    background-color: black;
}


/*Button A style for action button on slideshow: Homepage*/

.btn-a {
    padding: 5px 5px;;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: rgba(13, 156, 252, 0.25);
    color: white;
    font-size: 75%;
    margin-left: 5px;
    text-decoration: none;
}

.btn-a:hover {
    background-color: white;
    color: blue;
}


/*Form styles:Contact Me and Your Backroad pages*/

form {
    padding: 20px 30px;
    border-radius: 2.5%;
}

form h1 {
    text-align: center;
    }

input,
label {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 100%;
}

label {
    box-sizing: border-box;
}

input[type="email"] {
    width: 50%;
    display: block;
    box-sizing: border-box;
    padding: 0 10px;
    height: 35px;
    margin-bottom: 15px;
    border: 1px solid lemonchiffon;
    outline: none; 
}

input,
textarea {
    background-color: rgba(46, 10, 177, 0.25);
    color: lemonchiffon;
}

textarea {
    width: 70%;
    height: 70px;
    display: block;
    margin-bottom: 20px;
}

input[type="submit"] {
    width: 25%;
    display: block;
    box-sizing: border-box;
    background-color:rgba(46, 10, 177, 0.25);
    color: lemonchiffon;
    padding: 1px solid lemonchiffon;
    border-radius: 3px;
    margin-bottom: 10px;
    outline: none;
}

input[type="submit"]:hover{
     border: 1px solid lemonchiffon;
     background-color:  rgba(134, 174, 219, 0.4);
     cursor: pointer;
 }


/*Sidebar styles-for ALL pages*/

.sidebar {
    position: relative;
    z-index: 11; 
    width: 35%;
    float: left;
    margin: 30px;
    background-color: #3968A5;
    padding: 20px 20px; 
    box-sizing: border-box;
    font-size: 85%;
    text-align: center; 
}

@media screen and (max-width: 1200px ) {
    .main-area,
    .sidebar {
        width: auto;
        float: none;
    }

    .main-area {
        padding-right: 0;
    }
}
@media screen and (max-width: 600px) {
    .container{
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media screen and (max-width: 600px) {
    .content-area {
        padding-top: 20px;
    }
}

@media screen and (max-width: 600px) {
    .section {
        background-position: center;
    }
}

.sidebar h1 {
    font-size: 175%;
    font-weight: normal;
    letter-spacing: 4px;
    word-spacing: 10px;
    text-shadow: 1px 5px 5px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
}

.sidebar p{
    font-size: 200%;
    letter-spacing: 1px;
    text-shadow: 1px 5px 5px rgba(0, 0, 0, 0.4);
}


/*Community Stories Boxes on Sidebar:Your Backroad page */

.community_story_one {
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 5%;
    padding: 10px;
    background-color: rgba(26, 19, 92, 0.411);
}

.community_story_two {
    border: 5px double rgba(0, 0, 0, 0.4);
    border-radius: 2.5%;
    padding: 10px;
    background-color: lemonchiffon;

}


/* Thumbnail Photo Styles on Sidebar: My Backroad page*/

.thumbnails {
    margin-right: -15px;
}

.thumbnails_bucketlist {

    display: inline-flex;
    display: -webkit-inline-flex;

}

.thumbnails a {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding-right: 15px;
    margin-bottom: 15px;
}

.thumbnails img {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.3s ease-in-out;
    border-radius: 15%;
    border: 2.5px solid rgba(0, 0, 0, 0.5);
}

.thumbnails:hover img {
    opacity: 0.6;
    transform: scale(0.92);
}

.thumbnails:hover img:hover {
    opacity: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);

}

@media screen and (max-width: 600px) {
    .thumbnails a {
    width: 50%;
    }
}

.photos-by-me {
    text-align: center;
    margin: 5%;
}

/*About Me image on sidebar*/

.about_me img {
    max-width: 50%;
    height: auto;
    border-radius: 50%;
    border: 5px solid rgba(0, 0, 0, 0.4);
}

.about_me h4 {
    font-weight: normal;
    font-size: 110%;
}


/* ui-menu:navigation on Sidebar:Homepage, Wisconsin, Wyoming, USA, and Bucketlist pages*/

.ui-menu ul {
	margin: 0;
    padding: 0;
}

.ui-menu li {
	float: left;
	list-style: none;
    margin-left: 20px;
    padding: 20px;    
}

.ui-menu a {
    opacity: 0;
    display: block;
    width: 127px;
    height: 128px;
    background-image: url(../images/backroads_sprite_first_try.png);
    text-indent: -9999px;
    background-repeat: no-repeat;
    animation: fadeBounce 1s forwards;
    -webkit-animation: fadeBounce 1s forwards;
}

.ui-wisconsin a {
    animation-delay: 0.5;
    -webkit-animation-delay: 0.5;
}
.ui-wisconsin a:hover {background-position: -130px 0;}

.ui-wyoming a{
    background-position: -5px -137px;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;

}
.ui-wyoming a:hover{background-position: -158px -138px; }

.ui-usa a {
    background-position: -7px -268px;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}
.ui-usa a:hover {background-position: -150px -272px;}

.ui-bucketlist a {
    background-position: -4px -405px;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}
.ui-bucketlist a:hover {background-position: -142px -406px;
}



/*Bounce animation for ui-menu:navigation*/

@keyframes fadeBounce {

    0% {
        opacity: 0;
        transform: translateY(-200%);
    }

    40% {
        
        transform: translateY(0);
    }

    55% {
        transform: translateY(-5px);
    }

    70% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        transform: translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeBounce {

    0% {
        opacity: 0;
        transform: translateY(-200%);
    }

    40% {
        
        transform: translateY(0);
    }

    55% {
        transform: translateY(-5px);
    }

    70% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        transform: translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/*Footer Styles*/

footer {
    text-align: center;
    font-size: 85%;
    color:rgb(126, 139, 156);
    padding-bottom: 20px;
    padding-top: 20px;
}


 /*clearfix method: resuable class that lets parents autoclear their children
 CLEAR YOUR FLOATS*/
.group:before,
.group:after {
    content:"";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
}