/**********************************************************************************
Schrift
**********************************************************************************/
@font-face{
	font-family:"B";
	src:url("/files/cto_layout/fonts/b.woff") format("woff"),url("/files/cto_layout/fonts/b.woff") format("woff");
}

/**********************************************************************************
Farben
1: Grün
2: Blau
3: Rot
4: Gelb
**********************************************************************************/
:root {
  --spitexundich_1: #DEE7A2; 
  --spitexundich_2: #21BAED;
  --spitexundich_3: #F192B0;
  --spitexundich_4: #FCED98;
  --spitexundich_text: #53636B;
}

/**********************************************************************************
Grundlagen
**********************************************************************************/
body {
	font-size: 20px;
}
.spitexgrlogo a{
  	background-image: url("../../cto_layout/img/logospitexgr.png") !important;
}
body, a, p a, #footer, h1, h2, h3, h4 {
	color: var(--spitexundich_text);
}
a{
	font-weight: bold;
}
h1, h4{
	font-family: "B";
}
h1{
	font-size: 38px;
    white-space: normal !important;  
	word-break: keep-all !important;  
	overflow-wrap: normal !important; 
	hyphens: none !important;   
}
@media only screen and (max-width: 768px) {
	h1{
		font-size: 28px; 
	}	
}
.h1gross{
	font-size: 38px;
	margin-top: 20px;
	margin-bottom: 40px;
	white-space: normal !important;  
	word-break: keep-all !important;  
	overflow-wrap: normal !important; 
	hyphens: none !important;   
}
p{
	margin-top: 12px;
	margin-bottom: 12px;
}



/**********************************************************************************
Navigation
**********************************************************************************/
.smartmenu {
	top: 400px;
}
@media only screen and (max-width: 768px) {
	.smartmenu {
		display: block !important;
	}
	.smartmenu {
		z-index: 2000;
		position: fixed;
		top: 20px;
		right: 20px;
		width: 50px;
	}
	.header {
		width: 50%;
		float: left;
	}
	.smartmenu-trigger {
		width: 50px !important;
		height: 50px !important;
	}
	.smartmenu .smartmenu-trigger .line {
		margin-left: 5px;
		width: 40px;
	}
	.smartmenu-content {
		left: 0px !important;
		width: 100%;
		overflow: auto;
	}
	.smartmenu-content .smartmenu-close {
		top: 20px;
		right: 20px;
		width: 60px !important;
	}
}
.mmenu_trigger {
	display: none !important;
}
.smartmenu-trigger, .smartmenu-content .smartmenu-close {
	background-color: var(--spitexundich_2);
}
.smartmenu-content{
	background-color: var(--spitexundich_3);
	left: calc(50% - 555px);
	width: 100%;
	max-width: 1110px;
}

.smartmenu-content .mod_navigation a{
	color: var(--spitexundich_4);
	font-family: "B";
	font-size: 25px;
}
#nachnav {
	border-top-width: 0px;
}
.nachnav_spalte_1, .nachnav_spalte_3 {
	width: 100%;
	text-align: center;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFF;
	margin-bottom: 20px;
}
.nachnav_spalte_1 h4, .nachnav_spalte_3 h4{
	color: var(--spitexundich_4);
	text-align:center;
	font-size: 25px;
}
.nachnav_kontakt{
	width: 50%;
	display: block;
  	float: left;
	text-align: left;
	padding-left: 10%;
	padding-rigth: 10%;
}
.nachnav_kontakt, .nachnav_kontakt a{
	color: #000;
	font-size: 16px !important;
	font-family: "DIN W03 Light" !important;
}
.mod_top_phone{
	right: 250px;
}
.mod_top_www {
	font-size: 15px;
	display: block;
	line-height: 100%;
	height: 20px;
	position: absolute;
	top: 65px;
	right: 400px;
}
.stickyheader .mod_top_www {
  top: 25px;
}
@media screen and (max-width: 930px) {
	.mod_top_phone, .mod_top_mail, .mod_top_www {
		display: none;
	}	
}
#header .fa {
	color: var(--spitexundich_2);
}
.mmenu_trigger {
	background-color: var(--spitexundich_2);
}
.smartmenu-content .smartmenu-close {
	top: 400px;
}
@media only screen and (max-width: 767px) {
	.smartmenu-content .smartmenu-close {
		top: 20px;
		padding-top: 5px;
	}	
}

/**********************************************************************************
Diverses
**********************************************************************************/
@media only screen and (max-width: 767px) {
  	.mt-s {
		margin-top: 0px !important;
  	}
}
@media only screen and (max-width: 767px) {
	.autogrid_grid .column {
	  padding-left: 5px !important;
	  padding-right: 5px !important;
	}
}
#main .mod_article.fullwidth.seiteninhalt {
	padding-left: 0%;
	padding-right: 0%;
}
.rot, .gelb, .blau{
	width: 100%; 
	aspect-ratio: 1 / 1;
	font-family: "B";
	font-size: 40px;
	line-height: 130%;
	padding: 20px;
	hyphens: none;
	word-break: keep-all;
	overflow-wrap: normal;
}
@media screen and (max-width: 1000px) {
	.rot, .gelb, .blau{
		font-size: 30px;
	}	
}
@media screen and (max-width: 767px) {
	.rot, .gelb, .blau{
		font-size: 40px;
	}	
}
a:has(.rot), a:has(.blau), a:has(.gelb)  {
	text-decoration: none;
}

