*{margin:0;padding:0;box-sizing: border-box;font-family: 'Segoe UI','Roboto',sans-serif;}

.container {
    display: grid;
    grid-template-rows: auto auto 50px;
    grid-template-areas: 'header' 'content' 'footer';    
    grid-gap: 10px;
    max-width: 100%;
    margin: 0 auto;
    min-height: 100vh; 
}

.inner{display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    grid-template-areas: 'main' 'aside';   
    grid-gap: 10px;max-width: 100%;min-height: 100vh;padding-top:35px; padding-bottom:40px;
  }

header { grid-area: header;background:#020129;color:white;border-bottom:2px solid green;}

.logo a{font-size: 22px;color:#b9b7b7;line-height:1.8;font-weight:500;padding:5px 0;}
.logo a:hover {  background-color: unset;  color:unset;text-decoration: none;}

.content{grid-area: content;}

main { grid-area: main;border-radius: 10px;padding-bottom:40px;}

aside {grid-area: aside;border-radius: 10px;}

footer {grid-area: footer;border-top:2px solid #036;}

footer .bottom {border-radius: 5px;display: flex;flex-wrap: wrap;}

#menu {display: none; }
  
#menu li{list-style: none;}

#menu  .selected  a{      
  font-weight: bold; color:white;
}

header a {
  color: white;
  padding: 12px 14px;
  text-decoration: none;
  font-size: 14px;
  display: block;
}
  
header a.icon {
  background: black;
  display: block;
  position: absolute;
  width:48px;height:48px;
  right: 0;
  top: 0;
}
  
header a:hover {
 /*background-color: greenyellow;*/
  color: greenyellow;text-decoration: underline;
}
  
.nav, main, aside, .bottom{padding:0 20px;}
  
h1{font-size:120%;}
h1 a{color:#024;font-weight:700;text-decoration: none;} 
h2,h3,h4{font-size:105%;color:#024;margin-bottom:2px;font-weight:500;text-decoration: none;} 
a{color:#024}
p{padding:10px 0;line-height:1.4;font-size:95%}

.bottom{display:flex;justify-content: space-between;padding-top:20px;font-size:85%;}
.bottom a{display:inline-block;}
aside li {display:inline-block;padding:5px;} 
.aside-listing .current{border:thin greenyellow solid;background-color:#024;text-decoration:none;padding:2px;}
.aside-listing .current a{color:white;} 

.ete-eka{display: flex; flex-wrap: wrap;}
.ndito{display: flex; flex-wrap: wrap;}

.img{border: #444 solid 1px;text-align: center;padding:5px;margin:10px 5px}
.desc{text-align:center;font-size:80%}
.ete-eka img{width:100px;height:100px}
.ndito img{width:80px;height:80px}

.imgleft{float:left;padding-right:10px; padding-top:5px;border:0;}
.imgright{float:right;padding-left:10px; padding-top:5px;border:0;}
.pictureLeft{padding-right:10px; float:left; padding-top:10px;border:0;}
.pictureLeftFirst{padding-right:10px; float:left; clear:left;padding-top:5px;border:0;}
.pictureLeftLast{padding-right:10px; float:left; padding-top:10px; padding-bottom:0px; border:0;}
.pictureCenter{text-align:center;display:block;border:0;}
.pictureRightFirst{padding-left:10px; float:right; padding-top:0px;border:0;}
.pictureRight{padding-left:10px; float:right; padding-top:10px;border:0;}
.pictureRightLast{padding-left:10px; float:right; padding-top:10px; padding-bottom:0px; border:0;} 


#contact{margin:30px 0;}
.form-field  label{line-height: 2em;font-weight: 500;}
.form-field  input{width:80%;line-height: 2em;border:solid thin #ccc;}
.form-field  .required{color:red}
.form-field  textarea{min-height:120px;width:80%;}
#contact .buttons [type=submit]{width:auto;color:#024;font-weight:bold;padding:5px}
#contact .buttons [type=reset]{width:auto;color:#024;font-weight:bold;padding:5px}


  
  /* SEARCH */ 
   .asearch {
    display: flex;
    align-items: flex-end;
}

.searchbar {
    position: absolute;width:180px; top:5px;right:50px;
}

.searchbar input[type="text"] {
    border: 0;
    padding: 0;
    width: 0px;
    height: 30px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.searchbar .icon2 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 35px;
    height: 30px;
    background: none;
    border-radius: 3px;
    color: #fff;
    transition: all 0.5s 0.3s ease;
}

.searchbar .icon2 i {
    position: absolute;
    top: 12px;
    right: 3px;
    transform: translate(-20%, -20%);
    cursor: pointer;
}

.searchbar .icon2.active {
    background: #062333;
    transition: all 0.3s ease;
}

.searchbar input[type="text"].active {
    width: 150px;
    padding: 0 10px;
    transition: all 0.5s 0.2s ease;
}



    
@media (min-width: 768px) {
    .container {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: 49px auto 50px;
        grid-template-areas: 'header header header' 'content content content' 'footer footer footer';    
        grid-gap: 10px;
        max-width: 100%;
        margin: 0 auto;
        min-height: 100vh; 
    }
    .nav, .inner, .bottom{width:950px;margin:0 auto; }
    
    .inner {
        display: grid;
        grid-template-rows:  auto;
        grid-template-columns: auto 270px;
        grid-template-areas: 'main aside';    
        grid-gap: 10px;min-height: 100vh;
		    padding-bottom:100px;
    }
        
    header a.icon {
      display: none;
    }
    .nav {
      display:flex;
      justify-content: space-between;
      align-items: center;
    }
    
    #menu{display:flex;justify-content: space-between;}
    #menu li{list-style: none; display:inline;}
    #menu a {
      font-size:17px;
      color:#b9b7b7;
      text-decoration: none;
      display: inline-block;
    }
    
    #menu a:hover {
      background-color:black;
      color: white;
     
    }
	
    aside li {
         display:block;list-style: none; line-height:2.2;padding:0;text-align: right;
    }
    aside a{text-decoration: none;}
    
    /*.side-link{padding:unset;}*/
    
    footer a{text-decoration: none;}
    
    
     /* SEARCH */ 
     
    .searchbar {
      position: relative;width:220px;right:0;
    }
    
    .searchbar .icon2.active {
       height:30px;
    }
    
    .searchbar input[type="text"].active {
      width: 190px;
    }  

    }