html, body { 
              font-size: 14px/20px; 
			  font-family: "Georgia", "Verdana", "Calibri", sans-serif;
			  margin-left:   0px; 
              margin-right:  0px;
		      margin-top:  0px;
			  background-color:"#F7EDCE";			  
			  }
p { 
 font-size:14px/20px; 
 font-family: "Georgia", "Verdana", "Calibri", sans-serif;
 line-height:1.9;
 text-align: justify;
 text-decoration: none;
}

h1 { 
      font-size: 1.4em; 
	  font-family: "Georgia", "Verdana", "Calibri", sans-serif;
      color: #006699;
	  font-weight: bold;
}
h2 { 
      font-size: 1.3em; 
	  font-family: "Georgia", "Verdana", "Calibri", sans-serif;
      color: #006699;
	  font-weight: bold;
}
h6 { 
      font-size: 1em; 
	  font-family: "Georgia", "Verdana", "Calibri", sans-serif;
      color: #006699;
	  font-weight: bold;
}
li { 
	 line-height: 1.8;
     hover  { background-color: lightblue; }
     active { background-color: red;}
	}


ul:active { border: 1px solid pink; }
ul {
	list-style-type: square;
	font-family: "Georgia", "Verdana", "Calibri", sans-serif;
	 text-align: left;
	 margin-left: 8px;
}
.entona {
           font-weight: bold;
                 
}
img {
       margin-left:1px;
       margin-top:1px;
       border: 0px solid navy;
       padding:2px;
	   border-radius: 8px;
	   border: 1px solid #ddd;
	   max-width: 100%;
       height: auto;

}
iframe {
  border: 10px solid #006699;
  padding: .5rem;
  margin: 1rem;
  box-shadow: 20px 20px 10px #888888;
  width: 355;
  height: 200;
}
table {
	width:100%;
	}
table, th, td {
  padding: 0px; 
  cellpadding:0;
  border: 0px solid #DCDCDC;
  font-family: "Georgia", "Verdana", "Calibri", sans-serif;
  
  }
 .esopinakas {
	width:80%;
    padding: 1px; 
    cellpadding:1;
    border: 2px solid #DCDCDC;
    border-width:medium;
    text-align:center;
    font-family: "Georgia", "Verdana", "Calibri", sans-serif;
  }
table { 
  overflow: auto;
  border-collapse: collapse; 
  }
  
tr:hover {
  background-color: #e6e6e6; 
  }
  
tr.main-heading {
  line-height: 10%;
  background-color: #32B2B2;
  color: white;
  }

table.eg1 tr:nth-child(even) { background-color: #cccccc; }

table.eg2 tr:nth-child(odd) { background-color: #E2F5F4; }

tr.sub-heading {
  background-color: #149494;
  color: white;
  }
 
a:link {
    text-decoration: underline;
}
a:visited {
    background-color: cyan;
	text-decoration: underline;
}

a:hover {
    background-color: lightgreen;
}
.style30 {
	color: #0000CC;
	font-size: xx-large;
}
.titlospar {
	color: #003366;
	font-weight: bold;
	font-size: large;
}
.mikragrammata{
	  font-size: 0.8em; 
	  font-weight: normal;
}

.tampela{
	color: white;
	background-color: red;
	font-weight: bold;
	font-size: 2 em;
}
.epexigisi {
	color: #FF0000;
	font-weight: bold;
	font-size: medium;
	font-style: italic;
}
.epexigisi2 {
	color: #006666;
	font-weight: bold;
	font-size:  0.8em;
	font-style: italic;
}
.epexigisi3 {
	color: #FFFF99;
	font-weight: bold;
	font-size:  1.2em;
	text-align: center;
	
}
.xroma0{
	color: #000023;
	font-weight: bold;	
	font-size:  1.2em;
}
.xroma1 {
	color: #FF6464;
	font-weight: bold;	
	font-size:  1.2em;
}
.xroma2 {
	color: #91c483;
	font-weight: bold;	
	font-size:  1.2em;
}
.xroma3 {
	color: #8843f2;
	font-weight: bold;	
	font-size:  1.2em;
}
header,footer,aside,section {
background-color: #FFFFEA;
color: white;
padding: 12px 12px;
margin:8px;
border-radius:10px;
box-shadow:2px  2px;
}
.subsection {
background-color:#D0E9CF ;
color: #003366;
padding: 12px 12px;
margin:8px;
border-radius:10px;
box-shadow:2px  2px;
}
.eortastiko {
background-color:#D0E9CF ;
background-image: url("images/background/images12a.jpg");
color: #003366;
padding: 0px 0px;
margin:0px;
border-radius:0px;
box-shadow:0px  0px;
}
.mathima {
background-color:#F9D7B0 ;
color: #003366;
padding: 12px 12px;
margin:8px;
border-radius:10px;
box-shadow:2px  2px;
}
.mathima2 {
background-color:#DFD6FC ;
color: #003366;
padding: 12px 12px;
margin:8px;
border-radius:10px;
box-shadow:2px  2px;
}
.plaisio1 {
background-color:#fffbdf ;
color: #003366;
padding: 12px 12px;
margin:8px;
border-radius:10px;
box-shadow:2px  2px;
}

.style46 {color: #000066}

.style84 {font-size: large}

.style87 {
	color: #003366;
	font-weight: bold;
}
.style132 {
	color: #006699;
	font-weight: bold;
	font-style: italic;
	font-size: large;
}
.style133 {font-size: medium}
.style135 {font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; font-size: large; }
.style152 {
	color: #003366;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.style166 {color: #FFFFFF}
.style168 {font-family: Georgia, "Times New Roman", Times, serif; color: #FFFFFF; font-weight: bold; font-size: medium; }

.style181 {font-weight: bold; color: #990000; }
.style190 {color: #000000}
.style191 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: large;
	color: #003399;
}
.style198 {
	color: #003366;
	font-style: italic;
}
.style203 {
	color: #006699;
	font-style: italic;
}
.style81 {color: #FF3300}
.style98 {font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; }
.style72 {font-size: medium}
.style73 {font-family: Georgia, "Times New Roman", Times, serif}
.style86 {color: #003366}
.style87 {color: #FFFFCC}
.style89 {
	font-size: medium;
	color: #FF0000;
	font-style: italic;
}
.style90 {
	color: #FF3300;
	font-size: x-large;
	word-spacing: 0;
	line-height: 150%;
	margin: 0;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
}
.style92 {color: #003366}
body {
	background-color: #FAFFE6;
}
.style93 {font-family: Georgia, "Times New Roman", Times, serif; color: #003366; font-weight: bold; font-size: medium; }
.style94 {font-family: Georgia, "Times New Roman", Times, serif; font-size: medium; }
.style95 {color: #0099FF; font-weight: bold;}

#myImg ,#myImg1 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
	max-width: 100%;
    height: auto;
}

#myImg , #myImg1:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 80%; /* Full width */
    height: 80%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
.container {
    position: relative;
    width: 50%;
}

.mia_eikona {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .mia_eikona {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text_mia_eikona {
  background-color: #4CAF50;
  color: white;
  font-size: 14px;
  padding: 16px 32px;
}
.blur {-webkit-filter: blur(4px);filter: blur(4px);}
.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}
.invert {-webkit-filter: invert(100%);filter: invert(100%);}
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}
.saturate {-webkit-filter: saturate(7); filter: saturate(7);}
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 400px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}