body {
            font-family: Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;   
        }
        /* editing pages */
         .site{
         min-height: 100dvh;
         display: grid;
         grid-template-columns: auto 1fr auto;
         grid-template-columns: minmax(0,1fr);
        } 
          .TitlePage{
            padding: 10px;
          }
          .product-cards{
            padding: 10px;
          }
          /* editing pages */
         header {
            display: block;
            position: fixed;  
            left: 0;
            right: 0;   
            background:white;
            padding: 20px 0px;
            height: 20px;
            z-index: 1; 
         }          
         .tab-panels ul li{  
            list-style-type: none;
            display: inline-block; 
            margin-right: 0;
            padding: 3px 10px;
            border-radius:0;
            color: black;
            font-weight: 100;
            cursor: pointer;
            position: relative;
         }
         li::after{
            content:"";
            position: absolute;
            left:50%;
            bottom: -10px;
            height:1px;
            width: 0;
            background-color: black;
            transition: 0.3s ease, left 0.3s ease;
            transform: translateX(-50%);
        }
         .tab-panels ul li.active:hover::after{
            width: 100%;
            color: black;
            /* background: #666; */
         }
         .tab-panels .panel{
            display: none;
            background: white;
            padding: 30px;
            flex-direction: row;
            border-bottom: 1px solid;
            border-color:lightgray;
            border-radius:0 0 5px 5px;
            position: absolute;
            width: 100%;
         }
         /* testing */
         .tab-panels .panel.active{
            display: none;
         }
         .tabs {
            font-size: 15px;
            margin: 0 0 0 15px;  
            padding: 0;
            display: flex;
            position: relative; 
            list-style: none;
            height: 40px;       
         }       

         /* Panel tabs */
         .contents{
            margin-right: 60px;          
         } 
         .contents p{ color: darkgray;}
         .contents li{
            margin-bottom: 10px; ;
            list-style-type: none;
            
         }
          .lastone{
            /* border: 0px solid white;
            box-shadow: 0 0 10px; */
            border-radius: 50%;
            margin-left: auto; 
            margin-right: 100px;           
            background-repeat: no-repeat;
            background-image: url('');
            background-position: center;
            background-size: 200px;
            width: 200px;
            height: 200px;
            
         }
         .contents li a
         {
            color: black;
            text-decoration: none;
         }
/*mobile and desktop search menu  */
 .search-icon{
        /* mobile view set padding to 0 */
        padding: 6px;
        margin-left : auto;
        margin-right:15px ;
        box-sizing: border-box;
        /* mobile view set search bar at background color white */
        background: rgb(222, 222, 222);  
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid white;
        /*  */
        height: 25px;
        width: 250px;
        display: flex;
        /* mobile view set justify-content center*/
         justify-content: end; 
        align-items: center;
        transition: .5s ease-in-out;
        }
        .search-icon p{ 
            color: grey;
            margin-right: auto;}
        .search-icon:hover{
            border: 1px solid black;  
            background: white;
        
        }
        .search-icon.active{
            border: 1px solid black;  
            background: white;
        }
        .icon{
            position: relative;
            width: 10px;
            height: 10px;
            border: 3px solid black;
            border-radius: 50%;
            transform: rotate(-45deg);
            cursor: pointer;
            transition: .5s;
         
        }
        .icon::after{
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            height: 80%;
            width: 3px;
            background: black;
            transition: .5s;
        }
        .icon.active{
        color: black;
        } 
        
/* search page */
.off-screen-search{
   
   height: 100vh;
   width: 100%;
   background-color: white;
   max-width: 1520px; 
   position: fixed;
   right: -1520px;   
   transition: .5s;
   overflow-y: scroll;
   scrollbar-width: thin;
}
.off-screen-search.active{

   right:0px;
}

