/* your styles go here */

body {
    --font-color:black;
    --primary-color:rgb(231, 246, 250);
    --secondary-color:black;
    --background-color:white;
    --icon-size:20px;
    color:var(--font-color);
}

img {
  width: 100%;
}

.main-font{
    color:var(--font-color);
}
/* responsive */
@media (max-width: 992px) {
    .responsive{
      display: none
    }
    .responsive_mobile{
      display: block
    }
    .responsive_menu{
      overflow-y: scroll;
      height: calc(100vh - 122px);
      /* background: pink; */
    }
    .responsive_desktop{
      display: none;
    }

    .responsive_desktop_flex {
      display: none;
    }

    .subdomainlogo{
        margin: 0px;
    }
    .leftSM{
        border-bottom:none !important;
    }
    .rightSM{
        border-top:none !important;
    }
}


@media (min-width: 992px) {
    .responsive_desktop{
        display: block;
    }
    .responsive_desktop_flex {
      display: flex;
    }
    .responsive_mobile{
      display: none;
    }

    .subdomainlogo{
        margin-left:42%;
    }

}

/* top bar */


/* header menu */
@media (max-width: 992px) {
  .navbar {
      background-color: white !important;
  }
}

@media (min-width: 993px) {
  .navbar-nav li:hover .dropdown-menu {
      display: block;
      transform: translateY(-15px);
  }
}

nav.navbar a.nav-link.active, nav.navbar a.nav-link{
    color:var(--font-color);
}

nav.navbar a.nav-link.active, nav.navbar a.nav-link:hover{
  color: black;
  text-decoration: underline;
}

/* mega menu */
.megamenu{
    background: var(--background-color);
}
.megamenu ul a{
    color:var(--font-color);
}
.megamenu ul a:hover{
    color: var(--secondary-color);
}



.owl-dots .owl-dot.active span{
    background: var(--primary-color) !important;
}

.btn-primary, .btn-template{
    background: var(--primary-color);
    border-color: var(--primary-color);
}

a.read-more{
    color: var(--primary-color);
}


/* filters sidebar  */
.colorTile{
    background:var(--bg);
    width:50px;
    height:50px;
    margin-right:5px;
    position: relative;
    display: inline-block;
}

.colorTile:hover .tooltiptext{
    visibility: visible;
}

.colorTile .tooltiptext {
    visibility: hidden;
    min-width: 60px;
    bottom: 110%;
    left: 50%;
    margin-left: -30px;
    background:var(--bg);
    color: #fff;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    position: absolute;
    z-index: 1;
  }

  .filterOn{
    background: var(--primary-color);
    padding:5px;
    display: inline-block;
    margin-left: 20px;
    color:black;
    padding:4px 15px;
    border-radius: 15px;
    font-size: 12px;
  }


.sidebar ul ul a{
    color:var(--font-color);
}

.sidebar ul ul a:hover{
    color:black;
    background: var(--primary-color);
}

.sidebar li.active > a {
    color:black !important;
    background:var(--primary-color);
}

/* product list */
.productCardName{
    color:var(--font-color);
    text-transform: uppercase;
}

.product .hover-overlay a.active{
    background: var(--primary-color);
}

.page-item.active .page-link {
    color:black;
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}
.rangeSVGBox{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:50px 0px;
}

.rangeSVGIcon{
    width: 250px;
    margin:0px 20px;
    cursor: pointer;
}
.owl2:hover img{
    cursor: pointer;
    margin: auto auto 20px auto;
    transition: all 0.5s ease;
}

.owl2 img{
    cursor: pointer;
    margin: auto auto 20px auto;
}

.footer-list{
    font-size: 14px;
}

.footer-list li a:hover{
    color:var(--secondary-color) !important;
}

.storeFinderLink{
    padding: 5px 10px;
    margin-left: 5px;
    background: var(--primary-color);
    color: var(--font-color);
    text-decoration: none !important;
}

.colorDot{
    height: 35px;
    width: 35px;
    /* border-radius: 50%; */
    cursor: pointer;
}

.triangle-topleft {
    width: 0;
    height: 0;
    border-right: 35px solid transparent;
    position: absolute;
}

.triangle-bottomright {
    width: 0;
    height: 0;
    border-left: 35px solid transparent;

  }

  .dotWrapper{
      display: inline-block;
      margin-right: 15px;
      cursor: pointer;
  }
  .downloadLink{
      padding:5px 20px;
      border:1px solid white;
      text-decoration: none !important;
      color:white !important;
      margin-top:20px;
      margin-right: 20px;
  }

  .downloadLink:hover{
    border-color: var(--secondary-color);
    color: var(--secondary-color) !important;
  }

    .descriptionSection p{
        line-height: 20px !important;
    }

  .sectionHeader{
    font-size: 20px;
    font-weight: bold !important;
  }

  .descriptionSection ul{
    padding-left: 18px;
  }

  .descriptionSection ul li{
    list-style-type: square;
  }
  .icon-img{
      width: 25px;
      display: inline-block;
      margin-right: 10px;
  }


