/*  ########################################################################################################################## */
/*  ############################################### pretz.de Template Styles ################################################# */
/*  ########################################################################################################################## */

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
 font-family: Verdana, sans-serif;
 line-height: 1.5;
 overflow-x: hidden;
 margin: 0;
 background: #efefef;

 background-repeat: no-repeat;
 background-position-x: right;
}

#toppic{
 background-image: url(../img/template/toppic.jpg);
 background-size: cover;
 height: 100vh;
}

#topIMG {
 height: 600px;
 background-size: cover;
 background-position: center top;
}

.topTXT{
 width: 491px;
 height: 44px;
 padding: 5px 5px 5px 5px;
 position: absolute;
 left: calc(100% - 450px);
 margin-top: 80px;
 z-index: 200;
 border-radius: 5px;
}

.SliderTXT{
 color: #ffffff;
 background: rgb(48, 108, 178);
 margin-bottom: 2px;
 padding: 3px 3px 3px 3px;
 font-size: 20px;
}

@media screen and (max-width: 800px) {
 .SliderTXT{
  font-size: 12px;
 } 
}


.blankDIV{
 height: 500px;
 background-image: url(../img/template/bkg.jpg);
 background-repeat: repeat;
 background-position-x: center;
 background-position-y: center;
 background-attachment: fixed;
 background-size: cover;
 padding: 20px 20px 20px 20px;
 text-align: center;
}

#header {
 position: relative;
 margin-bottom: 0;
}

#top {
 padding: 10px 10px;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 99;
 border-bottom: 1px solid;
 padding-right: 20px;
 top: -100px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -ms-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}

@media screen and (max-width: 800px) {
 #top {
  text-align: center;
  display: none;
 }

}

#nachhilfe{
 height: 500px;

 padding-bottom: 100px;
 
}

/*  ########################################################################################################################## */
/*  ###################################################### topIMG ############################################################ */
/*  ########################################################################################################################## */

#topIMG {
 height: 600px;
 background-size: cover;
 background-position: center top;
}

/*  ########################################################################################################################## */
/*  ###################################################### Login ############################################################# */
/*  ########################################################################################################################## */



#Login {
 z-index: 501;
 position: absolute;
 top: -500px;
 left: calc(100% - 222px);
 padding-top: 5px;
 padding-bottom: 5px;
 padding-left: 15px;
 padding-right: 15px;
 border-radius: 20px;
 font-size: 12px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -ms-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}


#Login input[type="text"], #Login input[type="password"], #Login input[type="submit"] {
 height: 20px;
 width: 180px;
 padding: 0;
 margin-bottom: 5px;
 font-size: 15px;
}

#Login input[type="submit"] {
 padding-bottom: 23px;
}


#LoginHide {
 float: right;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -ms-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}

#LoginButton{
 z-index: 300;
 padding: 3px 3px;
 position: absolute;
 top: 1px;
 left: calc(100% - 45px);
 height: 30px;
 width: 30px;
 -webkit-transition: all 1s ease;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 -ms-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}


/*  ########################################################################################################################## */
/*  ########################################################################################################################## */
/*  ########################################################################################################################## */

.LogoIMG{
 width: 250px;
 text-align: right;
 position: absolute;
 margin-top: 30px;
 padding-right: 10px;
 padding-left: 20px;
 z-index: 200;

}

.LogoIMG2{
 width: 250px;
 text-align: right;
 position: absolute;
 margin-top: 80px;
 padding-right: 10px;
 padding-left: 20px;
 margin-left: calc(100% - 400px);
 z-index: 200;
}



@media screen and (max-width: 700px) {

 .LogoIMG{
  position: relative;
 }

 .LogoIMG2{
  margin-top: 10px; 
  position: relative;
 }

 .topTXT{
  position: relative;
  left: calc(50% - 250px);
  margin-top: 260px;
  width: 100%;
  margin-bottom: 40px;
 } 
}


.LogoTop{
 position: fixed;
 top: 2px;
 left: 5px;
 width: 110px;
 z-index: 200;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 -ms-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

.LogoPNG{
 width: 250px;
 padding-left: 10px;
}

/*  ########################################################################################################################## */
/*  ########################################################################################################################## */
/*  ########################################################################################################################## */

a {
 -webkit-transition: 0.5s;
 -o-transition: 0.5s;
 transition: 0.5s;
 text-decoration: none !important;
}

.headline{
 color: rgb(48, 108 ,178);
 font-weight: bold;
}


h1, h2{
 font-size: 36px;
 font-weight: bold;
 text-transform: uppercase;
 border-bottom-width: 3px;
 border-bottom-style: solid;
 display: inline-block;
 padding-top: 0px;
 padding-bottom: 3px;
 margin-bottom: -3px;
}

h2{
 font-size: 18px;
 margin-bottom: 10px;
}



h3 {
 font-size: 18px;
 display: inline-block;
 padding-top: 0px;
 padding-bottom: 3px;
 margin-bottom: -3px;
}

.h_bottom{
 border-bottom-width: 3px;
 border-bottom-style: solid;
 width: 100%;
 margin-bottom: 10px;
}

.divider{
 clear: both;
}

.animation {
 opacity: 0;
}

.BildRund {
 width: 88px;
 height: 88px;
 background-size: cover;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 border-radius: 50%;
}

.Image100{
 width: 100%;
 border-radius: 8px;
}

blockquote{
 padding-left: 10px;
}

/*  ########################################################################################################################## */
/*  ##################################################### responsive ######################################################### */
/*  ########################################################################################################################## */

.container_inhalt100 {
 margin: 0 auto;
 margin-top: 30px;
 padding-top: 30px;
 width: 100%;
 padding-bottom: 50px;
}

.container_inhalt {
 margin: 0 auto;
 margin-top: 5px;
 padding-top: 5px;
 width: 70%;
}

.container_inhalt:before {
 display: table;
 content: " ";
}

.content25, .content33, .content33hidden, .content40, .content50, .content60, .content66, .content75, .content100,
.content25box, .content33box, .content33hiddenbox, .content40box, .content50box, .content60box, .content66box, .content75box, .content100box {
 float: left;
 padding-left: 25px;
 text-align: left;
 padding-right: 25px;
 margin-bottom: 20px;
  padding-bottom: 5px;
}

.content25box, .content33box, .content33hiddenbox, .content40box, .content50box, .content60box, .content66box, .content75box, .content100box {
 background-color: #ffffff;

 border-radius: 10px;
-moz-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.15);
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.15); 
}

