@charset "utf-8";
@media (orientation: portrait) {


/* =====================================
       MOBILE MENU BUTTON
===================================== */

div#mobile {
  background: #FFFFFF;
  height: 12.5vh;
  display: block;
  z-index: 99;
}
body[data-mode="dark"] div#mobile {
  background: #1a1a1a;
}
div#mobile > a {
  position: absolute;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  align-items: center;
  right: 10vw;
  width: 50%;
  height: 12.5vh;
  color: var(--primary-dark);
  text-decoration: none;
  font-family: 'blackout';
}
body[data-mode="dark"] div#mobile > a {
  color: var(--primary-lighter);
}
div#mobile > a > span {
  -webkit-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  align-self: auto;
  display: block;
  float: right;
  font-size: 4vh;
  margin: 10px;
  user-select: none;
}
div#mobile > a:hover {
  cursor: pointer;
  color: var(--primary);
  text-shadow: 2px 2px 0 var(--primary-dark), 2px -2px 0 var(--primary-dark), -2px 2px 0 var(--primary-dark), -2px -2px 0 var(--primary-dark), 2px 0px 0 var(--primary-dark), 0px 2px 0 var(--primary-dark), -2px 0px 0 var(--primary-dark), 0px -2px 0 var(--primary-dark);
  font-family: 'midnight';
}
body[data-mode="dark"] div#mobile > a:hover {
  color: var(--accent-light);
  text-shadow: 2px 2px 0 var(--accent-dark), 2px -2px 0 var(--accent-dark), -2px 2px 0 var(--accent-dark), -2px -2px 0 var(--accent-dark), 2px 0px 0 var(--accent-dark), 0px 2px 0 var(--accent-dark), -2px 0px 0 var(--accent-dark), 0px -2px 0 var(--accent-dark);
}
div#mobile > a:hover > div.icon > div:nth-of-type(2){
  background-color: var(--primary);
}
body[data-mode="dark"] div#mobile > a:hover > div.icon > div:nth-of-type(2){
  background-color: var(--accent-light);
}
div#mobile > a:active {
  color: var(--primary-darker);
  animation: growDown 300ms ease-in-out forwards;
}
div#mobile > a:active > div.icon > div:nth-of-type(2){
  background-color: var(--primary-dark);
}
div#mobile > a > div.icon {
  display: block;
  width: 5vh;
  height: 5vh;
  padding: 0px;
  float: right;
}

/* ========= THEME SELECT  ========= */


div#navContainer > div > div.icon {
  width: 10vw;
  height: 12.5vh;
  bottom: 0px;
  right: 0px;
  top: 0px;
  z-index: 100;
}
div#navContainer > div > div.icon > div {
  width: 7.5vh;
  max-width: 10vw;
  height: 7.5vh;
  top: 2.5vh;
  right: 0;
  left: auto;
}









/* =====================================
          UNIVERSAL RULES
===================================== */

body {
  font-size: 3vw;
}
body[data-mobile="0"] {
  max-height: auto;
  overflow-y: auto;
}
body[data-mobile="1"] {
  max-height: 100vh;
  overflow-y: hidden;
}
section, 
div.divider {
  position: relative;
  background-attachment: scroll !important;
  background-position: center center !important;
}
div.divider a, 
section#contact a, 
section#subPage h1,
body[data-size="1"] div.flex > h1, 
body[data-size="2"] div.flex > h1,
body[data-size="1"] div.flex > a, 
body[data-size="2"] div.flex > a {
  font-size: 10vw;
}
body[data-size="1"] div.divider > a,
body[data-size="2"] div.divider > a {
  padding: 17.5vh 0px 0px 0px;
}
section#subPage h1 {
  margin: auto;
}

/* ============ MENU  ============ */


