// responsive sizes
@mixin bp($point) {
  
  $bp-small: "(max-width: 350px)";
  $bp-mobile: "(max-width: 600px)";
  $bp-mobileup: "(min-width: 600px)";
  $bp-phablet: "(max-width: 1022px)";
  $bp-phabletup: "(min-width: 1022px)";
  $bp-tablet: "(max-width: 1280px)";
  $bp-tabletup: "(min-width: 1280px)";
  $bp-laptop: "(max-width: 1600px)";
  $bp-desktop: "(min-width: 1600px)";
  @if $point == desktop {
    @media #{$bp-desktop}  { @content; }
  }  
  @else if $point == laptop {
    @media #{$bp-laptop} { @content; }
  }
  @else if $point == tablet {
    @media #{$bp-tablet} { @content; }
  }
  @else if $point == tabletup {
    @media #{$bp-tabletup} { @content; }
  }
  @else if $point == phablet {
    @media #{$bp-phablet} { @content; }
  }
  @else if $point == phabletup {
    @media #{$bp-phabletup} { @content; }
  }
  @else if $point == mobile {
    @media #{$bp-mobile}  { @content; }
  }
  @else if $point == mobileup {
    @media #{$bp-mobileup} { @content; }
  }
  @else if $point == small {
    @media #{$bp-small}  { @content; }
  }

}

@media print, screen and (min-width: 40em) {
.h1, h1 {

    font-size: 1.5rem;
}
}
@media print, screen and (min-width: 40em) {
.h3, h3 {
font-size: 1.1875rem;
}
}

.card-icons {
       margin: 40px auto 0px;
    & img {
        margin: 0px 15px 10px;
    }
} 

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


.icon-bag:before {
  content: "\e900";
}
.icon-bear:before {
  content: "\e901";
}
.icon-camera:before {
  content: "\e902";
}
.icon-cart:before {
  content: "\e903";
}
.icon-checkmark:before {
  content: "\e904";
}
.icon-DBZ:before {
  content: "\e905";
}
.icon-menu:before {
  content: "\e906";
}
.icon-search:before {
  content: "\e907";
}
.icon-watch:before {
  content: "\e908";
}


a, a:focus, a:hover {
color:#000;
}

html {
padding:0px !important;
}

body {
position:static !important;
margin: 0px !important;
padding:0px !important;
}


body.ui-mobile-viewport, div.ui-mobile-viewport {
   // overflow-y: scroll;
  background:none;
  background-color:#fff;
}


.ui-toolbar-header-fixed {
    top: 0px;
    padding-top: 0px;
    border: none;
}

.ui-page:not(.template-product), .ui-header { 
 -webkit-backface-visibility: hidden;
  will-change: transform; 
  -webkit-transform: translate3d(0,0,0);
  	-moz-transform: translate3d(0,0,0);
  	-ms-transform: translate3d(0,0,0);
}
.ui-toolbar-footer {
border:none;
}

.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
    margin-left: 0px;
    width: auto;
}
.ui-panel {
    display: block !important;
}

.ui-page-theme-a .ui-panel-wrapper {
    background: none; 
    border: none; 
}

.ui-page {
    min-height: 100% !important;
    height: auto !important;
}

.ui-content {
    border-width: 0;
    padding: 0em;   
    overflow: hidden;
}

.template-page .ui-content {
        padding: 3em 1em;
}

.template-page .padding {
  @include bp(tablet) {
    padding: 20px 20px;
  }
}


.ui-mobile .ui-page-active {
    visibility: visible;
    overflow: visible;
    overflow-x: hidden;
    overflow-y: hidden;
}

.ui-page-theme-a {
background:none;
}

.letter {
display:inline-block;
}

.ui-loader.ui-body-a {
    background: none;
  @include bp(phablet) {
      top: 40%;
    left: 39%;
  }
}

.lds-whirl  {
& path {
fill:#EB75BD;
}
}
.sk-three-bounce{
    margin:20px auto;
    width:80px;
    text-align:center
}
.sk-three-bounce .sk-child{
    width:20px;
    height:20px;
    background-color:rgba(156,244,224,.82);
    border-radius:100%;
    display:inline-block;
    -webkit-animation:sk-three-bounce 1.4s ease-in-out 0s infinite both;
    animation:sk-three-bounce 1.4s ease-in-out 0s infinite both
}
.sk-three-bounce .sk-bounce1{
    -webkit-animation-delay:-.32s;
    animation-delay:-.32s
}
.sk-three-bounce .sk-bounce2{
    -webkit-animation-delay:-.16s;
    animation-delay:-.16s
}
@-webkit-keyframes sk-three-bounce{
    0%,100%,80%{
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    40%{
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes sk-three-bounce{
    0%,100%,80%{
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    40%{
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}





body::-webkit-scrollbar-thumb {
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
    border-radius: 10px;
}


body::-webkit-scrollbar {
      width: 10px;
  @include bp(mobile) {
  display:none;
  }
}
 




//shadows
@mixin box-shadow($box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.08)) {
    -webkit-box-shadow: $box-shadow;  
    -moz-box-shadow: $box-shadow; 
    box-shadow: $box-shadow; 

}
//radius
@mixin border-radius($border-radius: 10px) {
    -webkit-border-radius: $border-radius;  
    -moz-border-radius: $border-radius; 
    border-radius: $border-radius; 

}
//skew
@mixin skewX($skewX) {
    -webkit-transform:  skewX($skewX);
    -moz-transform:  skewX($skewX); 
    transform: skewX($skewX); 
}





//background gradient 2
@mixin backgroundgradient2($color1, $color2) {
background: #77e3c8; 
background: -moz-linear-gradient(left,  $color1 0%, $color2 100%);
background: -webkit-linear-gradient(left,  $color1 0%,$color2 100%); 
background: linear-gradient(to right,  $color1 0%,$color2 100%); 
}

//background gradient 3
@mixin backgroundgradient3($color1, $color2, $color3) {
background: $color1;
background: -moz-linear-gradient(left,  $color1 0%, $color2 50%, $color3 100%); 
background: -webkit-linear-gradient(left,  $color1 0%,$color2 50%, $color3 100%); 
background: linear-gradient(to right,  $color1 0%,$color2 50%,$color3 100%); 
}

@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: ($height / $width) * 100%;
  }
  > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
}



//color transition
@mixin transition($attribute, $duration) {
    -webkit-transition: $attribute $duration ease;
    -moz-transition: $attribute $duration ease;
    transition: $attribute $duration ease;
}


@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }
  @keyframes #{$animationName} {
    @content;
  }
}
@mixin animate($name, $duration, $iteration, $direction) {
  -webkit-animation-duration: $duration;
     -moz-animation-duration: $duration;
       -o-animation-duration: $duration;
          animation-duration: $duration;
  -webkit-animation-iteration-count: $iteration;
     -moz-animation-iteration-count: $iteration;
       -o-animation-iteration-count: $iteration;
          animation-iteration-count: $iteration;
  -webkit-animation-name: $name;
     -moz-animation-name: $name;
       -o-animation-name: $name;
          animation-name: $name;
  -webkit-animation-direction: $direction;
     -moz-animation-direction: $direction;
       -o-animation-direction: $direction;
          animation-direction: $direction;
}


   











