body, p, header, aside, section, article, figure, h1, h2, h3, nav, div, footer {
 padding: 0;
 margin: 0;
}

body {
 background-color: black;
 font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
 font-size: 100%;
 color: white;
}
#wrapper {
 max-width: 1280px;
 margin: 0 auto;
 background-color: #111011;
}
header {
 background-image: url('../img/_headBG.png');
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: top;
 padding: 0 30px 30px;
}
#logoSKR {
 max-width: 32%;
 display: inline-block;
}
#logoSKR img {
 max-width: 100%;
}
.socialMedia {
 width: 67%;
 display: inline-block;
 margin-bottom: 2%;
}
footer {
 background-image: url('../img/_footBG.png');
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: bottom;
 color: black;
 padding: 6% 0;
}
/*
#footBar {
 padding: 0 30px;
 color: black;
}
*/

.socialMedia ul {
 float: right;
}
.socialMedia li {
 display: inline-block;
 padding: 0 5px;
 opacity: 0.7;
}
.socialMedia li:hover {
 opacity: 1;
}
.badgeLink {
 display: inline-block;
 opacity: 0.7;
 padding: 0 30px 15px;
}
.badgeLink:hover {
 opacity: 1;
}
.badgeLink img {
/* max-width: 14%;*/
 max-width: 60px;
}

ul {
 text-align: left;
 list-style: square;
}
li {
 padding: 0 0 5px;
}

nav {
 font-size: calc(0.75em + 0.75vw);
 padding: 0 30px;
/* font-size: 150%;*/
 text-align: center;
 
 -webkit-user-select: none;
 -moz-user-select: none;
 user-select: none;
}
nav ul {
 display: inline-block;
 margin: auto;
 list-style: none;
/* padding: 0;*/
 text-align: center;
}
nav li {
 display: inline-block;
 padding: 0 15px 30px;
}

#scrollToTop {
 position: fixed;
 bottom: 30px;
 right: 30px;
 width: 60px;
 height: 60px;
 opacity: 0.3;
}
#scrollToTop:hover {
 opacity: 1;
}
#scrollToTop img {
 width: 60px;
 vertical-align: bottom;
}

/*
#jumpTo {
 position: fixed;
 right: 30px;
 bottom: 90px;
 width: auto;
 height: auto;
}
#jumpTo a {
 display: block;
 margin: 3px 0;
 width: 30px;
 height: 30px;
 border: solid white 3px;
 border-radius: 30px;
 opacity: 0.3;
}
#jumpTo a:hover {
 opacity: 1;
}
#jumpTo a:active {
 background-color: white;
}
*/

#mobileNav {
 display: none;
 position: fixed;
 background: black;
 width: 100%;
 padding: 60px 0;
 bottom: 0;
 left: 0;
 opacity: 0;
}
#menuBtn input, #menuBtn input + img {
 display: none;
 position: fixed;
 bottom: 30px;
 right: 30px;
 width: 60px;
 height: 60px;
 z-index: 1;
 opacity: 0.5;
}
#menuBtn input:hover + img {
 opacity: 1;
}

section {
 padding: 0 30px 30px;
}
section:after {
 clear: both;
 display: table;
 content: "";
}

/* Factor desc class into structure */
.desc {
 width: 80%;
 margin: 0 auto;
 margin-bottom: 15px;
 text-align: center;
}

/* Reformat .textBody */
.textBody {
 display: inline-block;
 width: 65%;
/* float: left;*/
/* margin-left: 0;*/
 margin-bottom: 15px;
}

.projList {
/* display: ;*/
/* width: 70%;*/
 float: right;
 margin-bottom: 15px;
}

/* JavaScript ERROR control */
h3.jsErr {
 color: red;
}

.jsAct {
 display: none;
}

/* Text Management */

/*
.ref {
 text-indent: -30px;
 padding-left: 60px;
}
*/

h2 {
 text-align: center;
 padding: 0 0 30px;
/* font-weight: 100;*/
}
h3 {
 padding: 0 30px 15px;
/* font-weight: 100;*/
/* font-size: 125%;*/
}

