/*/////////////////////////////////////////////////////////// LANDSCAPE SETTINGS ///////////////////////////////////////////////////////////*/

@media only screen and (orientation: landscape) {

html {
    height: 100%; 
}
body {
    overflow: hidden;
    height: 100%; 
}
/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: #022e36; /* For browsers that do not support gradients */
    background: -webkit-radial-radial-gradient(circle, #FEFEFE, #022e36); /* Safari */
    background: -o-radial-radial-gradient(circle, #FEFEFE, #022e36); /* Opera 11.6 to 12.0 */
    background: -moz-radial-radial-gradient(circle, #FEFEFE, #022e36); /* Firefox 3.6 to 15 */
    background: radial-gradient(circle, #FEFEFE, #022e36); /* Standard syntax */
    z-index:99; /* makes sure it stays on top */
}
#status {
    width:300px;
    height:212px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../img/preloader/LoadLogo.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-106px 0 0 -150px; /* is width and height divided by two */
}
/*hide scrollbars*/
::-webkit-scrollbar { 
    display: none; 
}

/*General text settings*/
a, p, h1, h2, h3, h4, h5, h6, div{
    -webkit-text-shadow: none !important;
   	-moz-text-shadow: none !important;
    -o-text-shadow: none !important;
    text-shadow: none !important;
    font-family: Raleway, sans-serif !important; /*Maybe not Impact?*/
    text-decoration: none !important;
}
/*Regular text*/
a, p{
    font-weight: 100 !important;
    font-size: 1em !important;
    color: #000;
}
/*Big headings - main headings on page*/
h1{
    font-weight: 900 !important;
    font-size: 3em !important;
}
/*Medium headings / MenuBall*/
h2{
    font-weight: 900 !important;
    font-size: 2.5em !important;
}
/*Project headings (and minor/medium)*/
h3{
    font-weight: 100 !important;
    font-size: 2.5em !important;
}
/*Minor headings*/
h4{
    font-weight: 400 !important;
    font-size: 2em !important;
}
/*In-text headings*/
h5{
    font-weight: 400 !important;
    font-size: 1.2em !important;
}
/*Smaller font sizes for lower resolution*/
@media all and (max-width: 1280px) and (orientation: landscape) {
/*Big headings - main headings on page*/
h1{
    font-weight: 900 !important;
    font-size: 2em !important;
}
/*Medium headings / MenuBall*/
h2{
    font-weight: 900 !important;
    font-size: 1.7em !important;
}
/*Project headings (and minor/medium)*/
h3{
    font-weight: 100 !important;
    font-size: 1.7em !important;
}
}
@media all and (max-width: 980px) and (orientation: landscape) {
/*Regular text*/
p{
    font-weight: 100 !important;
    font-size: 0.7em !important;
    color: #000;
}
/*Big headings - main headings on page*/
h1{
    font-weight: 900 !important;
    font-size: 1.6em !important;
}
/*Medium headings / MenuBall*/
h2{
    font-weight: 900 !important;
    font-size: 1.5em !important;
}
/*Project headings (and minor/medium)*/
h3{
    font-weight: 100 !important;
    font-size: 1.5em !important;
}
/*Minor headings*/
h4{
    font-weight: 400 !important;
    font-size: 1em !important;
}
/*In-text headings*/
h5{
    font-weight: 400 !important;
    font-size: 0.7em !important;
}
}
@media all and (max-width: 670px) and (orientation: landscape) {
/*Regular text*/
p{
    font-weight: 100 !important;
    font-size: 0.55em !important;
    color: #000;
}
/*Big headings - main headings on page*/
h1{
    font-weight: 900 !important;
    font-size: 1.3em !important;
}
/*Medium headings / MenuBall*/
h2{
    font-weight: 900 !important;
    font-size: 0.9em !important;
}
/*Project headings (and minor/medium)*/
h3{
    font-weight: 100 !important;
    font-size: 1.1em !important;
}
/*Minor headings*/
h4{
    font-weight: 400 !important;
    font-size: 0.8em !important;
}
/*In-text headings*/
h5{
    font-weight: 400 !important;
    font-size: 0.65em !important;
}
}

@media all and (max-width: 535px) and (orientation: landscape) {
/*Regular text*/
p{
    font-weight: 100 !important;
    font-size: 0.55em !important;
    color: #000;
}
/*Big headings - main headings on page*/
h1{
    font-weight: 900 !important;
    font-size: 1.2em !important;
}
/*Medium headings / MenuBall*/
h2{
    font-weight: 900 !important;
    font-size: 0.9em !important;
}
/*Project headings (and minor/medium)*/
h3{
    font-weight: 100 !important;
    font-size: 1em !important;
}
/*Minor headings*/
h4{
    font-weight: 400 !important;
    font-size: 0.8em !important;
}
/*In-text headings*/
h5{
    font-weight: 400 !important;
    font-size: 0.65em !important;
}
}

/* unvisited link */
a:link {
    color: #EDC548;
    -webkit-transition: color 0.4s;
    transition: color 0.4s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
/* visited link */
a:visited {
    color: #EDC548;
}
/* mouse over link */
a:hover {
    color: #777 !important;
    -webkit-transition: color 0.4s;
    transition: color 0.4s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}
/* selected link */
a:active {
    color: #777 !important;
}


/*//////////////////////////// MENUBALL & SoMe-CONTENT ////////////////////////////*/
/*Central navigation ball*/
.menuBall {
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 30vh;
  height: 30vh;
  background: -webkit-linear-gradient(180deg, #EDC548 50%, #fff 50%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(180deg, #EDC548 50%, #fff 50%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(180deg, #EDC548 50%, #fff 50%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(180deg, #022e36 50%, #3f7888 50%);
  -webkit-transition: 0.5s 0s;
  transition: 0.5s 0s;
  z-index: 2;
}
/*Old central navigation ball
.menuBall {
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 100vh;
  height: 100vw;
  background: -webkit-linear-gradient(180deg, #EDC548 50%, #fff 50%);
  background: -o-linear-gradient(180deg, #EDC548 50%, #fff 50%);
  background: -moz-linear-gradient(180deg, #EDC548 50%, #fff 50%); 
  background: linear-gradient(180deg, #EDC548 50%, #fff 50%);
  -webkit-transition: 0.4s 0s;
  transition: 0.4s 0s;
  z-index: 2;
  opacity: 0.7;
}*/
/*Part of MenuBall leading to How & What*/
#menuHowWhat{
   position: absolute;
   padding: 0;
   margin: 2vw 0vw 0vw 0vw;
   top: 49%;
   width: 100%;
   left: 0;
   text-align: center;
   overflow: hidden;
}
/*Part of MenuBall leading to Who & Where*/
#menuWhoWhere{
	position: absolute;
	padding: 0;
	margin: 2vw 0vw 2vw 0vw;
  bottom: 49%;
	left: 0;
  width: 100%;
  text-align: center;
  overflow: hidden;
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
  -webkit-transition: color 0.4s;
  transition: color 0.4s;
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}
#menuWhoWhere:hover {
    color: #777 !important;
}

/*Positions of Menuball for each page*/
.indexPosMenuBall {
  -webkit-transform: translate(0, 0) rotate(90deg) scale(1, 1);
  transform: translate(0, 20vh) rotate(80deg) scale(0.8, 0.8);
  border-radius: 50%;
}
.whoWherePosMenuBall {
  -webkit-transform: translate(-50vw, -33.54vh) rotate(270deg) scale(0.6, 0.6);
  transform: translate(-50vw, -33.54vh) rotate(270deg) scale(0.6, 0.6);
  border-radius: 0%;
  height: 17vw;
  width: 25vh;
  opacity: 1;
}
.howWhatPosMenuBall {
  -webkit-transform: translate(50vw, -33.54vh) rotate(270deg) scale(0.6, 0.6);
  transform: translate(50vw, -33.54vh) rotate(270deg) scale(0.6, 0.6);
  border-radius: 0%;
  height: 17vw;
  width: 25vh;
  opacity: 1;
}
/*DogD-logo*/
.logo{
    height: auto;
    width: 20vw;
    position: absolute;
    bottom: 3vh;
    left: 40vw;
    -webkit-transition: 0.4s 0s;
    transition: 0.4s 0s;
}
/*Positions of logo for each page*/
.logoIndex {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  opacity: 0;
}
.logoWhoWhere {
  -webkit-transform: translate(-33vw, -18vh);
  transform: translate(-33vw, 0vh);
  opacity: 1;
}
.logoHowWhat {
    -webkit-transform: translate(33vw, -18vh);
    transform: translate(33vw, 0vh);
  opacity: 1;
}


/*//////////////////////////// INDEX-page ////////////////////////////*/
#index{
  margin: 0px;
  padding: 0px;
  border-style: none !important;
  background: #B19065; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, rgba(70, 50, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Safari */
  background: -o-radial-gradient(circle, rgba(70, 50, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, rgba(70, 50, 0, 0.8), rgba(0, 0, 0, 0.9)); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, #265561, #022e36); /* Standard syntax */
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
/*Container for Index content*/
#indexWrapper{
    height: 50vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
}
/*DogD-logo*/
#indexLogo{
    height: auto;
    width: 20vw;
    padding: 0 0 3vh 0;
}
/*Main heading on Index*/
#indexHeading {
  position: absolute;
  bottom: 0;
  height: auto;
  width: 100vw;
  text-align: center;
  white-space: nowrap;
  border-style: none !important;
}