body[data-size="1"] div#logo, 
body[data-size="2"] div#logo {
  left: 25px;
  width: 14.7vh;
  height: 14.7vh;
  padding: 5px 0px 0px 0px;
}
body[data-size="1"] > div#navContainer > div,
body[data-size="2"] > div#navContainer > div {
  padding: 12.5vh 0px 0px 0px;
}
nav#menu > ul {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12.5vh 0px 0px 0px;
  background: #FFFFFF;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
body[data-mode="dark"] nav#menu > ul {
  background: #1a1a1a;
}
body[data-mobile="0"] nav#menu > ul {
  bottom: 100vh;
  padding: 0px 0px 0px 0px;
}
body[data-mobile="0"] nav#menu > ul > li {
  bottom: 100vh;
  padding: 0px 0px 0px 0px;
}
body[data-mobile="1"] nav#menu > ul {
  transition: bottom ease-in 0.2s;
}
body[data-mobile="1"] nav#menu > ul > li {
  padding: 15vh 0px 0px 0px;
  transition: padding ease-in 0.2s;
}
nav#menu > ul > li, 
nav#menu > ul > li:nth-of-type(1), 
nav#menu > ul > li:nth-of-type(2) {
  width: 100%;
}
nav#menu > ul > li > a {
  font-size: 4vh;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: center;
  align-items: center;
}
body[data-mobile="1"] nav#menu > ul > li > a > span {
  position: relative;
  padding: 0px 0px 0px 5%;
  -webkit-order: 0;
  order: 0;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-align-self: auto;
  align-self: auto;
}
nav#menu > ul > li > a.drop:after {
  bottom: 30%;
  right: 5%;
}
nav#menu > ul > li[data-status="1"] {
  font-family: 'midnight';
  transition: none;
  box-shadow: inset 0 0 0 0 var(--primary);
}
nav#menu > ul > li[data-status="1"] > a {
  background-color: var(--primary);
  color: #FFFFFF;
  position: absolute;
  height: 15vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
}
nav#menu > ul > li[data-status="1"] span {
  color: #FFFFFF;
  bottom: 0px;
  animation: growDown 300ms ease-in-out forwards;
  z-index: 99;
}


/* ======= SUB MENU  ======= */

ul.sub {
  top: 0px;
  margin: 0px;
  padding: 0px 0px 3vh 0px !important;
  z-index: 98;
}
ul.sub a {
  font-size: 3vh;
  padding: 2vh 10%;
}
body[data-mobile="1"] > div#navContainer > div > nav#menu > ul > li ul.sub[data-status="1"] {
  display: block;
}
ul.sub li:hover > a {
  background: #FFFFFF;
  color: var(--primary);
  text-shadow: 2px 2px 0 var(--primary-dark), 2px -2px 0 var(--primary-dark), -2px 2px 0 var(--primary-dark), -2px -2px 0 var(--primary-dark), 2px 0px 0 var(--primary-dark), 0px 2px 0 var(--primary-dark), -2px 0px 0 var(--primary-dark), 0px -2px 0 var(--primary-dark);
}


/* ======= Footer ======= */

footer > div {
  -webkit-flex-direction: column;
  flex-direction: column;
}
footer > div > div {
  padding: 0px;
}
div#socials {
  width: 100%;
  text-align: center;
  position: relative;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-content: center;
  align-content: center;
}
div#socials > a {
  -webkit-flex: 0 1 20%;
  flex: 0 1 20%;
  -webkit-align-self: auto;
  align-self: auto;
  max-height: 20%;
  max-width: 20%;
  position: relative;
}
footer > div > div:nth-of-type(2) {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
  padding: 0px 5% 2% 5%;
  display: inline-block;
  font-style: italic;
  font-size: 0.8em;
}
footer img {
  width: 100%;
  height: 100%;
  background-color: var(--primary-dark);
}
footer img:hover {
  background-color: var(--primary);
}










/* =====================================
          INDEX ELEMENTS
===================================== */

div.divider  {
  height: 40vw;
}
section#contact {
  height: auto;
}
section#info {
  padding: 50px 5%;
  width: auto;
}
	
	
/* ======= Video Background  ======= */

