/*********************************************************/
/* blackut.org
/* © 1996-2015 black0ut.org & BOXdev.com
/*********************************************************/


/*********************************************************/
/* Globals
/*********************************************************/
html, body {
   overflow: hidden;
}

body {
   font-family: 'PT Sans Narrow', sans-serif;
   font-size: 0.65em;
   color: #fff;
   background-color: #fff;
}
body::-webkit-scrollbar {
   display: none;
}

a {
   text-decoration: none;
   color: inherit;
}


/*********************************************************/
/* Title
/*********************************************************/
.titletxt {
   text-transform: uppercase;
   text-shadow: 1px 1px #222;
   position: absolute;
   width: 160px;
   bottom: 8%;
   right: 5px;
   margin-bottom: 15px;
   padding: 15px 15px 10px 15px;
   display: inline;
   opacity: 0.7;
}


/*********************************************************/
/* Info panel
/*********************************************************/
.info {
   text-transform: uppercase;
   text-shadow: 1px 1px #222;
   position: absolute;
   width: 160px;
   bottom: 8%;
   right: 5px;
   margin-bottom: 15px;
   padding: 15px 15px 10px 15px;
   display: none;
   opacity: 0.7;
   z-index: 5;
}

.info ul {
   list-style-type: none;
   padding: 1px 0;
   margin: 3px 0;
   border-bottom: 1px solid #fff;
}

.info li {
   padding: 1px 0;
}

.dark {
   color: #999;
   text-shadow: 1px 1px #333;
}

.dark ul {
   border-bottom: 1px solid #999;
}


/*********************************************************/
/* Navigation
/*********************************************************/
nav {
   text-transform: uppercase;
   text-shadow: 1px 1px #222;

   text-align: right;
   position: absolute;
   width: 400px;
   height: 7%;
   bottom: 1%;
   right: 5px;
   padding: 0;

   overflow: visible;
   display: none;
   opacity: 0.7;
   z-index: 5;
}

nav ul {
   list-style-type: none;
   padding: 0;
   margin: 3px 0;
}

nav li {
   height: 0.65em;
   display: inline-block;
   padding: 0 15px;
}

#btn-left {
   font-size: 4vh;
   text-transform: uppercase;
   text-shadow: 1px 1px #222;
   overflow: visible;
   display: none;
   opacity: 0.25;
   z-index: 5;
   position: absolute;
   padding: 0;
   margin: 0;
   top: 40%;
   left: 15px;
}

#btn-right {
   font-size: 4vh;
   text-transform: uppercase;
   text-shadow: 1px 1px #222;
   overflow: visible;
   display: none;
   opacity: 0.25;
   z-index: 5;
   position: absolute;
   padding: 0;
   margin: 0;
   top: 40%;
   right: 15px;
}


/*********************************************************/
/* Photo gallery
/*********************************************************/
#gallery {
   background-color: #fff;
   display: block;
   position: static;
   height: 100vh;
   width: 100vw;
   top: 0;
   left: 0;
   overflow: hidden;
}

#gallery .photo, #about, #title {
   position: absolute;
   width: 100vw;
   height: 100vh;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   overflow: hidden;
}

#gallery .photo {
   /* NOTE:
    * Blending modes don't work for all browsers, and this
    * may break stuff where it's not supported.
    * Also, we're using this so we can animate it via
    * jQuery, which is reliant on their color plugin:
    *    https://github.com/jquery/jquery-color
    */
   background-color: #898989;
   background-blend-mode: hard-light;
}


/*********************************************************/
/* About photo
/*********************************************************/
#about {
   display: none;
   z-index: 4;
}

#about .info {
   width: 280px;
   bottom: 8%;
   left: 5px;
}

#about p {
   padding-top: 12px;
}