@charset "utf-8";
/* -------------------------------------------------------
CityHunters.de Teamguide Center Page specific Design

Copyright by CityHunters 2019
------------------------------------------------------- */


div#show_size {
	position: fixed;
	top: 30px;
	right: 30px;
	width: auto;
	padding: 10px;
	background-color: #000;
	color: #fff;
	z-index: 99999999;	
}


/* ----------------------------- */
/* ---------- FONTS ------------ */
/* ----------------------------- */

p {
	word-wrap: break-word;
  overflow-wrap: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

.fa, .fab, .fal, .far, .fas {
    line-height: inherit;
	font-size: 90%;
}

ol {
	list-style: decimal; 
	padding-left: 20px; 
}
	   
ol li {margin-bottom: 10px;}

ol.green_numbers {
	list-style: none;
	counter-reset: list;
	padding-left: 27px;
}
		 
ol.green_numbers li {
	counter-increment: list;
}
		 
ol.green_numbers li:before {
	margin-right: 10px;
	content: counter(list);
	background: #8ec900;
	border-radius: 100%;
	color: white;
	text-align: center;
	display: inline-block;
	width: 14px;
	height: 14px;
	padding: 3px;
	line-height: 14px;
	font-size: 13px;
	font-weight: bold;
	position: absolute;
	left: 0px;
}

/* ------------------------------ */
/* ---------- HEADER ------------ */
/* ------------------------------ */

div#header_logo .seitentitel {
	position: absolute;
	bottom: -8px;
	right: 10px;
	font-size: 75%;
	color: #fff;
	font-weight: bold;
	letter-spacing: 1px;
}

.header_top_inner .menu_button a {
    background-color: #4d5696;
}

div#header_image_container {
	height: 350px;	
}

.content_line_inner {
    min-height: 50px;
	padding-top: 15px;
	padding-bottom: 15px;
}


@media screen and (max-width:1200px) {
div#header_image_container {
	height: 250px;	
}
}


@media screen and (max-width:1000px) {
div#header_image_container {
	height: 200px;	
}
}

@media screen and (max-width:800px) {
div#header_image_container {
	height: 0px;	
}

.content_line_inner {
    min-height: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}
}

