/* font-color styles 
color: #8b0000;
color:#202020;
color: #854731;
*/

/*
font-family:'Sorts Mill Goudy', serif; (logoname/italic texts)
font-family: 'Josefin Sans', sans-serif; (primary nav/buttons)
font-family: 'Nunito', sans-serif; (body text)
font-family: 'Oswald', sans-serif; (h1)
font-family:'Kristi', cursive; (design fonts review titles)
font-family: 'Shadows Into Light', cursive; (design fonts questions/submit)
*/

/* Delete before activate site */
/* div, header{
    border: 1px solid red;
}  */

html{
    scroll-behavior: smooth;
}


body{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

ul, li, ol{
    list-style-type:none;
    padding:0;
    margin:0;
}

a{
    text-decoration: none;
}

body{
    font-size:1em;
}


#header{
    width:100%;
    height:70px; 
    overflow:hidden;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5000;
    background-color:white;  
     box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.logo, .flogo{
    float:left;
    max-width: 395px;
    overflow:hidden;
}

#header img, #footer img{ 
    float:left;
    max-width:28%;    
}
.logoname{
    float: right;
    width:71.89%;
    margin-top: 0.8em;
    font-family:'Sorts Mill Goudy', serif;
    font-size: 1.56rem;
    letter-spacing: 0.12em; 
}

#nav{
    float:right;
    overflow:hidden;
    width: 650px;    
    
    
    /* background-color: mediumaquamarine; */  
}

.nav-button{
    display:none;
}

#primary{
    float:left;
    width:80.2%;
    margin-top:1.8em;
    /* background-color: yellow; */   
}

#primary li{
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.87rem;
    float:left;
    margin-right:2.1em;
    list-style-type: none;
    letter-spacing:0.11em;    
}

#primary li:nth-child(5){
    margin-right:0;     
}

#socialnav{
    float:right;
    width:16%;
    margin-top:1.6em;
    
    /* background-color: mediumvioletred; */
}

#socialnav li{
    font-family: 'Josefin Sans', sans-serif;
    /* font-weight:bold; */
    font-size: 0.93rem;
    float:left;
    margin-right:1.3em;
    list-style-type: none;
}

#socialnav li:last-child{
    margin-right:0;
}

#socialnav .fa-facebook-f,
#socialnav .fa-instagram,
#socialnav .fa-envelope
{
    font-weight:bold;
}  

/* .spotlight{
    margin-top:70px;
} */

.spotlight img{
    width:100%;
    margin-bottom:2em; 
}  

img{
    max-width:100%;
} 

.about img{
margin-bottom:0px;
}

.row{  
    margin-bottom:2em;
}

 .hide{
    display:none;
} 


.wrapper{
    max-width:1200px;
    margin:0 auto;
    padding: 1.66em;
    overflow:hidden;
    clear: both;
    /* background-color:mediumseagreen; */
}

.inner{
    max-width: 1000px;
    margin:0 auto;
    padding: 2em; 
    overflow:hidden;
    /* background-color: yellow; */
}

h2{
    font-size: 13px;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing:2.4px;
    font-weight:normal;
    /* margin-bottom: 20px; */
}

.col1{
    width: 36.17%; /*340px*/
    float: left;
    margin:2.5em 0;
    /* background-color:grey; */
}

.col1 img{
    width:100%;
    height:100%;
}

.col2{
    float:right;
    width:61.7%; /* 580px */
    margin:2.5em 0; 
    /* background-color:lightpink;   */
}

/* .heading{
    font-family:'Sorts Mill Goudy', serif;
    font-size:2.12rem;
    font-weight:normal;
} */

.col2 p, .col3 p{
    font-family: 'Nunito', sans-serif;
    line-height: 1.5;
    font-size:1rem;
    letter-spacing:1px;
    /* text-align: justify; */
}

.row-bg{
    background-color:#f4f0ec;
    position:relative; 
    margin-bottom:0;
    /* margin-top:70px; */
    /* height:640px;   */
}

.about .row-bg{
    margin-top:0px;
}

.row-height{
    height:700px;
}

.col3{
    float:left;
    width:48.9%; /*460*/
    /* background-color:lightsalmon; */
}

