html{
    background-image: url(../images/background2.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #d5d5d5;

}

body{
    max-width: 100%;
    height: 100%;
    margin: auto;

}

.wrapper {
    position: relative;
    overflow-x: hidden;

}

::-webkit-scrollbar { 
    display: none; 
}


aside {
    background-color: #474747;
    float: right;
    width: 55%;
    height: 100%;
    margin-left: 100%;
    position: absolute;
}


nav {
    width: 100%;
    height: 100%;
    margin-top: -1em;

    z-index: 9999;
}


section {
    width: 100%;
    height: 100%;
    float: left;
    margin-top: .5em;
    margin-left: 0;


}

/*  new code begins  */

.galleryOptions {
    clear: both;
    margin-top: 5.3em;
    margin-bottom: 2.4em;
    padding: .5em 0em;
    background-color:rgba(72,72,72,0.4);

}

h4 {
    display: inline-block;
    color: white;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    letter-spacing: .05em;
    margin: .3em .3em;
    padding: .2em;
    text-align: center;

}

label h4 {
    cursor: pointer;
    /*border-bottom: 2px solid white;*/
    background-color: #4175a0;
    padding: .5em;
}

/*
label h4:hover {
    background-color: #5a99cb;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;

}*/

.checked {
    background-color: #6b6b6b;
    /*border-bottom: none;*/
} 

.galleryImage {
    margin: 1.25em .6em;
    padding-bottom: 2em;
    display: inline-block;
}

.kids-toggler, 
.adults-toggler,
.prep-toggler, 
.ceremony-toggler,
.reception-toggler,
.formals-toggler,
.HPTO-toggler,
.flash-toggler,
.html-toggler,
.lifestyle-toggler,
.product-toggler
{
    display: none;
}

.kids-toggler:checked + div,
.adults-toggler:checked + div,
.prep-toggler:checked + div,
.ceremony-toggler:checked + div,
.reception-toggler:checked + div,
.formals-toggler:checked + div,
.HPTO-toggler:checked + div,
.flash-toggler:checked + div,
.html-toggler:checked + div,
.lifestyle-toggler:checked + div,
.product-toggler:checked + div
{
    display: none;
}



/*
.kids-gallery, .prep-gallery, .reception-gallery, .HPTO-gallery, .html-gallery{
    background-color: red;
}
.adults-gallery, .ceremony-gallery, .formals-gallery, .flash-gallery {
    background-color: purple;
}
*/
.kids-gallery, 
.adults-gallery,
.prep-gallery, 
.ceremony-gallery,
.reception-gallery, 
.formals-gallery,
.HPTO-gallery,
.flash-gallery, 
.html-gallery,
.lifestyle-gallery,
.product-gallery,
.sample-gallery
{
    display: inline;
    width: 100%;
    margin-top: -1em;

}

.galleryImage-wrapper {
    display: inline-block;   
}

.content-wrapper {
    clear: both;
    width: 90%;
    height: 100%;
    text-align: center;
    margin: 5.7em auto; /* new */
}
  

.imageWrapper {
    /*  remove padding-bottom */
    background-image: url(../images/shadow.png);
    background-repeat: no-repeat;
    background-position: bottom;
}

/* <div class="row"></div> ----- add this to the home/design/photo.html right before the .content-wrapper */
.row {
    margin: 7.5em;
}   


/* check out http://codepen.io/rexkirby/pen/Fdnlz for an example of responsive flat form */
#form-main {
    clear: both;
    margin: 6em auto;
    padding: 2em;
    background-color:rgba(72,72,72,0.4);


}

.feedback-input {
    width: 80%;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    padding: 1em;
}

#button-blue {
    width: 10em;   
    height: 3em;
    font-family: 'Lato', sans-serif;
    font-size: 1em;
    color: white;
    background-color: #484848;
}

#button-blue:hover {
    background-color: #4175a0;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;    
}

.name, .email, .text {
    margin-bottom: 1em;   
}

#myPhoto {
    margin: auto;  
    margin-bottom: 2em;
    
}

