/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
article, aside, dialog, figure, footer, header, hgroup, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}

/* Default font settings.
   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
html { font-size:100.01%; }
body { font-size: 75%;  color: #fff;  background: #eee;  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;}

/* Headings-------------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 	{ font-weight:bold;}
h5, h6				{ text-transform:uppercase;}

h1 { font-size: 2.0em; 	line-height: 1; 	margin-bottom: 0.75em; }
h2 { font-size: 1.7em; 						       	margin-bottom: 0.5em; }
h3 { font-size: 1.25em; line-height: 1; 	margin-bottom: .25em; }
h4 { font-size: 1 em; 	line-height: 1.25; margin-bottom: 1.1em; }
h5 { font-size: 1 em; 						      	margin-bottom: 0.75em; }
h6 { font-size: 1 em; 	 }

a{text-decoration: none; color: #555;}
a:hover{color:#ddd;}

/************* BASIC ************/
header{  grid-column: auto / span 4; }
nav{     grid-column: auto / span 8; }
/* LEFT */
#logo h1            {
  font-size: 2.5em;
  color:#FFF;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1.0 em ;
  margin-bottom: 0.25em;
}
#logo h2.subtitle-1 {
  font-size: 1.805em;
  font-weight: normal;
  line-height: 1em;
  margin-bottom: 0.1em;
}
#logo .subtitle-1   { font-size: 1.105em;}
/* RIGHT */
svg .SMICON{ fill: #777777; }
svg:hover .SMICON{fill: #4DACFE;}

/* icon coloring */
svg.SMTwitter:hover .SMICON{     fill: #1DA1F2;  }
svg.SMInstagram:hover .SMICON{   fill: #E4405F;  }
svg.SMLinkedin:hover .SMICON{    fill: #0077B5;  }
svg.SMBlogger:hover .SMICON{     fill: #FF5722;  }
svg.SMTumblr:hover .SMICON{      fill: #36465D;  }
svg.SMArtstation:hover .SMICON{  fill: #13AFF0;  }
svg.SMFaceboo:hover .SMICONk{    fill: #3B5998;  }

/** other **/
header{ padding-bottom: 2em;}

/** FOOTER **/
footer{width: 75%; margin:0 auto ; display: grid;   grid-gap: 10px;}
footer .contactInfo{width:40%; margin:10px auto;text-align:center;}
/** grid-template-columns: repeat(2, 1fr); **/
footer h1, footer p.copyright{text-align:center;}
/* icon sets */
#social { padding-top: 0.5em;}
.icon-list				{ display-type:none;	text-align:right;}

ul.icon-list				{ margin-right:0px; padding:0px;	text-align:right;}
.icon-list ul 			{ margin-left:11px; margin-top:4px;	height:56px; width:500px;  }
.icon-list li				{ margin:0px; 		padding: 0 2px;	height:32px; width:32px; float:right; overflow:hidden; position:relative; }
.icon-list li img			{ margin:0px; border:0px; 	}
.icon-list li img:hover{ margin-top:-32px; 		}

#footer .icon-list		{ width: 100%;	margin: 0 auto;		text-align:center;}

/* Navigation List */
#links{ padding-top: 2.5em;
  text-align: right;
}
#navList				 	       { clear: right;    }
#navList a				       { color: #aaa;  		}
#navList a:hover		     { color: #fff; 	}
#navList a.current	     { color: #006;		}

ul#navList					       { margin: 0px; padding:0px;}
ul#navList,ul#navList ul	 { list-style-type: none;}
ul#navList li				       { padding: 10px 0px 5px 10px; display: inline;  text-transform:uppercase;font-size: 1.4em; }

/*------ GRID ----- */
body {
  background: #1c1c1c;
  color: #AAA;
}

/* BASIC */
.wrapper {
  display: grid;    padding: 20px;

  grid-gap: 10px;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow:dense;
  grid-row-gap: 5px;
  grid-column-gap: 5px;
}



.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.thmb{
  background-color: #222;
  color: #fff;
  margin: 0.2em;
}

.thmb a img{width: 100%;}

a.thmb img{
  width: 100%;
  padding: 0px;
  margin: 0px;
  text-decoration: none;
}


  body a{
  line-height: 0px;
}

a.icon{}
a.icon:hover{background-color:#2c2c2c;}

a.icon img{
  margin-bottom: 20px;

}

/*------- Thumbnails -------*/
.fr_6{    grid-column: auto / span 2;   }
.fr_4{    grid-column: auto / span 3;   }
.fr_1{    grid-column: auto / span 12;  }
.fr_2{    grid-column: auto / span 6;   }
.fr_3{    grid-column: auto / span 4;   }
.fr_2_3{  grid-column: auto / span 8;   }

.portrait{grid-row:auto / span 2;}

/* gives this a larger net */
@media only screen and (max-width: 900px) {
  .thmb iframe{height: 50em; width:100%;}

  header{  grid-column: auto / span 6; }
  nav{     grid-column: auto / span 6; }
  nav #social { margin:0 auto;} /* width:24em; */
  nav #links {font-size:100%;}
  nav ul#navList{ font-size:1em; }
}
@media only screen and (max-width:700px){
  .fr_4, .fr_1, .fr_2, .fr_3, .fr_2_3{   grid-column: 1/-1;  }
  .thmb .fr_2{ grid-column: 1/-1;}
  .thmb iframe{height: 30em;}
  header{grid-column: 1/-1;margin: 0 auto; }
  nav{grid-column: 1/-1; margin: 0 auto; }
  nav #social { margin:0 auto; margin-left:7px; width:19em;}/* width:24em; */
  nav ul.icon-list{margin-right:1em;}

  footer{width: 100%;}
}


@media only screen and (max-width: 480px) {
  header {
    grid-column: 1/-1; \
    width: 100%;
    margin: 0 auto;
  }
  nav    {
    grid-column: 1/-1;
    width: 100%;
    margin: 0 auto;
  }
  nav #social{ margin: 0 auto;  }
  .icon-list ul   {width: 50%;  margin: 0 auto;}
  .icon-list li   {}
    nav #links    { text-align:center;}
    ul#navList li { width: 100%;  margin: 0 auto; font-size:1.4em;}
.thmb iframe{height: 20em; width:100%;}
  /*FOOTER*/
  footer .fr_2{ grid-column: 1/-1;
  }
  footer .contactInfo{width:100%;}

}

@media only screen and (max-width: 380px) {
  header {
    grid-column: 1/-1; \
    width: 100%;
    margin: 0 auto;
  }
  header #logo h1, header h2, header p{text-align:center;}
  nav #social{ margin: 0 auto;  width:13em;}
  nav ul.icon-list{ margin-right:1em;}
  ul#navList li{ padding:10px 5px; font-size: 1.4em;}
  .thmb iframe{height: 15em; width:100%;}
}
@media only screen and (max-width: 350px) {
  .wrapper{ padding: 5px;}
  #logo h1{ font-size: 2.3em;}
  #logo h2.subtitle-1{ font-size: 1.64em;}
  #logo .subtitle-1{ font-size: 1em;}
  header, nav, wrapper, a.thmb, footer{ width: 96%;}

}
@media only screen and (max-width:1280px){
    .thmb iframe{height: 50em; width:100%;}
}
@media only screen and (min-width:1280px ){
  .wrapper{
    width:1280px;
    margin: 0 auto;
  }
  .thmb iframe{height: 55em; width:100%;}

  a.thmb.fr_1{margin:0.2em 0;}
}