@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=greek,greek-ext');
 * {
    box-sizing: border-box;
  }
  body {
    min-height: 100vh;
    margin: 0;
    font-family:'Open Sans', sans-serif;
  }
  a{
      text-decoration:none;
      color:#000080
  }
  a:hover{
      color: #6495ED
  }

  li{
      margin-bottom:10px;
  }

:root {   /*yellowgreen,97ecff,#00837e */
  --main-bg-color: #00837e;
}

  #main > article {
    flex: 1;
    order: 1;
  }
  #main > nav,
  #main > aside {
    flex: 1;
    overflow-y: scroll
  }
  #main > nav {
    background: #D7E8D4;
    order: 3;
  }
  #main > aside {
    background: beige;
    order: 2;
  }
  header, footer {
    background: var(--main-bg-color);
    text-align:center;
    /*height: 10vh;*/
  }
  header, footer, article, nav, aside {
    padding: 1em;
  }
  .images img{
    width:100%;
  }
  #map {
      width:100%;
      height: 90vh;
      margin: 0px;
      padding: 0px
  }

.x2{
      font-size:1.1em;
      text-shadow: 3px 3px 3px #808080;
      color:#fff;
      padding-bottom:20px;
      padding:2px 10px;
      border-radius:10px;
      border:2px solid #fff;
  }

  @media (min-width:1100px){
     body {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
        margin: 0;
      }
      #main {
        display: flex;
        flex: 1;
      }
  }
  #intro {
      /*background-image: url(../images/intro.jpg);*/
      background-size: cover;
  }
  #intro img{
      width:100%;
  }


.navig{
    display:flex;
    justify-content: center;
}
.navigitem{
    width:33%;
    text-align:center;
}
ul.menu{
    display:inline;
    text-align: center;
    font-weight:bold;
    color:white;
}
ul.menu li{
    display:inline;
    margin-right:20px;
    text-align: center;
}
ul.menu li a{
     color:white;
}
ul.menu li a:hover{
    color:#D0E8A1;
}

.dropbtn {
  /*background-color: #4CAF50;*/
  background-color: var(--main-bg-color);
  color: white;
  padding: 10px 0px;
  font-size: 16px;
  border: none;
  font-weight:bold;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black!important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: var(--main-bg-color);}

@media screen and (max-width: 600px) {
  .dropbtn {
    font-size: 18px;
  }
  ul.menu{
    padding-left:0;
  }

  ul.menu li{
    display:block;
    margin-bottom:5px;
    margin-right:0px;
  }
  ul.menu li.separ{
      display:none;
  }

}