*
{
    padding:0;
    margin:0;
}

body
{
    background-color: grey;
}

.navbar-nav
{
    list-style-type:none;
}

#burger-menu
{
    display: none;
}

.navbar-nav > li
{
    float:left;
    margin-left: 3em;
}

.navbar-nav > li > a
{
    color:white;
    text-decoration: none;
    font-size: 15px;
}

.navbar-nav > li > a:hover
{
    color: orange;
}

.navbarcontainer
{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    display:flex;
    align-items: center;
    z-index:1;
    width:100%;
    height:4em;
    background-color: rgba(69, 69, 69, 0.9);
}

#navbarResponsive
{
    display:grid;
    grid-template-areas: "list list search";
    grid-template-columns: 7fr 1.3fr 0.8fr;
    padding-right:7em;
    float: left;
    width:100%;
}

#menu-nav
{
    display: inline;
    grid-area: list;
}

#main-page-image
{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size: 20px;
    font-weight:bold;
    background-repeat: no-repeat;
    background-size: 100% 30em;
    color:white;
    width:100%;
    height:30em;
    margin-top: -3.2em;
}

#main-container
{
    position:relative;
    display:grid;
    width:70%;
    height:40rem;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    padding:20px;
    //grid-template-areas: "main-links aside-container";
    //grid-template-columns: 3fr 1fr;
    grid-gap:20px;
    padding-bottom:3em;
}

#main-links-left
{
  grid-area: main-links;
  height:100%;
}

.grid-aside
{
  grid-area: aside-container;
}

#schoolList
{
  position:absolute;
  padding:0.3em;
  background-color:white;
  border:1px black solid;
  border-radius:4px;
  list-style-type:none;
  z-index: 2;
  margin-top:-1em;
  margin-left:4em;
  visibility:hidden;
  transition: all 1s;
}

#schoolList > li
{
  cursor:pointer;
}

#schoolList > li:hover
{
  color:orange;
}

#schoolList > #dimotiko > a
{
  text-decoration: none;
  color:black;
}

#schoolList > #dimotiko > a:hover
{
  color:orange;
}

#dimotiko > li > a:visited
{
  color:purple;
}

#listaGumnasiou
{
   position:absolute;
   list-style-type:none;
   padding:0.3em;
   z-index: 2;
   border:1px black solid;
   border-radius:4px;
   margin-top:-0.8em;
   margin-left:3.4em;
   visibility:hidden;
   transition: all 1s;
   background-color:white;
}

#listaGumnasiou > li
{
  width:6em;
}

#listaGumnasiou > li > a
{
  text-decoration: none;
  color:black;
}

#listaGumnasiou > li > a:visited
{
  color:purple;
}

#listaGumnasiou > li > a:hover
{
  color:orange;
}

#listaLukeiou
{
   position:absolute;
   list-style-type:none;
   padding:0.3em;
   z-index: 2;
   border:1px black solid;
   border-radius:4px;
   margin-top:-0.8em;
   margin-left:2.6em;
   visibility:hidden;
   transition: all 1s;
   background-color:white;
}

#listaLukeiou > li
{
  width:6em;
}

#listaLukeiou > li > a
{
  text-decoration: none;
  color:black;
}

#listaLukeiou > li > a:visited
{
  color:purple;
}

#listaLukeiou > li > a:hover
{
  color:orange;
}

#diagonismataBurgerMenu
{
  color:white;
}

#diagonismataBurgerMenu:hover
{
  color:orange;
}

#schoolListBurgerMenu
{
  position:absolute;
  padding:0.3em;
  background-color:white;
  border:1px black solid;
  border-radius:4px;
  list-style-type:none;
  z-index: 2;
  margin-top:-1em;
  margin-left:4em;
  visibility:hidden;
  transition: all 1s;
}

#schoolListBurgerMenu > li
{
color:black;
}

#schoolListBurgerMenu > li > a
{
color:black;
text-decoration:none;
}

#dimotikoBurgerContainer:hover
{
  color:orange;
}

#listaGumnasiouBurgerContainer:hover
{
  color:orange;
}

#listaGumnasiouBurgerMenu
{
  position:absolute;
  padding:0.3em;
  width:5.7em;
  background-color:white;
  border:1px black solid;
  border-radius:4px;
  list-style-type:none;
  z-index: 2;
  margin-top:-1em;
  margin-left:3.3em;
  visibility:hidden;
  transition: all 1s;
}

