/* Layout controls for the centered 3-column shell (desktop).
   Adjust carefully to keep the original visual style while making the
   whole site responsive.
*/

html, body{
  background-color: #ffffff !important;
  overflow-x: hidden;
}

:root{
  --sidebar-width: 220px;
  --sidebar-gap: 18px;
  --main-max-width: 920px;
  --section-pad-x: 28px;
  --sticky-top: 22px;
}

@media (min-width: 992px){
  #page{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: var(--sidebar-gap);
    padding: 18px 16px;
    box-sizing: border-box;
  }

  header{
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    align-self: flex-start;
  }

  header .header-main{
    position: sticky !important;
    top: var(--sticky-top) !important;
    left: auto !important;
    right: auto !important;
    width: var(--sidebar-width) !important;
    height: auto !important;
    overflow-x: hidden;
    border-right: none;
    border-radius: 10px;
  }

  header .header-main,
  header .header-content{
    min-height: 0 !important;
  }

  header .header-mobile{ display: none !important; }

  #main.site-main{
    flex: 1 1 auto;
    width: min(100%, var(--main-max-width));
    max-width: var(--main-max-width);
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: auto !important;
    overflow: visible !important;
    perspective: none;
  }

  #main.site-main .pt-page{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    height: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: visible !important;
    transform: none !important;
    margin: 0 0 22px;
  }

  #main.site-main,
  #main.site-main .pt-page{ overflow-x: hidden !important; }

  #main.site-main img{ max-width: 100%; height: auto; }

  .site-main .pt-page .section-container{
    max-width: var(--main-max-width);
    width: 100%;
    margin: 0 auto;
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
    box-sizing: border-box;
  }

  .site-main .pt-page .section-container .row{ max-width: 100%; }

  .swiper-container,
  .VivaTimeline,
  .timeline,
  .container-fluid{ max-width: 100%; }

  .rightbar{
    position: sticky;
    top: var(--sticky-top);
    width: var(--sidebar-width);
    align-self: flex-start;
  }
}

@media (max-width: 991px){
  #page{
    display: block;
    padding: 0 0 20px;
  }

  header,
  #main.site-main,
  .rightbar{
    width: 100% !important;
    max-width: 100% !important;
  }

  header .header-content,
  header .header-main,
  .site-main,
  #main.site-main,
  .rightbar,
  .rightbar-main{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  header .header-main{
    width: 100% !important;
    border-radius: 0 !important;
  }

  header .header-mobile{
    display: flex !important;
  }

  .site-main .pt-page .section-container{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .rightbar{
    display: none !important;
  }

  .page-heading h2{
    font-size: 28px;
  }

  .about .col-lg-8,
  .about .col-lg-4,
  .contact-info .col-md-4,
  .portfolio-section .col-md-12,
  .row > [class*='col-']{
    width: 100% !important;
    float: none !important;
  }

  .events .col-md-6,
  .events .pull-left,
  .events .pull-right{
    width: 100% !important;
    float: none !important;
  }

  .events-desc{
    margin-top: 12px;
  }
}

@media (max-width: 767px){
  .site-main .pt-page .section-container{
    padding-left: 14px;
    padding-right: 14px;
  }

  .page-heading h2{
    font-size: 24px;
  }

  .home-name{
    font-size: 30px !important;
  }

  .home-tagline{
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .home-glass{
    padding: 20px 16px 18px !important;
  }

  .about-info,
  .blog-card,
  .contact-info .info-item{
    margin-bottom: 18px;
  }

  .VivaTimeline dl,
  .VivaTimeline dt,
  .VivaTimeline dd{
    width: 100% !important;
    margin-left: 0 !important;
  }
}

.blog-shell{ max-width: 980px; }

.pt-perspective, .pt-wrapper{
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
}

#main.site-main{
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
}

#main.site-main .pt-page{
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#page-preloader{ display:none !important; }

.header-main{
  background: #f6f7f9 !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.06) !important;
}

.header-main .header-menu li{
  border-top: 1px solid rgba(0,0,0,.06) !important;
}

.header-main,
.header-main a,
.header-main .header-name,
.header-main .header-menu li a{
  color: rgba(0,0,0,.78) !important;
}

.header-main .header-menu li a:hover,
.header-main .header-menu li.active a{
  background: rgba(0,0,0,.05) !important;
  color: rgba(0,0,0,.92) !important;
}

.header-main i,
.header-main svg{
  color: rgba(0,0,0,.62) !important;
}

html, body{
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.site-main,
#main.site-main,
.pt-perspective,
.pt-wrapper{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

.site-main .pt-page,
#main.site-main .pt-page{
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
  transform: none !important;
}

header .header-main,
.rightbar-main{
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}