@media screen and (min-width:900px) {
 ul.main-navi li .main-navi.active,
 ul.main-navi li .main-navi:hover,
 ul.main-navi li:hover .main-navi {
  background-image:url(https://www.ch-static.de/images/white-70p.png);
  color: #fc0;
 }
}

.header_navi.responsive ul.main-navi li a.main-navi::after {
	content: "";	
}

@media screen and (max-width:900px) {
	
.header_navi.responsive ul.main-navi li .submenu {
    display: block;
}

ul.main-navi li:hover .submenu,
ul.main-navi li .submenu {
	width: 100%;
	max-height: 0;
	float: left;
	position: relative;
	background: transparent;
	color: #fff;
	visibility: visible;
	border: none;
	box-sizing: border-box;
	padding: 0;
   -webkit-transition: all 0.25s linear;
   -moz-transition: all 0.25s linear;
   -o-transition: all 0.25s linear;
   -ms-transition: all 0.25s linear;
   transition: all 0.25s linear;
   scrollbar-width: none;
}

ul.main-navi li:hover .submenu::-webkit-scrollbar {
    display: none;
}

ul.main-navi li .submenu ul {
	width: 100%;
	max-width: 100%;
	padding-left: 10px;
	box-sizing: border-box;
	margin-top: 15px;
	margin-bottom: 10px;
}

ul.main-navi li .submenu ul li {
	padding: 0;
}

ul.main-navi li .submenu ul li a {
	color: #ccd3fd;
	font-size: 130%;
}

ul.main-navi li .submenu ul li a:hover,
ul.main-navi li .submenu ul li a:focus,
ul.main-navi li .submenu ul li a:active {
	color: #fc0;
	background: transparent;
}
}

/* ---------------------------- */
/* ---------- MAIN ------------ */
/* ---------------------------- */




/* ------------------------------ */
/* ---------- COMMON ------------ */
/* ------------------------------ */


.margin_top_5 {margin-top: 5px;}
.margin_top_10 {margin-top: 10px;}
.margin_top_20 {margin-top: 20px;}
.margin_top_30 {margin-top: 30px;}

.margin_bottom_5 {margin-bottom: 5px;}

.padding_5 {padding: 5px;}

.loading_spinner_bg {
	background-color: #fff; 
	background-image: url(https://www.ch-static.de/images/page-loader.gif);
	background-size: 100px;
	background-repeat: no-repeat;
	background-position: center center;
}

.min_width_350 {min-width: 350px;}

.max_width_auto {max-width: none;}

.invisible {display: none;}

.position_relative {position: relative}
.position_absolute {position: absolute}



/* --------------------------------- */
/* ---------- FORMULARE ------------ */
/* --------------------------------- */

input[type=checkbox].hidden,
input[type=radio].hidden {
	visibility: hidden; 
	width: 0; 
	height: 0; 
	opacity:0; 
	position:absolute; 
	left:-50px;
	overflow: hidden;
}

input[type=checkbox]:checked+label,
input[type=radio]:checked+label{
	color: #fff;
	background: #8dc900;
	border-color: #fff;
}

.error_bg {background-color: #FFE0A3;}

.line_height_12 {line-height: 1.2em;}


/* -------------------------------- */
/* ---------- TABELLEN ------------ */
/* -------------------------------- */

table tr td .flag-icon:not(.position_relative) {
	position: absolute;
	top: 2px;
	right: 2px;	
}

tr.bis_800, tr.bis_700, tr.bis_600 {display: table-row;}

td.bis_800, td.bis_700, td.bis_600 {display: table-cell;}

table tr td .button_basis {font-size: 120%}

@media screen and (max-width:1000px) {
table.rounded.rescale tr td {
    padding: 12px;
	font-size: 90%;
}
table tr td .button_basis {font-size: 110%}
.button_basis::after {top: 24%;}
}

@media screen and (max-width:800px) {
table.rounded.rescale tr td {padding: 8px;}
td.bis_800, tr.bis_800 {display: none;}
tr.ab_800 {display: table-row;	}
td.ab_800 {display: table-cell;	}
table.rescale tr td .button_basis {font-size: 100%}

table tr td .flag-icon:not(.position_relative) {position: relative; display: inline-block; line-height: 0.4em; width: 0.9em; top: 0px;}
}

@media screen and (max-width:700px) {
td.bis_700, tr.bis_700 {display: none;}
tr.ab_700 {display: table-row;	}
td.ab_700 {display: table-cell;	}
}

@media screen and (max-width:600px) {
td.bis_600, tr.bis_600 {display: none;}
tr.ab_600 {display: table-row;	}
td.ab_600 {display: table-cell;	}
.button_basis::after {display: none}
}

table tr td[class*="icon-"],
table.rounded tr td[class*="icon-"] {
	position: relative;	
	overflow: hidden;
}

td[class*="icon-"]::before {
	position: absolute;
    top: -12px;
    left: -8px;
    font-size: 760%;
    color: #e5e5e5;
    z-index: -1;
}

/* -------------------------------- */
/* ---------- ELEMENTE ------------ */
/* -------------------------------- */

.direktbuchung_d {
	display: inline-block;
    padding: 3px 3px 3px 4px;
    background: #8ec900;
    font-size: 90%;
    line-height: 0.9em;
    border-radius: 4px;
    color: #fff;
	font-weight: bold;		
}


.cursor_pointer {cursor: pointer}

label, .label {font-weight: bold;}

.has_label.only_text {padding-top: 10px; padding-bottom: 10px;}

.design_line {
	width: 100%;
	height: 0px;
	border-bottom-style: dotted;
	border-bottom-width: 2px;
	float: left;
}

.line_through:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 0px;
	left: 0px;
	right: 0px;
	border-bottom-style: dotted;
	opacity: 0.7;
}

.spacer_10p.line_through:before {
	top: 5px;
	border-bottom-width: 1px;
}

.spacer_20p.line_through:before {
	top: 10px;
	border-bottom-width: 2px;
}

/* ---------- BEWERTUNG ------------ */

.bewertung_smiley {
    width: 44px;
    height: 44px;
    float: none;
    margin-right: 5px;
    cursor: pointer;
    display: inline-block;
}


@media screen and (max-width:800px) {
	
.bewertung_smiley {
    width: 31px;
    height: 31px;
	margin-right: 1px;
}

.bewertung_smiley .bewertung_smiley_inner {
    width: 28px;
    height: 28px;
	margin: 3px;
}

.bewertung_smiley .bewertung_smiley_inner.active, .bewertung_smiley .bewertung_smiley_inner:hover {
    width: 34px;
    height: 34px;
    margin: 0;
}	
	
}

/* ---------- NEWSTICKER ------------ */

.marquee,
.marquee-with-options,
.marquee-vert-before,
.marquee-vert {
	width: 100%;
	overflow: hidden;
	display: none;
	height: 20px;
}

.js-marquee {
	font-weight: bold;
	color: #010f70;	
	font-size: 16px;
}

@media screen and (max-width:800px) {
.marquee,
.marquee-with-options,
.marquee-vert-before,
.marquee-vert {
	height: 16px;
}

.js-marquee {
	font-size: 12px;
}
}



/* ---------- VIDEO FRAME ------------ */

div#check_frame_outer,
div#wait_frame_outer {
	position: absolute; 
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0; 
	z-index:99; 
	display: none;
	background-color: #fff;
}

div#check_frame,
div#wait_frame {
	margin: auto; 
	position: absolute; 
	top: 0; 
	left: 0; 
	bottom: 0; 
	right: 0; 
	z-index:100; 
	width: 100px; 
	height: 120px; 
	font-size: 800%; 
	text-align:center;
	overflow:visible;
}

