/* The side navigation menu */  
 .sidenav {  
   height: 100%; /* 100% Full-height */  
   width: 0; /* 0 width - change this with JavaScript */  
   position: fixed; /* Stay in place */  
   z-index: 1; /* Stay on top */  
   top: 0;  
   left: 0;  
   text-align: left;
   background-color: white; /* Black*/     
   overflow-x: hidden; /* Disable horizontal scroll */  
   padding-top: 60px; /* Place content 60px from the top */  
   transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */  
 }  
 /* The navigation menu links */  
 .sidenav a {  
   /*padding: 8px 8px 8px 32px;  */
   /*padding: 8px 8px 8px 8px;  */
   padding: 8px 8px 8px 15px;  
   margin-left: 10px;
   text-decoration: none;  
   font-size: 18px;  
   font-family: Gotham;  
   color: #111;  
   display: block;  
   border-bottom-style: solid;
   border-bottom-width: 1px;
   transition: 0.3s  
 }  
 /* When you mouse over the navigation links, change their color */  
 .sidenav a:hover, .offcanvas a:focus{  
   color: #111;  
 }  
 /* Position and style the close button (top right corner) */  
 .sidenav .closebtn {  
   position: absolute;  
   top: 0;  
   /*right: 25px;  
   font-size: 20px;  */
   right: 5px;  
   font-size: 25px;  
   margin-left: 10px;  
 }  
 /* Style page content - use this if you want to push the page content to the right when you open the side navigation */  
 #container {  
   transition: margin-left .5s;  
/*   padding: 20px;  */
 }  

.sidenav-link-btn{text-align:center;}
.sidenav-link-btn a{display:inline-block; width:40%; padding:10px 0px; font-size:1.2em; font-weight:600; background-color:#7a2bb2; text-align:center; color:#fff;}


 /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */  
 @media screen and (max-height: 480px) {  
   .sidenav {padding-top: 15px;}  
   .sidenav a {font-size: 16px;}  
 }