*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}




.collection-zezcart { height: 18vh;
    background-image: url(../../assets/image/collections.jpg);
    background-size: cover;
    background-position: center;
}



.collection-zezcart .back-page{padding: 100px;}
.collection-zezcart .back-page ul{    width: 100%;
    display: block;
    margin: auto;
    float: left;}
.collection-zezcart .back-page ul li{display: block;
    float: left;
    margin-right: 20px;}

.collection-zezcart .back-page ul li a{color: #6f6f6f;}
.collection-zezcart .back-page ul li a:hover{color: #000;}
.collection-zezcart .back-page ul li a.active{color: #000; text-decoration: underline;}












.collection-zezcat{position: relative;    padding-bottom: 100px;}


.collection-zezcat .wrapper{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  justify-content: flex-start;
  background-color: #fff;   
}
.collection-zezcat .sub-images{
  position:fixed;
  display:flex;
  flex-direction: column;
  left:50px;
  top:55%;
  transform:translateY(-50%);
  height:auto;
  opacity:1;
  transition:opacity 0.3s ease-in-out;z-index: 111;
}
.collection-zezcat .sub-images.stick-bottom{
  position:absolute;
  height:auto;
  transform:translateY(0%);
  top:auto; 
}
.collection-zezcat .sub-images img{
  position:relative;
  width:60px;
  height:auto;
  margin:5px 0;
  box-shadow: 0px 0px 1px #1e1e1e;
}
.collection-zezcat .image-wrapper{
  position:relative;
  width:40%;
  height:auto;
  display:flex;
  flex-direction: column;
}
.collection-zezcat .image-wrapper img{
  width:100%;
  height:auto;
}
.collection-zezcat .content-wrapper{
  width:60%;
  padding:50px;
 position: fixed;
    left: 40%;
    top: 30vh;
    bottom: 0px;
}
.collection-zezcat .content-wrapper.stick-bottom{
  position:absolute;
  top:auto;
  bottom:0px;transition: all 1s ease-out;
}
.collection-zezcat .content-wrapper p{
  margin-top:30px;    line-height: 30px;
}
.collection-zezcat .wrapper1{
  position:relative;
  width:100%;
  padding:100px;
  z-index:3;
}

.collection-zezcat .content-wrapper h1{margin-bottom: 1vh; font-weight: 600;}
.collection-zezcat .content-wrapper h4{color: #cd853f;}
.collection-zezcat .content-wrapper h4 b{color: #000;}
.collection-zezcat .content-wrapper h4 span{text-decoration: line-through; color: red; font-size: 18px;}
.collection-zezcat.collection-zezcat .content-wrapper ul{
  display:flex;
  align-items: center;
  justify-content: space-around;
  list-style: none;
  width:60%;
  margin-top:40px;
  margin-bottom:30px;
}
.collection-zezcat .content-wrapper ul li{
  cursor: pointer;
    background:#e8e9e7;
    color: #000;
    padding: 10px 5px;
    width: 100%;
    text-align: center;
    color: #000000;
    margin-right: 18px; border-radius: 5px; border: 0px;font-weight: 600;
}
.collection-zezcat .content-wrapper ul li.active{
  text-decoration: underline;
   
    background: #295a0d;
    color: #fff;
}
.collection-zezcat .content-wrapper .content-tab{
  display:none;
}
.collection-zezcat .content-wrapper .content-tab.active{
  display:block;
}
.collection-zezcat .size-selection{
  width:100%;
  display:flex;
  justify-content: flex-start;
  align-items: center;
}
.collection-zezcat .size-selection input{
  margin-right:20px;
  margin-left:5px;
}
.collection-zezcat.color-selection{
  width:100%;
  display:flex;
  justify-content: flex-start;
  align-items: center;
}
.collection-zezcat.color-selection input{
  margin-right:20px;
  margin-left:5px;
}
.collection-zezcat .content-tab h3{
  margin:15px 0;
}

.collection-zezcat #note{
  position:absolute;
  bottom:10px;
}
.collection-zezcat #note a{
  text-decoration:none;
}







.content-wrapper .content-tab a{display: block; line-height: 32px;}

.text-u{     display: block;
    margin-top: 2vh;
    background: #000;
    padding: 10px 30px;
    color: #fff;
    border-radius: 50px; border: 0px;}

.text-u i{margin-right: 10px;}





.nav__side .nav2 ul li a.active svg path{fill: #000;}



	


	#abc {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
#abc img#close {
position:absolute;
    right: 2vh;
    top: 2vh;
    cursor: pointer;
    width: 35px;
}
#abc div#popupContact {
    position: absolute;
    left: 30%;
    top: 18%;
    margin-left: 0px;
   font-family: "Poppins", sans-serif; z-index: 999;
}
#abc form {
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#fff;font-family: "Poppins", sans-serif;
}
#abc p {
margin-top:30px
}
#abc h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0;font-family: "Poppins", sans-serif;
}
#abc hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc;font-family: "Poppins", sans-serif;
}
#abc input[type=text] {
width:100%;
padding:10px;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family: "Poppins", sans-serif;
}
#abc #name {
background-image:url(../image/name.png);
    background-repeat: no-repeat;
    background-position: 3px 9px;
    background-size: 3% 58%;
}
#abc #phone {
background-image:url(../image/phone.png);
background-repeat: no-repeat;
       background-position: 8px 9px;
    background-size: 2.5% 54%;
}
#abc #email {
background-image:url(../image/email.png);
background-repeat: no-repeat;
    background-position: 7px 9px;
    background-size: 2.5% 50%;
}
#abc textarea {
background-image:url(../image/msg.png);
background-repeat: no-repeat;
    background-position: 7px 9px;
    background-size: 3% 32%;
