@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/RobotoCondensed-Light.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ENDE FONTS */

/* GLOBAL SETTING */

*
{

	margin:0px;	

	padding:0px;

	font-family: 'Roboto Condensed';

	position:relative;

	box-sizing:border-box;
}


html,body
{
	height:100%;
}

body 
{
	background:white;
	font-family: sans-serif;
	color:black;
	margin:0px;
}

img
{
	max-width:100%;
	height:auto;
}
a
{
	color:#a0a09f;
	text-decoration:none;
	transition:.3s;
}

a:hover
{
	color:#606060;
}
h4
{
	color:#a0a09f;
}

/* MAMA */
#mama
{
	width:100%;
	height: 100%;
	_background: blue;
}
/*  ANFANG HEADER */
#header
{
	min-height:264px;
	_background: yellow;
	border-bottom:solid 3px #BADA55;
}
#logo
{
	width:400px;
	min-height:212px;
	_background: black;
	top:20px;
	margin:auto;
}
#imagelogo
{
	height:50px;
	width:103px;
	margin:auto;
}
#logotext
{
	min-height:155px;
	_background: red;
	text-align:center;
	padding:15px;
}
#logotext h1
{
	font-size:220%;
	color:#2f2e2e;
}
#logotext h2
{
	font-size:199%;
	color:#a0a09f;
}
#logotext h3
{
	font-size:151%;
	color:#ccc;
}

#navi
{
	width:70%;
	height:40px;
	_background:grey;
	margin:auto;
	display:flex;
	top:8px;
}
.navipunkt
{
	width:33%;
	height:40px;
	background: white;
	margin:auto;
	text-align:center;
	line-height:50px;
	transition:.6s;
}
.navipunkt a
{
	color:#adcb4c;
}
#lineamitte
{
	border-left: solid 1px #BADA55;
	border-right: solid 1px #BADA55;
}

.navipunkt:hover a
{
	color:#a0a09f;
}
#sub
{
	width: 33%;	
	transition:.5s;
	background:rgba(255,255,255,.6);
	height:40px;
	overflow:hidden;
	z-index:200;
	color:#a0a09f;
}
#sub:hover
{
	height:118px;
	color:#a0a09f;
	border-bottom:solid 2px #BADA55;
}
#submain a:hover
{
	color:#a0a09f;
}
.navipunkt .current
{
	color:#2f2e2e;
}

.unterpunkt
{
	height:28px;
	_border-bottom: solid 1px #ccc;
	line-height:16px;
	padding-top:7px;
	color: #a0a09f;
	z-index:210;
	
}
.unterpunkt a
{
	color:#a0a09f;
}
.unterpunkt a:hover
{
	color:#adcb4c;
	text-decoration:underline;
}


#submobile
{
	display:none;
}



/*  ENDE HEADER */
/*  ANFANG CONTENT */
#mitte
{
	min-height:700px;
	_background:pink;
	max-width:1150px;
	margin:auto;
}
.button
{
	width:288px;
	height:40px;
	text-align:center;
	line-height:40px;
	border: solid 2px #BADA55;
	margin:auto;
	box-shadow:2px 2px 3px #ccc;
	color:#a0a09f;
	margin-top:90px;
	margin-bottom:15px;
	display:block;

}
.button:hover
{
	border: solid 2px #ccc;
	color:#ccc;
}
.reel
{
	height:auto;
	_background:blue;	
	display:flex;
	margin:auto;
}
.imagefront
{
	height:330px;
	_background: green;
	width:210px;
	margin:0px auto;
	
}
.imagefront img
{
	max-width: 100%;
	height:auto;
	display:block;
	margin:auto;
	transition: 0.2s;
}
.imagefront a:hover{
	opacity: 0.6;
}