/*Old index
#index{
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  border-style: none !important;
  background-color: rgba(255,255,255, 1);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
#indexOverlay{
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  position: absolute;
  background: #B19065; 
  background: -webkit-radial-gradient(circle, rgba(70, 50, 0, 0.8), rgba(0, 0, 0, 0.9));
  background: -o-radial-gradient(circle, rgba(70, 50, 0, 0.8), rgba(0, 0, 0, 0.9));
  background: -moz-radial-gradient(circle, rgba(70, 50, 0, 0.8), rgba(0, 0, 0, 0.9));
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1));
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}*/





/*//////////////////////////// Who&Where-page ////////////////////////////*/

/*FULL page with Who & Where*/ 
#whoWhere{
	margin: 0px;
	padding: 0px;
	width: 100vw;
	/*height: 100vh; REMOVED to allow smooth scrolling on handhelds*/
	background-color: rgba(235, 212, 0, 0.3);
	border-style: none !important;
}
/*Heading (main info) settings of Who & Where*/
#mainWhoWhere{
	margin: 0px;
	padding: 0px;
	width: 100vw;
	height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-image: url('../img/backgrounds/WhoLandscapeC.jpg');
	border-style: none !important;
}
/*Content wrapper of Who & Where*/
#contentWhoWhere{
	margin: 0px;
	padding: 0px;
	width: 100vw;
	height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}
