@charset "utf-8";
/* CSS Document */

/* Reset the CSS */
@import url('reset.css');



/* Main styles */
*{box-sizing:border-box;}

::-webkit-scrollbar{
    display:none;
}

body { background: rgba(0,0,0,1.00); position: scroll;}



#wrapper{ width:100%; margin:0 auto;}

header{ background: rgba(0,0,0,1.00);}


section{ width:90vw; margin: 0 auto; height: 100vh; background: rgba(242,235,235,1.00);}



header h1{ font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; color:#fff;}
header h2 { color:#fff;}

h1,h2,h3,h4,h5,h6,p { font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";}


h1{ font-size:75px; line-height: 80px; width: 100%; height:auto;  padding: 2%; color:rgba(13,122,200,1.00) ;}

h2 { font-size: 40px; line-height: 43px; width:100%; height:auto; min-height: 50px; padding:1%;}


/*article{ column-count: 4;}*/

article {  width: 55%; padding: 5px; column-count: 3; column-gap: 15px;}


.col4 > article {
    width: 70%;
   
    column-count: 4;
}

.col5 > article {
    width: 100%;
   
    column-count: 5;
}

.col2 > article {
    
    width:60%;
    column-count: 2;}
    
    
    
.col2 figure {
    
    width: 60%;
    
    
    
}

p{ font-size: 15px; line-height: 18px; padding: 0 1% 0 1%; width: 100%; margin-bottom: 20px; }

 


/*image styles*/
figure {width: 40%; height:auto; float: right; margin: 5px; position: relative;}


figure img{width:100%; height:auto;}


figcaption{width: 100%; height: 50px; padding: 2px; background: #000; color:#fff;  position: absolute; display:none; top:90%;}

figcaption h3{ font-size: 20px; line-height: 43px;}


figure:hover  figcaption{ display: block; }


/* nav and Links*/



nav {
    width: 50px;
    height: 100vh;
    background: #000;
    position: fixed;
    float: right;
    display: block;
    left: 96vw;
    z-index: 100;
    border-left: 1px #fff solid;
}

nav ul> li{ width: 50px;  text-align: center; line-height: 50px; float:left; padding: 2px; }

nav ul> li> a{  color: #fff; font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; font-size: 30px;}



nav ul> li> a:hover{ color: rgba(186,27,179,1.00);}