/* @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

} */

@media (orientation: portrait) {
  .top-side----main {
    padding: 10px;
    background-color: #334858;
    display: flex;
    align-items: center;
    height: auto;
    font-size: 20px;
    justify-content: space-between;
  }
  .top-side----main .logo {
    text-transform: uppercase;
    color: #fff;
    font-family: 'Varela Round', sans-serif;
  }
  .left-side---logo {
    display: none;
  }
  .top-side----main .menu-btn {
    display: flex;
    justify-content: flex-end;
  }
  .left-side----main {
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;
    height: 100%;
    position: absolute;
    transition: 0.5s;
    transform: translateX(-100%);
  }
  .left-side---menu ul {
    display: grid;
    grid-template-columns: 60px 60px 60px;
  }
  .left-side-active {
    transition: 0.5s;
    transform: translateX(0);
  }
.right-side----content{
flex-direction: column;
}
}