.slidedownfade.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfadefromtop;
    -webkit-animation-duration: 250ms;
    -moz-transform: translateY(0);
    -moz-animation-name: slideinfadefromtop;
    -moz-animation-duration: 250ms;
    transform: translateY(0);
    animation-name: slideinfadefromtop;
    animation-duration: 250ms;
}

.slidedownfade.out {
	-webkit-animation-name: slideoutfadeout;
	-webkit-animation-duration: 100ms;
	-moz-animation-name: slideoutfadeout;
	-moz-animation-duration: 100ms;
	animation-name: slideoutfadeout;
	animation-duration: 100ms;
}
.slidedownfade.in.reverse {
	-webkit-animation-name: slideinfadein;
	-webkit-animation-duration: 150ms;
	-moz-animation-name: slideinfadein;
	-moz-animation-duration: 150ms;
	animation-name: slideinfadein;
	animation-duration: 150ms;
}

.slidedownfade.out.reverse {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideoutfadetotop;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateY(100%);
	-moz-animation-name: slideoutfadetotop;
	-moz-animation-duration: 200ms;
	transform: translateY(100%);
	animation-name: slideoutfadetotop;
	animation-duration: 200ms;
}
@-webkit-keyframes slideinfadefromtop {
	from { -webkit-transform: translateY(-100%);
      opacity:0;
	}
	to { -webkit-transform: translateY(0);
       opacity:1;
	}
}
@-moz-keyframes slideinfadefromtop {
	from { -moz-transform: translateY(-100%);
       opacity:0;
	}
	to { -moz-transform: translateY(0);
      opacity:1;
	}
}
@keyframes slideinfadefromtop {
	from { transform: translateY(-100%);
       opacity:0;
	}
	to { transform: translateY(0);
       opacity:1;
	}
}

@-webkit-keyframes slideoutfadetotop {
	from { -webkit-transform: translateY(0);
       opacity:1;
	}
	to { -webkit-transform: translateY(-100%);
       opacity:0;
	}
}
@-moz-keyframes slideoutfadetotop {
	from { -moz-transform: translateY(0);
       opacity:1;
	}
	to { -moz-transform: translateY(-100%);
       opacity:0;
	}
}
@keyframes slideoutfadetotop {
	from { transform: translateY(0);
       opacity:1;
	}
	to { transform: translateY(-100%);
       opacity:0;
	}
}


@-webkit-keyframes slideinfadein {
	from { opacity: 0;
	}
	to { opacity: 1;
	}
}
@-moz-keyframes slideinfadein {
	from { opacity: 0;
	}
	to { opacity: 1;
	}
}
@keyframes slideinfadein {
	from { opacity: 0;
	}
	to { opacity: 1;
	}
}

@-webkit-keyframes slideoutfadeout {
	from { opacity: 1;
	}
	to { opacity: 0;
	}
}
@-moz-keyframes slideoutfadeout {
	from { opacity: 1;
	}
	to { opacity: 0;
	}
}
@keyframes slideoutfadeout {
	from { opacity: 1;
	}
	to { opacity: 0;
	}
}




/* from Old InstaShop */

[data-role=page] {
&::-webkit-scrollbar {

     width: 0px;
   background: transparent;

}
}
.ui-mobile .ui-page-active.ui-page {  
@media only screen and (max-height: 50rem) and (max-width: 32rem) {  
   // height: 100%;
  //  overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
}
.ui-mobile .ui-page-active.ui-page::-webkit-scrollbar {
  @media only screen and (max-width: 32rem) {  
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
  }
  
}  

.ui-panel-dismiss {
  position: fixed;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
    background-color: #ffffff;
}



.ui-page .ui-content {
    border-width: 0;
    padding: 0em;
    min-height: -o-calc(100%);
    min-height: -webkit-calc(100%);
    min-height: -moz-calc(100%);
    position: relative;
    max-width: 100%;
    overflow: hidden;
}  
  




 

.homepage-wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background:#ffffff;
}

.collection-page {
  background:#ffffff;
}

.button-wrap {
padding:0 20px;
 & a {
      text-align: center;
          padding: 10px 25px;
    display: inline-block;
 }
}

/* Parallax ----------------------------------------------------------------------------------*/
.parallax-section {
  position:relative;
  [data-rellax-container] {
        display: flex;
  flex-wrap: wrap;
    justify-content: center;
    align-items: center;
        padding: 0 15px;
  }
  img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
  }
  .fill {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }
  .overlay {
    -webkit-transform: translate3d(0, 0, 0);
    position: absolute;
    top:0px;
    left:0px;
    height: 100%;
    width: 100%;
    z-index: 2;
  }
  .parallax-element {
  z-index:3;
  position: relative;
     -webkit-transform: translate3d(0,0,0);
  	-moz-transform: translate3d(0,0,0);
  	-ms-transform: translate3d(0,0,0);
  }
  .button-wrap {
    padding:0;
  }
}

