@charset "utf-8";
/* CSS Document */

:root {
	--street-point-grey: #e2d2bc;
	--street-point-blue: #428bca;
	--street-point-green: #a7cc46;
}


* {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	line-height: 1.4em;
}

h1 {
	color: #417bbb;
	font-size: 2em;
	font-weight: bold;
}

h2 {
	font-size: 1.6em;
	color: #417bbb;
	font-weight: bold;
}



.circle_button a,
.square_button a,
.circle_button h2,
.square_button h2 {
	color: #fff;
	font-size: 1.4em;
	line-height: 1.2em;
	text-decoration: none;
}


.circle_button_blau h2,
.circle_button_blau h2 a {
	color: #fff;
	font-size: 1.5em;
	line-height: 1.2em;
	margin-top: 0px;
	text-decoration: none;
}

.square_button h2 {
	margin-bottom: -15px;
	font-weight: normal;
}

.swal-button {
	padding-top: 20px;
	padding-bottom: 20px;
}

#einleitung_element {
	overflow: hidden;
}

#header_images {
	position: relative;
	width: 100%;
	background-position: center top;
	background-repeat: no-repeat;
}

#buttons img {
	margin: 0px;

}


#wrapper {
	max-width: 2000px;
	margin: 0 auto;
}

#container {
	/*background-image: url(https://www.street-points.eu/files/Laufspiel/img/design/streetpoint_body_bg.gif);
    background-repeat: repeat-y;
    background-position: top center;
    margin-top: -4px;*/
	padding-bottom: 300px;
	background-image: url(https://www.street-points.eu/files/Laufspiel/img/design/img_footer_kids.jpg);
	background-position: center bottom;
	background-repeat: no-repeat;
}

.custom {
	max-width: 1200px;
	margin: 0 auto;
}



#einleitung {
	color: var(--street-point-green);
	margin-bottom: 30px;
	font-weight: bold;
}

#rechte_navibuttons {
	position: relative;
	z-index: 100;
	float: right;
	width: 26%;
	min-width: 250px;
	padding: 2%;
	margin-top: -322px;
}


#linker_hauptbereich {
	position: relative;
	float: right;
	width: 72%;
}

#rechte_navibuttons .container {
	min-width: 250px;
	width: 100%;
}

#linker_hauptbereich .container {
	width: 100%;
}

#adminStationTable tr td:first-child {
	font-weight: bold;
	color: #417bbb;
	font-size: 1.2em;
}

#adminStationTable_2 tr td:first-child {
	font-weight: bold;
	color: #417bbb;
	font-size: 1.2em;
}

.circle_button,
.square_button {
	width: 235px;
	margin: 10px;
	text-align: center;
	float: right;
	padding: 40px 20px 20px 20px;
	box-shadow: 4px 4px 1px silver;
	border: 3px solid #fff;
	background-color: var(--street-point-green);
	background: -prefix-linear-gradient(70deg, var(--street-point-green) 70%, #9dc13f);
	background: linear-gradient(70deg, var(--street-point-green) 70%, #9dc13f);
}

.circle_button_blau {
	width: 235px;
	margin: 10px;
	text-align: center;
	float: right;
	padding: 40px 20px 20px 20px;
	box-shadow: 4px 4px 1px silver;
	border: 3px solid #fff;
	background-color: var(--street-point-blue);
	font-size: 1em;
}

.square_button {
	border-radius: 8%;
}

.circle_button,
.circle_button_blau {
	height: 235px;
	border-radius: 50%;

}

.circle_button:hover,
.circle_button_blau:hover {
	box-shadow: 0px 0px 0px silver;
	/*background-color: var(--street-point-green);*/
}


.circle_button a,
.circle_button {
	color: #fff;
	font-size: 1.3em;
	text-decoration: none;
}


.circle_button_blau a,
.circle_button_blau {
	color: #fff;
	font-size: 1em;
	text-decoration: none;
}

.circle_button a:hover,
.circle_button_blau a:hover,
.circle_button:hover a,
.circle_button_blau:hover a {
	font-weight: bold;
}


.circle_button img,
.circle_button_blau img {
	margin-top: 0px;
	margin-right: 0px;
}


.circle_button.weltkugel {
	background-image: url(https://www.street-points.eu/files/Laufspiel/img/startseite/img_world.png);
	background-position: center top;
	background-repeat: no-repeat;
}

.circle_button .spielstand {
	font-size: 0.8em;
	color: #fff;
	margin-top: 20px;
}

.circle_button .circle_text,
.circle_text {
	font-size: 0.8em;
	color: #fff;
}

#button_leiste figure {
	float: left;
	width: 235px;
}

#button_leiste figcaption {
	width: 100%;
	text-align: center;
	font-size: 0.8em;
	color: #999;
}

.clear {
	clear: both;
}

.circle_button.punktestand p {
	font-size: 0.6em;
}


#linker_hauptbereich .image_container {
	margin: 20px 0px;

}

