html, body {
	width: 100vw;
	height: 100vh;
/*	overflow: hidden; */
	-webkit-user-select:none;
	-webkit-text-size-adjust:none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/*
html {
	position: fixed;
}
*/

html.mobile {
	font-size: 100% !important;
}

.fixed { position: fixed !important; }
.scroll {
	overflow: auto !important;
	position: initial !important;
}
.hide { display: none !important; }
.glow { animation: glowing 3000ms infinite; }

@keyframes glowing {
	0% { box-shadow: 0 0 -1rem red; }
	40% { box-shadow: 0 0 3rem red; }
	60% { box-shadow: 0 0 3rem red; }
	100% { box-shadow: 0 0 -1rem red; }
}

#container {
	border: 1px solid darkslategray;
	box-shadow: 0 0 2rem darkslategray;
	overflow: hidden;
}

#container.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#microcontainer {
	overflow-y: auto;
	overflow-x: hidden;
}

#modal {
	z-index: 1000;
}

div.modal {
	width: 100%;
	position: absolute;
	background: rgba(0,0,0,.6);
	min-height: 100vh;
}

div.modal div.box {
	width: 80%;
	background-color: white;
	margin: 5rem auto;
	min-height: 70%;
	padding: 6rem 2rem 2rem;
	font-size: 2rem;
	max-width: 90rem;
	position: relative;
}

#closebox {
	border: none !important;
	width: 1rem;
	background: white;
	z-index: 100;
	position: absolute;
	right: 1rem;
	top: 1rem;
	font-size: 2rem;
}

.modalimg { width: 100%; }

div.mthtml {
	clear: both;
	padding: 2rem 5rem;
	font-size: 2.6rem;
	color: gray;
	font-weight: 100;
}

#mtFlash {
	width: 80%;
	background: white;
	z-index: 1000;
	color: black;
	box-shadow: 0 0 5rem gray;
	border: 4px solid gray;
	border-radius: 1.2rem;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3rem;
	padding: 2rem;
}

div.mtmsg {
	padding: 1rem 2rem;
	color: gray;
	font-size: 2.4rem;
	display: inline-block;
	width: 82%;
	margin-left: 10.5rem;
}

div.mtfile {
	width: 26rem;
	height: 8.5rem;
	border-radius: .4rem;
	float: left;
	padding: .5rem 1rem;
	margin: 1rem;
	border: .1rem solid #1eaedb;
	border: .1rem solid #1eaedb;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	background: white;
}

div.mtfile span.icon {
	color: #1eaedb;
	font-size: 2.4rem;
}

div.mtfiledesc {
	font-weight: 100;
	width: 100%;
	font-size: 2.2rem;
	color: #1eaedb;
}

div.mtcontainer {
	width: 100%;
	padding: 1rem 5rem;
	box-sizing: border-box;
}

div.microblock {
	/*
	position: absolute;
	top: 20%;
	left: 0;
	*/

	opacity: 0;
	width: 100%;
	background: white;
	display: none;
	min-height: 100vh;
}

div.microblock.mtactive {
	opacity: 1 !important;
	animation-name: mtshow;
	animation-duration: 1s;
	display: block;
}

div.microblock.fix {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	z-index: 0 !important;
}

div.microblock.hide { display: none !important; }

.microtitle {
	text-align: center;
	font-size: 3.5em;
	padding: 2rem 2rem 1rem;
	text-shadow: .2rem .2rem .5rem lightgrey;
	color: #1eaedb;
}

.microquestion {
	text-align: left;
	font-size: 3.0rem;
	padding: 0 5rem;
	color: #607986;
}

#microteam div.object {
	z-index: 100;
	position: absolute;
}

@keyframes mtshow {
	from { /* margin-top: 10rem; */ opacity: 0; z-index: 2; }
	to { /* margin-top: 0; */ opacity: 1; z-index: 2; }
}

@keyframes mtleft {
	from { margin-left: -10rem; opacity: 0; z-index: 2; }
	to { margin-left: 1rem; opacity: 1; z-index: 2; }
}

.fadeout {
	animation-name: fadeout;
	animation-duration: .6s;
	opacity: 0;
}

.fadein {
	animation-name: fadein;
	animation-duration: .6s;
	opacity: 1;
}

@keyframes fadeout {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}


#mtcontrols {
	z-index: 1000;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

#mtcontrols div[action]{
	background: rgba(0,0,0, .7);
	height: 6rem;
	width: 5rem;
	color: white;
	font-size: 3rem;
	text-align: center;
	line-height: 6rem;
	cursor: pointer;
}

