@-ms-viewport{
  width:device-width;
}

body{
font-size: 100%;
font-family: "latolight", sans-serif;
background: #111;
color:#eee;
min-height: 100vh;
}
a{
text-decoration:none;
color:inherit;
}

.leaveout{
  display: none;
  height:0;
  width:0;
  visibility: 0;
}

.timeline-Tweet-text{
  font-family: "latolight" !important;
}

.clearfix:after{
  content:'';
  width:0;
  height:0;
  clear: both;
  display: block;
  visibility: hidden;
}
.hidden{
display:none;
visibility:hidden;
}




#contentCont section{
display: none;
min-height: 36em;
}

.centertext{
  display: block;
  text-align: center;
  margin-bottom: 2em;
}

#photos{
  text-align: center;
}
#photos img{
  max-width: 28rem;
  width: 100%;
  box-sizing: border-box;
  display: inline-block;
  margin-bottom: 2em;
transition: all ease 0.5s
}
#photos img:hover{
}

.shown{
display: block !important;
}
.shown.animate{
  animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn{
  0%{opacity:0.0;}
    100%{opacity: 1.0;}
}
@keyframes fadeOut{
  0%{opacity:1.0;}
    100%{opacity: 0.0;}
}


#bannerContainer{
width:100%;
height: 100%;
box-sizing: border-box;
/*max-height: 20rem;*/
min-height: 100vh;
overflow: hidden;
position: absolute;
transition: all ease 2s;
}
.shrinkBanner{
  position: relative !important;
  animation: shrink 2s forwards ease;
}
@keyframes shrink{
  0%{ max-height: 101vh;}
    100%{
      max-height: 20rem;
      min-height: 20rem;

    }
}

.banner{
  opacity: 1.0;
  /*animation: fadeIn 0.8s forwards;*/
}
.fullscreened #bannerContainer img{
  bottom:0%;
}
#bannerContainer img{
  transition: all ease 2s;
  box-sizing: inherit;
position: absolute;
bottom:-50%;
left:-110vw;
min-height: 110vh;
width: auto;
}

.topbar{
  height:4em;
  width:100%;
  display: block;
}

.titlebar{
background: #333;
color:#eee;
width:100%;
display:block;
margin:0 auto;
}
.menu{
  opacity: 0.0;
width:100%;
background:rgba(34, 34, 34, 0.9);
display:none;
text-align:center;
z-index: 100;
position: fixed;
top:4rem;
border-top: thin solid rgba(212, 212, 212, 0.7);
}
.menu ul li a{
padding:1.6em 1.8em;
display:inline-block;
position: relative;
width: 100%;
box-sizing: border-box;
text-transform: uppercase;
}
.menu ul li a:hover{
  background: #111;
}

main{
  padding-top: 2em;
  width: 90%;
  display: block;
  max-width: 60em;
  margin: 0 auto;
}
main:before{
  z-index: -1;
  opacity: 0.05;
  content:'';
  bottom:-4vh;
  left:0;
  min-width:100vw;
  height: 100vh;
  background: url("../img/banner3.jpg");
background-size: cover;
  position: fixed;
}
main p{
line-height: 1.4em;
}
iframe.video{
  max-width:70em;
width: 100%;
  height: 39.6em;
  margin: 0 auto;
  opacity:0.0;
  outline: 0;
  border: 0;
  display: block;

  }
  .fadeOut{
    animation: fadeOut 0.1s forwards;
  }
  .videoCont{
    position: relative;
    max-height: 3.1rem;
    height: 0;
    text-align: center;
    box-sizing: border-box;
    display: block;
    width:100%;
    border-bottom: medium solid #eee;
    margin-bottom: 2rem;
  }
.fadeIn{
  animation: fadeIn 1s ease forwards;
}
  .expanded{
    overflow:hidden;
    max-height:41.6rem;
    height:100%;
  }
  #loading{
display: block;
text-transform: uppercase;
background: rgba(34, 34, 34, 0.9);
width:100%;
top: 8rem;
text-align: center;
padding:1rem;
box-sizing: border-box;
position: absolute;

  }
  .expanded iframe.video{
    display: block;
    animation: fadeIn 1.4s forwards;
  }
  .collapsed iframe.video{
    display: none;
  }
#contactForm{
  border-top: medium solid #fff;
  padding-top: 2em;
max-width: 24em;
margin: 0 auto;
line-height: 2em;
padding-bottom:2rem;
}
.heading{
  text-transform: uppercase;  letter-spacing: 0.02em;
  font-family: "latomedium", sans-serif;
  font-size: 2em;
  margin:0;
  padding:0;
  margin-top: 2rem;
  margin-bottom: 1em;
}
.headingSmall{
  font-size: 1.5em;
  margin:0;
  padding:0;
  }
.headingBar{
  color: #999;
  font-variant: small-caps;
  display: block;
  width:100%;
  text-align: center;
  background: #222;
padding: 1em;
box-sizing: border-box;
}

