/* Responsive Styles 
    Author: Nate Look (nate@natelook.com)
*/

@media (max-width: 1198px) {
  .social-media-container {
    display: block;
    position: relative;
    right: auto;
    margin: 10px auto 0;
  }

  #menu-social-media {
    padding: 0;
  }

  .nav {
    margin: 0;
  }


}

@media (max-width: 991px) {
  .menu-item {
    font-size: 1rem;
    margin: 0 13px;
  }

  .jkbf-link {
    font-size: .8rem;
  }

  .sub-nav-button {
    font-size: .8rem;
    padding: 5px 15px;
  }

  .nav-buttons-container {
    margin-top: 20px;
  }
}

/********
iPad Pro
********/

@media (max-width: 1024px) {
  /* Online Art Portfolios */
  .oapg {
    font-size: 13px;
  }

  .case-study-title {
    font-size: 12px;
    font-weight: 400;
  }
}

/********
iPad
********/

@media (max-width: 768px) {
  /* Header */
  body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
  }

  .mobile-jkbf-link {
    display: block;
    font-size: .8rem;
    margin: 0 auto;
    text-align: center;
  }

  .nav-buttons-container {
    display: none;
  }

  .header-subnav .button a {
    padding: 5px 15px;
  }

  #header-right {
    float: none;
    position: absolute;
    top: 20px;
    right: 50px;
  }

  #navbarNavDropdown li {
    padding: 10px 10px;
  }

  #header-social-area-wrapper {
    display: none;
  }

  .site-branding {
    margin-top: 10px;
  }

  .hamburger {
    display: flex;
  }

  .sub-menu {
    position: relative;
    background-color: var(--green);
    border: none;
    min-width: 0;
  }

  /* #site-navigation {
    display: none;
  } */

  #main-menu {
    display: none;
  }

  #mobile-main-menu {
    list-style: none;
    padding: 0;
    background-color: var(--green);
    width: 150px;
    padding: 10px;
    text-align: center;
    position: absolute;
    right: 0;
    z-index: 100;
  }

  .container {
    position: relative;
  }

  .menu-item {
    margin: 20px 0;
  }

  .menu-item:first-child {
    margin: 0;
  }

  .menu-item a {
    font-size: 1rem;
    color: #fff;
  }

  .top-nav-link {
    color: #fff !important;
  }

  /* Rainbow Wheel */
  .rainbow-wheel h3 {
    font-size: 19px;
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.3rem;
  }

  #home-2 {
    display: none;
  }

  #home-25 {
    display: block;
  }

  #home-25 .bottom-rainbow-row {
    margin-top: 30px;
  }

  #home-25 .btn.btn-primary {
    position: relative;
  }

  .highlight-item {
    height: 200px;
  }

  .rainbow-text .btn.btn-primary {
    bottom: 0;
  }

  .rainbow-wheel p,
  .video-list-item p {
    font-size: 14px;
    line-height: 1.3rem;
  }

  .top-rainbow-row img {
    position: relative;
    top: 20px;
  }

  .case-study-container, .talk-poba-container {
    height: auto;
  }

  .home-page-highlight {
    height: 300px;
  }

  .fluid-width-video-wrapper {
    height: 300px
  }

  #home-video-player {
    height: 300px;
  }

  #home-8 {
    height: auto;
  }

  .latest-news-item {
    height: 200px;
  }

  .show-mobile {
    display: block;
  }

  .hide-mobile {
    display: none;
  }

  /* Video Player Section */
  .video-list-item {
    padding: 10px;
  }

  .video-list h4 {
    font-size: 20px;
  }

  /* Case Studies */


  /* Partners and Affiliates */
  .partner-item img {
    width: 100px !important;
  }

  .portfolio-grid {
    grid-template-columns: 50% 50%;
  }

  /* Press and Media Resources */
  .press-nav a {
    font-size: 14px;
  }

  /* Online Art Portfolios */
  .oapg {
    font-size: 14px;
    height: 60px;
    position: relative;
  }

  .oapg {
    float: none;
    display: inline-block;
    margin-right: 10px;
    width: 100%;
  }

  .oapg a {
    display: inline;
  }

  .oapg a:last-child {
    position: absolute;
    right: 20px;
    bottom: 0;
  }

  .select-grid {
    grid-template-columns: 100%;
  }

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* iPhone */
@media (max-width: 414px) {
  .custom-logo {
    width: 200px;
    height: 70px;
  }

  #header-left {
    display: flex;
    display:-webkit-flex;
    align-items: center;
  }

  .hamburger {
    display: flex;
    display:-webkit-flex;
  }

  .collapse {
    display: none;
  }

  
  .portfolio-grid {
    grid-template-columns: 100%;
  }

  #navbarNavDropdown {
    background-color: #333;
    position: absolute;
    width: 100%;
    top: -88px;
    padding: 20px;
  }

  #navbarNavDropdown li {
    color: #fff;
    border-bottom: 1px solid #aaa;
    padding-left: 10px;
  }

  #navbarNavDropdown li a {
    color: #fff;
    float: none;
  }

  ul#menu-item > .menu-item {
    border-color: #fff;
  }

  .sub-menu {
    border: none;
    top: auto;
  }

  .sub-menu li {
    border-bottom: 1px dotted #aaa !important;
  }

  .sub-menu {
    position: relative;
  }

  #header-left img {
    display: block;
  }

  #header-right {
    position: relative;
    display: block;
    text-align: center;
    top: 0;
    right: 0;
    margin-top: 10px;
  }

  .logged-in #header-right {
    float: none;
  }

  #site-tag-line {
    font-size: 12px;
    text-align: center;
    margin-bottom: 5px;
  }

  .headr_right_link {
    margin: 0;
  }

  .header-subnav .button {
    font-size: 10px;
    height: 30px;
  }

  .header-subnav .button a {
    padding: 5px 15px;
  }

  .talk-poba {
    display: none;
  }

  .mobile-talk-poba {
    display: block;
  }

  .case-studies {
    margin-top: 0;
  }

  .mob-title {
    text-align: center;
    margin-bottom: 15px;
  }

  .mobile-rainbow-wheel {
    display: block;
    padding: 50px 0;
  }

  .rainbow-wheel {
    display: none;
  }

  .mobile-rainbow-wheel h3 {
    margin-bottom: 10px;
  }

  .mobile-rainbow-section {
    margin: 15px 0;
  }

  /* .n-manage-one,
  .n-manage-two,
  .n-manage-three,
  .n-manage-four,
  .top-rainbow-row img,
  .bottom-rainbow-row img {
    position: relative;
  }

  .rainbow-wheel,
  .n-manage-two,
  .n-manage-four {
    text-align: center;
  }

  .top-rainbow-row {
    padding-top: 10px;
  }

  .n-manage-one {
    top: -10px;
  }

  .n-manage-two {
    top: -165px;
  }

  .top-rainbow-row img {
    top: 165px;
    width: 90%;
  }

  .n-manage-three {
    top: 190px;
  }

  .bottom-rainbow-row img {
    top: -135px;
    width: 90%;
  }

  .n-manage-four {
    top: 30px;
  } */

  .rainbow-wheel-image {
    display: block;
    width: 100%;
  }

  .mobile-rainbow-wheel,
  .n-manage-two,
  .n-manage-four {
    text-align: center !important;
  }

  .top-rainbow-mobile {
    margin-top: 30px;
    margin-bottom: 5px;
  }

  
  .bottom-rainbow-mobile {
    margin-bottom: 30px;
    margin-top: 5px;
  }

  .partner-item img {
    width: 60px !important;
  }

  .n-partners-section h3 {
    font-size: 27px;
  }

  .support-wrapper a {
    font-size: 22px;
  }

  .oapg {
    height: 100px;
  }

  .artist-listing .bio {
    padding: 0;
    margin-top: 20px;
  }

  .homepage-highlight {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 375px) {
  /* Rainbow Wheel */
  .top-rainbow-row img {
    width: 100% !important;
  }

  .bottom-rainbow-row img {
    width: 100% !important;
  }
}