footer h2, footer h3 {
 text-align: center;
 padding: 0;
/* text-align: left;*/
/* vertical-align: middle;*/
}

p {
 padding: 0 30px 15px;
 text-align: justify;
 text-indent: 1.5em;
 clear: both;
}

a {
 text-decoration: none;
 color: rgba(255,255,255,0.3);
}
a:hover {
 text-decoration: none;
 color: rgba(255,255,255,1);
}

p a, ol a, h3 a {
/* text-decoration: underline;*/
 color: rgba(0,255,200,0.7);
}
p a:hover, ol a:hover {
 color: rgba(0,255,200,1);
}

abbr {
 text-decoration: underline rgba(0,255,200,0.7) dotted;
/* font-weight: 550;*/
}
abbr:hover {
   color: rgba(0,255,200,0.7);
}



.left-block {
 float: left;
 text-align: left;
}

.right-block {
 float: right;
 text-align: right;
}

.left-block p, .right-block p {
 text-indent: 0;
}

.container {
 display: flex;
}

.box {
/* display: inline-block;*/
/* vertical-align: top;*/
/* float: left;*/
/* clear: left;*/
}

.content {
/* display: inline-block;*/
/* vertical-align: top;*/
/* float: right;*/
/* clear: right;*/
}



.leftBlock {
  clear: left;
  display: inline-block;
  padding: 0 0 15px;
  float:left;
  text-align: left;
/*  max-width: 43%;*/
}

.rightBlock {
 clear: right;
 display: inline-block;
 padding: 0 0 15px;
 float: right;
 text-align: right;
/* max-width: 43%;*/ 
}
.rightBlock ul {
/* list-style-position: inside;*/
}

.leftBlock p, .rightBlock p {
  text-indent: 0;
}
h2.leftBlock, h2.rightBlock {
 padding: 0 30px 15px;
}

.note {
  width: 50%;
}

/* -- Line Breaks -- */
.pgBr {
 border-top: 3px solid rgba(255,255,255,0.3);
 padding: 0 0 15px;
 width: 100%;
 float: left;
}

/* -- Image Management -- */
.socialMedia img {
 max-width: 45px;
/* max-width: 35%;*/
 vertical-align: bottom;
}
.tabs {
 padding: 0 30px 30px;
 font-size: 150%;
 text-align: center;
}
.tabs li {
 display: inline-block;
 padding: 15px 30px;
}

.matBack {
 display: inline-block;
 padding: 15px;
 background-color: rgba(255,255,255,0.3);
 margin-bottom: 30px;
 max-width: 100%;
/* height: auto;*/
}
.matFront {
 padding: 5px;
 background-color: rgba(255,255,255,0.3);
}
.gridBack {
 width: 680px;
 min-width: 680px;
}
/*.gridFront { }*/

#selfImg {
 float: left;
 margin-left: 5%;
 max-width: 25%;
/* max-width: 100%;*/
 height: auto;
}
#selfImg img {
 width: 100%;
}
.projImg {
 display: block;
 clear: both;
 margin: 0 auto;
 margin-bottom: 30px;
 max-width: 80%;
/* height: auto;*/
}
.projImg img {
 width: 100%;
/* height: auto;*/
}
figure {
 display: inline-block;
 position: relative;
 margin: 5px;
}
figcaption {
 position: absolute;
 width: 100%;
 padding: 10% 0;
 bottom: 0;
 text-align: center;
 background-color: rgba(0, 0, 0, 0.7)
}
.thumb {
/* width: 100%;*/
 max-width: 210px;
 height: auto;
 background-color: #111011;
 vertical-align: bottom;
}

.featured-img {
 display: inline-block;
 float: left;
}

img {
 -webkit-user-select: none;
 -moz-user-select: none;
 user-select: none;
}

.showOnMobile {
  display: none
 }

/* -- Media Queries -- 
/*@media screen and (max-width:) {}*/
@media screen and (max-width:1289px) and (min-width:1008px) {
  #wrapper {
/*  background-color: red;*/
 } /*FOR TESTING*/
  .desc {
  width: 90%;
 }
}

