/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/****** TEST 003 ******/

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #11151A;
}

html { font-size: 16px; line-height: 1.4; }

::-moz-selection {
    background: #11151A;
    background: #11151A;
	color: #f6f6f6;
    text-shadow: none;
}

::selection {
    background: #11151A;
	color: #f6f6f6;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video { vertical-align: middle; }


fieldset { border: 0; margin: 0; padding: 0; }

/*
 * Allow only vertical resizing of textareas.
 */

textarea {    resize: vertical;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
.wf-loading nav.top, .wf-loading h1, .wf-loading #content { zoom: 1; filter: alpha(opacity=0); opacity: 0; }
.wf-active nav.top, .wf-active h1,  .wf-active #content  { filter: alpha(opacity=100); opacity: 1; }
.wf-active nav.top, .wf-active h1,  .wf-active #content  { -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -o-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }

@font-face {
	font-family: 'site-ico';
	src:url('fonts/site-ico.eot?-pv64l3');
	src:url('fonts/site-ico.eot?#iefix-pv64l3') format('embedded-opentype'),
		url('fonts/site-ico.woff?-pv64l3') format('woff'),
		url('fonts/site-ico.ttf?-pv64l3') format('truetype'),
		url('fonts/site-ico.svg?-pv64l3#site-ico') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="ico-"], [class*=" ico-"] {
	font-family: 'site-ico';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.ico-twitter:before {	content: "\e002";}
.ico-googleplus:before {	content: "\e003";}
.ico-linkedin:before {	content: "\e006";}
.ico-heymyshko:before {	content: "\e00a";}
.ico-prev-arrow:before {	content: "\e600";}
.ico-next-arrow:before {	content: "\e601";}

/* ==========================================================================
   Main Layout
   ========================================================================== */
html, body { width: 100%; height: 100%; }
body { font-family:  "ff-meta-serif-web-pro", Georgia, Palatino,"Palatino Linotype", Times, "Times New Roman", serif; min-width: 320px; font-weight: 400; color: #333;}
body.grid { background: url(img/grid-480.png) center top no-repeat; }

#page { width: 100%; position: absolute; z-index: 2; top: 80%; background: #f3f3f3; }

#content { width: 800px; margin: 0 auto; padding-top: 1em;}

#site-title { font-size: 2em; text-transform: lowercase;  margin: 0; padding: 0; float: left; font-family: "telefon-web"; float: right; font-weight: 700;}
#site-title a { color: #11151A; text-decoration: none;  }

a.logo { display: block; float: right; font-size: 2.75em; margin: 0; color: #f6f6f6;  text-decoration: none; text-align: center; padding: 0; }
a.logo:hover { color: #11151A; }

#masthead, nav.top { position: fixed; top: 3%; right: 9%; width: 82%;}
#masthead, nav.top { z-index: 4; } 
.logobg { z-index: 3; position: fixed; top: 3%; right: 9%; }
.logobg a.logo { color: #222; }



#masthead .section, nav.section li { float: right; }
#masthead .section { width: 64px; }
#masthead .section span { display: none; visibility: hidden; }
#masthead .section li.next { margin: 0; }
#masthead .section li.prev { float: left; }
#masthead .section a { display: block; background: #11151A; color: #f6f6f6; padding: 0 .625em; font-weight: 700; }
#masthead .section a:hover { background: #999; color: #11151A; }

#banner { height: 80%; position: absolute; overflow:hidden; z-index:3; width: 100%;}
#banner .fadein {  background-color: #233B91; }
#banner .fadein, #banner .overlay, #banner .wrapper, #banner .loading { width: 100%; height: 100%; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; background-position: 50%;}

#banner img, #banner picture, #banner .wrapper, #banner .loading { width: 100%; height: 100%; min-width: 100%; margin: 0 auto; }

#banner .loading {  z-index: 9; }

body #cg { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

#banner .banner-video { width: 100%; height: 100%; position: absolute; top: 0; z-index: 3;  }

#banner video { min-width: 100%; width: auto; position: absolute;  }
#banner video.vmiddle { left: 50%; }
#banner video.hmiddle { top: 50%; }

#footer { width: 100%; clear: both; padding: 4em 0 1em 0; margin: 6em 0 0 0; background: #fff; position: relative; z-indx: 9;}

#footer section { width: 82%; margin-left: 9%; }
#footer p { font-size: 1em; text-transform: lowercase; float: left; }

#footer ul { list-style-type: none; float: right; margin: 0; padding: 0;}
#footer li { float: left; }



/* ==========================================================================
   Navigation
   ========================================================================== */

nav ul { padding: 1em 0 0 0; margin: 0; float: left;  }
nav li { list-style-type: none; float: left; font-size: 1.125em; margin-right: 12px; }
nav a { display: block; color: #11151A; text-decoration: none; border: 0; }
nav a:hover { background: #11151A; color: #f6f6f6; }
nav .here a { font-weight: 700; }

div.btn a:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  margin-right: -0.25em; /* Adjusts for spacing */
}

div.btn { position: fixed; top: 0; z-index: 3; height: 100%; width: 8%; overflow: hidden; -webkit-transition: width 0.5s ease; -moz-transition: width 0.5s ease; -o-transition: width 0.5s ease; transition: width 0.5s ease;}
div.next { right: 0; text-align: right; }

div.btn:hover { width: 16%; }

.btn a { color: #ccc; height: 100%; display: block; font-size: 1.5em;  }
.btn span.ico { position: relative; top: -7%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }

.prev span.ico { left: 16%; }
.next span.ico { right: 16%; }

.btn a:hover, .btn a:focus { color: #222; background: rgba(16,16,16,.1);   }
.prev a:hover span.ico { left: 32%; }
.next a:hover span.ico { right: 32%; }

.topmost .btn a { color: #666; }
.rockbottom .btn a { color: #222; }
.rockbottom .btn span.ico { top: -24px;  }


/* ==========================================================================
   Links + Buttons
   ========================================================================== */
a { text-decoration: none; }
p a, li.link a, #footer a, .list a { background: #e6e6e6; color: #060606; padding: 0 3px; }
p a:hover, li.link a:hover, #footer a:hover, .list a:hover { background: #11151A; color: #f9f9f9; }
.caption a { color: #060606; background: #fff; padding: 0 .333em;}
.caption a:hover { background: #11151A; color: #f9f9f9; }

#footer .links a { padding: 6px; margin-right: 6px; display: block; float: left; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2 { font-weight: 700; }
h1 { margin: 18px 0 9px 0; padding: 0; font-size: 1.5em; }
p { font-size: 1.5em;  margin-top: 0; margin-bottom: 1em;  }
.aside { width: 100%; }
.aside p, #content .aside li { font-style: italic; text-transform: lowercase; font-size: 1.125em;  }
.aside ul { list-style-type: none; padding: 0; }


.caption { font-weight: 400; margin-bottom: 2em; margin-top: 0; font-size: 1.125em; background: #ddd; padding: 24px 12px 12px 12px; }
.caption h3 { padding: 0; margin: 0; font-weight: 400;}

#content .list li {  font-style: italic; text-transform: lowercase; font-size: 1.125em; }

hr { clear: both; }

/* ==========================================================================
   Content
   ========================================================================== */
   
#content ul { padding-left: 0; list-style-position:inside; }
#content li { font-size: 1.5em; line-height: 1.5em; }
#content img { width: 100%; margin-bottom: 2em; }

#content .col-2 img { width: 45%; width: calc(50% - 1em); float: left; }
#content .col-2 .first { margin-right: 2em; }



/* layout */

body.view-info #page { top: 3%;  }
body.view-info .navbanner { position: fixed; top: 0; left: 0; width: 100%; height: 96px; background: #fff; z-index: 2;  }

div.panel { position: fixed; right: 0; top: 0; width: 33%; height: 100%; -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size: cover; background-position: 50%; }

body.view-info #content { margin: 72px 0 0 9%; padding-top: 2em; height: 100%; }

#nav-grid { width: 82%; margin: 0 auto; margin-top: 6em; padding-top: 4em; }
#nav-grid ul { list-style-type: none; margin: 0; padding: 0; }
#nav-grid li { width: 32%; float: left; margin: 0 2% 18px 0; position: relative; }
#nav-grid  img { width: 100%; }
#nav-grid  a { width: 100%; color: #f6f6f6; text-decoration: none; position: relative; display: block; border: 0; }


#nav-grid  h2 { font-size: 1em; position: absolute; bottom: 0; left: 0; z-index: 99; padding: 0 2em 0 1em; 

color: #f6f6f6;
color: rgba(255, 255, 255, 0);
background: #11151A;
background: rgba(41, 41, 41, 0);
font-weight: 400;
}

#nav-grid  a:hover h2  { 

color: #f6f6f6;
color: rgba(255, 255, 255, 1);
background: #11151A;
background: rgba(41, 41, 41, .8);

-webkit-transition: color 0.2s ease, background 0.4s ease;
   -moz-transition: color 0.2s ease, background 0.4s ease;
     -o-transition: color 0.2s ease, background 0.4s ease;
        transition: color 0.2s ease, background 0.4s ease;
}

#nav-grid  a:hover img {  

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	filter: grayscale(100%);

}

#nav-grid  ul li:nth-child(3n+3), #nav-grid .break { margin-right: 0; }

/* ==========================================================================
   Video Elements
   ========================================================================== */
.video {
	position: relative;
	padding-bottom: 50%; /* 16:9 */
	padding-top: 50px;
	height: 0;
	margin-bottom: 2em; 
}
.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* ==========================================================================
   Image Lightbox
   ========================================================================== */
   
#imagelightbox
{
    position: fixed;
    z-index: 9999;
	box-shadow: 0 0 2em #111;
}

.dimmer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9; background: #333; background: rgba(16,16,16,.8);}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */



@media screen and (orientation:portrait) {
	#page { top: 64%; }
	#banner { height: 64%; }
	
}

@media only screen and (max-width: 1440px) {
.navbanner { position: fixed; top: 0; left: 0; width: 100%; height: 96px; background: #fff; z-index: 2;  }
body.view-info #content { width: 54%; }


}

@media only screen and (max-width: 960px) {
	h1 { font-size: 1.5em; }
	h2, p, #content li { font-size: 1.125em; }
	#page { top: 64%; }
	#banner { height: 64%; }	
	#content, body.short #page #content { width: 82%; overflow: hidden; }
	 
}


@media only screen and (max-width: 640px) {



#nav-grid li { width: 100%;  }

#content .col-2 img { width: 100%; }

#footer { padding: 2em 0 1em 0; margin-top: 2em;}
#footer p { text-align: center; width: 100%; }

#footer ul { width: 184px; float: none; margin: 0 auto 2em auto; }
#footer .links a { font-size: 1.125em; padding: 16px; margin: 0 3%; }

}

@media only screen and (min-width: 480px) {
	body.short .panel { display: none; }
	body.short #content { width: 800px; }
}

@media only screen and (max-width: 480px) {

	body { min-width: 320px; }

	h1 { font-size: 1.125em; }
	h2, p, #content li, #content aside p { font-size: 1em; }

	body.view-info .navbanner, .navbanner { height: 96px; }
	
	div.panel { width: 100%; height: 180px; position: static; }
	
	body.view-info #content { width: 82%; padding-top: 0; margin-top: 0; }
	
	#masthead, .logobg { top: 18px;  }
	
	#site-title { float: left; margin-top: 36px; font-size: 1.5em; display: block!important; visibility: visible!important;}
	
	a.logo { font-size: 1.5em; margin-top: 42px; }
	
	
	#nav-grid { margin-top: 3em; }
	
	#footer { background: #222; padding: 0; }
	#footer ul { margin: 0; padding: 0; width: 100%; }
	#footer li { width: 33%; float: left; text-align: center; }
	#footer .links a { width: 100%; padding: 1.5em 0; margin: 0;  text-align: center; background: #1c1c1c; color: #eee; }
	#footer .links a:hover { background: #eee; color: #111; }
	#footer p { display: none; }
	
	
	nav.top {  width: 100%; left: 0; top: 0; right: auto; }
	nav.top ul  { float: none; width: 100%; padding-top: 0; }
	nav.top li  { width: 33.33%; margin: 0; text-align: center; }
	nav.top a { background: #222; color: #fff; width: 100%; padding: .5em 0; }
	nav.top a:hover { background: #eee; color: #111; }
	
	.rockbottom .btn a { color: #444; }
	.rockbottom .btn span.ico { top: -16px;  }
	
	div.btn:hover { width: 24%; }

}





@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpx) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}




#cg{position:relative;width:64px;height:64px;-moz-transform:scale(0.6);-webkit-transform:scale(0.6);-ms-transform:scale(0.6);-o-transform:scale(0.6);transform:scale(0.6)}.fcg{position:absolute;background-color:#ccc;background-color:rgba(200,200,200,.2);height:12px;width:12px;-moz-border-radius:6px;-moz-animation-name:f_fadeG;-moz-animation-duration:.56s;-moz-animation-iteration-count:infinite;-moz-animation-direction:linear;-webkit-border-radius:6px;-webkit-animation-name:f_fadeG;-webkit-animation-duration:.56s;-webkit-animation-iteration-count:infinite;-webkit-animation-direction:linear;-ms-border-radius:6px;-ms-animation-name:f_fadeG;-ms-animation-duration:.56s;-ms-animation-iteration-count:infinite;-ms-animation-direction:linear;-o-border-radius:6px;-o-animation-name:f_fadeG;-o-animation-duration:.56s;-o-animation-iteration-count:infinite;-o-animation-direction:linear;border-radius:6px;animation-name:f_fadeG;animation-duration:.56s;animation-iteration-count:infinite;animation-direction:linear}#fg_01{left:0;top:26px;-moz-animation-delay:.21s;-webkit-animation-delay:.21s;-ms-animation-delay:.21s;-o-animation-delay:.21s;animation-delay:.21s}#fg_02{left:8px;top:8px;-moz-animation-delay:.28s;-webkit-animation-delay:.28s;-ms-animation-delay:.28s;-o-animation-delay:.28s;animation-delay:.28s}#fg_03{left:26px;top:0;-moz-animation-delay:.35s;-webkit-animation-delay:.35s;-ms-animation-delay:.35s;-o-animation-delay:.35s;animation-delay:.35s}#fg_04{right:8px;top:8px;-moz-animation-delay:.42s;-webkit-animation-delay:.42s;-ms-animation-delay:.42s;-o-animation-delay:.42s;animation-delay:.42s}#fg_05{right:0;top:26px;-moz-animation-delay:.49s;-webkit-animation-delay:.49s;-ms-animation-delay:.49s;-o-animation-delay:.49s;animation-delay:.49s}#fg_06{right:8px;bottom:8px;-moz-animation-delay:.56s;-webkit-animation-delay:.56s;-ms-animation-delay:.56s;-o-animation-delay:.56s;animation-delay:.56s}#fg_07{left:26px;bottom:0;-moz-animation-delay:.63s;-webkit-animation-delay:.63s;-ms-animation-delay:.63s;-o-animation-delay:.63s;animation-delay:.63s}#fg_08{left:8px;bottom:8px;-moz-animation-delay:.7s;-webkit-animation-delay:.7s;-ms-animation-delay:.7s;-o-animation-delay:.7s;animation-delay:.7s}@-moz-keyframes f_fadeG{0%{background-color:#eee}100%{background-color:#ccc;background-color:rgba(200,200,200,.2)}}@-webkit-keyframes f_fadeG{0%{background-color:#eee}100%{background-color:#ccc;background-color:rgba(200,200,200,.2)}}@-ms-keyframes f_fadeG{0%{background-color:#eee}100%{background-color:#ccc;background-color:rgba(200,200,200,.2)}}@-o-keyframes f_fadeG{0%{background-color:#eee}100%{background-color:#ccc;background-color:rgba(200,200,200,.2)}}@keyframes f_fadeG{0%{background-color:#eee}100%{background-color:#ccc;background-color:rgba(200,200,200,.2)}}