#listaGumnasiouBurgerMenu > li > a
{
color:black;
text-decoration: none;
}

#listaGumnasiouBurgerMenu > li > a:hover
{
color:orange;
}

#listaLukeiouBurgerMenu
{
  position:absolute;
  width:4.7em;
  padding:0.3em;
  background-color:white;
  border:1px black solid;
  border-radius:4px;
  list-style-type:none;
  z-index: 2;
  margin-top:-1em;
  margin-left:2.1em;
  visibility:hidden;
  transition: all 1s;
}

#listaLukeiouBurgerMenu > li > a
{
    color:black;
    text-decoration: none;
}

#listaLukeiouBurgerMenu > li > a:hover
{
    color:orange;
}

#listaLukeiouBurgerContainer:hover
{
  color:orange;
}

#main-container-Alukeiou
{
    position:relative;
    display:block;
    width:70%;
    height:42rem;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    padding:0 20px;
    padding-top:20px;
    padding-bottom:3em;
}

#main-container-Blukeiou
{
    position:relative;
    display:block;
    width:70%;
    height:63rem;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    padding:0 20px;
    padding-top:20px;
    padding-bottom:3em;
}

#main-container-Glukeiou
{
    position:relative;
    display:block;
    width:70%;
    height:54rem;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    padding:0 20px;
    padding-top:20px;
    padding-bottom:3em;
}

#main-container-Bgumnasiou
{
    position:relative;
    display:block;
    width:70%;
    height:58rem;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    padding:0 20px;
    padding-top:20px;
    padding-bottom:3em;
}

#main-container-Ggumnasiou
{
    position:relative;
    display:block;
    width:70%;
    height:54rem;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
    padding:0 20px;
    padding-top:20px;
    padding-bottom:3em;
}

#main-container-Epikoinonia
{
    position:relative;
    display:block;
    width:70%;
    height:20rem;
    background-color:white;
    margin-left:auto;
    margin-right:auto;
}

.views-row
{
   display:flex;
   align-items:center;
   margin-bottom:1em;
   border:1px solid lightgreen;
   width: 60vw;
   height:40px;
   background-color: #FDD7D0;
   transition:0.6s background-color;
   grid-area: main-links;
   margin-left:10px;
   border-radius: 5px;
}

.views-row:hover
{
   background-color: #e4a397;
}



.views-field-title
{
  margin-left:10px;
}

.views-row-main
{
   display:flex;
   align-items:center;
   border:1px solid lightgreen;
   margin-bottom: 1em;
   width: 42vw;
   height:40px;
   background-color: #FDD7D0;
   transition:0.6s background-color;
   margin-left:10px;
   border-radius: 5px;
}

.views-row-main:hover
{
   background-color: #e4a397;
}

#footer
{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    bottom: 0;
    left: 0;
    width:100%;
    height:2em;
    background-color: rgba(69, 69, 69, 0.9);
}

aside
{
    position:relative;
    display:block;
    width: 20rem;
    height: 40em;
    background-color: rgba(245, 196, 39, 0.8);
    padding: 0 10px;
    border:1px solid black;
    grid-area: aside-container;
}

#aside-link-container
{
    position:relative;
    overflow:hidden;
    height: 38em;
}

.aside-link
{
    position:relative;
    display:block;
    margin-bottom:10px;
    animation: mymove 30s linear infinite;
}

@keyframes mymove {
    from {top: -400px;}
    to {top: 800px;}
  }

#search-item
{
    background-image:url("../assets/img/search-icon.png");
    background-size:22px;
    background-repeat:no-repeat;
    border:none;
    height:1.6em;
    padding-left:4px;
}

#search-item:focus
{
    background-image:none;
    background-size:0;
    outline: none;
}

#search-item:not(:placeholder-shown)
{
    background-image:none;
}

#search-item:placeholder-shown
{
    background-image:url("../assets/img/search-icon.png");
}

#search-item[type="text"]::placeholder {   
    /* Firefox, Chrome, Opera */
    text-align: center;
}


#epikoinonia-container
{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 20rem;
    padding-top: 1em;
}

#searchcontainer
{
    position: relative;
    grid-area: search;
    top: 0;
    width: 10em;
    height: 0;
    margin-top: -0.3em;
    margin-left:-4em;
}

