*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html, body {
	font-family: 'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,sans-serif;
	font-size: 62.5%;
	line-height: 1.4;
	font-weight: normal;
	height: 100%;
}

body {
	font-size: 1.5rem;
	margin: 0 auto;
}

.oculto {
	font-size: 10px;
	display: none;
}

.linha img {
  float: left;
  width: 50px;
  height: 35px;
  background: #fff;
}

.linha h3 {
  position: relative;
  top: 3px;
  left: 10px;
}

/* Localização */
.localizacao {
	height: 400px;
	margin-top: 20px;
}

.localizacao h6 {
	font-size: 20px;
	font-weight: bold;
	text-transform: uppercase;
	margin-top: 10px;
	text-align: center;
	margin-bottom: 2px
}

.mapa {
	width: 100%;
}
/* zusätzliche zeilenabstände, absatz */
.content br {
	line-height: .6;
}

p.break  {
	line-height: 3rem;
	margin: 0;
}

.celula {
	background-color: #d1d3df;
	line-height: 2.0rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;	
}

.destaque {
	text-align: justify;
	margin-left: 20px;
	margin-right: 20px;
	border-style: double;
	border-color: #000;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 7px;
	padding-right: 7px;
	background: #f7f7f7;
	font-weight: bold;
}

container {
    margin:auto;
    width:70%;
    max-width:1400px;
    height:auto;
}