div#videoBackground {
  position: fixed;
  top: 10vh;
}
div#videoBackgroundOverlay {
  width: 100%;
  height: 56.25vw;
  margin: 8vh 0px 0px 0px;
}
	
	
/* ======= Video Nav Tiles  ======= */

div.tile {
  position: relative;
  width: 50%;
  padding: 28.125% 0px 0px 0px;
}
div.tile:nth-of-type(8) {
  display: none;
}
div.tile h2 {
  font-size: 1em;
  line-height: 1em;
}
div.tile:hover h2 {
  font-size: 1em;
}
div.tile p {
  font-size: 0.75em;
}
	

/* ======= Text Block  ======= */

section#info > div.textBlock {
  width: 100%;
  padding: 0px 0px 60% 0px;
}
div.textBlock > div {
  position: absolute;
  bottom: 7.5%;
  width: 90%;
  height: 25%;
  border: 0px;
  margin: 0px;
  padding: 0px;
  float: right;
  -webkit-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-align-content: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
div.textBlock > div > div {
  -webkit-flex: 1 1 45%;
  flex: 1 1 45%;
}
div.textBlock > div > div > a img {
  top: 0;
}
section > div.textBlock > h1 {
  font-size: 6vw;
  line-height: 1em;
}
div.textBlock > h2 {
  font-size: 1.5em;
  line-height: 1em;
}
div.textBlock > ul {
    padding: 0px 0px 0px 5%;
}
div.textBlock > ul > li {
  line-height: 1em;
  margin: 5% 0px;
}
div.textBlock > ul > li > ul {
  margin: 4% 0px;
}
div.textBlock > ul > li > ul > li {
  margin: 2% 0px;
  font-size: 1em;
}
	
	
/* ======= Contact Form ======= */

section#contact > div {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
}
div.form {
  padding: 5%;
  width: 85%;
  margin: 15% 2.5%;
}
form.contact input, form.contact textarea {
  font-size: 4vw;
  line-height: 5vw;
}
form.contact input:nth-of-type(2) {
  margin: 4% auto;
}








/* =====================================
          SUBPAGE RULES
===================================== */

section#subPage {
  padding: 40% 0px 0px 0px;
  margin: 12.5vh auto 0px auto;
}


/* ======= Videos Page ======= */
	
div.collumns {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}
section#description p {
  font-size: 3vw;
}
section#description h1 {
  font-size: 6vw;
  line-height: 1em;
}
section#description h2 {
  font-size: 4vw;
  line-height: 1em;
}
ul#vList > li > div > div:nth-child(2) h1 {
  margin: 4% 0px 0px 0px;
  font-size: 1.5em;
  line-height: 1.1em;
  -webkit-line-clamp: 3;
}
ul#vList > li > div > div:nth-child(2) > span {
  display: none;
}


/* ======= Graphics Showcase ======= */

div.showcase > div > span {
  width: 90%;
  margin: 5%;
  font-size: 0.8em;
}
a.imagelink {
  width: 90%;
  padding: 3vw 5%; 
  font-size: 3vw;
}
div.showcase h2 {
  font-size: 3vw;
}
section.web div.textBlock, section.graphics div.textBlock {
  width: 100%;
}
div.topLink > a > div:nth-of-type(1), 
div.topLink > a > div:nth-of-type(2) {
  font-size: 2.5vw;
}
div.showcase[data-cols="2"] > div, 
div.showcase[data-cols="3"] > div, 
div.showcase[data-cols="4"] > div, 
div.showcase[data-cols="5"] > div, 
div.showcase[data-cols="6"] > div { -webkit-flex: 0 1 50%; flex: 0 1 50%; } 
div.showcase[data-cols="7"] > div, 
div.showcase[data-cols="8"] > div { -webkit-flex: 0 1 25%; flex: 0 1 25%; }


/* End of Mobile Rules */
}