#contactForm input, #contactForm textarea{
font-family: inherit;
padding: 0.6em 0.8em;
background: #222;
color:#eee;
border: thin solid #eee;
transition: all ease 0.2s;
float: right;
width: 14em;
}
input[type="checkbox"]{
  display: none;
}
.checkbox{
  float: right;
  display: block;
background: #222;
  color:#eee;
  border: thin solid #eee;
  font-size: 1em;
  width: 2rem;
  height:2rem;
}
.checkbox a{
  text-align: center;
  display: block;
  z-index: 100 !important;
  opacity: 1;
}
#contactForm textarea{
  min-height: 8em;
}
#contactForm input:focus,  #contactForm textarea:focus{
  margin-right: 0.1em;
  box-shadow: 0.4em 0.4em 0.4em rgba(0, 0, 0, 0.6);
  outline: 0;
  color: #fff;
  background: #333;
  border: thin solid #fff;
}
#contactForm input[type=submit]:focus{
  margin-right: -0.1em;
  box-shadow:inset 0.4em 0.4em 0.4em rgba(0, 0, 0, 0.5);
  outline: 0;
  color: #fff;
  background: #333;
  border: thin solid #fff;
}
#contactForm textarea{
  resize: none;
  height: 4em;
  margin-bottom: 2em;
}
#submit{
clear: both;
}
.star{
  color:#c00;
  font-size: 1.4em;
}
#contactForm label{
  clear: both;
}

#menuButton{
  z-index: 2000 !important;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 1rem;
  font-family: serif;
  box-sizing: border-box;
  font-size: 2rem;
position: fixed;
top:0;
background: #222;
}

#menuButton .hideextra{
  display: none;
}
#menuButton img{
  float: right;
  max-width: 2rem;
}

#sitetitle{
  top: 20%;
font-family: serif;
font-size: 4em;
z-index: 100;
  position: absolute;
  margin: 0 auto;
  width:100%;
  display: none;
  text-align: center;
  /*color:#8c8217;*/
  color:#eee;
text-transform: uppercase;  letter-spacing: 0.02em;
 padding: 0.5rem 0rem;
box-sizing: border-box;
background: rgba(34, 34, 34, 1); /*#e4a33f*/
transition:  all ease 2s;
}

#social{
position:fixed;
bottom:0;
right:0;
width:100%;
text-align: center;
background: rgba(0, 0, 0, 0.6);
}
#social img{
  opacity: 0.6;
  padding:0.5rem 2rem;
  width:2rem;
  height:2rem;
  max-width: 100px;
  max-height: 100px;
}
#social img:hover{
  opacity: 1.0;
}
footer{
  clear:both;
  width:100%;
  display: none;
  background: #333;
  margin-top: 2em;
  padding:1em 0;
  padding-bottom: 4rem;
  box-sizing: border-box;
  font-size: 0.8em;
}
footer #footcont{
  margin: 0 auto;
  margin-top: 2em;
  max-width: 60em;
}
footer #footcont nav{
  float: right;
  text-align: right;
}
footer #footcont nav ul li a{
  padding: 1em;
}
footer #footcont nav ul li a:hover{
  color:#aaa;
}
footer #footcont nav ul li{
  padding: 0.5em;

}

.fullscreened #menuButton{
  background: #222;
  }

.stucko{
  z-index: 9000;
  position: fixed;
  top:0;
  left:0;
}

.fullscreened #sitetitle{
 display: none;
}

.fullscreened .menu{
  position: absolute;
  color:#eee;
  /*background: #d89935;*/
}
.fullscreened .menu ul li a:hover{
  /*color: #8c8217 ;*/
  color:#ccc;
}

.fullscreened .menu ul li a:after{
display: none;
}

#bio p{
  line-height: 1.4em;
  margin-bottom: 1em;
  text-align: justify;
}
#bio img.profile{
  display: block;
  max-width:21rem;
  width: 100%;
  max-height:15rem;
  margin: 0 auto;
  float: none;
}
p.margin-bottom-big{
  margin-bottom: 5em !important;
}
#tabs{
display: block;
text-align: center;
margin-bottom: 1em;
}
#tabs img{
  padding:0 1em;
  width:2.5rem;
  transition: all ease 0.4s;
  opacity: 0.6;
}
#tabs img:hover{
  opacity: 1.0;
  }

#tabs li{
  display: inline-block;
}
#tabs li a{
  display: block;
  font-size: 1em;
  padding:0.5em;
}
.fromleft{
  overflow: hidden;
  animation: fromleft 0.8s ease forwards;
}
@keyframes fromleft{
0%{width:80%;}
100%{width:100%;}
}
.fromright{
  overflow: hidden;
  animation: fromright 0.8s ease forwards;
}
@keyframes fromright{
0%{width:120%;}
100%{width:100%;}
}
#twitterline{
width:100%;
text-align: center;
margin-bottom: 2rem;
}
#facebookline{
width:100%;
text-align: center;
margin-bottom: 2rem;
display: none;
}
#facebookline iframe{
  min-height: 60rem;
  width:30em;