.rot{
	background-color: var(--spitexundich_3);
	color: var(--spitexundich_4);
}
.gelb{
	background-color: var(--spitexundich_4);
	color: var(--spitexundich_3);
}
.blau{
	background-color: var(--spitexundich_2);
	color: var(--spitexundich_4);
}
.mod_article.article-pb-xs > .container {
	padding-bottom: 0px;
	margin-top: 20px;
}
@media screen and (max-width: 700px) {
	.mod_article.seiteninhalt{
		padding-left: 0%;
		padding-right: 0%;
	}
}
#footer h4{
	color: var(--spitexundich_2);
	font-size: 30px;
	margin-top: 10px;
}
#footer a{
	color: var(--spitexundich_text);
}
.mod_article.seiteninhalt, #main .mod_article.fullwidth.seiteninhalt {
	background-color: #fff;
	padding-top: 0px;
	margin-bottom: 0px;
}
#footer {
	background-color: var(--spitexundich_1);
}
.ce_iconbox .fa {
	color: var(--spitexundich_text);
}
button.submit[type="submit"] {
	background: var(--spitexundich_2);
}


/* Akkordeon **********************************************************/
.ce_accordion {
  border: none;
}
ce_accordion.style1 .toggler {
	padding: 1rem 1rem 1rem 4rem;
}
.ce_accordion.style1 .toggler::before {
	margin: 0;
	margin-left: 0px;
	width: 1.5rem;
	height: 1.5rem;
	position: absolute;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-block;
	padding: 0;
	text-align: center;
	font: 1rem/1.6rem FontAwesome;
	font-weight: normal;
	font-size: 1rem;
	line-height: 1.6rem;
	font-weight: 400;
	content: "\f067";
	border-radius: 100%;
	border: 2px solid;
}
.ce_accordion.style1 .toggler {
	padding: 0.7rem 0.7rem 0.7rem 4rem;
	box-shadow: 0 2px 2px 2px rgb(0 0 0 / .03);
	cursor: pointer;
	transition: All 0.3s ease;
	-webkit-transition: All 0.3s ease;
	position: relative;
	font-weight: 700;
	font-size: 20px;
	border: 1px solid #dcdcdc;
}
.ce_accordion.style2 .toggler, .ce_accordion.style1 .toggler{
	font-family: "B";
	color: var(--spitexundich_3);
	font-weight:normal;
	border: none;
	border-bottom: 0px;
	box-shadow: none;
	background-color: var(--spitexundich_4);
}
.ce_accordion.style2 .toggler::before, .ce_accordion.style1 .toggler::before{
	border: none;
	font-size: 30px;
	color: var(--spitexundich_3);
	margin-left: 0px;
}
.ce_accordion.style2 .toggler.ui-state-active, .ce_accordion.style1 .toggler.ui-state-active {
	color: var(--spitexundich_3);
}
.ce_accordion.style2 .toggler.ui-state-active::before, .ce_accordion.style1 .toggler.ui-state-active::before {
	color: var(--spitexundich_3);
	border-color: #fff;
	content: " \f068";
}
.ce_accordion.style2 .accordion, .ce_accordion.style1 .accordion {
	background-color: var(--spitexundich_4);
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}


.newsletteranmeldung{
	height: 200px;
}
#footer .inside {
	max-width: 880px;
}
#vornav{
	height: 140px;
	width: 150px;
	margin-left: auto;
	margin-right: auto;
	display: block;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFF;
	padding-top: 20px;
}
.vornavbutton{
	display: block;
	width: 150px;
	height: 100px;
	margin-right: auto;
	margin-left: auto;
	background-position: center top;
	background-size: 50px;;
	padding-top: 50px;
}
.vornavbutton.login{
	background-image: url(/files/cto_layout/img/spitexgr_login.png);
}

.startseite .smartmenu {
  top: 260px;
}
.startseite h6 a{
	text-decoration: none;	
}
.responsivekartegr{
	position: relative;
	padding-bottom: 75%; /* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	margin-bottom: 20px;	
}
.responsivekartegr iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.level_2 .a-level_1{
	text-decoration: none;
	font-size: 18px;
	font-family:"B";
	cursor: pointer;
	color: #666;
}

.spitextabelle table td {
  border-top: solid 1px #E3E3E3;
  padding: 0.5em;
    padding-left: 0.5em;
  text-align: left;
}

#newThread, #movedThread, #deletedThread, #newPost, #editedPost, #deletedPost{
	width: 50px;
}