/*Content wrapper of Who & Where*/
#areaContainer{
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	margin: auto;
	padding: 0px;
	width: 1000px;
	height: 1000px;
    background-color: blue;
    opacity: 0.1;
}
/*Color-overlay for Who&Where*/
#whoWhereOverlay{
  margin: 0px;
  padding: 0px;
  top: 0px;
  left: 0px;
  position: absolute;
    background: #B19065; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(circle, #fff 10%, #B19065); /* Safari */
    background: -o-radial-gradient(circle, #fff 10%, #B19065); /* Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle, #fff 10%, #B19065); /* Firefox 3.6 to 15 */
    background: radial-gradient(circle, #347C82, #002D30); /* Standard syntax */
  width: 100vw;
  height: 100vh;
  opacity: 0.3;
}
/*Footer of Who & Where*/
#footerWhoWhere{
	margin: 0px !important;
	padding: 2vh 6.5vw 2vh 6.5vw !important;
	width: 100vw;
	height: auto;
	background-color: rgba(235, 212, 0, 0.3) !important;
	border-style: none !important;
}
.ui-page .ui-footer{
	margin: 0px !important;
    padding: 0px !important;
}
/*//////////////////////////// MAIN TEXT ON WHO&WHERE ////////////////////////////*/
/*scroll-indicator arrow*/
#scrollWhoWhere{
  position: absolute;
  right: 3vw;
  bottom: 0vw;
  width: 2vh;
  height: 3vw;
  opacity: 0.7;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
