html, body {position:absolute;top:0;left:0;display:block;
		margin:0;padding:0;width:100vw;height:100vh;box-sizing:border-box;
		}
div.container{
    height:99.8vh;width:99.8vw;
    display:grid;
    grid-template-areas: "logo titulo"
                         "nav nav"
                         "menuvert menuvert"
                         "main main"
                         "derecha derecha"
                         "footer footer";
    grid-gap:0px;
    grid-template-rows: 1fr 1fr 1fr 5fr 5fr 1fr;  
}
 

@media (max-width: 550px) {
  body{overflow:hidden;overflow-y:auto}
  body>.container{ height:200vh;}
  .sidebar-nav ul{margin:0;padding:0;width:100%; display:grid;grid-template-columns:repeat(7, 1fr);grid-gap:1px;}
   
  nav ul li, .sidebar-nav ul li{display:flex !important;justify-content:center;align-content:center;}
  .sidebar-nav ul li{border-radius: 8px 8px 0 0 !important;}
   nav ul li a, .sidebar-nav ul li a { font-size:2.3vw;writing-mode: vertical-lr;  transform: rotate(180deg);}   
  

}

/*@media (min-width: 450px) {
    div.container{
	grid-template-areas: 
        "logo titulo"
        "nav nav"
        "main main" 
        "menuvert menuvert"
        "derecha derecha"
        "footer footer";
        grid-template-columns: 1fr 5fr;
        grid-template-rows:1fr 0.3fr 3.5fr 0.3fr  2fr 0.3fr;
    }       
    nav ul li a{
      font-size:2.5vw;
    } 
  .sidebar-nav ul li{margin:0;padding:0;}
.page-header h1{font-size:2.8vw;}
} */ 

@media (min-width: 550px) {
    div.container{
	grid-template-areas: 
        "logo titulo titulo"
        "nav nav menuvert"
        "main main menuvert"
        "derecha derecha derecha"
        "footer footer footer";
        grid-template-columns: 3fr 10fr 2fr;
        grid-template-rows: 1fr 1fr 3fr 1fr 1fr;
    }  
    nav ul li a {
      font-size:1.9vw;
    }   
  body{overflow-y:auto;overflow-x:hidden;direction:rtl; scrollbar-width: thin;scrollbar-color: blue orange; }
  body::-webkit-scrollbar{width:7px;}
  body::-webkit-scrollbar-track{background:blue;}
  body::-webkit-scrollbar-thumb{background:orange;  border-radius: 20px;  border: 3px solid orange;}
  body{scroll-behavior: smooth;}
  .container{direction:ltr;}
   .sidebar-nav{height:59vh;margin:12vh 2px 0 0;}
.page-header h1{font-size:2.6vw;}
}

@media (min-width: 750px) {
    div.container{
	grid-template-areas: 
        "logo titulo titulo titulo"
        "nav nav menuvert derecha"
        "main main menuvert derecha"
        "footer footer footer footer";
        grid-template-columns: 3fr 10fr 2fr 3fr;
        grid-template-rows: 22.70vh 4.53vh 68.04vh 4.53vh;
    }
  
     
  body{direction:inherit; scrollbar-width: inherit;scrollbar-color: inherit; }
  body::-webkit-scrollbar{width:7px;}
  body::-webkit-scrollbar-track{background:inherit;}
  body::-webkit-scrollbar-thumb{background:inherit;  border-radius: inherit;  border: 3px solid inherit;}
  body{scroll-behavior: inherit;}
  
      body {overflow:hidden;
		}
        #titulo p{
            margin:0 15% 0 0;
            font-size: 3.5vw;
        }        
        nav ul li a{font-size:1.;
        }
   .sidebar-nav{height:59vh;margin:12vh 2px 0 0;}
.page-header h1{font-size:2.5vw;}
}
@media (min-width: 800px) {
        nav ul li a{font-size:1.65vw;
        }
.page-header h1{font-size:2.4vw;}
}
@media (min-width: 850px) {
        nav ul li a{font-size:1.35vw;
        }
.page-header h1{font-size:2.3vw;}
}