/* -----------------------------   reset   ---------------------------------- */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td 
{margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

ol, ul {list-style: none; }
.clear{clear:both;font-size:0px;line-height:0px;height:0px;}
strong {font-weight:700;}

div.val, input.val {display:none;}





/* -------------------------   general layout   ----------------------------- */

html {
    position: relative;
    min-height: 100%;
}

body {font-family: "Lucida sans Unicode", Arial, "Trebuchet MS", sans-serif; color:#777; width:100%; background:#000; margin: 0 0 50px; }

#header {height:80px; min-height:80px; width:100%; display:block; background-color: rgba(0, 0, 0, 0.5);  text-align:center; clear:both;}
#content {clear:both;}


h1 {padding:10px 0 6px 0; font-size:2em;  color:#fff;}
h2 {padding:0 0 10px 0; font-size:0.9em; text-transform:uppercase; color:#d9d9d9; }

/* ----------------------------     home     -------------------------------- */


#footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 64px;
    width: 100%;
	text-align:center; 
	padding-top:10px;
}
#footer p {font-size:0.8em; line-height:250%;}
#footer p span.white {padding:5px 12px; color:#fff; }
#footer p a {color:#fff; text-decoration:none;}
#footer p a:hover {text-decoration:underline;}


/* ----------------------------     nav      -------------------------------- */


#navlist{
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
	background-color: rgba(0, 0, 0, 0.5);
}
#navlist li{
    display:inline;
}
#navlist a{
    display:inline-block;
    padding:24px 20px;
	color:#ccc;
	text-decoration:none;
	font-size:0.9em;
}

#navlist a.active{
	background:#fff;
	color:#000;
}

a#facebook-link {
	background-image:url(images/facebook.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:30px 30px;
}

a#instagram-link {
	background-image:url(images/instagram.png);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:30px 30px;
}


/* ----------------------------     fonts    -------------------------------- */


@font-face {
    font-family: 'QlassikMediumRegular';
    src: url('font/Qlassik_TB-webfont.eot');
    src: url('font/Qlassik_TB-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Qlassik_TB-webfont.woff') format('woff'),
         url('font/Qlassik_TB-webfont.ttf') format('truetype'),
         url('font/Qlassik_TB-webfont.svg#QlassikMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'QlassikBoldRegular';
    src: url('font/QlassikBold_TB-webfont.eot');
    src: url('font/QlassikBold_TB-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/QlassikBold_TB-webfont.woff') format('woff'),
         url('font/QlassikBold_TB-webfont.ttf') format('truetype'),
         url('font/QlassikBold_TB-webfont.svg#QlassikBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.QlassikMed {font-weight: normal; font-style: normal; line-height:normal; font-family: 'QlassikMediumRegular', sans-serif; }
.QlassikBold {font-weight: normal; font-style: normal; line-height:normal; font-family: 'QlassikBoldRegular', sans-serif; }


@font-face {
    font-family: 'LatoBlack';
    src: url('font/Lato-Bla-webfont.eot');
    src: url('font/Lato-Bla-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Lato-Bla-webfont.woff') format('woff'),
         url('font/Lato-Bla-webfont.ttf') format('truetype'),
         url('font/Lato-Bla-webfont.svg#LatoBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'LatoBold';
    src: url('font/Lato-Bol-webfont.eot');
    src: url('font/Lato-Bol-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Lato-Bol-webfont.woff') format('woff'),
         url('font/Lato-Bol-webfont.ttf') format('truetype'),
         url('font/Lato-Bol-webfont.svg#LatoBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LatoRegular';
    src: url('font/Lato-Reg-webfont.eot');
    src: url('font/Lato-Reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Lato-Reg-webfont.woff') format('woff'),
         url('font/Lato-Reg-webfont.ttf') format('truetype'),
         url('font/Lato-Reg-webfont.svg#LatoRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'LatoLight';
    src: url('font/Lato-Lig-webfont.eot');
    src: url('font/Lato-Lig-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Lato-Lig-webfont.woff') format('woff'),
         url('font/Lato-Lig-webfont.ttf') format('truetype'),
         url('font/Lato-Lig-webfont.svg#LatoLight') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'LatoHairline';
    src: url('font/Lato-Hai-webfont.eot');
    src: url('font/Lato-Hai-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/Lato-Hai-webfont.woff') format('woff'),
         url('font/Lato-Hai-webfont.ttf') format('truetype'),
         url('font/Lato-Hai-webfont.svg#LatoHairline') format('svg');
    font-weight: normal;
    font-style: normal;

}


.LatoBlack {font-weight: normal; font-style: normal; line-height:normal; font-family: 'LatoBlack', sans-serif; }
.LatoBold {font-weight: normal; font-style: normal; line-height:normal; font-family: 'LatoBold', sans-serif; }
.LatoRegular {font-weight: normal; font-style: normal; line-height:normal; font-family: 'LatoRegular', sans-serif; }
.LatoLight {font-weight: normal; font-style: normal; line-height:normal; font-family: 'LatoLight', sans-serif; }
.LatoHairline {font-weight: normal; font-style: normal; line-height:normal; font-family: 'LatoHairline', sans-serif; }


/* ----------------------------     overlay   ------------------------------- */


#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}


#modalbox, #modalbox2 {
     width: 404px;
     padding: 40px;
     display:none;
     background: #000;
     border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
     box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}

#modalbox h3,#modalbox2 h3  {font-size:1.25em;  color:#fff; line-height:200%;}

#modalbox p, #modalbox2 p {font-size:0.75em; line-height:200%;}

#modalbox p a, #modalbox2 p a {color:#777;}
#modalbox p a:hover,#modalbox2 p a:hover {color:#fff;}

.modal_close { position: absolute; top: 12px; right: 12px; display: block; width: 14px; height: 14px; background: url(../img/modal_close.png); z-index: 2; }