/*Main text-container on WhoWhere*/
#whoWhereContainer {
  height: auto;
  min-height: 30vh;
  max-height: 50vh;
  width: 42vw;
  position: absolute;
  bottom: 0vh;
  right: 7vw;
  overflow: hidden;
  background-color: rgba(255,255,255,1);
  border-style: none !important;
}
/*Main heading on WhoWhere*/
#whoWhereHeading {
  	height: auto;
  	width: 38vw;
    padding: 2vh 2vw 1vh 2vw;
  	float: left;
  	white-space: nowrap;
	border-style: none !important;
}
/*Main text on WhoWhere*/
#whoWhereText {
  height: auto;
  width: 38vw;
  max-height: 35vh;
  padding: 0 2vw 2vh 2vw;
  margin: 0 0 2vh 0;
  float: left;
  overflow: auto;
}
/*Scroll-indicator fade below text*/
#scrollFade {
  position: absolute;
  bottom: 0;
  height: 3vh;
  width: 42vw;
  z-index: 20;
  background: rgba(255, 255, 255, 0); /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)); /* Safari */
  background: -o-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)); /* Opera 11.6 to 12.0 */
  background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)); /* Firefox 3.6 to 15 */
  background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.2)); /* Standard syntax */
}

/*Clickable DIVs on faces in Who&Where*/
/*General settings*/
#areaa, #areac, #areab, #aread {
  position: absolute;
  z-index: 2;
  cursor: pointer;
}
/*Per-Johan*/
#areaa {
  	top: 13vw;
  	left: 9vw;
  	width: 10vw;
  	height: 15vw;
  }
/*Simon*/
#aread {
    top: 7.5vw;
    left: 33.5vw;
    width: 10vw;
    height: 15vw;
}
/*SvenH*/
#areac {
  	top: 8vw;
  	left: 55.5vw;
  	width: 10vw;
  	height: 15vw;
}
/*Anders*/
#areab {
  	top: 8vw;
  	left: 77.5vw;
	   width: 10vw;
  	height: 15vw;
}
/*Textbox popups when faces are clicked in Who&Where*/
#infoa, #infob, #infoc, #infod {
  height: auto;
  min-height: 20vh;
  max-height: 50vh;
  width: 38vw;
  background: #fff;
  position: absolute;
  padding: 2vh 2vw;
  z-index: 3;
  bottom: 0vh;
  left: 7vw;
  transition: all .4s ease-in-out;
}
/*Heading in text-boxes*/
.infoHeading{
  	height: auto;
  	width: 38vw;
  	float: left;
    min-height: 5vh;
    margin: 0vh 0vw 2vh 0vh;
  	white-space: nowrap;
    border-style: none !important;
}
/*Textarea in text-boxes*/
.infoText{
  	height: auto;
  	width: 38vw;
  	float: left;
  	overflow: auto;
}
/*Close-button in text-boxes*/
.crosshair{
	position: absolute;
	right: 3vh;
	top: 2.7vh;
	width: 5vh;
	height: 5vh;
  cursor: pointer;
}
/*ScrollDown-button in text-boxes*/
.downBtnStyle{
	position: absolute;
	right: 10vh;
	top: 2.7vh;
	width: 5vh;
	height: 5vh;
  display: none;
}
/*ScrollUp-button in text-boxes*/
.upBtnStyle{
	position: absolute;
	right: 17vh;
	top: 2.7vh;
	width: 5vh;
	height: 5vh;
  	-webkit-transform: rotate(180deg);
  	transform: rotate(180deg);
  display: none;
}
/*Class for toggling textboxes in Who&Where*/
.invisible{
  visibility:hidden;
  opacity: 0;
  transition: all .4s ease-in-out;
}
*{
  margin: 0;
  padding: 0;
}