@media screen and (max-width:1007px) and (min-width:641px) {
 #wrapper {
/*  background-color: darkred;*/
 } /*FOR TESTING*/
/* .textBody {}*/
 .desc {
  width: 100%;
 }
 .note {
  width: 100%;
  text-align: left;
 }
/* .leftBlock { }*/
/* .rightBlock { }*/

 nav {
/*  font-size: calc(0.7em + 0.65vw);*/
  padding: 0;
 }
 .gridBack {
  width: 530px;
  min-width: 530px;
 }
 .thumb {
  width: 160px;
 }
 footer {
  padding: 5% 0;
 }
 footer h2, footer h3 { }
} /*end media query 641-1007px*/

@media screen and (max-width:710px) and (min-width:641px) {
 #wrapper {
/*  background-color: red;*/
 } /*FOR TESTING*/
  #selfImg {
  max-width: 50%;
  height: auto;
  margin-left: 25%;
 }
 .rightBlock {
  clear: left;
  float: left;
  text-align: left;
 }
  .textBody {
  width: 100%;
  margin-left: 0;
 }
}

/*SMALL*/
@media screen and (max-width:640px) {
 #wrapper {
/*  background-color: darkmagenta;*/
 } /*FOR TESTING*/
 header {
  background-image: url('../img/_headBG_m.png');
 }
 #logoSKR {
  display: block;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
 }
 footer {
  background-image: url('../img/_footBG_m.png');
  padding: 10% 0;
 }
 footer h2 {
  text-align: center;
 }
 section {
  padding: 0 15px 30px;
 }
 .textBody {
  width: 100%;
  margin-left: 0;
 }
 .desc {
  width: 100%;
 }
 .note {
  width: 100%;
  text-align: left;
 }
 .rightBlock {
  clear: left;
  float: left;
  text-align: left;
 }
 
 
 
 .container {
 display: inline-block;
}
 
 
 .projDate {
  float: none;
 }
 #selfImg {
  max-width: 50%;
  height: auto;
  margin-left: 25%;
 }
 .gridBack {
  width: 360px;
  min-width: 360px;
 }
 .thumb {
  width: 160px;
 }
 .tabs {
  padding: 0 0 30px;
 }
 
 /* MOBILE NAV UI */
/*
 #jumpTo {
  display: none;
 }
*/
 #scrollToTop {
  display: none;
 }
 .socialMedia {
  display: none;
 }
 #mobileNav .socialMedia {
  display: block;
  margin-bottom: 0%;
  position: fixed;
  bottom: 30px;
  right: 120px;
  background: black;
  z-index: 1;
 }
/*
 nav {
  padding: 0;
 } 
*/
 
 #mobileNav nav {
  display: block;
  position: fixed;
  bottom: 90px;
  right: 1px;
  background: black;
  z-index: 1;
 }
 #mobileNav nav li {
  display: block;
  padding: 15px 0;
 }
 #mobileNav nav li a {
  padding: 15px 30px 15px 30px;
 }
 
 #menuBtn input +img {
  display: block;
 }
 #menuBtn input {
  display: block;
  bottom: 27px;
  right: 27px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
 }
 #menuBtn input:checked ~ img {
  box-sizing: border-box;
  background: url('../ico/menu_m.png');
  background-size: contain;
  width: 60px;
  height: 60px;
  padding-left: 60px;
 }
 #menuBtn input:checked ~ #mobileNav {
  display: block;
  opacity: 1;
 }
 
 .hideOnMobile {
  display: none
 }
 
 .showOnMobile {
  display: block
 }
 
} /*end media query >640px*/

@media screen and (max-width:520px) {
  #wrapper {
/*  background-color: darkblue;*/
 } /*FOR TESTING*/
 
/*
  .gridBack {
  width: 455px;
  min-width: 455px;
 }
 .thumb {
  width: 135px;
 }
*/
} /*end media query >520px*/


/*@media screen and (max-width:360px) {} */
/*end media query >360px*/
/*@media screen and (max-width:330px) {} */
/*end media query >330px*/