/*@font-face {
	font-family: "Gill Sans MT";
	src:  url("gill-sans-mt.ttf")  ;
}
*/
@font-face {
    font-family: 'Gill Sans MT';
    src: url('../fonts/gillsansregular.eot');
    src: url('../fonts/gillsansregular.eot?#iefix') format('eot'),
         url('../fonts/gillsansregular.eot') format('embedded-opentype'),         
         url('../fonts/gillsansregular.woff') format('woff'),
         url('../fonts/gillsansregular.ttf') format('truetype'),
         url('../fonts/gillsansregular.svg#GillSansMTRegular') format('svg');
         
    font-weight: normal;
    font-style: normal;
}


	/*src: url("gill-sans-mt.ttf") format("truetype"), url("GillSansStd.otf")  ;*/
* {
	margin-block-start: 0px;
	margin-block-end: 0px;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	margin: 0px;
	box-sizing: border-box;
	background: transparent;
	font-family: "Gill Sans MT", Arial, Helvetica, sans-serif;
}

*[data-hidden] {
	display: none !important;
}

[data-behind] {
	z-index: -1;
}

#cache {
	display: none;
}

.modal, .modal * {
	filter: none; 
}

body { overflow: hidden; }


@media screen {

	main, main  > section, #veil {
		width: 1234px;
		height: 924px;
	}

	main {
		position: relative;
	}

	main > section {
		position: absolute;
		top: 0px;
		left: 0px;
	}


}

main[data-modal-active] .modal * {
	filter: none;
}



/*[data-modal-active] :not(.modal){
	filter: brightness(0.8);
}*/

[data-modal-active] #tank,[data-modal-active] #stage-section, [data-modal-active] #graph-section, [data-modal-active] #parametrizationArea, [data-modal-active] img[src*="tank-scale"] {
	/*filter: brightness(0.6);*/
	/*filter: brightness(0.4);*/
}



section#chief-slide {
    width: 1234px;
    height: 924px;
    position: relative;
}

section#chief-slide > * {
    position: absolute;
    top: 0px;
    left: 0px;
}

button {
	font-family: Arial, sans-serif;
	background: linear-gradient(0deg, rgb(169,165,168), rgb(201,204,207));
}

button, input[type="checkbox"], input[type="range"], label {
	cursor: pointer;
}



#parametrizationArea button:hover, button:hover {
	border-color: dodgerblue;
}

button[data-emphasized="true"] {
	outline: 2px solid purple;
}

button:disabled:focus {
	outline: none;
}

[data-mega-button] {
	outline: 1px solid blue;
	-moz-outline-radius: 3px;
	border-radius: 3px;
	padding: 3px;
}

#welcome-card {
	/*font-family: "Gill Sans MT";*/
	color: white;
	background-color: rgb(121,131,136);
	text-align: center;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-around;
	align-items: center;
	overflow: hidden;
}

#welcome-card > *[data-move-right] {
	animation: moveRight 1s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

#welcome-card #start {
	width: 270px;
	height: 62px;
	/*background: linear-gradient(0deg, rgb(169,165,168), rgb(201,204,207));*/
	background: linear-gradient(to bottom, rgb(216, 218, 220) 0%, rgb(170, 175, 178) 62%, rgb(156, 162, 165) 100%);
	border-radius: 7px;
	font-size: 18px; /* aa? */
}

#tutorial {
	border: 3px solid black;
	background-color: white;
	/*width: 477px;
	height:  251px;*/
	/*width: 761px;*/
	width: 721px;
	height: 396px;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-between;
	color: rgb(1,52,103);
	position: absolute;
	font-size: 26px;
	padding: 10px;
}

#tutorial button {
	padding: 5px 10px;
	font-size: 17px; /*AA?*/
	background: linear-gradient(to top, rgb(209, 209, 209) 0%, rgb(253, 253, 253) 100%);
	border: 2px solid dimgray;
	border-radius: 7px;
}

#tutorial [data-mega-button] {
	display: inline-block;
	height: 46px;
}

#tutorial [data-mega-button][data-blink] {
	/* blinking is against acessibility */
	/*animation: 0.8s blink infinite;*/
	animation-fill-mode: forwards;
	width: calc(91px + 6px);
}

#tutorial [data-blink] button {
	width: 91px;
	height: 32px;
}

#tutorial [data-mega-button]:not([data-blink]) button {
	width: 151px;
	height: 32px;
}

#tutorial[data-page="0"], #tutorial[data-page="6"],#tutorial[data-page="7"],#tutorial[data-page="8"] {
    top:265px;
    left: 314px;
}

#tutorial[data-page="1"],#tutorial[data-page="2"], #tutorial[data-page="3"], #tutorial[data-page="4"], #tutorial[data-page="5"] {
	left: 480px;
}

#tutorial[data-page="1"] {
	/*top: 105px; */
	animation: 0.7s tut-0-to-1;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

#tutorial[data-page="2"] {
	/*top: 513px; */
	animation: 0.7s linear tut-1-to-2 forwards;
}