/* Collection --------------------------------------------------------------------------------------------------*/




  @font-face {
  font-family: Lato;
  font-weight: 700;
  font-style: normal;
  src: url("/cdn/fonts/lato/lato_n7.f0037142450bd729bdf6ba826f5fdcd80f2787ba.woff2?h1=Zmx5eXRyZXNzZXMuY29t&hmac=561bad445897602c093a59973bf062c1a31f1d855cadc5b508442a82683af426") format("woff2"),
       url("/cdn/fonts/lato/lato_n7.50161a3d4f05d049b7407d86c5a8834e4d6e29bf.woff?h1=Zmx5eXRyZXNzZXMuY29t&hmac=4813255e55abe6d6c7500574fb43f12953be1b58828710d03d779f5ca6ea43c2") format("woff");
}
  
   





#shopify-section-Collection {
.details {  
margin: 20px 0 20px 0;  
.collection-title {
   h1 {
      font-family: Lato; 
    font-weight:700; 
    font-style:normal; 
      font-size:33px;
      color:#000000;
    padding: 0 10px;
    text-align: center;
   }
}
  .description {
  padding: 0 10px;
    text-align: center;
      color:#000000;
  }  
}
.collection-products {
      display: flex;
    flex-flow: wrap;
    align-items: flex-end;
  .product {
    margin-bottom:30px;
    
width: 49.5%;

  }
}
}


/*
.collection-page {
  & select {
     margin: 0;
  }
  & .collection-title {
    margin: 25px auto 30px;
  & h1 {
    font-size: 25px;
    margin: 0;
    font-weight: bold;
   }
  }
  & .pagination-wrap {
    margin-bottom: 35px;
    & a {
         color: #d64188; 
    }
  }
  & .jdgm-widget {
               color: #b9b9b9;
    & .jdgm-star {
       color: rgb(255, 77, 162);
    }
  }
}
*/

/* Collections --------------------------------------------------------------------------------------------------*/

.collection-list {
    display: block;
    position: relative;
    flex-flow: wrap;
    flex-basis: 49%;
    flex-grow: 1;
    margin: 1px;
  .img {
   width:100%;
  }
  .details {
    position: absolute;
    bottom: 0px;
    padding: 10px 10px 10px;
    width:100%;
    color: #fff;
    background: rgba(0,0,0,0.2);
    text-align: center;
    svg {
    width: 6px;
    height: 100%;
    margin-left: 8px;
      path {
       fill:#fff;
      }
    }
  }
}

/* Product Loop -------------------------------------------------------------------------------------------------*/


.collection-wrap {
 & h3 {
    font-family: 'Open Sans',sans-serif;
    font-weight: bold;
 }
 & ul {
   margin:40px auto; 
   @include bp(laptop) {
    margin:20px auto; 
   }
 }
}



.swiper-button-next,
.swiper-container-rtl .swiper-button-prev,
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-next{
    background-image: none;
}




.featured-product-wrap {
padding:0 10px;
}



div.product  {
      display: block;
     list-style:none; 
       position:relative;
  text-align: center;
      padding: 0 10px;
     &.sold-out {
       & .image {
        opacity:0.3;
       } 
      }
      & .image {
           z-index: 1;
    position: relative; 
            overflow: hidden; 
      }
      & .tag {
    position: absolute;
    left: 0px;
    top: 0px;
    background: rgb(220, 125, 190);
    font-size: 14px;
    padding: 5px 15px;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 2;
    font-family: 'montserrat';
    letter-spacing: 0px;
       @include bp(mobile) {
        font-size: 9px;
        padding: 4px 6px; 
       }
      }
  & .details {
   padding:0 10px;
  }
      & h3 {
    font-family: 'Open Sans', sans-serif;
    line-height:normal;   
    margin: 20px 0 5px;
       z-index: 2;
    position: relative;

      }
       & .salew {
        margin-top:10px; 
        margin-bottom: 10px;
       }
       & .h1 {
    margin-top: 0px;
    margin-bottom: 10px;
font-size: 20px;
         & .oldPrice {
             font-size: 70%;
    text-decoration: line-through;
    opacity: 0.6;
    margin-left: 5px;
         }
         .product-price__sold-out {
           font-size: 83%;
         }
         & .money {
        color:#FA65A3;       
        font-size: 16px;    
        }
      }
       & .sale-tag {
    display: inline-block;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 900;
    padding: 0 8px;
    border-radius: 3px;
    vertical-align: text-bottom;
color: #ba5485;
    border: 2px solid #b95388;
    }
      & .learnmore {
    background: #B49F5B;
    color: #fff;
    display: inline-block;
    padding: 15px 20px;
    margin-top: 15px;
    border-radius: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    min-width: 40%;
    line-height: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
      }
      & .pricewrap {
    text-transform: uppercase;
    color: #6d6d6d;
    font-size: 19px;
    font-family: 'Gotham';
    font-weight: 300;
       & .compare-price {
       text-decoration: line-through;
          font-size: 80%;
       }
      }
        & .sezzle-wrap {
         text-align: center;
                margin-top: 10px;
                   font-weight: 300;
                font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
            @include bp(mobile) {
                font-size: 11px !important;
    line-height: 22px !important;
            }
            & > span {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    line-height: 1;
              & > span:nth-child(1) {
    color: #4bb63f !important;
    font-weight: 900;
    font-family: 'OswaldMedium', sans-serif !important;
    font-style: italic !important;
    font-size: 145% !important;
    margin-right: 5px;
               & sup {
                  margin-left: 4px;
               }
              }
              & svg {
    width: 55px;
    height: 100%;
    max-height: 100%;
       margin: 0 5px;             
              }
              & span.sezzle-info-icon {
    vertical-align: text-top;
            
              cursor:pointer;
                @include bp(mobile) {
                    margin-bottom: 2px;
                }
              }
            }
   }
    }


