/* ========================
   @media (min-width: 1900px)
   Extra-Wide Displays (e.g., 4K)
   ======================== */
@media (min-width: 1900px) {
  .container {
    width: 1770px;
  }
}

/* ========================
   @media (min-width: 1600px)
   Large Screens / High-Res Displays
   ======================== */
@media (min-width: 1600px) {
  .container {
    width: 1370px;
  }
}

/* ========================
   @media (min-width: 1333px)
   Desktop Large (Standard widescreens)
   ======================== */
@media (min-width: 1333px) {
  .container {
    width: 1275px;
  }

  .menu__head {
    margin-left: 0;
  }

  .menu__head_line2 {
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
  }

  .menu__head_line3 {
    margin-left: 0;
    margin-top: unset;
  }

  .menu__item {
    margin-left: 0 !important;
  }

  .portfolio-box {
    width: 405px !important;
  }

  .skateboard-graphics {
    width: 405px !important;
  }
}

@media (max-width: 1024px)

{

.footer {display:none;}
}

/* ========================
   @media (min-width: 1024px) and (max-width: 1332px)
   Mid-Size Desktops and Laptops
   ======================== */
@media (min-width: 1024px) and (max-width: 1332px) {
  .container {
    width: 945px !important;
  }

   .logo-link {margin: 0px 0 12px -61px;}


}

/* ========================
   @media (min-width: 1024px)
   Desktop Screens (Base Styles)
   ======================== */
@media (min-width: 1024px) {
  #pageflip {
    margin-top: 16px;
    width: 100%;
    display: block;
  }

  .portfolio-box {
    width: 294px;
  }
}

/* ========================
   @media (min-width: 992px) and (max-width: 1023px)
   Small Laptops / Large Tablets
   ======================== */
@media (min-width: 992px) and (max-width: 1023px) {
  .portfolio-box {
    width: 295px;
  }

  .skateboard-graphics {
    width: 147px !important;
  }

   .logo-link {margin: 0px 0 12px -49px;}


}

/* ========================
   @media (min-width: 768px) and (max-width: 991px)
   Tablets and Small Laptops
   ======================== */
@media (min-width: 768px) and (max-width: 991px) {

  .logo-link {margin: 0px 0 12px -50px;}

  section h1,
  article h1,
  nav h1,
  aside h1 {
    font-size: 36px !important;
  }

  h1.outline {
    font-size: 36px;
  }

  .fill-content {
    font-size: 36px;
  }

  h1,
  h4 {
    font-size: 36px;
    line-height: 44px;
  }

  h2,
  h5,
  .h2link {
    font-size: 23px;
    line-height: 41px;
  }

  h3,
  h6 {
    font-size: 21px;
    line-height: 41px;
  }

  body {
    font-size: 21px;
    line-height: 41px;
  }

  .portfolio-filters {
    font-size: 21px;
  }

  .portfolio-filters a,
  .portfolio-filters a:hover {
    font-size: 21px;
  }

  a,
  .footer a {
    font-size: 18.5px;
    line-height: 41px;
    margin: 0 0;
  }

  .container {
    width: 687px;
  }

  .portfolio-box {
    width: 323px;
  }

  .portfolio-box-decks {
    position: relative;
    width: 336px;
  }
}

/* ========================
   @media (max-width: 767px)
   Phones & Small Tablets
   ======================== */
