@import url(http://fonts.googleapis.com/css?family=Roboto:300,700,300italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Oswald);



body {
margin:0;
background:black;
color:white;
line-height:1.25;
font-weight:300;
font-family: 'Roboto', sans-serif;
}

/*-------- General Formatting -----------*/

.narrow {
max-width:660px;
}


/*------------- Top Navigation ------------------*/

.nav {
text-align:center;
z-index:999;
}

.nav ul {
display:inline-block;
margin:0; 
padding:1px;
background:#111;
list-style:none;

border:solid 2px #333;
border-radius:4px;
}

.nav > ul > li { display:inline; position:relative;   }

.nav li a {
display:inline-block;
padding:11px 21px 11px;
text-decoration:none;
font-family: 'Oswald', sans-serif;
background:#050505;
font-size:18px;
margin:1px;
border:solid 1px #707070;
border-right-color:#333;
border-bottom-color:#333;
border-radius:2px;
line-height:1em;
transition:.2s ease-out;
}

.nav a .arrow {
display:inline-block;
border:solid 4px transparent;
border-top:solid 5px ;
height:0; width:0;
position:relative;
top:0px;
left:3px;
border-radius:0;
}

.nav li a:hover, .nav li a:focus {background-color:#901010;}

.nav li a:active {color:#fa1;}

/*-------------------- Dropdown Menu ----------------------------*/

.nav li ul {
display:none;
position:absolute;
opacity:.95;
top:25px;
left:0;
width:100%;
overflow:hidden;
}

.nav li:hover ul {
display:block;
animation: SlideDown .6s ease both;
}

.nav li ul li a {
display:block;
}

/*----- navigation animation --------*/
body { animation: comeIn .4s ease 0s both; }

.nav { animation: comeIn .3s ease .2s both; }
.nav > ul > li > a { animation: comeIn .7s ease-in-out .2s both; }
.logo { animation: comeIn 1.4s ease-out .4s both; }


@keyframes comeIn {
 0% {opacity:0; }
 100% {}
}

@keyframes SlideDown {
 0% { max-height:0;}
 100% {max-height:200px;}
}


/*--------- Lightbox Gallery -----------*/

#gallery {
text-align:justify;
}

#gallery a {
display:inline-block;
padding:5px;
margin:5px;
background:#222;
border:solid 1px #444;
border-radius:2px;
transition:.15s;
min-width:160px;
min-height:140px;
transition:.4s;
}

#gallery a:hover {
background:#2a2a2a;
border-color:#666;
transform:scale(1);
}

#gallery a img { min-width:130px; min-height:100px; margin:0; border:none; }

/*--- Lightbox ----*/
.gallery-wrapper {
background:rgba(10,10,10,.9);
position:fixed;
top:0; left:0; bottom:0; right:0;
width:100%;
height:100%;
text-align:center;
overflow:auto;
}

.gallery-wrapper .container {
display:inline-block;
position:relative;
margin:auto;
margin-top:2.5%;
padding:8px;
background:#444;
border:solid thin #777;
max-width:80%;
}

.gallery-wrapper .container .inner {
display:inline-block;
border:solid thin #111;
max-width:100%;
}

.gallery-wrapper .container .inner img {
height:90%;
max-width:100%;
border:none;
}

.container .arrow {
background:rgba(235,235,235,.1);
width:10px;
height:98%;
position:absolute;
cursor:pointer;
}

.container .arrow.left{
left:-10px;
}
.container .arrow.right {
right:-10px;
}

/*------- footer --------*/

.footer {
border:solid 1px #2a2a2a;
background:#070707;
margin-top:15px;
padding:5px;
}

.footer ul{
list-style:none;
margin:4px; padding:0;
text-align:center;
}
.footer ul br {display:none;}

.footer li {
display:inline;
font-size:12px;
}

.footer li a {
display:inline-block;
padding:3px 6px;
color:#f0f0f0;
margin:1px;
}

.footer li a:hover {
color:white;
background:#191919;
}