.search-wrapper{
         margin: 10px;
         display: flex;
         flex-direction: column;
         gap: .25rem;
      }
    input{font-size: 1rem;
    }
    #search{
      border-radius: 20px;
    }
    .user-cards{
      padding-left:4px;
      padding-right: 4px;
      padding-bottom: 60px; 
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
        gap: .5rem;
        margin-top: 1rem;
    }
    .card{
   
        --padding: 1rem;
        background-color: white;
        border-radius: .25rem;
        margin-bottom: 10px;

    }
   
    .card > .header{
        margin-top: .25rem;
        margin-bottom: .35rem;
    }
    .card > .body{
        margin-bottom: 1em;
        font-size: .8rem;
        color:black;
    }
    .hide{
        display: none;
    }
    .card-header{
       /* box-shadow:gray 0 0 10px; */
        padding: var(--padding);
        padding-bottom: 0;
    }
    .card-header.card-image{
        border-radius: .25rem;
        border: 1px solid white;
        padding: 0;
        overflow: hidden;
    }
    .card-header.card-image > img{
        display: block;
        width: 100%;
        max-height: 400px;
        aspect-ratio: 9/16 ;
        object-fit: cover;
        object-position: center;
        transition: 200ms transform ease-in-out;
    }
    .card:hover > .card-header.card-image > img{
        transform: scale(1.025);
    }
/* moblie ham-menu */
 .off-screen-menu{
        background-color: white;
        height: 100vh;
        width: 100%;
        max-width: 450px;
        position: fixed;
        /* top: 0; */
        left: -450px;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* justify-content: center;
        align-items: center;
        text-align: center; */
        font-size: 1rem;
        transition: .3s ease;
   
    } 
    .off-screen-menu li{
      padding: 20px;
      list-style: none;
      display: none; 
     
    }
    .mobilecategory{
     /* background-color: rgb(236, 235, 235); */
   
       padding: 15px 0 15px ;
       border-bottom: 1px solid lightgrey;
       font-size: small;
       font-weight: 900;
      cursor: pointer;
    }

    .arrow{
      content: "\00BB" ;
      margin-left: 25px ;
      display: inline-block;
      transition: transform 0.3s ease;
    
    }
    .arrow.rotate{
      transform: rotate(90deg);
    }  
    
    .off-screen-menu a{ 
      padding: 15px;
      display: block;
      text-decoration: none;
      color: black;
      
    }
    .off-screen-menu.active{
        left: 0;
    }
    .mobile{
      display: none;
        padding: 1rem;
        background-color: white;
         cursor: pointer;
    }
    .ham-menu{
        top: -20px;
        height: 40px;
        width: 40px;
        margin-right: auto;
        position: relative;
    }
    .ham-menu span{
        height: 4px;
        width: 100%;
        background-color: black; 
        border-radius: 25px;
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%, -50%);
        transition: .5s ease;
    }
    .ham-menu span:nth-child(1){
        top: 25%;
    }
    .ham-menu span:nth-child(3){

        top:75%;
    }
    .ham-menu.active span:nth-child(1){
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .ham-menu.active span:nth-child(2){
        opacity: 0;
    }
    .ham-menu.active span:nth-child(3){
        top:50%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }
         /* end */
          ul .logo{
        display:inline-block;
        background-repeat: no-repeat;
        background-image: url('Images/FysiqueLogo.png');
        background-position: center;
        background-size: 110px;
        width: 150px;
        height: 30px;
        color: transparent;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);   
        z-index: 9;    
    }    

/* Product display for the different pages  */
.TitlePage{
   margin: 0;
}
.product-cards{
      padding-left:4px;
      padding-right: 4px;
      padding-bottom: 60px; 
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
        gap: .5rem;
        margin-top: 1rem;
 }
 .productCard {
      padding: 0px;
        background-color: white;
        border-radius: .25rem;
        margin-bottom: 60px;
 }
 .productCard > .header {
    margin-top: .25rem;
        margin-bottom: .35rem;
 }
 .productCard > .body{
      margin-bottom: 1em;
        font-size: .8rem;
        color:black;
 }
 .card-header{
       /* box-shadow:gray 0 0 10px; */
        padding: 0px;
        padding-bottom: 0;
    }
    .card-header.card-image{
        border-radius: .25rem;
        border: 1px solid white;
        padding: 0;
        overflow: hidden;
    }
    .card-header.card-image > img{
        display: block;
        width: 100%;
        max-height: 400px;
        aspect-ratio: 9/16 ;
        object-fit: cover;
        object-position: center;
        transition: 200ms transform ease-in-out;
    }
     .productCard:hover > .card-header.card-image > img{
        transform: scale(1.025);
    }
    .sbb * {
      margin-left: auto;
      margin-right: 0;
      margin-top: -60px;
      /* margin: -60px 0px 0px 100px; */
    }
    .sets{
      color:black ;
    }
    .sets:hover{
      color: lightgray;
    }

    .kit, .kittext{
      
      text-align: center;
      margin-right:auto;
      margin-left:auto ;
      padding: 10px;
   }
