/***************************************
		Colors   

gruen dunkel	#00612c rgb(0,97,44)
gruen			#14912d rgb(20,145,45)
gruen normal	#439d2a rgb(67,157,42)
gruen hell		#6eab24 rgb(110,171,36)
beige			#e4e2e1 rgb(228,226,225)

dunkelblau		#0072a5 rgb(0,114,165)
blau			#5ba8c4 rgb(91,168,196)
hellblau		#a3d6f5 rgb(163,214,245)
gruen			#b0cc24 rgb(176,204,36)

***************************************/


html {
	
}

body {
	width:100%;
	height:100%;
	margin:0px;
	padding:0 0 0 0;
}

img {
	border:none;
}

.pointer {
	cursor:pointer;
}

.content {
	width:95%;
	max-width:960px;
	margin:0 auto;
	padding:0;
	box-sizing:border-box;
}

#container {
	width:100%;
	height:100%;
	margin-top:30px;
	margin-bottom:30px;
}



/**************/
/*   Header   */
/**************/

header {
	position:relative;
	width:100%;
	padding:17px 30px 17px 30px;
	box-sizing:border-box;
	background-color:#5ba8c4;
}

#logo-container {
	position:relative;
	top:-30px;
	float:right;
}

#logo {
	display:inline-block;
	width:115px;
}

#logo img {
	width:100%;
}

@media only screen and (max-width: 620px) {
	header {
		text-align:center;
	}

	#logo-container {
		float:none;
		width:100%;
		margin-bottom:-20px;
	}
}



/************/
/*   Main   */
/************/

#main {
	min-height:560px;
	background-color:#f5f5f5;
}



/***************/
/*   Content   */
/***************/

#content {
	padding:25px;
}



.button-container {
	display:inline-block;
	margin:0 5px 0 5px;
}



.section-hide {
	display:none;
}

#section-success {
	text-align:center;
	margin:50px 0 50px 0;
}



/**************/
/*   Footer   */
/**************/

footer {
	width:100%;
}

footer a {
	text-decoration:none !important;
}

#footer-container {
	width:100%;
	text-align:center;
	padding:35px 25px 35px 25px;
	box-sizing:border-box;
}



/***************/
/*   Loading   */
/***************/

.loading.show {
	display:inline-block;
}

.loading {
	display:none;

	vertical-align:middle;

	width:30px;
	height:30px;
	background-size:30px auto;

	background-image:url('../img/icon_loading.svg');
	background-repeat:no-repeat;
	background-position:center center;
	
	animation-name:loading-cricle;
	animation-timing-function:linear;
    animation-duration:1s;
    animation-iteration-count:infinite;
}

.loading.small {
	width:18px;
	height:18px;
	background-size:18px auto;
}

.loading.large {
	width:40px;
	height:40px;
	background-size:40px auto;
}



@keyframes loading-cricle {
	from {
	  -ms-transform:rotate(0deg);
	  -moz-transform:rotate(0deg);
	  -webkit-transform:rotate(0deg);
	  -o-transform:rotate(0deg);
	  transform:rotate(0deg);
	}
	to {
	  -ms-transform:rotate(360deg);
	  -moz-transform:rotate(360deg);
	  -webkit-transform:rotate(360deg);
	  -o-transform:rotate(360deg);
	  transform:rotate(360deg);
	}
}