/* Table of Contents
-------------------------------------------

- General Content
- Typography
- Pyshc Chart Lines
- Header & Navigation
- Images & Media
- Footer
- Media Queries

-------------------------------------------*/

/*on off switch*/
.col{
  color:grey; opacity: 0.9;
  border:black;
}

.col.selected{
  color:black;
  border:black;
  background: grey;
}
.vertical-center{
    position: relative;
    margin-top: -5%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}


#2 {
    text-decoration: underline;
}
.onoffswitch {
    position: relative; width: 40px; height:10px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    transform: scale(0.7);
}
.onoffswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 14px; padding: 0; line-height: 14px;
    border: 0px solid #FFFFFF; border-radius: 27px;
    background-color: #9E9E9E;
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 27px; margin: -6.5px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 29px;
    border-radius: 27px;
    box-shadow: 0 6px 12px 0px #757575;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #9E9E9E;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #9E9E9E;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 5px;
    background-color:  #3b3939; opacity: 0.9;
    box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
}


/* General Content
-------------------------------------------*/
.box { 
	display: inline-block;
    overflow: hidden;
    text-align: center;
    width: 1.5em;
    height: 1.5em;
    color: #000;
    border: 1px solid #000;
}

.box:hover {
	color: #000;
	border: 1px solid #000;
}

li.project:hover {
	cursor: pointer;
}

textarea.emailForm {
	height: 200px ;
}

/*
#wrapper43 {
	width: 100%;
	display: inline-block;
	position: relative;
}

#wrapper43:after {
	padding-top: 75%;
	display: block;
	content: '';
}

*/

.psychChart {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
}

#svgpsychrochart {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 35%;
 	margin-bottom: 2em;
}

.over {
	opacity: 0.5;
}

/* Psych Chart Line work
-------------------------------------------*/

.hrCurve, .tempCurve, .wbCurve {
	stroke: #c9c9c9;
	fill: none;
	stroke-width: 1px;
	stroke-opacity: 0.8;
}

.rhCurve {
	stroke: #8c8c8c;
	fill: none;
	stroke-width: 1px;
}

#rh100 {
	stroke: black;
	fill: none;
	stroke-width: 2px;
}

.axis path,
.axis line {
    fill:none;
    stroke: black;
}
.axis {
    font-size:1em;
}

.rhLabelShadow {
	fill: none;
	stroke: #fff;
	stroke-width: 5px;
	font-size: 1em;
}

.rhLabels {
	font-size: 1em;
}

.station text {
	font-size: 1em;
}


/* energy save
-------------------------------------------*/
.energySave{
    background-color: orangered;
    color: #fff;
    cursor: pointer;
    border: none;
    padding: 2px;
}
.deleteGraph{
    background-color: orangered;
    color: #fff;
    cursor: pointer;
    border: none;
    padding: 2px;
    visibility: hidden;
}
.energyName{
    border: 0.5px solid;
    font-size: 12px;
    background-color: white;
    width: 25%;
    height: 10px;
}



/* d3 globe
-------------------------------------------*/

path.land {
  fill: #bcbcbc;
  stroke: #FFF;
  stroke-width: 0.5px;
}

path.outline {
  stroke: #bcbcbc;
  fill: none;
  stroke-width: 2px;
}

path.focused {
	fill: #727272;
}

#location {
	fill: #1c9099;
	stroke: white;
	stroke-width: 1px;
}

path.water {
	stroke: none;
	fill: #fff;
}





/* sliders
-------------------------------------------*/

.halo {
	fill: none;
	stroke: #bcbcbc;
	stroke-width: 4px;
	stroke-linecap: round;
	cursor: pointer;
}

.handle {
	fill: #fff;
	stroke: #5b5b5b;
	stroke-width: 1.25px;
	cursor: pointer;
}

.brush .extent {
	fill: #1c9099;
	shape-rendering: crispEdges;

}

.hourAxis, .monthAxis {
    font-size:1em;
}

.nir {
	opacity: 0;
}



/* Dynamic climabox
-------------------------------------------*/

.wnorth{
    display: block;
    border: var(--wn) solid;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    }
.wsouth{
    display: block;
    border: var(--ws) solid;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    }
.weast{
    display: block;
    border: var(--we) solid;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    }
.wwest{
    display: block;
    border: var(--ww) solid;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    }
.square{
    width: 100%;
    height: 100%;
    border: 1px solid #CCC;
}


body { font-family: sans-serif; }

