/*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
///// \\/////// \\\/////// \\\/////// \\\/////// \\\\\\\//////// \\/// \\/// \//////// \\///////// \//////// \\
\/// \\/// \\\\\\\/// \\/// \/// \\/// \/// \\/// \\\\\\/// \\/// \/// \\/// \/// \\/// \/// \\\\\\\/// \\/// \
\/// \\\/////// \\///////// \///////// \/// \\\\\\\\\\\\//////// \\/// \\/// \/// \\/// \/////// \\\//////// \\
\/// \\\\\\\\/// \/// \\/// \/// \\/// \/// \\/// \\\\\\/// \\/// \/// \\/// \/// \\/// \/// \\\\\\\/// \\/// \
///// \\/////// \\/// \\/// \/// \\/// \\/////// \\\\\\\/// \\/// \\/////// \\//////// \\///////// \/// \\/// \
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

html {font-size: 8px; -webkit-font-smoothing: antialiased;}
body {margin:0; padding:0; background-color: #000000; }

::-moz-selection {color: #000000; background: #f15a24; text-shadow: none;}
	   ::selection {color: #000000; background: #f15a24; text-shadow: none;}

hr {width: 6rem; height: 6rem; margin: 9rem 0 7rem; float:left; border:0; background: #f15a24;}

.clear {clear:both;}

img {-webkit-transition: all .07s ease;
		  -moz-transition: all .07s ease;
			 -o-transition: all .07s ease;
				 transition: all .07s ease;
		margin: 0; padding: 0;}
.scale {width: 100%; height: auto;}
.scale2 {width: 93%; height: auto; margin: 0 0 1.5rem 5%;}
.scale3 {width: 100%; height: auto; margin: 0 0 1.5rem;} /*see media query*/
.scale4 {width: 75%; height: auto; margin: 0 0 1.5rem;} /*see media query*/

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-container2 { position: relative; padding-bottom: 28.125%; height: 0; overflow: hidden; max-width: 100%; } .embed-container2 iframe, .embed-container2 object, .embed-container2 embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-container3 { position: relative; padding-bottom: 160%; height: 0; overflow: hidden; max-width: 100%; } .embed-container3 iframe, .embed-container3 object, .embed-container3 embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-container4 { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; max-width: 100%; } .embed-container4 iframe, .embed-container4 object, .embed-container4 embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-container5 { position: relative; padding-bottom: 177.778% !important; height: 0; overflow: hidden; max-width: 100%; } .embed-container5 iframe, .embed-container5 object, .embed-container5 embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-containersq { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; } .embed-containersq iframe, .embed-containersq object, .embed-containersq embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.embed-container6 { position: relative; padding-bottom: 42.1875%; height: 0; overflow: hidden; max-width: 100%; } .embed-container6 iframe, .embed-container6 object, .embed-container6 embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/*
 Typography
 */

