body { 
            color:black; 
            font-size:18pt; 
            font-family:Times New Roman; 
            background-image:url("orange.jpg"); 
			background-color:#fdb75c;
            background-size: 100% 100%;
            background-repeat:no-repeat;
            background-attachment:fixed
            
      }

h2 { 
            font-size:20pt; 
            font-weight:bold; 
            text-align:center;
            color:black;
   }

h3 { 
            font-size:15pt; 
            font-weight:bold;
	    text-decoration:underline;	 
            text-align:center;
            color:black;
   }

h4 { 
            font-size:12pt; 
            font-weight:normal;
	    font-family:Times New Roman; 	    	 
            text-align:center;
            color:black;
   }

table, td { 
            color:black; 
            font-size:11pt; 
            font-family:Times New Roman; 
            
                       
                        
       
            
            border-top-color:orange;
            border-bottom-color:orange;
            border-left-color:orange;
            border-right-color:orange;
            
            padding-top:5px;
            padding-bottom:5px;
            padding-left:5px;
            padding-right:5px;
          }
#rahmen {
	 	border-left: 1px solid black;
		border-bottom: 1px solid black;
		border-right: 1px solid black;
		border-top: 1px solid black;
						}
	
	
}
#gallery {
  position: relativ;
}

#gallery figure {
  position: relativ;
  font-size: 0;
  z-index: 1;
  animation: wechseln 15s infinite;
}

#gallery figcaption {
  position: relativ;
  left: 1em;
  bottom: 0.5em;
  z-index: 2;
}
#gallery figure:nth-of-type(2) {
  animation-delay: 5s;
}
#gallery figure:nth-of-type(1) {
  animation-delay: 10s;
}
@keyframes wechseln {
    0% {opacity: 1;}
   25% {opacity: 1;}
   40% {opacity: 0;}
   92% {opacity: 0;}
  100% {opacity: 1;}
}

#nachhilfe { 
            color:black; 
            font-size:14pt; 
            font-family:Times New Roman; 
           
            
      }
#start { 
            color:black; 
            font-size:18pt; 
            font-family:Times New Roman; 
            
            
      }
	  
	  

#fusszeile {
             
position: relative;
text-align: center;
bottom: 0;
left:13%;

width: 75%;

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

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}



.header {
 
  color: #ffffff;
  padding: 15px;
  float: center;
  width: 100%;
  height: 20%;


}

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

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     
  color:black; 
  text-decoration: none;
            
       
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
  
}
.mitte {
  background-color: #0099cc;
 

  
  
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (max-width: 599px) {
  /* For phones: */
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 50%;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}
  body {
    background-color: 87CEEB;
	 font-size:10pt; 
	
  }


 .smaller {
    font-size: 14px;
  }
   .header {
 
  background-image: url('nachhilfe.jpg');
  background-size: 100% 100%;	
			}
  .menu { display: none; }
}	
			

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  body {
    background-color: 87CEEB;
  }
  

  .header {
 
  background-image: url('nachhilfe.jpg');
  background-size: 100% 100%;	
	


}
 #burger { display: none; }
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  body {
    background-color: 87CEEB;
  
  }
  .header {
 
  background-image: url('nachhilfe.jpg');
  background-repeat: no-repeat;
  background-position: center; 
    background-size: 50% 110%;	


}

 
.gallerie img {
  width: 49%;
  height: auto;
}
 #burger { display: none; }
}

/* Slide Bilder */

.swipe {
	overflow: hidden;
	position: relative;
	max-width: 576px;
	width: 100%;
	height: auto;
	margin: 0px auto 0;
	
}
.swipe-wrap {
	overflow: hidden;
	position: relative;
}
.swipe-wrap > div {
	float: left;
	width: 100%;
	position: relative;
}
.swipe .nav {
	position: absolute;
	width: 80px;
	height: 38px;
	z-index: 10;
	text-align: center;
	line-height: 40px;
	display: inline-block;
	color: #fff;
	top: 45%;
	cursor: pointer;
	background-color: rgba(0,0,0,0.8)
}
.swipe .nav.next {
	right: 0;
	-webkit-border-radius: 3px 0 0 3px;
	border-radius: 3px 0 0 3px;
}
.swipe .nav.prev {
	-webkit-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}

.container {
  display: inline-block;
  cursor: pointer;
}
/* Burger Menu */

#menuToggle
{
  display: block;
  position: fixed;
  top: 20px;
  left: 2%;
  color:white;
  z-index: 11;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 12; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: white;
  border-radius: 3px;
  
  z-index: 11;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu2
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  margin-bottom:70px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 33px rgba(0,0,0,0.12), 0 1px 200px rgba(0,0,0,0.24);
     
  color:black; 
  text-decoration: none;
 
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  

  

}

#menu2 li
{
  padding: 10px 0;
  font-size: 22px;
}


.menu2 li:hover {
  background-color: #0099cc;
}

#menu3
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  margin-bottom:70px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 33px rgba(0,0,0,0.12), 0 1px 200px rgba(0,0,0,0.24);
     
  color:black; 
  text-decoration: none;
 
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  

  

}

#menu3 li
{
  padding: 10px 0;
  font-size: 22px;
}


.menu3 li:hover {
  background-color: #0099cc;
}
/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}
textarea {
background:grey; 
border: 1px black; 
font-family : Times New Roman;
font-size : 15px;
}
textarea:focus{background:white;}

.pagination a {
    color: black;
    float: center;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

/* Style the active/current link */
.pagination a:active {
    background-color: blue;
    color: white;
}

/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {background-color: #ddd;}