/* Product Universal styles -----------------------------------------------------------------------------------------------------------------------*/

 


  @font-face {
  font-family: Lato;
  font-weight: 400;
  font-style: normal;
  src: url("/cdn/fonts/lato/lato_n4.c86cddcf8b15d564761aaa71b6201ea326f3648b.woff2?h1=Zmx5eXRyZXNzZXMuY29t&hmac=5df93df34b0f0df1600bda97840dd6e19fc765c673d1ed7814accc28e13cce31") format("woff2"),
       url("/cdn/fonts/lato/lato_n4.e0ee1e2c008a0f429542630edf70be01045ac5e9.woff?h1=Zmx5eXRyZXNzZXMuY29t&hmac=242b6ba3b9a1592ef63ab4b0c1c50d942309be4c017f3e37d56421b4f734aec2") format("woff");
}
  
   




   




   




   




div.product {
  & .image {

    background-color: #fff;    
    position: relative;
    height: 0;
    padding-bottom: 125%;
    overflow: hidden;    

    &.imgswitch {
       & .inner {
        overflow: hidden;
      } 
      &.fade {
      & .inner {
        @include transition(all,0.3s);
         opacity:1;
        &:nth-child(2) {
         opacity:0;
        }
      } 
      @include bp(mobileup) {
      &:hover {
       & .inner {
         opacity:0;
        &:nth-child(2) {
           opacity:1;
        }
       }
      }
      }
      }
    }
    & .inner {
       
 
position: absolute;     
    height: 100%;
    width: 100%;
    display: flex;        
      

      
    align-items: center;
   
      & img {
      width: 100%;
      }
    }
  }
  & h3 {
    color:#000000;
    font-family: Lato; 
    font-weight:400; 
    font-style:normal;    
    font-size:14px;   
    line-height: 1;
  }
  & .h1 {
    color:#000000;
    font-family: Lato; 
    font-weight:700; 
    font-style:normal;    
    font-size:17px;   
    & small {
      
    }    
  }
  & .desc {
    color:#000000;
    font-family: Lato; 
    font-weight:400; 
    font-style:normal;    
    font-size:16px;  
    line-height: 1.3;
  }
  & .buynow {
    font-family: Lato; 
    font-weight:400; 
    font-style:normal;   
    color:#ffffff;
    
     background:#000000;
    
     border-radius: 48px;
    
     padding: 11px 35px;
     display: inline-block;
     margin: 0px 0 0 0; 
    
  }
}







   




  
.slide-inner {
margin-bottom: 20px;
}
  
.product-details {
      -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
   padding: 0 15px;
  h2 {
    font-size: 23px;
    font-family: Lato; 
    font-weight:700; 
    font-style:normal; 
 }
  & .product-add {
       margin-top: 1em;
     & a {
       color: #2ba6cb; 
     }
     & .ajaxified-cart-feedback.success {
       color: #000000;
     }
& .shopify-payment-button__button--unbranded {
      background-color: #000000;
  }
  & [type=button].shopify-payment-button__button--hidden {
      display:none;
  }
  & .add {
    background: #2ba6cb;
    color:#fff;
    text-transform: uppercase;
    font-weight: bold;
  }
    & button {
       width:100%;
  }
    }
}
  



