.layout.d9 .sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}

.layout.d9 .sidenav .closebtn {
position: absolute;
top: 10px;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

.layout.d9 #main {
transition: margin-left .5s;
}

.layout.d9 #main p.title {
font-size: 25px !important;
padding-top: 12px; 
text-align: center;  
}

.layout.d9 #main .row {
padding: 0 !important;
}

.layout.d9 #main .navbtn {
display: block;
width: 20px;
margin-bottom: 0;
margin-top: 3px;
font-size: 36px !important;
}

.layout.d9 .sidenav ul.items li  { 
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:center;
border-bottom-width: 1px;
border-bottom-style: solid;
width: 100%;
height: 70px;
padding: 10px 5px;
}

.layout.d9 .sidenav ul.items li p { 
font-size: 13px;	
margin: 0 0 0 10px;
}

.layout.d9 .sidenav li img {
width: 30px;
height: 30px;	
margin: 0 0 0 10px;
max-height: 100%;
}

.layout.d9 .sidenav li p {
font-size: 10px; 
line-height: 20px; 
height: 20px; 
overflow: hidden; 
}

.layout.d9 #main .box .wrapper {
  height: 100%;
  margin: 30px;
  padding: 30px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
.layout.d9 #main .box .wrapper {
    flex-flow: column wrap;
  }
}

.layout.d9 #main .box .wrapper .grid {
  list-style-type: none;
  transform: rotate(45deg);
  position: relative;
  height: 235px;
  width: 235px;
  margin: 50px;
  padding: 0;
}
.layout.d9 #main .box .wrapper .grid li {
  width: 100px;
  height: 100px;
  margin: 10px;
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}

.layout.d9 #main .box .wrapper .grid li img {
  display: block;
  transform: rotate(-45deg);
  width: 85px;
  height: 85px;
  padding: 15px;
  margin: 8px;
}

.layout.d9 #main .box .wrapper .grid li:nth-child(1) {
  top: 0;
  left: 0;
}
.layout.d9 #main .box .wrapper .grid li:nth-child(2) {
  bottom: 0;
  left: 0;
}
.layout.d9 #main .box .wrapper .grid li:nth-child(3) {
  top: 0;
  right: 0;
}
.layout.d9 #main .box .wrapper .grid li:nth-child(4) {
  bottom: 0;
  right: 0;
}
.layout.d9 #main .box .wrapper .grid li:nth-child(n+5) {
  display: none;
}

@media screen and (max-width: 1239px) {
.layout.d9 #main .box .wrapper .grid {
    height: 180px;
    width: 180px;
    margin: 40px;
  }
.layout.d9 #main .box .wrapper .grid li {
    height: 75px;
    width: 75px;
  }
.layout.d9 #main .box .wrapper .grid li img {
  display: block;
  width: 65px;
  height: 65px;
  padding: 12px;
  margin: 5px;
}
.layout.d9 #main .box {
 position: absolute; 
 width: 100%; 
 height: auto; 
 bottom: 0; 
 top: initial; 
}
}