#tutorial[data-page="3"] {
	animation: 0.7s linear tut-2-to-3 forwards;
}

#tutorial[data-page="6"] {
	animation: 0.7s linear tut-5-to-6 forwards;
}

#tutorial[data-page="3"], #tutorial[data-page="4"], #tutorial[data-page="5"] {
	top: 91px; 
}

#tutorial[data-page="8"] p:not([data-hidden]) {
    position: absolute;
    top: 120px;
    left: 300px;
}

@keyframes tut-0-to-1 {
	from {
		top:265px;
    	left: 314px;		
	}
	to {
		top: 105px; 
		left: 480px;

	}
}

@keyframes tut-1-to-2 {
	from {
		top: 105px; 
		left: 480px;
	}
	to {
		top: 513px; 
		left: 480px;
	}
}

@keyframes tut-2-to-3 {
	from {
		top: 513px; 
		left: 480px;
	}	
	to {
		left: 480px;
		top: 91px;
	}
}

@keyframes tut-5-to-6 {
	from {
		left: 480px;
		top: 91px;
	}
	to {
		top:265px;
    	left: 314px;
	}
}




#tutorial h3 {
	text-align: center;
	color: black;
	font-size: 48px;
    font-weight: normal;
}

#tutorial .button-holder {
	align-self: flex-end;
}

main[data-slide="tutorial-1"] #tank, main[data-slide="tutorial-1"] img[src*="tank-scale"] {
	filter: none;
}

main[data-slide="tutorial-2"] #graph-section {
	filter: none;
}

main[data-slide="tutorial-3"] #parametrizationArea,main[data-slide="tutorial-4"] #parametrizationArea,main[data-slide="tutorial-5"] #parametrizationArea {
	filter: none;
}

main .modal {
	position: absolute;
	top:0px;
	left:0px;
}
/*
main #tutorial {
	position: absolute;
	top: 20px;
	left: 20px;

}*/

#tank {
	border: 1px solid black;
}

section#chief-slide > #tank_scale_cnt {
    position: absolute;
    top: 536px;
    left: 340px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
}

section#chief-slide > #tank_scale_cnt > img {
    position: relative;
    top: -3px;
    vertical-align: middle;
    width: 50px;
}

#fish_water_overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 537px;
    height: 570px;
    background-color: rgba(51, 153, 255, 0.2);
}

#tut-or-sce {
	display: flex;
	flex-flow:column nowrap;
	justify-content: space-between;

    width: 512px;
    height: 400px;
    position: absolute;
    top:296px;
    left: 392px;
}

#tut-or-sce button {
	width: 510px;
	height: 125px;
	/*background: ms-linear-gradient(0deg, rgba(169,165,168, 0.4), rgb(201,204,207, 0.4));*/
	background: linear-gradient(0deg, rgba(169,165,168, 0.7), rgba(221,224,227, 0.7));
	font-size: 19px;
}



/*main #tut-or-sce {
	position: absolute;
	top: 230px;
	left: 230px;
}*/

h1 {
	/*font-family: "Gill Sans MT";*/
	font-weight: normal;
	font-size : 72px;
    width: 700px;
}

cite {
	display: block;
	font-size: 22px;
	white-space: nowrap;
}



.stage-card {
	display: inline-block;
	background-color: rgb(51,153,255);
	color: white;
}

#chief-slide #graph-section {
	display: inline-block;
	width: 688px;
	/*height: 486px;*/
	height: 482px;
	left: 537px;
}

.veil {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: rgba(100,100,100,0.5);
}

.veil[data-for="tank"] {
	width:537px;
	height:570px;
}

.veil[data-for="graph-section"] {
	width:688px;
	height:486px;
	/*top:0px;
	left: 537px;*/
}

.veil[data-for="parametrizationArea"] {
	width: 686px;
    height: 430px;
    /*top: 482px;
    left: 537px;*/
}

.veil[data-for="stage-section"] {
	width: 540px;
    height: 350px;
}

#stage-section, #parametrizationArea {
	display: inline-block;
}

#chief-slide #stage-section {
	width: 540px;
	height: 350px;
	top: 570px;
	font-size: 22px;
	display: flex;
}



#chief-slide #parametrizationArea {
	width: 686px;
	height: 430px;
	/*top: 486px;*/
	top: 482px;
	left: 537px;
	padding: 5px;
}

#parametrizationArea[data-stage] .sliderGroupArea, #parametrizationArea[data-stage="4"] .sliderGroupArea > div {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: space-around;
	/*height: 384px;*/
	height: 346px;
	font-family: "Gill Sans MT";
}

#parametrizationArea[data-stage="4"] .sliderGroupArea {
	flex-flow:row nowrap;
}

#parametrizationArea button {
	/*background: linear-gradient(0deg, rgb(169,165,168) 0%, rgb(201,204,207));*/
	background: rgb(235, 235, 235);
	border:2px solid darkgray;	
	
	width: 155px;
	height: 35px;
	border-radius: 7px;
	font-size: 17px;
}