#searchbar{
    width: 10rem;
    border-radius: 10px;
    height: 2em;
    outline: none;
    margin-left: 7em;
  }

  input[type=text] {
     width: 30%;
     -webkit-transition: width 0.15s ease-in-out;
     transition: width 0.15s ease-in-out;
  }

  /* When the input field gets focus,
       change its width to 100% */
  input[type=text]:focus {
    width: 70%;
  }

 #list{
   position: relative;
   font-size:  1.5em;
   margin-left: 5px;
   display: none;
   background-color: rgba(69, 69, 69, 0.9);
   border:1px solid black;
   width: 11.3em;
   max-height: 20em;
   overflow-y : scroll;
   overflow-x : hidden;
  }

.mathimata{
  display: block;
 } 

#list > .mathimata > a:hover
 {
    color: rgba(245, 196, 39, 0.8);
 } 


#list > .mathimata
{
    width: 13em;
    font-size: 20px;
    margin-bottom: 0.5em;
}

#list > .mathimata > a
{
    color:white;
}

 #searchbar:placeholder-shown #list
{
    display: none;
}

@media screen and (max-width:1300px)
{
    aside
    {
        display: block;
    }

    #searchcontainer
    {
        height: 0;
        margin-top: -0.3em;
    }

    #menu-nav
    {
        display: inline;
    }

    #navbarResponsive
    {
        grid-template-columns: 4fr 3.3fr 0.8fr;
    }

    .navbar-nav > li
    {
        margin-left: 2em;
    }

    .navbar-nav > li > a
    {
        font-size: 14px;
    }
}

@media screen and (max-width:1100px)
{    
    aside
    {
        display: block;
    }

    #searchcontainer
    {
        height: 0;
        margin-top: -0.3em;
        margin-left:-6em;
    }

    #searchbar
    {
      margin-left: 5em;
    }

    #list
    {
	margin-left:-2em;
    }

    aside
    {
        width: 14rem;
    }

    #menu-nav
    {
        display: inline;
    }

    #navbarResponsive
    {
        grid-template-columns: 2fr 5.8fr 0.8fr;
        padding-right:3.2em;
    }

    .navbar-nav > li
    {
        margin-left: 1.1em;
    }

    .navbar-nav > li > a
    {
        font-size: 13px;
    }
}

@media screen and (max-width:1000px)
{
    #searchbar
    {
      margin-left: 3em;
    }
}

@media screen and (max-width:900px)
{
    aside
    {
        display: block;
    }

    #burger-menu
    {
        display: inline;
        position: relative;
        width: 2.3em;
        height: 2.3em;
        background-image: url("assets/imgg/menu-burger.png");
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 10px;
    }

    #burger-menu-list
    {
	background-color: rgba(69, 69, 69, 0.9);
	z-index : 1;
        margin-top: 50px;
        padding-top: 2px;
        padding-left: 9px;
        padding-right: 9px;
        display: none;
        margin-left: -6.3em;
        width: 9em;
        list-style-type: none;
        cursor:default;
    }

    #burger-menu-list > li > a
    {
        color: white;
        text-decoration: none;
    }

    #burger-menu-list > li
    {
        margin-bottom: 9px;
	margin-left: 4px;
    }

    #burger-menu-list > li > a:hover
    {
       color:orange;
    }

    #searchcontainer
    {
        margin-top: 0.3em;
        margin-left:-10em;
    }

    #searchbar
    {
      margin-left: 7em;
    }

    #list
    {
	margin-left: 0;
    }

    #menu-nav
    {
        display: none;
    }
}

@media screen and (max-width:800px)
{
    aside
    {
        display: none;
    }
}

@media screen and (max-width:750px)
{
    #searchcontainer
    {
        margin-top: 0.3em;
        margin-left:-11em;
    }
}

@media screen and (max-width:550px)
{
    #searchcontainer
    {
        margin-top: 0.3em;
        margin-left:-12em;
    }

    #main-links-left > .views-row-main
    {
      width:49vw;
    }
}

@media screen and (max-width:450px)
{
    #main-links-left > .views-row-main
    {
      width:55vw;
    }
}

@keyframes burgerAnimationShow {
    from {margin-left: -6.3em;opacity: 0;}
    to {margin-left: -0.6em;opacity: 1;}
  }

  @keyframes burgerAnimationHide {
    from {margin-left: -0.6em;opacity: 1;}
    to {margin-left: -6.3em;opacity: 0;}
  }

#linksTitle
{
   position:relative;
   width:42vw;
   text-align:center;
   margin-bottom:2em;
}