/* Shopify buy button */
/* body */
    button{ 
      padding: 10px 15px; 
      cursor: pointer; 
      margin: 5px;  
      border-radius: 50%; 
      border: none; 
   }
   .btn{
       position: absolute;
       margin: 10px;
       /* top: 25px; 
       left:10px;    */
   } 
/* Large main background images */
         section{
            background:white;
            color: black;
            padding: 20px;
            display:flex;
            flex-direction: row; 
         }  
         .Lbottons{
            text-transform: uppercase;
            align-items: center;      
            justify-content: center;
            margin-top: auto;
            display: flex;
            flex-direction:row;
            font-weight: 900;
            text-indent:0px;
            color: white;
         }
         .Hbuttons{
            margin-right: auto;
            margin-left: auto;
            margin-top: auto;
            text-decoration: none;
            text-indent: 0px;
            display: flex;
            flex-direction: column;
         }
            .Hbuttons button{
               border: 1px solid white;
               background: transparent;
               border-radius: 30px;
               color: white;
               font-weight: bolder;
            }
         .heros{
            background-color: black;
            height: 690px;
            /* background-size: 100%; */
            background-size: cover;
            background-position: center;     
            background-repeat: no-repeat;       
            color: transparent;
            display: flex;
            flex-direction: column; 

         }
         .hero{
            margin-top: 40px;
            background-image: url("Images/hero1.JPG");
         }
         .hero1{ 
            background-image: url("Images/hero2.JPG");
         }
         .hero2{ 
            background-image: url("Images/hero3.jpg");
         }
         .img-descriptions{
            margin-top: auto;
            color: white;
            text-indent: 0px;
            text-transform: uppercase;
            font-size: 1.5rem;
            font-weight: 900;
         }
         .img-subcaption{
            color:white;
            text-transform: initial;
            font-weight: 300;
            font-size: small;
            text-indent: 0px;
         }
         .img-link{
            color: white;
            text-indent: 0px;
            font-size: 1.3rem;
         }
         /* this causes all product to align right */
         #productslides1, #productslides2{
          background-color:white;
          display: flex;      
         }
         .productslider { 
            /* position: relative; */
            /* height: 500px;  */
            
            overflow: hidden;
            background-color:white;
            color: black;
            padding: 0px;     
            margin: 0px;    
            text-transform: capitalize; 
               }
         .productslider figure{
            float: left; 
            margin: 60px 5px;
            max-width: 200px;

         }
         .productslider figure img{
            border: 1px solid white;
            border-radius: 2%;
            box-shadow: gray 0 0 5px; 
            height: 300px;
            width: 200px;
         }    

         /* Swtich the Fcountdown back to -70 and kittext back to 0 and take off the section blanks*/
/* Container for timer */
.blanks{
   display: contents;
}
.Fcountdown-container{
background-color: white;
   /* margin-top: -70px; */
   z-index: 0;
   /* margin-top: -350px; */
 

   text-align: center; 
   justify-content: center;
   padding: 30px;
   
   margin-left: auto;
   margin-right: auto;
}
.countdown-container{
   text-align: center; 
   justify-content: center;
   padding: 30px;
   margin: 90px;
   margin-left: auto;
   margin-right: auto;
}