.Product-Video-Gallery-main {
		position: relative;
	    margin-bottom: 15px;
		&>video {
			//position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
        & > img {
        	width: 100%;
            height:auto;
            position: relative;
          
        }
		&.hasvideo {
			z-index: 0;
			& .mute {
				color: #fff;
				position: absolute;
				bottom: 10px;
				left: 10px;
				z-index: 4;
				display: flex;
				align-items: center;
				font-weight: normal;
				letter-spacing: 1px;
				pointer-events: none;
				@include transition(opacity, 0.3s);

					font-size: 9px;

				& i {
					background: rgba(0, 0, 0, 0.61);
					border-radius: 100%;
                
                    display: inline-block;
                    
						padding: 4px 7px 1px;
						margin-right: 7px;
					& svg {
				
						height: 100%;
							max-width: 20px;
						& path {
							fill: #fff;
						}
					}
				}
			}
          &.unmute {
            & .mute {
              opacity:0;
            }
          }
		}
	}
.Product-Video-Gallery-thumbs {
			margin-top: 20px;
		&>.gallery-thumbs {
			max-width: none;
			width: 100%;
				margin: 0;
		}
		& .swiper-container {
			& .swiper-wrapper {
				& .swiper-slide {
                    
					-ms-flex: 0 0 50%;
					flex: 0 0 50%;
                         max-width: 25%;
                         margin-right:10px;
					&:nth-child(even) {

					}
					&:nth-child(odd) {

					}
					& a {
						display: block;
						position: relative;

							border: none;
						
						& .overlay {
							background-size: 10px 20px;
                            display: flex;
							align-items: center;
							justify-content: center;
							color: #fff;
							font-size: 69px;
							font-weight: normal;
							position: absolute;
							width: 100%;
							height: 100%;
							opacity: 0;
							background: black;
							pointer-events: none;
							top: 0px;
							left: 0px;
							@include transition(opacity, 0.3s);
                          & svg {
    height: auto;
    opacity: 1;
    z-index: 99;
           
                              max-width: 40%;
                    
                            & path {
                             fill:#fff;
                            }
                          }
						}
						&:hover {
							& .overlay {
								opacity: 0.3;
							}
						}
						&>.thumb {
							position: relative;
							height: 0;
							padding-bottom: 98.8%;
							margin-bottom: 0px;
							overflow: hidden;
							z-index: 0;
							& img {
								object-fit: cover;
								min-width: 100%;
								position: absolute;
                                                                min-height: 100%;
							}
						}
					}
				}
			}
		}
}





.mailing-list-wrap {
    max-width: 70.5rem;
    text-align:center;
  & p {

    padding: 0 15px;
     & span {
     font-size: 80%;
    line-height: 1.4;
    display: inline-block;
   }
  }
  & > h2 {
    text-transform:uppercase;
    color:#fff;
    letter-spacing: 1px;
    margin-bottom:20px;
    font-size: 24px;
    
  }
  & form {
      max-width: 823px;
    margin: 0 auto;
    display: block;
    padding: 0 15px;
    & input[type=email] {
    margin: 0;
    background: #0000001a;
    box-shadow:none;
    border: none;
    border-radius: unset;
    outline: none;
    text-align: center;
    height: 3.9375rem;
    font-size: 19px;
    line-height: normal;
     color:#fff;
    }
    & button {
    display: inline-block;
    font-size: 17px;
     min-width: 185px; 
      cursor:pointer;
      padding: 17px 30px;
      margin-top:20px;
    }
  }
}

.got-questions {
 text-align:center;
  margin-top: 25px;
  h2 {
      font-size: 18px;
  }
  & a {
  padding: 15px 20px;
    display: inline-block;
  }
}




/* Shop -------------------------------------------------------------------------------------------------------------*/



.block-title {
    & span {
    font-family: 'Polt', sans-serif;
    font-weight: bold;
    font-size:49px;
    line-height: 1em;
    position: relative;
    z-index: 1;
    display: inline-block;
    margin:2.66rem 4.8rem .6rem;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #ffffff;
    @include bp(laptop) {
          font-size: 39px;     
    }
    @include bp(mobile) {
     font-size: 22px; 
         margin: 1.66rem 4.8rem 0.3rem;
    }
      &:before {
    font-family: 'Fira Sans Bold', sans-serif;
    font-size:83px;
    font-weight: 800;
    font-style: italic;
    line-height: .725em;
    position: absolute;
    z-index: -1;
    bottom: -4px;
    left: 50%;
    width: 2000px;
    content: attr(data-description);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    letter-spacing: 15px;
    text-transform: uppercase;
    color: rgba(255, 206, 253, 0.41);
    @include bp(laptop) {
       font-size: 85px;
    }
    @include bp(mobile) {
     font-size:60px; 
        left: 57%;  
    }
      }
    }
  & h3 {
    margin-bottom: 51px;
    font-size: 23px; 
        color: #816785;
    @include bp(mobile) {
     margin-bottom: 23px;
    font-size: 16px; 
    }
   }
  }




/* Product Page ------------------------------------------------------------------------------------------------------------------*/


.product-wrap {
  padding: 25px 0 60px 0; 
  & .product-top {
    & .row {
        max-width: 100%;
    }
 /* end swiper */
 /* product details */
    & .slide-inner {
          padding: 0 10px;
      margin-bottom: 20px;

    }
    & .product_form {
    margin: 15px 0 20px;
    }
    & .stamped-product-reviews-badge {

    display: block !Important;
    text-align: center;
    }
 & .product-details {
     & .product-title {
    font-family: 'Open Sans', sans-serif;
            font-size: 26px;
           line-height: 30px;
          font-weight:normal;
     }
   & .product-price-wrap {
   }
   & .product-price {
       color: #000000;
    letter-spacing: 0px;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    margin-bottom: 0px;
     font-size: 18px;

   }
   
   & .bold_option_title {
       margin-bottom: 10px;
       display: block;
   }
   & .bold_option_element {
     & select {
     background-color: transparent;
    padding: 15px 30px 15px 20px;
     }
   }
   & .bold_option_total span {
    color: #ea75a5;
   }
   
   
    & .jdgm-widget {
     & a {
      color:#ff4da2;
     }
    }
    & #product-price {
    color: #A3A3A3;
    letter-spacing: 0px;
    -webkit-font-smoothing: antialiased;
    font-family: 'Gotham';
    font-size: 22px; 
    }
    & .yotpo {
      margin: 20px 0;
      @include bp(mobile) {
           margin: 10px 0 15px; 
      }
      & a {
       color: #000000 !important;
      }
      & .yotpo-stars {
       display: inline-block;
    margin-right: 10px;
    vertical-align: bottom; 
      }
     & .yotpo .yotpo-bottomline .yotpo-icon-empty-star {
       color: #f2b85e;
     }
      & .pull-left {
      }
    }
    & .details {
    text-shadow: none;
    font-size: 15.45px;
font-family: 'Open Sans', sans-serif;
    letter-spacing: 0.025em;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeSpeed;
       & ul {
             padding-left: 18px;
       & li {
            margin-bottom: 8px; 
        }
       }
    }
    & .product-variants {
         margin: 20px 0;
     & label  {
          font-weight: bold; 
           text-transform: capitalize;
	   white-space: inherit;
     }
    }
    & .bold_options {
     & .bold_option_title {
       font-weight: bold;
           text-transform: capitalize;
     }
    }  

    & .product-add {
    margin-top: 20px;
     & a {
       color: #2ba6cb; 
     }
     & .ajaxified-cart-feedback.success {
       color: #000000;
     }
& .shopify-payment-button__button--unbranded {
      background-color: #000000;
  }
  & [type=button].shopify-payment-button__button--hidden {
      display:none;
  }
  & .add {
    background: #2ba6cb;
    color:#fff;
    text-transform: uppercase;
    font-weight: bold;
  }
    & button {
       width:100%;
  }
    }
   }
  /* end product details */       
  }
  & .jdgm-review-widget {
        max-width: 77em !important;
    margin-top: 30px;
    & a {
          color: #ff4da2;
    }
    & .jdgm-rev__buyer-badge {
          background-color: rgb(201, 168, 81);
    }
  }
}
  