.mod_laufspiel_ergebnisse {
	font-size: 0.7em;
	margin-top: 6px;
}

/* aktueller Punktestand */
#punktefeld button {
	color: #417bbb;
}

#cardNum {
	color: #000;
	padding: 5px;
}


.mod_laufspiel_ergebnisse {
	color: #fff;
}

/* aktueller Punktestand */




#demo {
	font-size: 1.em;
	width: 77%;
	padding-top: 5px;
	margin: 0 auto;
}

/* Aktive und Beendete Spiele */
/*
.game_wrapper {
    float: left;
    line-height: 2em;
}*/

.game_name {
	width: 120px;
	float: left;
}

.game_url {}

.btn_return a,
.btn a {
	color: #fff;
}

.btn_return {
	margin-top: 12px;
}

.mod_laufspiel_activ_games {
	margin-bottom: 20px;
}

/* Aktive und Beendete Spiele */


.pflicht {
	color: #ff0000;
}

.login {
	margin-bottom: 30px;
}

#abstand_oben {
	margin-top: 200px;
}

@media (min-width: 975px) {
	#header_images {
		position: relative;
		width: 100%;
		height: 378px;
		background-image: url(https://www.street-points.eu/files/Laufspiel/img/design/img_header.jpg);
	}

	.mejs-container,
	video,
	.mejs-overlay {
		width: 700px;
		height: 400px;

	}

	/*	.game_wrapper {
		width: 30%;
	}*/
}




@media (min-width: 482px) and (max-width: 974px) {
	#header_images {
		position: relative;
		width: 100%;
		background-size: 100%;
		background-image: url(https://www.street-points.eu/files/Laufspiel/img/design/img_header_small.jpg);
	}

}

@media (max-width: 600px) {
	#container {
		padding-bottom: 180px;
		background-image: url(https://www.street-points.eu/files/Laufspiel/img/design/img_footer_kids_600w.jpg);
	}
}

@media (min-width: 600px) and (max-width: 974px) {
	#container {
		padding-bottom: 100px;
		background-image: url(https://www.street-points.eu/files/Laufspiel/img/design/img_footer_kids_980w.jpg);
	}

}

@media (max-width: 1023px) {

	#rechte_navibuttons {
		position: relative;
		z-index: 100;
		float: none;
		width: 100%;
		padding: 2%;
		margin-top: 0px;
	}

	#button_leiste figcaption {
		display: none;
	}

	#button_leiste .ce_text .street-points-box {
		/*width: 180px;*/
		display: none;
	}

	#button_leiste .ce_image .street-points-box {
		display: none;
	}

	.circle_button .spielstand {
		margin-top: 0px;
	}


	.circle_button,
	.square_button,
	.circle_button_blau {
		float: left;
		margin: 10px 3%;
	}


	#linker_hauptbereich {
		position: relative;
		width: 100%;
		float: none;
		padding: 2%;
	}

	#abstand_oben {
		margin-top: unset;
	}

}

@media (max-width: 950px) {

	.circle_button,
	.square_button,
	.circle_button_blau {
		width: 200px;
		margin: 10px;
		padding: 31px 20px 20px 20px;
	}

	.circle_button,
	.circle_button_blau {
		height: 200px;
	}


	.circle_button a,
	.circle_button,
	.square_button a,
	.square_button {
		font-size: 1.2em;
	}



	#button_leiste figure {
		width: 230px;
		padding: 0px;
	}

	#cardNum {
		width: 70%;
	}

	#punktefeld button {
		width: 30px;
		height: 30px;
	}

	.circle_button.weltkugel {
		background-image: url(https://www.street-points.eu/files/Laufspiel/img/startseite/img_world.png);
		background-position: center top;
		background-repeat: no-repeat;
		font-size: 1.1em;
	}

	#staedte img {
		width: 210px;
	}

}

