/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  
  
}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  
  
  
}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  
  
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1023px) {
  
  #nav-large {
    display: none;
    position: fixed;
    width: 50%;
    top: 12%;
    left: 50%;
    margin-left: -25%;
    z-index: 4;
  }
  #nav-small {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    background-color: rgba(0,0,0,0.8);
  }
  #nav-small a {
    color: white;
    float: right;
    padding: 1% 5% 1%;
  }
  .block-width-half {
    width: 186px;
  }
  .main-menu-link-text {;
    width: 70%;
  }
  
}

@media (min-width: 768px) and (max-width: 823px) and (orientation: landscape) {
  
  #nav-large {
    display: none;
    position: fixed;
    width: 33%;
    top: -15%;
    left: 66%;
    margin-left: -33%;
    z-index: 4;
    transform: rotate(-90deg);
  }
  #nav-small {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    background-color: rgba(0,0,0,0.8);
  }
  #nav-small a {
    color: white;
    float: right;
    padding: 1% 5% 1%;
  }
  .main-menu-link-text {
    left: 25%;
    bottom: 25%;
    transform: rotate(90deg);
    width: 40%;
    text-align: center;
  }
  .home .main-menu-link-text {
    left: 25%;
    bottom: 26%;
  }
  .flexbox-center {
    transform: rotate(90deg);
  }
  .mobile-align {
    margin-bottom: -10px;
  }
  .block-width-half {
    width: 128px;
  }
  
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/



@media (min-width: 668px) and (max-width: 767px) {
  
  #nav-large {
    display: none;
    position: fixed;
    width: 40%;
    top: -15%;
    left: 60%;
    margin-left: -30%;
    z-index: 4;
    transform: rotate(-90deg);
  }
  #nav-small {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    background-color: rgba(0,0,0,0.8);
  }
  #nav-small a {
    color: white;
    float: right;
    padding: 1% 5% 1%;
  }
  .main-menu-link-text {
    left: 25%;
    bottom: 26%;
    transform: rotate(90deg);
    width: 40%;
    text-align: center;
  }
  .home .main-menu-link-text {
    left: 25%;
    bottom: 36%;
  }
  .flexbox-center {
    transform: rotate(90deg);
  }
  .mobile-align {
    margin-bottom: -10px;
  }
  .block-width-half {
    width: 142px;
  }
  
}

@media (min-width: 737px) and (max-width: 740px) {
    
  #nav-large {
    width: 39%;
    top: -25%;
  }

}

@media (min-width: 481px) and (max-width: 667px) {
  
  #nav-large {
    display: none;
    position: fixed;
    width: 40%;
    top: -15%;
    left: 60%;
    margin-left: -30%;
    z-index: 4;
    transform: rotate(-90deg);
  }
  #nav-small {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    background-color: rgba(0,0,0,0.8);
  }
  #nav-small a {
    color: white;
    float: right;
    padding: 1% 5% 1%;
  }
  .main-menu-link-text {
    left: 25%;
    bottom: 25%;
    transform: rotate(90deg);
    width: 40%;
    text-align: center;
  }
  .home .main-menu-link-text {
    left: 25%;
    bottom: 26%;
  }
  .flexbox-center {
    transform: rotate(90deg);
  }
  .mobile-align {
    margin-bottom: -10px;
  }
  .block-width-half {
    width: 110px;
  }
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (max-width: 320px) {
  
  #nav-large {
    display: none;
    position: fixed;
    width: 70%;
    top: auto;
    left: 50%;
    margin-left: -35%;
    z-index: 4;
  }
  #nav-small {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    background-color: rgba(0,0,0,0.8);
  }
  #nav-small a {
    color: white;
    float: right;
    padding: 1% 5% 1%;
  }
  ol.type {
    padding-right: 0; 
  }
  ol.type li {
    margin-left: 0;
  }
  ol.type li a {
    font-size: 9.3px;
  }
  .mobile-align {
    font-size: 14px;
    left: 18px;
    bottom: 10px;
  }
  .home .main-menu-link-text {
    left: 10px;
  }
  
}

