@charset "utf-8";

* {
	box-sizing: border-box;
}

/* pictures */
/*
img {
	width: auto;
	height: auto;
	vertical-align: middle;
	max-width: 100%;
}
*/

/* -------- CONTAINERS -------------- */
#maincontainer {
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	border: 2px;
	border-color: #ADADAD;
	border-width: 2px;
	border-style: solid;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	overflow: auto;
	background-color: #FFFFFF;
	background-color: #282828;
	border-radius: 7px;
}

@media only screen and (max-width:1920px){#maincontainer{width: 90%;}}
@media only screen and (max-width:1800px){#maincontainer{width: 90%;}}
@media only screen and (max-width:1600px){#maincontainer{width: 95%;}}
@media only screen and (max-width:1200px){#maincontainer{width: 95%;}}
@media only screen and (max-width:993px){#maincontainer{width: 100%;}}
@media only screen and (max-width:768px){#maincontainer{width: 100%;}}
@media only screen and (max-width:600px){#maincontainer{width: 100%;}}


#header {
	/* font-size: 24px; */
	background-color: #797979;
	height: 100px;
	display: block;
	display: flex;
	/*	
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 15px;
	padding-bottom: 15px;
*/	
}

#__headerlogo {
	/*background-repeat: repeat;*/
	/* background-clip: border-box; */
	/* background-position: 200px bottom; */
	/* background-attachment: fixed; */
	/* background-origin: border-box; */
	/*overflow: visible;*/
	/*height: 15%;*/
	/*height: 130px;*/
	/*width: 75%;*/
	/* background-size: auto; */
	/*overflow: hidden;*/
	/*display: inline-block;*/
/*	
	border-radius: 1px;
	border: 2px dotted #BF1E21;
*/	

	height: 100%;
	background-image: url(../res/top_image.jpg);
	background-position: left top;
	background-repeat: no-repeat;

	position: relative;
	background-size: contain;
	background-size: cover;

	/*float: left;*/
}

.toplogo{
	position: relative;
	overflow: hidden;
	padding: 5px;
	margin: 5px;
	background: url(../res/top_image.jpg) no-repeat;
	
	background-size: cover;
	background-size: contain;
}

@media only screen and (max-width:768px){
	.toplogo{
		background: url(../res/top_image3.jpg) no-repeat;
	background-size: cover;
	background-size: contain;
	
	}
}

.col80{
	width: 90%;
	/*border: 1px solid #000000;*/
	text-align: left;
}
	
.col5{
	width: 5%;
	/*border: 1px solid #000000;*/
	text-align: right;
	min-width: 65px;
}

.pgcontainer {
	background-color: #DDDDDD;
	/* padding: 20px; */
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.pgcontainer p {
	/*text-align: justify;*/ /* !!!!!!!!!!!!!!!*/
	/* text-justify: auto; */
}



@media only screen and (max-width:768px){
	.pgcontainer {
		background-color: #DDDDDD;
		/* padding: 20px; */
		padding-left: 5px;
		padding-right: 5px;
		padding: 1em;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.pgcontainer ul li {
		margin-left: -2.0em;
	}
}
/* ----------------------------------------- */
.footer {
	/*
	background-color: #FFA656;
	float: right;
	width: 100%;
	text-align: right;
	vertical-align: baseline;
*/
	padding: 5px;
	display: table;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	font-size: 1em;	/*border: #8A1517 solid 1px;*/
	background-color: #191919;
}

.footer_col1{
	display: table-cell;
	width: 33%;
	/*border: #AD6600 solid 1px;*/
	text-align: left;
}
.footer_col2{
	display: table-cell;
	width: 33%;
	/*border: #AD6600 solid 1px;*/
	text-align: center;
}
.footer_col3{
	display: table-cell;
	width: 33%;
	/*border: #AD6600 solid 1px;*/
	text-align: right;
}
/* ----------------------------------------- */
.footer_tbl{
	display: table;
	/*border: rgba(25,199,23,1.00) solid 1px;*/
	table-layout: fixed;
	width: 100%;  
}
.footer_row{
	display: table-row;
	/*border: rgba(199,154,23,1.00) solid 1px;*/
}
.footer_row span{
	display: table-cell;
	/*border: rgba(199,23,23,1.00) solid 1px;*/
	vertical-align: top;
	padding: 0.5em;
}
.footer_row span+span{
	text-align: center;
}
.footer_row span+span+span{
	text-align: right;
}

/*
@media only screen and (max-width:1920px){.an_box1{width: 60%;}}
@media only screen and (max-width:1800px){.an_box1{width: 70%;}}
@media only screen and (max-width:1600px){.an_box1{width: 80%;}}
@media only screen and (max-width:1200px){.an_box1{width: 90%;}}
@media only screen and (max-width:993px){.an_box1{width: 98%;}}
*/
@media only screen and (max-width:600px){
	.footer_row{display: block;text-align: center;}
	.footer_row span{display: block;text-align: center;}
	.footer_row span+span{display: block;text-align: center;}
	.footer_row span+span+span{display: block;text-align: center;}
}
/* ----------------------------------------- */
.simple_box{
	width: 60%;
	/*height: 200px;*/
	margin-left: auto;
	margin-right: auto;
	border: 0px solid #3C3C3C;
	border-radius: 10px;
	/*text-shadow: 5px 5px 5px #000000;*/
	-webkit-box-shadow: 3px 3px 4px 5px #212121;
	box-shadow: 3px 3px 4px 5px #212121;
	align-content: center;
	background-color: #DADADA;
	padding: 20px;
	color: black;
}
@media only screen and (max-width:600px){
	.simple_box{width: 80%;}
}
/* ----------------------------------------- */
.title_box{
	width: 70%;
	/*height: 200px;*/
	/*height: 54px;*/
	height: 1.8em;
	margin: 0;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #9A9A9A;
	border-radius: 50px;
	/*text-shadow: 5px 5px 5px #000000;*/
	-webkit-box-shadow: 5px 6px 7px 7px #6D6D6D;
	box-shadow: 5px 6px 7px 7px #191919;
	/*	background-color: #FAFAFA;*/


	text-align: center;
	vertical-align: middle;
	font-size: 1.6em;
	/*line-height: 1.4em;*/
	padding: 0.2em;
	color: #D6D6D6;
	text-shadow: 4px 3px 4px #676565;
	text-shadow: 0px 0px 5px #B1B1B1;
	display: table;	
	
/*font-weight: bold;*/
	
/*	
padding-left: 1em;
padding-right: 1em;
*/

}
.title_box_plus{
	width: 70%;
	/*height: 200px;*/
	/*height: 54px;*/
	height: 1.8em;
	margin: 0;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid #9A9A9A;
	border-radius: 50px;
	/*text-shadow: 5px 5px 5px #000000;*/
	-webkit-box-shadow: 5px 6px 7px 7px #6D6D6D;
	box-shadow: 5px 6px 7px 7px #191919;
	/*	background-color: #FAFAFA;*/


	text-align: center;
	
	font-size: 1.6em;
	/*line-height: 1.4em;*/
	padding: 0.2em;
	padding-left: 48px;
	color: #D6D6D6;
	text-shadow: 4px 3px 4px #676565;
	text-shadow: 0px 0px 5px #B1B1B1;
	display: table;/*font-weight: bold;*/
	
/*	
padding-left: 1em;
padding-right: 1em;
*/

}
.title_box_plus span{
	

}
/* ----------------------------------------- */
.plusbtn {
	width: 48px; height: 48px;
	float: right; 
	margin-top: 0px; margin-right: 0px;
}


@media only screen and (max-width:993px){
	.title_box {font-size: 1.3em;}
	.title_box_plus {font-size: 1.3em;padding-left: 36px;}
	.plusbtn {
		width: 36px; height: 36px;
		float: right; 
		margin-top: -3px; margin-right: -7px;
		margin-top: 0px; margin-right: 0px;
	}
}

@media only screen and (max-width:768px){
	.title_box {font-size: 1.1em;}
	.title_box_plus {font-size: 1.1em;padding-left: 30px;}
	.plusbtn {
		width: 30px; height: 30px;
		float: right; 
		margin-top: -3px; margin-right: -5px;
		margin-top: 0px; margin-right: 0px;
	}
}

@media only screen and (max-width:600px){
	.title_box {font-size: 1em;}
	.title_box_plus {font-size: 1em;padding-left: 25px;}
	.plusbtn {
		width: 25px; height: 25px;
		float: right; 
		margin-top: -3px; margin-right: -5px;
		margin-top: 0px; margin-right: 0px;
	}
}
/* ----------------------------------------- */
.subtitle_box{
	width: 95%;
	/*height: 200px;*/
	height: 50px;
	height: 2em;
	margin: 0;
	margin-top: 1em;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #9A9A9A;
	border-radius: 50px;
	/*text-shadow: 5px 5px 5px #000000;*/
	-webkit-box-shadow: 4px 4px 2px 3px #191919;
	box-shadow: 4px 4px 2px 3px #191919;
	/*	background-color: #FAFAFA;*/
	background-color: #555555;
	text-align: center;
	
	font-size: 1.2em;
	/*line-height: 1.4em;*/
	padding: 0.3em;
	color: #C2C2C2;
	text-shadow: 2px 2px 2px #4E4D4D;
}
.subtitle_box p {
	text-align: center;
	/*font-size: 1.2em;*/
	/*line-height: 1.4em;*/
	padding: 0.2em;
	/*color: #D6D6D6;*/
	text-shadow: 4px 3px 4px #676565;
	
}

@media only screen and (max-width:993px){
	.subtitle_box{font-size: 1.1em;	}
}
@media only screen and (max-width:768px){
	.subtitle_box{font-size: 0.88em; font-weight: bold}
}
/* ----------------------------------------- */
.an_box1{
	width: 60%;
	/*height: 200px;*/
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #828282;
	border-radius: 10px;
	/*display: inline-block;*/
	padding: 5px;
}
.an_box2{
	display: table-cell;
	/*width: 40%;*/
	width: 200px;
	/*min-width: 20%;*/
	/*border: 1px solid #D11F22;*/
	vertical-align: top;
	padding: 5px;
	text-align: center;
}
.an_box3{
	display: table-cell;
	/*width: 60%;*/
	/*border: 1px solid #16BC29;*/
	vertical-align: top;
	padding: 5px;
	/*text-align: justify;*/
}

@media only screen and (max-width:1920px){.an_box1{width: 60%;}}
@media only screen and (max-width:1800px){.an_box1{width: 70%;}}
@media only screen and (max-width:1600px){.an_box1{width: 80%;}}
@media only screen and (max-width:1200px){.an_box1{width: 90%;}}
@media only screen and (max-width:993px){.an_box1{width: 98%;}}
@media only screen and (max-width:768px){.an_box1{width: 98%;}}
@media only screen and (max-width:600px){.an_box1{width: 98%;}}

@media only screen and (max-width:1920px){.an_box2{}}
@media only screen and (max-width:1800px){.an_box2{}}
@media only screen and (max-width:1600px){.an_box2{}}
@media only screen and (max-width:1200px){.an_box2{}}
@media only screen and (max-width:993px){.an_box2{}}
@media only screen and (max-width:768px){.an_box2{display: block;width: 100%;}}
@media only screen and (max-width:600px){.an_box2{display: block;width: 100%;}}

/* ----------------------------------------- */

@media only screen and (max-width:1920px){#media_q:after {content: "[7] 1920";}}
@media only screen and (max-width:1800px){#media_q:after {content: "[6] 1800";}}
@media only screen and (max-width:1600px){#media_q:after {content: "[5] 1600";}}
@media only screen and (max-width:1200px){#media_q:after {content: "[4] 1200";}}
@media only screen and (max-width:993px){#media_q:after {content: "[3] 993";}}
@media only screen and (max-width:768px){#media_q:after {content: "[2] 768";}}
@media only screen and (max-width:600px){#media_q:after {content: "[1] 600";}}

/* ----------------------------------------- */

.infobox{
	width: 50%;	margin-left: auto;	margin-right: auto;	border: 0px solid #787878;
}

@media only screen and (max-width:768px){
	.infobox{ 
		width: 80%;
		text-align: justify;
	}
}

/* ----------------------------------------- */

.legend-fieldset{
	width: 80%; margin-left: auto; margin-right: auto;
}

.legend-fieldset div {
	width: 5%; margin-left: auto; margin-right: auto; border: 0px solid #787878; text-align: left; font-size: 0.8em; display: table-cell;
}

.legend-fieldset div span {
	display: inline-block;
}

.legend-fieldset div span img{
	vertical-align: text-bottom; /*border: 1px solid #787878;*/
}

@media only screen and (max-width:768px){
	.legend-fieldset{
		width: 90%;
	}
	.legend-fieldset div span {
		display: block;

	}
}
/* ----------------------------------------- */
.ineditmode{
	color: rgba(6,209,4,1.00);
	background-color: rgba(0,0,0,0.75);
	display: block;
	/*float: left;*/
	position: fixed;
	z-index: 500;
	font-size: 0.75em;
	top: 0px; left: 0px;
	border: solid 1px #00AB29;
}

.ineditmode{
	animation-name: tx_data_saved_fadeInOut;
	animation-duration: 7s;
	opacity: 0;
	transition-delay: 1s;

	
	/*
	animation-name: ineditmode_txt_anim_fadeInOut;
	animation-duration: 1.5s;
	animation-delay: 2s;
	animation-direction: normal;
	opacity: 1;
	animation-iteration-count: infinite;
	*/
	/*transition-property: opacity ;*/
	/*transition-duration: 3s;*/
	/*animation-iteration-count: 2;*/
	/*opacity: 1.0;*/
/*
	animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
	transition-property: opacity ;
	transition-duration: 1s;
	transition-timing-function: linear;
	transition-delay: 1s;
	opacity: 0.5;

*/
	
}

@keyframes ineditmode_txt_anim_fadeInOut {
 /* from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }*/

	/*
	0% {opacity: 1}
	25% {opacity: 1}
	50% {opacity: 0.8}
	75% {opacity: 0.5}
	100% {opacity: 0.35}
	*/
	
/*
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
*/
}