/*//////////////////////////// MAP-SECTION ON WHO&WHERE ////////////////////////////*/

#mapContainer{
	position: relative;
	bottom: 0px;
	left: -50vw;
	padding: 0px;
	margin: 0px;
	width: 150vw;
	height: 70vh;
	border: 0px !important;
	border-style: none !important;
  z-index: 0;
  overflow: hidden;
}
#contactContainer{
  position: absolute;
  top: 0vh;
  right: 7vw;
  padding: 0vh 2vw 2vh 2vw;
  margin: 0px;
  width: 38vw;
  height: auto;
  min-height: 40vh;
  background-color: #fff;
  overflow: hidden;
  z-index: 1;
}
#contactHeader{
  float: left;
  width: 38vw;
  height: auto;
  margin: 0vh 0vw 2vh 0vw;
  overflow: hidden;
  background-color: #fff;
  white-space: nowrap;
}
#addressContainer{
  float: left;
  margin: 0;
  padding: 0;
  width: 38vw;
  height: auto;
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}
#errorContainer{
  width:100%;
  height:6vh;
  overflow:hidden;
  text-align:center;
  background-color:none;
  margin: 1vh 0vh;
  padding:0px;
}
#map{
	width: 100%;
	height: 70vh;
}
#calculateContainer{
	width: 38vw;
	height: 100%;
	background-color: transparent; !important;
	margin: 2vh 0vh;
	padding: auto;
	display: inline-flex;
	vertical-align: middle;
  border-style: solid;
  border-width: 1px;
  border-color: #000;
}
#textareaContainer{
	float: left;
	width: 100%;
  height: 5vh;
	margin: 0px;
	padding: 0%;
	background-color: transparent; !important;
}
.ui-input-text #from { 
	width: 100% !important;
  font-size: 2vh !important;
  color: #777 !important;
  height: 5vh;
  margin: 0px !important;
}
::-webkit-input-placeholder {
    color:    #888;
}
:-moz-placeholder {
    color:    #888;
}
::-moz-placeholder {
    color:    #888;
}
:-ms-input-placeholder {
    color:    #888;
}
.ui-shadow-inset { 
	border-radius: 0% !important;
	border-style: none !important;
	box-shadow: none !important;
	margin: 0px !important;
	padding: 0px !important;
}
/*Current location*/
#dotContainer{
	width: 5vh;
	height: 5vh;
	padding: auto;
}
#fromDot{
	width:3vh;
	height:3vh;
  padding: 1vh 2vh 1vh 1vh;
}
/*Calculate route*/
#buttonContainer{
  width: 100% !important;
  height: 5vh !important;
  background-color: transparent !important;
  text-align: center !important;
}
#posPic{
  width: 5vh;
  margin: 0px !important;
  padding: 0px !important;
}

/*//////////////////////////// How&What-page ////////////////////////////*/

/*FULL page with How & What*/ 
#howWhat{
	margin: 0px;
	padding: 0px;
	width: 100vw;
  /*height: 100vh; Causes problems with scroll-to-top of collapsibles*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
  background-image: url('../img/backgrounds/HowLandscape.jpg');
}
/*Heading (main info) settings of How & What*/
#mainHowWhat{
	margin: 0px;
	padding: 0px;
	width: 100vw;
	height: 100vh;
  border-style: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
/*Color-overlay for header/main section of How & What*/
#howWhatOverlay{
  margin: 0px;
  padding: 0px;
  bottom: 0px;
  left: 0px;
  position: absolute;
  background-color: rgba(135, 112, 0, 0.3);
  width: 100vw;
  height: 100%;
}
/*Footer of How & What*/
#footerHowWhat{
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw;
  height: 10vh;
  background-color: transparent; !important;
  border-style: none !important;
}

