@media screen{
*{
margin:0;
padding:0;
}

body{
background-color:#997F68;
color:#000;
min-height:100%;
width:100%;
overflow-x:hidden;
}

h1{
font-family:Lato, sans-serif;
color:#FFF;
padding:20px 0;
display:inline-block;
width:69%;
}



header{
background-color:#ece680;

overflow:hidden;
transition:width 2s;
-webkit-transition:width 2s;
transition-delay:0s;
-webkit-transition-delay:0s;
box-shadow:0px 0px 15px #555;
 
}

/*header:hover{
width:810px;
}*/


#logo{
background-color:#ece680;
padding:4px;
z-index:0;
position:absolute;
transition:opacity .5s;
-webkit-transition:opacity .5s;
transition-delay:0s;
-webkit-transition-delay:0s;

 
}

#logo-svg{width:90%; max-width:500px; display:block; margin:20px auto;}
#logo-svg path{fill:#695C4F;}

/*social hover effect*/
.social{
display:inline-block;
padding:5px 5px 0 5px;
}

.botsocial{

}

.topsocial{
position:absolute;
transition:opacity .5s;
-webkit-transition:opacity .5s;
}

.topsocial:hover{
opacity:0;
}

.headerlinks{
opacity:0;
color:#695C4F;
font-family:Lato, sans-serif;
text-align:center;
margin:27px 27px 0 0;
padding:20px 0 0 0;
float:right;
height:130px;
width:300px;
background-color:#ece680;
transition:opacity .5s;
-webkit-transition:opacity .5s;
transition-delay:0s;
-webkit-transition-delay:0s;
}

header:hover>.headerlinks{
opacity:10;
transition:opacity .5s;
-webkit-transition:opacity .5s;
transition-delay:1s;
-webkit-transition-delay:1s;
}

#formcontainer{
background-color:#bde2ec;
height:208;
width:380;
opacity:0;
position:absolute;
transition:opacity .5s;
-webkit-transition:opacity .5s;
transition-delay:.75s;
-webkit-transition-delay:.75s;
z-index:1;
}

#email{
margin:25px 30px;
}

#formcontainer:hover{

opacity:10;
font-family:Lato, sans serif;
transition-delay:.75s;
-webkit-transition-delay:.75s;
}


.formin{
width:150px;
height:20px;
border:none;
padding:5px 10px;

}

.subject{
width:304px;
height:20px;
border:none;
margin:5px 0;
padding:5px 10px
}

.message{
padding:5px 10px 10px 10px;
font-family:Lato, sans serif;
font-size:12px;
border:none;
width:304px;
height:75px
}

.send{
color:#695C4F;
border:none;
width:304px;
height:25px;
margin:5px 0 0 0;
display:block;
font-family:Lato, sans-serif;
font-size:15px;
text-align:center;
background-color:#9ecfd8;
transition:background-color 1s;
-webkit-transition:background-color 1s;
}

.send:hover{
background-color:#FFF;
}


nav{
width:50%;
min-width:400px;
height:50px;
margin:20px auto 0px auto;
}

#title{
width:100%;
text-align:center;
}

.content{
width:800px;
height:477px;
padding:5px 10px;
/*background-color:#B8CF73;*/
margin:20px auto 0 auto;
/*box-shadow:2px 2px 10px #555;*/

transition:opacity .5s, max-height .5s;
-webkit-transition:opacity .5s, max-height .5s;
-moz-transition:opacity .5s, max-height .5s;
}


.content-detail{
width:800px;
padding:5px 10px;
min-height:500px;
margin:20px auto 0 auto;


transition:opacity .5s;
-webkit-transition:opacity .5s;
-moz-transition:opacity .5s;
}

.content-detail img{
box-shadow:0px 0px 10px #555;
border: 2px solid #FFF;
}

.nav{
display:inline-block;
color:#FFF;
width:32.66%
}

.navlink{
color:#695C4F;
text-decoration:none;
display:inline-block;
width:100%;
height:20px;
background-color:#B8CF73;
margin:0 2% 0 0;
padding:12px 0 18px 0;
text-align:center;
font-family:Lato, sans-serif;
font-size:1.5em;
transition:background-color .5s;
-webkit-transition:background-color .5s;
box-shadow:0 0 5px #555;
 

}

.navlink:hover{
background-color:#ece680;
}

.rightlink{

margin:0 0 0 0;

 
}

.rightlink:hover{
background-color:#ece680;
}


.thumbnail{
width:188px;
box-shadow:2px 2px 10px #555;
vertical-align:middle; 



    -webkit-transform: scale(1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition:-webkit-transform .5s;
    -moz-transform: scale(1);
    -moz-transition-timing-function: ease-out;
    -moz-transition:-moz-transform .5s;
     transform: scale(1);
     transition-timing-function: ease-out;
     transition:transform .5s;
}

.thumbnail:hover{
width:188px;
height:188px;

    -webkit-transform: scale(1.17);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition:-webkit-transform .5s;
    -moz-transform: scale(1.17);
    -moz-transition-timing-function: ease-out;
    -moz-transition:-moz-transform .5s;
     transform: scale(1.17);
     transition-timing-function: ease-out;
     transition:transform .5s;
     
    position: relative;
    z-index: 99;
    overflow:hidden;
    
}




.ppic{
display:block;
margin:10px auto;
}

.ppicz{
display:inline-block;
margin:10px 9px 10px 9px;
}

.pgif{
display:block;

margin:10px auto;
}

#resume{
margin:6px 0;
}

