.ourschool{
  text-align: center;
  vertical-align: middle;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
table{
    background-color: #ccccccc7;
}
td {
    vertical-align: middle;
    text-align: center;
}
.container{width:100%; height:100%; background-color:#ccccccc7}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #ccccccc7;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: rgb(#ccccccc7);
  color: #1a75ff;
}

.zoom {
    text-align: center;
    vertical-align: middle;
    transition: transform .2s; 
    margin: 0 auto;
    font-family: cursive;
}

.zoom:hover {
    transform: scale(1.1);
}


#gallery{width:100%; text-align:center; position:relative; margin:0%,0%;display: flex; flex-direction: row;justify-content: center; align-items: center;  background-color: #ccccccc7;}
.fadein { position:relative; height:332px; justify-content: center; align-items: center; display: flex;}
.fadein img { position:absolute; top:0;justify-content: center; align-items: center  }

body{
    height: 100% ;
    width :100%;
   background-color: #cccccc;
   /* Hide scrollbars */
   overflow-y: scroll;
overflow-x: hidden;
}
.koubaki {
display: inline-block;
position: relative;
color: #0087ca;
}

.koubaki:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: #00ffff;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}

.koubaki:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}

.typewriter h1 {
overflow: hidden; 
border-right: .15em solid transparent(0, 0, 0); 
white-space: nowrap; 
margin: 0 auto; 
letter-spacing: .12em; 
animation:
typing 5s steps(50, end),
blink-caret .75s step-end 2;
font-family: fantasy;
color: #1a75ff;
text-underline-position: below;
}

@keyframes typing {
from { width: 0 }
to { width: 100% }
}

@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: rgb(0, 0, 0); }
}

.copyright-area{
  background-color: rgb(121, 121, 121);
  color: rgb(255, 255, 255);
  width: 100%;
  height: 60px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  float: bottom;
}
.copyright-area-about {
  background-color: rgb(121, 121, 121);
  color: rgb(255, 255, 255);
  width: 100%;
  height: 60px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  float: bottom;
  margin-top: 250px;
}

.social-media{
  text-align: right;
  letter-spacing: 10px;
  padding: 10px;
  float: right;
  position: relative;
  padding-right: 10px;
}
.social-media a{
  text-decoration: none;
}

.rights{
  float: left;
  position: relative;
  padding-left: 10px;
}

.aboutimages {
  width: 400px;
  float: left;
  position: relative;
}
.keimeno {
  text-align: left;
  position:relative;
  float:right ;
  width: 60%;
  padding: 30px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.aboutcontent{
  width: 100%;
  position:relative
}

.clearfloat{
  clear: both;
}

.copyright-area-draseis{
  background-color: rgb(121, 121, 121);
  color: rgb(255, 255, 255);
  width: 100%;
  height: 60px;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  float: bottom;
  margin-top: 500px;
}

.social-media-draseis{
  text-decoration: none;
  text-align: right;
  letter-spacing: 10px;
  padding: 10px;
  position: relative;
  padding-right: 10px;
  float: right;
  margin-top: -40px;
}

.built-by{
  text-align: justify;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.ourschoolh {
  color: #1a75ff;
}