/* CSS Document */

body{
	margin:0;
	padding:0;	
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

#wrapper{
	position:absolute;
	width:960px;
	left:50%;
	margin-left:-500px;
	border:0px solid red;	
}

#house_1{
	position:relative;
	width:680px;
	left:50%;
	margin-left:-340px;	
	border:0px solid green;
}

.house{
	position:absolute;
	width: 100%;	
}

.flag{
	position:absolute;
	width:8%;	
}

#flag_1{
	left:42.5%;
	top:50.5%;	
}
#flag_2{
	left:42%;
	top:38%;	
}
#flag_3{
	left:19%;
	top:77%;	
}
#flag_4{
	left:56%;
	top:60%;	
}
#flag_5{
	left:60%;
	top:68%;	
}
#flag_6{
	left:19%;
	top:53%;	
}

.info{
	position:absolute;
	width:16%;	
}
#info_1{
	left:35.7%;
	top:32%;	
}
#info_2{
	left:35.3%;
	top:19.5%;	
}
#info_3{
	left:12%;
	top:60%;	
}
#info_4{
	left:55.1%;
	top:41%;	
}
#info_5{
	left:68.1%;
	top:51%;	
}
#info_6{
	left:12.6%;
	top:36%;	
}

.info_text{
	position:absolute;
	top:22%;
	left:10%;
	width:80%;
	font-size:15px;
	text-align:center;
	cursor:pointer;
}
@media all and (max-width:770px){
	.info_text{
		font-size:12px;
	}
}
@media all and (max-width:720px){
	.info_text{
		font-size:12px;
	}
}
@media all and (max-width:618px){
	.info_text{
		top:15%;
		line-height:100%;
	}
}
@media all and (max-width:560px){
	.info_text{
		top:22%;
		font-size:8px;
	}
}
@media all and (max-width:480px){
	.info_text{
		top:15%;
	}
}

.popup{
	width: 400px;
	height: 500px;
	position:absolute;
	border:1px solid rgb(153,153,153);	
	background: rgba(255,255,255,0.95);
	padding:20px;
	padding-top:35px;
	left:50%;
	margin-left:-200px;
	top:100px;
	z-index:200;
	cursor:pointer;
}

.popup .close{
	position:absolute;
	right:0px;
	top:0px;
	width:40px;	
}

.popup .content{
	overflow-y:scroll;
	overflow-x:hidden;	
	border:0px solid red;
	height:90%;
}

.popup_header{
	padding:5px;
	margin-bottom:10px;
	/*font-weight:400;*/
	font-size:18px;
	font-weight:bold;	
}

.popup_heading{
	font-weight:bold;	
}

.popup_table{
	border-collapse:collapse;
}

.popup_table .row{
	border:3px solid white;	
}

.popup_table .right_element{
	padding-left:4px;	
	border-left:2px solid white;
}
.popup_table .left_element{
	padding-left:4px;	
}

.popup_link{
	color:#06F;
	font-weight:bold;
}

/* companies */
#companies{
	margin-top:20px;
	position:relative;
	margin-left:5%;
	width:90%;
}

.company_container{
	width:26%;
	margin:3%;
	float:left;
	margin-bottom:10px;
	border:0px solid grey;
	min-height:120px;
}

.company_container .logo{
	width:100%;	
}

@media all and (max-width:960px){
	#wrapper{
		width:100%;
		left:0%;
		margin-left:0px;	
	}
	
	#house_1{
		position:relative;
		width:80%;
		left:10%;
		margin-left:0px;	
	}
	
	.popup{
		top:15%;
		width: calc(100% - 20px);
		left:0px;
		margin-left:3%;
		height:60%;	
		padding-left:5px;
		padding-right:5px;
	}
	
	
	.popup_table .right_element{
		padding-left:2px;	
	}
	.popup_table .left_element{
		padding-left:2px;	
	}
	
	.popup .close{
		width:40px;
	}
	
	#companies{
		width:640px;
		left:50%;
		margin-left:-300px;	
	}
	
	.company_container{
		width:120px;
		margin:8px;
		margin-bottom:30px;
		min-height:60px;
	}
	
}

@media all and (max-width:640px){
	#companies{
		width:320px;
		left:50%;
		margin-left:-140px;	
	}	
	
	.popup{
		font-size:14px;
		height:60vh;
	}
	
	.popup_header{
		font-size:16px;
	}
}

@media all and (max-width:480px){
	
	.popup_table{
		font-size:12px;	
	}
	
	.popup_header{
		font-size:14px;
	}	
}

a, a:hover{
	text-decoration:none;
	color:rgb(51,153,255);	
}

a, a img{
border:none;
}

.hidden{
	display:none;	
}
.pointer{
	cursor:pointer;
}

#ext_link_house{
	position:absolute;
	bottom:0px;
	left:10%;
	width:80%;
	height:4%;
	border:0px solid red;
}

.transparent{
	background:url(../media/transparent.png) repeat;	
}