/* formulário de contato */
fieldset {
	margin-top: 10px;
	padding: 30px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

legend {
	font-size: 1.3em;
}

.campo {
	width: 100%;
	height: 30px;
	border: 1px solid #ddd;
	border-radius: 1px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
}

.area {
	width: 100%;
	height: 130px;
	border: 1px solid #ddd;
	border-radius: 1px;
	-webkit-border-radius: 1px;
	-moz-border-radius: 1px;
}

.btn {
	background-color: steelblue;
	font-size: 0.8em;
	color: #fff;
	padding: 5px 20px;
	margin-left: 40%;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.negritos {
	font-weight: bold;
}

a.ajuda {
	color: #000;
	background: #fff;
	text-decoration: underline;
	font-size: 80%;
	font-style: normal;
	font-weight: bold;
	font-family: verdana, arial, helvetica, sans-serif;
	margin-left: 20px;
	line-height: 20px;
	}

a.ajuda:visited {
	color: #000;
	background: #fff;
	}

a.ajuda:hover {
	color: #000;
	background: #fff;
	text-decoration: none;
	font-size: 80%;
	font-style: normal;
	font-weight: bold;
	font-family: verdana, arial, helvetica, sans-serif;
}

.texto {
	font: 75% verdana, arial, helvetica, sans-serif;
	color: #000;
	margin-left: 15px;
	margin-right: 15px;
	text-align: justify;
}

.logos {
	margin: 0 0 5px 0 ;
	padding: 0;
	width: 139px;
	height: 42px;
	border: 1px solid #000;
}

/* überschriften */

h1, h2, h3, h4, h5 {
	font-family: 'robotolight';
	font-weight: bold;
	color: #000;
}

h1 {
	text-align: left;
	font-size: 3.5rem;
	line-height: 3.7rem;
	margin-top: 0rem;
	margin-bottom: 4.2rem;
	letter-spacing: .0rem;
}

h2 {
	text-align: center;
	text-transform: uppercase;
	font-size: 2.8rem;
	line-height: 3rem;
	margin-top: 0rem;
	margin-bottom: 3.5rem;
	letter-spacing: 0rem;
}

h2:after  {
	display: block;
	border-top: 5px solid #788696;
	display: block;
	width: 150px;
	content: "";
	margin: 8px auto 0;
}

h3 {
	font-size: 2.1rem;
	line-height: 2.3rem;
	margin-top: 2.1rem;
	margin-bottom: 1.4rem;
	letter-spacing: 0rem;
}

/* allgemeine links  */

a {
	background-color: transparent;
	color: #00f;
	text-decoration: underline;
}

a:hover {
	color: #000;
	background-color: transparent;
	text-decoration: none;
}

/* quelltext-erklärungen - wenn vorhanden */
pre {
	white-space: pre-wrap;
	position: relative;
	font-size: 1.5rem;
	padding: 1rem 0.5rem 1rem 0.5rem;
	margin: 2rem auto;
	text-align: center;
	background: #F2F3F4;
	border: dotted 3px #8E979F;
	color: #40454A;
	font-family: 'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,sans-serif;
}

pre .extra {
	display: inline-block;
	position: absolute;
	left: 0rem;
	top: 1rem;
	font-size: 2rem;
	color: #40454A;font-weight:bold;
	transform: rotate(-45deg);
}


/* ############################################################ */
/*  speziell*/
/* ############################################################ */


.container_haupt {
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

.wrapper {
	margin: 0 auto;
	width: 100%;
	padding: 0rem;
}

/* bilder  anpassen der grösse  */
/* wenn sie eigene einzelne bilder einbauen, unabhängig von unserem bilderstystem,
 dann werden diese bilder maximal (max-width) so gross wie die original-abmessungen des bildes
 bwz. des umschliessenden containers wenn vorhanden */

img {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* wrapper homepagename  */
.wrapper-name {
	position: absolute;
	width: 30rem;
	height: 18rem;
	z-index: 0;
	left: 50%;
	top: 70%;
	margin-left: -15rem;
	margin-top: -9rem;
	display: table;
}

/* homepagename  */
.name {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	text-align: center;
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: .1rem;
	color: #ff0;
	padding: 1rem .5rem;
	text-transform: uppercase;
}

.name b {
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 2rem;
}

.wrapper-name.filter {background: rgba(0,0,0,.5);
}

.name:before {
	display: block;
	font-family: 'Font Awesome 5 Free';/* - 'Font Awesome 5 Free' for Regular and Solid symbols;
                                     - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 400;/*  Weight of the font (mandatory)
                     - 400 for Regular and Brands symbols;
                     - 900 for Solid symbols. */
	text-align: center;
	content: ' ---------------- \f005  \f005  \f005 ----------------  \A  ';
	white-space: pre;;
	color: #98A3AF;
	font-size: 1.4rem;
	letter-spacing: -1px;
}

.name:after {
	display: block;
	font-family: 'Font Awesome 5 Free';/* - 'Font Awesome 5 Free' for Regular and Solid symbols;
                                     - 'Font Awesome 5 Brands' for Brands symbols. */
	font-weight: 400;/*  Weight of the font (mandatory)
                     - 400 for Regular and Brands symbols;
                     - 900 for Solid symbols. */
	text-align: center;
	content: ' \A ---------------- \f005  \f005  \f005 ----------------   ';
	white-space: pre;
	color: #98A3AF;
	font-size: 1.4rem;
	letter-spacing: -1px;
}

/* ############################################################ */
/* bereich logo */
/* ############################################################ */

.section-logo {
	width: 100%;
	height: 100vh;
	position: relative;
	background: #EFEFEF;
	background-image: url(../images/logo03.jpg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

/* ############################################################ */
/* bereich content */
/* ############################################################ */

.section-content {
	width: 100%;
	color: #000;
	margin: 0;
	padding: 0;
}

.content {
	background: white;
	display: block;
	width: 100vw;
	min-height: 50vh;
	margin: 0 auto;
	text-align: left;
	padding: 6rem 3rem 5rem 3rem ;
}

/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/* BILDER IM INHALTSBEREICH - BILD-SYSTEM mit FLOAT */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/* hinweis: erklärt wird es hier im template auf der seite index4.html (quartus) */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */


/* = = = = =  */
/* BILD-SYSTEM  - mit FLOAT */
/* = = = = = */

.content  .box-text-re img ,
.content  .box-text-li img,
.content .box-mi {
	border: solid 3px #788696;
	box-shadow: 0 0  2px black;
}

/*  bild steht links, text fliesst rechts herum  */
.content  .box-text-re {
	float: none;
	padding: 0;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 3rem;
	margin-top: 3rem;
}

/*  bild steht rechts, text fliesst links herum  */
.content .box-text-li {
	float: none;
	padding: 0;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 3rem;
	margin-top: 3rem;
}

/*  bild steht alleine ohne text in der mitte  */
.content .box-mi {
	padding: 0;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 3rem;
	margin-top: 3rem;
}

/* ############################################################ */
/* bereich fusstop */
/* ############################################################ */

.section-fusstop {
	width: 100%;
	color: #DCE0E7;
	background: lightslategray;/* IE9*/
	background: radial-gradient(circle, #647484,#414B56 );
}

.fusstop {
	display: table;
	width: 100%;
	height: 20rem;
	margin: 0 auto;
	padding: 0;padding-bottom:2rem;
	font-size: 1.4rem;
}

.fusstop h3 {
	margin: 1rem 0;
	text-align: left;
	font-weight: bold;
	padding-right: 1rem;
	color: #DEE0E2;
	font-size: 1.4rem;
	border-bottom: dotted 1px #86A0BB;
	text-transform: uppercase;
}

.fusstopbox  {
	display: block;
	padding: 1rem 1rem 3rem 1rem ;
	text-align: left;
}

/*   kontakt  */

.fusstopbox .inhalt   {
	width: 28rem;
	padding: 0rem;
	margin: 0 auto;
}

.fusstopbox .inhalt ul {
	text-align: left;
	padding: 0rem;
	margin: 0;
}

.fusstopbox .inhalt  li {
	list-style: none;
	padding: 0rem;
	margin: 0;
}

/* ############################################################ */
/*  fusstop-menu */
/* ############################################################ */

/* allg. links, hier der email-link (infokontaktmustersohn@mail.de) */

.fusstop  a {
	text-align: left;
	text-decoration: none;
	font-size: 1.4rem;
	letter-spacing: 0rem;
	padding: .1rem;
	margin: .1rem 0;
	color: #DCE0E7;
}

.fusstop li a:hover {
	color: #fff ;
	text-decoration: underline;
}

/* das fusstop-menü */

.fusstop-menu {
	width: 28rem;
	margin: 0 auto;
	padding: 0;
}

.fusstop-menu ul {
	text-align: left;
	margin: 0;
	padding: 0;
}

.fusstop-menu li {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.fusstop-menu  a {
	text-align: left;
	text-decoration: none;
	font-size: 1.4rem;
	letter-spacing: 0rem;
	padding: .1rem ;
	margin: .1rem 0;
	color: #DCE0E7;
}

.fusstop-menu li a:hover {
	color: #fff ;
	text-decoration: underline;
	background: transparent;
}

/* ############################################################ */
/* bereich fuss */
/* ############################################################ */


.section-fuss {
	position: relative;
	width: 100%;
	background: #5D6C7B;/* IE9*/
	background: linear-gradient(to bottom, #5D6C7B,#000 );
	box-shadow: 0 0  1px black;
}

.fuss {
	display: table;
	margin: 0rem auto;
	text-align: center;
	padding: 1rem;
	width: 100%;
	height: 4rem;
}

.fussbox-1a  {
	display: table-cell;
	vertical-align: middle;text-align:center;
	text-align: center;
	padding: 0rem 0rem;
	font-size: 1.6rem;
	line-height: 1.9rem;
}

/* fussname */
.fussname {
	display: block;
	font-family: 'robotolight';
	text-align: center;
	padding: .6rem;
	font-size: 1.2rem;
	line-height: 1.5rem;
	letter-spacing: 0.2rem;
	color: #B8C0C9;
}

/* ############################################################ */
/* M E D I A   Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN*/
/* ############################################################ */

/* ==================================== ab 320 pixel ================================== */


/* - - - - -  nur info - - - - - */
/*  für die kleinste smartphone-auflösung von 320pixel benötigen wir KEINE bildschirmabragen (media queries), denn hierfür gilt ja automtisch der gesamte vorstehende quelltext-code - weil wir das template ja 'mobile-first' angelegt haben */



/* ==================================== ab 360 pixel ================================== */

@media (min-width: 360px) {

/* keine angabe */

.section-logo {
	height: 36rem;
}


}


/* ==================================== ab 400 pixel ================================== */

@media (min-width: 400px) {

.content,  .fuss {
	width: 90vw;
}

.section-logo {
	height: 32rem;
}


}


/* ==================================== ab 480 pixel ================================== */

@media (min-width: 480px) {

.section-logo {
	height: 36rem;
}

/* - - - - -   BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */
.content  .box-text-re {
	width: 70%;
}

.content .box-text-li{
	width: 70%;
}

.content .box-mi{
	width: 70%;
}
/* - - - - - ende  BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */

.fussmenu li {
	display: inline;
}


}


/* ==================================== ab 600 pixel ================================== */
@media (min-width: 600px) {

/* keine angabe */


}


/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {

/* keine angabe */


}


/* ==================================== ab 768 pixel ================================== */
@media (min-width: 768px) {

html {font-size: 70%;}

.content,  .fusstop, .fuss  {
	width: 96vw;
}

.section-logo {
	height: 38rem;
}

.content {
	text-align: justify;
}

/* - - - - - BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */
.content  .box-text-re {
	width: 30%;
	float: left;
	text-align: justify;
	margin-right: 2rem;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.content .box-text-li {
	width: 30%;
	float: right;
	text-align: justify;
	margin-left: 2rem;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.content .box-mi{
	width: 40%;
}
/* - - - - - ende  BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */


.fusstop , .fusstop a {font-size: 1.4rem;
}

.fusstop-menu {width: auto;
}

.fusstop-menu a {font-size: 1.4rem;
}

.fusstopbox {
	width: 33.33%;
	display: table-cell;
	vertical-align: top;
}

.fusstopbox .inhalt  {width:auto;
}


}


/* ==================================== ab 800 pixel ================================== */

@media (min-width: 800px) {

/* keine angabe */


}


/* ===================================== ab 1024 pixel ================================= */

@media (min-width: 1024px) {

/* wrapper homepagename  */
.wrapper-name {
	margin-top: -7.5rem;
}

/* - - - - -  BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */
.content  .box-text-re {
	margin-right: 3rem;
	margin-bottom: 2rem;
	margin-top: 2rem;
}

.content .box-text-li {
	margin-left: 3rem;
	margin-bottom: 2rem;
	margin-top: 2rem;
}
/* - - - - - ende  BILDER IM INHALTSBEREICH - mit FLOAT - - - - - */



}


/* ===================================== ab 1100 pixel ================================= */

@media (min-width: 1100px) {

html {
font-size: 75%;
}

.content,  .fusstop, .fuss  {
width: 93vw;
}

pre {width: 50vw;
}


}


/* ===================================== ab 1300 pixel ================================= */

@media (min-width: 1300px) {

.content, .fusstop, .fuss {
	width: 90vw;
}


}


/* ===================================== ab 1400 pixel ================================= */

@media (min-width: 1400px) {

html {
	font-size: 80%;
}


.content, .fusstop, .fuss {
	width: 86vw;
}



}


/* +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  + */