.col3:last-of-type{
    float:right; 
    width: 48.9%;   /*460*/
    /* background-color:mediumseagreen; */
}

.col3 img{
    float:right;
    max-width:100%; 
}

h1{
    font-family: 'Oswald', sans-serif;
    font-size:2.6rem;
    color: #854731;
    letter-spacing: 0.04em;
    margin-top:0;
    font-weight:500;
    /* background-color:pink;  */
}

.col8{
    width:48%;
    float:left;
    /* text-align:justify; */
    /* background-color: lightblue; */
}

.col8:last-of-type{
    float:right;
}

.col8 img{
    width:100%;
    height:100%;
    float:right;
    /* margin-top:40px; */
}

.col8 .inquiry{
    color:#202020; 
    font-weight:bold; 
    letter-spacing:0.175em;
}

#background {
    position:relative;
}
 #background img{
     max-width:100%;
 }

.gallery #background {
    opacity: 0;
    overflow:hidden;
    background-color:bisque;
} 

.gallery .wrapper{
    padding:15px 0 50px 0; 
}

#imagegallery{
    max-width:1200px;
    margin:0 auto;
    padding:180px 0;
    /* height:500vh;
    position:absolute; 
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);  */
    overflow:hidden;
} 

.gallery .wrapper h1{
    margin:0 0 15px 0;
    text-align:center;
}

#slidertop{
    height:70px;
}

.thumbnail {
    margin: 1.15%;
    /* border: 1px solid #ccc; */
    float: left;
    width: 17.9%;
    position:relative;
  }

.thumbnail:last-of-type{
    margin-right:0;
}

.thumbnail:first-of-type{
    margin-left:0;
}

.thumbnail .description{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-90%); 
    /* visibility:hidden; */
    opacity:0;
    color:black;
    font-size:2.5em;
    line-height:2.5; 
    font-family:'Kristi', cursive;
    z-index:2000;
    text-align:center; 
}

.thumbnail:hover{
    opacity:0.2;
}

.thumbnail:hover .description{
    /* visibility:visible; */
    opacity:1;
}
  
/* .thumbnail:hover {
    border: 1px solid #777;
  } */
  
.thumbnail img {
    width: 100%;
    height: auto;
  }


.container1{
    width:1000px;
    /* height:600px; */
    position:absolute;
    left:50%;
    transform: translate(-50%, 0%);
    overflow:hidden;
    margin:2.5em auto;    
} 

.testimonial{
    width:100%;
    /* height:100%; */
    overflow:hidden;
}

 #review{
    display:flex;
    width:5000px;
} 

.review-col{
    width:1000px;
    /* height:600px; */
    overflow:hidden;
    /* visibility: hidden; */
     position:relative; 
     /* padding:0 5em; */
     /* background-color:magenta; */
}

.user-img{
    /* max-width:100%; */
    float:left;
    width:46%;
}

.user-text{
    width:52%; 
    float: right;
    text-align: center;
    /* background-color:mediumaquamarine; */
    
}

.user-text blockquote{  
    display: block;
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    /* padding: 25px 50px 30px; */
    /* position: relative; */
    text-align:center;
    letter-spacing: 0.05em;
}

.user-text p{
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 1rem;
    font-style:italic;
    padding:1.25em;
    letter-spacing:0.1em;
}

.col8 h3{
    font-family:'Josefin Sans', sans-serif;
    letter-spacing:0.11em;
    text-transform: uppercase;
    font-weight:bold;
    font-size:0.8rem;
    line-height:1.5;
}

.col8 h3:first-of-type{
    margin-top:60px;
}

.info .col8 h3:first-of-type{
    margin-top:20px;
}


.user-text h3{
    font-family: 'Oswald', sans-serif;
    font-size:15px;
    text-align:center;
    letter-spacing: 3px;
    margin:20px 0px 40px;
    padding:0;
}

.user-text .reviewer{
    font-family: 'Sorts Mill Goudy', serif;
    font-weight:500;
    font-size: 1.87rem;
    /*text-transform: lowercase;*/
    text-align:center;
    color: #854731;
    ;
    padding:0;
}

.btn{
   border:hidden;
   background-color: transparent;
   font-family: 'Josefin Sans', sans-serif;
   cursor:pointer;
   width:100%; 
   margin: 0px auto;
}