/*//////////////////////////// MAIN TEXT ON HOW&WHAT ////////////////////////////*/
/*Main container on HowWhat*/
#howWhatContainer {
  position: absolute;
  bottom: 0;
  left: 7vw;
  width: 42vw;
  max-height: 90vh;
  background-color: #fff;
  overflow: hidden;
}
/*Heading and text on HowWhat*/
#howWhatInfo{
  width: auto;
  height: auto;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}
/*Main heading on HowWhat*/
#howWhatHeading {
  padding: 2vh 2vw 1vh 2vw;
  height: auto;
  width: 38vw;
  float: left;
  white-space: nowrap;
}
/*Main text on HowWhat*/
#howWhatText{
  width: 38vw;
  max-height: 65vh;
  padding: 0 2vw 0 2vw;
  margin: 0 0 12vh 0;
  overflow: auto;
  float: left;
  border-style: none !important;
}
/*Project list heading on HowWhat*/
#projectListHeading {
  position: absolute;
  bottom: 0;
  height: 7vh;
  width: 38vw;
  padding: 3vh 2vw 1vh 2vw;
  white-space: nowrap;
  background: #fff; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0)); /* Safari */
  background: -o-linear-gradient(0deg, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0)); /* Opera 11.6 to 12.0 */
  background: -moz-linear-gradient(0deg, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0)); /* Firefox 3.6 to 15 */
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 90%, rgba(255, 255, 255, 0)); /* Standard syntax */
}



/*Background of collapsibles (headings)*/
#whatHeading{
  padding: 0px !important;
  margin: 0px !important;
}


/*//////////////////////////// COLLAPSIBLES ON HOW&WHAT ////////////////////////////*/

/*Heading (div) of collapsibles*/
.headingBkg{
  background-color: #FFF;
  width: 38vw;
  height: 5vh;
  padding: 2vh 2vw;
  cursor: pointer;
}
.ui-bar-inherit{
  background-color: transparent !important;
}
.ui-header{
  background-color: transparent !important;
}
/*Heading of collapsible*/
.ui-btn{
  margin: 0px !important;
  padding: 0vh 7vw;
  left: 0px !important;
  border: 0px !important;
  background-color: transparent !important; 
  cursor: default !important;
}
/*Project header links when open*/
.ui-collapsible-heading a{
  color: #333 !important;
  border-style: none;
  box-shadow: none !important;
}
/*Project header links when closed*/
.ui-collapsible-heading-collapsed a{
  color: #bbb !important;
}
/*Project header when open*/
.ui-collapsible-heading{
  background-color: #fff;
  border-style: none !important;
  -webkit-transition: 0.4s 0.03s;
  transition: 0.4s 0.03s;
}

/*Project header when closed*/
.ui-collapsible-heading-collapsed{
  background-color: transparent;
  border-style: none !important;
}

/*Content of collapsible*/
.ui-collapsible-content {
	height: 91.5vh !important;
	width: 100vw;
	overflow: hidden;
	margin: 0px !important;
	padding: 0px !important;
  border-style: none !important;
  box-shadow: none !important;
}