@supports(object-fit: cover)
{.imagefront img
{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}
#reelillust
{
	margin-bottom:120px;
}

/*jquery classes*/
.appearlast{
	opacity: .0;
	transition:0.2s;
}

.platz0
{
	height:15px;
}

/*  ENDE CONTENT */
/*  ANFANG FOOTER */

#footer
{
	position: relative;
	min-height:170px;
	background: rgba(186,218,85,.6);
	padding:30px;
	margin:auto;
	margin-bottom: 0px;
	display:flex;
}
.footerspace
{
	min-height:100px;
	width:18%;
	_background:yellow;
}
#tidy
{
	width:8%;
	line-height:20px;
	padding-top:5px;
	margin-right:10px;
	
}
#footertext
{
	width:60%;
	min-height:100px;
	text-align:left;
	color:#a0a09f;
}
#footertext a
{
	text-decoration:underline;
}
#socialicons
{
	height:80px;
	width: 100px;
	_background: blue;
	display:flex;
	margin-left:50px;
}
.socialbutt
{
	height:40px;
	width:40px;
	_background:red;
	margin:0px 5px 10px;
	opacity:0.6;
	transition:.3s;
}
.socialbutt:hover
{
	opacity:0.4;
}

/*  ENDE FOOTER */




/*  ANFANG seite ABOUT */
.pagetitle
{
	height:50px;
	width:30%;
	_background:blue;
	color:#2f2e2e;
	margin: auto;
	margin-top: 90px;
	margin-bottom: 20px;
	text-align:center;
	font-size: 170%;
}
#contentabout
{
	width:80%;
	height:auto;
	_background: purple;
	margin:auto;
	display:flex;
}
.imagefront2
{
	height:auto;
	_background: green;
	width:190px;
	margin:5px auto;
}
#cajatexto
{ 
	width:52%;
	height:auto;
	margin-right:20px;
	line-height:19px;
	letter-spacing: 0.8px;
	display:block;
}
.platzab
{
	height:30px;
}
.platzab2
{
	height:100px;
}
.textabout1
{
	margin-bottom:20px;
}
.textabout2
{
	margin-top: 30px;
	margin-bottom:20px;
}
.textabout2 a{
	text-decoration: underline;
	line-height: 23px;
}
ul{
	list-style: none;
}
#abouti{
	opacity:0;
}

/*  ENDE seite ABOUT */


/*  ANFANG seite CONTACT */
.contactito{
	height:700px;
}
.platz
{
	height:100px;
	_background:grey;
}
#platzunten
{
	height:80px;
}

#textcontact
{
	width:30%;
	height: 0px;
	background: rgba(186,218,85,.1);
	color: #a0a09f;
	margin:auto;
	text-align:center;
	padding:0px;
	border-top: solid 2px #BADA55;
	border-bottom: solid 2px #BADA55;
	overflow: hidden;
}
#textcontact h2
{
	font-size:250%;
	top: 20px;
}
.tamanio1
{
	font-size:70%;
	
}
#contenttext1
{
	line-height:70px;
}
#mailcontact
{
	width:40%;
	min-height:80px;
	margin:auto;
	color:#BADA55;
	font-size:150%;
	_background:pink;
	text-align:center;
	top:-20px;

}
#mailcontact a
{
	color:#BADA55;
	opacity: 0;
}
#mailcontact a:hover
{
	color:#606060;
}
#tel{
	opacity:0;
	font-size: 20px;
}



/*  ENDE seite CONTACT */



/*  ANFANG seite IMPRESSUM */
.impressum
{
	width:70%;
	padding:50px;
	margin:auto;
	margin-bottom:30px;
	margin-top:30px;
}
.impressum h3
{
	margin-top: 20px;
}

/*  ENDE seite IMPRESSUM */

/*  ANFANG seite DATENSCHUTZ */
.uldaten
{
	margin:10px;
	margin-left:15px;
	line-height:20px;
}
#quelle
{
	font-size:80%;
	margin-top:30px;
}

/*  ENDE seite DATENSCHUTZ */


/* ANFANG seite COORDINATION */
#mittecoordi
{
	width:55%;
	min-height: 1200px;
	margin:auto;
	_background: grey;
	margin-bottom: 50px;
}
#mittecoordi2
{
	width:55%;
	min-height: 800px;
	margin:auto;
	_background: grey;
}
.pagetitlecoord
{
	color:#2f2e2e;
	margin: auto;
	margin-top: 90px;
	margin-bottom: 20px;
	text-align:center;
	width:98%;
	height:50px;
	font-size: 170%;
	display:flex;
	_background:blue;

}
.pagetitlecoord h4
{
	width:90%;
	padding-right:0px;
}
.coordibutton
{
	top: -5px;
	padding-left:0px;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	border: solid 2px #BADA55;
	margin-left:10px;
	box-shadow:2px 2px 3px #ccc;
	color:#a0a09f;	
}

