/*Basic Styles **/
 
 .campusDesignImg {
     animation:fadeIn linear 2s;
 }

 
 @media(max-width:600px){
 .campusHomDes {
    background-image: url("../images/mobile-banners-02.png") !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    display: flex !important;
    margin-top: 65px !important;
    height: 400px !important;
    }   
 }

 @keyframes fadeIn{
     0% {opacity:0;}
     100% {opacity:1;}
 }
 input[type='submit'] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
 }
 /*Media query for IPhone 6/7 Plus **/
 
 @media (min-width:2024px) and (min-height:692px) {
     .restBanner {
         height: 600px !important
     }
 }
 @media(min-width:1560px){
     .storeContent {
         top:305px !important;
     }
 }
 
 @media (max-width:1130px) {
     .campusNvLogo {
         display: none !important;
     }
 }
 
 @media (max-width:1024px) {
     /*Campus Catalog */

     /* .prodImg {
         height:300px !important;
     } */
     .howTxt {
         font-size:34px !important;
     }
     .socImg {
         height:200px !important;
         width:200px !important;
     }
     .catalogArrows {
         bottom: 318px !important;
         width: 1000px !important;
         left: 50% !important;
         margin-left: -500px !important;
     }
     .catalogBg {
         height: 700px !important;
     }
     .beanie {
         margin-top: 121px !important;
         margin-left: 52px !important;
         width: 84px !important;
         height: 84px !important;
     }
     .america {
         margin-top: 223px !important;
         margin-left: 32px !important;
         height: 130px !important;
         width: 130px !important;
     }
     .boxercraft {
         width: 100px !important;
         height: 100px !important;
         margin-top: 342px !important;
         margin-left: 11px !important;
     }
     .champion {
         width: 75px !important;
         height: 90px !important;
         margin-top: 112px !important;
         margin-left: 172px !important;
     }
     .alternative {
         margin-left: 172px !important;
         margin-top: 232px !important;
         height: 307px !important;
         width: 66px !important;
     }
     .charlesCampus {
         width: 102px !important;
         height: 182px !important;
         margin-top: 128px !important;
         margin-left: 281px !important;
     }
     .campusRain {
         width: 138px !important;
         height: 213px !important;
         margin-top: 369px !important;
         margin-left: 251px !important;
     }
     .next {
         width: 95px !important;
         height: 88px !important;
         margin-top: 113px !important;
         margin-left: 395px !important;
     }
     .hoodie {
         width: 119px !important;
         height: 167px !important;
         margin-top: 240px !important;
         margin-left: 442px !important;
     }
     .zip {
         width: 111px !important;
         height: 113px !important;
         margin-top: 446px !important;
         margin-left: 413px !important;
     }
     .comfortwash {
         width: 204px !important;
         height: 235px !important;
         margin-top: 388px !important;
         margin-left: 640px !important;
     }
     /*Get Started */
     .ccHat {
         width: 55px !important;
         height: 64px !important;
         margin-top: 121px !important;
         margin-left: 90px !important;
     }
     .bcSwt {
         width: 100px !important;
         height: 100px !important;
         margin-top: 195px !important;
         margin-left: 131px !important;
     }
     .ComfortSwt {
         margin-left: 248px !important;
     }
     .bcTank {
         width: 108px !important;
         height: 115px !important;
         margin-top: 329px !important;
         margin-left: 84px !important;
     }
     .altTank {
         width: 108px !important;
         height: 96px !important;
         margin-top: 516px !important;
         margin-left: 73px !important;
     }
     .bcMuscle {
         width: 93px !important;
         height: 111px !important;
         margin-top: 423px !important;
         margin-left: 194px !important;
     }
     .adamsHat {
         width: 70px !important;
         height: 61px !important;
         margin-top: 84px !important;
         margin-left: 567px !important;
     }
     .comfortwashT {
         width: 114px !important;
         height: 135px !important;
         margin-top: 147px !important;
         margin-left: 615px !important;
     }
     .indTank {
         width: 116px !important;
         height: 143px !important;
         margin-top: 302px !important;
         margin-left: 560px !important;
     }
     .comfortTank {
         width: 109px !important;
         height: 120px !important;
         margin-top: 293px !important;
         margin-left: 684px !important;
     }
     .nikePolo {
         width: 131px !important;
         height: 149px !important;
         margin-top: 453px !important;
         margin-left: 457px !important;
     }
     .champS49 {
         width: 180px !important;
         height: 155px !important;
         margin-top: 456px !important;
         margin-left: 602px !important;
     }
     .newInk {
         height: 250px !important;
     }
     .catalogStarted {
         width: 175px !important;
         bottom: 94px !important;
         right: 70px !important;
     }
     .getStartArw {
         left: -64px !important;
         bottom: 330px !important;
     }
 }
 
 @media (max-width:933px) {
     /* Campus Home page */

     .prodImg {
         height:244px !important;
     }
     .howInCont {
         margin-left:7% !important;
         margin-top:32px !important;
     }
     .howPara {
         width:100% !important;
     }
     .socImg {
         width:150px !important;
         height:150px !important;
     }
     .campFtr {
         height:510px !important; 
     }
     .sliderStyle {
         width: 100% !important;
     }
     .campusSignHdr {
         margin-left: 327px !important;
     }
     .campusAcctHdr {
         margin-left: 0px !important;
     }
     .campusAppText {
         color: black !important;
     }
     .campusAppCont {
         position: relative !important;
         top: 35px !important;
     }
     .campusAppBox {
         margin-right: 100px !important;
         margin-top: 50px !important;
     }
     .campusSchoolCont {
         width: 85% !important;
     }
     .campusDesign2Box {
         width: 100% !important;
     }
     .appProdCat {
         width: 95% !important;
     }
     .prodHdr {
         margin-left: 49px !important;
         margin-right: 0px !important;
     }
     .campusProductContent {
         width: 95% !important;
         margin: 50px auto 100px !important;
     }
     .campusProductDetailCont {
         width: 68% !important;
         left: 225px !important;
         margin-left: 0px !important;
     }
     .hdrLines {
         width: 112px !important;
     }
     .campusEditZone {
         width: 100% !important;
     }

     #fallBackImage {
        width: 190% !important;
        height: auto !important;
     }

     #sizeCard {
        margin: auto auto !important;
        width: 80vw !important;
     }

     #sizeCardContainer {
        width: 100% !important;
     }

     #tvite_header_style {
        margin: 0 !important;
     }

     #tvite_code_label, #tvite_code {
        flex-basis: 0 !important;
     }

     #tvite_code_container {
        flex-direction: column !important;
     }

     .tvite_image_container {
        width: 100% !important;
     }

     .tvite_image {
        max-width: 100% !important;
     }

     #clickToEnlarge {
        display: none !important;
     }
     .sizeRow {
        flex-direction: column !important;
     }
     .userInput {
        width: 100% !important;
     }

     .innerArtDiv {
         height: unset !important;
     }
     /*Campus Catalog */
     .catalogArrows {
         bottom: 318px !important;
         width: 760px !important;
         left: 50% !important;
         margin-left: -380px !important;
     }
     .catalogBg {
         height: 700px !important;
     }
     .beanie {
         margin-top: 196px !important;
         margin-left: 52px !important;
         width: 40px !important;
         height: 40px !important;
     }
     .america {
         margin-top: 250px !important;
         margin-left: 32px !important;
         height: 75px !important;
         width: 75px !important;
     }
     .boxercraft {
         width: 100px !important;
         height: 100px !important;
         margin-top: 342px !important;
         margin-left: 11px !important;
     }
     .champion {
         width: 75px !important;
         height: 75px !important;
         margin-top: 165px !important;
         margin-left: 119px !important;
     }
     .alternative {
         margin-left: 119px !important;
         margin-top: 256px !important;
         height: 234px !important;
         width: 66px !important;
     }
     .charlesCampus {
         width: 82px !important;
         height: 182px !important;
         margin-top: 146px !important;
         margin-left: 202px !important;
     }
     .campusRain {
         width: 102px !important;
         height: 153px !important;
         margin-top: 369px !important;
         margin-left: 194px !important;
     }
     .next {
         width: 77px !important;
         height: 88px !important;
         margin-top: 155px !important;
         margin-left: 293px !important;
     }
     .hoodie {
         width: 93px !important;
         height: 152px !important;
         margin-top: 244px !important;
         margin-left: 330px !important;
     }
     .zip {
         width: 99px !important;
         height: 95px !important;
         margin-top: 417px !important;
         margin-left: 303px !important;
     }
     .comfortwash {
         width: 204px !important;
         height: 184px !important;
         margin-top: 371px !important;
         margin-left: 436px !important;
     }
     .ccHat {
         width: 40px !important;
         height: 40px !important;
         margin-top: 182px !important;
         margin-left: 63px !important;
     }
     .bcSwt {
         width: 75px !important;
         height: 75px !important;
         margin-top: 231px !important;
         margin-left: 92px !important;
     }
     .bcTank {
         width: 67px !important;
         height: 86px !important;
         margin-top: 329px !important;
         margin-left: 65px !important;
     }
     .altTank {
         width: 58px !important;
         height: 78px !important;
         margin-top: 454px !important;
         margin-left: 75px !important;
     }
     .bcMuscle {
         width: 68px !important;
         height: 93px !important;
         margin-top: 385px !important;
         margin-left: 137px !important;
     }
     .ComfortSwt {
         width: 111px !important;
         height: 140px !important;
         margin-top: 148px !important;
         margin-left: 187px !important;
     }
     .adamsHat {
         width: 45px !important;
         height: 45px !important;
         margin-top: 150px !important;
         margin-left: 426px !important;
     }
     .comfortwashT {
         width: 94px !important;
         height: 83px !important;
         margin-top: 198px !important;
         margin-left: 455px !important;
     }
     .comfortTank {
         width: 67px !important;
         height: 90px !important;
         margin-top: 288px !important;
         margin-left: 515px !important;
     }
     .indTank {
         width: 87px !important;
         height: 114px !important;
         margin-top: 319px !important;
         margin-left: 423px !important;
     }
     .nikePolo {
         width: 90px !important;
         height: 100px !important;
         margin-top: 439px !important;
         margin-left: 349px !important;
     }
     .champS49 {
         width: 128px !important;
         height: 99px !important;
         margin-top: 446px !important;
         margin-left: 443px !important;
     }
     .muralBox {
         bottom: 221px !important;
         width: 200px !important;
     }
     .newInk {
         height: 150px !important;
     }
     .catalogStarted {
         width: 175px !important;
         bottom: 146px !important;
         right: 42px !important;
     }
     .getStartArw {
         left: -58px !important;
         bottom: 334px !important;
     }
 }
 @media (max-width:428px) {
     .shopItemWrapper {
         margin:unset !important;
     }
     .shopItemImg {
         width:405px !important;
     }
     .checkoutShopHdr {
        display:none !important;
    }
    .shopCartItem {
        flex-direction: column !important;
        line-height:unset !important;
        justify-content: center !important;
        align-items:center !important;
    }
    .checkoutlistCont {
        min-width:400px !important;
        padding:unset !important;
    }
    .checkoutRowStyle {
        padding:unset !important;
    }
    .shopCartItemImg {
        max-width:250px !important;
    }
    .addToCart {
        height:850px !important;
    }
    .storeContent {
        margin-bottom:150px !important;
    }
    .webstorePopUp {
        height:60vh !important;
    }
    .storeLogo  {
        width:30% !important;
    }
 }

 @media only screen and (max-width: 933px) {
    .brandPrd {
      flex-direction: column;
      align-items: center;
    }
  }
  
 
 @media (max-width:933px) {
     /* Splash Page */
     .corpBtn1 {
         margin-right: unset !important;
     }
     .splashDiv {
         height: unset !important;
     }
     .splashBtnDiv {
         flex-direction: column !important;
     }
     .splashLogo {
         width: 35% !important;
     }
     #BULogo {
        max-width: 100% !important;
     }
     .campusBtn {
         margin-right: 0px !important;
     }
     .corpBtn {
         margin-left: 0px !important;
         margin-top: 10px !important;
     }
     .splashFooter {
         margin-top: 50px !important;
     }
     .majorHdrDiv {
         height:50px !important;
         position:absolute !important;
         background-color:white !important;
         z-index:5 !important;
         top:0% !important;
     }
     .campusCollectView {
         margin-top:50px !important;
     }
     .shopSchool {
         margin-top:50px !important;
     }
     .campBoxStyle {
         width:unset !important;
     }
     .hamburger {
         background-color: white !important;
     }
     .campusDesign {
         margin-top:50px !important;
     }
     /*Real Campus */

     .whatisreal {
        height:unset !important;
     }
     .rcLeft {
        padding: unset !important;
     }
     .rc_who {
        width:85% !important;
     }

     .realCollHdr {
         font-size:16px !important;
         text-align:center !important;
     }
     .realFtImg {
         width:250px !important;
         height:22px !important; 
     }
     .realQuest {
         left:5% !important;
     }
     .realCampOuter {
         flex-direction: column !important;
     }
     .realLoginBox {
         width:100% !important;
         margin-top:60px !important;
     }
     .realLogLogo {
         width:314px !important;
         height:50px !important;
     }
     .realTopNav {
         height:100px !important;
     }
     .realNavBtn {
         margin-right:unset !important;
     }
     .realNavBtnHome {
         display:block !important;
         margin-right:unset !important;
     }
     .startOrderReal{
         display: none !important;
     }
     .startOrderMobile {
         display:block !important;
         margin:15px auto 0px !important;
     }
     .btn-group {
        margin-right:unset !important;
     }
     .realRegDiv {
         flex-direction:column !important;
         margin-bottom:30px !important;
     }
     .realRegImg {
         width:unset !important;
         height:200px !important;
     }
     .realcampusprodCont {
        flex-wrap:wrap !important;
     }
     .menuitem {
         color:#337ab7 !important;
     }
     .realRegister {
         width: 100% !important;
     }
     .realloggedStyle {
         right:15px !important;
         top:80px !important;
     }
     .realDashDiv {
         flex-direction: column !important;
     }
     .realCampBanner {
         width:100% !important;
     }
     .realDashLinks {
         width:200px !important;
     }
     .realCampDashcard {
         width:unset !important;
         margin:30px 10px !important;
     }
     .realDashLinkDiv {
         flex-direction: unset!important;
         left:unset !important;
         top:25px !important;
     }
     .realLeftNav {
         justify-content: unset !important;
     }
     .schoolDiv {
         width:unset !important;
         flex-direction:column !important;
     }
     .schoolImg {
         width:unset !important;
         height:250px !important;
     }
     .schoolForm {
         width:370px !important;
     }
     .requestSchool {
         font-size:18px !important;
     }
     /*Home Page components*/
     .loginTop {
         top: 25px !important;
     }
     .magnoliaHomeImg {
         width: 25% !important;
     }
     /*Corp Login */
     .corpLoginDiv {
         height: 107% !important;
     }
     /*Corp Home Page */
     .corpApparel {
         flex-direction: column !important;
         align-items: center !important;
     }
     .corpImgCont {
         margin-right: unset !important;
     }
     .corpProdInfo {
         margin-top: 231px !important;
     }
     .maTopBanner {
         justify-content: unset !important;
         width:unset !important;
         margin-top:unset !important;
     }
     .eventDesigns {
         flex-direction: column !important;
     }
     .eventDiv {
         width:unset !important;
     }
     .eventTitle {
         font-size:32px !important;
     }
     .eventImg {
         width:unset !important;
     }
     .corpDesignCont {
         flex-direction:column !important;
     }
     .corpDesignImg {
         height:200px !important;
         width:100% !important;
     }
     .corpDesignDiv {
         width:unset !important;
         margin-left:unset !important;
     }
     .letsGet {
         font-size:27px !important;
     }
     .lets {
        width: 70% !important;
        top: 35px !important;
        height: 65% !important;
     }
     .letsGetCont {
         text-align:center !important;
     }
     .corpGet {
        width: 150px !important;
     }
     .fallCorpBox {
        width: 65% !important;
        top: 30px !important;
        height: 85% !important;
     }
     /* Corp Slider */
 
     .indigoSoft {
         font-size: 22px !important;
     }
     /* Campus*/

     .HeroTextBanner {
        background-image: url("../images/HeroTextImage-mobile.jpg") !important;
        width: 30vh !important;
        margin: 60px auto 20px !important;
     }

     @media (max-width: 600px) {
        .desktopImage {
            display: none;
        }
        .mobileImage {
            display: block;
        }
    }

     .campusSteps {
        /* background-image: url("../images/mobile-banners-01.png") !important; commented out for tshirt hero */
        background-image: url("../images/CampusMobileBanner2025.jpg") !important;
        background-position: center !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        width: 100% !important;
        display: flex !important;
        margin-top: 50px !important;
        height: 400px !important;
    }
    
    #hero-register-button {
        position: absolute !important;
        top: 85% !important;
        left: 51% !important;
        transform: translate(-50%, -50%) !important;
        width: 66% !important;
        height: 13% !important;
        border: none !important;
        cursor: pointer !important;
    }

    .campusStepsImg {
        display: none !important;
    }
     .startProof {
        display:none !important;
     }


    .campusHomeDesImg {
        display: none !important;
    }
     .campusViewDesigns {
        display:none !important;
     }
     .campusService {
        background-image: url("../images/mobile-banners-03.png") !important;
        background-size: contain !important;
        height: 600px !important; /* Adjust the height as needed for mobile */
     }
     .campusContact {
        display:none !important;
     }
     .brandWe {
         font-size:27px !important;
     }
     .brandPrd{
         flex-direction:column !important;
         align-items:center !important;
     }
     .prodImg {
        height:unset !important;
        width:375px !important;
     }
     .howCont {
         flex-direction:column !important;
         height:unset !important;
     }
     .howInCont{
         width:unset !important;
         margin-left: unset !important;
     }
     .howTxt{
         font-size:32px !important;
         text-align:center !important;
     }
     .howPara {
         width:unset !important;
         text-align:center !important;
     }
     .howBtn {
         margin-top:unset !important;
         margin:15% auto !important;
     }
     .stepDiv {
         display:none !important;
     }
     .socDiv {
         flex-direction:column !important;
     }
     .socImg {
         margin-right:unset !important;
     }
     .leadCont {
         width:unset !important;
     }
    .campRightFt {
        width:unset !important;
    }
    .campUl {
        top:unset !important;
    }
    .gc20 {
        display:none !important;
    }
    .campFtr {
        flex-direction:column !important;
    }
    .campActOrders {
        flex-direction:column !important;
        flex-wrap:unset !important;
        width:390px !important;
    }
     .campusHdrDiv {
         height: 185px !important;
     }
     .campusNavBar {
         position: relative !important;
         left: 20px !important;
     }
     .newCampusNv {
         flex-direction: column !important;
         margin: -75px 10px !important;
         text-align:center !important;
     }
     .newCampusNvLoggedIn {
         flex-direction: column !important;
         margin: -95px 10px !important;
     }
     .leadForm {
         width: 400px !important;
     }
     .welcomeImg {
         width: 350px !important;
     }
     .campusNavItem {
         margin-right: 0px !important;
         margin-bottom: 5px !important;
         width: 150px !important;
     }
     .logStyle {
         width: 100px !important;
         height: 30px !important;
         line-height: 30px !important;
         margin: 5px 10px 5px !important;
     }
     .acctStyle {
         width: 100px !important;
         height: 30px !important;
         line-height: 14px !important;
         margin: 5px 10px !important;
         text-align: center !important;
     }
     .logNav {
         flex-direction: column !important;
     }
     .slideStyle {
         height: 400px !important;
         width: 408px !important;
     }
     .campusSlide1 {
         top: 240px !important;
         width: 77% !important;
         height: 44% !important;
         left: 11% !important;
     }
     .trending {
         margin: 10px !important;
     }
     .avail {
         display: none !important;
     }
     .campusSlide2 {
         width: 75% !important;
         left: 13% !important;
         top: 225px !important;
         height: 53% !important;
         display: none !important;
     }
     .collectBan {
         height: 425px !important;
         width: 100% !important;
         background-image: url("../images/BTS_Mobile.png") !important;
     }
     .TT {
         height: 425px !important;
         width: 100% !important;
         background-image: url("../images/Venmo_Mobile.png") !important;
     }
     .acaBan {
         height: 425px !important;
         width: 100% !important;
         background-image: url("../images/ACA_Mobile.png") !important;
     }
     .pinkBox {
         display: none !important;
     }
     .campusSlide3 {
         background-image: url("../images/Designs.Mobile.png") !important;
     }
     .campusSlide3Div {
         background-color: unset !important;
         top: 110px !important;
         right: 42% !important;
     }
     .NewDesn {
         display: none !important;
     }
     .browseDesn {
         display: none !important;
     }
     .campusAcctHdr {
         margin-top: 300px !important;
         margin-left: 0px !important;
     }
     .campusAcctText {
         font-size: 13px !important;
     }
     .campusCreateBtn {
         width: 150px !important;
         font-size: 13px !important;
     }
     .campusSignBtn {
         width: 150px !important;
     }
     .campusSignHdr {
         margin-top: 0px !important;
         margin-left: 80px !important;
         width: 150px !important;
     }   

     /* Campus Home Designs & Products */
     .campusDesignBox {
         margin-right: 0px!important;
     }
     .campusAppText {
         color: black !important;
     }
     .campusAppBox {
         margin-right: 50px !important;
     }
  
     .srchBtnCampus {
         display: block !important;
     }
     .clearAll {
         margin: unset !important;
     }
     /* Campus Footer */
     .loggedStyle {
         right: 15px !important;
         top: 32px !important;
     }
     .maloggedStyle {
         right: 15px !important;
         top: 34px !important;
     }
     .campuMobileLink {
         margin-left:17%;
     }
     .corpNext {
         float: right !important;
         left: 290px !important;
     }
     .slideArrowDiv {
         bottom: 200px !important;
     }
     .campusNext {
         float: none !important;
         left: 300px !important;
     }
     /* Campus Designs */
     .campusCatCont {
         height: 196px !important;
         margin: auto !important;
     }
     .campusLogStyle {
         margin: auto !important;
         justify-content: center !important;
     }
     .campusDesign2Box {
         flex-direction: column !important;
         margin: 25px auto 100px !important;
     }
     .campusDesignHdr {
         top: 0px !important;
         left: 60px !important;
     }
     .campusDesignImg {
         height: 200px !important;
         width: 150px !important;
     }
     .campusDesignImgBox {
         height: 200px !important;
         width: 150px !important;
     }
     /*Campus Products */
     .campusProductCat {
         margin: auto !important;
     }
     .campusProductContent {
         flex-wrap: wrap !important;
         width: 88% !important;
         margin:175px auto 100px !important;
     }
     .backtoProofBtn {
         width: 140px !important;
         margin-left: 15px !important;
         margin-bottom: 15px !important;
     }
     .campusBrandsBtn {
         width: 130px !important;
         margin-bottom: 15px !important;
     }
     .appProdCat {
         width: 54% !important;
     }
     .campusProductDetailCont {
         position: relative !important;
         margin-left: 0px !important;
         margin-top: 0px !important;
         width: 100% !important;
         margin-bottom: 100px !important;
         left: 0px !important;
     }
     .campusBackProductBtn {
         font-size: 11px !important;
         width: 25% !important;
     }
     .campusAddProductBtn {
         font-size: 11px !important;
         width: 50% !important;
     }
     /* Campus Proof Edit */
     .campusSubmit {
         width: 300px !important;
     }
     .campusProofTxt {
         font-size: 11px !important;
     }
     .campusProfHdr {
         margin-top: 50px !important;
     }
     .realcampusProfHdr {
         margin-top:45px !important;
     }
     .realinsideRegister {
         width: unset !important
     }
     .campusheader {
         margin-top: 25px !important;
     }
     /* Custom Apparel component */
     .customApparelCont {
         margin-top: -40% !important;
     }
     .customApparelHdr {
         font-size: 32px !important;
         margin-left: 10px !important;
     }
     .customApparelSimple {
         font-size: 40px !important;
         margin-top: -5% !important;
     }
     /*Get Started Component */
     .approveBtn {
         background-color: #E27558 !important;
         color: white !important;
         white-space: normal !important;
         height: 40px !important;
     }
     /* Design Selector Components */
     .searchStyle {
         width: 225px !important;
     }
     .selectorStyle {
         width: 85% !important;
         top: -1% !important;
         min-height: 580px !important;
     }
     .catalogStyle {
         margin-left: 20px !important;
         flex-wrap: nowrap !important;
         flex-direction: row !important;
     }
     .fullSizeStyle {
         max-width: 88% !important;
         left: 1% !important;
     }
     .clearBtn {
         margin-left: 0px !important;
         margin: 10px auto !important;
     }
     .categoryContainerStyle {
         width: 380px !important;
         height: 200px !important;
     }
     .campusSelectedCat {
         font-size: 17px !important;
         flex-direction: column !important;
     }
     .deselectStyle {
         width: 80%;
         text-align: center;
         margin-bottom: 5px;
     }
     .campusSearch {
         width: 350px !important;
         margin: auto !important;
     }
     .campusCatDesign {
         width: 216px !important;
         font-size: 14px !important;
         line-height: 3em !important;
         height: 40px !important;
     }
     /*Product Selector Components */
     .swatchesStyle {
         max-height: 250px !important;
         overflow-y: scroll !important;
     }
     .selectedImageStyle {
         max-width: 115px !important;
         max-height: 250px ! important;
     }
     .colorStyle {
         font-size: 18px !important;
     }
     /*Contact Component */
     .statementStyles {
         font-size: 20px !important;
     }
     .statementDiv {
         width: 100% !important;
     }
     .campusCustService {
         margin-top: 26px !important;
     }
     /* Login Component */
     .boxStyle {
         width: 322px !important;
     }
     .loginBoxStyle {
         width: 336px !important;
         margin-left: -168px !important;
     }
     /* Register Component */
     .collegiateCustomer {
         font-size: 15px !important;
     }
     .campusLoginTxt {
         margin-top: 20px !important;
     }
     .registerLabels {
        font-size: 14px !important;
    }
     .registerSelect {
         width: 275px !important;
     }
     .campusRegister {
         width: 95% !important;
         margin: 0 auto !important;
     }
     .corpRegister {
         width: 95% !important;
         margin-left: -185px !important;
     }
     .registerGroup {
         font-size: 12px !important;
     }
     /*Forgot Password */
     .campusForgotBtn {
         width: 69px !important;
         top: 50px !important;
         left: 0px !important;
     }
     .campusSubmitForgotBtn {
         position: relative !important;
         left: 100px !important;
         top: -1px !important;
     }
     /* Proof Edit */
     .corpProfText {
         text-align: center !important;
     }
     /*Dashboard Component */
     .magDesAppTxt {
         width: 100% !important;
     }
     .dashText {
         margin-left: 28px !important;
     }
     .compDiv {
         max-width: 424px !important;
         min-width:unset !important;
     }
     .dashLinkDiv {
         flex-wrap: wrap !important;
         justify-content: center !important;
     }
     .textActive {
         margin-left: 25px !important;
     }
     .csrActive {
         font-size: 12px !important;
     }
     .maTBanker {
         margin-top: 30px !important;
     }
     /*Affinity image */
     .affinityLogoImg {
         width: 25% !important;
     }
     /*Payment Option pop up */
     .cowTagDownload {
         display: none !important;
     }
     .campusOuterBox {
         height: 100% !important;
         margin-bottom: 50px !important;
         margin: unset !important;
     }
     .mobilePayBox {
         width: unset !important;
     }
     .mobilePayBtn {
         width: unset !important;
         line-height: unset !important;
     }
     /* Proof vIew */
     .proofViewBox {
         width: 404px !important;
         height: 100% !important;
         margin: auto auto 100px auto !important;
     }
     .proofViewCont {
         width: 400px !important;
     }
     .proofImg {
         height: 495px !important;
         max-width: 360px !important;
     }
     @keyframes blinkingBG {
         0% {
             opacity: 1
         }
         49% {
             opacity: .7
         }
         50% {
             opacity: .8
         }
         100% {
             opacity: 1
         }
     }
     .orderNowBtn {
         animation: blinkingBG 1.5s infinite !important;
     }
     .pfImg {
         max-height: 400px !important;
         max-width: 325px !important;
     }
     .cowTagDownload {
         display: none!important;
     }
     .campusPaymentBox {
         margin-left: 40px !important;
     }
     /* Prove Revise */
     .campusReviseBox {
         width: 375px !important;
         margin: auto auto 100px !important;
     }
     .campusReviseBoxes {
         width: 300px !important;
     }
     .campusRevisePImg {
         width: 300px !important;
         height: 375px !important;
     }
     .bottomReviseCont {
         width: 335px !important;
         margin: 40px -15px !important;
     }
     .campusChangesBox {
         width: 295px !important;
     }
     .campusChgTxT {
         width: 265px !important;
         height: 265px !important;
     }
     .campusRevisionBtn {
         width: 124px !important;
     }
     .changesNotesBox {
         padding: 0px !important;
     }
     .createAcct {
         margin-top: 25px !important;
     }
     /* Order Roser */
     .campusProofCont {
         width: 375px !important;
         margin: auto auto 100px auto !important;
     }
     .proofWrapper {
         max-width: unset;
         min-width: unset;
         width: 360px;
     }
     .campusRosterCont {
         width: 315px !important;
     }
     .campusTBankerHdr {
         flex-wrap: wrap !important;
     }
     /* Campus Tvite */
     .campusTviteBox {
         width: 375px !important;
         margin: 55px auto 100px !important;
     }
     /* CAmpus TBanker */
     .campusTBankerBox {
         width: 375px;
     }
     .tbankerCheckOut {
         width: 355px;
         max-width: 96%;
     }
     /*About Page */
     .storyDiv {
         width: 80% !important;
     }
     .storyTxt {
         margin-bottom: 100px !important;
     }
     /*FAQ*/
     .questionCont {
         width: 83% !important;
     }
     /* Shipping And Returns */
     .shippingCont {
         width: 100% !important;
         margin: auto auto 250px !important;
     }
     /*Extra Schools */
     .otherSchools {
         display: block !important;
         width: 75% !important;
         height: 100% !important;
         margin-bottom: 100px !important;
     }
     .otherSchoolLink {
         margin-top: 140px !important;
     }
     .licenseListStyle {
         margin-left: 0px !important;
     }
     .campusSchoolCont {
         width: 75% !important;
         margin-left: 86px !important;
     }
     /* Footer */
     .corpFooterCont {
         width: unset !important;
     }
     .corpFooterUl {
         display: block !important;
         width: unset !important;
     }
     .corpFooterLic {
         margin-bottom: 50px !important;
     }
     .socialMediaUl {
         bottom: 63px !important;
     }
     .enlargeUpload {
         max-width: 200px !important;
         max-height: 250px !important;
         margin-left: -100px !important;
     }
     .enlargeDiv {
         height: 450px !important;
         width: 400px !important;
         margin-left: -200px !important;
     }
     /*Payment Options */
     .corpCowTagUl {
         padding-left: 0px !important;
     }
     .corpTurnAround {
         width: 100% !important;
     }
     /*Confirm Class Box */
     .confirmBox {
         width: 400px !important;
         margin-left: -200px !important;
     }
     /* Ava Img */
     .avaImg {
         width: 90% !important;
     }
     .catalogFooter {
         margin-top: 192px !important;
     }
     .SpringHdr {
         font-size: 75px !important;
     }
     .mobileTxt {
         margin-top: 270px !important;
         font-family: AveriaSerifItalic !important;
         text-align: center !important;
         font-size: 22px !important;
     }
     .hdrHIW {
         top: 150px !important;
     }
     .pVNotLoggedIn {
         top: 110px !important;
     }
     .fourPoints {
         flex-wrap: wrap !important;
         flex-direction: column !important;
     }
     .confirmDisable {
         padding: 5px 5px !important;
     }
     /*Feedback */
     .feedbackDiv {
         width: 75% !important;
     }
     /*Campus Hdr */
     .logoMobile {
         display: none !important;
     }
     /*Feedback/help */
  
     .maContactDiv {
         flex-direction: column !important;
         width: unset !important;
     }
     .contactForm {
         height: 400px !important;
     }
     .maTopNav {
         height: 100px !important;
     }
     .maContactInpt {
         height: 25px !important;
     }
     .maContactLabel {
         width: 38% !important;
     }
     .restBanner {
         width: 100% !important;
         height: 385px !important;
         background-image: url("../images/sqaure.jpg") !important;
     }
     .k12Banner {
         width: 100% !important;
         height: 385px !important;
         background-image: url("../images/mobileK12.jpg") !important;
     }
     .offer {
         width: 85% !important;
     }
     .k12Bullets {
         font-size: 16px !important;
         padding-left: 10px !important;
         padding-right: 10px !important;
     }
     .k12Process {
         flex-direction: column !important;
     }
     .k12Simple {
         width: 414px !important;
     }
     .k12Phone {
         width: 96% !important;
     }
     .k12Print {
         font-size: 22px !important;
     }
     .k12Specials {
         margin-left: unset !important;
         width: 414px !important;
     }
     .k12SpecialImg {
         width: 360px !important;
     }
     .k12FundOpt {
         width: unset !important;
         height: 250px !important;
     }
     .k12BtnDiv {
         flex-direction: column !important;
     }
     .k12BtmDiv {
         width: unset !important;
         height: 260px !important;
     }
     .k12EasyImg {
         width: 80% !important;
     }
     .k12InfoDiv {
         width: 414px !important;
     }
     .k12ContactFm {
         height: 400px !important;
         width: 414px !important;
     }
     .k12BtnSlp {
         margin-top: 10px !important;
         margin-left: 0px !important;
     }
     /*Webstore Mobile Styles */
     .shopItemWrapper{
         margin:unset !important;
     }
     .shopItemImg {
         max-width:390px !important;
     }
     .checkoutShopHdr {
         display:none !important;
     }
     .shopCartItem {
         flex-direction: column !important;
         line-height:unset !important;
         justify-content: center !important;
         align-items:center !important;
     }
     .checkoutlistCont {
         min-width:400px !important;
         padding:unset !important;
     }
     .checkoutRowStyle {
         padding:unset !important;
     }
     .shopCartItemImg {
         max-width:250px !important;
     }
     .addToCart {
         height:850px !important;
     }
     .storeContent {
         margin-bottom:150px !important;
     }
     .webstorePopUp {
         height:60vh !important;
     }
     .newDesDiv {
        flex-direction:column !important;
    }
    .newShirtDiv {
        height:214px !important;
        width:unset !important;
    }
    .inDesDiv {
        width:unset !important;
        margin-right: unset !important;
    }
    .desTxt {
        font-size:34px !important;
    }
    .iconCont {
        margin:75px auto !important;
        width:unset !important;
        justify-content: center !important;
    }
}
 @media (max-width:390px){
     .shopItemImg {
         width:370px !important;
     }
 }
 
 
 @media only screen 
 and (min-device-width: 933px) 
 and (max-device-width: 1024px) 
 and (orientation: portrait) {
 .campusSteps {
     height: 31vh !important; /* Adjusted height for iPad portrait */
 }
 .campusViewDesigns {
    transform: translate(0%, 6vh) !important;
 }
 .campusService {
    height: 20vh !important;
 }

 .campusContact {
    top: 0 !important;
 }
}

