/*responsive*/

 @media screen and (orientation: landscape) and (min-width: 1100px) {
main {
    width:  calc(80% - 5rem);    
}


}

@media screen and (min-width: 1100px) {
    
[data-balloon]:before, [data-balloon]:after  {display:none;}    
    
}

 @media screen and (max-width: 1100px) {
aside {
    width:240px;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;     
}


div#sidebar {
    width:240px;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;      
}

#sidebar nav ul li > span:not(.lnr) {display:none;}
#sidebar nav ul li > span.lnr {margin-right:0;}

#contents {
    width:calc(100% - 240px);
    left:240px;
  -webkit-transition: all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;       
}

article section {max-width:90%;}

[data-balloon]:after {
    font-family:'muli'!important;
}

}

 @media screen and (max-width: 768px) {
     
     #leo a {bottom:20px;right:20px;}
     
     .mobile-sb {display:block;}
     
     main {
    margin-top:0;
    width:  100%;    
    height:100%;
}

header {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
   justify-content: center;     
}     
     
nav.desktop_menu {display:none;}
nav.mobtabs {display:block;}  

#contents {
    width:100%;
    max-width:100vw;
    left:0;    
}

article section {padding:2%}

aside {display:none;}

div.searchblog {display:none;}

.posts .captions, .posts . pads, .tabstuff, div.postnotes {padding:30px;}
li.clines {padding-left:30px;padding-right:30px;}
}

 @media screen and (max-width: 600px) {
     
#contents, article section {width:100%;max-width:100vw;}

.posts .captions, .posts .pads, .tabstuff, div.postnotes {padding:20px;}
li.clines {padding-left:20px;padding-right:20px;}


}

@media screen and (max-width: 500px) {
iframe#askbox, iframe#ask_form {height:250px;}    
}

 @media screen and (max-width: 400px) {

.mobtabs ul li {
    font-size:12px;
    margin-right:16px;
}

.mobtabs ul li:before {margin-right:6px;}

.navigrid {
     grid-template-columns: 100%; 
}

.navi-items {padding-left:0;margin-top:16px;}

}


@supports (-webkit-overflow-scrolling: touch) {
  main {margin-top:-60px;height:calc(100vh + 60px);}
}