button#buttonstyle{
    border:none;
    background:none;
    float:right;
    cursor:pointer; 
    font-family: 'Sorts Mill Goudy', serif;
    font-style:italic;
    font-size:0.9rem;
    
}

.col8 p{
    font-family: 'Nunito', sans-serif;
    margin-bottom:20px;
    line-height: 1.5;
    font-size:1rem;
    letter-spacing:1px;
    /* text-align: justify; */
    
}

.col8 h2{
    color:#854731;
    line-height:24px;
    font-weight:600;  
    font-size:14px;
}

p.social{
    font-family: 'Shadows Into Light', cursive;
    text-align:right;
    font-size:2rem;
    margin-top:2.5em;
    color:#202020;
    margin-bottom:0.4em;
}

/* .col8 .social{
    font-family: 'Shadows Into Light', cursive;
    font-size:30px;
    /* text-align:right; 
    margin-bottom:5px;
    color: #202020;
    position:relative;
} */

body.contact .fas fa-phone,
body.contact .far fa-envelope{
    margin-right:100px;
}

a#faqlinkstyling{
    float:right;
    font-family:'Sorts Mill Goudy', serif;
    font-size:0.85rem;
    font-style:italic;
}

#infoimage{
    max-width:100%;
}

.button, .button1, .button2{
    background-color: #854731   ;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.9rem;
    color: white;
    border: 1px solid #854731;
    padding:2%;
    margin-top:8px; 
}

.button1{
    display:none;
}

.image2{
    display:none;
}

#aside{
    position: absolute;
    top:8em;
    left:50em; 
    width:30%; 
    text-align:center;
    
}

#aside p{
    font-family: 'Oswald', sans-serif;
    font-size: 1.9rem;
    color: white;
    text-transform: uppercase;
}

.fontkristi{
    font-family: 'Kristi', cursive;
    font-size: 3.2rem;
    text-transform: lowercase;
    margin: 0.3em;
    letter-spacing: 0.02em;
    color:white;
}

.container .fontkristi{
    color:#202020;
}

.col8 i.far.fa-envelope{
    margin-right:20px;
    color:#8b0000;
    font-weight:bold;
}

i.fas.fa-phone{
    margin-right:20px;
    color:#8b0000;
    font-weight:bold;
}

p.social-links{
    font-family:'Josefin Sans', sans-serif;
    font-size:0.9rem;
    color:#202020;
    font-weight:bold; 
}

.social-links a:link,
.social-links a:visited{
    margin-left:4.24%;
    font-family: 'Nunito', sans-serif;
    font-size:0.9rem;
    color:#8b0000;
    

}

/* .social-links .fa-facebook-f,
.social-links .fa-instagram {
    margin-left:4.24%;
    font-size: 1.2em;
    font-weight:bold;  
    /* color:#8b0000;} */


#footer{
    background-color:#202020;
    color:white;
    clear:both;
}

.flogo{
    margin:auto;
    float:none; 
    margin-bottom:8px;
} 

#footer_primarynav{
    width:700px;
    margin:auto;
    overflow:hidden;
    clear:both;
    margin-bottom:30px;
}

#footer_primarynav li{
    float:left;
    margin-right:4.7em;
    list-style-type:none;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.7rem;
    font-weight:bold;
    letter-spacing: 0.18em;
    
}

#footer_primarynav li:first-child{
    margin-left:7em;
}

.footer_socialnav{
    width: 100px;
    margin:0 auto;
    overflow:hidden;
   margin-bottom:30px;
}

.footer_socialnav li{
    float:left;
    margin-right:1.6em;
    font-size:1.05rem;
    font-weight:bold;
}

.footer_socialnav li:last-child{
    margin-right:0;
}

/* #footer_socialnav .fa-facebook-f{
    margin-left:270px;
} */

#photographystyle{
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom:5em;
    clear:both;    
}

#copyright{
    text-align:center;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 2px;
    font-weight:bold;
}

#website-credit{
    font-family: 'Sorts Mill Goudy', serif;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom:5em;
    clear:both;   
}

.innerspacing{
    padding:60px 2em ;
}

#backgroundimage{
    max-width:100%;
    position:relative;
}