.bg ul,
.skills ul{
    margin-top: 0;
    margin-bottom: 2em;
    padding: 0;
    text-align: center;

}

.bg li,
.skills li {

    list-style: none;
    padding: 1em 0em;
    border-bottom: 1px solid white;/*
    border-left: 1px solid rgba(65, 117, 160, 0.58);
    border-right: 1px solid rgba(65, 117, 160, 0.58);*/
    background-color: rgba(254, 254, 255, 0.6);
}

.bg li:nth-last-child(1),
.skills li:nth-last-child(1),
.quotes p:nth-last-child(1){
    border-bottom: none;
}

.title {
    color: white;
    font-size: 1.25em;
    margin-top: 0;
    margin-bottom: 0;
    padding: .75em;
    
}

.bg .title {
    background-color: #2e5371;   
}

.skills .title {
    background-color: #447dac;   
}

.aboutMe .title {
    background-color: #4ea0e5;   
}

p {
    font-family: 'Lato', sans-serif;

}

.bio {
    margin-top: 1.25em; 
}

.bio p{
    line-height: 1.45em;
    margin: .65em 0em;   
}

.bio a:link, 
.bio a:visited,
.bio a:hover,
.bio a:active {
    color: #447dac; 
}

.quotes p {
    /*color: #315b7e;*/
    color: #6a6a6a;
    font-style: italic;
    margin: 0;
    padding: 1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.59);   
}

footer {
    margin-bottom: 3em;
    
}


footer p {
    color: #818181; 
    font-size: .75em;
    text-align: center;
}

/*
.back-to-top {
background: none;
margin: 0;
position: fixed;
bottom: 0;
right: 0;
width: 70px;
height: 70px;
z-index: 100;
display: none;
text-decoration: none;
color: #ffffff;
background-color: rgba(255, 255, 255, 0.65);
border-radius: 50%;
text-align: center;
cursor: pointer;
}

.back-to-top p {
    color: #2e5371;
    font-size: .85em;
    font-style: normal;
    margin-top: 1.6em;
    line-height: 1.125em;

}
*/

.back-to-top {
    margin-left: 1em;

}

footer a:link,
footer a:visited,
footer a:hover,
footer a:active {
    color: #447dac
}


/*  new code ends  */

h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    letter-spacing: .03em;
    padding: .7em;
}

img {
    max-width: 100%;
}

a:link, a:visited {
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    color: #000;
    font-weight: 400;
    letter-spacing: .03em;
}


.toggler:hover {
    color: #4175a0;
}

nav a:link, nav a:visited {
    color: #fafafa;
}

nav a:focus, nav a:hover, nav a:active {
    color: #fafafa;
}

nav li:hover {
    background-color: #4175a0; 
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

nav li {
    list-style: none;
    text-align: center;
    font-size: 1.25em;
    margin-left: -2em;
    padding-top: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #797979;
    
}

.imageWrapper a:focus, 
.imageWrapper a:hover, 
.imageWrapper a:active {
    color: #4175a0; 
}

#logo {
    font-family: 'Sacramento', cursive;
    font-size: 2.4em;
    color: #ededed;
    float: left;
    margin-top: .4em;
    margin-left: 1em;
    display: inline-block;
}


/*
#logo:focus, 
#logo:hover, 
#logo:active {
    color: #4175a0; 
}
*/
.toggler {
    font-size: 1.75em;
    float: right;
    display: inline-block;
    cursor: pointer;
    margin-top: .8em;
    margin-right: .8em;
}

.hidemenu{
    display: none;
}

.toggle:checked + .wrapper > aside{
    margin-left: 45%;
}

.toggle:checked + .wrapper > section {
    margin-left: -55%;
}

.toggle, .biglabel {
    display: none;
}

.biglabel {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
}

.toggle:checked + .wrapper > section .biglabel {
    display: block;
}