.process_step, div#step_1_button {
   -webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
   -o-transition: all 300ms linear;
   -ms-transition: all 300ms linear;
   transition: all 300ms linear;
   cursor: not-allowed
}

@media screen and (min-width:800px) {
.c4_columns_item.process_step::before {
	font-family: 'CityHunters Icons';
	font-size: 100%;
	content: '\0078';
	position: absolute;
	left: -15%;
	top: 15px;
	z-index:999;
	color: #CCC;
}

.c5_columns_item.process_step::before {
	font-family: 'CityHunters Icons';
	font-size: 100%;
	content: '\0078';
	position: absolute;
	left: -21%;
	top: 15px;
	z-index:999;
	color: #CCC;
}
}


.imageRotateHorizontal{
    -moz-animation: spinHorizontal 3s infinite linear;
    -o-animation: spinHorizontal 3s infinite linear;    
    -webkit-animation: spinHorizontal 3s infinite linear;
    animation: spinHorizontal 3s infinite linear;
}

@-moz-keyframes spinHorizontal {
    0% {-moz-transform: rotateY(0deg);}
    100% {-moz-transform: rotateY(360deg);}
}

@keyframes spinHorizontal {
	0% {transform: rotateY(0deg);}
    100% {transform: rotateY(360deg);}
}

@-ms-keyframes spinHorizontal {
	0% {-ms-transform: rotateY(0deg);}
    100% {-ms-transform: rotateY(360deg);}
}

@-o-keyframes spinHorizontal {
	0% {-o-transform: rotateY(0deg);}
	100% {-o-transform: rotateY(360deg);}
}

@-webkit-keyframes spinHorizontal {
	0% {-webkit-transform: rotateY(0deg);}
	100% {-webkit-transform: rotateY(360deg);}
}

/* ---------- TOOLTIP ------------ */

[tooltip]::after {
line-height: 1.5em;	
}

/* ---------- DATEI UPLOAD ------------ */


div#image_preview img {
    max-height: 80%;
    max-width: 80%;
}

.img_preview_frame {
    height: 200px;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 100%;
    border-size: 3px;
	border-style: dashed;
	border-color: #ccc;
    position: relative;
    margin-right: 2.66%;
	margin-bottom: 20px;
    background-color: #efefef;
    border-radius: 10px;
	float: left;
	box-sizing: border-box;
	background-image: url(https://www.ch-static.de/images/page-loader.gif);
	background-size: 20%;
	background-repeat: no-repeat;
	background-position: center center;
}

.img_preview_frame.gallery_select:hover,
.img_preview_frame.gallery_select.chosen {
	border-color: #ccd3fd;
}

.img_preview_frame.gallery_select.chosen {
	background-image: none;
	background-color: #ccd3fd;
	border-color: #010f70;
}

.img_preview_frame:nth-of-type(4n) {
    margin-right: 0;
}

@media screen and (max-width:900px) {

.img_preview_frame {
    height: 250px;
    width: 48%;
    margin-right: 4%;
}
.img_preview_frame:nth-of-type(2n) {
    margin-right: 0;	
}
}

@media screen and (max-width:600px) {
.img_preview_frame {
    width: 100%;
    margin-right: 0;
}
}


.img_preview_frame img {
    max-height: 80%;
    max-width: 80%;
	width: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 5px;
}


.img_preview_frame .close {
	position: absolute;
	top: 2%;
	right: 3%;
	height: 20px;
	width: 20px;
	padding-top: 0px;
	display: block;
	cursor: pointer;
	font-size: 21px;
	font-weight: bold;
	text-align: center;
}

.img_preview_frame .close::before {
	content: "✖";
	position: absolute;
	z-index: 95;
	font-size: 20px;
	color: red;
	top:0;
	right: 0;
	line-height: 0.9em;
}


.img_preview_frame .overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 96;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.6;
	display: none;
	border-radius: 8px;
}

.img_preview_frame .uploadProgress {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 97;
	width: 70%;
	height: 10%;
	display: none;
	min-height: 22px;
	box-sizing:border-box;
	text-align:center;
}

.img_preview_frame .uploadProgress .uploadProgressInner {
	position: relative;
	top: -50%;
	left: -50%;
	border-radius: 5px;
	width: 100%;
	height: 100%;
	z-index: 98;
	overflow: hidden;
	border: 1px solid #fff;
	background-color: #fff;
	background-image: linear-gradient(to bottom, #ffeb9c 0%, #FFCC00 50%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: -1000px center;
	box-sizing:border-box;
}

.img_preview_frame .uploadProgress .uploadFinished {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	top: -50%;
	left: -50%;
	width: 100%;
	height: 100%;
	z-index: 98;
	display: none;
	color: #8ec900;
	line-height: 1.2em;
	margin-top: -5%;
}

.img_preview_frame .uploadProgress .uploadProgressCount {
	width: 100%;
	height: 100%;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: bold;
	color: #fff;
	box-sizing:border-box;
	line-height: 1em;
	}