#thankyou{
    position:absolute;
    width:480px;
    top:65%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align:center;
}
#thankyou h1{
    margin-bottom:0.3em;
    font-weight:bold;
} 

#thankyou h2 
{
    margin-bottom:3em;
}

#thankyou li{
    font-size:1em;
    font-weight:bold;
}

#thankyou a{
    color:#202020;
}

#thankyou p{
    margin-bottom:0.1em;
}

#thankyou .fontkristi{
    font-size:2em;
    color:#202020;
}

 /* FORM STYLES*/

form{
    
    text-align:center;
    background-image: url(../images/contact/contact6.jpg); 
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
}


form h1{
    font-family: 'Oswald', sans-serif;
    /* color:white; */
    color:white;
    font-weight:bold;
    margin-top:20px;
    
} 

form ul{
    width: 620px;
    margin:0 auto;
}

form li{
    max-width:100%;
}

/* input[type="text"],
input[type="email"]
{
    width: 100%; 
    padding-left: 2.06%;
    font-family: 'Oswald', sans-serif;
    margin-bottom:10px;
    font-size:1em;
    background-color:#202020;
    border: 1px solid #202020;
    height:40px;
     
} */

input, textarea, select{
    width: 100%;
    padding: 12px 0;
    padding-left: 2.06%;
    font-family: 'Oswald', sans-serif;
    margin-bottom:10px;  
    font-size:1.2em;
    background-color:#202020;
    border: 1px solid #202020;
    color:white;
    cursor: pointer;
}

select{
    padding-left:1.2%;
    width:102.3%;
}

option:after{
    font-family: 'Oswald', sans-serif;
}

input[type="submit"]{
    width:20%;
    font-family: 'Shadows Into Light', cursive;
    /* font-style:italic; */
    font-weight:bold;
    padding:7px 1% 7px 2%;
    margin-bottom:20px;
    border-radius:10px;
    font-size:1.4em;
    background-color: #854731;
    color:white;
    border: 1px solid #854731;
    text-align:center;
    cursor: pointer;
    letter-spacing: 0.2em;
} 
/* 
form placeholder{
    color: white;
} */

::placeholder{
    color:white;
    opacity:1;
}


/* link styles */


a:link, a:visited{
    color:#202020;
}

a:hover, a:focus {
    color:#8b0000;
}

.logo a.logoname:link, .logo a.logoname:visited{
    color:#202020;
}

.flogo a:link, .flogo a:visited{
    color:white;
}

#socialnav a:link, #socialnav a:visited{
    color:#8b0000;
}

#socialnav a:hover, #socialnav a:focus{
    color:#8b0000;
}

#primary a{
    text-decoration: none;
    
}

.button a:link, 
.button a:visited,
.button1 a:link, 
.button1 a:visited,
.button2 a:link, 
.button2 a:visited{
    color:white;
}

#footer_primarynav a:link, 
#footer_primarynav a:visited,
.footer_socialnav a:link,
.footer_socialnav a:visited{
    color:white;
}

.contact .row:last-of-type,
.info .row:last-of-type{
    margin-bottom:0;
}




/* MEDIA QUERIES */

@media screen and (max-width:1400px){
    /* body{
        background-color:yellow;
    } */
}



@media screen and (max-width:1200px){

 /* body{
    background:orange;
}   */

body{
    font-size:0.8em;
}

#header img, #footer img {
    float: left;
    max-width: 26%; 
}

.logoname{
    font-size: 1.4rem;
    margin-top: 0.9em;
    max-width: 74%;
    margin-right:5px;
}

#primary li {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.8rem;
    margin-right: 1.8em;
}

#primary li:first-child{
    margin-left:60px;
}

#primary {
    margin-top: 2.2em;
}

#socialnav {
    margin-top: 2em;
}

#aside{
    top:15%;
    left:40%;
    width:70%;
}

#aside h2{
    font-size:350%;
}

#aside p{
    font-size: 200%;
} 

.button2{
    padding:0.6em;
}

.row-height{
    height:680px;
}

#imagegallery{
    max-width:90%;
}

.gallery .wrapper{
    max-width: 90%;
    overflow:hidden;
}

#slidertop{
    height:70px;
}

}