.topButtonArea, .bottomButtonArea {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
}

.sliderParameter h4 {
	text-align: center;
	font-weight: normal;
}

.sliderParameter {
	display: inline-block;
	background-color: rgb(178,209,240);
	padding: 4px 0px;
	border-radius: 3px;
	/*color: rgb(65,76,120); not AAA*/
	color: #323958;
}

.sliderParameter:not([data-disease]):not([data-pollution]) {
	width: 225px;
	height: 70px;
}

#parametrizationArea[data-stage="2"] .sliderGroupArea > .sliderParameter {
	width: 257px;
}

#parametrizationArea[data-stage="4"] .sliderParameter {
	width: 218px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-index="7"] > div, #parametrizationArea[data-stage="4"] .sliderParameter[data-index="8"] > div {
	position:relative;
	width: 200px;
	height: 35px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-index="7"] > div > *, #parametrizationArea[data-stage="4"] .sliderParameter[data-index="8"] > div > *{
	position:absolute;
	top: 0px;
	left: 0px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-index="7"] > div input {
	left: 40px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-index="7"] > div span:last-child {
	left: 170px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-index="8"] > div input {
	left:40px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-index="8"] > div span:last-child {
	left:140px;
	top: 14px;
}

/* .sliderParameter alignment */
.sliderParameter:not([data-dp-parent])  > div * {
    display: inline-block;
    vertical-align: top;
}

.sliderParameter:not([data-dp-parent])  > div {
	text-align: center;

}




.sliderParameter[data-season] {
	/*color: white;*/
	color: #0D0D0D;
}

.sliderParameter[data-season="summer"] {
	background-color: rgb(255,104,104); /*not AAA*/
	/*background-color: #EB0000*/
}

.sliderParameter[data-season="fall"] {
	background-color: rgb(255,147,76);
}

.sliderParameter[data-season="winter"] {
	background-color: rgb(130,211,255);
}

.sliderParameter[data-season="spring"] {
	background-color: rgb(140,253,137);
}

[data-dp-parent] {
	background: transparent;
	display: flex;
	justify-content: space-between;
}

[data-disease], [data-pollution] {
	text-align: center;
	padding: 4px 10px;
}

.led {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #222222;
	background-color: #DDDDDD;
}

[data-disease] .led[data-state="on"] {
	background-color: rgb(213,123,136);
}

[data-pollution] .led[data-state="on"] {
	background-color: rgb(213,226,136);
}


table {
	display: none;
}

/* inter-section border */

#graph-section, #parametrizationArea {
	border-left: 6px solid black;
}

#graph-section {
	border-bottom: 6px solid black;
}

#stage-section  {
	border-top: 6px solid black;
}

input[type="range"] {
	max-width: 128px;
}

#randomPopOut {
	width: 722px;
	height: 483px;
	border:3px solid rgb(126,111,108);
	border-radius: 13px;
	padding: 60px 70px;
	background-color: rgba(230,209,189, 0.6);
	position: absolute;
	top:184px;
	left: 268px;
}

#randomPopOut h5 {
    font-size: 36px;
    font-weight: normal;
}

#randomPopOut button {
    position: absolute;
    top: 380px;
    /*left: 250px;*/
    left: 267px;
    width: 188px;
    height: 52px;


}

#parametrizationArea[data-stage="4"] .sliderParameter[data-step="2"]:first-child h4 + div span:last-child {
    left: 150px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-step="2"]:not([data-dp-parent]) h4 + div {
	position: relative;
    width: 218px;
    height: 50px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-step="2"]:not([data-dp-parent]) h4 + div span:first-child {
	position: absolute;
    left: 4px;
    top: -6px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-step="2"]:not([data-dp-parent]) h4 + div input {
	top: 12px;
    position: absolute;
    left: 35px;
}

#parametrizationArea[data-stage="4"] .sliderParameter[data-step="2"]:not([data-dp-parent]) h4 + div span:last-child {
	position: absolute;
    left: 146px;
    top: -6px;

}

[data-focus="true"], [data-focus="true"]:focus {
	outline: 2px solid red;
}

#dummy[data-focus="true"] {
	outline: none;
}

img[src*="cursor"] {
	position: absolute;
	top: 811px;
	left: 815px;
	display: none;
}

img[src*="cursor"][data-anim] {
	display: inline-block;
	animation: 2s pseudo-cursor-anim forwards;
}

@keyframes pseudo-cursor-anim {
	0% {
		position: absolute;
		top: 811px;
		left: 1225px;
	}
	50% {
		position: absolute;
		top: 811px;
		left: 815px;
	}
	100% {
		position: absolute;
		top: 811px;
		left: 939px;	
	}


}

*:not([data-focus]):focus {
	outline: none;
}

@keyframes blink {
	to {
		outline: none;
	}
}

@keyframes moveRight {
	to {
		margin-left: 1400px;
	}
}