#turnbox {
    position: absolute;
    height: 20%;
    width: 120%;
    left: -20%;
}
.scene {
  position:relative;
  width: 220%;
  height: calc(50px + (max(var(--height),var(--length),var(--width))*1.5));
  border: 1px solid hsla(12, 100%, 50%, 0);
  margin-bottom: calc(var(--height)/3);
  perspective: 800px;
  margin-left: -60%;
  cursor: pointer;
}

.bigbox {
  margin-top: max(var(--height),var(--length),var(--width));
  margin-left: auto;
  margin-right: auto;
  width: var(--length);
  height: calc(var(--height));
  transform-style: preserve-3d;
  transform-origin:center;
  transition: transform 1s;
  cursor: pointer;
  transform: rotateX(-14deg) rotateY(50deg) ;
}

.box__face {
  position: absolute;
  border: 2px solid gray;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;

}


.box__face--front,
.box__face--back {
  width: var(--length);
  height: var(--height);
  line-height: var(--height);


}

.box__face--right,
.box__face--left {
  width: var(--width);
  height: var(--height);
  line-height: var(--height);
}

.box__face--top,
.box__face--bottom {
  width: var(--length);
  height: var(--width);
  line-height: var(--width);
}

.box__face--front  { background: var(--scolor)}
.box__face--right  { background: var(--ecolor) }
.box__face--back   { background: var(--ncolor) }
.box__face--left   { background: var(--wcolor)}
.box__face--top    { background: var(--rcolor) }
.box__face--bottom { background: var(--fcolor) }

.box__face--front  { transform: rotateY(  0deg) translateZ( var(--halfwidth));
                        transform-origin: center;}
.box__face--back   { transform: rotateY(180deg) translateZ( var(--halfwidth));
                        transform-origin: center;}

.box__face--right  { transform: rotateY( 90deg) translateZ(var(--hlratiowhole));
                        transform-origin: center;}
.box__face--left   { transform: rotateY(-90deg) translateZ(var(--hlratio));
                    transform-origin: center;}

.box__face--top    { transform: rotateX( 90deg) translateZ(var(--wlratio));
                        transform-origin: center;}
.box__face--bottom { transform: rotateX(-90deg) translateZ(var(--wlratiowhole));
                    transform-origin: center;}

label { margin-right: 10px; }


.separator {
  margin-top: 10px;
}
.botseparator {
  height:40px;
  position:relative;
}

/*climabox compass
-------------------------------------------*/
.arrow {
  width: 10%;
  height: 10%;
  position: absolute;
  perspective: 500px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.compass {
  margin-top: calc(var(--height) + max(var(--height),var(--length),var(--width)));
  /*top: calc(max(var(--height),var(--length),var(--width))*1.7/2); calc(var(--height));*/
  position: absolute;
  left: calc(-1 * (var(--halflength))) ;
  /*top: var(--wlratiowhole)  calc(2.6*(var(--height)));*/
  transform-origin:center;
  transform: rotateX(106deg) rotateZ(-50deg);
}




/* Typography
-------------------------------------------*/
body {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.3em;
	font-weight: 400;
	color: #000;
}

a {
	text-decoration: none;
	color: #000;
}

.main_nav a {
	color: #000;
	text-decoration: none;
	font-weight: 700;
}

.main_nav a:hover {
	color: #000;
}

b {	
	font-weight: 400;
}

.italic {	font-style: italic; }

.project_text {
	padding-bottom: 2em;
	font-size: 1.25em;
	line-height: 200%;
}

/* Header & Navigation
-------------------------------------------*/
header.main_nav {
	margin-top: 5%;
	display: block;
	margin-bottom: 1em;
}

ul.email { 
	display: block;
	float: right;
	list-style-type: none;
}
 ul.email li {
 	font-size: em;
 	display: inline;
 	padding: .5em;
 }


.back {
	float: left !important;
}



/* Images & Media
-------------------------------------------*/
img { 
	max-width: 100%;
}


video { max-width: 100%;}




/* Footer
-------------------------------------------*/
footer {margin-bottom: 100px;}


/* Media Queries
-------------------------------------------*/

@media (max-width: 600px) {
	.project_text {
		font-size: 1em;
	}

	.title {
		font-size: .8em;
	}

	.project {
	padding-bottom: 1.5em;
	}

	#chart {
		margin-bottom: 1.5em;
	}

	.axis, .rhLabels, .hourAxis, .monthAxis {
		font-size: 0.8em;
	}

	path.land {
  		stroke: none;
	}

	.station text {
	font-size: .8em;
	}

	path.outline {
		stroke-width: 1px;
	}


}