aside, section {
    -webkit-transition: margin 0.4s ease-in-out;
    -moz-transition: margin 0.4s ease-in-out;
    -ms-transition: margin 0.4s ease-in-out;
    -o-transition: margin 0.4s ease-in-out;
    transition: margin 0.4s ease-in-out;
}


.number {
    font-family: Lato, sans-serif;
    font-size: .75em;
    color: #343434;
    margin-top: -2.25em;
    margin-bottom: 2em;
    
}

@media only screen and (min-width: 600px) {
    .hidemenu{
        display: inline-block;
        padding-right: .5em;
    }
  
    .navicon {
        font-size: 1em;   
    }
    
    .toggler {
        font-size: 1.25em;
        margin-top: 1.75em;
        margin-right: 1.25em;
    }
    
}


@media only screen and (min-width: 700px) {
    #myPhoto {
        max-width: 54%;
        margin-right: 1em;
        float: left;
    }
    
    .bg {
        min-width: 43%;
        display: inline-block;
    }
    
    
    
    .skills {
        clear: both;

    }
    
    footer {
        width: 100%;
        bottom:0;
        left:0; 
    }
    
    footer[role="home-footer"] {
        bottom: 0;
        left: 0;
        position: absolute;

    }
    
}


@media only screen and (min-width: 900px) {
    html {
        background-size: 100%;    
    }
    
    body {
        max-width: 80%; 

    }
    
    aside {
        width: 100%;
        height: 4em;
        margin-left: 0;
        margin-top: -4.6em;
    }
    
    .content-wrapper {
        margin-top: 7em;   
    }
    
    nav {
        width: 100%;
        height: 5em;
        position: relative;
        z-index: 9999;
    }
    
    nav ul{
        float: right;
        margin-top: 1.5em;
        padding: .6em;
    }
    
    
    nav li{
        display: inline-block;
        position: relative;
        font-size: 1em;
        text-align: center;
        list-style: none;
        margin-left: 0;
        margin-right: .2em;
        padding: .5em .8em;
        border-bottom: none;
    }
    
    #logo {
        margin-left: 0;   
    }
    
    .toggler {
        margin-right: 0;   
    }
    
    .toggle:checked + .wrapper > aside{
        margin-top: 0;
        margin-left: 0;
    }
     .toggle:checked + .wrapper > section{
        margin-top: 5.5em;
        margin-left: 0;
    }
    
    .cat {
        display: inline-block;
        max-width: 29%;
        margin: 0em .6em;
    }
    
    .imageWrapper {
        background-size: 100% auto;   
    }
    
    /*  new code begins   */
    
    .row {
        margin: 9.75em;
    } 
    
    #form-main {
        max-width: 25em;

    }
    
    .galleryOptions {
        width: 90%;
        margin: auto;
        margin-bottom: 2.4em;
    }
    
 
    

    
    /*  new code ends   */
}

@media only screen and (min-width: 1000px) {
    #myPhoto {
        max-width: 50%;   
    }
    
    .bg {
        padding-bottom: 0; 
        min-width: 47%;
    }
    /*
    .skills {
        display: inline-block;
        min-width: 40%;
    }*/
    
    .aboutMe {
        clear: both;   
    }
    
    #logo {
        margin-top: 2rem;
    }
}

@media only screen and (min-width: 1325px) {

    body {
        max-width: 80%;
    }
    
    .content-wrapper {
        margin-top: 10em;   
    }
    
    .cat {
        max-width: 100%;
        margin: 0em 1em;
    }
    
    /* new code */
    .kids-gallery, 
    .adults-gallery,
    .prep-gallery, 
    .ceremony-gallery,
    .reception-gallery, 
    .formals-gallery,
    .HPTO-gallery,
    .flash-gallery, 
    .html-gallery
    {
        display: inline;
    }
    
    .row {
        margin: 12.5em;
    } 
    
    /*  new code ends   */
    
    #logo {
        margin-top: 3rem;
    }

}

@media only screen and (min-width: 2000px) {
    .bg, .skills {
        min-width: none;
    }
    
    body {
        max-width: 60%;   
    }
}