@media screen and (max-width:1100px){

    /* body{
        background-color:goldenrod;
    } */

    #header{
        width: 100%;
        height: 120px;
        overflow: hidden;
    }

    /* .spotlight {
        margin-top: 120px;
    } */

    /* .row-bg{
        margin-top:120px;
    } */


    .logo{
        float: none;
        margin:0 auto;
    }

    .flogo{
        display:block;
        float:none;
    }

    #nav{
        float:none;
        margin:0 auto;
    }

    #primary{
        margin-top:1.2em;
    }

    #socialnav{
        margin-top:1em;
    }

    .image1{
        display:none;
    }

    .image2{
        display:block;
        
    }

    /* .about .col1{
        display:none;
    }
    
    .about .col2{
        float:none;
        width:100%;
        margin:0 auto;
        text-align: justify;
    }     */

    #review {
        display: flex;
        width: 580%;
      }

    .container1{
        width:90%;
        margin:2.5em auto;    
    } 
    
    .review-col{
        width:17.3%;    
        margin-bottom:2.5em;
    }

    /* .user-text{
        max-width:80%; 
    } */

    .user-text blockquote{  
        font-size: 1.4rem;
        padding: 0; 
        margin-bottom:1em;
        /* text-align:center;
        letter-spacing: 1px; */
    }
    
    .user-text p{
        font-size: 1.2em;
        padding:0 1em;
        /* letter-spacing:1.5px; */
    }

    .row-height{
        height:670px;
    }
/* 
    .gallery #top{
        height:240px;
    } */
    
    #slidertop{
        height:120px;
    }
        
}
@media screen and (max-width:1000px){

 /* body{
    background-color: magenta;
}   */

.thumbnail{
    margin:1%;
    /* margin-bottom:80px; */
}

h1{
    font-size:2.4rem;
}

#imagegallery{
    padding: 160px 0 100px 0;
}

.gallery .wrapper{
    padding:60px 0; 
}

/* .gallery #top{
    height:20px;
} */

#slidertop{
    height:70px;
}

.user-text h3{
    margin: 0 0 20px 0;
}

.fontkristi {
    font-size: 3rem;
    margin: 0.1em;
}

#aside{
    top:20%;
    left:40%;
    width:70%;
}

#aside h2{
    font-size:320%;
}

#aside p{
    font-size: 160%;
} 

.button2 {
    padding: 0.5em;
}

.container1 {
    width: 95%;
    margin: 1.5em auto;
}
 
.user-img{
    width:44%;
}

.user-text{
    width:54%;
}


.user-text blockquote{  
    font-size: 1.3rem;
}

.row-height{
    height:590px;
}
}

@media screen and (max-width:900px){

    .row-height{
        height:540px;
    }
}

@media screen and (max-width:800px){

    /* body{
        background-color:lightblue; 
    }  */

    #header{
        height: 0;
    }

    .spotlight{
        margin-top:0;
    }

    .col8, .col8:last-of-type{
        float:none;
        width:100%;  
        margin-bottom:1em;
    }

    .col8 img{
        margin-bottom:1.5em;
    }

    .col8 p{
        font-size:1.25em;
        margin-bottom:1.5em;
    }

    p.social{
        font-family: 'Shadows Into Light', cursive;
        text-align:center;
        font-size:1.8rem;
        margin-top:1.5em;
        margin-bottom:0.4em;
    }

    #imagegallery {
        padding: 160px 0 120px 0;
    }

    /* #slidertop{
        height:50px;
    } */

    /* .gallery #top{
        height:330px;
    } */
    
    #slidertop{
        height:50px;
    }

    a#faqlinkstyling{
        float:none;
        display:block;
        text-align:center;
        font-size:0.85rem;
        font-weight:normal;
    }

    .logo .logoname{
        float:none;
        display:block;
        margin-top:0;
        margin-left:0.5em;
        font-family:'Sorts Mill Goudy', serif;
        font-size:160%;
        letter-spacing: 2.5px; 
        position:fixed;
        top:14px;
        left:5px;
        z-index:2000; 
    }
    #primary li:first-child{
        margin-left:0;
    }

    #socialnav li{
        display:none;
    }

    #aside{
        top:20%;
        left:50%;
        width:50%;
    }

    #aside h2{
        font-size:300%;
    }

    #aside p{
        font-size: 180%;
    }

    .about .col1{
        display:none;
    }
    
    .about .col2{
        float:none;
        width:100%;
        margin:0 auto;
        text-align: justify;
    }     */

    .image1{
        display:none;
    }

    .image2{
        display:block;
    }

    .button{
        display:none;
    }

    .button1{
        display:block;
        margin:0 auto;
        padding:1em 2em;
        font-size:1rem;
    }

     .button2{
        display:block;
        margin:0 auto;
        /* background-color: #202020 ;
        border: 1px solid #202020; */
        font-family: 'Josefin Sans', sans-serif;
        font-size:90%;       
        padding:0.5em;
    }

    #footer_primarynav{
        width:80%;  
    }

    #footer_primarynav li{
        float:none;
        margin-bottom:30px;
        margin-right:0;
        text-align: center;
        font-size:1em;
    }

    #footer_primarynav li:first-child{
        margin-left:0;
    }

     #footer img{
        display:none;
    }

    input, textarea{ 
        font-size:1.1em;
    }

    .wrapper, .inner{
        padding:2em;
        
    }