.loox-reviews-default {
    max-width: 1200px;
    margin: 0 auto;
}


#shopify-section-Collection-Featured ul {
max-width:100%;
}



/* 
   Swatches Styles
*/



.swatch { 
    margin: 0;
}

/* header */
.option-header {
  margin: 0.9em 0;
  display:inline-block;
  & span {
   font-weight:bold; 
  }
}

.step-options-wrap {
     margin: 1em 0 0 0; 
}

.color-choice-wrap {
    margin: 0 0 1em;
 & .color-choices {
   margin-top:12px;
 & li {
   display:inline-block;
   list-style:none;
   cursor:pointer;
   position:relative;
  & .tooltip {
  text-align:center;
  background:#b76fa6;
  color:#fff;
  bottom:100%;
  padding: 10px;
  display:block;
  position:absolute;
  width:100px;
  left:0%;
  margin-bottom:15px;
  /* Make it invisible by default */
  filter:alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity:0;
  visibility:hidden;
      top: auto;
  /* Animations */
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box;
  &:before {
  bottom:-20px;
  content:" ";
  display:block;
  height:20px;
  left: 50%;
  border:none;
  position:absolute;
  width:100%;
  }
  &:after {
  border-left:solid transparent 10px;
  border-right:solid transparent 10px;
  border-top:solid #b76fa6 10px;
  bottom:-10px;
  content:" ";
  height:0;
  left:50%;
  margin-left:-13px;
  position:absolute;
  width:0;
 }
  }
    & .outer {
    height:auto;
    border:none;
    background:none;
    border-radius: 100%; 
    overflow:hidden;
    line-height:0px;
    padding: 0px;
    background: transparent;
    margin: 0 5px;
    display: inline-block;
    @include transition(all,0.3s);
      & span {
      display:inline-block;
      padding: 36px;
      border-radius: 100%;
      background-size: cover;
    }
   }  
  &.active {
    & .outer {
      // background: #F2B85E; 
          transform: scale(1.6);
          margin: 0 20px;
    }
  }
  &:hover .tooltip {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  -webkit-transform:translateY(0px);
     -moz-transform:translateY(0px);
      -ms-transform:translateY(0px);
       -o-transform:translateY(0px);
          transform:translateY(0px);
 }
 }
}
}



.swatch label {
  /* Rounded corners */
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
  /* To give width and height */
  /* Color swatches contain no text so they need to have a width. */
  min-width:50px !important; 
  /* No extra spacing between them */
  margin:0;
  /* The border when the button is not selected */
  border-bottom:#EDEDED 3px solid;
  /* Background color */
  /* Styling text */
    font-size: 18px;
    font-family: 'HelveticaRoundedBlack', sans-serif;
  text-align:center;
  line-height:35px;
  white-space:nowrap;
  text-transform:uppercase;
      cursor: pointer;
  @include transition(border-color,0.3s);
}
.swatch-element label {    
     padding: 13px 25px; 
}
.color.swatch-element label { padding:0; }
/* Styling selected swatch */
/* Slightly raised */
.swatch input:checked + label.size {
border-bottom-color:#F2B85E;
} 
.swatch .swatch-element {
  -webkit-transform:translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing:antialiased; /* webkit text rendering fix */
  /* Spacing between buttons */
  margin:0px 0px 10px 0;
  /* To position the sold out graphic and tooltip */
  position:relative;
}
/* Image with the cross in it */
.crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; }
.swatch .swatch-element .crossed-out { display:none; }
.swatch .swatch-element.soldout .crossed-out { display:block; }
.swatch .swatch-element.soldout label {
  filter: alpha(opacity=60); /* internet explorer */
  -khtml-opacity: 0.6;      /* khtml, old safari */
  -moz-opacity: 0.6;       /* mozilla, netscape */
  opacity: 0.6;           /* fx, safari, opera */
}
/* Tooltips */
.swatch .tooltip {
  text-align:center;
  background:gray;
  color:#fff;
  bottom:100%;
  padding: 10px;
  display:block;
  position:absolute;
  width:100px;
  left:-23px;
  margin-bottom:15px;
  /* Make it invisible by default */
  filter:alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity:0;
  visibility:hidden;
      top: auto;
  /* Animations */
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box;
}
.swatch .tooltip:before {
  bottom:-20px;
  content:" ";
  display:block;
  height:20px;
  left: 50%;
  border:none;
  position:absolute;
  width:100%;
}
.swatch-element {
  &.color {
  & label {
    height:auto;
    border:none;
    background:none;
    float:none;
    border-radius: 100%; 
    overflow:hidden;
    line-height:0px;
    padding: 5px;
    background: transparent;
    margin: 0 5px;
    & span {
      display:inline-block;
        padding: 35px;
          border-radius: 100%;
    }
  }
  &  input:checked + label {
     background:#F2B85E;
  } 
 }
 & .tooltip {
     left: 0%; 
  }
}
/* CSS triangle */
.swatch .tooltip:after {
  border-left:solid transparent 10px;
  border-right:solid transparent 10px;
  border-top:solid gray 10px;
  bottom:-10px;
  content:" ";
  height:0;
  left:50%;
  margin-left:-13px;
  position:absolute;
  width:0;
}
.swatch .swatch-element:hover .tooltip {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  -webkit-transform:translateY(0px);
     -moz-transform:translateY(0px);
      -ms-transform:translateY(0px);
       -o-transform:translateY(0px);
          transform:translateY(0px);
}
.swatch.error {
  background-color:#E8D2D2!important;
  color:#333!important;
  padding:1em;
  border-radius:5px;
}
.swatch.error p {
  margin:0.7em 0;
}
.swatch.error p:first-child {
  margin-top:0;
}
.swatch.error p:last-child {
  margin-bottom:0;
}
.swatch.error code {
  font-family:monospace;
}


/* featured product -----------------------------------------------------------------------------------------------------------------*/


.rowsmall {
      max-width: 64.5rem;
}











