/* NOCZILLA mobile responsive layer */

html,
body{
  overflow-x:hidden;
  max-width:100%;
}

img,
video,
iframe{
  max-width:100%;
}

.tradingview-widget-container{
  width:100% !important;
  overflow:hidden;
}

@media (max-width:768px){

  body{
    font-size:15px;
  }

  .topbar{
    position:relative !important;
    height:auto !important;
    min-height:unset !important;
  }

  .topbar-inner{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    padding:10px !important;
    height:auto !important;
  }

  .topbar a,
  nav a{
    width:auto !important;
    display:inline-block !important;
    padding:8px 10px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    white-space:nowrap !important;
  }

  h1{
    font-size:30px !important;
    line-height:1.15 !important;
  }

  h2{
    font-size:22px !important;
  }

  .hero,
  .section,
  .container,
  .content{
    width:100% !important;
    max-width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
    box-sizing:border-box !important;
  }

  .grid,
  .cards,
  .card-grid{
    grid-template-columns:1fr !important;
  }

  .card,
  .panel,
  .box{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}

@media (max-width:480px){

  .topbar a,
  nav a{
    font-size:12px !important;
    padding:7px 8px !important;
  }

  h1{
    font-size:25px !important;
  }
}