.Mtimer, .Wtimer, .Ftimer {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.Mtimer div, .Wtimer div, .Ftimer div {
    background: #333;
    color: white;
    padding: 15px;
    border-radius: 5px;
    width: 80px;
}

.Mtimer p, .Wtimer p, .Ftimer p {
    font-size: 2.5rem;
    margin: 0;
}

.Mtimer span, .Wtimer span, .Ftimer span {
    font-size: 0.8rem;
    text-transform: uppercase;
}
/* Main Titles Between Sections */
main{
   margin: 0px 0 35px 15px; 
   text-transform: capitalize;
   font-weight:bolder ;
   font-size: 1.5rem;
}
.firstmain{
   margin-top: 50px;
}
       
/* Collections, Workouts, Caategories img */
         .collections, .workouts, .categories {
            display: flex; 
            margin: 1%;
         }
         .collection, .workout, .category{
            flex-wrap: nowrap; 
            height: 410px;
            width: 800px;
            background-color: black;
            color: white;
            margin: 2px;
            color: transparent;
            background-position: center;
            background-repeat: no-repeat; 
            background-size: cover;       
            
         }
         .winter{background-image: url("Images/winter\ shorts.PNG");}
         .spring{background-image: url("Images/Hoodie\ 2.png");}
         .summer{background-image: url("Images/spring\ leggings.jpg");}
         .fall{background-image: url("Images/sports\ bra.png");}
         .men{background-image: url("Images/Bag.jpeg");}
         .women{background-image: url("Images/Cap.jpeg");}
         .accessories{background-image: url("Images/Belt.jpeg");}
         .lifting{background-image: url("Images/short\ sleeve.jpeg");}
         .running{background-image: url("Images/Long\ Sleeve\ Compression.jpeg");}
         .swimming{background-image: url("Images/hoodies.PNG");}
         .hiit{background-image: url("Images/Sweatpants\ Navy\ Blue.jpeg");}

         
/* mobile categories fix the display with caption and the different pictures*/
    .moblie-collection{ 
        overflow: hidden;
        overflow-x: auto;
        margin: 20px 0 20px 0;
        padding: 0px;
        scrollbar-width: none;
    }
    .moblie-collection ul{
        margin: 0px;
        padding: 0 1px 0 2px;
        display:none;
        
    }
    .moblie-collection ul .moblie-image{
        background-color: black;
        height:400px;
        width:250px;
        margin:3px; 
        /* background-size: 150%; */
        background-size: cover;
        background-repeat: no-repeat;
        color: transparent;
        background-position: center;
    }  
    .mpic1{background-image: url(Images/winter\ shorts.PNG);}
    .mpic2{background-image: url(Images/Hoodie\ 2.png);}
    .mpic3{background-image: url(Images/spring\ leggings.jpg);}
    .mpic4{background-image: url(Images/sports\ bra.png);}
    .mpic5{background-image: url(Images/Bag.jpeg);}
    .mpic6{background-image: url(Images/Cap.jpeg);}
    .mpic7{background-image: url(Images/Belt.jpeg);}
    .mpic8{background-image: url(Images/short\ sleeve.jpeg);}
    .mpic9{background-image: url(Images/Long\ Sleeve\ Compression.jpeg);}
    .mpic10{background-image: url(Images/hoodies.PNG);}
    .mpic11{background-image: url(Images/Sweatpants\ Navy\ Blue.jpeg);}
/* Text at the bottom of the page */
         
         .highlights{
            display: flex;
            flex-direction: column;
            padding: 100px;
            margin-top: -60px;
         }   
         .h-text{
            text-transform: capitalize;
            font-weight: 900;
         }
         .hh-text{
            text-transform: capitalize;
            font-weight: 900;
         }
         .descriptions{
             font-size: small; 
         }      
         .scriptionbackg{
            text-align: center;
            background-color: lightgreen;
            border-radius: 20px;
            padding: 2px;
         }  
         .highlights.sub{
            margin-top: -50px;
         }
       /*labels  */
       .productLabels{
         /* color: darkgrey; */
         text-transform: uppercase;
         font-weight: 900;
         padding: 0;
         margin: 20px 0 0 20px;
       }
       /* labels  */
         footer{
            margin-top: auto;
            border-top: 1px solid;
            border-color:lightgray;
            border-radius: 5px 5px;
            /* height: 50px; */

         }
         footer ul{
            display: flex;
            list-style-type: none;
            margin:0;
            padding:17px;
            justify-content: flex-end;
            
            
         }
         footer ul li:first-child{
            font-size:small ;
            margin-right: auto;
         }
         .copyright{
            font-size: x-small;
            }
         footer ul li{ 
            margin-right: 20px;            
         }
         footer ul li a{
            font-size: small;
            font-weight:600; 
            color:rgba(11, 11, 11, 0.643);
            text-decoration: none;
         }
         footer ul li a:hover{
            color: black;
         }
        

/* media query reesponsive rules */

/* womens mens toggle button */
 /* div .hide, div .hide{display: none;}      */

/* you can add two arguments to the media screen this is homwwork and fix responsiveness */

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

      .tab-panels ul li
         { display: none;}
          .search-icon p {
            display: none;
          }
          .search-icon{
            background:white;
            padding: 0;
            border: none;
            border-radius: 0;
            width: 25px; ;
            justify-content: center;
            overflow: visible;
          }
          .search-icon:hover{
            border: white;
          }
          .search-icon.active{
            border: white;          
        }  
        .icon{
         height: 15px;
         width: 15px;
        }
     .heros
         {height: 500px;}
      .ham-menu{
        top: -15px;
        left: -15px;
        height: 25px;
        width: 25px;
        }
        .mobile{display: flex;}
        footer{display: none;}
        

/* This is temporay margin to hid kit */

.Fcountdown-container{
   max-width: 680px;
   margin-top:-60px ;
}
.Ftimer{
            gap:2px
            }
         .Ftimer div{
            height: 60;
            padding: 10px;
            width: 40px;
         }
         .Ftimer p{
            font-size: 1.5rem;
         }
         .Ftimer span{
            font-size: 0.4rem;
         }
.kittext{max-width:680px ;}
.kit{
   max-width: 680px;
   padding: 20px;}

/* end here */


} 
@media screen and (max-width: 750px) {
     .collection, .workout, .category, .btn, 
     .countdown-container{display: none;}
   .moblie-collection ul{display: inline-flex;
               margin: 15px;}
     .img-descriptions, .img-link
         { font-size: small;}
         #productslides1, #productslides2{
            overflow-x: auto;
            scrollbar-width: none;
         }
        .highlights{
         margin-top: 1px;
         padding: 30px;}
        .heros
         {   background-size: cover;
             /* background-size:190%; */
            height: 530px;
         }
         .Hbuttons{
            margin-top: 300px;
         }
            main{
         margin: 25px 0px 5px 10px; 
         text-transform: capitalize;
         font-weight:bolder ;
         font-size: 1.5rem;
         }