.gallery{ 
  display: grid; 
  grid-template-columns: repeat(3, 35%);
  grid-column-gap: 20px;
  grid-template-rows: repeat(7, 14%);
  grid-row-gap: 20px;
  justify-content: center;
  margin-top: 20px;
}
.galleryillu{ 
  display: grid; 
  grid-template-columns: repeat(3, 35%);
  grid-column-gap: 20px;
  grid-template-rows: repeat(4, 25%);
  grid-row-gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

.imagencita{
	transition:0.5s;
}
.imagencita:hover{
	opacity: 0.7;
}
.datita{
	background-color: rgb(240 240 240);
	padding: 10px;
	height: 210px;
	border-left: solid 2px #BADA55;
}
.datita h3{
	font-size: 19px;
}
.datita p{
	margin-top: 10px;
	line-height: 20px;
	font-size: 15px;
}
.datita a{
	color: rgb(30 30 30);
}
.linki{
	margin-top: 10px;
}
.linki a{
	color: grey;
	text-decoration: underline;

}
.linki a:hover{
	color: #a0a09f;
	text-decoration: underline;
}
.platz2
{
	height:50px;
	_background:grey;
}

/* ENDE seite COORDINATION */

/* MEDIA QUERY */
@media screen and (max-width:1200px) 
{
/*ANFANG MENU MOBILE*/
#header
{
	min-height:256px;
}
#navi
{
	width:100%;
	height:30px;
	margin:auto;
	display:flex;
	top:0px;
}
#sub
{
	display:none;
}
#submobile
{
	width: 33%;	
	transition:.6s;
	background:rgba(255,255,255,.6);
	height:40px;
	overflow:hidden;
	z-index:200;
	color:#a0a09f;
	display:block;
}
#submobile:hover
{
	height:120px;
	color:#a0a09f;
	border-bottom:solid 2px #BADA55;
}

#submainmobile a:hover
{
	color:#a0a09f;
}

.unterpunkt
{
	height:30px;

}

/*ENDE MENU MOBILE*/
#mittecoordi
{
	width:80%;
	min-height: 1200px;
	margin:auto;
	_background: grey;
}
#mittecoordi2
{
	width:80%;
	min-height: 800px;
	margin:auto;
	_background: grey;
}
.galerie_navi
{ 
	width:40%;
	min-height:50px;
	margin-left:30px;
	margin-right:0px;
	_background:blue;
	float:left;
}
.galerie_navi img
{
width:28%;
height:auto;

}

.galerie
{
	border:solid 1px #BADA55;
	max-width:60%;
	margin:auto;
	_background:yellow;
	padding:4px;
	min-height:200px;
	float:left;
}
#info
{
padding-top: 10px;
text-align:center;
padding-bottom: 10px;
background: rgba(0,0,0,.1);
}
#platzcoordi
{
clear:both;
}

	
}

/* MEDIA QUERY */
@media screen and (max-width:800px) 
{
.contactito{
	height:800px;
}
#textcontact
{
	margin-top: 40px;
	width:50%;
}

/*from About Seite*/
.pagetitle
{
	width:50%;
	height:30px;
	font-size: 160%;
	margin:auto;
	margin-top: 80px;
	margin-bottom:20px;
}
.imagefront2
{
	height:auto;
	_background: green;
	width:190px;
	margin:-45px auto;
}
#cajatexto
{ 
	width:53%;
	height:auto;
	margin-right:20px;
	line-height:18px;
	display:block;
}

}
/* MEDIA QUERY */
@media screen and (max-width:680px) 
{ 
#header
{
	min-height:213px;
}
	#logo
{
	width:90vw;
	min-height:170px;
}
#imagelogo
{
	height:35px;
	width:80px;
}
#logotext
{
	min-height:120px;
}
#logotext h1
{
	font-size:178%;
}
#logotext h2
{
	font-size:162%;
}
#logotext h3
{
	font-size:123%;
}


.button
{
	width:250px;
	height:40px;
}

.reel
{
	width:100%;
	max-height: 250px;
}
.imagefront
{
	max-height:250px;
	width: 20%;
}

#footer
{

	padding:20px;
	display:flex;
}
.footerspace
{
	width:0%;
}
#tidy
{
	width:15%;
	line-height:20px;
	padding-top:5px;
	margin-right:5px;
	
}
#footertext
{
	width:70%;
	font-size: 90%;
}
#socialicons
{
	height:70px;
	width: 50px;
	margin-left:10px;
	display:block;
}
.socialbutt
{
	height:35px;
	width:35px;
}


/*  ANFANG seite ABOUT */
.pagetitle
{
	height:50px;
	width:80%;
	_background:blue;
	color:#2f2e2e;
	margin: auto;
	margin-top: 90px;
	margin-bottom: 20px;
	text-align:left;
	font-size: 200%;
}
#contentabout
{
	width:90%;
	display:block;
	height:auto;
}
.imagefront2
{
	height:auto;
	width: 35%;
	min-width:150px;
	margin-top: 20px;
	margin-left:5%;
}
.platzab
{
	height:60px;
}
#cajatexto
{ 
	width:90%;
	height:auto;
	margin:auto;
	margin-top:100px;
	line-height:18px;
	text-align:left;
}
ul{
	list-style: none;
}

/*  ENDE seite ABOUT */



/*  ANFANG seite CONTACT */
.contactito{
	height:600px;
}
.platz
{
	height:100px;
}
#platzunten
{
	height:40px;
}
#textcontact
{
	width:80%;
	height: 0px;
	margin:auto;
	text-align:center;
	padding:0px;
	overflow: hidden;
}

#textcontact h2
{
	font-size:230%;
}
#mailcontact
{
	width:98%;
	min-height:30px;
	font-size:130%;
	text-align:center;
	top:0px;
}



/*  ENDE seite CONTACT */



/*  ANFANG seite IMPRESSUM */
.impressum
{
	width:90%;
	padding:0px;
	margin-bottom:30px;
	margin-top:50px;
}

/*  ENDE seite IMPRESSUM */

/* ANFANG seite COORDINATION */
#mittecoordi
{
	width:100%;
	height: auto;
	min-height: 1900px;
	margin:auto;
	margin-bottom: 10px;
	_background:pink;
	display:block;
}
#mittecoordi2
{
	width:100%;
	height: auto;
	min-height: 1000px;
	margin:auto;
	margin-bottom: 10px;
	_background:pink;
	display:block;
}
.pagetitlecoord
{
	width:90%;
}
.pagetitlecoord h4
{
	width:70%;
	margin-left:20px;
}

#info
{
	font-size:85%;
}

}
/* MEDIA QUERY */
@media screen and (max-width:900px) 
{
	#mittecoordi2
{
	height: auto;
	min-height: 2200px;
}
.gallery	{
  grid-template-columns: repeat(2, 45%);
  grid-column-gap: 20px;
  grid-template-rows: repeat(10, 9.7%);
  grid-row-gap: 20px;
}
	.galleryillu{ 
  grid-template-columns: repeat(2, 45%);
  grid-column-gap: 20px;
  grid-template-rows: repeat(5, 20%);
  grid-row-gap: 20px;
}
.datita p{
	font-size: 13px;
}
}

/* MEDIA QUERY */
@media screen and (max-width:500px) 
{

.gallery{ 
  display: grid; 
  grid-template-columns: repeat(1, 65%);
  grid-column-gap: 20px;
  grid-template-rows: repeat(20, 4.7%);
  grid-row-gap: 30px;
  margin:auto;
  margin-top: 20px;
}
.galleryillu{ 
  display: grid; 
  grid-template-columns: repeat(1, 60%);
  grid-column-gap: 20px;
  grid-template-rows: repeat(10, 9.5%);
  grid-row-gap: 45px;
  margin:auto;
  margin-top: 20px;
}
}

@media screen and (max-width:330px) 
{
	#mittecoordi2
{
	height: auto;
	min-height: 2600px;
}

.gallery{ 
  display: grid; 
  grid-template-columns: repeat(1, 85%);
  grid-column-gap: 20px;
  grid-template-rows: repeat(20, 4.7%);
  grid-row-gap: 30px;
  margin:auto;
  margin-top: 20px;
}
.galleryillu{ 
  display: grid; 
  grid-template-columns: repeat(1, 85%);
  grid-column-gap: 20px;
  grid-template-rows: repeat(10, 9.5%);
  grid-row-gap: 40px;
  margin:auto;
  margin-top: 20px;
}
}
/* ENDE seite COORDINATION */