/*Media query for IPhone 6 **/

 @media (max-width:375px) {
     /*splash page */
     /* Real Campus Nav Bar */
     .realTopNav{
         height:140px !important;
     }
     .realLeftNav {
         justify-content: unset !important;
     }
     .realloggedStyle {
         right:40px !important;
         top:117px !important;
     }
     .realDashLinks {
         font-size:13px !important;
     }
     .realFtImg {
        width:225px !important;
        height:20px !important;
    }
    .startOrderMobile {
        margin: 60px auto 0px !important;
    }
     /* Campus Nav Bar */

     .campusNavBar {
         position: relative !important;
         left: 9px !important;
     }
     .campusNavItem {
         margin-right: 17px !important;
     }
     /*Home Page components*/
     .logStyle {
         right: 179px !important;
     }
     .corpLogin {
         top: 10px !important;
         margin-bottom: 22px !important;
     }
     .acctStyle {
         left: 179px !important;
     }
     .loggedStyle,
     .maloggedStyle {
         right: 10px !important;
     }
     /*Campus Slider */
     .sliderStyle {
         width: 368px !important;
     }
     .slideStyle {
         height: 300px !important;
         width: 100% !important;
     }
     .campusNext {
         float: none !important;
         left: 256px !important;
         bottom: 150px !important;
     }
     .campusPrev {
         bottom: 150px !important;
     }
     .campusAcctHdr {
         margin-top: 225px !important;
     }
     .campusSignHdr {
         position: relative !important;
         top: -72px !important;
         margin-left: 218px !important;
     }
     .campusCreateBtn {
         width: 130px !important;
         font-size: 11px !important;
     }
     .campusSignBtn {
         width: 130px !important;
         font-size: 11px !important;
     }
     .campusAppBox {
         margin-top: 50px !important;
     }

     .corpApparel {
         flex-direction: column !important;
         align-items: center !important;
     }
     .corpImgCont {
         margin-right: unset !important;
     }
     .corpProdInfo {
         margin-top: 230px !important;
     }
     /* Footer */
     .corpFooterCont {
         width: unset !important;
     }
     .corpFooterLic {
         margin-bottom: 50px !important;
     }
     .corpFooterUl {
         display: block !important;
         width: unset !important;
     }
     /*Register */
     .nameInput {
         width: 115px !important;
     }
     .campusPasswordInput {
         width: 108px !important;
     }
     .campusRegister {
         width: 95% !important;
         margin: 0 auto !important;
    }
    .insideRegister {
        padding: 15px !important;
    }
     .realinsideRegister {
        width: 300px !important;
        margin-left: -10px !important;
     }
     .registerGroup {
         font-size: 12px !important;
     }
     .corpRegister {
         width: 95% !important;
         margin-left: -172px !important;
     }
     .corpInsideRegister {
         width: 322px !important;
         margin-left: -10px!important;
     }
     /*Dashboard */
     .dashText {
         margin-left: 28px !important;
     }
     .customApparelHdr {
         font-size: 30px !important;
         margin-left: 5px !important;
     }
     .customApparelSimple {
         font-size: 42px !important;
         margin-top: -5% !important;
     }
     .compDiv {
         width: 382px !important;
     }
     .campusAccInpt {
         font-size: 16px !important;
     }
     /* Register */
     .registerSelect {
         width: 210px !important;
     }
     .campusRegister {
         width: 95% !important;
         margin: 0 auto !important;
     }
     /* Design Components */
     .searchStyle {
         width: 215px !important;
     }
     .selectorStyle {
         width: 85% !important;
         min-height: 525px !important;
         position: relative !important;
         top: -2% !important;
     }
     .campusSelectedCat {
         font-size: 15px !important;
     }
     .fullSizeStyle {
         top: 3% !important;
     }
     /* Campus Design */
     .campusDesign2Box {
         flex-direction: column !important;
     }
     .campusCatCont {
         margin-top: 0px !important;
         height: 196px !important;
     }
     .campusCatList {
         margin-top: 0px !important;
     }
     .campusDesignHdr {
         left: 115px !important;
     }
     /*Product Components */
     .brandStyle {
         font-size: 16px !important;
     }
     .productImgStyle {
         max-height: 200px !important;
     }
     .addToProofStyle {
         font-size: 13px !important;
     }
     .swatchesStyle {
         max-height: 200px !important;
         max-width: 180px !important;
     }
     .campusProductCat {
         margin: auto !important;
     }
     .campusProductList {
         margin-top: 0px !important;
     }
     .campusProductContent {
         flex-wrap: wrap !important;
         width: 88% !important;
     }
     .campusBrandsBtn {
         margin-left: 9px !important;
     }
     .backtoProofBtn {
         margin-left: 9px !important;
     }
     .campusProductDetailCont {
         position: relative !important;
         margin-left: 0px !important;
         margin-top: 0px !important;
         width: 100% !important;
         left: 0px !important;
     }
     .campusAddProductBtn {
         height: 30px !important;
         font-size: 10px !important;
     }
     .campusBackProductBtn {
         height: 30px !important;
         line-height: 30px !important;
         font-size: 10px !important;
     }
     /* Proof Info Component */
     .labelStyle {
         font-size: 14px !important;
         line-height: normal !important;
     }
     .campusProofInfo {
         margin: 10px auto !important;
     }
     .campusSubmit {
         width: 300px !important;
     }
     .campusProofTxt {
         font-size: 11px !important;
     }
     .campusImgUpload {
         width: 85% !important;
     }
     .corpProfText {
         text-align: center !important;
     }
     /* Proof View */
     .proofViewBox {
         width: 365px !important;
         height: 100% !important;
     }
     .proofViewCont {
         width: 360px !important;
     }
     .proofImg {
         height: 440px !important;
     }
     /* Login Component */
     .boxStyle {
         width: 300px !important;
         margin-left: -172px !important;
     }
     .bulletContainer {
         margin-top: 25% !important;
     }
     .loginTop {
         top: 10px !important;
     }
     .loginBoxStyle {
         width: 300px !important;
         margin-left: -150px !important;
     }
     .campusForgotBtn {
         left: 0px !important;
         width: 50px !important;
     }
     .campusSubmitForgotBtn {
         position: relative !important;
         bottom: 38px !important;
     }
     .campusLoginTxt {
         margin-top: 20px !important;
     }
     /* proof Revise */
     .campusReviseBox {
         width: 350px !important;
     }
     .campusReviseImg {
         padding: 0px !important;
     }
     .campusRevisePImg {
         width: 300px !important;
         height: 375px !important;
     }
     .campusReviseBoxes {
         width: 300px !important;
     }
     .bottomReviseCont {
         width: 295px !important;
         margin: 40px auto !important;
     }
     .campusUploadDiv {
         position: relative !important;
         right: 22px !important;
     }
     .campusChangesBox {
         width: 295px !important;
     }
     .campusChgTxT {
         width: 265px !important;
         height: 265px !important;
     }
     .campusRevisionBtn {
         width: 75px !important;
     }
     .campusRevisionFoot {
         margin-top: 100px !important;
     }
     /* Campus Proof Roster */
     .campusProofCont {
         width: 350px !important;
     }
     .proofWrapper {
         width: 325px !important;
     }
     .pfImg {
         max-height: 375px !important;
         max-width: 280px !important;
     }
     .campusRosterCont {
         width: 325px !important;
     }
     /* Campus TBanker */
     .campusTBankerBox {
         width: 350px !important;
     }
     .campusEvtName {
         width: 200px !important;
     }
     .campusTBankerHdr {
         flex-wrap: wrap !important;
     }
     .tbankerCheckOut {
         width: 325px !important;
         max-width: 100% !important;
     }
     /* Campus Tvite */
     .campusTviteBox {
         width: 350px !important;
     }
     /* Payment Options */
     .campusOuterBox {
         height: 100% !important;
     }
     .campusPaymentBox {
         margin-left: 18px !important;
     }
     /*Campus Contact */
     .campusContactHdr {
         margin-left: 0px !important;
     }
     .campusContactDiv {
         margin-right: 0px !important;
     }
     .campusCustService {
         margin-right: 0px !important;
         margin-top: 26px !important;
     }
     .campusContactBtn {
         width: 300px !important;
     }
     .campusSchoolCont {
         margin-left: 60px !important;
     }
     /* Campus About   */
     /*Corp Slider */
     .slideArrowDiv {
         bottom: 138px !important;
     }
     /* Img Upload */
     .imgUploadTitle {
         font-size: 17px !important;
     }
     .enlargeUpload {
         max-width: 200px !important;
         max-height: 250px !important;
         margin-left: -100px !important;
     }
     .enlargeDiv {
         height: 400px !important;
         width: 350px !important;
         margin-left: -175px !important;
     }
     .confirmBox {
         width: 360px !important;
         margin-left: -180px !important;
     }
     .SpringHdr {
         font-size: 68px !important;
     }
     .maInfoDiv {
         width: 370px !important;
         height: 225px !important;
     }
     .contactForm {
         width: 375px !important;
     }
     .restBanner {
         height: 380px !important;
     }
     .k12Cancel {
         font-size: 26px !important;
     }
     .k12Simple,
     .k12Specials,
     .k12InfoDiv,
     .k12ContactFm {
         width: 375px !important;
     }
     .shopItemImg {
        max-width:350px !important;
    }
 }
 
 @media (max-width:360px) {
     /*Nav Bar */
     .logStyle {
         right: 179px !important;
     }
     .acctStyle {
         left: 179px !important;
     }
     .campusRegister {
         width: 306px !important;
     }
     /* Campus Designs */
     .campusDesign2Box {
         flex-direction: column !important;
         margin: 50px auto 100px !important;
     }
     .campusDesignHdr {
         top: -50px !important;
     }
     .appProdCat {
         width: 72% !important;
     }
     .prodHdr {
         margin-left: 72px !important;
     }
     /* Payment Options */
     .campusPaymentBox {
         margin-left: 11px !important;
     }
     .backtoProofBtn {
         width: 140px !important;
         margin-left: 33px !important;
         margin-bottom: 15px !important;
     }
     .fullSizeStyle {
         left: -1% !important;
     }
 }
 
 @media (max-width:320px) {
     /*Splash Page */
     .registerBox {
         width: 300px !important;
         margin-left: -160px !important;
     }
     /*Corp Registration */
     .corpRegister {
         width: 95% !important;
         margin-left: -143px !important;
     }
     .corpInsideRegister {
         width: 275px !important;
         margin-left: -15px !important;
     }
     /* Nav bar */
     .logStyle {
         right: 150px !important;
     }
     .acctStyle {
         left: 150px !important;
     }
     /*Slider */
     .sliderStyle {
         width: 315px !important;
     }
     .corpPopHdr {
         margin: unset !important;
     }
     /* Home Page */
     .corpApparel {
         flex-direction: column !important;
     }
     .corpProdInfo {
         margin-top: 232px !important;
     }
     /*Footer */
     .corpFooterCont {
         width: unset !important;
     }
     .corpBottomDiv {
         margin-top: 20px !important;
     }
     .corpFooterLic {
         margin-bottom: 52px !important;
     }
     .campusNext {
         left: 201px !important;
     }
     .campusAcctText {
         font-size: 11px !important;
     }
     .campusSignHdr {
         margin-left: 174px !important;
     }
     .backtoProofBtn {
         margin-left: 22px !important;
     }
     .campusBrandsBtn {
         margin-left: 22px !important;
     }
     .prodHdr {
         margin-left: 65px !important;
     }
     /* Campus Designs */
     .campusLogStyle {
         width: 79% !important;
         margin-left: 15% !important;
     }
     .campusDesignHdr {
         top: 3px !important;
         left: 90px !important;
     }
     .campusProductDetailCont {
         left: 0px !important;
     }
     .campusAddProductBtn {
         font-size: 9px !important;
     }
     .campusBackProductBtn {
         font-size: 9px !important;
     }
     /* Corporate Proof Edit */
     .corpProfText {
         font-size: 13px !important;
         text-align: center !important;
     }
     .corpEmbChk {
         margin-right: unset !important;
     }
     .chkBoxLabel {
         font-size: 11px !important;
     }
     /*Pick Payment Option */
     .campusPaymentBox {
         margin-left: -9px !important;
     }
     /* Revise */
     .campusReviseBox {
         width: 313px !important;
     }
     /* Slider */
     .corpNext {
         left: 195px !important;
         float: right !important;
     }
     .slideArrowDiv {
         bottom: 139px !important;
     }
     /*Upload */
     .majorAccountsUploadTxt {
         margin-top: 15px !important;
     }
     .enlargeUpload {
         max-width: 200px !important;
         max-height: 250px !important;
         margin-left: -100px !important;
     }
     .enlargeDiv {
         height: 300px !important;
         width: 250px !important;
         margin-left: -125px !important;
     }
     /*Proof View Box */
     .proofViewBox {
         width: 312px !important;
     }
     .corpOuterBox {
         padding: unset !important;
     }
     .corpPaymentDiv {
         margin-left: -14px !important;
     }
     /*Proof Roster */
     .campusProofCont {
         width: 312px !important;
     }
     /*TBanker */
     .campusTBankerBox {
         width: 312px !important;
     }
     .corpTurnAround {
         width: 84% !important;
     }
     /*Classic Confirm Box */
     .confirmBox {
         width: 350px !important;
         margin-left: -175px !important;
         top: 2% !important;
     }
     .SpringHdr {
         font-size: 55px !important;
     }
     .welcomeImg {
         width: 260px !important;
     }
     .leadForm {
         width: 300px !important;
     }
     .leadFormInp {
         width: 290px !important;
     }
     .leadShipBtn {
         margin: 10px auto !important;
     }
     .maInfoDiv {
         width: 320px !important;
         height: 200px !important;
     }
     .contactForm {
         width: 320px !important;
         height: 425px !important;
     }
     .restBanner {
         height: 315px !important;
     }
 }

 @media (max-width: 600px) {
    .pj-page-container {
      padding: 5px !important;
    }
  
    .pj-header-container {
      padding: 10px 5px !important;
    }
  
    .pj-main-container {
      padding: 15px 10px !important;
      padding-bottom: 15vh !important;
      background-color: rgb(242, 242, 242) !important;
    }
  
    .pj-title {
      font-size: 1.5rem !important;
      margin: 10px 0 !important;
    }
  
    .pj-subtitle {
      font-size: 0.9rem !important;
      margin: 0 0 10px 0 !important;
    }
  
    .pj-flex-container {
      flex-direction: column !important;
      align-items: center !important;
    }
  
    .pj-preview-and-confirm-wrapper {
      width: 100% !important;
      margin: 10px 0 !important;
    }
  
    .pj-confirm-button-container {
        width: 100%; /* Full width to center the button */
        display: flex; /* Use flex to center the button inside */
        justify-content: center; /* Center button horizontally */
        margin-top: 10px; /* Add some margin at the top */
      }
    
      .pj-confirm-button {
        width: 90% !important; /* Span most of the screen */
        padding: 12px 0 !important; /* Adjust padding to make the button taller */
        font-size: 1.1rem !important; /* Slightly increase the font size */
        margin: 0 auto; /* Center the button in the available space */
        /* Remove the transform and left properties since we're centering with flexbox now */
      }
  
    .pj-design-list-container {
      width: 100% !important;
      max-width: 80% !important;
      padding: 10px 5px !important;
      max-height: 300px !important; /* example max height */
      overflow-y: auto !important; /* allow scrolling on overflow */
    }
  
    .pj-design-item {
      width: 100% !important; /* each item takes full width for better visibility */
      margin: 10px 0 !important; /* increased margin for better separation */
    }
  
    .pj-design-item-image {
      height: auto !important; /* maintain aspect ratio */
      max-height: 200px !important; /* increase max height for better visibility */
      object-fit: contain !important; /* ensures that aspect ratio is maintained */
      width: 100% !important; /* use full width of the design item */
    }

    .pj-banner-img {
        width: 100vw !important;
    }


  }

  @media only screen 
  and (min-device-width: 933px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) {
      .pj-main-container {
          padding: 40px 5% !important; /* Slightly less padding for more space */
      }

      .pj-design-list-container {
          width: 100% !important; /* Let the design list take full width */
          max-width: 100% !important; /* Remove max-width restriction */
          padding: 20px 5% !important; /* Consistent padding */
          justify-content: center !important; /* Center designs if less than four per row */
          flex-direction: row !important; /* Keep designs in a row */
          flex-wrap: wrap !important; /* Allow designs to wrap */
          align-items: center !important; /* Align items for consistent spacing */
      }

      .pj-design-item {
          width: 46% !important; /* Adjust width for two items per row */
          margin: 2% !important; /* Add some margin around the items */
      }

      .pj-preview-and-confirm-wrapper {
          width: 100% !important; /* Full width */
          align-items: center !important; /* Center the preview image and button */
      }

      .pj-confirm-button-container {
          width: 50% !important; /* Half-width for easier touch */
          margin: 20px auto 20px auto !important; /* Center the button and add vertical space */
      }

      .pj-confirm-button {
          width: 100% !important; /* Full width of its container */
          padding: 15px 0 !important; /* Larger padding for a taller button */
          font-size: 1.5rem !important; /* Increase font size for better legibility */
      }

      .pj-preview-container {
          width: 80% !important; /* Increase width for a larger preview image */
          margin: 0 auto 30px !important; /* Center it and add bottom margin */
      }

      .selectedItemImage {
          width: 100% !important; /* Ensure the image is full width within its container */
          height: auto !important; /* Adjust height to maintain aspect ratio */
      }
}

  @media (max-width: 600px) {
    .viewPapaJohnsDesigns-container {
        padding: 5px !important;
    }
    .viewPapaJohnsDesigns-title-container {
        text-align: center !important;
        padding: 10px 5px !important;
    }
    .viewPapaJohnsDesigns-back-button {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
    }
    .viewPapaJohnsDesigns-title {
        font-size: 1.5rem !important;
    }
    .viewPapaJohnsDesigns-designs-container {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .viewPapaJohnsDesigns-designItem {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
    .viewPapaJohnsDesigns-designImage {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    .viewPapaJohnsDesigns-design {
        padding: 5vh !important;
    }

    .basicBackButton {
        padding: 10px 18px !important;
        font-size: 14px !important;
        margin-bottom: 6vh !important;
        display: block !important;
      }



}

@media (max-width: 600px) {
    .pj-input {
      width: 80vw !important;
    }

    .pj-getStartedBackBtn {
        padding: 8px 12px !important; /* Smaller padding */
        font-size: 0.8rem !important; /* Smaller font size */
    }
}