/*     
    .about .spotlight{
        display:none;
    } */

    .col1{
        float:none;
        width:100%;
        margin-top:0px;
    }

    .col2{
        float:none;
        width:100%;
    }

    .col3, .col3:last-of-type{
        float:none;
        width:100%; 
    }

    .col3 img{
        float:none;
        display:block;
        margin:0 auto;
    }
   
    .col2 p, .col3 p{
        line-height: 1.5;
        font-size:1rem;
        letter-spacing:1px;
        text-align:left;
    }

    .flogo .logoname{
        float:none;
        display:block;
        font-size:1.8rem;
        margin-bottom:20px;
        width:100%;
        max-width:100%;
        text-align:center;
        

    }
    .flogo a:link, .flogo a:visited{
        color:white;
      
    }

    .user-img{
        /* max-width:100%; */
        float:none;
        display:block;
        width:70%;
        margin-bottom:4em;
        margin:2em auto 4em auto;
    }
    
    .user-text{
        width:100%;
        float: none;
        display:block;
        /* text-align: center; */
    }
    .row-height {
            height: 1160px;
    }

    #primary ul ul li {
        margin-right: 9%;
    } 

    #primary li:last-child {
        margin-right: 0;
      }

      .row-bg{
          margin-top:0;
      }

      
        

    
      /* Navigation Button
        -------------------------------------------------------- */
    
        .nav-button {
            display: block;
            position: fixed;
            top: 13px;
            right: 15px;
            width: 27px;
            height: 24px;
            /* background: url('../images/menu-icon-large.png'), linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2)); */
            background: url(../images/menu.png),white;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 26px, 100%;
            cursor: pointer;
            /* border: 0 none;
            border-bottom: 1px solid rgba(255,255,255,.1);
            box-shadow: 0 0 4px rgba(0,0,0,.7) inset; */
            border-radius: 5px;
            z-index: 999;
            text-indent: -9999px; 
            border:none;
        }
        /* .nav-button:hover {
            background-color:#202020;
        } */
        .nav-button.open {
            background: url('../images/closemenu.png'),white;
            background-position: center center;
            background-repeat:no-repeat;
            background-size: 26px, 100%; 
            color:black;
            border:none;
        }
    
        /* Navigation Bar
        -------------------------------------------------------- */
    
        body { padding-top: 50px; }
    
        .primary-nav {
            width: 100%;
            float: none;
            background-color: white; 
            /* background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.2)); */
            display: block;
            height: 50px;
            margin: 0;
            padding: 0;
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(0,0,0,.6);
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 998;
            clear: both;
        }
        .primary-nav li {
            display: none;
            width: 100%;
            font-family: Arial;
            text-align:center;
            
        }

        .primary-nav li a {
            display: block;
            width: 90%;
            padding: 20px 5%;
            font-size: 18px;
            /* font-weight: bold; */
            /* text-shadow: -1px -1px 0 rgba(0,0,0,.15); */
            color:#202020;
            text-decoration: none;
            /* border-bottom: 1px solid rgba(0,0,0,.2);
            border-top: 1px solid rgba(255,255,255,.1); */
        }

        .primary-nav ul{
            width:50%;
            margin:0 auto;
            overflow:hidden;
        }

        .primary-nav ul li{
            width:26.5%;
            
        }

        /* .primary-nav li a:hover {
            color: #854731;
            border-top-color: transparent;
        }  */

        .primary-nav ul li a{
            color:#8b0000;
            font-weight:bold;
        }

        .primary-nav ul li .fab,
        .primary-nav ul li .far{
            color:#8b0000;
            font-weight:bold;
        }

        .primary-nav > li:first-child {
            border-top: 1px solid rgba(0,0,0,.2);
        }
    
        /* Toggle the navigation bar open  */
    
        .primary-nav.open {
            height: auto;
            padding-top: 50px;
        }
        .primary-nav.open li {
            display: block;
        }

    
        /* Submenus – optional .parent class indicates dropdowns */
    
        .primary-nav > li:hover > a {
            background: white;
            border-bottom-color: transparent;
            color:#8b0000;
        }
        .primary-nav li.parent > a:after {
            content: "▼";
            color: rgba(255,255,255,.5);
            float: right;
        }
        .primary-nav li.parent > a:hover {
            
            background: rgba(0,0,0,.75); 
        }
        .primary-nav li ul {
            display: none;
            background: rgba(0,0,0,.5);
            border-top: 0 none;
            padding: 0;
        }
        .primary-nav li ul a {
            border: 0 none;
            font-size: 12px;
            padding: 10px 5%;
            font-weight: normal;
        }
        .primary-nav li:hover ul {
            display: block;
            border-top: 0 none;
        }

        
        form{
            padding:2em 2.5em 2em 2em;
        } 

        form ul{
            max-width:90%;
            margin:0 auto;
        }
    
} /* End Mobile Styles */  
/*MOBILE NAVIGATION*/



    @media screen and (max-width: 700px) {

        /* body{
            background-color:lightsalmon; 
        }  */

        .row-height {
            height: 1060px;
          }

        .flogo .logoname {
            font-size: 1.7rem; 
        }  

        .user-img{
            width:85%;
        }
        .row-height{
            height:1200px;
        }

        #aside {
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%); 
            width: 70%;
            text-align: center;
            z-index:300;
        }

        #aside h2{
            font-size:280%;
        }
    
        #aside p{
            font-size: 150%;
        }

        #background img{
            opacity:1;
        }

        .fontkristi {
            font-size: 2.3rem;
            margin: 0.1em;
        }

          .flogo .logoname {
            font-size: 1.6rem; 
        }  

        h1{
            font-size:2.1rem;
        }

        input[type="button"] {
            width:100px;
            font-size:1.2em;
        }

}