/* END Review  ------------------------------------------------------------------------------------------------------------------------------*/




/* Page ----------------------------------------------------------------------------------------------------------*/



   



.page-width-padding, .shopify-policy__container {
  padding:0;
  background-color:#ffffff;
  color:#000000;
  .heading, .shopify-policy__title {
  padding: 60px 20px;
  margin-bottom: 30px;    
  text-align: center;    
    background-color:#000000;
    h1 {
    color:#ffffff;
    font-family: Lato; 
    font-weight:700; 
    font-style:normal; 
      font-size:33px;
    }
  }
  .page-content, .shopify-policy__body {
    padding: 20px 20px;
  }
}






/* Article ----------------------------------------------------------------------------------------------------------*/




#article .articles-wrap {

   & .article-wrap {
         margin-bottom: 30px;
        @include bp(mobile) {
             padding: 0; 
          margin:0;
        }
     &.video .top-image:before {
   content: '\f04b';
    font-family: 'FontAwesome';
    display: inline-block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 100%;
    padding: 4px 7px 4px 10px; 
     font-size: 15px;


     }
     & .article-inner {
        min-height: 100%;
        border: 1px solid #ddd;
         border-radius: 5px;
        @include bp(mobile) {
         border:none;
         text-align:center;
           border-radius: 0px; 
        }
      & .flex-content {
           padding-bottom: 58.7%; 
        margin: 0;
        
      & img {
       width:100%; 
      }
      }
     }
    & .bottom-content {
    font-family: 'Raleway', sans-serif;
          font-weight: bold;
    padding: 30px 20px;
    display: flex;
    align-items: center;
    @include bp(tablet) {
     padding: 20px 20px; 
    }
    @include bp(mobile) {
     padding: 30px 20px; 
    }
     & .bottom-inner {
          width: 100%; 
       & title {
      color:#000;
     display: block;
    font-size: 18px;
    margin-bottom: 10px;
       @include bp(mobile) {
            font-size: 15px; 
        }
       }
      & tags span {
        font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #a2a2a2;
    margin: 0 5px;   
    @include bp(mobile) {
         font-size: 10px; 
    }
       &.fresh {
            color: #FF7E00; 
       }
       &.video {
            color: #558b9e; 
       }
       &.featured {
            display:none;
       }
       &:first-child {
        margin-left:0; 
       }
       &:first-child {
        margin-right:0; 
       }
        
      }
     }
    }
   }
  }

#article .latest-wrap {
  margin:0;
  @include bp(mobile) {
   display:none; 
  }
  & h2 {
   font-size:17px; 
   & span {
   font-weight:bold; 
   }
  }
  & .article-wrap {
 position:relative; 
 display:block;
    margin-bottom:10px;
  & .article-inner {
   min-height:auto; 
    border:none;
  & img {
   width:100%; 
  }
  & .bottom-content {
       padding: 5px 0px; 
    & title {
       font-size: 13px; 
      display:block;
    }
  }
  }
 &:after {
    content: '';
    display: block;
    width: 45px;
    height: 2px;
    background: rgba(0, 0, 0, 0.05);
    margin-bottom: 19px;
  }
 }
}


div.template-article {
 & .title { 
  font-size: 36px;
  margin-bottom: 15px;
  font-family: 'Merriweather';
  font-weight: normal;
  @include bp(mobile) {
    font-size: 19px;
    font-weight: bold;
  }
 }
 & .excerpt {
    font-family: 'Guardian Egyptian';
        font-size: 24px;
   @include bp(mobile) {
        font-size: 19px; 
   }
 }
 & .article-header {
      
       margin: 30px 0;
 }
 & .desktop-article-header {
    margin: 0px 0 30px;
   @include bp(mobile) {
    display:none; 
   }
 }
 & .mobile-article-header {
  display:none;
  @include bp(mobile) {
   display:block; 
  }
 }
  & .top-image > * {
   margin:0; 
    width:100%;
  }
 & .article-body-wrap {
      padding: 0 0px 0 0;
   @include bp(mobile) {
      padding: 0 20px; 
   }
  & .article-inner-wrap {
       margin-top: 45px;
    @include bp(mobile) {
         margin-top: 0px; 
    }
    & .article-content {
       font-family: 'Guardian Egyptian';
       font-size: 21px; 
      @include bp(mobile) {
       font-size:19px; 
      }
      & p {
       line-height:35px; 
      @include bp(mobile) {
       line-height:30px;
      }       
      }
      & .comments-wrap {
           margin-top: 30px; 
      }
    }
  }
 }
}


.article-page-wrap {
  padding: 50px 0; 
  @include bp(mobile) {
   padding:0; 
  }
  & .article-column {
   @include bp(mobile) {
    padding:0; 
   }
   & .article-content iframe {
    width:100%; 
   }
    & .article-content img {
    width:auto;
    }
    & .article-content a {
        color: #6759d4;
    }
  }
}

/* END Article ----------------------------------------------------------------------------------------------------------*/



#shopify-section-FAQ-popular {
   & > div {   

 }
}

   .popular-faq {
      & > div {   
        margin-bottom:30px;
      & > h3 {
        display: flex;
    justify-content: space-between;
     background: none;
    color: #fff;
    cursor: pointer;
    padding: 18px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 19px;
    font-family: 'Open Sans', sans-serif;
            text-shadow: none;
       border: 1px solid rgba(255, 255, 255, 0.34);  
        @include bp(phablet) {
            font-size: 15px;
    line-height: 1.6;
        }
        &:hover, &:active, &.ui-accordion-header-active {
        background: none;
   border: 1px solid rgba(255, 255, 255, 0.34); 
    color: #fff;
    text-shadow: none;
        }
      }
    }
   }

