#textbox{
color:#FFF;
font-family:Lato, sans-serif;
font-size:13px;
display:inline-block;
position:relative;
width:90%;
margin:15px 5%;
}

#textbox p{
float:right;
width:350px;

}

#textbox a{
color:#B8CF73;
text-decoration:none;
transition:color .5s;
}

#textbox a:hover{
color:ece680;
}

.caption{
color:#FFF;
font-family:Lato, sans-serif;
font-size:15px;
text-align:center;
margin-top:20px;
}

p{
margin:0px 0px 20px 0px;
}

#face{
display:inline-block;
float:left;
width:350px;
margin:40px 30px 0px -10px;
border-radius:100%;
background-color:#FFF;
box-shadow:0px 0px 10px #555;
}

#landing-gal{
display:block;
width:90%;
margin:20px auto;
transition:opacity .5s, max-height .5s;
}

/*#landing-gal img{
margin:0 0 20px 0;



     transition-timing-function: ease-out;
     transition:transform .5s, box-shadow .5s, background-color .5s;
}

#landing-gal img:hover{

     transition-timing-function: ease-out;
     transition:transform .5s, box-shadow .5s, background-color .5s;
     cursor:pointer;
     box-shadow:0px 0px 15px #333;
     background-color:#B8CF73;
     
    position: relative;
    z-index: 99;
    overflow:hidden;
}*/



#aboutme{
display:none;
}

footer{
width:100%;
display:block;
background-color:#997F68;
height:50px;
margin:20px auto 0px auto;
text-decoration:none;
float:left;
}

footer p{
font-family:Lato, sans-serif;
color:#fff;
display:block;
margin:auto;
text-align:center;
}


#tfl-banner{
display:block;

margin:10px auto;
width:900px;
}

.banner-container{
display:block;
position:relative;
width:100%;
}

.next{
font-family:Lato, sans-serif;
color:#B8CF73;
display:inline-block;
width:15%;
font-size:16px;
margin:20px 0;
transition:color .5s;
}

.prev{
font-family:Lato, sans-serif;
color:#B8CF73;
display:inline-block;
width:15%;
font-size:16px;
margin:20px 0;
transition:color .5s;
}

.back{
font-family:Lato, sans-serif;
color:#B8CF73;
display:inline-block;
cursor:pointer;
z-index:99;
font-size:16px;
margin:10px 0;
transition:color .5s;
}

.next:hover{cursor:pointer; color:#ECE680;}

.prev:hover{cursor:pointer; color:#ECE680;}

.back:hover{cursor:pointer; color:#ECE680;}

#slidr-hdm img{
border-radius:100%;
}

.construction{
font-family:Lato, sans-serif;
display:block;
font-size:20px;
color:#FFF;
text-align:center;
margin-top:50px;
}

.construction i{
font-size:150px;
}
/*-------------------------------------------------------NEW 2017-----------------------------------------------------*/
.jump-menu{font-family: Lato, sans-serif; color:#FFF; display:block; text-align:center;}

.jump-menu a{text-decoration:none; color:#B8CF73; transition:color .5s;}
.jump-menu a:hover{color:#ECE680;}

h2{
font-family:Lato, sans-serif;
font-size:60px;
font-weight:100;
text-align:center;
color:#ECE680;


display:block;
width:85%;
margin:auto;
z-index:0;
}
.desc{font-family: Lato, sans-serif; display:block; margin:-20px auto 20px; text-align:center; color:#FFF;max-width:90%;}
.desc a{text-decoration:none; color:#FFF; transition:color .5s;}
.desc a:hover{color:#ECE680;}

h3{font-family:Lato, sans-serif;
font-size:40px;
font-weight:100;
color:#ECE680;}

.detailimg{max-width:90%; border:2px white solid}

.video{display:block; margin:0 auto 20px; vertical-align: top; max-width:800px}

.mobile-img{display: none;}

.flipped{-moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";}
        
.round{border-radius:100%;}
}

   .b-lazy {
        -webkit-transition: opacity 500ms ease-in-out;
           -moz-transition: opacity 500ms ease-in-out;
             -o-transition: opacity 500ms ease-in-out;
                transition: opacity 500ms ease-in-out;
                 max-width: 100%;
                   opacity: 0;
    }
    .b-lazy.b-loaded {
                   opacity: 1;
    }
/*-------------------------------------------------------MOBILE----------------------------------------------------*/
 @media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2){
  nav{width:100%; min-width:100%; margin:5px auto 0;}
  .nav{width:32.6%}
  .navlink{font-size:1.2em;}
  #landing-gal{width:100%}
  h2{font-size:35px;}
  .desc{font-size:.8em;}
  .detailimg{max-width:95%; border:none; user-select:none;}
  h3{margin-left:5px;}
  .video{width:95%;}
  .mobile-img{display: block;}
.mobilehidden{display:none;}
  .content{width:100%; height:auto;}
  .textbox{width:90%; display:block; margin:auto;}
  #face{display:block; width:90%; margin:0px auto 20px;}
  
  
  /*TAP REVEAL
  .reveal-container{position:relative;}
  .color-reveal{}
  .line-reveal{position:absolute; top:0px; width:100%;}
#reveal-dahlia{ opacity:0}*/

  }