/***********************************
Datei: template-mobile.css CSS 
URL: www.isup-gbr.de
************************************
Copyright: www.Sabine-Kemper.de
Start: 21.02.2023
Letzte Aenderung: 21.02.2023
***********************************/


/* 
###############################################################
Schriften #
###############################################################
*/

@media screen and (max-width: 50em){

h1 {
  font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  clear: both;
  font-size: 120%;
  font-weight:bold;
  margin: 0.5em 0 0.5em 0;
  color:#666;
  line-height:1.3em; 
  text-align:left;
}
h2 {
  font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  clear: both;
  font-size: 110%;
  font-weight:bold;
  margin: 0.5em 0 0.5em 0;
  color:#666;
  line-height:1.3em; 
  text-align:left;
}
}


/* 
###############################################################
geruest #
###############################################################
*/

@media screen and (max-width: 90em){
	#logo {
	float:left;
    max-width: 25%;
    padding: 1% 1% 0 1%;
}
#icons {
    width: 30%;
}
}

@media screen and (max-width: 42em){
	#logo {
	float:left;
    max-width: 30%;
}
#icons {
    width: 40%;
    padding: 1% 1% 0 1%;
}

}

@media screen and (max-width: 32em){
	#logo {
	float:none;
	margin: 0 auto!important;
    	max-width: 60%;
    padding: 2% 0 0 0;
}
#icons {
    width: 100%;
  	clear: both;
	background-color: #efefef;
    padding: 0% 1% 0 1%;
}
}


/* 
###############################################################
Boxen index #
###############################################################
*/


@media only screen and (max-width:70em) {
.unterschrift {
  	font-size: 90%;
    }
}

@media only screen and (max-width:60em) {
.indexbox {
  	font-size: 80%;
	width: 48%;
    }
.unterschrift {
  	font-size: 80%;
    }
}

@media only screen and (max-width:40em) {
.indexbox {
  	font-size: 80%;
    }
.unterschrift {
  	font-size: 70%;
    }
}

@media only screen and (max-width:35em) {
.indexbox {
	width: 100%;
	margin: 1%;
  	font-size: 100%;
    }
.unterschrift {
  	font-size: 100%;
    }
}


/* 
###############################################################
Button unten und mehr #
###############################################################
*/

@media only screen and (max-width:50em) {
.inboxenfooter, .inbotten, .bildakademie {
	clear: both;
	width: 100%;
	height: auto;
	padding: 1% 0 1% 0;
	text-align: center;
	background-color: transparent;
	color: #fff;
	border-left-width: 0px;
	font-size: 100%;
	margin: 0 auto;
}
.inboxenfooter img {
	width: 48%;
	padding: 1%;
	font-size: 100%;
	margin: 0 auto;
}
.bildText img {
	width: 48%;
	height: auto;
	float: left;
}
.bildergalerie img {
	width: 48%;
	height: auto;
}
.inbotten img {
	width: 48%;
	height: auto;
	float: left;
	margin: 1% 1% 0 0;
}
}

@media only screen and (max-width:30em) {
.inbotten img, .inboxenfooter img {
	width: 48%;
	margin: 1% 0 0 1.5%;
	text-align: center;
	font-size: 80%;
}
div#boxenfooter, div#botten {
	padding: 0.5% 0 0.5% 0;
}
}



/* 
###############################################################
Footer #
###############################################################
*/

@media screen and (max-width: 80em) {
.boxinfooter {
margin:1%;
}
.mainContent {
    max-width: 100%!important;
}
.container-footer-kontakt {
    width: 60%;
    padding: 0 2% 0 0;
    }

.container-footer-links {
    width: 30%;
    padding: 0 0 0 4%;
}

.container-footer-daten {
    width: 100%;
    margin: 1% 0 0 0;
}
}

@media only screen and (max-width: 50em) {
.infooter {
	padding: 1% 2% 1% 2%;
	margin: 0 auto;
	width: 100%;
	height: auto;
	color: #fff;
	background-color: transparent;
}
.container-footer-links {
    padding: 0 0 0 0;
}
}


@media screen and (max-width: 41.25em) {
	.infooter {
	margin:1%;
	}
.container-footer-kontakt {
    width: 100%;
}

.container-footer-links {
    width: 100%;
    margin: 1% 0 0 0;
}

.container-footer-daten {
    width: 94%;
}
}