/* This is temporay margin to hid kit */

/* This is temporay margin to hid kit */

.Fcountdown-container{
   max-width: 380px;
   margin-top:-60px ;
}
.Ftimer{
            gap:2px
            }
         .Ftimer div{
            height: 60;
            padding: 10px;
            width: 40px;
         }
         .Ftimer p{
            font-size: 1.5rem;
         }
         .Ftimer span{
            font-size: 0.4rem;
         }
.kittext{max-width:380px ;}
.kit{
   max-width: 380px;
   padding: 20px;}

/* end here */

/* end here */
 
} 
@media screen and (max-width: 400px) {

      
     .img-descriptions, .img-link
         { font-size: small;}
      .mobile{display: flex;}
      .highlights{ padding:60px 10px 5px 10px;}
      .h-text{font-size: medium;}
      .hh-text{font-size: medium}
      .heros
         { background-size: cover;
            /* background-size:310%; */
            height: 530px;
         }
            .productslider{
               padding: 0;
               margin-left: -25px;
            }
      main{
      margin: 10px 0px 5px 20px; 
      text-transform: capitalize;
      font-weight:bolder ;
      font-size: 1.3rem;
       }
       .contents{
            margin-right: 3px;          
         } 

   /* .user-cards{grid-template-columns: repeat(auto-fill, minmax(100px,1fr));} This changes the search bar to include more photos can also change display on the pages*/
/* This is temporay margin to hid kit */

.Fcountdown-container{
   max-width: 300px;
   margin-top:-60px ;
}
.kittext{max-width:300px ;}
.kit{
   max-width: 300px;
   padding: 20px;}

/* end here */
         .Ftimer{
            gap:2px
            }
         .Ftimer div{
            height: 40;
            padding: 10px;
            width: 30px;
         }
         .Ftimer p{
            font-size: 1.5rem;
         }
         .Ftimer span{
            font-size: 0.4rem;
         }
   /* working */
}