/* CSS Variables */
:root{
	--primary: #ddd;
	--dark: #333;
	--light: #fff;
	--shadow: 0 1px 5px rgba(104,104,104,0.8);
}

html{
	box-sizing: border-box;
	font-family: Arial, Helvetical, sans-serif;
	color: var(--dark);
}
	
body{
	background: #ccc;
	margin:0px;
	line-height: 1.4;

}

#bodychange{
	background:lightgrey;/*url('background.jpg') no-repeat*/
	background-size:100%;
}

/* Wrapper */
.wrapper{
	margin: 0 auto;
	display: none;
	/*background:url('background.jpg') round;
	background-size:100%;
	background-position: center;	
	height:100vh;
	*/
}

/* Top Container */
.top-container{
	display: flex;
	flex-direction: row;
	flex-wrap:nowrap;
	/*grid-gap: ;	
	grid-template-areas: ;
	box-shadow: ;*/
	justify-content:space-between;
	/*align-content:stretch;*/
	align-items:space-between;
	/*margin-left:3px;*/
}

#layer{
	z-index:1;
}

#arrows_container{
	float:left;
	width:200px;
	height:76px;
	/*transform:rotate(180deg);
	visibility:hidden;hidden,visible*/
	display:none;
}

#arrows_container2{
	float:left;
	width:200px;
	height:76px;
	/*transform:rotate(180deg);
	visibility:hidden;hidden,visible*/
	display:none;
}

#sellayer{
	z-index:1;
}

.left{
	display: inline-block;	
	
	min-width:90px;
	height: 95px;
	border: 1px solid #003300;
	background-color:white;
	text-align:center;
	
	font-size:20px;	
	/*color: ;*/
}

.goal{
	min-width:300px;
	min-height: 81px;
	background-color:#dcf3fa;	
	border: 1px solid #003300;
	padding:4px 2px 2px 4px;
	margin:0;
}


.score
{
  /* margin-right:5px;
   margin-left:100px;
	*/
	padding:0px;
}

.money{
	/*font-size:22px;
	width: 200px;*/
	padding-up:0;
}

/* onoff button */

.cmob{
	display:none;
}

.bodies div{
	display:inline-block;
}

.insulation div{
	display:inline-block;
}

.lights div{
	display:inline-block;
}

.hotwater div{
	display:inline-block;
}

.solarpanels div{
	display:inline-block;
}

.temperature div{
	display:inline-block;
}

.actives button{
	width:80px;
	height:40px;
	margin-left:100px;
	margin-top:0px;
	/*transition:2s;*/
}
.option2{
	visibility:hidden;
}
/* main menu */

.cmain{
	/*border:1px salmon solid; */
	/*background:url('image/giphy.gif') 0px 0px/800px 400px no-repeat;
	width:100%;
	height:100%;
	z-index:1;
	margin-top:-30;*/
}

.menu{
	display:grid;
	/*justify-content:center;
	align-items:center;
	/*grid-template-areas:;	
	background:url('earth.png');
	background-repeat: no-repeat;
	background-size: cover;*/
	justify-items:center;
    justify-content:center;
    align-content:center;
	align-items:center;   
	width:100%;
	height:100vh;
}

.backgr{
	
}

.playbtn button{
	/*transition:2s;*/
	width:200px;
	height:50px;
	/*margin-left:200px;
	margin-top:200px;*/
}

.exitbtn button{
	/*transition:2s;*/
	width:200px;
	height:50px;
	/*margin-left:200px;
	margin-top:50px;*/
}

/* Mid Container 'top-box-a	top-box-a  log'*/
.mid-container{
/*	display: grid;
	grid-template-columns: repeat(6,1fr);
	grid-gap: 3px;		
	grid-template-areas:
		'top-box-b showcase';*/
}

/* Showcase */
.showcase{
	grid-area: showcase;
	min-height: 30px;
	min-width: 500px;

	

/*
    padding: ;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;*/
	/*box-shadow: var(--shadow);*/
}


.top-box-a{
	grid-area: top-box-a;
}	


.top-box-b{
	background:lightblue;
	grid-area: top-box-b;
/*	display:grid;
	grid-template-columns: repeat(6,1fr);
	grid-gap:0px;	
	border:2px solid #000000;
*/
	
	padding:10px;
	display:flex;
	flex-direction: raw;
	justify-content: space-evenly;
	align-items: space-evenly;
	opacity:1;
/*	
	box-shadow: var(--shadow);*/

}	

.top-box-c{
	display: grid;
	grid-area: top-box-c;
	min-height:100px;
	max-width: 200px;	
	
	align-items: center;
	justify-items: center;	
	padding: 1.5rem;
	/*box-shadow: var(--shadow);*/
}	

.canvas{
	/*border:1px salmon solid;*/
	/*background:url('katopsi.jpg') 0px 0px/1600px 800px no-repeat;*/
	margin-top:-167.5px;
	
}