@media screen and (max-width:550px) {

        /* body{
            background-color:lightgreen; 
        }  */

        .row-height{
            height:1120px;
        }

        .thumbnail,
        .thumbnail:first-of-type, 
        .thumbnail:last-of-type{
            width:29%;
            margin:2.1%;
            float:left;
        }

        .thumbnail:nth-child(3),
        .thumbnail:nth-child(4){
            width:45.6%;
        }

        .thumbnail .description {
            position: static;
            display:block;
            opacity: 1;
            transform:unset;
            text-align:center;
            /* padding:20% 0; */
            width:50%;
            /* font-family: 'Josefin Sans', sans-serif; */
            text-transform:capitalize;
            letter-spacing: 0.1em;
            font-size: 1.6em;
            width:100%;
            line-height:0.3;
        }
    
        #imagegallery h1{
            text-align:center;
        }
  
        #imagegallery h2 {
          display:none;
        }

        #imagegallery {
            padding: 20px 0 70px 0;
        }

        .gallery .wrapper{
            max-width: 100%;
        }

        .gallery #top{
            height:40px;
        }
        
        #slidertop{
            height:50px;
        }

        .thumbnail:hover{
            opacity:1;
        }

        form h1{
            color:#854731;
        }

        form{
            background-image:none;
        }
    }

    @media screen and (max-width:400px){

        /* body{
        background-color:tan; 
        }  */

        .row-height{
            height: 1040px;
        }

    }