/*---------------------------------------------------
	CSS - Alte Startseite mit neuer mobilen Version
-----------------------------------------------------*/
/* Nur HTML Datei fuer Starseite und Update */
/* Schriftart fuer Footer, Google Fonts | Motto | Lema - Choose one ;) */
@import url('https://fonts.googleapis.com/css?family=Stardos+Stencil|Bangers|Courgette|Dancing+Script|Great+Vibes|Kaushan+Script|Lobster|Lobster+Two|Pacifico|Permanent+Marker|Satisfy|Montserrat|Cinzel|Bebas+Neue|Merriweather|Josefin+Sans|Arvo&display=swap');
/*------------- 
	Allgemein 
---------------*/
/* override browser default */
html,body {margin: 0px; padding: 0px;}
/* use viewport-relative units to cover page fully */
body {height: 100vh; width: 100vw;}
/* include border and padding in element width and height */
* {box-sizing: border-box;}
/* full-sized  container that fills up the page */
div.old_wrapper {
	height: 100%; 
	width: 100%;
	/*padding: 10px;*/
	padding-top: /*42*/24px; 
	background-color: rgba(255, 133, 27, 1);	/* (d1) Neon Carrot | Orange*/ 
	/*background-color:rgba(255, 65, 54, 1);*/	/* (e1) Red Orange | Red */	
	/*background-color:rgba(51, 51, 102, 1);*/	/* (d2) Rhino */
	/*background-color:rgba(0, 51, 51, 1);*/	/* (e2) Teal */
	/*background-color: lightskyblue;*/
	/*background-image: linear-gradient(135deg, rgba(17,17,17,1) 0%, rgba(255,65,54,1) 11%, rgba(255, 133, 27, 1) 22%);*/
}
/* example padding, font-size, background, etc */ /*padding: 10px; font-size: 20px;*/ 
/*background-color: purple/indigo testing purposes | old wrapper not taking full height..*/ 
/*html,body {
	text-align: center; 
	margin: 0px; 
	padding: 0px; 
	height: 100%; 
	width: 100%;
	border: none; 
	background-color: rgba(255, 133, 27, 1)indigo;
	-----
    min-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px !important;
    overflow-x: hidden;	
}*/
/* Update */
body.bg {text-align: center; margin: 0px; padding: 0px; height: 100%; width: 100%; border: none; background-color: rgba(255, 133, 27, 1)/*indigo;*/}
#wrapper {width: 80%; margin: auto; max-width: 1200px; min-width: 800px; text-align: center;}
/* Startseite */	
/* Fuer Desktop Version */
/* Abstand nach oben (padding anstelle von margin um scrollbar nicht zu sehen). Abstand nach oben verringern wegen Lema. Nach Rotation von Lema scrollbar zu sehen. Overflow schneidet aber Text ab. Breite vom Containetext reduzieren. */	
/*.old_wrapper {padding-top: 42px; background-image: linear-gradient(135deg, rgba(17,17,17,1) 0%, rgba(255,65,54,1) 11%, rgba(255, 133, 27, 1) 22%);}*/
/*overflow: hidden; min-height: 100%;*/	
/* Startseite */
/* Fuer mobile Version */
.new_wrapper {display: none; background-image: linear-gradient(180deg, rgba(17,17,17, 1) 0%, rgba(255,65,54, 1) 80%);} 
/*
background: rgb(17,17,17);
background: linear-gradient(180deg, rgba(17,17,17,1) 0%, rgba(255,65,54,1) 100%);
*/
/* For Sleipnir /// very small screens */
.sleipnir {display: none;}
/*---------- 
	Bilder 
------------*/
/* Automatisch anpassbar an Groesse, wenn Browser kleiner als Bild ist */
img {max-width: 100%; height: auto; width: auto\9; vertical-align: top; display: block; margin: auto;} /* Display block, damit die Bilder im vertical align nicht aus der Reihe tanzen und margin auto um beim responsive design mittig zu bleiben */
a img {border: 0 none transparent;} /* Kein Rahmen fuer Bilder */
img.teddy {margin-bottom: 25px;} /* Abstand fuer Hauptbild */
/*--------------	
	Schriftart
----------------*/
/* Ueberschrift */
h1 {font-family: 'Stardos Stencil', cursive; font-style: normal; font-weight: 400; font-size: 52px; text-transform: none; text-decoration: none; letter-spacing: 0em; word-spacing: 0em; line-height: 1.4; padding: 25px 15px; margin: 0;}
/* Normaler Text */
p {font-family: 'Muli', sans-serif; font-style: normal;	font-weight: 400; font-size: 14px; text-transform: none; text-decoration: none; letter-spacing: 0em; word-spacing: 0em; line-height: 1.4; padding: 5px 15px; margin: 0;}
/* Lema */
p.hlvs {font-family: 'Great Vibes', cursive; font-size: 30px; color: rgba(255, 255, 255, 0.9); /*background: lightgreen;*/}
/* Rotate Lema for cooler look ;) (for big screens only) */
.rotate {transform: rotate(-11deg);}
/* Text in Footer (Copyright) *//* MV */
p.cr {font-family: 'Stardos Stencil', cursive; font-size: 11px; text-transform: uppercase; color: rgba(255, 65, 54, 1);}
/* Footer | Follow */	
p.dsl4 {font-family: 'Kaushan Script', cursive; font-size: 19px; color: rgba(255, 255, 255, 0.8)/*#fff*/;  margin: 0px; padding: 0px;/*margin-bottom: 10px;*/} 
/* Footer | Hashtags */	
p.dsl5 {font-family: 'Permanent Marker', cursive; font-size: 16px; color: rgba(255, 255, 255, 0.8); margin: 0px; padding: 0px;}
/*----------
	Andere
------------*/
/* Table properties */
/* Languages & Logo *//* Copyright */
table {margin-left: auto; margin-right: auto; margin-top: 3px;}
/* cellpadding */
th, td {padding: 0px;}
/* cellspacing */
table { border-collapse: collapse; border-spacing: 0;} /* cellspacing="0" */
/* valign */
th, td { vertical-align: top;}
/* Boxes */
/* For optic visualization *******************/
table tr td.d0wn {/*background-color: white;*/} 													
/* Aligning language boxes to main picture ***/
table tr td.down {vertical-align: bottom;/*background-color: olive;*/} 
/* For optic visualization *******************/
table tr td.size0 {/*background-color: navy;*/}/*599+55=654*/				
table tr td.size00 {width: 11px;/*background-color: gold-lightskyblue*/}
/* Sizing boxes to met size of picture *******//* No copyright in picture anymore ***********/
table tr td.size1 {width: 55px;/*background-color: maroon;*//*font-size: 10px; line-height: 0.9;*/}	
/*set rgba white color*//*width="654" height="334" of logo unten2*/
table tr td.size2 {width: 599px; background-color: rgba(0, 0, 0, 1)/*fuchsia*/; font-size: 10px; line-height: 0.9; border-top: 1px solid rgba(0, 0, 0, 1); border-bottom: 1px solid rgba(0, 0, 0, 1); font-family: 'Kaushan Script', cursive; text-transform: uppercase; text-align: left; padding: 0px 0px 0px 5px; color: rgba(255, 255, 255, 1);}
table tr td.size3 {width: 11px;/*background-color: gold;*/}
/* Used in (all) last cells */
table tr td.size4 {width: 111px;/*background-color: silver;*/}
/*width image black 599 | spce before 55 */
table tr td.size11 {width: 55px;/*background-color: lightskyblue;*/}	
table tr td.size22 {width: 599px; height: 105px;/*background-color: indigo*/; text-align: center; vertical-align: middle;}
table tr td.size33 {width: 11px;/*background-color: silver;*/}
table tr td.size44 {width: 111px;/*background-color: gold;*/}
table tr td.size5 {height: 5px; width: 111px;/*background-color: indigo;*/}
table tr td.size41 {width: 111px;/*background-color: silverred*/; text-align: right;}
/* Exact size 177px (three icons and three paddings.. add some more for better visual effect */
table tr td.size42 {height: 190px; width: 111px;/*background-color: silverblue*/; /*text-align: right;*/}
table tr td.size43 {width: 111px;/*background-color: silvergreen*/; text-align: right;}
/* End table */
/*--------------
	MV version
----------------*/
/* Logo size h:345 w:317 */
/* Adding width and shadows of logo */
.width {padding: 11px 23px 28px 7px; max-width: 411px; height: 411px;/*background-color: #00a170;*/margin: 0px auto;}
/* Logo container ****************************/
.logo {display: block; width: 100%; height: 100%; background-image: url(/img/logo/mata_wappenpage.jpg); background-repeat: no-repeat; background-position: 50% 25%; background-color: rgba(253, 253, 253, 1); border-width: 7px; border-style: solid; border-color: rgba(153, 153, 153, 1); border-radius: 50% 50% 50% 50% / 12% 12% 88% 88%; box-shadow: 5px 10px rgba(17, 17, 17, 1);} 
/* Languages container */
.lng_wrapper {padding: 10px 0px 17px 0px; width: 100%; height: 100%;/*background-color: #b55a30;*/} 
/* Languages container former German Image & Spanish Image */
span.d, span.e {display: inline-flex; justify-content: center; align-items:center; height: 140px; width: 140px; margin: 0px 23px; background-color: rgba(0, 51, 51, 1);	border-width: 7px; border-style: solid; border-color: rgba(153, 153, 153, 1); border-radius: 50%; font-family:  'Bebas Neue', cursive; font-size: 47px; box-shadow: 5px 10px rgba(17, 17, 17, 1); text-shadow: 2px 2px rgba(17, 17, 17, 1);} 
/* Change on hover */	
span.d:hover, span.e:hover {background-color: rgba(17, 17, 17, 1); border-color: rgba(102, 153, 153, 1);}
/* SVG Curved Lema | Shadow Lema */
#curva {width: /*80*/85%; height:50%; margin: 0px auto;/*background-color: indigo;*/}
path {fill: transparent;}
text {font-family: 'Bebas Neue', cursive; font-size: 47px; fill: rgba(255, 255, 255, 0.7); text-shadow: 2px 23px rgba(255, 0, 0, 0.7);}
/* 
	Social Media Icons /// RED (MV)
*/	
#social 	{width: 100%; height: 54px; /*margin: 0px auto 15px auto;*//*background-color: maroon;*/} 
ul.social 								{display:inline-block; margin: 0px; padding: 0px; list-style: none;}
ul.social li 							{padding: 0px; margin: 0px; height: 54px; margin-right: 15px; list-style: none; background-repeat: no-repeat; }
ul.social li:last-child 				{margin-right: 0px;}
ul.social li a, ul.social li a:visited 	{display: block; text-decoration: none; text-indent: -9999px; height: 54px; background-repeat: no-repeat;}
ul.social li a:hover 					{background: none;}
ul.social li 							{float: left;}
ul.social:after 						{content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/* !!! important change on other sites /// circle without white ;) here for bigger ///	adding background-color: rgba(255, 65, 54, 1); to a :) */
/* Facebook *//* On hover */
.fb 	{background-image: url(/img/social/fb/facebook_esp.png); width: 54px;} 	
.fb a 	{background-image: url(/img/social/fb/facebook_es.png);}					
/* Instagram *//* On hover */
.ig 	{background-image: url(/img/social/ig/instagram_esp.png); width: 54px;} 	
.ig a 	{background-image: url(/img/social/ig/instagram_es.png);}					
/* Youtube *//* On hover */
.yt 	{background-image: url(/img/social/yt/youtube_esp.png); width: 54px;} 		
.yt a 	{background-image: url(/img/social/yt/youtube_es.png);}	
/* 
	Social Media Icons /// ORANGE (DV) 
*/	
/* For right positioning, float right ul li and paddin-left container */
#social_m {padding-left: 11px;/*width: 100%; height: 54px;*/ /*margin: 0px auto 15px auto;*//*background-color: purple;*/} 
ul.social_m {display: block; margin: 0px; padding: 0px; list-style: none;}
ul.social_m li {float: right; padding: 0px; margin: 0px; height: 54px; margin-top: 5px; list-style: none; background-repeat: no-repeat;}
ul.social_m li:last-child {margin-right: 0px;}
ul.social_m li a, ul.social_m li a:visited {display: block; text-decoration: none; text-indent: -9999px; height: 54px; background-repeat: no-repeat;}
ul.social_m li a:hover {background: none;}
ul.social_m:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/* Facebook *//* On hover */
.faceb 		{background-image: url(/img/social/fb/facebook_deu.png); width: 54px;} 	
.faceb a 	{background-image: url(/img/social/fb/facebook_de.png);}					
/* Instagram *//* On hover */
.instag 	{background-image: url(/img/social/ig/instagram_deu.png); width: 54px;} 	
.instag a 	{background-image: url(/img/social/ig/instagram_de.png);}					
/* Youtube *//* On hover */
.yout 	{background-image: url(/img/social/yt/youtube_deu.png); width: 54px;} 		
.yout a 	{background-image: url(/img/social/yt/youtube_de.png);}	
/* Hashtags(sss)... */
#boo2ight {padding: 15px 0px;/*background-color: #00a170;*/}
/* Copyright */
#booright {margin-bottom: 0px; padding: 25px 0px 15px 0px; background-color: rgba(17, 17, 17, 1);}
/*-------------------------
	Magic happens here ;)
---------------------------*/
@media screen and (max-width: 960px) {
	div.old_wrapper {background-image: none; background-color: rgba(255, 133, 27, 1);}
	.rotate {transform: rotate(0deg);}
}
@media screen and (max-width: 800px) {
	#wrapper {width: 90%; min-width: 0;}
	h1 {font-size: 21px;}
}
@media screen and (max-width: 768px) {					
	/* Desktop version disappears */
	div.old_wrapper {display: none;} 													
	/* Mobile version In */
	.new_wrapper {display: block;/*background-image: none;background-color: gold;*/} 	
	body {text-align: center; margin: 0px; padding: 0px; height: 100%; width: 100%;	border: none; /*background-color: indigo;*/}
	* {box-sizing: content-box;}
	/* LINKS /// Links, Visited, Active & Hover */
	a:link, a:visited, a:active {text-decoration: none; color: rgba(255, 255, 255, 0.9);} 																						
	a:hover 					{text-decoration: underline; color: rgba(255, 65, 54, 0.9);}
}
/* Samsung Galaxy J1 Responsive Test. Description: Samsung's Galaxy J1 has display size of 480 pixels by 800 pixels. */
@media screen and (max-width: 420px) {
	/* For IE */
	/*.new_wrapper {background-color: silver;}*/
	.width {max-width: 355px; height: 355px;}
	.logo {background-image: url(/img/logo/mata_wappenpage-mv.jpg);}	
	span.d, span.e {height: 111px; width: 111px; margin: 0px 23px; font-size: 36px; margin: 0px 11px;}
	#curva {margin-bottom: 11px;}
}
@media screen and (max-width: 320px) {
	/* For Sleipnir */
	.new_wrapper {background-image: linear-gradient(180deg, rgba(17,17,17,1) 23%, rgba(255,65,54,1) 70%);/*background-color: #cd7f32;*//*background-image: none;*/}/* #CD7F32 --> Bronce */
	span.d, span.e {margin: 0px 0px;}
	span.d {margin: 0px 7px 7px 7px;}
	span.e {margin: 7px 7px 0px 7px;}
	.width {display: none;}
	.logo {display:none;} 
	.sleipnir {display: block; padding: 11px 1px;}
}
/* Finito ;) */