h1, h2, h3, p {color: #f15a24; margin:0; padding:0; text-decoration: none; font-weight: normal; cursor: default; font-family: 'NeueHaasUnicaPro-Regular', sans-serif;}
h1 {font-size: 2.4rem; line-height: 1.25;}
h2 {font-size: 2.2rem; line-height: 2.6rem;}
h3 {font-size: 1.8rem; line-height: 2.2rem;}
p  {font-size: 1.65rem; line-height: 1.95rem;}

a { outline: 0 !important; 
-webkit-transition: all .03s ease;
	-moz-transition: all .03s ease;
	  -o-transition: all .03s ease;
		  transition: all .03s ease;}
a, a:visited {color: #f15a24; line-height: inherit; cursor: pointer !important; }
a:hover {color: #ffffff; cursor: pointer !important;}

h2 a {border-bottom: 0px !important; cursor: pointer !important; text-decoration:none; }
h3 a {text-decoration: underline; text-decoration-thickness: 0.08rem; text-underline-offset: 0.25rem;}
p .underline {text-underline-offset: 0.15rem;}

.underline {text-decoration: underline; text-decoration-thickness: 0.08rem; text-underline-offset: 0.25rem;}

.projectinfo {opacity: 0.33; text-decoration: none;}

.indent {margin-left: 1.2rem;}


@media screen and (min-width: 650px){
	html{font-size: 9px;}
}
@media screen and (min-width: 750px){
  html{font-size: 10px;}
}
@media screen and (min-width: 950px){
  html{font-size: 10px;}
}
@media screen and (min-width: 1280px){
  html{font-size: 11px;}
}
@media screen and (min-width: 1500px){
  html{font-size: 12px;}
}



/*
 Layout
 */

#container {width: 93%; margin: 10.5rem 3.5%; max-width: 2160px;}

.mobile {display:block !important;}
.desktop {display:none !important;}

#header {position: fixed; z-index: 5; top: 3rem; left: 3.5%;}
#name, #studionest {float: left; cursor: pointer;}
#name a, #studionest a {text-decoration: none;}
#studio {position: fixed; z-index: 5; top: 3rem; left: 58.333%; cursor: pointer; display: none;}

.aboutInd {margin-left: 16.666%;}

.descrip {margin-bottom: 4.5rem;}

.last {margin-bottom: 9rem;}


.strikeout {position: relative;}
.strikeout::after {
  border-bottom: 0.2rem solid #000000;
  content: "";
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 50%;}

.column, .columns {display: inline-block; float: left; margin: 0; padding: 0 0 1.5rem;}

.column,							/*.column will be what to use for full width*/
.one.columns,
.two.columns,
.three.columns,
.four.columns,
.five.columns,
.six.columns,
.seven.columns,
.eight.columns,
.nine.columns,
.ten.columns,
.eleven.columns,
.twelve.columns {width: 100%;}

.offsetbyone,
.offsetbytwo,
.offsetbythree,
.offsetbyfour,
.offsetbyfive,
.offsetbysix,
.offsetbyseven,
.offsetbyeight,
.offsetbynine,
.offsetbyten,
.offsetbyeleven	{margin-left: 0;}


@media only screen and (min-width: 767px) {

/*	#container {width: 89.5% !important;}
*/
	.mobile {display:none !important;}
	.desktop {display:block !important;}

	.columns		{display: inline-block; float: left; margin: 0; padding: 0 0rem 1.5rem;}

	.one.columns	{width: 8.333%}
	.two.columns	{width: 16.666%}
	.three.columns	{width: 25%}
	.four.columns	{width: 33.333%}
	.five.columns	{width: 41.666%}
	.six.columns	{width: 50%}
	.seven.columns	{width: 58.333%}
	.eight.columns	{width: 66.666%}
	.nine.columns	{width: 75%}
	.ten.columns	{width: 83.333%}
	.eleven.columns	{width: 91.666%}
	.twelve.columns	{width: 100%}

	.twofive.columns {width: 20.833%;}


	.offsetbyone	{margin-left: 8.333%;}
	.offsetbytwo	{margin-left: 16.666%;}
	.offsetbythree	{margin-left: 25%;}
	.offsetbyfour	{margin-left: 33.333%;}
	.offsetbyfive	{margin-left: 41.666%;}
	.offsetbysix	{margin-left: 50%;}
	.offsetbyseven	{margin-left: 58.333%;}
	.offsetbyeight	{margin-left: 66.666%;}
	.offsetbynine	{margin-left: 75%;}
	.offsetbyten	{margin-left: 83.333%;}
	.offsetbyeleven	{margin-left: 91.666%;}

	.offsetbytwofive {margin-left: 29.166%;}

	.scale3, .scale4 {width: 93%; height: auto; margin: 0 3.5% 1.5rem;}

	p  {font-size: 1.3rem; line-height: 1.6rem;}

	#studio {position: fixed; z-index: 5; top: 3rem; left: 66.666%; cursor: pointer;}
}

@media (orientation: landscape) {
	.landscapemode {display: inline-block !important;}
	.portraitmode {display: none !important;}
}
@media (orientation: portrait) {
	.landscapemode {display: none !important;}
	.portraitmode {display: inline-block !important;}
}


/* 
 Panel 
 */

.panel {
	position: fixed; z-index: 10; top: 0; right: 0; bottom: 0;
	overflow: scroll;
	margin: 0;
	padding: 10.5rem 1.5% 0 3.5%;
	background-color: #f15a24;
	display: none;
	width: 86%;
	height: 100vh;
}

.panel h2 {color: #000000 !important;}
.panel h2 a, .panel h2 a:visited {color: #000000; text-decoration: underline; text-decoration-thickness: 0.08rem; text-underline-offset: 0.25rem;}
.panel h2 a:hover {color: #ffffff;}
.panel hr {background: #000000;}

#nav-icon {
	display: block;
	position: fixed; z-index: 12;
	top: 3rem; right: 3.5%;
	cursor: pointer;}

#nav-icon a:after {content: "About";}
#nav-icon.open a:after {content: "Close";}

#nav-icon a, #nav-icon a:visited {color: #f15a24;}
#nav-icon a:hover, #nav-icon a:focus {color: #ffffff;}

#nav-icon.open a, #nav-icon.open a:visited {color: #000000;}
#nav-icon.open a:hover, #nav-icon.open a:focus {color: #ffffff;}

@media screen and (min-width: 767px){
	.panel {width: 55%;}
}