.content60, .content60box{
 width: 60%;
}

.content40, .content40box{
 width: 40%;
}


.content66, .content66box{
 width: 66%;
}

.content50, .content50box{
 width: 48%;
}

.content75, .content75box{
 width: 75%;
}

.content100, .content100box{
 width: 100%;
}

.content33, .content33box{
 width: 33%;
}

.content25, .content25box{
 width: 25%;
}

@media screen and (max-width: 800px) {

 .content25, .content33, .content33hidden, .content40, .content50, .content60, .content66, .content75, .content100,
  .content25box, .content33box, .content33hiddenbox, .content40box, .content50box, .content60box, .content66box, .content75box, .content100box {
  width: 100%;
 }

 .container_inhalt {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
 }

 h1, h2, h3 {
  font-size: 18px;
 } 

}





/*  ########################################################################################################################## */
/*  #################################################### map-block ########################################################### */
/*  ###################################################################################################################

#map-block {
 filter: grayscale(100%);    
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
}
####### */


/*  ########################################################################################################################## */
/*  #################################################### Gaestebuch ########################################################## */
/*  ########################################################################################################################## */

.GWrapper{
 width: 100%;
 float: left;
 padding-left: 25px;
 text-align: left;
 margin-right: 25px;
 margin-bottom: 25px;
 border-radius: 8px;
 padding-top: 10px;
 padding-bottom: 10px;
}

.GDateWrapper{
 float: left;
 width: 70px;
}

.GTag, .GMonat, .GJahr{
 width: 100%;
 float: left;
 text-align: center;

}

.GTag{
 background: rgba(3, 82, 175, 1);
 color: rgba(248, 248, 144, 1);
}

.GJahr{
 border-bottom-right-radius: 8px;
 border-bottom-left-radius: 8px;
}


.GTextWrapper{
 float: left;
 width: calc(100% - 70px);
 padding-left: 20px;
}


/*  ########################################################################################################################## */
/*  ##################################################### Sitemap ############################################################ */
/*  ########################################################################################################################## */

#sitemap {
 padding-left: 30px;
 margin-bottom: 20px;
}

#sitemap li{
 list-style: none;
}

#sitemap a{
 background-image: url(../img/icon/arr_d_blk.gif);
 background-repeat: no-repeat;
 background-position: 5px 5px;
 padding-left: 20px;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease-in-out;
 -o-transition: all 0.5s ease-in-out;
 -ms-transition: all 0.5s ease-in-out;
 transition: all 0.5s ease-in-out;
}

#sitemap a:hover{
 background-image: url(../img/icon/arr_r_blk.gif);
 padding-left: 30px;
}


/*  ########################################################################################################################## */
/*  ##################################################### ArrowUP ############################################################ */
/*  ########################################################################################################################## */

#ArrowUP {
 position: fixed;
 bottom: 25px;
 left: 50px;
 width: 50px;
 height: 50px;
 z-index: 1;
 border-radius: 50px;
 display: none;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;
}

/*  ########################################################################################################################## */
/*  ####################################################### maps ############################################################# */
/*  ########################################################################################################################## */

#map-block {
 /* filter: grayscale(100%); */
 /* filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1); */
 background-image: url(../img/template/map-block.jpg);
 background-size: cover;
 min-height: 80px;
 padding-top: 20px;
 padding-bottom: 20px;
 margin-bottom: 44px !important;
}

#mapOKdiv {
 width: 50%;
 text-align: center;
 margin: 0 auto;
 border: var(--Farbe1) 1px solid;
 color: var(--schwarz);
 padding-top: 5px;
 padding-bottom: 5px;
 padding-left: 5px;
 padding-right: 5px;
 border-radius: 5px;
 font-size: 12px;
 background: var(--hellgrau);
 margin-bottom: 5px;
 margin-top: 5px;
}

/*  ########################################################################################################################## */
/*  ####################################################### Fuss ############################################################# */
/*  ########################################################################################################################## */


#fuss {
 position: fixed;
 bottom: 0px; 
 width: 100%;
 background: rgba(101, 101, 101, 1);
 padding: 10px 10px 10px 10px;
 color: rgba(255, 255, 255, 1);
}