.toRight{
    display: inline-block;
    float: right;
}

/* store finder */
.regionDropDown{
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    border:none;
    background: none;
    color:gray;
    border-bottom: 1px solid var(--primary-color);
    border-radius: 0px;
    outline: none;
    padding: 4px;
    cursor: pointer;
}

.imageIcon{
    width: 14px;
    margin-right: 10px;
}

.storeFinderNav{
    display:inline-flex;
    margin: 20px;
}

.storeFinderFilter{
    display: inline-block;
    font-size: 17px;
    color:gray;
}

.storeFinderFilter input{
    margin: 0px 5px;
    position: relative;
    top: -3px;
    cursor: pointer;
}

/* --------------------- */
input[type="radio"] {
    -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;    /* Firefox */
    -ms-appearance: checkbox;     /* not currently supported */
  }


/* symbols guides  */
.symbolcard{
    color:var(--font-color);
    font-size: 13px;
    padding:7px;
  }
  .symbolcard-top{
    margin-bottom: 10px;
  }
  .symbolcard-top img{
    border: 2px solid white;
    display: inline-block;
  }
  .symbolcard-top div{
    display: inline-block;
    font-size: 20px;
    vertical-align: bottom;
    font-weight: bold;
    margin: 0px 0px 5px 15px;
  }

  .symbolcard-bottom ul{
    margin-top: 10px;
    list-style-type: square;
    padding-left: 16px;
  }

  .symbolcard-bottom ul li{
    display: list-item;
  }


  /* heat stress */
  .main{
    min-height:100vh;
    width:100wh;
    position:relative;
    z-index:1;
  }

  .scollbg{
    position: relative;
    min-height: 500px;
    z-index: 2;
    padding:50px;
    color:white;
    display:flex;
    flex-direction:column;
  }

  .destitle{
    flex:1;
    text-align:left;
    font-size:3em;
    width:80%;
    margin:0 auto;
    font-weight:bold;
  }

  .desbody{
    flex:3;
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
  }
  .yellowFont{
    color:#F8E71C;
  }
  .desbox{
    flex:1;
    max-width:480px;
    min-width:300px;
    height:260px;
    margin:2px auto;
    padding:5px;
    border-top:#F8E71C 8px solid;
    border-bottom:#F8E71C 8px solid;
    display:flex;
    flex-direction:column;
  }
  .descontent{
    margin:auto;
  }

  .fixbg{
    position:relative;
    height: 100vh;
    background-size: contain;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
  }
  .fixcontent{
    max-width:400px;
    height:100%;
    margin-left: 18%;
    padding-top: 15%;
    color:white,
  }
  .fixcontenttitle{
    font-size:24px;
    font-weight:bold;
  }
  .fixcontentdesc{
    margin:25px 0;
  }
  .fixcontentlink{
    border:2px solid white;
    padding: 5px 15px 5px;
    font-weight:bold;
    text-decoration: none;
    color:white;
  }

  .fixcontentlink:hover{
    background:black;
    opacity:0.8;
    transition:0.8s;
    color:#F8E71C;
    cursor:pointer;
    user-select:none;
  }

  .img1{
    background-image: url("http://cdn.fashionbiz.com/syzmik/assets/images/heat-bg-1-b3b261af84d52f55439b9b346798540b.jpg");
  }

  .img2{
    background-image: url("http://cdn.fashionbiz.com/syzmik/assets/images/heat-bg-2-1d86f5e8fa260b08e7c6b21c5cddac75.jpg");
  }

  .img3{
    background-image: url("http://cdn.fashionbiz.com/syzmik/assets/images/heat-bg-3-714c9f5dfc1c6d303eae722619ebe5ff.jpg");
  }


  /* country selector */
  .countrySelector{
      margin-top: 5px;
      min-width: fit-content;
  }

  .countrySelector a:hover{
    background: var(--secondary-color);
    text-decoration: none;
  }

  /* contact us form */
  .contactus input{
    width: 100%;
    height:45px;
  }

  .contactus select{
    width: 100%;
    height:45px;
  }

  .submit_button{
    padding: 15px 40px;
    background: #333333;
    color: white;
    text-transform: uppercase;
    border: none;
    font-size: 20px;
    letter-spacing: 5px;
  }

  .submit_button:hover{
    cursor: pointer;
    background:var(--secondary-color);
  }


#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 200px;
}

#pac-input:focus {
  border-color: #4d90fe;
}
.pirate{
  position: -webkit-sticky;
  position: sticky;
  top: 4rem;
}

.borderButton{
  padding: 10px 20px;
  border: 2px solid #8c93a1;
  display: inline-block;
  width: 49%;
  font-size: 13px;
  color:#8c93a1;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.borderButton:hover{
  border-color: black;
  color:black;
  transition: all 1.5s ease;
}