/*//////////////////////////// PROJECT CONTENT WITHIN COLLAPSIBLES IN HOW&WHAT ////////////////////////////*/
/*Content wrapper within collapsible*/
.projectContent{
	position: absolute;
	width: 100vw;
  height: 91.5vh !important;
  left: 0px !important;
	padding: 0px !important;
	margin: 0px !important;
	border-style: none !important;
  background-color: #fff;
}
/*Actual content of projects*/
/*Textarea*/
.projectTextArea{
  position: absolute;
  left: 7vw;
  width: 42vw;
  height: auto;
  max-height: 70vh;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  background-color: transparent;
  border-style: none !important;
  z-index: 1;
}
/*Slider arrows*/
.unslider-arrow.prev {
    bottom: 40.5vh;
    left: 2vw;
}
.unslider-arrow.next{
    bottom: 40.5vh;
    right: 2vw;
}
/*text*/
.textBox{
  width: 38vw;
  max-height: 59vh;
  padding: 0vh 2vw 2vh 2vw;
  margin: 0;
  overflow: auto;
  float: left;
  background-color: rgba(255,255,255,1);
  border-style: none !important;
}
/*transparent area below textbox*/
.belowTextbox{
  width: 38vw;
  height: 5vh;
  padding: 2vh 2vw 2vh 2vw;
  display: inline-block;
  overflow: hidden;
  background-color: rgba(255,255,255,1);
  float: left;
  -webkit-transition: 0.6s 0s;
  transition: 0.6s 0s;
}
/*transparent area below textbox when collapsed*/
.belowTextboxOpaque{
  background-color: rgba(255,255,255,0.5);
  -webkit-transition: 0.6s 0.5s;
  transition: 0.6s 0.5s;
}
.showText{
  width:5vh;
  height:5vh;
  margin: 0vh 0vw 0vh 1vw;
  float: right;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.6s 0s;
  transition: 0.6s 0s;
}
.showText.Ship{
  width:5vh;
  height:5vh;
  margin: 0vh 0vw 0vh 1vw;
  float: right;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
.plusPos {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*Imagearea / Background*/
.projectLargeImg{
  width: 100vw;
  height: 91.5vh !important;
  margin: 0px !important;
  padding: 0px !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-clip: border-box;
  border-style: none !important;
}
/*Internal video background*/
.projectNeutralVideo{
  width: 100vw;
  height: 91.5vh !important;
  margin: 0px !important;
  padding: 0px !important;
  background-color: #fff;
  border-style: none !important;
}
/*Wrapper for video and instructions*/
.videoWrapper{
  width: 100vw;
  height: 91.5vh;
  margin: 0px !important;
  padding: 0px !important;
  background-color: transparent;
}
/*In-project video*/
.projectEmbedVideo{
  position: relative;
  top: 0vh;
  left: 0vw;
  width: 100vw;
  height: 91.5vh;
  background-color: #000;
  margin: 0px !important;
  padding: 0px !important;
  border-style: none !important;
}
video{
  width:100%;
  height:100%;
}
/*Internal video instructions*/
.videoInstructions{
  position: relative;
  top: -7vh;
  left: 70vw;
  width: 30vw;
  height: auto;
  text-align: center;
  opacity: 0.5;
}
.arrowBtn{
  display: none;
}
/*Horizontal navigation of projects*/
.slider_holder{
	padding: 0px !important;
	margin: 0px !important;
}
ul {
  display: flex-box;
}
ul.slider{
  height:91.5vh;
  overflow:hidden;
  list-style:none;
  white-space:nowrap;
  margin: 0px !important;
  padding: 0px !important;
  position: relative;
  left: 0vw;
  top: 0vw;
}
ul.slider li{
  vertical-align:top;
  display:inline-block;
  width: auto;
  padding: 0px !important;
  margin: 0px !important;
}
.slider li a{
  margin:0px !important;
  padding:0px !important;
}
/*Container for SoMe, covers entire width*/
#SoMeContainer{
	height: auto;
	width: 38vw !important;
	padding: 0vh;
	margin: 3vh 0vw 0vh 0vw;
	text-align: center !important;
}
/*Colored background of icons*/
.SoMeWrapper{
  display: inline-block;
  height: 5vh;
  width: 5vh;
  margin: 0vh 0.5vh;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  -webkit-transition: 0.4s 0.03s;
  transition: 0.4s 0.03s;
}
.SoMeWrapper:hover{
  background-color: #EDC548;
}
/*White icons*/
.SoMeIcons{
  height: 4vh;
  width: auto;
  margin: 0.5vh auto;
  -webkit-transition: 0.4s 0.03s;
  transition: 0.4s 0.03s;
}
.SoMeIcons:hover{
  -webkit-transform: scale(1.1, 1.1) rotateY(360deg);
  transform: scale(1.2, 1.2) rotateZ(360deg);
}

}/*Wrapper end*/