#mtcontrols div[action="prev"]{
	float: left;
	border-radius: 0 5rem 0 0;
	padding-right: 1rem;
}

#mtcontrols div[action="next"]{
	float: right;
	border-radius: 5rem 0 0 0;
	padding-left: 1rem;
}

#mtcontrols div.controls {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
}

#mtcontrols div[control] {
	font-size: 3rem;
	color: white;
	border: .1rem solid #555;
	width: 5rem;
	height: 5rem;
	display: inline-block;
	margin-right: 1rem;
	border-radius: 5rem;
	text-align: center;
	cursor: pointer;
	background: rgba(0,0,0, .7);
}

/*
body.mobile #mtcontrols div[control] {
	font-size: 5rem !important;
	width: 7rem !important;
	height: 7rem !important;
	border-radius: 7rem !important;
	line-height: 6.2rem !important;
}
*/

textarea.mtta {
	 width: 100%;
	 height: 20rem;
	 resize: none;
	 font-weight: 100;
	 font-size: 2.6rem;
	 color: gray;
 }

@keyframes click-wave {
  0% {
	height: 4rem;
	width: 4rem;
	opacity: 0.35;
	position: relative;
  }
  100% {
	height: 20rem;
	width: 20rem;
	margin-left: -8rem;
	margin-top: -8rem;
	opacity: 0;
  }
}

#modal .option-input,
#microteam .option-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	position: relative;
	top: 2.8rem;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4rem;
	width: 4rem;
	transition: all 0.15s ease-out 0s;
	background: #cbd1d8;
	border: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin-right: 1rem;
	outline: none;
	position: relative;
	z-index: 1000;
	cursor: pointer;
}

#modal .option-input:hover, #microteam .option-input:hover { background: #9faab7; }
#modal .option-input:checked, #microteam .option-input:checked { background: #40e0d0; }
#modal .option-input:checked::before,
#microteam .option-input:checked::before {
	height: 4rem;
	width: 4rem;
	position: absolute;
	content: '✔';
	display: inline-block;
	font-size: 2.6rem;
	text-align: center;
	line-height: 4rem;
}

#modal .option-input:checked::after,
#microteam .option-input:checked::after {
	animation: click-wave 0.65s;
	background: #40e0d0;
	content: '';
	display: block;
	position: relative;
	z-index: 100;
}

#modal .option-input.radio, #microteam .option-input.radio { border-radius: 50%; }
#modal .option-input.radio::after, #microteam .option-input.radio::after { border-radius: 50%; }

#modal label,
#microteam label,
#feedback {
  display: block;
  line-height: 4rem;
  font-size: 2.2rem;
  font-weight: 100;
  color: gray;
}

#modal #feedback {
	padding: 3rem;
}

/* Obj custom class */

.objinfo {
	background: rgba(0,0,0,.5);
	display: inline-block;
	padding: 5rem;
	font-size: 2rem;
	color: white;
	border: .4rem solid white;
}

body.mobile .objinfo {
	padding: 1.5rem !important;	
	line-height: 2.6rem !important;
}

#banner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 4rem 9rem;
	border: .2rem solid black;
	background: white;
}

#banner h4 {
	font-size: 6rem;
	font-weight: 100;
	letter-spacing: 1.2rem;
	margin: 0;
}


#banner.final {
	background: black;
	color: black;
	padding: 0;
	width: 100%;
	text-align: center;

	animation-name: stripe;
	animation-duration: 3s;
}

@keyframes stripe {
	0% { background: white; padding: 4rem 9rem; width: 40%; }
	100% { background: black; padding: 0; width: 100%; }
}

#samplelink {
	color: white;
	height: 8rem;
	text-align: center;
	position: fixed;
	top: 50%;
	transform: translateY(-30%);
	font-size: 3rem;
	font-weight: 100;
	width: 100%;
}

#samplelink a {
	color: white;
	text-decoration: none;
}

div.hotspot {
	position: absolute;
	color: white;
	font-size: 2.5rem;
	z-index: 1;
	cursor: pointer;
	transform: translate(-50%,-50%);
}

div.hotspot span {
	background: black;
	border-radius: 2rem;
}

/* THEMES */

#microteam.brown div.mtfile { border: .1rem solid #b33d3d; }
#mtcontrols.brown div[action]{ background: #b33d3d; }
#microteam.brown .microtitle { color: #b33d3d; }
#mtcontrols.brown div[action] { background: #b33d3d; }
#microteam.brown div.mtfile span.icon { color: #b33d3d; }
#microteam.brown div.mtfiledesc { color: #b33d3d; }