width:100%;
height:95px;
padding:10px;
resize:none;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family: "Poppins", sans-serif;
margin-bottom:30px
}
#abc #submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:#000;
color:#fff;
border:1px solid #000;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px;font-family: "Poppins", sans-serif;
}
#abc span {
color:red;
font-weight:700
}
#abc button {
width:10%;
height:45px;
border-radius:3px;
background-color:#cd853f;
color:#fff;
font-family: "Poppins", sans-serif;
font-size:18px;
cursor:pointer
}






/*Responsive Devices*/




/*syt*/
@media only screen and (min-width : 1920px) and (max-width : 2559px){}

/*syt*/
@media only screen and (min-width : 1600px) and (max-width : 1919px){
#abc div#popupContact {left: 13%; right: 7%;}

}

/*syt*/
@media only screen and (min-width : 1440px) and (max-width : 1599px){
.collection-zezcat .content-wrapper{top: 25vh;}
.collection-zezcat .content-wrapper h1{font-size: 30px;}
.collection-zezcat.collection-zezcat .content-wrapper ul{width: 80%;}

#abc div#popupContact {left: 13%; right: 3%;}


}

/*syt*/
@media only screen and (min-width : 1366px) and (max-width : 1439px){
.collection-zezcat .content-wrapper{top: 25vh; width: 56%;}
.collection-zezcat .content-wrapper h1{font-size: 30px;}
.collection-zezcat.collection-zezcat .content-wrapper ul{width: 100%;}

#abc div#popupContact {left: 13%; right: 3%;}

}

/*syt*/
@media only screen and (min-width : 1200px) and (max-width : 1365px){
.collection-zezcat .content-wrapper{top: 25vh; width: 50%; left: 49%;}
.collection-zezcat .content-wrapper h1{font-size: 30px;}
.collection-zezcat.collection-zezcat .content-wrapper ul{width: 100%;}
.collection-zezcat .image-wrapper{width: 50%;}


#abc div#popupContact {left: 13%; right: 3%;}


}


/*Tab-syt*/
@media only screen and (min-width : 1024px) and (max-width : 1199px){
.collection-zezcat .content-wrapper{top: 25vh; width: 50%; left: 49%;}
.collection-zezcat .content-wrapper h1{font-size: 30px;}
.collection-zezcat.collection-zezcat .content-wrapper ul{width: 100%;}
.collection-zezcat .image-wrapper{width: 50%;}



#abc div#popupContact {left: 13%; right: 3%;}


}