@media (min-width: 321px) and (max-width: 374px) {
  
  #nav-large {
    display: none;
    position: fixed;
    width: 70%;
    top: auto;
    left: 50%;
    margin-left: -35%;
    z-index: 4;
  }
  #nav-small {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    background-color: rgba(0,0,0,0.8);
  }
  #nav-small a {
    color: white;
    float: right;
    padding: 1% 5% 1%;
  }
  ol.type {
    padding-right: 5px; 
  }
  ol.type li {
    margin-left: 0;
  }
  ol.type li a {
    font-size: 12px;
  }
  .mobile-align {
    font-size: 14px;
    left: 18px;
    bottom: 10px;
  }
  .home .main-menu-link-text {
    left: 10px;
  }
  .gallery_title_main {
    padding-left: 5px;
  }
  
}

@media (min-width: 375px) and (max-width: 410px) {
  
  #nav-large {
    display: none;
    position: fixed;
    width: 70%;
    top: auto;
    left: 50%;
    margin-left: -35%;
    z-index: 4;
  }
  #nav-small {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    background-color: rgba(0,0,0,0.8);
  }
  #nav-small a {
    color: white;
    float: right;
    padding: 1% 5% 1%;
  }
  .block-width-half {
    width: 128px;
  }
  ol.type {
    padding-right: 5px; 
  }
  ol.type li {
    margin-left: 0;
  }
  ol.type li a {
    font-size: 12px;
  }
  .bio-image {
    top: 1.6%;
    background-size: 67.3% 91.6%;
  }
  
}

@media (min-width: 411px) and (max-width: 480px) {
  
  #nav-large {
    display: none;
    position: fixed;
    width: 70%;
    top: auto;
    left: 50%;
    margin-left: -35%;
    z-index: 4;
  }
  #nav-small {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 4;
    background-color: rgba(0,0,0,0.8);
  }
  #nav-small a {
    color: white;
    float: right;
    padding: 1% 5% 1%;
  }
  .block-width-half {
    width: 142px;
  }
  ol.type {
    padding-right: 10px; 
  }
  ol.type li {
    margin-left: 10px;
  }
  ol.type li a {
    font-size: 12px;
  }
  
}


@media (min-width: 569px) and (max-width: 667px) {
  
  .block-width-half {
    width: 128px;
  }
  
}

/* Stable mobile navigation overrides (keeps desktop behavior unchanged). */
@media (max-width: 991px) {
  #nav-small {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    min-height: 64px;
    box-sizing: border-box;
    z-index: 4;
    background-color: rgba(0,0,0,0.8);
    overflow: visible;
  }

  #nav-small a {
    color: #fff;
    position: relative;
    right: auto;
    top: auto;
    display: block;
    float: right;
    padding: 10px 18px;
  }

  #nav-large {
    display: none;
    position: fixed;
    top: 64px;
    left: 50%;
    width: 92%;
    max-width: 360px;
    max-height: calc(100vh - 76px);
    margin-left: -46%;
    z-index: 4;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    transform: none !important;
  }

  .main-menu-link-text,
  .home .main-menu-link-text,
  .flexbox-center {
    transform: none !important;
  }

  .main-menu-link-text {
    left: 8%;
    bottom: 8%;
    width: auto;
    text-align: left;
  }

  .block-width-half {
    width: 50%;
  }

  .content-main {
    padding-left: 0;
  }

  html,
  body {
    overflow-x: hidden;
  }
}

@media (min-width: 992px) {
  #nav-small {
    display: none !important;
  }
}

/* Keep production desktop layout on desktop devices for vesti page. */
@media (max-width: 991px) and (pointer: fine) {
  body.vesti-page .main-navigation {
    position: absolute;
    float: none;
    width: 310px;
    padding-right: 0;
    margin: 0;
  }

  body.vesti-page #nav-large {
    display: block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 310px;
    max-width: none;
    margin-left: 0;
    transform: none !important;
  }

  body.vesti-page #nav-small {
    display: none !important;
  }

  body.vesti-page .content-main {
    padding-left: 340px !important;
  }

  body.vesti-page #shadow {
    display: none !important;
  }
}