.colorSelector_thumb{
  width: 120px;
  margin: 10px;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  opacity: 0.4;
}

.colorSelector_thumb:hover{
  border: 1px solid var(--primary-color);
}

.activeColor{
  transition: all 0.8s ease;
  opacity: 1;
}

.hide{
  display: none;
}

.zoom_glass{
  cursor: zoom-in;
}

.newStyleTag_top{
  position: absolute !important;
  bottom: 1.5em !important;
  right: 0 !important;
  z-index: 10 !important;
  letter-spacing: 0.6em !important;
  text-align: center !important;
  padding: 0.6em 2em !important;
  letter-spacing: 0.6px !important;
  font-weight: bold !important;
  -webkit-transform: translateX(0.8em) !important;
  -ms-transform: translateX(0.8em) !important;
  transform: translateX(0.8em) !important;
  color: #FFF !important;
  background-color: #ec2891 !important;
  font-size: 0.8em !important;
}

.newStyleTag_bottom{
  position: absolute !important;
  right: -10px !important;
  display: block !important;
  border-style: solid !important;
  border-width: 1em 0.8em 0 0 !important;
  border-color: #b7106a transparent transparent !important;
  bottom: 3px !important;
}


/* spinner start */
.lds-roller {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #55bfdc;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* spinner ends */

.nav-link{
  cursor: pointer;
  padding:3px;
}

.imageshadow{
  box-shadow: 1px 1px 9px rgba(0,0,0,.5);
}

.downloadLink2{
  color: lightgray;
  border: 2px solid lightgray;
  text-decoration: none;
  width: 100%;
  padding: 5px 20px;
  text-align: center;
  margin: 15px auto;
}

.downloadLink2:hover{
  color:var(--secondary-color);
  text-decoration: none;
  border: 2px solid var(--secondary-color);
}

.sendEnquiryButton{
  background: #4d90fe;
}

/* Homepage Styles */
a.portalLink {
  text-decoration: none;
  color: inherit;
}

.theNewLook {
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}

@media (max-width: 992px) {
  .theNewLook {
    top: 0;
    position: initial;
    transform: translateY(0);
  }
}

.productitem{
  position: relative;
}

.addtofavourite{
  display: none;
  bottom: 0px;
  cursor: pointer;
  transition: all 0.5s ease !important;
}

.productitem:hover > .addtofavourite {
  display: block;
  position: absolute;
  bottom: 0px;
  text-align: center;
  width: 100%;
  background: white;
  color:black;
  opacity: 0.8;
  transition: all 0.5s ease !important;
}

.productitem:hover > a > .newStyleTag_top{
  bottom: 2.5em !important;
  transition: all 0.5s ease !important;
}

.home-industries .industry-portal a {
  position: relative;
}

.home-industries .industry-portal .portal-overlay {
  display: none;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e2e244;
  opacity: 0.8;
  color: black;
  font-size: 1.4em;
  font-weight: lighter;
  letter-spacing: 2px;
}

.home-industries .industry-portal .portal-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 992px) {
  section.hero #owl-2 .owl-nav {
    width: 100%;
  }
}

@media (min-width: 992px) {
  section.hero #owl-2 .owl-nav {
    max-width: 1200px;
  }
}

section.hero #owl-1 .owl-nav {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-top: 0;
}

.denim-campaign-portal {
  position: relative;
}

.denim-campaign-portal:hover:after {
  opacity: 0.8;
}

.denim-campaign-portal:after {
  content: 'VIEW PRODUCT';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #c8c240;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  letter-spacing: 1px;
  transition: opacity 0.3s ease;
}

.the-new-look-campaign-portal {
  position: relative;
}

.the-new-look-campaign-portal:hover:after {
  opacity: 1;
}

.the-new-look-campaign-portal:after {
  content: 'VIEW PRODUCT';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  letter-spacing: 1px;
  transition: opacity 0.3s ease;
}

.the-new-look-campaign-portal.lily:after {
  background-color: rgba(203, 189, 202, 0.7);
}

.the-new-look-campaign-portal.camden:after {
  background-color: rgba(198, 209, 233, 0.7);
}


/* MENU STYLES */
.menu-wrap {
  float: right;
  position: relative;
  margin-right: 45px;
  z-index: 1;
  margin-top: -5px;
}

.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}

.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 50px;
  height: 50px;
  padding: 1rem;
  /* background: var(--primary-color); */
  /* background: darkgrey; */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hamburger Line */
.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
}

/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: inherit;
}

/* Moves Line Down */
.menu-wrap .hamburger > div::after {
  top: 10px;
}

/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}

/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}

/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
  opacity: 1;
  transition:  opacity 0.4s ease 0.4s;
}

.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .menu > div {
  background: var(--overlay-color);
  border-radius: 50%;
  width: 200vw;
  height: 200vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

.menu-wrap .menu > div > div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
}