.play{
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 15px;
}
.showcase .play button{
	margin-top:20px;
	padding:1.2rem;
	background:white;
	color:black;
	border: 2px solid black;
	transition:0.04s;
}

.showcase .play button:hover{
	background:lightblue;
	color:black;
	border: 2px solid black;
}
/* --------------------------------------------------------------------------- Layers --------------------------------------------------------------------------- */
.floor_plan{
	min-width:20%;
	height:96.5px;
	background:#dcf3fa;
	text-align:center;
	font-size:16px;
	font-weight:bold;
}

.fles{
	display:flex;
	justify-content:space-around;
	align-items:space-around;	
}

.floor_plan button{
	font-size:16px;
	font-weight:bold;
	width:150px;
	height:70px;
}

.floor_plan .sfp{
	font-size:16px;
	font-weight:bold;
}
/*
.stats{
	margin:0px;
	padding:0px;
}
*/
#grou{
	background:url('katopsis/ground floor.png');
	background-size:100%;
	background-position: center;		
	width:150px;
}

#firt{
	background:url('katopsis/1st floor.png');
	background-size:100%;
	background-position: center;
	width:150px;
}

#secd{
	background:url('katopsis/basement.png');
	background-size:100%;
	background-position: center;
	width:150px;
}
/* --------------------------------------------------------------------------- DropDown --------------------------------------------------------------------------- */
.dropdown{
	position: relative;
	display: inline-block;
}

.dropbtn{
	width:170px;
	height:67px;
	background-color: white;
	border: 2px solid #000000;
	margin:0px;
	color: black;
	padding:0px;
	font-family:Matisseitc;
	font-size: 19px;
	font-weight: bold;
	/*border: none;*/
	cursor: pointer;
	
}

.help{

}

.dropdown:hover .help {
	display: block;
}

.dropdown:hover .dropbtn {
  background-color: #ffff94;
  color: black;
  
}

.means{	
	
	display: none;
	min-width: 150px;
	position: absolute;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 1;
	font-size: 14px;
	opacity:0.85;
/*
	margin-top: 70px;*/
	margin-left: 150px;

}

.means button{
	display:inline-block;
	background-color:black;
	color:white;
	min-width:150px;
	font-size:12px;
	margin-top:0px;
}

.sel{
	padding:0px;
	/*width:30vh;	
	margin-left:85vh;
	border-bottom:2px solid #000000;
	margin-left:;*/
	background:lightblue;
	text-align:center;
	
}

.selections{
	/*min-height:10vh;
	min-width:1000px;
	margin-top:;
	margin-left:;
	lightblue;
	
	text-align:center;*/
	
	opacity:1;
	padding:1px;
	
	font-size:30px;
	font-weight:bold;
	color:black;
	/*transform:scale(1);
	visibility:hidden;
	position:static;
	display:inherit;*/
	z-index:-1;
}

.means i{

}

.iliaka{
	display: flex;
	flex-direction:column;
/*
	margin-top: -60px;
	margin-left: 150px;
*/
}
.iliaka input
{
		display:inline-block;
}

.behavior{
	display: none;
	position: absolute;
	background-color: black;
	color:white;
	min-width: 220px;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 1;
	font-size: 13px;
	opacity:0.9;
}

#fos2{
	display:inline-block;
}

#fos{
	display:inline-block;
}

#psiksi2{
	display:inline-block;
}

#psiksi{
	display:inline-block;
}

#nero2{
	display:inline-block;
}

#nero{
	display:inline-block;
}

#tipota2{
	display:inline-block;
}

#tipota{
	display:inline-block;
}

#ola2{
	display:inline-block;
}

#ola{
	display:inline-block;
}

.temperature{
	display: none;
	position: absolute;
	background-color: black;
	color:white;
	min-width: 220px;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 1;
	font-size: 13px;
	opacity:0.9;
/*
	margin-top: -60px;
	margin-left: 150px;
*/
}

/*.temperature{
	display: none;
	position: absolute;
	background-color: black;
	min-width: 150px;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 1;
	font-size: 14px;
	opacity:0.9;
	margin-top: -10px;
/*	margin-left: 150px;

}*/
.temperature input{
	display:inline-block;
}
.selbox{
	background-color:black;
	color:white;
	min-width:195px;
	font-size:12px;
	text-align:left;
}
.selboxheat{
	margin-top:-15px;
	margin-left:203.5px;
	color:white;
}

.selboxres{
	margin-top:-15px;
	margin-left:165px;
	color:white;
}

.selboxlight{
	margin-top:-15px;
	margin-left:165px;
	color:white;
}

.selboxins{
	margin-top:-15px;
	margin-left:155px;
	color:white;
}

.dropdown:hover .temperature {
	
}