@media (max-width: 860px) {
	#button_leiste figure {
		width: 200px;
		padding: 0px;
	}

	.circle_button,
	.square_button,
	.circle_button_blau {
		margin: 4px;
	}
}

@media (min-width: 829px) and (max-width: 974px) {
	#header_images {
		height: 265px;
	}

	.mejs-container,
	video,
	.mejs-overlay {
		width: 700px;
		height: 400px;
	}

	/*.game_wrapper {
		width: 30%;
	}*/
}

@media (min-width: 710px) and (max-width: 830px) {
	#header_images {
		height: 240px;
	}

	.mejs-container,
	video,
	.mejs-overlay {
		width: 500px;
		height: 286px;
	}

	.game_wrapper {
		width: 100%;
	}
}

@media (min-width: 482px) and (max-width: 709px) {
	#header_images {
		height: 200px;
	}

	.mejs-container,
	video,
	.mejs-overlay {
		width: 480px;
		height: 280px;
	}

	.game_wrapper {
		width: 100%;
	}
}

@media (max-width: 481px) {

	.mejs-container,
	video,
	.mejs-overlay {
		width: 359px;
		height: 205px;
	}

	.game_wrapper {
		width: 100%;
	}

	#header_images {
		position: relative;
		width: 100%;
		height: 260px;
		/*background-image: url(https://www.street-points.eu/files/Laufspiel/img/email/mail_header.jpg);*/
		background-image: url(https://www.street-points.eu/files/Laufspiel/img/email/mail_header_optimized.jpg);
		background-position: center top;
		background-repeat: no-repeat;
	}

	body {
		line-height: 1.6em;
		font-size: 16px;
	}

	#navi_menu {
		max-width: 100%;
	}

	.circle_button.statistik,
	.circle_button.spielregeln,
	.circle_button.streetpoints,
	.circle_button.news,
	#button_leiste figure {
		display: none;

	}

	.circle_button,
	.square_button {
		width: 100%;
		height: auto;
		text-align: center;
		float: none;
		padding: 10px;
		box-shadow: none;
		border-radius: 0px;
		border: 3px solid #fff;
		background-color: var(--street-point-green);
		background: -prefix-linear-gradient(70deg, var(--street-point-green) 70%, #9dc13f);
		background: linear-gradient(70deg, var(--street-point-green) 70%, #9dc13f);
	}

	.circle_button_blau {
		width: 100%;
		height: auto;
		text-align: center;
		float: none;
		padding: 10px;
		box-shadow: none;
		border-radius: 0px;
		border: 3px solid #fff;
		background-color: var(--street-point-blue);
	}


	.circle_button.punktestand p {
		font-size: 0.8em;
	}

	.circle_button.weltkugel {
		background-image: none;
		background-color: #417bbb;
	}

	.circle_button.weltkugel .spielstand {
		margin-top: 0px;
	}

	input#cardNum {
		height: 40px;
		width: 80%;
	}

	#punktefeld button {
		color: #417bbb;
		width: 40px;
		height: 40px;
	}

}

#aktuell {
	border-bottom: 2px dotted var(--street-point-grey);
	padding-bottom: 36px;
}

#pic_home {
	text-align: center;
}

#pic_home video {
	width: 100%;
}

.countdown {
	color: var(--street-point-grey);
	font-size: 1.2em;
	font-weight: bold;
	margin: -10px 0 10px 0;
}

.lastUpdate {
	font-size: 0.8em;
	width: 103%;
}

/* responsive Tabellen */
@media screen and (min-width:701px) {

	table.scrolldown {
		width: 100%;
	}

	/* To display the block as level element */
	table.scrolldown tbody,
	table.scrolldown thead {
		display: block;
	}

	table.scrolldown tbody {
		/* Set the height of table body */
		height: auto;
		max-height: 200px;

		/* Set vertical scroll */
		overflow-y: auto;

		/* Hide the horizontal scroll */
		overflow-x: hidden;
	}

	table.scrolldown tbody td,
	table.scrolldown thead th {
		width: 500px;
	}

	table.scrolldown tbody td {
		text-align: left;
	}

	#statisticOrgTable .col_1 {
		width: 20%
	}

	#statisticOrgTable .col_first,
	#statisticOrgTable .col_0{
		width: 5%
	}

	#statisticOrgTable .col_1 {
		width: 20%
	}

	#statisticTeamTable .col_1 {
		width: 20%
	}

	#statisticTeamTable .col_first,
	#statisticTeamTable .col_0 {
		width: 5%
	}
}