@media (max-width: 767px)
{

  .logo-link {margin: 0px 0 12px -50px;}

  /* --- Typography Overrides --- */

  section h1,
  article h1,
  nav h1,
  aside h1 {
    font-size: 28px !important;
  }



  h1.outline {
    font-size: 28px;
  }

  .fill-content {
    font-size: 28px;
  }

  h1,
  h4 {
    font-size: 28px;
    line-height: 38px;
  }

  .titlecaps {
    font-size: 28px;
    line-height: 38px;
    margin-top: 0;
  }

  h2,
  h5,
  .h2link {
    font-size: 20px !important;
    line-height: 38px !important;
  }

  h3,
  h6 {
    font-size: 17.5px;
    line-height: 38px;
  }

  a,
  .footer a,
  body,
  p {
    font-size: 17px;
    line-height: 38px;
  }

  p.smalltext {
    font-size: 14.5px;
    line-height: 34px;
  }

  .fa {
    font-size: inherit !important;
    margin-bottom: auto;
  }

  body {
    margin: 24px;
    position: relative;
  }

  .portfolio-minor {
    display: block;
    grid-template-columns: repeat(auto-fit, minmax(415px, 2fr));
    gap: 12px;
    margin: auto;
    margin-left: 0;
  }

  .portfolio-masonry {
    padding: 0;
    margin-left: 8px;
    margin-right: 8px;
  }

  .portfolio-filters {
    margin-bottom: 7px;
    margin-top: 82px;
  }

  .portfolio-box {
    width: 167px;
  }

  .portfolio-box-decks {
    position: relative;
    width: 380px;
    margin-left: 0;
    margin-right: 0;
  }

  .section-description p,
  h2 {
    text-align: left;
  }

  .portfolio-box:hover img {
    -o-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  .portfolio-box-text {
    margin: 0 auto;
  }
}

/* ========================
   @media only screen and (max-width: 600px)
   Mobile Devices & Small Screens
   ======================== */


@media only screen and (max-width: 600px) {



/* Phones: disable animation + land on final frame */

  .logo-link{ width: 66%; margin: 0 0 12px -34px; } /* sizing */

  .cmc-logo{ width: 100%; height: auto; }

.cmc-logo-menu {
    width: 66%;
    margin-bottom: unset !important;}


    .cmc-logo.filled {

        width: 95%;

    }




  /* --- Pageflip stuff --- */

  .portfolio-minor {
    grid-template-columns: 1fr; /* 1 per row on small screens */
  }

  .project {
    padding: 0;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 0;
    box-shadow: 0;
    text-align: center;
  }
  .project img {
    width: 100%;
    height: auto;
    border-radius: 0;
  }
  .project h3 {
    margin: 10px 0 5px;
  }

  /* --- Logo --- */

.cmc-logo {
  width:100%;

}
  /* --- Typography Overrides --- */



  section h1,
  article h1,
  nav h1,
  aside h1 {
    font-size: 28px !important;
  }

  h1.outline {
    font-size: 28px;
  }

  .fill-content {
    font-size: 28px;
  }

  h1,
  h4 {
    font-size: 28px;
    line-height: 38px;
  }

  .titlecaps {
    font-size: 28px;
    line-height: 38px;
  }

  h2,
  h5,
  .h2link {
    font-size: 20px !important;
    line-height: 38px !important;
  }

  h3,
  h6 {
    font-size: 17px;
    line-height: 38px;
  }

  a,
  .footer a,
  body,
  p {
    font-size: 17px;
    line-height: 38px;
  }

  p.smalltext {
    font-size: 17px;
    line-height: 38px;
    margin-bottom: 96px !important;
  }

  .fa {
    font-size: inherit !important;
    margin-bottom: auto;
  }

  p, h3.p-heading {
    padding-right: unset;}



  /* --- Text and Spacing --- */
  .image-title {
    margin-top: 48px !important;
  }

  .image-container p {
    margin-top: 24px !important;
  }

  p.compact {
    margin: 0 !important;
  }

  .gapLRG {
    margin-top: 12px;
  }

  /* --- Section Containers & Layout --- */
  .section-container-about {
    margin-top: -28px;
    margin-left: 0;
    margin-right: 0;
  }

  .section-container1 {
    margin-top: -41px;
  }

  .section-container2 {
    margin-top: -123px;
  }

  .gapfolio {
    margin-top: -70px;
  }

  .aboutmainphoto {
    margin-top: 41px;
  }



  /* --- Portfolio Grid & Boxes --- */
  .portfolio-masonry {
    margin-left: 24px;
    margin-right: 24px;
  }

  .portfolio-minor {
    grid-template-columns: repeat(auto-fit, minmax(205px, 2fr));
  }

  .portfolio-box-text h2 {
    margin: 0 !important;
    margin-top: -12px !important;
  }

  .portfolio-box-text,
  .portfolio-box-text p {
    margin: 8px;
    font-size: 15.75px;
    line-height: 38px;
    padding: 0;
    height: inherit;
    -o-transition: all 3;
    -moz-transition: all 3s;
    -webkit-transition: all 3s;
    -ms-transition: all 3s;
    transition: all 3s;
  }

  .portfolio-box-text-container {
    left: 0;
    right: 0;
  }

  .portfolio-filters a,
  .portfolio-filters a:hover {
    font-size: 17px !important;
    line-height: 38px;
    padding: 2px 6px;
  }

  /* --- Video Blocks --- */

  .embed-responsive.embed-responsive-4by3 {
    padding-bottom: 74%;
    margin: 24px;
  }

  .videoblock {
    margin-bottom: -82px;
  }

  .block-2-box-video {
    padding-right: 12px;
  }


    /* --- Footer ---*/

    .footer {display: none !important;}

    .footer-social {
  display: grid;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

}

/* ========================
   @media (min-width: 416px)
   Small to Medium Screens (Tablet+)
   ======================== */
@media (min-width: 416px) {
  .portfolio-container {
    padding-top: 0;
  }

  .video-box {
    margin-top: -30px;
  }

  .footer img {
    width: 150px !important;
  }
}

@media (max-width: 415px) {


  /* LOgo animation */

  .cmc-logo.filled {
   width: 89%;
   margin-left: 8px;}



  /* ========================
   Base Elements & Typography
   ======================== */



  body {
    background-size: auto 100%;
  }

  hr {
    margin-top: 31px !important;
  }

  section h1,
  article h1,
  nav h1,
  aside h1 {
    font-size: 28px !important;
  }

  h1,
  h4 {
    font-size: 28px;
    line-height: 38px;
  }

  h2,
  h5,
  .h2link {
    font-size: 22px !important;
    line-height: 38px !important;
  }

  h3,
  h6 {
    font-size: 18.75px;
    line-height: 38px;
  }

  a,
  .footer a {
    font-size: 17px;
    line-height: 38px;
    padding: 2px 8px;
  }

  /* ========================
   Icon Styling (max-width: 415px)
   ======================== */
  .fa {
    font-size: inherit !important;
    margin-bottom: auto;
  }

  /* ========================
   Footer Layout (max-width: 415px)
   ======================== */


  .footer img {
    width: 100px !important;
  }

  /* ========================
   General Containers (max-width: 415px)
   ======================== */
  .container {
    margin-left: 0;
    margin-right: 0;
  }

  .section-container {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .section-container-about {
    margin-top: -28px;
    margin-left: 16px;
    margin-right: 16px;
  }

  /* ========================
   Title & Gap Handling (max-width: 415px)
   ======================== */
  .maintitle-container {
    margin-bottom: 0 !important;
  }

  .aboutgap {
    margin-top: 0 !important;
    margin-bottom: 96px !important;
  }

  .gap {
    margin-top: -21px !important;
  }

  /* ========================
   Menu Headers (max-width: 415px)
   ======================== */
  .menu__head {
    margin-top: 41px;
    margin-left: 15px;
  }

  .menu__head_line2 {
    margin-left: 15px;
    margin-top: unset;
    margin-bottom: unset;
  }

  .menu__head_line3 {
    margin-left: 15px;
    margin-top: unset;
    margin-bottom: 41px;
  }

  /* ========================
   Menu Items (max-width: 415px)
   ======================== */
  .menu__item {
    margin-left: 10px;
  }

  /* ========================
   Text Blocks and Paragraph Styling (max-width: 415px)
   ======================== */
  .abouttext {
    margin-top: inherit;
    margin-bottom: inherit;
    padding-top: 0;
  }

  .abouttext1,
  .abouttext3 {
    margin-top: -12px;
    margin-bottom: unset !important;
    padding-top: 0;
  }

  .portfolio-box-text,
  .portfolio-box-text p {
    margin: 18px;
    font-size: 15.75px;
    line-height: 38px;
    padding: 0;
    height: inherit;
    -o-transition: all 3;
    -moz-transition: all 3s;
    -webkit-transition: all 3s;
    -ms-transition: all 3s;
    transition: all 3s;
  }

  /* ========================
   Portfolio Layout & Animation (max-width: 415px)
   ======================== */
  .portfolio-box {
    width: fit-content;
  }

  .portfolio-box-decks {
    position: relative;
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
    width: 40%;
  }

  .portfolio-box-text-container {
    position: absolute;
    bottom: -2500px;
    opacity: 0;
    padding: 0;
    margin: 0;
    width: auto;
    left: 0;
    right: 0;
  }

  .portfolio-masonry {
    padding: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .portfolio-filters a,
  .portfolio-filters a:hover {
    font-size: 17px;
    line-height: 38px;
  }

  /* ========================
   Media & Video Blocks (max-width: 415px)
   ======================== */
  .videoblock {
    padding-top: 16px;
    margin-left: 16px;
    margin-right: 16px;
  }

  .block-2-box-video {
    padding-top: 0;
    padding-bottom: 0;
    text-align: left;
    margin: inherit;
    margin-bottom: 16px;
  }

  .aboutphoto {
    margin-bottom: 0 !important;
  }

  .embed-responsive.embed-responsive-4by3 {
    padding-bottom: 74%;
    margin: 24px;
  }

  /* ========================
   Layout Helpers & Grid (max-width: 415px)
   ======================== */
  .col-sm-7 {
    padding-left: 16px;
  }

  /* ========================
   External Widgets / Overrides (max-width: 415px)
   ======================== */
  #st-1 .st-btn > img {
    height: 24px !important;
    width: 24px !important;
  }

  #st-3 {
    z-index: 750 !important;
  }
}