/*Tab*/
@media only screen and (min-width : 768px) and (max-width : 1023px){

 .collection-zezcat .wrapper {
     position: relative;
     width: 100%;
     height: 100%;
     display: block;
}
 .collection-zezcat .image-wrapper {
     position: relative;
     width: 100%;
     display: block;
     float: left;
     height: 60vh;
     overflow: hidden;
}
 .collection-zezcat .sub-images {
     position: relative;
     display: block;
     float: left;
     z-index: 999;
     left: 5vh;
     top: 0px;
     transform: translateY(0%);
     height: auto;
     bottom: 0;
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
}
 .collection-zezcat .content-wrapper {
     width: 100%;
     padding: 35px;
     min-height: 100%;
     transform: translateY(0%);
     left: 0;
     top: 0;
     position: relative;
     display: block;
     float: left;
}
 .collection-zezcat .image-wrapper img {
     width: 100%;
     height: 60vh;
     object-fit: contain;
}
 .collection-zezcart {
    margin-bottom: 9vh;
     height: 21vh;
}
 .collection-zezcart .back-page {
     padding-top: 111px;
     padding-left: 45px;
}
 .collection-zezcat .content-wrapper.stick-bottom{
    position: relative!important;
}
 .collection-zezcat .sub-images.stick-bottom{
    position: relative!important;
     bottom: 0px !important;
     display: block;
     z-index: 111;
     float: left;
}
 .collection-zezcat .content-wrapper h1{
    font-size: 30px;
}
 .collection-zezcat.collection-zezcat .content-wrapper ul{
    width: 100%;
}
 #abc div#popupContact{
    left: 0%;
}







#abc #name{    background-position: 10px 14px;
    background-size: 3% 37%;}

#abc #phone{    background-position: 4px 12px;
    background-size: 4.5% 51%;}

    #abc #email{    background-position: 8px 11px;
    background-size: 3.5% 49%;}
#abc textarea{background-position: 7px 9px;
    background-size: 4% 30%;

}





}


/*Mob*/
@media only screen and (min-width : 150px) and (max-width : 767px){

 .collection-zezcat .wrapper {
     position: relative;
     width: 100%;
     height: 100%;
     display: block;
}
 .collection-zezcat .image-wrapper {
     position: relative;
     width: 100%;
     display: block;
     float: left;
     height: 60vh;
     overflow: hidden;
}
 .collection-zezcat .sub-images {
     position: relative;
     display: block;
     float: left;
     z-index: 999;
     left: 5vh;
     top: 0px;
     transform: translateY(0%);
     height: auto;
     bottom: 0;
     opacity: 1;
     transition: opacity 0.3s ease-in-out;
}
 .collection-zezcat .content-wrapper {
     width: 100%;
     padding: 35px;
     min-height: 100%;
     transform: translateY(0%);
     left: 0;
     top: 18px;
     position: relative;
     display: block;
     float: left;
}
 .collection-zezcat .image-wrapper img {
     width: 100%;
     height: 60vh;
     object-fit: contain;
}
 .collection-zezcart {
    margin-bottom: 9vh;
     height: 30vh;
}
 .collection-zezcart .back-page {
     padding-top: 130px;
     padding-left: 30px;
}
 .collection-zezcat .content-wrapper.stick-bottom{
    position: relative!important;
}
 .collection-zezcat .sub-images.stick-bottom{
    position: relative!important;
     bottom: 0px !important;
     display: block;
     z-index: 111;
     float: left;
}
 .collection-zezcat .content-wrapper h1{
    font-size: 30px;
}
 .collection-zezcat.collection-zezcat .content-wrapper ul{
    width: 100%;display: block;
}
.collection-zezcat .content-wrapper ul li{margin-bottom: 5px;}
 #abc div#popupContact{
    left: 0%;
}



.collection-zezcart .back-page ul li{margin-bottom: 20px;}




#abc #name{    background-position: 8px 14px;
    background-size: 6% 37%;}

#abc #phone{    background-position: 4px 12px;
    background-size: 9.5% 51%;}

    #abc #email{    background-position: 8px 11px;
    background-size: 6.5% 48%;}
#abc textarea{background-position: 7px 9px;
    background-size: 9% 30%;}



    
}


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

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