@media screen and (max-width:700px) {
	table.tbl-stats .col_0,
	table.tbl-stats .col_1 {
		width: 100% !important;
	}
	table:not(.no-transform),
	table:not(.no-transform) tr,
	table:not(.no-transform) td {
		padding: 0;
	}

	table:not(.no-transform) {
		border: none;
	}

	table:not(.no-transform) thead {
		display: none;
	}

	table:not(.no-transform) tr {
		float: left;
		width: 100%;
		margin-bottom: 2em;
	}

	table:not(.no-transform) td {
		float: left;
		width: 100%;
		padding: 1em;
	}

	table:not(.no-transform) td::before {
		content: attr(data-label);
		word-wrap: break-word;
		background-color: var(--street-point-green);
		color: white;
		background: -prefix-linear-gradient(70deg, var(--street-point-green) 70%, #9dc13f);
		background: linear-gradient(70deg, var(--street-point-green) 70%, #9dc13f);
		width: 35%;
		float: left;
		padding: 7px 5px 7px 10px;
		font-weight: bold;
		margin: -5px 10px -5px -5px;
	}

}

/* responsive Tabellen */


/* Anmelde- und Registrieren Seite */
.mod_hochbahn_login.mod_login.one_column.tableless.login.block {
	margin-top: 30px;
}

form .widget {
	margin: 0px;

}

/* Anmelde- und Registrieren Seite */

/* Kontaktseite */
#kontaktformular .widget {
	margin: 10px 0px;

}

.captcha {
	padding: 6px;
}

/* Kontaktseite */

/* Anmelde- und Registrieren Seite */

/* Meine Punkte */

.meineSpielUebersicht {
	border: 2px solid #ccc;
	padding: 20px;
	margin: 20px 0;
	line-height: 1.8em;
}

.meineSpielUebersicht .spielName {
	font-size: 1.4em;
	color: var(--street-point-green);
	margin-bottom: 10px;
}


.meineSpielUebersicht #level {
	position: relative;
	margin: 0 auto;
	width: 350px;
}

.meineSpielUebersicht .deins,
.deins {
	font-weight: bold;
}



#level {
	position: relative;
}

#level #levelNummer {
	position: absolute;
	left: 165px;
	font-size: 4em;
	font-weight: bold;
	text-shadow: 4px 4px 1px #fff;
	color: #386ea9;
	top: 65px;
}


/* Meine Punkte */

/* Defekte Box melden */

.box_melden {
	margin-top: -46px;
}

@media(max-width:480px) {
	.box_melden {
		margin-top: -19px;
	}

	/*Punkte größe ändern*/
	.meineSpielUebersicht #level {
		width: 250px;
	}

	#level img {
		width: 250px;
		height: 125px;
	}

	#level #levelNummer {
		left: 108px;
		font-size: 3em;
		top: 30px;
	}
}


.defect_box_notice p {
	color: white;
}

.col-box-number {
	width: 100px;
	padding-right: 5px
}

.col-box-code {
	width: 75px;
	padding-left: 5px
}

.error p {
	color: white
}


@media(max-width:950px) {

	.circle_button h2,
	.square_button h2,
	.circle_button_blau h2 {
		color: #fff;
		font-size: 1.2em;
		line-height: 1.2em;
		text-decoration: none;
	}
}

@media(max-width:768px) {


	.box_melden {
		width: 100% !important
	}

	.col-box-number {
		width: 100px;
		padding-right: 5px
	}

	.col-box-code {
		width: 75px;
		padding-left: 5px
	}

	.block_container {
		display: flex;
	}
}

.box_melden input.btn.submit {
	margin-left: -20px;
}

/* Defekte Box melden */

#button_leiste {
	text-align: center;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.clear {
	clear: both;
}

.screen_img {
	margin: 20px;
}