text-align: center;
height:auto;
}
#instagramline{
width:100%;
margin-bottom: 2rem;
display: none;
}
#instafeed{
  width:100%;
max-width: 31em;
margin:0 auto;
}
#instafeed img{
  width:10em;
}

.message{
  display: block;
  position: absolute;
  width:auto;
  height:auto;
  background: #eee;
  color:#222;
  font-size: 1.2em;
  top:2em;
  margin:0 auto;
}

#musicplayer{
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
#musicplayer audio{

}
#musicplayer h5{
  max-width:20rem;
width:100%;
  padding: 1em;
  display:block;
margin: 0 auto;
  margin-bottom: 0em;
text-transform: uppercase;  letter-spacing: 0.02em;
  border-bottom:medium solid #eee;
}
#musicselection{
  margin: 0 auto;
  text-align: center;
  display: inline-block !important;
  width: 100%;
margin-top: 2em;
}
#musicselection a{
  padding: 0.5em 1em;
  display: block;
}
#musicselection a:after{
content:">";
opacity: 0.0;
margin-left: -0.5em;
transition: all 0.5s ease;
}
#musicselection a:hover:after{
content:">";
opacity: 1.0;
margin-left: 0.5em;
}
#popupwindow{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.8);
  padding:0.5rem;
  box-sizing: border-box;
  text-align: center;
   z-index: 101;
}
#popupwindow img{
  float: none;
  width:100%;
  max-width: 40rem;
}
.popable{
  cursor: pointer;
}
.grayText, .blueText{
  color:#fff;
  size:1.1em;
  text-transform: uppercase;
  margin-top:2em;
}
.innerText{
  margin-left:1em;
}
.caption{
  background: rgba(34,34,34,0.8);
  padding:1em;
  font-size: 1.2em;
  max-width: 42rem;
  margin:0 auto;
}
#copyright{
  margin-top: 0;
  display: block;
  text-align: center;
  line-height: 1.4em;
}
@keyframes privacy{
  0%{opacity: 0.0;}
  100%{opacity:1.0;}
  }
  #privacy{
    margin-top: 1em;
    float:left;
  }
#privacyCont{
  margin-top: 1rem;
  max-width: 38em;
clear: left;
 float: left;
 height:0;
 overflow: hidden;
  opacity: 0.0;
display: block;
}
.displayprivvy{
  animation: privacy 1s forwards ease;
  height: auto !important;
}
/**************************************************************************************************************************************************************/

@media screen and (min-width:22rem) {
#menuButton .hideextra{
  display: inline-block;
}
}
/**************************************************************************************************************************************************************/

@media screen and (min-width:28em){
  #bannerContainer img{
left:-80vw;
}
}

@media screen and (min-width:38.5em){
  #bannerContainer img{
left:-60vw;
}
}

@media screen and (min-width:44.5em){
  #bannerContainer img{
left:-40vw;
}
}

@media screen and (min-width:60em) {
  #copyright{
    display: inline-block;
    width: 50%;
    text-align: left;
  }
  #loading{
    top: 18rem;
  }

.fullscreened #bannerContainer{
  position:fixed;
  height:100vh;
}

  #bannerContainer img{
  bottom:-50%;
  left:0;
  min-height: 110vh;
  width: auto;
  }
#social{
  background: transparent;
  text-align: right;
}
  #social img{
    opacity: 0.6;
    padding:0.5rem;
    width:1.5rem;
    height:1.5rem;
    max-width: 100px;
    max-height: 100px;
  }

  .menu{
    background: #222;
    border-top: none;
    position: static;
    display: block;
  }
  .menu.stuck{
    z-index: 100;
    position: fixed;
    top:0;
    left:0;
  }

  .fullscreened #sitetitle{
    top:13rem;
    display: block;
    background-color: rgba(34, 34, 34, 0.9);
  }
  #sitetitle{
    top: 15rem;
    background-color: rgba(34, 34, 34, 0.4);
    display: block;
  }
  .fullscreened .menu{
    background:rgba(34, 34, 34, 0.9);
    border-top: thin solid rgba(212, 212, 212, 0.7);
    top:18rem;
}
  #bio img.profile{
    float:left;
  margin-right: 2em;
  margin-bottom: 1em;
}

  #photos img{
    margin-left: 1em;
  max-width: 24rem;
}


  .hideformobile{
    display: inline;
  }
  #menuButton{
    display: none;
  }
  .menu ul li{
    display:inline;
  }
  .menu ul li a{
    padding:0.8em 1.8em;
    margin:0 0em;
    width: auto;
}
.menu ul li a:hover{
  background: transparent;
}

.menu ul li a:after{
content:'';
position: absolute;
left: 50%;
width: 0%;
top:0em;
height: 100%;
border-bottom: thin solid #fff;
transition: all 0.4s ease;
}
.menu ul li a:hover:after{
left: 10%;
width: 80%;
}

}

@media screen and (min-width:72em) {
  .menu ul li a{
    margin:0 1em;
}
#photos img{
  margin-left: 1em;
max-width: 18rem;
}
}