// custom transition
		.ngslide.in {
    -webkit-animation:ngscaleUp 0.3s both ease-in;
	-moz-animation:ngscaleUp 0.3s both ease-in;
	animation:ngscaleUp 0.5s both ease-in;   
      -webkit-animation-duration: 300ms !important;
           animation-duration: 300ms !important;
            z-index: 995;
		}
		

		.ngslide.out {
    -webkit-animation:ngslideOutLeft 0.3s both ease-in;
	-moz-animation:ngslideOutLeft 0.3s both ease-in;
	animation:ngslideOutLeft 0.3s both ease-in;   
            -webkit-animation-duration: 300ms !important;
            animation-duration: 300ms !important;
              z-index: 996;
		}


		.ngslide.in.reverse {

            -webkit-animation:ngslideInLeft 0.3s both ease-in;
	-moz-animation:ngslideInLeft 0.3s both ease-in;
	animation:ngslideInLeft 0.3s both ease-in;  
             z-index: 996;
		}
		

		.ngslide.out.reverse {
          -webkit-animation-direction:reverse;
          animation-direction:reverse;
             -webkit-animation:ngscaleDown 0.3s both ease-in;
	-moz-animation:ngscaleDown 0.3s both ease-in;
	animation:ngscaleDown 0.3s both ease-in;   
             z-index: 995;
		}



/* slide in from the bottom */
@keyframes ngscaleUp {
	from 		{ opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes ngscaleUp {
	from 		{ opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-keyframes ngscaleUp {
	from 		{ opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the bottom */
@keyframes ngslideOutLeft {
	to 		{ transform: translateX(-100%); }
}
@-moz-keyframes ngslideOutLeft {	
	to 		{ -moz-transform: translateX(-100%); }
}
@-webkit-keyframes ngslideOutLeft {
	to 		{ -webkit-transform: translateX(-100%); }
}




/* slide in from the bottom */
@keyframes ngslideInLeft {
  from		{ transform: translateX(-100%); }
	to 		{ transform: translateX(0%); }
}
@-moz-keyframes ngslideInLeft {	
    from		{ transform: translateX(-100%); }
	to 		{ -moz-transform: translateX(0%); }
}
@-webkit-keyframes ngslideInLeft {
    from		{ transform: translateX(-100%); }
	to 		{ -webkit-transform: translateX(0%); }
}

/* slide in from the bottom */
@keyframes ngscaleDown {

  	to		{ opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes ngscaleDown {

  	to		{ opacity: 0.3; transform: scale(0.8); }
}
@-webkit-keyframes ngscaleDown {

  	to 		{ opacity: 0.3; transform: scale(0.8); }
}


@media only screen and (min-width: 64.063em) {
 .mobilev {
  display:none; 
 }
}
@media only screen and (max-width: 64.063em) {
body .desktopv {
 display:none; 
}
}






.slidedownfade.in {
    -webkit-transform: translateY(0);
    -webkit-animation-name: slideinfadefromtop;
    -webkit-animation-duration: 250ms;
    -moz-transform: translateY(0);
    -moz-animation-name: slideinfadefromtop;
    -moz-animation-duration: 250ms;
    transform: translateY(0);
    animation-name: slideinfadefromtop;
    animation-duration: 250ms;
}

.slidedownfade.out {
	-webkit-animation-name: slideoutfadeout;
	-webkit-animation-duration: 100ms;
	-moz-animation-name: slideoutfadeout;
	-moz-animation-duration: 100ms;
	animation-name: slideoutfadeout;
	animation-duration: 100ms;
}
.slidedownfade.in.reverse {
	-webkit-animation-name: slideinfadein;
	-webkit-animation-duration: 150ms;
	-moz-animation-name: slideinfadein;
	-moz-animation-duration: 150ms;
	animation-name: slideinfadein;
	animation-duration: 150ms;
}

.slidedownfade.out.reverse {
	-webkit-transform: translateY(100%);
	-webkit-animation-name: slideoutfadetotop;
	-webkit-animation-duration: 200ms;
	-moz-transform: translateY(100%);
	-moz-animation-name: slideoutfadetotop;
	-moz-animation-duration: 200ms;
	transform: translateY(100%);
	animation-name: slideoutfadetotop;
	animation-duration: 200ms;
}
@-webkit-keyframes slideinfadefromtop {
	from { -webkit-transform: translateY(-100%);
      opacity:0;
	}
	to { -webkit-transform: translateY(0);
       opacity:1;
	}
}
@-moz-keyframes slideinfadefromtop {
	from { -moz-transform: translateY(-100%);
       opacity:0;
	}
	to { -moz-transform: translateY(0);
      opacity:1;
	}
}
@keyframes slideinfadefromtop {
	from { transform: translateY(-100%);
       opacity:0;
	}
	to { transform: translateY(0);
       opacity:1;
	}
}

@-webkit-keyframes slideoutfadetotop {
	from { -webkit-transform: translateY(0);
       opacity:1;
	}
	to { -webkit-transform: translateY(-100%);
       opacity:0;
	}
}
@-moz-keyframes slideoutfadetotop {
	from { -moz-transform: translateY(0);
       opacity:1;
	}
	to { -moz-transform: translateY(-100%);
       opacity:0;
	}
}
@keyframes slideoutfadetotop {
	from { transform: translateY(0);
       opacity:1;
	}
	to { transform: translateY(-100%);
       opacity:0;
	}
}


@-webkit-keyframes slideinfadein {
	from { opacity: 0;
	}
	to { opacity: 1;
	}
}
@-moz-keyframes slideinfadein {
	from { opacity: 0;
	}
	to { opacity: 1;
	}
}
@keyframes slideinfadein {
	from { opacity: 0;
	}
	to { opacity: 1;
	}
}

@-webkit-keyframes slideoutfadeout {
	from { opacity: 1;
	}
	to { opacity: 0;
	}
}
@-moz-keyframes slideoutfadeout {
	from { opacity: 1;
	}
	to { opacity: 0;
	}
}
@keyframes slideoutfadeout {
	from { opacity: 1;
	}
	to { opacity: 0;
	}
}