nav
{flex-direction: column;}

#main
{
  display:flex;
  position:absolute;
  height:80vh;
  overflow-y:auto;
	right:-101%;
  transition:right 0.5s;
  width:90%;
  background-color:rgb(150,150,150);
  box-shadow:2px 2px 8px black;
  z-index:10;
}

#main.open
{
  right:0;
}

#hlektrologika, #thermansi-psiksi
{
  display:flex;
}
#hlektrologikaTitle
{
  background-color:rgb(100,100,150);
}
#thermansi-psiksiTitle
{
   background-color:rgb(150,100,100);
}


.mainNavItem
{
 cursor:unset;
 font-size:1.5rem;
 color:black;
 padding:0.1rem 0;
 color:white;
}
.mainNavItem .titleArrow
{
  display:none;
}
.mainNavItem .titleName
{
  text-align:right;
}

.subMainNavItem
{
font-size:1.3rem;
margin-top:3px;
padding:1rem;
background-color:white;
}

.subMainNavTitleActive .titleName
{
  text-decoration:underline;
  
}

.subNavItem
{
  font-size:1.3rem;
  background-color:white;
}
.subNavItem a
{
display:inline-block;
padding:1rem 0 1rem 2rem;
line-height:100%;
border-bottom-style:inset;
border-bottom-color: black;
border-bottom-width: 1px;
width:80%;
color:rgb(70,70,70);
}
.subNavItemActive
{
background-color:rgb(220,220,220);
}
  

@media only screen and (min-width:50rem)
{
  
  #main
  {
    width:100%;
    flex-direction:row;
    justify-content: flex-end;
    transform:unset;
    top:-4rem;
    right:0;
    background-color:unset;
    box-shadow:unset;
    overflow-y:unset;
    height:auto;
  }
  #main nav
  {
    display:none;
  }
  
  
  #hlektrologika, #thermansi-psiksi
  {
    position:absolute;
    flex-direction:row;
    border-radius:5px;

    box-shadow: 2px 2px 5px white;
    justify-content:space-between;
    top:6rem;
  }
   #hlektrologika
  {
    background-image:linear-gradient(rgb(90,90,150),rgb(180,180,230));
  }
  #thermansi-psiksi
  {
    background-image:linear-gradient(rgb(130,70,70),rgb(220,190,190));  
  }
 #hlektrologikaTitle, #thermansi-psiksiTitle
  {
   position:relative;
   cursor:pointer;
   font-size:1.3rem;
   padding:1rem 0;
   color:white;
   width:10rem;
   height:3rem;
   border-bottom-left-radius:1rem;
   border-bottom-right-radius:1rem;
   margin-right:1rem;
   box-shadow:4px 4px 12px black;
  }
  #hlektrologikaTitle:after, #thermansi-psiksiTitle:after
  {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
  width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0));
  }
  #hlektrologikaTitle.open
  {
    background-image:linear-gradient(rgb(90,90,150),rgb(180,180,230));
    transform:scale(0.98);
    box-shadow: 0px 1px 4px -2px #333;
  }
 #hlektrologikaTitle.open .titleName,   #thermansi-psiksiTitle.open .titleName
  {
    text-decoration:underline;
    color:black;
  }
  #thermansi-psiksiTitle.open
  {
    background-image:linear-gradient(rgb(130,70,70),rgb(220,190,190));
    transform:scale(0.98);
    box-shadow: 0px 1px 4px -2px #333;
  }
  
  
  
  #hlektrologikaTitle .titleName, #thermansi-psiksiTitle .titleName
  {
    display:block;
    width:100%;
    text-align:center;
  }
  #hlektrologikaTitle .titleArrow, #thermansi-psiksiTitle .titleArrow
  {
    display:none;
  }

  #hlektrologika>nav, #thermansi-psiksi>nav
  {
    position:absolute;
    top:100%;
    box-shadow:2px 2px 2px black;
    align-items:space-around;
    width:100%;
   }


  
  

  .subMainNavItem
  {
  
  font-size:1.rem;
  margin-top:3px;
  padding:1rem;
  background-color:unset;
  color:rgb(240,240,240);
  transition:color 0.5s;
  }
 .subMainNavItem.open
  {
    background-color:white;
  }
.subMainNavItem:hover,.subMainNavItem.open
{
  color:rgb(0,0,0);
}
  
.subMainNavTitleActive .titleName ,  .subNavItemActive a
{
    text-decoration:underline;
    color:rgb(0,0,0);
}
  
  
  
#oikiaki-egatastasiTitle, #kentriki-thermansiTitle, #pistopoiitikaTitle
  {
    flex-grow:0.3;
  }
  
  .subMainNavItem .titleName
  {
       text-align:right;
  }

  .subNavItem
  {
    font-size:1.5rem;
    color:rgb(100,100,100);
    background-color:white;    
    width:100%;
  }
  .subNavItem a
  {
  display:inline-block;
  line-height:4rem;
  width:90%;
  height:4rem;
  text-align:left;
  margin:0;
  padding:0 0 0 10%;
  }
  .subNavItem>a:hover
  {
     color:rgb(50,50,50);
    background-image:linear-gradient(to left, rgb(100,100,100),rgb(230,230,230));
  }

}