.option {
	color: black;
	/*padding: 12px 16px;*/
	padding: 10% 0%;
	text-decoration: none;
	font-size:60%;
	display: block;
}
/*
.option:hover {
	background-color: lightblue;
	color:black;
}
*/
.insulation{
	display: none;
	position: absolute;
	background-color: black;
	color:white;
	min-width: 180px;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 1;
	font-size: 14px;
	opacity:0.9;
/*
	margin-top: -60px;
	margin-left: 150px;
*/
}

.insulation input{
	display:inline-block;
}
/*
.insulation i{
	margin-left:10px;
	color:white;	
}


.insulation .f{
	margin-left:15px;
}*/


.dropdown:hover .insulation {

}


.bodies{
	display: none;
	position: absolute;
	background-color: black;
	color:white;
	min-width: 240px;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 1;
	font-size: 14px;
	opacity:0.9;
/*
	margin-top: -60px;
	margin-left: 150px;
*/
}

.bodies input{
	display:inline-block;
}
/*
.bodies i{
	margin-left:32px;
	color:white;	
}
*/
.dropdown:hover .bodies {

}


.lights{
	display: none;
	position: absolute;
	background-color: black;
	color:white;
	min-width:185px;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 1;
	font-size: 14px;
	opacity:0.9;
/*
	margin-top: -60px;
	margin-left: 150px;
*/
}

.lights input{
	display:inline-block;
}
/*
.lights i{
	margin-left:30px;
	color:white;	
}

.lights .l{
	margin-left:80px;
}
*/
.dropdown:hover .lights {

}

.hotwater{
	display: none;
	position: absolute;
	background-color: black;
	color:white;
	width: 200px;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 1;
	font-size: 14px;
	opacity:0.9;
/*
	margin-top: -60px;
	margin-left: 150px;
*/
}

.hotwater input{
	display:inline-block;
}
/*
.hotwater i{
	margin-left:13px;
	color:white;	
}


.hotwater .d{
	margin-left:50px;
}
*/

.dropdown:hover .hotwater {

}

.solarpanels{
	display: none;
	position: absolute;
	background-color: black;
	color:white;
	min-width: 185px;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 1;
	font-size: 12px;
	opacity:0.9;
/*
	margin-top: -60px;
	margin-left: 150px;
*/
}

.solarpanels input{
	display:inline-block;
}
/*
.solarpanels i{
	margin-left:24px;
	color:white;	
}
*/
.dropdown:hover .solarpanels {
  
}

.languages{
	display: none;
	position: absolute;
	background-color: black;
	color:white;
	min-width: 150px;
	box-shadow: 0% 8% 20% 0% rgba(0,0,0,0.2);
	padding: 10px 0px;
	z-index: 3;
	font-size: 14px;
	opacity:0.9;
	margin-top: 0px;
	margin-left: 0px;
}

.languages button{
	width:100px;
	height: 60px;
	font-size: 14px;
	z-index:3;
}

.tran{
	margin-top: 40px;
	z-index:3;
	/*margin-left: 1500;*/
}

/* --------------------------------------------------------------------------- Media --------------------------------------------------------------------------- */
@media screen and (max-width: 1250px)
{	
	
	.left
	{
		min-width:65px;
		/*height: ;*/
		font-size:17px;	
	}
	
	#grou
	{
		width:100px;
	}

	#firt
	{
		width:100px;
	}

	#secd
	{
		width:100px;
	}

	.dropbtn
	{
		width:140px;
		height:60px;
		font-size: 15px;		
	}
	
	.selections
	{
		font-size:24px;
	}
}

@media screen and (max-width: 1150px)
{
	.dropbtn
	{
		min-width:110px;
		min-height:50px;
		font-size: 14px;		
	}
	
	.selections
	{
		font-size:19px;
	}
}
@media screen and (max-width: 599px){

	.mid-container{
		grid-template-areas: 		
		'top-box-b  top-box-c '
		'showcase   showcase  ';
	}
	
	.cmob{
		display:block;
	}

	.top-box-c{
		min-height:100px;
		max-width: 245px;
		padding:20px;
	}
	
	.showcase{
		min-height:300px;
		max-width: 350px;	
		margin: 10px 100px;
	}
	
	.top-box-b{
		min-height:200px;
		/*max-width: ;*/	
		grid-template-columns: 100px 100px;
		margin-left:50px;
		justify-content: normal;
	}
	
	.d2{
		margin-left:50px;
	}

	.d4{
		margin-left:50px;
	}
	
	.d6{
		margin-left:50px;
	}
	
	.lights {
	    margin-left:50;
    }

    .insulation {
	    margin-left:50;
    }
	
    .canvas
    {
		background:url('katopsis/1st floor.png') 0px 0px/650px 300px no-repeat;
    	width:650px;
    	height:300px
    }

	.score
	{
		margin-left:39px;
		margin-right:2px;
	}   
	
	.cmain{
		display:none;
	}
	
}