body,td			{	font-family:raleway,"trebuchet ms",verdana,arial,helvetica; 
					font-size: 0.8rem; line-height: 1.5; color:#333;}
a:link			{	color:#333;text-decoration:none;}
a:visited		{	text-decoration:none;}
a:active		{	text-decoration:none;}
.kalenderkopf	{	font-size:16pt;color:#262C2F;padding:10px;}
.submit			{	padding:3px 6px 3px 10px;
					background-color:rgba(0, 0, 0, 0.05);
					color:white;
					font-size:18px;
					font-weight:bold;
					border: 1px solid;
					border-radius: 10px 10px 10px 10px;
					font-family:Calibri,arial,helvetica;
					letter-spacing:1px;	}						
.submit:hover 	{	padding:3px 6px 3px 10px;
					border-color:#9b9b9b;
					cursor: pointer;
					box-sizing: border-box;
					border-radius: 10px 10px 10px 10px;
					box-shadow: 1px 1px 3px ;}
.eingabe		{	padding:5px;
					font-size:14px;	}
.button			{	color:#262C2F;
					background-color: rgba(121, 192, 193, 0.8);
					padding:3px 6px 3px 10px;
					font-size:22px;
					font-weight:bold;
					border-color:#9b9b9b;
					cursor: pointer;
					box-sizing: border-box;
					border-radius: 10px 10px 10px 10px;					
					font-family:Calibri,arial,helvetica;
					letter-spacing:3px;	}
.button:hover 	{	padding:3px 6px 3px 10px;
					border:2px solid #9b9b9b;
					box-shadow: 1px 1px 3px inset;	}					
.kalendermonat	{	font-size:16px;font-weight:bold;background-color:#262C2F;
					color:white;text-align:center;padding:10px;	}
.logoschrift span 	{font-family:arial;font-size:30px;color:#e1e2dc;font-weight:bolder;
					text-shadow:0px  0px 0px #9b9b9b, 0px 0px 2px #9b9b9b, 0px  0px 2px #9b9b9b, 0px 2px 4px #9b9b9b;	}
/* Farben für die Termin-Kategorien  */
.table			{	border:0px;border-spacing:0px;margin:0px;width:100%;	}
.meine			{	background-color:#f8d26e;	}
.abiturtermine	{	background-color:#abb671;color:white;	}
.events			{	background-color:rgba(239, 173, 59, 0.8);color:#262C2F;	}
.fachtermine	{	background-color:#61616F;color:white;	}
.ferien			{	background-color:#BF3B3B;color:white;font-size:bold;padding:5px;font-size:12px;	}
.klassentermine	{	background-color:rgba(97, 97, 111, 0.6);color:white;	}
.klausurtermine	{	background-color:rgba(255, 203, 219);color:#262C2F;	}
.td_klausurtermine{	background-color:rgba(255, 203, 219);color:#262C2F;padding:10;text-align:center;}
.mittlerereife	{	background-color:rgba(127, 95, 123, 0.7);color:white;	}
.schultermine	{	background-color:rgba(121, 192, 193, 0.8);color:white;	}
.persoenlichertermin{background-color:#ebccff;color:#262C2F;	}

            a.cal_head
            {
                color: #262C2F;
            }
            a.cal_head:hover
            {
                text-decoration: none;
            }
            .cal_head
            {
                background-color: #f8f0da;
                color:            #262C2F;
                font-weight:      bold;
				padding: 5px;
				padding-right: 5px;
				padding-left: 5px;
            }
			.pop_head
            {
                background-color: rgba(248,210,110,0.3);
                color:            #262C2F;
                font-size:        16;
                font-weight:      bold;
				padding: 5px;
				padding-right: 5px;
				padding-left: 5px;
            }
			.pop_row
            {
                background-color: rgba(248,210,110,0.3);
                color:            #262C2F;
                font-size:        12;
                font-weight:      bold;
				padding: 			5px;
				padding-right: 	5px;
				padding-left: 	5px;
            }
			.pop_row2
            {
                background: rgba(121,192,193,0.25);
                color:            #262C2F;
                font-size:        12;
                font-weight:      bold;
				padding: 			5px;
				padding-right: 	5px;
				padding-left: 	5px;
            }
            .cal_days 
            {
                font-weight:      bold;
            }
            .cal_content
            {
                background-color: #f8f0da;
                color:            #262C2F;
                font-weight:      normal;
            }
            .cal_today
            {
                background-color: #79c0c1;
                color:            white;
                font-weight:      bold;
            }
            .cal_event, a.cal_event
            {
                background-color: #f9f9f9;
                color:            #262C2F;
                font-size:        14;
                font-weight:      bold;
            }
            .cal_event_ferien, a.cal_event_ferien
            {
                background-color: #BF3B3B;
                color:            white;
                font-weight:      bold;
            }

/*	POPUP-Kalender	*/
body {

  background-size: cover;
  height: 100vh;
}

h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: #06D85F;
  margin: 80px 0;
}

.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .EFS{
  z-index: 1;
  position: absolute;
  top: 0px;
  left: 30px;
  transition: all 200ms;
  font-size: 40px;
  font-weight: bold;
  color: #00AEAF;
}

.popup .close{
  z-index: 1;
  position: absolute;
  top: -10px;
  right: 30px;
  transition: all 200ms;
  font-size: 50px;
  font-weight: bold;
  color: #333;
}
.popup .close:hover {
  color: #333;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}