// 
// 
// 
// 



  

  
  

  
  

  
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  

  @font-face {
  font-family: "Avenir Next";
  font-weight: 400;
  font-style: normal;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n4.7fd0287595be20cd5a683102bf49d073b6abf144.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=d1d3ce0a3fe4e64d586e0e234e9ef86eba3ced7b0081c304c4d8a3764f371fad") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n4.a26a334a0852627a5f36b195112385b0cd700077.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f8bb03497be6c71e3533db4ae63163269ddd57df274a85ac56c8310cc266dba4") format("woff");
}

  @font-face {
  font-family: "Avenir Next";
  font-weight: 400;
  font-style: italic;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i4.f1583d9f457b68e44fbda187a48b4096d547d7f4.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=02c73ea356697e3d04412581016b1946ac6d04fb1248432597d75a27e478faaa") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i4.67fb53a3e0351125941146246183577ae8d8bf23.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=4a1e0f2bc703c09777476f264cba8c14781ed382539cf597074c79b28eb3c114") format("woff");
}


  
  
  
  

  
  

  
  
    
    
    
    

    
    @font-face {
  font-family: "Avenir Next";
  font-weight: 700;
  font-style: normal;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n7.8cfc646eab1e39e2d81a26284624600ccae49d55.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=4f06e8bdf0354c84d124a8c7aadc5f85fab9a48b6d135a5599899803f5d0de08") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n7.25b10f8089bc87dfd8e50a7c68b433da7a04bc87.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=d20462411e288f58194dd42fc2e15eae9eb30a4547bb9ad550601658550c2f6e") format("woff");
}


    
    
    
    
    

    
    
    
    

    
    @font-face {
  font-family: "Avenir Next";
  font-weight: 700;
  font-style: italic;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i7.3a67996166b5b7f1b7cc3b35490ebd6824908dc5.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=645c664e05f6121811de71ad380240216b8b133b74ebb780c83882918581ec23") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i7.b872875ff437f0efb4c2321d0016eaa726b649ae.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=abcca2f5a716adb7d484d49bcd6f27596e84683e080e750b60bdbb56ec533189") format("woff");
}

    
    
    

    

    
    
    

    
    
    
    
  

  
  
  
  

  $font-body: font_body;
  $font-body-family: "Avenir Next", sans-serif;
  $font-body-styles: ((normal, italic), (normal, italic));
  $font-body-named-styles: ((initial, italic), (initial, italic));
  $font-body-weights: (400, 700);
  $font-body-named-weights: (initial, bolder);

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  

  
  

  
  

  
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  

  @font-face {
  font-family: "Merriweather Sans";
  font-weight: 400;
  font-style: normal;
  src: url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_n4.cc01d4aa464d6f29e336ecf474c9a9ea829e3c5d.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=6ca6ee2a587952b839335438f9838465ce8105e93f818f8190c55acdc7738235") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_n4.5ee6904e9c6d28696a9f52c4880d425da0229a95.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=08a9f93fbdcb9d5a49b7b87dfcc11a3dd9bdc77a1235282c0cb78648e0c98c68") format("woff");
}

  @font-face {
  font-family: "Merriweather Sans";
  font-weight: 400;
  font-style: italic;
  src: url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_i4.54a432ccbead64742f789d03d3b60df4f216218d.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=84fbd92b4c67c047578e2197a0e3c6c4d365261c441b9fd98d772476e6d3a170") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_i4.9c5b4b0c231fe4f0c5adb294c14590d55d43b8f3.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=8b987345951f207e28ea0da07ec0e6aacb1e40aefb5bac42b2050ddec8381c64") format("woff");
}


  
  
  
  

  
  

  
  
    
    
    
    

    
    @font-face {
  font-family: "Merriweather Sans";
  font-weight: 300;
  font-style: normal;
  src: url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_n3.e3c913deaeba30e9b635d15c7ab55d59cdeece07.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=fd11c08ee967e8d8924e20e8a08687ac9582f8e12c4b1eb6b431744ecebf5f04") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_n3.11f1ef1e4bf37642d9ee9dd870be261020adc642.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=1c4be2d11bc4ec2e473c3c9f0404d7ffa5ab46249b2f0b6911c1bd363543100b") format("woff");
}


    
    
    
    
    

    
    
    
    

    
    @font-face {
  font-family: "Merriweather Sans";
  font-weight: 300;
  font-style: italic;
  src: url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_i3.7fce18d98345574393342acf136621c7064a3d4d.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f9671a196c1ff96d441996c4834b5e7777c251eaf96422b26933e83c526e44c6") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_i3.f1c429274dc3f009f8f27db8d0a0876cbac46d09.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=871c796ae7118f1b94b12e28bdde84a790dcea4219fc514ed21ebce4cb351cb0") format("woff");
}

    
    
    

    

    
    
    

    
    
    
    
  
    
    
    
    

    
    @font-face {
  font-family: "Merriweather Sans";
  font-weight: 700;
  font-style: normal;
  src: url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_n7.795b415aa58ecf2521ade9b4f4a6f9e8dcd1470a.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=5c3cb32c9190740d61e84dab63260d600f37c373551fb626fec1d42ae635bfdb") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_n7.8aea26e99797e0fe7b623bb92e74c3295eb2d3ad.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=c0180bdca5c9dc8a28585af37187b6d48b294897a9b5393d7de7b9d5d8aaa086") format("woff");
}


    
    
    
    
    

    
    
    
    

    
    @font-face {
  font-family: "Merriweather Sans";
  font-weight: 700;
  font-style: italic;
  src: url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_i7.16959a8ac3e5f7257980b62ce73e6dc370203ab6.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=7bd31c84b985aff18d63e70904b10d7d76be7f21958e0eb825a475627ab022f1") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/merriweather_sans/merriweathersans_i7.74a84d3bb6789c69c124696eafb5f89013473c02.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=847eaaacd1e32209ef655a2db544a07d6e7a36dbb4a16d347f3e67cdeea08d88") format("woff");
}

    
    
    

    

    
    
    

    
    
    
    
  

  
  
  
  

  $font-headings: font_headings;
  $font-headings-family: "Merriweather Sans", sans-serif;
  $font-headings-styles: ((normal, italic), (normal, italic), (normal, italic));
  $font-headings-named-styles: ((initial, italic), (initial, italic), (initial, italic));
  $font-headings-weights: (400, 300, 700);
  $font-headings-named-weights: (initial, lighter, bolder);

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  

  
  

  
  

  
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  

  @font-face {
  font-family: "Avenir Next";
  font-weight: 400;
  font-style: normal;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n4.7fd0287595be20cd5a683102bf49d073b6abf144.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=d1d3ce0a3fe4e64d586e0e234e9ef86eba3ced7b0081c304c4d8a3764f371fad") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n4.a26a334a0852627a5f36b195112385b0cd700077.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f8bb03497be6c71e3533db4ae63163269ddd57df274a85ac56c8310cc266dba4") format("woff");
}

  @font-face {
  font-family: "Avenir Next";
  font-weight: 400;
  font-style: italic;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i4.f1583d9f457b68e44fbda187a48b4096d547d7f4.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=02c73ea356697e3d04412581016b1946ac6d04fb1248432597d75a27e478faaa") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i4.67fb53a3e0351125941146246183577ae8d8bf23.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=4a1e0f2bc703c09777476f264cba8c14781ed382539cf597074c79b28eb3c114") format("woff");
}


  
  
  
  

  
  

  
  
    
    
    
    

    
    @font-face {
  font-family: "Avenir Next";
  font-weight: 700;
  font-style: normal;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n7.8cfc646eab1e39e2d81a26284624600ccae49d55.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=4f06e8bdf0354c84d124a8c7aadc5f85fab9a48b6d135a5599899803f5d0de08") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n7.25b10f8089bc87dfd8e50a7c68b433da7a04bc87.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=d20462411e288f58194dd42fc2e15eae9eb30a4547bb9ad550601658550c2f6e") format("woff");
}


    
    
    
    
    

    
    
    
    

    
    @font-face {
  font-family: "Avenir Next";
  font-weight: 700;
  font-style: italic;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i7.3a67996166b5b7f1b7cc3b35490ebd6824908dc5.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=645c664e05f6121811de71ad380240216b8b133b74ebb780c83882918581ec23") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i7.b872875ff437f0efb4c2321d0016eaa726b649ae.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=abcca2f5a716adb7d484d49bcd6f27596e84683e080e750b60bdbb56ec533189") format("woff");
}

    
    
    

    

    
    
    

    
    
    
    
  

  
  
  
  

  $font-headings-secondary: font_headings_secondary;
  $font-headings-secondary-family: "Avenir Next", sans-serif;
  $font-headings-secondary-styles: ((normal, italic), (normal, italic));
  $font-headings-secondary-named-styles: ((initial, italic), (initial, italic));
  $font-headings-secondary-weights: (400, 700);
  $font-headings-secondary-named-weights: (initial, bolder);

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  

  
  

  
  

  
  
  
  
  
  
  
  

  
  

  
  
  
  
  
  
  
  

  @font-face {
  font-family: "Avenir Next";
  font-weight: 400;
  font-style: normal;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n4.7fd0287595be20cd5a683102bf49d073b6abf144.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=d1d3ce0a3fe4e64d586e0e234e9ef86eba3ced7b0081c304c4d8a3764f371fad") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n4.a26a334a0852627a5f36b195112385b0cd700077.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=f8bb03497be6c71e3533db4ae63163269ddd57df274a85ac56c8310cc266dba4") format("woff");
}

  @font-face {
  font-family: "Avenir Next";
  font-weight: 400;
  font-style: italic;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i4.f1583d9f457b68e44fbda187a48b4096d547d7f4.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=02c73ea356697e3d04412581016b1946ac6d04fb1248432597d75a27e478faaa") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i4.67fb53a3e0351125941146246183577ae8d8bf23.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=4a1e0f2bc703c09777476f264cba8c14781ed382539cf597074c79b28eb3c114") format("woff");
}


  
  
  
  

  
  

  
  
    
    
    
    

    
    @font-face {
  font-family: "Avenir Next";
  font-weight: 700;
  font-style: normal;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n7.8cfc646eab1e39e2d81a26284624600ccae49d55.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=4f06e8bdf0354c84d124a8c7aadc5f85fab9a48b6d135a5599899803f5d0de08") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_n7.25b10f8089bc87dfd8e50a7c68b433da7a04bc87.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=d20462411e288f58194dd42fc2e15eae9eb30a4547bb9ad550601658550c2f6e") format("woff");
}


    
    
    
    
    

    
    
    
    

    
    @font-face {
  font-family: "Avenir Next";
  font-weight: 700;
  font-style: italic;
  src: url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i7.3a67996166b5b7f1b7cc3b35490ebd6824908dc5.woff2?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=645c664e05f6121811de71ad380240216b8b133b74ebb780c83882918581ec23") format("woff2"),
       url("//www.lityourdreams.com/cdn/fonts/avenir_next/avenirnext_i7.b872875ff437f0efb4c2321d0016eaa726b649ae.woff?h1=bGl0eW91cmRyZWFtcy5jb20&h2=bGl0eW91cmRyZWFtcy5jb20ubXg&h3=eG4tLWlsdW1pbmFzdXNzdWVvcy1icmIuY29t&h4=aWx1bWluYXN1c3N1ZcOxb3MuY29t&h5=bGl0eW91cmRyZWFtcy51cw&h6=bGl0eW91cmRyZWFtcy5hY2NvdW50Lm15c2hvcGlmeS5jb20&hmac=abcca2f5a716adb7d484d49bcd6f27596e84683e080e750b60bdbb56ec533189") format("woff");
}

    
    
    

    

    
    
    

    
    
    
    
  

  
  
  
  

  $font-accent: font_accent;
  $font-accent-family: "Avenir Next", sans-serif;
  $font-accent-styles: ((normal, italic), (normal, italic));
  $font-accent-named-styles: ((initial, italic), (initial, italic));
  $font-accent-weights: (400, 700);
  $font-accent-named-weights: (initial, bolder);

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  













$font-variables: ($font-body $font-headings $font-headings-secondary $font-accent);
$font-variables-families: ($font-body-family $font-headings-family $font-headings-secondary-family $font-accent-family);
$font-variables-weights: ($font-body-weights $font-headings-weights $font-headings-secondary-weights $font-accent-weights);
$font-variables-named-weights: ($font-body-named-weights $font-headings-named-weights $font-headings-secondary-named-weights $font-accent-named-weights);
$font-variables-styles: ($font-body-styles $font-headings-styles $font-headings-secondary-styles $font-accent-styles);
$font-variables-named-styles: ($font-body-named-styles $font-headings-named-styles $font-headings-secondary-named-styles $font-accent-named-styles);

// Find the index of the font setting for cross referencing
@function font-setting-index($font-type) {
  @return index($font-variables, $font-type);
}

// Font
// --------
// Find the index of a font weight from its relative name
// - [$font-type]: Variable of font to look up
// - [$font-weight]: lighter/initial/bolder
@function font-weight-index($font-type, $font-weight: initial) {
  $font-setting-index: font-setting-index($font-type);

  // Look up available weights based on index of font setting
  $named-weights: nth($font-variables-named-weights, $font-setting-index);

  // Try to find index of desired font weight by cross referencing
  $weight-index: index($named-weights, $font-weight);

  // Return index of named weight, or return initial weight
  @return if($weight-index, $weight-index, 1);
}

// Font
// --------
// Find the font family for a font setting
// - [$font-type]: Variable of font to look up
@function font-family($font-type) {
  @return nth($font-variables-families, font-setting-index($font-type));
}

// Font
// --------
// Find a font style relative to a font weight
// - [$font-type]: Variable of font to look up
// - [$font-style]: initial/italic
// - [$font-weight]: lighter/initial/bolder
@function font-style($font-type, $font-style: initial, $font-weight: initial) {
  $style: null;
  $styles: null;

  // Find index of font setting
  $font-setting-index: font-setting-index($font-type);

  // Get styles based on index of font setting
  $font-styles: nth($font-variables-styles, $font-setting-index);
  $font-named-styles: nth($font-variables-named-styles, $font-setting-index);

  // Try to find index of desired font weight by cross referencing
  $weight-named-index: font-weight-index($font-type, $font-weight);

  // Get styles available for $font-weight
  $named-weight-style: nth($font-styles, $weight-named-index);
  $named-weight-named-style: nth($font-named-styles, $weight-named-index);

  // Find position of $font-style
  $style-named-index: index($named-weight-named-style, $font-style);

  @if $style-named-index {
    @return nth($named-weight-style, $style-named-index);
  } @else {
    // Return initial font style
    @return nth($named-weight-style, 1);
  }
}

// Font weight
// --------
// Find a font sensitive relative weight
// - [$font-type]: Variable of font to look up
// - [$font-weight]: lighter/initial/bolder
@function font-weight($font-type, $font-weight: initial) {
  $weight: null;

  // Find index of font setting
  $font-setting-index: font-setting-index($font-type);

  // Look up available weights based on index of font setting
  $weights: nth($font-variables-weights, $font-setting-index);

  // Try to find index of desired font weight by cross referencing
  $weight-index: font-weight-index($font-type, $font-weight);

  // Return numerical weight of font
  @return nth($weights, $weight-index);
}

// Font
// --------
// Generate complete font styles for a font setting
// - [$font-type]: Variable of font to look up
// - [$font-family]: true/false
// - [$font-size]: unit/false
// - [$font-style]: initial/italic/false
// - [$font-weight]: lighter/initial/bolder/false
@mixin font(
  $font-type,
  $font-family: true,
  $font-size: false,
  $font-style: initial,
  $font-weight: initial
) {
  @if $font-family { font-family: font-family($font-type); }
  @if $font-size { font-size: $font-size; }
  @if $font-style { font-style: font-style($font-type, $font-style: $font-style, $font-weight: $font-weight ); }
  @if $font-weight { font-weight: font-weight($font-type, $font-weight: $font-weight); }
}








/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
.mc-modal {display:none !important}
.mc-modal-bg {display:none !important}
/* pswp = photoswipe */
.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none; }
  .pswp * {
    box-sizing: border-box; }
  .pswp img {
    max-width: none; }

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--open {
  display: block; }

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab; }

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing; }

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity; }

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.pswp__container,
.pswp__zoom-wrap {
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; }

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  transform-origin: left top;
  /* for open/close transition */
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  transition: none; }

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden; }

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden; }

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0; }

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden; }

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
  background: #222; }

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0; }

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC; }

.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline; }

$font-size--small: 10px;
$font-size--button: 13px;
$font-size--body: 15px;
$font-size--nav: 14px;

$color--black: #000;
$color--white: #fff;

$color--error: #ee575a;
$color--error-light: #FFEAEB;
$color--error-dark: rgb(238, 87, 90);

$color--success: #66b544;
$color--success-light: #f2f9ed;
$color--success-dark: #4faa2a;

$transition--easing: cubic-bezier(0.4, 0, 0.2, 1);
$transition--short: 0.15s;
$transition--medium: 0.25s;
$transition--long: 0.35s;
$transition--longer: 0.5s;

//************************************************************************//
// Hover color generator
//************************************************************************//

@function hover($color, $isLink: false) {
  $lightness: lightness($color);
  $lightColor: false;
  $multiplier: 1;
  @if $lightness > 10% { $lightColor: true; }
  @if $isLink { $multiplier: 2; }

  @if $lightColor {
    $lightness: ($lightness / 20) * $multiplier;
    $color: darken($color, $lightness);
  } @else {
    @if $lightness < 2.5% {
      $lightness: 30%;
    } @else if $lightness < 7.5% {
      $lightness: 15%;
    }

    $lightness: ($lightness / 10) * $multiplier;
    $color: lighten($color, $lightness);
  }

  $saturation: saturation($color);
  $saturatedColor: false;
  @if $saturation > 0% { $saturatedColor: true; }
  $saturation: ($saturation / 20) * $multiplier;

  @if $saturatedColor {
    @if $lightColor {
      $color: desaturate($color, $saturation);
    } @else {
      $color: saturate($color, $saturation);
    }
  }

  @return $color;
}

//************************************************************************//
// Secondary border
//************************************************************************//

@function border($color) {
  @if lightness($color) > 50% {
    $color: lighten($color, 5%);
  } @else {
    $color: darken($color, 5%);
  }
  @return $color;
}

//************************************************************************//
// Color Contrast
//************************************************************************//

@function shade($color, $percent) {
  @return mix($color--black, $color, $percent);
}

@function tint($color, $percent) {
  @return mix($color--white, $color, $percent);
}

@function contrast($color, $percent: 6%) {
  @if (lightness($color) > 50) {
    @return shade($color, $percent);
  } @else {
    @return tint($color, $percent);
  }
}

// Determine hover color based on color's saturation and lightness
@function morph($color, $adjustment-value: 2) {
  $lightness: lightness($color);
  $light-color: false;

  @if $lightness > 35% { $light-color: true; }

  @if $light-color {
    $lightness: ($lightness / 20) * $adjustment-value;
    $color: darken($color, $lightness);
  } @else {
    @if $lightness < 2.5% {
      $lightness: 45%;
    } @else if $lightness < 7.5% {
      $lightness: 30%;
    }  @else if $lightness < 35% {
      $lightness: 5%;
    }

    $lightness: ($lightness / 10) * $adjustment-value;
    $color: lighten($color, $lightness);
  }

  $saturation: saturation($color);
  $saturated-color: false;

  @if $saturation > 0% { $saturated-color: true; }

  $saturation: ($saturation / 20);

  @if $saturated-color {
    @if $light-color {
      $color: desaturate($color, $saturation);
    } @else {
      $color: saturate($color, $saturation);
    }
  }

  @return $color;
}

// Layout
$content-width: 92%;
$content-width-tablet-desktop: 95%;
$max-width: 1430px;
$min-width: 290px;

// Fonts
$font-body: $font-body !default;
$font-headings: $font-headings !default;
$font-headings-capitalize: false;
$font-headings-secondary: $font-headings-secondary !default;
$font-accent: $font-accent !default;
$font-label-bold: FontDrop;

// Colors
$background-color: #ffffff;

$title-color: #000000;

$logo-link-color: #222222;
$logo-link-color-hover: morph(#222222);

$accent-color: #1b1e3f;
$accent-color-hover: morph(#1b1e3f);
$button-text-color: #ffffff;

$text-color: #222222;
$light-text-color: mix($text-color, $background-color, 70%);
$lightest-text-color: mix($text-color, $background-color, 50%);

$primary-border-color: rgba(0,0,0,0);
$secondary-border-color: border($primary-border-color);

$nav-link-color: #222222;
$nav-link-color-hover: morph(#222222, 6);
$nav-link-dropdown-color: #ffffff;
$nav-background-color: #1b1e3f;
$nav-border-color: #dddddd;
$navigation-border: $nav-border-color;
$navigation-border-hover: contrast($nav-background-color, 15%);

$header-action-link-color: #1b1e3f;
$header-action-link-color-hover: morph(#1b1e3f);

$select-background-color: mix($background-color, $primary-border-color, 75%);
$theme-detail-link-color: $light-text-color;
$theme-detail-link-color-hover: hover($theme-detail-link-color, true);

$mobile-nav-secondary-color: contrast($nav-background-color, 5%);
$mobile-nav-tertiary-color: contrast($nav-background-color, 8%);
$mobile-nav-quaternary-color: contrast($nav-background-color, 8%);

$badge-color-soldout: #C0C0C0;
$badge-color-sale: #1b1e3f;
$badge-color-new: #2C2C2C;

$placeholder-svg-color: rgba(0,0,0,0);
$placeholder-svg-background: contrast($background-color, 5%);

@keyframes placeholder-pulse {
  from {
    background-color: $placeholder-svg-background;
  }

  to {
    background-color: darken($placeholder-svg-background, 5%);
  }
}



//************************************************************************//
// Prefixer
//************************************************************************//

// Variable settings for /addons/prefixer.scss
$prefix-for-webkit:    true !default;
$prefix-for-mozilla:   true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera:     true !default;
$prefix-for-spec:      true !default; // required for keyframe mixin

@mixin prefixer ($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    } @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    } @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    } @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    } @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    } @else {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin disable-prefix-for-all() {
  $prefix-for-webkit:    false;
  $prefix-for-mozilla:   false;
  $prefix-for-microsoft: false;
  $prefix-for-opera:     false;
  $prefix-for-spec:      false;
}

//************************************************************************//
// Transitions
//************************************************************************//

// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all 2s ease-in-out);
//          @include transition (opacity 1s ease-in 2s, width 2s ease-out);
//          @include transition-property (transform, opacity);

@mixin transition ($properties...) {
  // Fix for vendor-prefix transform property
  $needs-prefixes: false;
  $webkit: ();
  $moz: ();
  $spec: ();

  // Create lists for vendor-prefixed transform
  @each $list in $properties {
    @if nth($list, 1) == "transform" {
      $needs-prefixes: true;
      $list1: -webkit-transform;
      $list2: -moz-transform;
      $list3: ();

      @each $var in $list {
        $list3: join($list3, $var);

        @if $var != "transform" {
          $list1: join($list1, $var);
          $list2: join($list2, $var);
        }
      }

      $webkit: append($webkit, $list1);
         $moz: append($moz,    $list2);
        $spec: append($spec,   $list3);
    } @else {
      // Create lists for non-prefixed transition properties
      $webkit: append($webkit, $list, comma);
      $moz: append($moz, $list, comma);
      $spec: append($spec, $list, comma);
    }
  }

  @if $needs-prefixes {
    transition: $spec;
  } @else {
    @if length($properties) >= 1 {
      @include prefixer(transition, $properties, webkit moz spec);
    } @else {
      $properties: all $transition--short ease-out 0s;
      @include prefixer(transition, $properties, webkit moz spec);
    }
  }
}

@mixin transition-property ($properties...) {
  transition-property: transition-property-names($properties, false);
}

@mixin transition-duration ($times...) {
  @include prefixer(transition-duration, $times, webkit moz spec);
}

@mixin transition-timing-function ($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
  @include prefixer(transition-timing-function, $motions, webkit moz spec);
}

@mixin transition-delay ($times...) {
  @include prefixer(transition-delay, $times, webkit moz spec);
}

//************************************************************************//
// Transform
//************************************************************************//

@mixin transform($property: none) {
//  none | <transform-function>
  @include prefixer(transform, $property, webkit moz ms o spec);
}

@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right  | length | %
// y-axis - top  | center | bottom | length | %
// z-axis -                          length
  @include prefixer(transform-origin, $axes, webkit moz ms o spec);
}

@mixin transform-style ($style: flat) {
  @include prefixer(transform-style, $style, webkit moz ms o spec);
}

//************************************************************************//
// Border-radius
//************************************************************************//

@mixin border-top-radius($radii) {
  @include prefixer(border-top-left-radius, $radii, spec);
  @include prefixer(border-top-right-radius, $radii, spec);
}

@mixin border-bottom-radius($radii) {
  @include prefixer(border-bottom-left-radius, $radii, spec);
  @include prefixer(border-bottom-right-radius, $radii, spec);
}

@mixin border-left-radius($radii) {
  @include prefixer(border-top-left-radius, $radii, spec);
  @include prefixer(border-bottom-left-radius, $radii, spec);
}

@mixin border-right-radius($radii) {
  @include prefixer(border-top-right-radius, $radii, spec);
  @include prefixer(border-bottom-right-radius, $radii, spec);
}

//************************************************************************//
// Breakpoint
//************************************************************************//

@mixin breakpoint($point) {
  @if $point == full {
    @media (min-width: 1200px) { @content; }
  } @else if $point == product-interactions {
    @media (max-width: 1332px) { @content; }
  } @else if $point == full-max {
    @media (max-width: 1200px) { @content; }
  } @if $point == full-down {
    @media (max-width: 1199px) { @content; }
  } @else if $point == large {
    @media (min-width: 720px) { @content; }
  } @else if $point == tablet {
    @media (min-width: 720px) and (max-width: 960px) { @content; }
  } @else if $point == small {
    @media (max-width: 719px) { @content; }
  } @else if $point == phone {
    @media (max-width: 480px) { @content; }
  } @else if $point == recommended-special {
    @media (max-width: 840px) { @content; }
  } @else if $point == slideshow-special {
    @media (max-width: 938px) { @content; }
  } @else if $point == minimal {
    @media (max-width: 959px) { @content; }
  } @else if $point == minimal-large {
    @media (min-width: 960px) { @content; }
  } @else if $point == device {
    @media (max-device-width: 1024px) { @content; }
  } @else if $point == mobile-nav {
    @media (max-width: 719px) { @content; }
  }
}

@mixin breakpoint-small {
  html:not(.header-layout-minimal) & {
    @media (max-width: 719px) { @content; }
  }

  html.header-layout-minimal & {
    @media (max-width: 959px) { @content; }
  }
}

@mixin breakpoint-large {
  html:not(.header-layout-minimal) & {
    @media (min-width: 720px) { @content; }
  }

  html.header-layout-minimal & {
    @media (min-width: 960px) { @content; }
  }
}

//************************************************************************//
// Placeholders
//************************************************************************//

$placeholders: "-webkit-input-placeholder",
               "-moz-placeholder",
               "-ms-input-placeholder";

@mixin placeholder {
  @each $placeholder in $placeholders {
    @if $placeholder == "-webkit-input-placeholder" {
      &::#{$placeholder} {
        @content;
      }
    } @else if $placeholder == "-moz-placeholder" {
      // FF 18-
      &:#{$placeholder} {
        @content;
      }

      // FF 19+
      &::#{$placeholder} {
        @content;
      }
    } @else {
      &:#{$placeholder} {
        @content;
      }
    }
  }
}

//************************************************************************//
// Position
//************************************************************************//

@mixin position ($position: relative, $coordinates: 0 0 0 0) {

  @if type-of($position) == list {
    $coordinates: $position;
    $position: relative;
  }

  $top: nth($coordinates, 1);
  $right: nth($coordinates, 2);
  $bottom: nth($coordinates, 3);
  $left: nth($coordinates, 4);

  position: $position;

  @if $top == auto {
    top: $top;
  } @else if not(unitless($top)) {
    top: $top;
  }

  @if $right == auto {
    right: $right;
  } @else if not(unitless($right)) {
    right: $right;
  } @if $bottom == auto {
    bottom: $bottom;
  } @else if not(unitless($bottom)) {
    bottom: $bottom;
  }

  @if $left == auto {
    left: $left;
  } @else if not(unitless($left)) {
    left: $left;
  }
}

//************************************************************************//
// Opacity
//************************************************************************//

@mixin opacity ($value) {
  $IEValue: $value * 100;
  opacity: $value;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + $IEValue + ")";
  filter: alpha(opacity = $IEValue);
}

//************************************************************************//
// Aspect ratio
//************************************************************************//

@mixin ratio($ratio: 1 1) {
  $width: 100%;
  $height: percentage(nth($ratio, 2) / nth($ratio, 1));

  width: $width;
  height: 0;
  padding-bottom: $height;
}

%placeholder-pulse {
  background-size: cover;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: placeholder-pulse;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

%button {
  @include font($font-headings-secondary);
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  font-size: $font-size--button;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: $button-text-color;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  background-color: $accent-color;
  border: 1px solid $accent-color;
  border-radius: 0;
  transition: $transition--short $transition--easing background-color,
              $transition--short $transition--easing border-color;

  &:hover {
    color: $button-text-color;
    background-color: $accent-color-hover;
    border-color: $accent-color-hover;
  }
}

%button--large {
  @extend %button;
  padding: 15px 24px;
}

%button--small {
  @extend %button;
  font-size: $font-size--button - 1px;
}

%button--alt {
  color: $accent-color;
  background-color: $button-text-color;

  &:hover {
    color: $accent-color;
    background-color: mix($button-text-color, $accent-color, 85%);
  }
}

%button--secondary {
  @extend %button--alt;
  color: $accent-color;
  background-color: $color--white;
}

%input {
  @include font($font-accent);
  position: relative;
  display: inline-block;
  padding: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: $text-color;
  text-align: left;
  cursor: pointer;
  border: 1px solid $primary-border-color;
  border-radius: 0;
  outline: 0;
  transition: $transition--short $transition--easing border;

  @include placeholder {
    color: $primary-border-color;
  }

  &:focus {
    border: 1px $text-color solid;
  }

  &:focus,
  &:invalid {
    background-color: transparent;
  }
}

%label {
  @include font($font-accent);
  font-weight: $font-label-bold;
  display: block;
  margin-bottom: 15px;
  font-size: 14px;
  color: $text-color;
}

%uc-title {
  @include font($font-headings-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

%nav-divider {
  position: relative;

  &::before {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 23px;
    background-color: $navigation-border;
    content: "";
    transform: translateY(-50%);
  }
}


%icon {
  display: block;
  width: 100%;
  height: 100%;
}

%icon--large {
  .svg-icon {
    @extend %icon;
    width: 20px;
    height: 20px;
  }
}


%icon--medium {
  .svg-icon {
    @extend %icon;
    width: 12px;
    height: 12px;
  }
}

%icon--small {
  .svg-icon {
    @extend %icon;
    width: 8px;
    height: 8px;
  }
}


.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
}

[hidden] {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

html,
button,
input,
select,
textarea {
  font-family: sans-serif;
  color: #222;
}

body {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}

a {
  text-decoration: none;
}

a:focus {
  outline: none;
}

a:hover,
a:active {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

blockquote {
  margin: 1em 40px;
}

dfn {
  font-style: italic;
}

hr {
  display: block;
  height: 1px;
  padding: 0;
  margin: 1em 0;
  border: 0;
  border-top: 1px solid #ccc;
}

ins {
  color: $color--black;
  text-decoration: none;
  background: #ff9;
}

mark {
  font-style: italic;
  font-weight: bold;
  color:$color--black;
  background: #ff0;
}

pre,
code,
kbd,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

pre {
  word-wrap: break-word;
  white-space: pre-wrap;
}

q {
  quotes: none;
}

q::before,
q::after {
  content: none;
}

small {
  font-size: 85%;
}

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}

ul,
ol {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}

dd {
  margin: 0 0 0 40px;
}

nav ul,
nav ol {
  padding: 0;
  margin: 0;
  list-style: none;
  list-style-image: none;
}

img {
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}

form {
  margin: 0;
}

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

label {
  cursor: pointer;
}

legend {
  padding: 0;
  white-space: normal;
  border: 0;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: baseline;
}

button,
input {
  line-height: normal;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
}

button[disabled],
input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  padding: 0;
  box-sizing: border-box;
}

input[type="search"] {
  box-sizing: content-box;
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

input:invalid,
textarea:invalid {
  background-color: #f0dddd;
}

input {
  background: none;
  border: 0;
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  vertical-align: top;
}

.chromeframe {
  padding: 0.2em 0;
  margin: 0.2em 0;
  color: $color--black;
  background: #ccc;
}


$preload-gif: "";
$default-skin-png: "";
$default-skin-svg: "";

/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*

	1. Buttons

 */
/* <button> css reset */
.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  transition: opacity 0.2s;
  box-shadow: none; }
  .pswp__button:focus, .pswp__button:hover {
    opacity: 1; }
  .pswp__button:active {
    outline: none;
    opacity: 0.9; }
  .pswp__button::-moz-focus-inner {
    padding: 0;
    border: 0; }

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
  opacity: 1; }

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background: url($default-skin-png) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px; }

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .pswp--svg .pswp__button,
  .pswp--svg .pswp__button--arrow--left:before,
  .pswp--svg .pswp__button--arrow--right:before {
    background-image: url($default-skin-svg); }
  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none; } }

.pswp__button--close {
  background-position: 0 -44px; }

.pswp__button--share {
  background-position: -44px -44px; }

.pswp__button--fs {
  display: none; }

.pswp--supports-fs .pswp__button--fs {
  display: block; }

.pswp--fs .pswp__button--fs {
  background-position: -44px 0; }

.pswp__button--zoom {
  display: none;
  background-position: -88px 0; }

.pswp--zoom-allowed .pswp__button--zoom {
  display: block; }

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0; }

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden; }

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute; }

.pswp__button--arrow--left {
  left: 0; }

.pswp__button--arrow--right {
  right: 0; }

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: '';
  top: 35px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 30px;
  width: 32px;
  position: absolute; }

.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px; }

.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px; }

/*

	2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none; }

.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity; }

.pswp__share-modal--hidden {
  display: none; }

.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transform: translateY(6px);
  transition: transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform; }
  .pswp__share-tooltip a {
    display: block;
    padding: 8px 12px;
    color: #000;
    text-decoration: none;
    font-size: 14px;
    line-height: 18px; }
    .pswp__share-tooltip a:hover {
      text-decoration: none;
      color: #000; }
    .pswp__share-tooltip a:first-child {
      /* round corners on the first/last list item */
      border-radius: 2px 2px 0 0; }
    .pswp__share-tooltip a:last-child {
      border-radius: 0 0 2px 2px; }

.pswp__share-modal--fade-in {
  opacity: 1; }
  .pswp__share-modal--fade-in .pswp__share-tooltip {
    transform: translateY(0); }

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px; }

a.pswp__share--facebook:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none; }

a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF; }
  a.pswp__share--facebook:hover:before {
    border-bottom-color: #3E5C9A; }

a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF; }

a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D; }

a.pswp__share--download:hover {
  background: #DDD; }

/*

	3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #FFF;
  opacity: 0.75;
  padding: 0 10px; }

/*

	4. Caption

 */
.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px; }
  .pswp__caption small {
    font-size: 11px;
    color: #BBB; }

.pswp__caption__center {
  text-align: left;
  max-width: 420px;
  margin: 0 auto;
  font-size: 13px;
  padding: 10px;
  line-height: 20px;
  color: #CCC; }

.pswp__caption--empty {
  display: none; }

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  visibility: hidden; }

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr; }

.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px; }

.pswp__preloader--active {
  opacity: 1; }
  .pswp__preloader--active .pswp__preloader__icn {
    /* We use .gif in browsers that don't support CSS animation */
    background: url($preload_gif) 0 0 no-repeat; }

.pswp--css_animation .pswp__preloader--active {
  opacity: 1; }
  .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
    animation: clockwise 500ms linear infinite; }
  .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
    animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }

.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0; }

.pswp--css_animation .pswp__preloader__cut {
  /*
			The idea of animating inner circle is based on Polymer ("material") loading indicator
			 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
		*/
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden; }

.pswp--css_animation .pswp__preloader__donut {
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #FFF;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0; }

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right; } }

@keyframes clockwise {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

@keyframes donut-rotate {
  0% {
    transform: rotate(0); }
  50% {
    transform: rotate(-140deg); }
  100% {
    transform: rotate(0); } }

/*

	6. Additional styles

 */
/* root element of UI */
.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550; }

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%; }

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible; }

.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5); }

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: rgba(0, 0, 0, 0.3); }

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
  opacity: 0; }

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0; }

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001; }

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none; }

.pswp__element--disabled {
  display: none !important; }

.pswp--minimal--dark .pswp__top-bar {
  background: none; }


.no-js {
  .js-required {
    display: none;
  }
}

.js {
  .no-js-required {
    display: none;
  }
}

.uc-title {
  @include font($font-headings-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.select-wrapper {
  @extend %input;
  color: $text-color;
  width: 235px;
  border-radius: 0;
  transition: $transition--short $transition--easing border;

  &:focus-within {
    border: 1px solid $text-color;
  }

  &::before,
  &::after {
    position: absolute;
    width: 7px;
    height: 7px;
    top: calc(50% - 7px);
    right: 18px;
    display: block;
    border-left: 1px solid $text-color;
    border-bottom: 1px solid $text-color;
    background: none;
    content: "";
    transform: rotate(315deg);
  }

  &::after {
    margin-top: -1px;
    pointer-events: none;
    border-color: $background-color transparent transparent;
  }

  label.select-text {
    width: 100%;
    max-width: 82%;
    margin: 0;
    text-align: left;
  }

  select {
    @include font($font-body);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%; // needed for Firefox
    height: 100%; // needed for IE
    color: $text-color;
    opacity: 0;
    transition: $transition--short $transition--easing border;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;

    @include breakpoint(small) {
      font-size: 16px; //stops ios zooming
    }
  }

  .address-list &,
  .add-address &,
  .product-list-sidebar &,
  .collection-header & {
    width: auto;
    padding: 0;

    select {
      position: static;
      padding: 12px;
      background-color: transparent;
      border: 0;
      outline: 0;
      opacity: 1;
      box-sizing: content-box;
    }
  }

  .product-list-sidebar &,
  .collection-header & {
    width: 100%;
  }
}

.empty {
  @include font($font-body);
  margin: 40px 0 60px;
  font-size: $font-size--body;
  text-align: center;


  @include breakpoint(small) {
    width: 100%;
    padding: 0 30px;
  }

  a {
    color: $accent-color;

    &:hover {
      color: $accent-color-hover;
    }
  }

  .collection-header & {
    text-align: center;
  }
}

.error-message,
.alert-message {
  @include font($font-accent);
  width: 100%;
  padding: 14px;
  font-size: $font-size--body;
  color: $color--error;
  background-color: $color--error-light;
  border: 1px solid $color--error;

  &.success {
    color: $color--success;
    background-color: $color--success-light;
    border-color: $color--success;
  }
}

.content-area {
  display: block;
  width: $content-width;
  max-width: $max-width;
  min-width: 690px;
  padding: 0 15px;
  margin: 0 auto;

  @include breakpoint(full-down) {
    width: $content-width-tablet-desktop;
  }

  @include breakpoint(small) {
    width: 100%;
    min-width: 290px;
  }
}

.section-title {
  @include font($font-headings-secondary);
  padding: 45px 0 0;
  margin: 0 0 45px;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: $title-color;
  text-align: center;
  text-transform: uppercase;
}

.section-border {
  border-top: 1px solid $primary-border-color;

  main section:first-child & { border-top: 0; }
}

.action-button {
  @extend %button;

  &:hover {
    background-color: $accent-color-hover;
  }

  &.desaturated,
  .product-form-has-spb &.submit {
    @extend %button--alt;
  }

  &.submit,
  &.unavailable {
    @extend %button--large;
  }
}

.field {
  @extend %input;
  @include transition(box-shadow 250ms, border 250ms, color 250ms);

  &.error {
    color: $color--error-light;
    border: 1px solid $color--error;
    box-shadow: 0 0 7px rgba($color--error-dark, 0.4);

    @include placeholder {
      color: $color--error-light;
    }
  }

  @include breakpoint(small) {
    font-size: 16px; //stops ios zooming
  }
}

.page-title {
  padding: 16px 0 35px;
  text-align: center;
  border-bottom: 1px solid $primary-border-color;

  @include breakpoint(small) {
    padding: 35px 0;
    border-bottom: 0;
  }

  .label {
    @include font($font-headings);
    font-size: 35px;
    color: $title-color;

    @if $font-headings-capitalize {
      font-size: calc(35px * 0.875);
      text-transform: uppercase;
    }

    @include breakpoint(small) {
      display: block;
      white-space: pre-line;
    }

    a {
      color: $title-color;
    }
  }
}

.load-up {
  padding: 0 30px;
  font-size: 14px;
  color: $light-text-color;

  .featured-collections & {
    padding-bottom: 65px;
  }
}

.centering-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-svg {
  .slideshow & {
    min-height: 100%;

    .slideshow--desktop-height-natural & {
      min-height: 66vh;
    }

    @media screen and (max-width: 720px) {
      .slideshow--mobile-height-natural & {
        min-height: 25vh;
      }
    }
  }
}

.placeholder-background {
  background-color: $placeholder-svg-background;
}

.placeholder-svg {
  background-color: $placeholder-svg-background;
  fill: $placeholder-svg-color;
}

.money.no-price,
.money[data-orig-price="none"] {
  display: none;
}

.shopify-challenge__button {
  @extend %button;
}


.main-footer {
  padding: 0 15px;
  margin-top: 65px;

  .footer-message {
    overflow-wrap: break-word;
  }

  .footer-message,
  .email {
    max-width: 500px;
    margin: 0 auto;
    font-size: 14px;
    color: $light-text-color;

    a {
      color: $light-text-color;
      text-decoration: underline;
      &:hover { color: morph($light-text-color); }
    }
  }

  .connect {
    display: block;
    font-size: 0;
    text-align: center;
    border-top: 1px solid $primary-border-color;
    border-bottom: 1px solid $primary-border-color;

    > li {
      display: inline-block;
      width: percentage(1 / 3);
      height: 185px;
      text-align: center;
      vertical-align: top;
      border-left: 1px solid $primary-border-color;

      &:first-child {
        border-left: 0;
      }

      @media screen and (max-width: 910px) {
        width: 100%;
        height: auto;
        border-top: 1px solid $primary-border-color;
        border-left: 0;

        &:first-child {
          border-top: 0;
        }
      }
    }

    &.module-count-1 > li,
    &.module-count-2 > li {
      width: 50%;
    }

    &.module-count-1 > li {
      border-left: 0;
    }

    .title {
      @extend %uc-title;
      font-size: 14px;
      color: $light-text-color;
    }

    .contact {
      .title {
        margin-bottom: 20px;
      }

      p {
        margin: 0;
      }
    }

    .social {
      .title {
        margin-bottom: 30px;
      }

      > ul {
        padding: 0 20px;
        font-size: 0;
      }

      .social-link {
        position: relative;
        display: inline-block;
        width: auto;
        height: 24px;
        margin: 0 8px;
        border-radius: 4px;

        a {
          color: $light-text-color;
          transition: $transition--easing $transition--short color;

          &:hover {
            color: hover($light-text-color, true);
          }
        }

        svg {
          width: auto;
          height: 100%;
          color: $light-text-color;
          transition: color 150ms $transition--easing;

          &:hover { color: morph($light-text-color);  }
        }
      }

    }

    .newsletter {
      .title {
        margin-bottom: 20px;
      }
    }
  }

  .sub-footer {
    @include font($font-accent);
    margin: 40px 0 60px;
    font-size: $font-size--body - 1px;
    color: $lightest-text-color;

    @media screen and (max-width: 910px) {
      text-align: center;
    }

    nav {
      padding: 0 30px;
      margin-top: 40px;
      margin-bottom: 20px;
      text-align: center;

      li {
        display: inline-block;
        margin: 0 10px 10px;
      }

      a {
        color: $light-text-color;

        &:hover {
          color: $theme-detail-link-color-hover;
        }
      }

      .social-link {
        display: inline-block;
        width: auto;
        height: 24px;
        margin: 0 7px;
      }

      svg {
        width: auto;
        height: 100%;
        transition: color 150ms $transition--easing;

        &:hover { color: morph($light-text-color);  }
      }
    }

    p {
      margin: 50px 0 30px;
      text-align: center;

      @media screen and (max-width: 910px) {
        display: inline-block;
        margin: 10px 0 15px;
      }

      a {
        color: $theme-detail-link-color;
        transition: color 150ms $transition--easing;
      }

      a:hover {
        color: $theme-detail-link-color-hover;
      }
    }

    nav ~ p {
      margin-top: 20px;
      color: $lightest-text-color;

      a {
        color: $lightest-text-color;
        transition: color 150ms $transition--easing;

        &:hover {
          color: morph($lightest-text-color);
        }
      }
    }

    .payment-options {
      display: block;
      width: calc(100% + 6px);
      margin: 10px 0 50px -3px;
      text-align: center;

      li {
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 42px;
        max-height: 34px;
        margin: 0 3px;
      }

      svg {
        width: auto;
        height: 34px;
        max-width: 42px;
        max-height: 34px;
      }
    }
  }
}

#main-footer {
  line-height: 22px;

  .module-count-0 { border-bottom: 0; }

  .newsletter,
  .contact,
  .footer-menu,
  .social {
    padding-top: 50px;
    padding-bottom: 55px;
    color: $light-text-color;

    @media screen and (max-width: 910px) {
      padding-top: 40px;
    }

    li {
      font-size: $font-size--body;
      line-height: 2em;
    }

    a {
      color: $light-text-color;
      transition: color 150ms $transition--easing;

      &:hover {
        color: morph($light-text-color);
      }
    }
  }

  .connect {
    display: table;
    width: 100%;

    @media screen and (max-width: 910px) {
      display: block;
    }

    > li {
      padding-right: 20px;
      padding-left: 20px;
      display: table-cell;
      vertical-align: middle;

      @media (min-width: 1000px) {
        padding-right: 40px;
        padding-left: 40px;
      }
    }

    @media screen and (max-width: 910px) {
      > li {
        display: block;
        width: 100%;
        padding-top: 30px;
        padding-bottom: 30px;
      }
    }
  }
}

.main-footer-alt {

  .connect {
    .newsletter .wrap { width: 100%; }

    > li:first-of-type {
      border: 0;
    }
  }

  .footer-message + form { margin-top: 40px; }

  .module-count-2 > li { width: 50%; }

  .module-count-3 {
    > li.first { width: 50%; }
    > li:not(.first) { width: 25%; }
  }
}

.newsletter-wrap {
  display: flex;
  max-width: 400px;
  margin: 0 auto;

  .email {
    @extend %input;
    flex-grow: 1;
    width: 125px;
    margin: 0;
  }

  .submit {
    @extend %button;
    flex-shrink: 0;
    margin-left: 12px;
  }
}

a {
  color: $accent-color;
}

a:hover {
  color: $accent-color-hover;
}

* {
  box-sizing: border-box;
}

input::-ms-clear { display: block; }

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
textarea {
  border-radius: 0;
  -webkit-appearance: none;

  @include placeholder {
    color: $lightest-text-color;
  }
}

textarea {
  background-color: $background-color;
}

body,
html {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* iOS position:fixed; elements fix (not 100%) */
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

html {
  &::after {
    display: none;
    content: "S";

    @include breakpoint(tablet) {
      content: "M";
    }

    @include breakpoint(minimal-large) {
      content: "L";
    }
  }

  &.scroll-locked {
    overflow: hidden;
  }
}

body {
  @include font($font-body);
  color: $text-color;
  background-color: $background-color;
  -webkit-font-smoothing: antialiased;

  .scroll-locked & {
    overflow: hidden;
  }
}

// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
  @include font($font-headings);

  b,
  strong {
    font-weight: font-weight($font-headings, $font-weight: bolder);
  }

  em {
    font-style: font-style($font-headings, $font-style: italic);
  }

  b em,
  strong em,
  em b,
  em strong {
    font-style: font-style($font-headings, $font-weight: bolder, $font-style: italic);
  }
}



// Other typography settings
th,
b,
strong {
  font-weight: font-weight($font-body, $font-weight: bolder);
}

em {
  font-style: font-style($font-body, $font-style: italic);
}

th em,
b em,
strong em,
em b,
em strong {
  font-style: font-style($font-body, $font-weight: bolder, $font-style: italic);
}

mark {
  font-style: font-style($font-body, $font-weight: bolder, $font-style: italic);
  color: #000;
  background: #ff0;
}

@keyframes spinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.main-header-wrap {
  position: relative;
  z-index: 5000;

  .main-header {
    position: relative;
    background: $background-color;

    &::after {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
      display: none;
      width: 100%;
      background-color: rgba($color--black, 0.7);
      content: "";

      .main-header--minimal &,
      .main-header--minimal-sticky & {
        top: 100px;
      }
    }

    &.search-active::after {
      display: block;
    }
  }

  // Sticky header on desktop
  &.main-header--minimal {
    @include breakpoint(large) {
      background-color: $background-color;
    }
  }

  &.main-header--minimal-sticky {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background-color: $background-color;

    @include breakpoint(large) {
      position: fixed;
      right: 0;
      left: 0;
      background-color: $background-color;
    }
  }
}

// Currency switcher

.currency-switcher {
  @extend %icon--small;
  @include font($font-accent);
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 8px;
  color: $header-action-link-color;
  transition: color $transition--short $transition--easing;

  @include breakpoint(small) {
    display: none;
  }

  .main-header--minimal & {
    @include breakpoint(minimal) {
      display: none;
    }
  }

  .mobile-dropdown & {
    @include breakpoint(small) {
      display: flex;
    }

    .main-header--minimal & {
      @include breakpoint(minimal) {
        display: flex;
      }
    }
  }

  .selected-currency {
    display: inline-block;
    font-size: $font-size--nav;
    line-height: 1.5;
  }

  select[name=currencies] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: $color--black;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity = 0);
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
  }

  svg {
    margin-left: 5px;
  }

  &:hover,
  &.active {
    color: $header-action-link-color-hover;
  }
}

// Action links

.main-header--normal,
.main-header--expanded {
  @include breakpoint(mobile-nav) {
    border-bottom: 1px solid $nav-border-color;
  }
}

.action-links {
  position: relative;
  z-index: 2000;
  padding: 0 15px;

  @include breakpoint(small) {
    min-width: 0;
  }

  .main-header--normal:not(.main-header--centered) & {
    display: flex;
    align-items: center;
    justify-content: space-between;

    @include breakpoint(mobile-nav) {
      display: block;
    }

    &::before {
      order: 1;
    }
  }
}

// Responsive

// Stick mobile menu
@media screen and (max-width: 719px) {
  .header-mobile-stick {
    .action-links {
      display: none;
    }

    + * {
      padding-top: 175px;
    }
  }
}

.main-header--minimal {
  .main-header nav.full.multi-line::before {
    display: none;
  }

  ~ .page-body-content {
    padding-top: 1px;
  }
}

.header-minimal {
  display: table;
  width: 100%;
  min-height: 60px;
  padding-left: 20px;
  padding-right: 20px;

  .main-header--centered & {
    text-align: center;
    table-layout: fixed;
  }

  // Children
  nav.full,
  .store-title,
  .main-header--tools {
    display: table-cell;
    padding: 30px 0;
    vertical-align: middle;

    .main-header--minimal & {
      padding: 0;
    }
  }

  .store-title {
    .main-header--minimal & {
      text-align: left;

      @include breakpoint(minimal) {
        text-align: center;
      }
    }

    .main-header--centered & {
      text-align: center;

      @include breakpoint(mobile-nav) {
        z-index: 1;
        width: calc(100% - 150px);
      }
    }

    .main-header--minimal & {
      padding: 20px 0;
    }
  }

  nav.full {
    text-align: center;

    @include breakpoint(mobile-nav) {
      display: none;
    }

    .main-header--minimal & {
      @include breakpoint(minimal) {
        display: none;
      }
    }

    &.bordered {
      border: 0;
    }

    ul {
      text-align: left;
      white-space: normal;
    }

    .nav-item .label::before {
      display: none;
    }
  }

  .main-header--tools {

    .main-header--minimal & {

      @include breakpoint(minimal) {
        width: 100%;

        .main-header--tools-group {
          justify-content: space-between;
        }
      }
    }

    .main-header--centered & {
      width: 33.33333%;

      @include breakpoint(mobile-nav) {
        width: 100%;

        .main-header--tools-group {
          justify-content: space-between;
        }
      }
    }

    .main-header--minimal & {
      @include breakpoint(minimal) {
        width: 100%;

        .main-header--tools-group {
          justify-content: space-between;
        }
      }
    }
  }
}

.main-header .main-header--tools {
  @include breakpoint(mobile-nav) {
    width: 100%;
    max-width: 100%;
    margin-top: 14px;

    .main-header--tools-group {
      justify-content: space-between;
    }
  }
}

nav.full {
  @include breakpoint(mobile-nav) {
    display: none;
  }
}

// Site title / logo

.store-title {
  @include font($font-headings);
  display: block;
  max-width: 48%;
  margin: 40px 0;
  clear: left;
  font-size: 28px;
  overflow: hidden;

  @include breakpoint(small) {
    max-width: 100%;
    margin: 50px 0 40px;
    font-size: 23px;
    text-align: center;
  }

  html.header-layout-minimal.live-search-visible & {
    @include breakpoint(minimal) {
      display: none;
    }
  }

  .main-header--centered & {
    float: none;
    max-width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .main-header--minimal & {
    @include breakpoint(minimal) {
      position: relative;
      z-index: 3;
      display: block;
      max-width: 100%;
      width: calc(100% - 140px);
      margin: 0 auto;
    }
  }

  .main-header--minimal:not(.main-header--centered) & {
    padding-left: 0;
    margin: 30px 0;

    @media screen and (min-width: 960px) {
      padding-right: 20px;
      padding-left: 10px;
      text-align: left;
    }

    @include breakpoint(minimal) {
      margin: 0 auto;
    }
  }

  img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 200px;
  }

  a {
    display: inline-block;
    color: $logo-link-color;
    &:hover { color: $logo-link-color-hover; }

    @include breakpoint(small) {
      display: inline;
      word-break: break-word;
    }
  }
}

.store-logo {
  line-height: 0;

  @include breakpoint(small) {
      line-height: 1;
  }
}

// Header tools

.main-header--tools {
  position: relative;
  order: 2;
  float: right;
  max-width: 70%;

  @include breakpoint(mobile-nav) {
    float: none;

    .main-header--normal &::after,
    .main-header--expanded &::after {
      position: absolute;
      right: -15px;
      bottom: -14px;
      width: 100vw;
      height: 1px;
      background: $nav-border-color;
      content: "";
    }
  }

  &.search-active {
    z-index: 999;
  }

  .main-header--centered &,
  .main-header--expanded & {
    float: none;
    width: 100%;
    max-width: none;
    margin-top: 20px;
    margin-bottom: 15px;

    @include breakpoint(mobile-nav) {
      margin-top: 14px;
    }
  }

  .main-header--minimal & {
    float: none;
    text-align: right;
    visibility: visible;
  }

  .main-header--minimal & {
    @include breakpoint(minimal) {
      position: absolute;
      top: calc(50% - 10px);
      left: 15px;
      width: 100%;
      max-width: calc(100% - 30px);
      margin: 0;
    }
  }
}

.main-header--tools-group {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;

  .main-header--minimal & {
    justify-content: flex-end;
  }
}

.main-header--tools-left,
.main-header--tools-right {
  display: flex;
  align-items: center;
}

.tool-container {
  display: flex;
}

.main-header--tools-left {
  .main-header--centered.main-header--minimal & {
    @include breakpoint(full-max) {
      flex-wrap: wrap;
      justify-content: space-between;

      .social-links {
        flex-basis: 100%;
        justify-content: flex-end;
        padding: 0;
        margin: 0 0 20px;

        &::before {
          display: none;
        }
      }
    }
  }

  .main-header--minimal & {
    @include breakpoint(minimal) {
      justify-content: space-between;
      width: 100%;
    }
  }
}

.search {
  cursor: pointer;
}

.main-header--tools {
  .search,
  .menu,
  .mini-cart-wrap,
  .account-options {
    @extend %icon--large;
    @include font($font-accent);
    display: flex;
    align-items: center;
    margin: 0 6px;
    font-size: $font-size--nav;
    color: $header-action-link-color;

    .main-header--minimal & .svg-icon:only-child {
      margin: 0;
    }

    &:hover,
    &.active {
      color: $header-action-link-color-hover;
    }

    &.active {
      z-index: 5000;
    }
  }

  .account-options {
    .svg-icon {
      width: 21px;
    }
  }

  .mini-cart-wrap {
    margin-right: 0;

    .svg-icon {
      width: auto;
    }

    _:-ms-fullscreen, :root & {
      width: 21px;
    }
  }

  .menu {
    display: none;
    margin-left: 0;

    @include breakpoint(mobile-nav) {
      display: flex;
    }

    .main-header--minimal & {
      @include breakpoint(minimal) {
        display: flex;
      }
    }
  }

  .mini-cart-wrap {
    position: relative;
    cursor: pointer;

    .icon-bag,
    .icon-cart {
      padding-right: 12px;
    }

    .item-count {
      position: absolute;
      top: 50%;
      left: calc(100% - 18px);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 17px;
      min-width: 17px;
      padding: 3px;
      font-size: $font-size--small;
      line-height: 1;
      color: $background-color;
      background-color: $accent-color;
      border-radius: 50%;
      transform: translateY(-50%);

      &:empty {
        display: none;

        + .icon-bag,
        + .icon-cart, {
          padding-right: 0;
        }
      }
    }
  }
}

.main-header--tools-icon {
  @extend %icon--large;
  display: block;
  margin: 0 8px;

  .main-header--minimal & {
    width: 1.32em;
    height: 1.32em;
    margin-right: 0.5em;
    vertical-align: middle;
  }
}

.main-header--tools-label {
  margin-right: 6px;
  margin-left: 6px;

  @include breakpoint(small) {
    display: none;
  }

  .main-header--minimal & {
    display: none;
  }
}

// Social links

.main-header .mobile-dropdown .social-links {
  @include breakpoint(small) {
    display: flex;
    order: 1;
  }

  .main-header--minimal & {
    @include breakpoint(minimal) {
      display: flex;
      order: 1;
    }
  }

  .social-link {
    margin-left: 12px;
    color: $nav-link-dropdown-color;

    &:first-child {
      margin-left: 0;
    }
  }
}

.main-header .social-links {
  @extend %icon--large, %nav-divider;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  padding-right: 20px;
  margin-right: 10px;

  @include breakpoint(mobile-nav) {
    display: none;
  }

  @include breakpoint(minimal) {
    .main-header--minimal & {
      display: none;
    }
  }

  .main-header--minimal & {
    order: -1;
  }

  .social-link {
    margin-left: 10px;
    color: $header-action-link-color;
    transition: color $transition--short $transition--easing;

    &:hover,
    &.active {
      color: $header-action-link-color-hover;
    }

    .svg-icon {
      width: 18px;
      height: 18px;

      &.icon-facebook {
        margin: 0 1px;
      }

      &.icon-tumblr {
        margin: 0 -1px;
      }
    }
  }
}


.home-video-embed-wrapper {
  @include opacity(0);
  @include transition(opacity 0.2s ease-out);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: none;
  background: rgba($color--black, 0.8);

  &.opening {
    display: block;
  }

  &.open {
    @include opacity(1);
  }
}

.home-video-embed {
  width: 100%;
  padding: 30px;
  margin: 0 auto;

  &.centered {
    position: absolute;
    top: 50%;
    padding: 0 30px;
  }

  iframe {
    @include opacity(0);
    @include transition(opacity 0.4s ease-out);
  }

  .fluid-width-video-wrapper iframe {
    @include opacity(1);
  }
}

.home-video .home-module-content {
  position: relative;
}

.home-video-screenshot {
  position: relative;

  img,
  svg {
    display: block;
    width: 100%;
  }
}

.home-video-content {
  @include transform(translate(-50%, -50%));
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  max-width: 640px;
  padding: 0 30px;
  color: $color--white;
  text-align: center;

  @include breakpoint(medium) {
    @include transform(translate(0,0));
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto;
  }

  .sidebar-enabled & {
    @include breakpoint(large) {
      @include transform(translate(0,0));
      position: relative;
      top: auto;
      left: auto;
      margin: 0 auto;
    }
  }

  .text-color-dark & {
    color: $color--black;
  }

  h2 {
    margin: 30px 0 0;
    font-size: 40px;
    color: inherit;

    @include breakpoint(medium) {
      font-size: 24px;
    }

    .sidebar-enabled & {
      @include breakpoint(large) {
        font-size: 24px;
      }
    }
  }

  p {
    margin-top: 30px;
  }

  .button {
    color: $color--white;
    background: none;
    border: 2px solid $color--white;
  }

  .text-color-dark & .button {
    color: $color--black;
    border-color: $color--black;
  }

  .text-color-dark &,
  .text-color-light & {
    .button {
      @include breakpoint(medium) {
        border: 0;
      }

      .sidebar-enabled & {
        @include breakpoint(large) {
          border: 0;
        }
      }
    }
  }
}

.home-video-play-button {
  cursor: pointer;

  @include breakpoint(medium) {
    display: none;
  }

  .text-color-dark & {
    color: $color--black;
  }

  svg {
    width: 55px;
    height: 55px;
    padding: 15px;
    color: $text-color;
    vertical-align: middle;
    background-color: $background-color;
    border-radius: 50%;
  }

  .sidebar-enabled & {
    @include breakpoint(large) {
      display: none;
    }
  }

  &.mobile {
    @include transform(translate(-50%, -50%));
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    width: 100%;
    text-align: center;

    @include breakpoint(medium) {
      display: block;
    }

    .sidebar-enabled & {
      @include breakpoint(large) {
        display: block;
      }
    }
  }
}

.main-header--minimal {
  &:not(.main-header--centered) nav {
    .live-search-visible & {
      pointer-events: none;
      opacity: 0;
    }
  }

  .social-links {
    .live-search-visible & {
      pointer-events: none;
      opacity: 0;
    }
  }

  .tool-container > :not(.live-search) {
    .live-search-visible & {
      pointer-events: none;
      opacity: 0;
    }
  }
}

.main-header nav {
  border-top: 1px solid $navigation-border;
  opacity: 1;
  transition: opacity $transition--short $transition--easing;

  &.bordered { border-bottom: 1px solid $navigation-border; }
}

.main-header--minimal nav.compact {
  display: none;

  @media screen and (max-width: 1200px) { display: block; }
}

.main-header--centered:not(.main-header--minimal) nav.full > ul {
  text-align: center;
}

// Align left-most link to the left edge of the content, unless
// it has a dropdown
.main-header--normal,
.main-header--expanded {
  &:not(.main-header--centered) .main-header--nav-links {
    margin-left: -23px;

    > li.first.dropdown {
      margin-left: 23px;
    }
  }
}

.main-header nav.full {
  position: relative;
  z-index: 1000;

  &.multi-line {
    text-align: center;

    &::before {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      display: block;
      height: 1px;
      background-color: $primary-border-color;
      content: "";
    }
  }

  &.compress {
    .nav-item {
      > .label {
        padding: 25px 15px;

        .main-header--minimal & {
          padding: 15px;
        }
      }

      &.dropdown > a,
      &.has-mega-nav > a {

        .icon {
          right: 12px;
          line-height: 14px;
        }
      }
    }
  }

  .nav-item {
    @extend %icon--small;
    position: relative;
    display: inline-block;
    text-align: left;
    transition: $transition--short $transition--easing color,
                $transition--short $transition--easing background-color,
                $transition--short $transition--easing border;

    svg {
      margin-left: 6px;
    }

    > .label {
      @extend %nav-divider, %uc-title;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      font-size: $font-size--nav - 1px;
      color: $nav-link-color;
      transition: color $transition--short $transition--easing;

      &:hover {
        color: $nav-link-color-hover;
      }

      &::before,
      &::after {
        transition: $transition--short $transition--easing color,
                    $transition--short $transition--easing background-color,
                    $transition--short $transition--easing border,
                    $transition--short $transition--easing opacity;
      }

      &::after {
        position: absolute;
        top: 0;
        left: -1px;
        width: 1px;
        height: 100%;
        background-color: $nav-background-color;
        content: "";
        opacity: 0;
      }
    }

    &.last a::before {
      display: none;
    }

    &.dropdown {
      position: relative;

      > .label {
        &::after {
          position: absolute;
          top: 0;
          left: -1px;
          width: 1px;
          height: 100%;
          background-color: $nav-background-color;
          content: "";
        }


      }
    }

    .dropdown:hover {
      .dropdown-wrap {
        pointer-events: all;
        opacity: 1;
      }
    }

    &.dropdown:hover,
    &.has-mega-nav.active {
      background-color: $nav-background-color;

      > .label {
        color: $nav-link-dropdown-color;

        &::before {
          background-color: $nav-background-color;
        }

        &::after {
          opacity: 1;

          .main-header--minimal & { display: none; }
        }
      }

      > .dropdown-wrap {
        pointer-events: all;
        opacity: 1;
      }
    }

    .icon {
      position: absolute;
      top: 12px;
      right: 22px;
    }

    .dropdown-wrap {
      position: absolute;
      top: 100%;
      left: -1px;
      z-index: 1000;
      width: 218px;
      padding-top: 15px;
      padding-bottom: 18px;
      pointer-events: none;
      background-color: $nav-background-color;
      opacity: 0;
      transition: $transition--short $transition--easing opacity;

      .main-header--minimal & { left: 0; }

      &.child {
        top: -15px;
        right: -218px;
        left: auto;
      }

      &.dropdown-right {
        right: 0;
        left: auto;

        &.child {
          right: 218px;
        }
      }

      .dropdown-item {
        position: relative;

        &:hover {
          > a .label, > a .icon { @include opacity(1); }
        }
      }

      .dropdown-item a {
        @include font($font-body);
        display: block;
        padding: 4px 42px 7px 25px;
        font-size: $font-size--body;
        transition: opacity $transition--short $transition--easing;

        &:hover { @include opacity(0.7); }

        .label, .icon {
          @include opacity(1);
          color: $nav-link-dropdown-color;
          background-color: $nav-background-color;
        }
      }
    }
  }
}

.mega-nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1500;
  margin-top: 1px;
  overflow: hidden;
  pointer-events: none;
  background-color: $nav-background-color;
  opacity: 0;
  box-shadow: 0 1px 0 0 rgba($nav-background-color, 0.2);
  transition: $transition--short $transition--easing opacity;

  &.visible {
    pointer-events: all;
    opacity: 1;
  }

  .main-header--minimal & {
    margin-top: 0;
  }

  .mega-nav-wrap {
    position: relative;
    left: -5px;
    padding: 0;
  }

  .mega-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .back {
    @include transform(scale(1.05));
    @include opacity(0.7);
    position: absolute;
    top: 47px;
    left: 50%;
    z-index: 5000;
    display: none;
    width: 0;
    height: 0;
    margin-left: -2px;
    border-right: 5px solid transparent;
    border-bottom: 10px solid $nav-link-dropdown-color;
    border-left: 5px solid transparent;

    &:hover {  @include opacity(1); }
  }

  .list {
    display: inline-block;
    align-content: stretch;
    flex-grow: 1;
    flex-shrink: 0;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 25px;
    margin-bottom: 30px;
    vertical-align: top;
    background-color: $nav-background-color;

    &.one-col {
      width: 100%;

      .list-item {
        width: 150px;
      }
    }

    // Less than perfect ratios required for IE
    &.two-col { flex-basis: 45%; }
    &.three-col { flex-basis: 28%; }

    &.two-columns {
      flex-basis: 100%;
    }

    .label {
      @extend %uc-title;
      width: 100%;
      padding: 10px 0 10px;
      margin: 0 0 16px;
      font-size: $font-size--nav;
      color: $nav-link-dropdown-color;
      border-bottom: 1px solid rgba($nav-link-dropdown-color, 0.15);

      a { color: $nav-link-dropdown-color; }
    }

    .list-item {
      display: inline-block;
      width: 50%;
      padding-right: 10px;
      margin: 0 -4px 9px 0;
      vertical-align: top;

      &.one-column {
        display: block;
        width: 100%;
      }

      a {
        display: inline-block;
        min-width: 100px;
        font-size: $font-size--body;
        color: $nav-link-dropdown-color;
        background-color: $nav-background-color;
        transition: opacity $transition--short $transition--easing;

        &:hover { @include opacity(0.7); }
      }

      a.show-more { @include opacity(1); }

      .more-icon {
        position: relative;
        top: -1px;
        margin-left: 6px;
        font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 100;
      }
    }
  }

  .expanded-list,
  .category-list {
    position: relative;
    display: none;

    .list {
      display: none;
      width: 100%;
      margin-left: 0;

      &.active { display: block; }
    }

    .list-item { width: 150px; }
  }
}

.mobile-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5000;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  pointer-events: none;
  background-color: rgba($nav-background-color, 0);
  content: "";
  opacity: 0;
  transform: translateX(-100%);
  transition: $transition--long $transition--easing background-color,
              0s $transition--long $transition--easing transform,
              0s $transition--long $transition--easing opacity;

  .mobile-dropdown--wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    max-width: 350px;
    background-color: $nav-background-color;
    transform: translateX(-100%);
    transition: $transition--long $transition--easing transform;
  }

  &.active .mobile-dropdown--wrapper {
    transform: translateX(0);

    .list.primary {
      -webkit-overflow-scrolling: touch;
    }
  }

  &.active {
    pointer-events: all;
    background-color: rgba($color--black, 0.7);
    opacity: 1;
    transform: translateX(0);
    transition: $transition--long $transition--easing background-color,
              0s $transition--easing opacity;
  }

  .currency-switcher {
    color: $nav-link-dropdown-color;
  }

  .mobile-dropdown--content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: 100%;
  }

  .mobile-dropdown--tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 14px 18px;
    margin: 0 auto;
  }

  .mobile-dropdown--close {
    position: relative;
    cursor: pointer;

    .icon-close {
      width: 14px;
      height: 14px;
      color: $nav-link-dropdown-color;
    }
  }

  .list {
    &.primary {
      width: 100%;
      overflow-y: auto;
      background-color: $nav-background-color;
    }

    &.secondary,
    &.tertiary {
      display: none;
      overflow: hidden;
    }

    &.secondary {
      background-color: $mobile-nav-secondary-color;

      .list-item a { background-color: $mobile-nav-secondary-color; }
    }

    &.tertiary {
      background-color: $mobile-nav-tertiary-color;

      .list-item a {
        @include font($font-body);
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 24px;
        font-size: 14px;
        letter-spacing: 0;
        text-transform: none;
        background-color: $mobile-nav-tertiary-color;
      }

      .list-item:first-child a {
        padding-top: 20px;
      }

      .list-item:last-child a {
        padding-bottom: 20px;
      }
    }

    &.quaternary {
      display: none;
      background-color: $mobile-nav-quaternary-color;

      .list-item a { background-color: $mobile-nav-quaternary-color; }
    }

    .list-item {
      width: 100%;

      a {
        @extend %uc-title;
        position: relative;
        display: block;
        padding: 16px 18px;
        margin: 0 auto;
        font-size: $font-size--nav - 1px;
        color: $nav-link-dropdown-color;
      }

      .icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 100%;
        text-align: center;
        transition: $transition--short $transition--easing background-color;
        -webkit-tap-highlight-color: rgba($nav-link-dropdown-color, 0.2);

        svg {
          max-width: 100%;
          max-height: 100%;
        }

        &:active {
          background-color: rgba($nav-link-dropdown-color, 0.1);
        }
      }

      &.expanded > a {
        .plus,
        .minus {
          transform: translate(-50%, -50%) rotate(0deg);
        }

        .plus {
          opacity: 0;
        }

        .minus {
          opacity: 1;
        }
      }

      .plus,
      .minus {
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        width: 11px;
        height: 11px;
        transform: translate(-50%, -50%) rotate(-90deg);
        transition: $transition--medium $transition--easing opacity,
                    $transition--medium $transition--easing transform;
        transform-origin: 50% 65%;
      }

      .minus {
        opacity: 0;
      }
    }
  }

  .social-links {
    justify-content: flex-start;
    padding: 20px 18px;

    &::before {
      display: none;
    }
  }
}

.rte {
  font-size: $font-size--body;;

  p,
  blockquote,
  h1,
  h2,
  ul,
  ol {
    margin: 0 0 20px;
  }

  p,
  blockquote,
  li,
  a {
    font-size: $font-size--body;
    line-height: 22px;
  }

  > table:first-child {
    margin-top: 0;
  }

  > p:first-child .image-wrap {
    margin-top: 6px;
  }

  ul,
  ol {
    padding-left: 20px;
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  li {
    margin: 8px 0;
  }

  blockquote {
    @include font($font-body);
    padding-left: 20px;
    margin-left: 0;
    color: $light-text-color;
    border-left: 2px solid $secondary-border-color;
  }

  img {
    max-width: 100%;
  }

  iframe,
  object,
  embed {
    border: 0;
    outline: 0;
  }

  a {
    color: $accent-color;
    &:hover { color: $accent-color-hover; }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 7000;
    color: $title-color;
  }

  h1 {
    margin: 40px 0 20px;
    font-size: 28px;
  }

  h2 {
    margin: 40px 0 20px;
    font-size: 21px;
  }

  h3 {
    margin: 40px 0 18px;
    font-size: 18px;
  }

  h4 {
    margin: 40px 0 16px;
    font-size: 16px;
  }

  h5 {
    margin: 40px 0 14px;
    font-size: 14px;
  }

  h6 {
    margin: 40px 0 12px;
    font-size: 12px;
  }

  hr {
    width: 100%;
    height: 1px;
    margin: 40px 0;
    background-color: $secondary-border-color;
    border: 0;
    outline: 0;

    @include breakpoint(small) {
      margin: 20px 0;
    }
  }

  .caption {
    @include font($font-body, $font-style: italic);
    font-size: $font-size--body;
    color: $light-text-color;
  }

  .image-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;

    img,
    svg {
      position: relative;
      z-index: -2;
      display: block;
    }
  }

  table {
    width: 100%;
    margin: 30px 0;
    border: 1px solid $primary-border-color;

    td, th {
      padding: 18px 20px;
      border: 1px solid $secondary-border-color;
    }

    thead td, thead th {
      background-color: $select-background-color;
    }
  }

  .tabs {
    display: block;
    width: 100%;
    padding: 0;
    margin: 10px 0 0;
    text-align: left;
    white-space: nowrap;
    list-style: none;
    border-bottom: 1px solid $primary-border-color;

    li {
      @extend %uc-title;
      display: inline-block;
      width: auto;
      padding: 0 0 12px;
      margin: 0 20px 0 0;
      font-size: 12px;
      color: $title-color;
      vertical-align: top;
      cursor: pointer;
      border-bottom: 1px solid transparent;
      opacity: 0.7;
      transform: translateY(1px);
      transition: $transition--short $transition--easing border-bottom,
                  $transition--short $transition--easing opacity;

      &.active {
        border-bottom: 1px solid $title-color;
        opacity: 1;
      }

      a {
        @include font($font-accent);
        display: block;
        height: 41px;
        padding: 0 16px;
        font-size: 14px;
        line-height: 42px;
        color: $accent-color;
        border-top: 1px solid transparent;
        border-right: 1px solid transparent;
        border-left: 1px solid transparent;

        &:hover {
          color: $title-color;
        }
      }

      &.active a {
        @include border-top-radius(4px);
        height: 42px;
        color: $text-color;
        background-color: $background-color;
        border-top: 1px solid $primary-border-color;
        border-right: 1px solid $primary-border-color;
        border-left: 1px solid $primary-border-color;
      }
    }


  }

  .tabs-content {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-align: left;
    list-style: none;

    > li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      margin: 30px 0 20px;
      pointer-events: none;
      opacity: 0;
      transition: $transition--short $transition--easing opacity;

      &.active {
        position: relative;
        pointer-events: all;
        opacity: 1;
        transition: $transition--short $transition--short $transition--easing opacity;
      }
    }
  }

}

.column-title {
  display: none;
}

table.mobile-layout {
  border-bottom: 0;

  .column-title {
    @include font($font-body, $font-weight: bolder);
    display: inline-block;
    width: 114px;
    padding-right: 23px;
    font-weight: 700;
  }

  thead {
    display: none;
  }

  tr td {
    display: block;
    width: 100%;
    text-align: left;
    border-top: 1px solid $primary-border-color !important;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;

    &:first-child {
      border-top: 0 !important;
    }

    &:last-child {
      border-bottom: 1px solid $primary-border-color !important;
    }
  }

  tr:nth-child(even) td {
    background: $select-background-color;
  }
}



.template-404 {
  .content {
    padding-bottom: 60px;
  }

  .message {
    width: 50%;
    margin: 40px 0;

    @include breakpoint(small) {
      width: 100%;
      margin-top: 0;
      text-align: center;
    }
  }
}

.customer {
  .empty {
    margin-top: 0;
  }

  .message {
    @include font($font-body, $font-style: italic);
    margin: 20px 0 50px;
    font-size: 14px;
    color: $light-text-color;
  }

  .page-title {
    @include breakpoint(small) {
      border-bottom: 1px solid $primary-border-color;
    }
  }

  .back-link {
    @include font($font-accent);
    display: none;
    margin-bottom: 20px;
    font-size: $font-size--body;
    color: $light-text-color;

    @include breakpoint(small) {
      display: inline-block;
    }
  }

  .header-link {
    float: right;
    margin-top: 20px;
    margin-left: -100%;
    font-size: $font-size--body;
    color: $light-text-color;
    text-decoration: underline;

    @include breakpoint(small) {
      display: inline-block;
      float: none;
      margin-top: 25px;
      margin-left: 0;
    }
  }

  .account-form {
    width: 38%;
    padding: 25px 0 100px;

    @include breakpoint(small) {
      width: 100%;
      padding: 10px 0 55px;
      text-align: center;
    }

    .error-message {
      width: 100%;
      height: auto;
      margin: 0 0 25px;
      text-align: center;

      @include breakpoint(small) {
        margin-top: 25px;
      }

      span {
        display: inline-block;
        margin-top: 12px 0;
      }
    }

    .field-wrap {
      margin-top: 20px;

      &.author {
        margin-top: 0;
      }

      label {
        @extend %label;

        @include breakpoint(small) {
          text-align: left;
        }
      }

      .field {
        width: 100%;
      }

      textarea {
        min-height: 210px;
      }
    }

    .submit-button {
      @extend %button--large;
      margin-top: 30px;

      @include breakpoint(small) {
        width: 100%;
        margin-top: 35px;
      }
    }

    .helper {
      @include font($font-accent);
      display: inline-block;
      margin: 0 0 8px 15px;
      font-size: $font-size--body;
      color: $light-text-color;
      vertical-align: bottom;

      @include breakpoint(small) {
        margin: 30px 0 0;
      }
    }

  }

  .table {
    width: 100%;
    // Margin-top should equal 50px when added to padding-top on table header
    margin-top: 28px;

    // @include breakpoint(small) {
    //   margin-bottom: 50px;
    // }

    th {
      @extend %uc-title;
      padding: 22px 2vw 16px;
      font-size: 12px;

      &.first {
        text-align: left;
        padding-left: 0;
      }

      &.last {
        text-align: right;
        padding-right: 0;
      }
    }

    td {
      @include font($font-accent);
      position: relative;
      padding: 28px 2vw;
      font-size: 14px;
      color: $text-color;
      text-align: center;
      vertical-align: middle;

      &.first {
        padding-left: 0;
        text-align: left;
      }

      &.last {
        padding-right: 0;
        text-align: right;
      }

      &::before {
        display: none;
        width: 25%;
        margin-right: 20px;
        color: $light-text-color;
        text-align: right;
      }
    }
  }

  .orders-history {
    th,
    td {
      width: 23%;

      &.first {
        width: 31%;
      }
    }
  }

  thead tr {
    border: 0;
  }

  tr {
    border-top: 1px solid $primary-border-color;
  }

  tr.last {
    border-bottom: 1px solid $primary-border-color;
  }
}

.customer.account {
  .content-wrap {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    min-height: 200px;
    margin: 50px 0 85px;

    @include breakpoint(small) {
      flex-direction: column;
    }
  }

  .title {
    @extend %uc-title;
    display: block;
    margin-bottom: 20px;
    font-size: 14px;

    @include breakpoint(small) {
      text-align: center;
    }
  }

  .account-info {
    padding-right: 30px;
    font-size: 14px;

    @include breakpoint(small) {
      width: 100%;
      padding-right: 0;
      margin-top: 50px;
      margin-bottom: 40px;
      text-align: center;
    }

    .name,
    .email,
    .address,
    .city,
    .country,
    .view-addresses {
      display: block;
    }

    .name {
      @include font($font-headings);
      font-size: 18px;
      margin-bottom: 12px;
      color: $title-color;

      @if $font-headings-capitalize {
        font-size: calc(18px * 0.875) !important;
        text-transform: uppercase;
      }
    }

    .email {
      margin-bottom: 25px;

      a {
        font-size: $font-size--body;
        color: $accent-color;
      }
    }

    .address-wrap {
      margin-bottom: 25px;

      span + span {
        margin-top: 2px;
      }
    }

    .view-addresses {
      @include font($font-accent);
      font-size: $font-size--button;
      color: $light-text-color;
    }

  }

  .order-history,
  .orders-history {
    width: 72%;

    @include breakpoint(small) {
      width: 100%;
    }
  }

  .order-history-title {
    color: $title-color;
    @include breakpoint(small) {
      text-align: center;
    }
  }
}

.customer.addresses {
  padding-bottom: 80px;

  @include breakpoint(small) {
    padding-bottom: 50px;
  }

  .address-list {
    width: 75%;
    padding: 15px 0 0;

    @include breakpoint(small) {
      width: 100%;
      padding-top: 0;
      text-align: center;
    }

    .list li {
      padding: 35px 0;
      border-bottom: 1px solid $secondary-border-color;

      &.last {
        padding-bottom: 40px;
      }
    }

    .name {
      @include font($font-headings);
      margin: 0 0 25px;
      font-size: 14px;
      color: $title-color;

      @if $font-headings-capitalize {
        font-size: calc(14px * 0.875) !important;
        text-transform: uppercase;
      }

      .default {
        @include font($font-headings, $font-weight: lighter, $font-family: false);
        margin-left: 2px;
        font-size: $font-size--body;
        color: $light-text-color;
      }
    }

    .address-1, .address-2, .address-3 {
      margin: 3px 0;
      font-size: 14px;
    }

    .action {
      display: block;
      margin-top: 25px;

      a {
        @include font($font-accent);
        font-size: $font-size--body;
        color: $light-text-color;

        &:first-child {
          margin-right: 15px;
        }
      }
    }
  }

  .add-new {
    display: block;
    margin-top: 45px;
    font-size: 14px;
    color: $accent-color;

    @include breakpoint(small) {
      text-align: center;
    }
  }

  .add-address {
    width: 75%;
    padding-top: 40px;
    margin-top: 45px;
    border-top: 1px solid $primary-border-color;

    @include breakpoint(small) {
      width: 100%;
    }

    &.new-user {
      display: block !important;
      padding-top: 0;
      border-top: 0;
    }
  }

  .edit-add-address {
    @include breakpoint(small) {
      text-align: left;
    }

    .wrap {
      width: 75%;
      margin-bottom: 22px;

      @include breakpoint(small) {
        width: 100%;
      }

      > label {
        @extend %label;
      }

      .field {
        display: block;
        width: 100%;
      }

      .styled-select {
        top: 5px;
        display: block;
        width: 330px;
        height: 32px;

        @include breakpoint(small) {
          width: 100%;
        }
      }
    }

    .default-wrap {
      @include font($font-accent);
      margin: 35px 0 45px;
      font-size: $font-size--body;
      color: $light-text-color;

      input, span {
        display: inline-block;
      }

      input {
        margin-right: 4px;
      }
    }

    .submit-wrap {
      span {
        @include font($font-accent);
        margin-left: 15px;
        font-size: $font-size--body;
        color: $light-text-color;

        a {
          color: $text-color;
        }
      }

      .action-button {
        @extend %button--large;
      }

      .submit-wrap {
        @include breakpoint(small) {
          text-align: center;

          .action-button {
            width: 100%;
          }

          span {
            display: block;
            margin: 25px 0 15px;
          }
        }

        span {
          @include font($font-accent);
          margin-left: 15px;
          font-size: $font-size--body;
          color: $light-text-color;

          a {
            color: $text-color;
          }
        }
      }
    }
  }
}

// Breakpoints
$pxs-ab-breakpoint-tablet: 768px !default;

// Horizontal spacing
$pxs-ab-gutter-small: 15px !default;
$pxs-ab-gutter-large: 30px !default;

// Vertical padding
$pxs-ab-space: 16px !default;

// Typography
$pxs-ab-font-size: 14px !default;
$pxs-ab-line-height: 1.5 !default;

.pxs-announcement-bar {
  display: block;
  padding: $pxs-ab-space $pxs-ab-gutter-small;
  font-size: $pxs-ab-font-size;
  line-height: $pxs-ab-line-height;
  text-align: center;
  text-decoration: none;

  @media (min-width: $pxs-ab-breakpoint-tablet) {
    padding-right: $pxs-ab-gutter-large;
    padding-left: $pxs-ab-gutter-large;
  }  
}
#shopify-section-free-shipping-bar {
  left: 0;
  top: 0;
  width: 100%;
  animation-duration: 0.5s;
  transition: 0.5s;
  &.is-fixed{
    position: fixed;
    z-index: 11111;
    animation-name: stickySlideDown;
    transition: none;
  }
}
@keyframes stickySlideDown {
  0% {
    opacity: 0.7;
    transform: translateY(-100%);
    }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.pxs-announcement-bar-text-desktop {

  .pxs-announcement-bar-text-mobile + & {
    display: none;

    @media (min-width: $pxs-ab-breakpoint-tablet) {
      display: block;
    }
  }
}

.pxs-announcement-bar-text-mobile {
  @media (min-width: $pxs-ab-breakpoint-tablet) {
    display: none;
  }
}


.pxs-announcement-bar {
  html.header-layout-minimal.live-search-visible & {
    @include breakpoint(minimal) {
      display: none;
    }
  }

  html:not(.header-layout-minimal).live-search-visible & {
    @include breakpoint(small) {
      display: none;
    }
  }
}

.pxs-announcement-bar-text-desktop {
  display: inline-block;
  max-width: $max-width;
  margin: 0 auto;
}

$local-blog-sidebar-bp: 950px;
$local-article-max-width: 760px;

.template-article {
  .page-title {
    @include breakpoint(small) {
      padding: 30px 0 20px;

      .label {
        font-size: 22px;
      }
    }
    .blog-sidebar-active & {
      @media screen and (max-width: $local-blog-sidebar-bp) {
        padding: 30px 0 20px;

        .label {
          font-size: 22px;
        }
      }
    }

  }
}

.blog {
  display: flex;
  justify-content: space-between;

  @include breakpoint(small) {
    flex-direction: column;
  }
  .blog-sidebar-active & {
    @media screen and (max-width: $local-blog-sidebar-bp) {
      flex-direction: column;
    }
  }
}

.blog-articles,
.blog-article {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.blog-sidebar {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  width: 20%;
  padding-left: 78px;
  margin-top: 45px;

  @include breakpoint(small) {
    width: 100%;
    padding-top: 28px;
    padding-left: 0;
    margin-top: 0;
    text-align: center;
    border-top: 1px solid $primary-border-color;
  }

  .blog-sidebar-active & {
    @media screen and (max-width: $local-blog-sidebar-bp) {
      width: 100%;
      padding-top: 28px;
      padding-left: 0;
      margin-top: 0;
      text-align: center;
      border-top: 1px solid $primary-border-color;
    }
  }

  > div {
    padding-top: 28px;
    margin-top: 45px;
    border-top: 1px solid $primary-border-color;

    &:first-of-type {
      padding-top: 0;
      margin-top: 0;
      border-top: 0;
    }

    @include breakpoint(small) {
      padding-right: 5%;
      padding-left: 5%;
      margin-top: 28px;
    }
  }
}

.blog-sidebar-recentposts-title,
.blog-sidebar-tags-title {
  @extend %uc-title;
  display: block;
  margin-bottom: 30px;
  font-size: 14px;
  color: $title-color;
}

.blog-sidebar-recentposts-posts {
  display: flex;
  flex-direction: column;
}

.blog-sidebar-recentposts-post {
  display: flex;
  flex-direction: column;
  margin-bottom: 26px;

  &:last-child {
    margin-bottom: 0;
  }
}

.blog-sidebar-recentposts-post-title {
  @include font($font-body);
  margin-bottom: 6px;
  font-size: 16px;
  color: $text-color;

  a {
    color: inherit;
  }
}

.blog-sidebar-recentposts-post-date {
  @include font($font-accent);
  font-size: 13px;
  color: $light-text-color;
}

.blog-sidebar-tags-tag {
  margin-bottom: 6px;

  a {
    font-size: 15px;
    color: inherit;

    &:hover {
      color: $accent-color;
    }

    span {
      @include font($font-accent);
      margin-left: 2px;
      font-size: 12px;
      color: $light-text-color;
    }
  }
}

.article {
  display: flex;
  justify-content: space-between;
  padding-top: 45px;
  padding-bottom: 55px;
  border-bottom: 1px solid $primary-border-color;

  @include breakpoint(small) {
    flex-direction: column;
    padding-top: 30px;

    &:first-of-type {
      border-top: 1px solid $primary-border-color;
    }
  }

  .home-section & {
    border-bottom: none;
  }

  .blog-sidebar-active & {
    @media screen and (max-width: $local-blog-sidebar-bp) {
      flex-direction: column;
      padding-top: 30px;
    }
  }

  &:last-of-type {
    border-bottom: 0;

    @include breakpoint(large) {
      padding-bottom: 0;
    }
  }
}

.article-meta {
  display: flex;
  flex-direction: column;
  order: 0;
  width: 11%;

  @include breakpoint(small) {
    align-items: center;
    justify-content: center;
    order: 1;
    width: 100%;
    text-align: center;
  }

  .blog-sidebar-active & {
    width: 13.75%;

    @media screen and (max-width: $local-blog-sidebar-bp) {
      align-items: center;
      justify-content: center;
      order: 1;
      width: 100%;
      // padding-top: 50px;
      padding-right: 0;
      text-align: center;
    }
  }

  > div {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 23px;

    &::after {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 54px;
      border-bottom: 1px solid $primary-border-color;
      content: "";

      @include breakpoint(small) {
        left: 50%;
        transform: translateX(-50%);
      }

      .blog-sidebar-active & {
        @media screen and (max-width: $local-blog-sidebar-bp) {
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }

    &:nth-child(2),
    &:nth-child(3) {
      @include breakpoint(small) {
        padding-top: 30px;
        margin-top: 40px;
      }

      .blog-sidebar-active & {
        @media screen and (max-width: $local-blog-sidebar-bp) {
          padding-top: 30px;
          margin-top: 40px;
        }
      }

      &::before {
        position: absolute;
        top: 0;
        left: 50%;
        display: none;
        width: 54px;
        border-bottom: 1px solid $primary-border-color;
        content: "";
        transform: translateX(-50%);

        @include breakpoint(small) {
          display: block;
        }

        .blog-sidebar-active & {
          @media screen and (max-width: $local-blog-sidebar-bp) {
            display: block;
          }
        }
      }
    }

    &:last-of-type {
      padding-bottom: 0;
      margin-bottom: 0;

      &::after {
        display: none;
      }
    }
  }

  .sharethis-title {
    font-size: 14px;
  }

  .sharethis-trigger {
    svg {
      width: 14px;
      height: 17px;
      margin-right: 8px;
    }
  }
}

.article-author,
.article-share {
  display: flex;
  flex-direction: column;
}

.article-author {
  .article-header & {
    display: none;
  }

  @include breakpoint(small) {
    display: none;

    .article-header & {
      display: flex;
      align-items: center;
      margin-top: 21px;
    }
  }

  .blog-sidebar-active & {
    @media screen and (max-width: $local-blog-sidebar-bp) {
      display: none;
    }
  }

  .blog-sidebar-active .article-header & {
    @media screen and (max-width: $local-blog-sidebar-bp) {
      display: flex;
      align-items: center;
      margin-top: 21px;
    }
  }
}

.article-author-avatar {
  display: block;
  width: 60px;
  height: 60px;
  margin-bottom: 25px;
  overflow: hidden;
  border-radius: 30px;
}

.article-author-image {
  display: block;
  width: 60px;
  height: 60px;
}

.article-author-writtenby,
.article-tags-filedunder,
.article-comments-discussion {
  @extend %uc-title;
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  color: $light-text-color;
}

.article-author-name,
.article-tags-tags,
.article-comments-count {
  @include font($font-accent);
  font-size: 14px;
}

.article-tags {
  display: flex;
  flex-direction: column;
  color: $text-color;

  a {
    color: inherit;
  }
}

.article-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  order: 1;
  width: 80%;
  padding-left: 71px;

  @include breakpoint(small) {
    justify-content: center;
    order: 0;
    width: 100%;
    padding-left: 0;
  }

  .blog-sidebar-active & {
    width: 75%;

    @media screen and (max-width: $local-blog-sidebar-bp) {
      justify-content: center;
      order: 0;
      width: 100%;
      padding-left: 0;
    }
  }

  > * {
    max-width: $local-article-max-width;
    margin-left: 0;
    margin-right: 0;

    @include breakpoint(small) {
      max-width: none;
    }

    .blog-sidebar-active & {
      @media screen and (max-width: $local-blog-sidebar-bp) {
        max-width: none;
      }
    }
  }
}

.article-rte-continuereading {
  display: block;
}

.article-header {
  position: relative;
  margin-bottom: 33px;

  @include breakpoint(small) {
    padding-bottom: 30px;
    text-align: center;
    border-bottom: 1px solid $primary-border-color;
  }

  .blog-sidebar-active & {
    @media screen and (max-width: $local-blog-sidebar-bp) {
      padding-bottom: 30px;
      text-align: center;
      border-bottom: 1px solid $primary-border-color;
    }
  }
}

.article-title {
  @include font($font-headings);
  margin-bottom: 8px;
  font-size: 32px;
  color: $title-color;

  @include breakpoint(small) {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 28px;
  }

  .blog-sidebar-active & {
    @media screen and (max-width: $local-blog-sidebar-bp) {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
      font-size: 28px;
    }
  }

  a {
    color: inherit;

    &:hover {
      color: $accent-color;
    }
  }
}

.article-date {
  @extend %uc-title;
  font-size: 12px;
  color: $light-text-color;
}

.article-image {
  display: block;
  margin-bottom: 33px;

  img {
    display: block;
    max-width: 100%;
    max-height: 100%;

    @media screen and (max-width: $local-blog-sidebar-bp) {
      width: 100%;
    }
  }
}

.pagination {

  .blog-articles & {
    width: 76%;
    max-width: $local-article-max-width;
    margin-top: 50px;
    margin-left: 24%;

    @include breakpoint(small) {
      width: 100%;
      max-width: none;
      margin-top: 40px;
      margin-left: 0;
    }

    .blog-sidebar-active & {
      @media screen and (max-width: $local-blog-sidebar-bp) {
        width: 100%;
        max-width: none;
        margin: 40px auto;
      }
    }
  }
}

.comments-wrap {
  margin-top: 45px;
  padding-top: 28px;
  border-top: 1px solid $primary-border-color;

  .title {
    @extend %uc-title;
    margin-bottom: 30px;
    font-size: 14px;
    color: $title-color;

    .count {
      color: $light-text-color;
    }
  }
}

.comments {

  .date {
    @extend %uc-title;
    font-size: 12px;
    color: $light-text-color;
  }

  .comment {
    padding-bottom: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid $secondary-border-color;

    &.last {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }
  }

  .body {
    @include font($font-body);

    p {
      margin: 20px 0;
      font-size: 15px;
      line-height: 23px;
    }
  }

  .author {
    @include font($font-accent);
    font-size: 14px;
    color: $light-text-color;
  }
}

.comment-form {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;

  .field-wrap {
    width: 50%;

    &.body {
      width: 100%;
    }

    &.author {
      padding-right: 10px;
    }

    &.email {
      padding-left: 10px;
    }

    @include breakpoint(small) {
      &.author {
        padding-right: 7.5px;
      }

      &.email {
        padding-left: 7.5px;
      }
    }

    .blog-sidebar-active & {
      @media screen and (max-width: $local-blog-sidebar-bp) {
        &.author {
          padding-right: 7.5px;
        }

        &.email {
          padding-left: 7.5px;
        }
      }
    }

    @include breakpoint(phone) {
      width: 100%;

      &.author,
      &.email,
      .blog-sidebar-active &.author,
      .blog-sidebar-active &.email {
        padding: 0;
      }
    }

    > * {
      width: 100%;
    }

    textarea {
      height: 180px;
    }
  }

  .alert-message {
    width: 100%;
  }
}

.article-pagination--prev,
.article-pagination--next {
  @include font($font-accent);
  position: absolute;
  top: calc(50% - 15px);
  display: none;
  width: 18px;
  height: 18px;
  font-size: 14px;
  transform: translateY(-50%);

  @include breakpoint(small) {
    display: block;
    height: 16px;
    color: $light-text-color;
  }

  .blog-sidebar-active & {
    @media screen and (max-width: $local-blog-sidebar-bp) {
      display: block;
      color: $light-text-color;
    }
  }

  .svg-icon {
    width: 100%;
    height: 100%;
  }
}

.article-pagination--prev {
  left: 0;
}

.article-pagination--next {
  right: 0;
}

.article-meta {
  .article-pagination,
  .article-pagination--prev,
  .article-pagination--next {
    position: static;
    display: inline-block;
    width: auto;
    transform: translateY(0);

    @include breakpoint(small) {
      display: none;
    }

    .blog-sidebar-active & {
      @media screen and (max-width: $local-blog-sidebar-bp) {
        display: none;
      }
    }
  }

  .sep {
    padding-right: 2px;
    padding-left: 2px;
  }
}

.comments-wrap {
  .field-wrap,
  input[type="submit"] {
    margin-top: 20px;
  }

  textarea,
  input[type="text"] {
    @extend %input;
    cursor: text;
  }

  label {
    @extend %label;
  }
}

$local-transition-function: cubic-bezier(0.4, 0, 0.2, 1);;
$local-transition-duration: 350ms;

.template-cart {
  .breadcrumb-navigation {
    padding: 45px 0 5px;
  }

  .breadcrumb-navigation,
  .page-title {
    text-align: center;
  }

  .page-title {
    border-bottom: 0;
  }

  .table {
    width: 100%;

    @include breakpoint(small) {
      margin-top: 0;
    }

    .error-message {
      padding: 0;
      margin-top: 8px;
      background-color: transparent;
      border: 0;
    }

    .cart-item {
      transition: opacity $local-transition-duration $local-transition-function;
    }

    .faded {
      pointer-events: none;
      opacity: 0.1;
    }

    th {
      @extend %uc-title;
      padding: 22px 2vw 16px;
      font-size: 12px;

      @include breakpoint(small) {
        display: none;
      }

      &.first {
        text-align: left;
        padding-left: 0;
      }

      &.last {
        padding-right: 0;
      }
    }

    td {
      position: relative;
      padding: 25px 2vw;
      vertical-align: middle;
      border-top: 1px solid $primary-border-color;

      @include breakpoint(small) {
        border-top: 0;
      }

      &.first {
        padding-left: 0;
      }

      &.last {
        padding-right: 0;
      }

      &.product-image {
        width: 13.4%;
        grid-area: image;

        @include breakpoint(small) {
          width: 100%;
          text-align: left;
        }

        .image-wrap {
          .image {
            position: relative;
            display: inline-block;
            width: 100%;

            .outline {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              border: 1px solid rgba($color--black, 0.1);
            }

            img {
              width: 100%;
            }
          }
        }
      }

      &.product-item {
        width: 42.4%;
        font-size: 1rem;
        vertical-align: middle;
        grid-area: details;

        @include breakpoint(small) {
          display: block;
          width: 100%;
          text-align: left;
          padding-bottom: 20px;
          padding-left: 20px;
          align-self: center;
        }

        .label {
          display: block;

          &.vendor {
            @extend %uc-title;
            margin-bottom: 3px;
            font-size: 11px;
            color: $light-text-color;
          }

          &.title {
            @include font($font-headings);
            margin-bottom: 6px;
            font-size: 21px;
            color: $title-color;

            a {
              color: $accent-color;

              &:hover {
                color: $accent-color-hover;
              }
            }

            @if $font-headings-capitalize {
              text-transform: uppercase;
              font-size: calc(21px * 0.875) !important;
            }
          }

          &.variant {
            @include font($font-accent);
            font-size: 13px;
            color: $light-text-color;
          }
        }
      }

      &.price {
        @include font($font-accent);
        width: 14.7%;
        font-size: 15px;
        grid-area: price;

        @include breakpoint(small) {
          width: 100%;
          padding-top: 12px;
          padding-left: 0;
          text-align: left;
          border-top: 1px solid transparentize($primary-border-color, 0.35);
        }

        @include breakpoint(phone) {
          padding-bottom: 12px;
          padding-left: 0;
        }
      }

      &.quantity {
        width: 14.7%;
        grid-area: quantity;

        @include breakpoint(small) {
          width: 100%;
          padding-top: 12px;
          text-align: left;
          border-top: 1px solid transparentize($primary-border-color, 0.35);
          padding-left: 20px;
        }

        .field {
          width: 54px;
          height: 36px;
          padding: 10px 2px 10px 10px;
        }
      }

      &.total {
        @include font($font-accent);
        width: 14.7%;
        font-size: 15px;
        grid-area: total;

        @include breakpoint(small) {
          width: 100%;
          padding-top: 12px;
          border-top: 1px solid transparentize($primary-border-color, 0.35);
        }
      }

      &::before {
        display: none;
        width: 25%;
        margin-right: 30px;
        font-size: 14px;
        color: $light-text-color;
        text-align: right;

        @include breakpoint(small) {
          display: inline-block;
          vertical-align: top;
        }
      }
    }
  }

  .item-properties {
    @include font($font-accent);
    margin-top: 15px;
    font-size: $font-size--body;
  }

  .item-property {
    margin-top: 5px;
  }
}

.cart {
  display: flex;
  flex-direction: column;

  .cart-table {
    order: 0;
  }

  .cart-tools {
    order: 1;
  }

  .cart-shipping-calculator {
    order: 2;
  }
}

.cart-tools {
  padding-top: 36px;
  border-top: 1px solid $primary-border-color;

  .cart-shipping-calculator ~ & {
    padding-bottom: 40px;
    border-bottom: 1px solid $secondary-border-color;
  }

  .instructions {
    float: left;
    width: 48.5%;

    @include breakpoint(small) {
      display: block;
      width: 100%;
      margin-bottom: 35px;
    }

    p {
      margin: 0 0 15px;
    }

    .field {
      width: 100%;
      min-height: 86px;
    }
  }

  .totals {
    float: right;
    width: 48.5%;
    text-align: right;

    @include breakpoint(small) {
      width: 100%;
      text-align: left;
    }

    .price {
      @include font($font-accent);
      margin: 0;
      font-size: 24px;
      color: $title-color;
    }

    .message {
      @include font($font-body);
      margin-top: 7px;
      font-size: 14px;
      color: $light-text-color;
    }

    .checkout {
      width: 100%;
      padding-top: 20px;

      .action-button {
        margin-bottom: 10px;

        @include breakpoint(small) {
          width: 100%;
        }
      }
    }
  }
}

.cart-update {
  display: none;
}

.cart-item {
  @include breakpoint(small) {
    display: grid;
    width: 100%;
    grid-template-areas:  "image details details"
                          "price quantity total";
    grid-template-columns: percentage(1/3) percentage(1/3) percentage(1/3);
    border-top: 1px solid $primary-border-color;
    padding-bottom: 30px;
  }
}

.cart-item-original-price,
.cart-item-final-price {
  display: block;
}

.cart-item-label-mobile {
  display: none;

  @include breakpoint(small) {
    @include font($font-accent);
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: $light-text-color;
  }
}

.cart-item-column-price,
.cart-item-column-quantity,
.cart-item-column-total {
  text-align: right;
}

.cart-item-quantity {
  display: block;
  margin-left: auto;

  @include breakpoint(small) {
    margin-left: 0;
  }
}

.cart-item-remove {
  @include font($font-accent);
  display: block;
  margin-top: 7px;
  font-size: 14px;
  text-decoration: underline;
}

.cart-submit {
  @extend %button--large;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;

  svg {
    margin: -10px 8px -10px 0;
  }
}


.cart-item-discounts {
  font-size: 13px;
  color: $accent-color;

  li {
    @include font($font-accent);
    margin-top: 0.5rem;
  }

  .icon-sale-tag {
    width: 11px;
    height: 11px;
    margin-right: 0.15rem;
    margin-bottom: -1px;
  }
}

.cart-discounts {
  @include font($font-accent);
  margin-bottom: 20px;
  color: $accent-color;

  .icon-sale-tag {
    width: 12px;
    height: 12px;
    margin-right: 0.15rem;
    margin-bottom: -1px;
  }
}

.cart-discount {
  display: flex;
  justify-content: flex-end;

  @include breakpoint(small) {
    justify-content: space-between;
  }

  &:not(:first-child) {
    margin-top: 0.5rem;
  }
}

.cart-discount-price {
  flex-shrink: 0;
  padding-left: 30px;
}

.cart-item-original-price + .cart-item-final-price {
  color: $accent-color;
}

[data-shopify-buttoncontainer] {
  justify-content: flex-end;

  @include breakpoint(small) {
    justify-content: center;
  }
}

.template-collection {
  .page-title {
    position: relative;
    white-space: nowrap;

    .label {
      display: inline;
      white-space: normal;

      @if $font-headings-capitalize {
        position: relative;
        top: 4px;
      }

      @include breakpoint(small) {
        display: block;
      }
    }

    .tags-wrap {
      display: inline-block;
      margin-top: 18px;
      vertical-align: top;

      @include breakpoint(small) {
        margin-top: 30px;
      }

      &.preload {
        position: absolute;
        left: -99999px;
      }
    }

    .tags {
      position: relative;
      display: inline-block;
      padding-left: 16px;
      margin-left: 28px;
      vertical-align: top;

      @include breakpoint(small) {
        display: none !important;
      }

      &::before {
        position: absolute;
        top: -12px;
        bottom: -8px;
        left: 0;
        width: 1px;
        background: $secondary-border-color;
        content: "";
      }

      .tag {
        display: none;
        margin: 0 12px;
        font-size: 14px;

        &.show {
          display: inline-block;
        }

        a {
          color: $title-color;

          &:hover {
            color: $accent-color;
          }
        }
      }
    }
  }

  .collection-header {
    float: left;
    width: 100%;

    .description {
      max-width: 90%;
      margin-top: 50px;
      margin-right: auto;
      margin-left: auto;
      text-align: center;

      @include breakpoint(small) {
        float: none;
        width: 100%;
        padding-right: 0;
        margin-top: 0;
        text-align: center;
      }

      @media screen and (min-width: 400px) {
        max-width: 80%;
      }

      @media screen and (min-width: 800px) {
        max-width: 60%;
      }

      @media screen and (min-width: 1100px) {
        max-width: 550px;
      }
    }

    .select-wrapper select {
      @include breakpoint(small) {
        box-sizing: border-box;
      }
    }

    .pagination {
      float: right;
      text-align: right;

      @include breakpoint(small) {
        display: none;
      }
    }
  }

  .product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 50px 0 0;
    margin-left: 0;

    @media screen and (max-width: 940px) {
      min-width: calc(100%);
    }

    &.row-of-2 .product,
    &.row-of-2 .promo-block {
      width: calc(50% - 12px);
    }

    &.row-of-3 .product,
    &.row-of-3 .promo-block {
      width: calc(#{percentage(1 / 3)} - 30px);

      @media (max-width:1200px) {
        width: calc(#{percentage(1 / 3)} - 15px);
      }
    }

    &.row-of-4 .product,
    &.row-of-4 .promo-block {
      width: calc(25% - 20px);

      @media (max-width:1200px) {
        width: calc(#{percentage(1 / 3)} - 15px);
      }
    }

    @media (max-width: 940px) {
      &.row-of-2,
      &.row-of-3,
      &.row-of-4 {
        .product,
        .promo-block {
          width: calc(50% - 7.5px);
          min-width: calc(50% - 7.5px);
          text-align: left;
        }
      }
    }

    @include breakpoint(small) {
      &.row-of-2,
      &.row-of-3,
      &.row-of-4 {
        .product,
        .promo-block {
          margin-bottom: 35px;
        }
      }
    }

    .product {
      padding-left: 0;
      margin-bottom: 50px;

      @include breakpoint(large) {

        &.product-card-alt {
          margin: 0 0 30px;
        }
      }

      @include breakpoint(small) {
        margin: 0 0 35px;
      }
    }
  }

  .product-list-withsidebar {
    width: calc(80% - 30px);

    &.row-of-3 .product,
    &.row-of-3 .promo-block {
      width: calc(#{percentage(1 / 3)} - 15px);
    }

    @media screen and (max-width: 1200px) {
      &.row-of-4 .product,
      &.row-of-4 .promo-block {
        width: calc(#{percentage(1 / 3)} - 15px);
      }
    }

    @include breakpoint(small) {
      &.row-of-3 .product,
      &.row-of-4 .product {
        width: calc(50% - 7.5px);
      }
    }
  }

  .product-list-sidebar {
    order: -1;
    float: left;
    width: calc(20% - 30px);
    padding-top: 50px;
    font-size: 15px;

    @media (min-width: 1200px) {
      width: calc(20% - 30px);
    }

    @media(max-width: 940px) {
      padding-top: 0px;
    }

    a {
      .remove {
        padding-left: 10px;
        color: $light-text-color;
      }

      &:hover .remove {
        color: inherit;
      }
    }
  }

  @media(max-width: 940px) {
    .product-list-sidebar,
    .product-list-withsidebar {
      width: 100%;
    }
  }

  // @include breakpoint(mobile-nav) {
  //   .product-list-sidebar,
  //   .product-list-withsidebar {
  //     width: 100%;
  //   }
  // }

}

.sidebar-menu--desktop {
  display: block;

  @media(max-width: 940px) {
    display: none;
  }
}

.sidebar-menu--mobile {
  display: none;
  line-height: 25px;

  @media(max-width: 940px) {
    display: block;
    margin-top: 50px;
    text-align: center;
  }
}

.collection-heading-tools {
  padding-top: 20px;

  @media (min-width: 940px) {
    .collection-sorter .select-wrapper {
      margin-top: -20px;
      border: 0;

      // Hide dropdown icon
      &::before,
      &::after {
        display: none;
      }
    }

    .collection-sorter select {
      padding: 12px 0 0;
    }

    .sidebar-title {
      margin-bottom: 5px;
    }
  }

  @include breakpoint(small) {
    padding-top: 0;
  }
}

.collection-heading-details {
  margin-top: 30px;
  margin-bottom: 30px;
}

.collection-heading-details,
.collection-title {
  width: 100%;
  padding-top: 40px;

  @include breakpoint(mobile-nav) {
    padding-top: 35px;
  }

  .centering-wrapper & {
    margin: 0;
  }

  .description {
    max-width: 90%;
    margin-right: auto;
    margin-left: auto;

    @media screen and (min-width: 800px) {
      max-width: 60%;
    }

    @media screen and (min-width: 1100px) {
      max-width: 550px;
    }
  }

  .rte {
    padding-top: 20px;
    word-wrap: break-word;
    white-space: normal;

    :last-child {
      margin-bottom: 0;
    }
  }
}

.collection-title-header {
  @extend .content-area;

  @include breakpoint(full-down) {
    width: $content-width-tablet-desktop;
  }

  @include breakpoint(small) {
    width: 100%;
    min-width: 290px;
  }

  &.page-title .label {
    font-size: 11vw;
    line-height: 0.825em;
    color: $accent-color;
    word-break: break-word;

    @media screen and (max-width: 400px) {
      font-size: 42px;
    }

    @media screen and (min-width: 1400px) {
      font-size: 160px;
    }
  }
}

.collection-title .label,
.template-collection .page-title.collection-title .label {
  display: block;
  margin-top: 16px;
  font-size: 35px;
  color: $title-color;
}

.tools-wrap {
  display: inline-block;
  margin-right: 1em;

  select::-ms-expand {
    display: none;
  }

  svg { display: none; }
}

.collection-tools-left,
.collection-tools-right {
  width: 50%;
  white-space: nowrap;

  @media (max-width: 940px) {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;

    .tools-wrap {
      width: calc(50% - 7.5px);
      margin-right: 0;

      &:only-child {
        width: 100%;
      }
    }
  }

  @include breakpoint(phone) {
    flex-direction: column;

    .tools-wrap {
      width: 100%;
    }

    .sidebar-title:last-of-type {
      margin-top: 20px;
    }
  }
}

.collection-tools-left {
  @include font($font-accent);
  float: left;
  font-size: 16px;
}

.collection-tools-right {
  float: right;
}

.product-list-sidebar {
  @include font($font-accent);
  line-height: 25px;

  .select-wrapper select {
    box-sizing: border-box;
  }

  @media (min-width: 720px) and (max-width: 940px) {
    .collection-sorter {
      margin-top: 20px;
    }
  }

  @media (max-width: 940px) {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;

    .collection-sorter {
      width: calc(50% - 7.5px);

      &:first-child:nth-last-child(1),
      &:first-child:nth-last-child(2) {
        width: 100%;
      }
    }

    &.filters-enabled .collection-sorter {
      &:first-child,
      &:last-child {
        width: calc(50% - 7.5px);

        @include breakpoint(phone) {
          width: 100%;

          .sidebar-title {
            margin: 20px 0 10px;
            line-height: 1.4;
          }
        }
      }
    }
  }

  @include breakpoint(phone) {
    flex-direction: column;

    .collection-sorter {
      width: 100%;
    }
  }

  .collection-sorter {
    select::-ms-expand {
      display: none;
    }

    &:first-of-type .sidebar-title {
      margin-top: 0;
    }
  }
}

.sidebar-title {
  @extend %label, %uc-title;
  display: block;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 12px;
  color: $light-text-color;
  text-transform: uppercase;

  @include breakpoint(phone) {
    &:last-of-type,
    .collection-sorter + .collection-sorter & {
      margin-top: 20px;
    }
  }

  .collection-sorter + .collection-sorter & {
    margin-top: 20px;
  }

  .collection-sorter + .sidebar-menu--desktop & {
    margin-top: 30px;
  }

  @media (max-width: 940px) {
    margin-top: 0;

    .sidebar-active + .content-area & {
      margin-bottom: 6px;
    }

    .collection-sorter + .collection-sorter & {
      margin-top: 0;
    }
  }

  .collection-heading-tools & {
    margin-top: 5px;
  }

  @media (max-width: 480px) {
    .collection-sorter + .collection-sorter & {
      margin-top: 20px;
      margin-bottom: 10px;
      line-height: 1.4;
    }
  }
}

.collection-sidebar-menu {
  @include font($font-body);

  ul {
    @include font($font-body);
    margin-top: 4px;
    margin-bottom: 12px;
    margin-left: 8px;
    font-size: 14px;
    color: mix($background-color, $text-color, 20%);

    .sidebar-menu--mobile & {
      margin-left: 0;
    }
  }

  li {
    margin-bottom: 3px;
  }
}

.product-list-sidebar a,
.sidebar-menu--mobile a {
  color: inherit;
}

.faq {
  width: 90%;
  max-width: 680px;
  margin: 0 auto;

  @include breakpoint(small) {
    width: 100%;
  }
}

.faq-rte {
  padding: 60px 0;

  :last-child {
    margin-bottom: 0;
  }

  @include breakpoint(small) {
    padding: 10px 0 50px;
  }
}

.faq-triggers {
  padding: 0;
  margin: 0;
}

.faq-block {
  padding: 32px 0;

  &:not(:first-of-type) {
    border-top: 1px $primary-border-color solid;
  }

  @include breakpoint(small) {
    padding: 26px 0;
  }
}

.faq-heading,
.faq-content {
  width: 100%;
  margin: 0;
}

.faq-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  font-size: 21px;
  color: $title-color;
  cursor: pointer;

  &.active {
    .icon-down-arrow {
      opacity: 0;
    }

    .icon-minus {
      opacity: 1;
    }
  }

  @include breakpoint(small) {
    font-size: 18px;
  }
}

.faq-title {
  display: inline-block;
}

.faq-content {
  display: none;
  padding: 0;
  margin-top: 20px;
  overflow: auto;

  &.active {
    display: block;
  }
}

.faq-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: inherit;
  min-height: inherit;
  padding: 8px;

  .icon-down-arrow,
  .icon-minus {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 50%;
    transform: translate(-50%, -50%);
    fill: $title-color;
  }

  .icon-minus {
    opacity: 0;
  }
}

.template-gift-card {
  .btn {
    display: inline-block;
    padding: 1.5em;
    font-size: 0.875em;
    line-height: 1;
    letter-spacing: 0.1em;
    color: $color--white;
    text-transform: uppercase;
    vertical-align: baseline;
    background-color: #58686f;
    border-radius: 4px;
    zoom: 1;
  }

  .btn:hover {
    background-color: #414d53;
  }

  .wrap {
    width: 95%;
    max-width: 540px;
    margin: 0 auto;

    &::after {
      display: table;
      clear: both;
      content: "";
    }
  }

  @keyframes slideup {
    0% {
      opacity: 0;
      transform: translateY(2000px) rotate(10deg);
    }

    60% {
      opacity: 1;
      transform: translateY(-30px);
    }

    80% {
      transform: translateY(10px);
    }

    100% {
      transform: translateY(0) rotate(0deg);
    }
  }

  @keyframes popup {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }

    60% {
      opacity: 1;
      transform: translateY(-10px);
    }

    80% {
      transform: translateY(2px);
    }

    100% {
      transform: translateY(0);
    }
  }

  @keyframes container-slide {
    0% {
      opacity: 0;
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes fadein {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 100;
    }
  }

  header {
    padding: 3em 0;
    text-align: center;
    animation: fadein 0.5s ease-in-out both 0.4s;
  }

  .shop-title {
    @include font($font-headings);
    display: block;
    max-width: 300px;
    margin: 0 auto;
    font-size: 2.25em;
    color: #bfbfbf;

    &:hover {
      color: #999;
    }

    img {
      max-height: 100%;
      margin: 0 auto;
    }
  }

  main {
    padding-bottom: 3em;
    animation: slideup 0.8s ease-in-out;
  }

  .gift-card-outer-container {
    padding: 1em;
    background-color: #34aadc;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba($color--black, 0.1) inset;
    animation: container-slide 0.8s ease-in-out;
  }

  .gift-card-inner-container {
    background-color: $color--white;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba($color--black, 0.1);
    animation: cardslide 0.8s ease-in-out;

    &::after {
      display: table;
      clear: both;
      content: "";
    }
  }

  .gift-card-header {
    position: relative;
    display: block;
    padding: 0.75em;
    overflow: hidden;
    border-bottom: 1px solid #f2f2f2;

    h2 {
      float: left;
      margin: 0.12em 0;
    }

    .tag {
      float: right;
    }
  }

  .tag {
    padding: 0.5em;
    padding-bottom: 0.35em;
    font-size: 0.75em;
    line-height: 1;
    letter-spacing: 0.05em;
    color: $color--white;
    text-transform: uppercase;
    background-color: #bfbfbf;
    border-radius: 4px;

    &.light {
      color: #bfbfbf;
      background: transparent;
      border: 1px solid #d9d9d9;
    }
  }

  .gift-card-holder {
    position: relative;
    margin: 1.25em 0.75em;

    .corner {
      position: absolute;
      z-index: 2;
      display: block;
      width: 47px;
      height: 47px;

      &.top-left {
        top: -1px;
        left: -1px;
        background: url("/cdn/s/assets/gift-card/corner-top-left-1585103bdd46bf1297b88f31bdfce999.png") 0 0 no-repeat;
      }

      &.bottom-right {
        right: -1px;
        bottom: -1px;
        background: url("/cdn/s/assets/gift-card/corner-bottom-right-ba899b18631cb91859e186c2cc1c6970.png") 0 0 no-repeat;
      }
    }
  }

  .gift-card {
    position: relative;
    box-sizing: border-box;

    &::before {
      position: absolute;
      z-index: 1;
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
      border-radius: 10px;
      content: "";
      box-shadow: inset 0 0 0 1px rgba($color--black, 0.1);
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }

    img {
      max-width: 100%;
      border-radius: 10px;
    }
  }

  .gift-card-code-outer {
    position: absolute;
    bottom: 1em;
    width: 100%;
    text-align: center;

    &.medium {
      font-size: 0.875em;
    }

    &.small {
      font-size: 0.75em;
    }
  }

  .gift-card-code-inner {
    display: inline-block;
    max-width: 450px;
    padding: 0.5em;
    vertical-align: baseline;
    background-color: $color--white;
    border-radius: 4px;
    zoom: 1;
    box-shadow: 0 0 0 1px rgba($color--black, 0.1);

    strong {
      @include font($font-body, $font-family: false);
      display: inline-block;
      padding: 0.4em 0.5em;
      font-size: 1.875em;
      line-height: 1;
      color: #777;
      text-transform: uppercase;
      vertical-align: baseline;
      border: 1px dashed #e5e5e5;
      border-radius: 2px;
      zoom: 1;
    }
  }

  .small .gift-card-code-inner {
    overflow: auto;
  }

  .disabled .gift-card-code-inner strong {
    color: #999;
    text-decoration: line-through;
  }

  .gift-card-code-inner span+span {
    margin-left: 0.25em;
  }

  .gift-card-amount {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.4em 0.5em;
    font-size: 2.75em;
    color: $color--white;
  }

  .gift-card-amount.medium {
    font-size: 2.25em;
  }

  .gift-card-amount strong {
    display: block;
    text-shadow: 3px 3px 0 rgba($color--black, 0.1);
  }

  .tooltip {
    position: relative;

    &:hover .tooltip-container {
      display: block;
    }
  }

  .tooltip-container {
    position: absolute;
    top: -50%;
    right: 50%;
    z-index: 3;
    display: block;
    margin-top: 0.25em;
    color: $color--white;
    text-align: center;
    white-space: nowrap;
    animation: popup 0.5s ease-in-out both 0.7s;
  }

  .tooltip-triangle {
    position: absolute;
    bottom: 0;
    left: 100%;
    display: block;
    width: 0;
    height: 0;
    margin-bottom: -5px;
    margin-left: -5px;
    border-top: 5px solid rgba(51,51,51,0.9);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    content: "";
  }

  .tooltip-label {
    @include font($font-body);
    display: block;
    position: relative;
    right: -50%;
    display: block;
    min-height: 14px;
    padding: 0.5em 0.75em;
    margin-left: 0.25em;
    font-size: 0.4em;
    font-weight: 400;
    line-height: 16px;
    color: $color--white;
    text-decoration: none;
    text-shadow: none;
    background: rgba(51,51,51,0.9);
    border: 0;
    border-radius: 4px;
  }

  .gift-card-instructions {
    margin: 0 0.75em 1.5em;
    font-size: 0.875em;
    color: #999;
    text-align: center;
  }

  .gift-card-qr-code {
    display: block;

    img {
      padding: 1.25em;
      margin: 0 auto 1.25em;
      border: 1px solid #f2f2f2;
      border-radius: 10px;
    }
  }

  .gift-card-actions {
    position: relative;
    display: block;
    padding: 1.25em 0.75em;
    overflow: hidden;
    text-align: center;
    border-top: 1px solid #f2f2f2;
  }

  .action-link {
    position: absolute;
    top: 1.25em;
    left: 1.25em;
    margin-top: 1.75em;
    font-size: 0.875em;
    letter-spacing: 0.2em;
    color: #bfbfbf;
    text-transform: uppercase;

    &:hover {
      color: #999;

      .ico-16 {
        opacity: 0.4;
      }
    }
  }

  .ico-16 {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 0.5em;
    margin-bottom: -1px;
    vertical-align: bottom;
    background-position: 0 0;
    background-repeat: no-repeat;
    opacity: 0.25;
    zoom: 1;
    transition: opacity 0.3s ease-in-out;

    &.print {
      background-image: url("/cdn/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png");
    }
  }

  footer[role='contentinfo'] {
    padding-bottom: 3em;
    text-align: center;
    animation: fadein 0.5s ease-in-out both 0.4s;
  }

  .gift-card-apple-wallet-badge {
    display: inline-block;
  }

  .gift-card-apple-wallet-badge-image {
    display: block;
  }

  @media screen and (max-width: 580px){
    body {
      font-size: $font-size--body;
    }

    h2 {
      font-size: 1.5em;
    }

    .gift-card-outer-container {
      padding: 0.5em;
    }

    .tooltip-container {
      top: -65%;
    }

    .gift-card-actions .btn {
      width: 100%;
      padding-right: 0;
      padding-left: 0;
      font-size: 1.125em;
    }

    .action-link {
      position: relative !important;
      top: auto !important;
      right: auto !important;
      left: auto !important;
      display: none;
      font-size: 1.125em;
    }

    .action-link + .action-link {
      margin-left: 1.5em;
    }
  }

  @media screen and (max-width: 400px){
    h2 {
      font-size: 1.25em;
    }

    .gift-card {
      font-size: 10px;
    }

    .gift-card-holder .corner {
      display: none;

      &.bottom-right {
        background-position: bottom right !important;
      }
    }

    .gift-card-amount strong {
      text-shadow: 2px 2px 0 rgba($color--black, 0.1);
    }

    .tooltip-container {
      top: -75%;
    }
  }

  @media screen and (max-height: 800px){
    .shop-title {
      max-height: 100px;
    }
  }

  @media screen and (max-height: 750px){
    .shop-title {
      max-height: 80px;
    }

    header {
      padding: 2em 0;
    }

    footer[role='contentinfo'],
    main {
      padding-bottom: 2em;
    }
  }

  @media print{
    @page {
      margin: 0.5cm;
    }

    p,
    h2,
    h3 {
      orphans: 3;
      widows: 3;
    }

    h2,
    h3 {
      page-break-after: avoid;
    }

    body {
      background-color: $color--white;
    }

    .gift-card-actions,
    .gift-card-holder .corner,
    .tooltip-container,
    .gift-card::before {
      display: none;
    }

    .gift-card-code-inner strong {
      color: #555;
    }

    .gift-card-amount .tooltip {
      color: $color--white !important;
    }

    .shop-title {
      color: #58686f;
    }

    .gift-card-outer-container,
    .gift-card-inner-container,
    .gift-card-code-inner,
    .gift-card::before {
      box-shadow: none;
    }
  }
}

$slideshow--transition: 0.6s;

.template-index {
  .slideshow {
    position: relative;
    padding: 0;
    overflow: hidden;
    transition: height $slideshow--transition $transition--easing;

    &.content-area {
      @include breakpoint(small) {
        padding: 0;
        box-sizing: content-box;
      }
    }

    @include breakpoint(small) {
      &:after {
        position: absolute;
        bottom: 0;
        left: 15px;
        display: block;
        width: calc(100% - 30px);
        border-top: 1px solid $primary-border-color;
        content: "";
      }
    }
  }

  .slideshow-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }

  .jump-to-slide {
    position: absolute;
    top: -44px;
    left: 50%;
    z-index: 4000;
    display: block;
    height: 32px;
    max-width: 150px;
    overflow: hidden;
    transform: translateX(-50%);

    @include breakpoint(phone) {
      top: -38px;
    }

    li {
      display: inline-block;
      width: 8px;
      height: 8px;
      margin: 0 8px;
      cursor: pointer;
      background-color: transparent;
      border: 1.5px solid $color--white;
      border-radius: 8px;
      opacity: 0.5;
      transform: scale(1);
      transition: (
        opacity $transition--medium $transition--easing,
        transform $transition--medium $transition--easing
      );

      &:hover {
        opacity: 1;
        transform: scale(1.2);
      }

      &.active {
        background-color: $color--white;
        opacity: 1;
      }

      @include breakpoint(phone) {
        margin: 0 6px;
      }
    }
  }

  .prev,
  .next {
    position: absolute;
    top: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    color: $color--white;
    cursor: pointer;

    svg {
      width: 40%;
      height: 40%;
      transition: (
        transform $transition--short $transition--easing
      );
    }

    &:hover {
      svg {
        transform: scale(1.15);
      }
    }

    @include breakpoint(small) {
      width: 45px;

      svg {
        width: 18px;
        height: 22px;
      }
    }
  }

  .prev {
    left: 0;

    svg {
      margin-left: -4px;
    }
  }

  .next {
    right: 0;

    svg {
      margin-right: -4px;
    }
  }

  .slideshow--viewport {
    height: 100%;
    transition: transform $slideshow--transition $transition--easing;

    @for $i from 1 through 5 {
      &.slideshow--position-#{$i} {
        transform: translateX(#{$i * -100%});
      }
    }
  }

  .slide {
    @include opacity(0);
    position: relative;
    z-index: 1000;
    float: left;
    width: 100%;
    height: 100%;
    margin-right: -100%;
    overflow: hidden;
    text-align: center;

    &.active {
      @include opacity(1);
      z-index: 2000;
    }

    .no-js & {
      @include opacity(1);

      &:not(:first-of-type) {
        display: none;
      }
    }
  }

  @for $i from 2 through 5 {
    .slideshow--transition-slide .slide:nth-of-type(#{$i}) {
      opacity: 1;
      transform: translateX(#{($i - 1) * 100%});
    }
  }

  .slide .image-wrap {
    position: relative;
    height: 100%;
    overflow: hidden;
    font-size: 0;
  }

  @include breakpoint(large) {
    .slideshow--desktop-height-natural {
      .image-wrap {
        img,
        svg {
          max-width: 100%;
          min-height: auto;
        }

        @supports (-webkit-appearance:none) {
          img {
            width: auto;
            height: auto;
            object-fit: fill;
          }
        }
      }
    }
  }

  .slideshow--desktop-height-small {
    .image-wrap {
      height: 500px;
    }
  }

  .slideshow--desktop-height-medium {
    .image-wrap {
      height: 600px;
    }
  }

  .slideshow--desktop-height-large {
    .image-wrap {
      height: 700px;
    }
  }

  .slideshow--desktop-height-extra-large {
    .image-wrap {
      height: 800px;
    }
  }

  @include breakpoint(small) {
    .slideshow--mobile-height-natural {
      .image-wrap {
        height: auto;

        img,
        svg {
          max-width: 100%;
          min-height: auto;
        }

        @supports (-webkit-appearance:none) {
          img {
            width: auto;
            height: auto;
            object-fit: fill;
          }
        }
      }
    }

    .slideshow--mobile-height-small {
      .image-wrap {
        height: 300px;
      }
    }

    .slideshow--mobile-height-medium {
      .image-wrap {
        height: 400px;
      }
    }

    .slideshow--mobile-height-large {
      .image-wrap {
        height: 500px;
      }
    }

    .slideshow--mobile-height-natural {
      .image-wrap {
        height: auto;
      }
    }
  }

  .slide img,
  .slide svg {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    min-width: 100%;
    min-height: 100%;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  @supports (-webkit-appearance:none) {
    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .slide .image-overlay {
    position: absolute;
    width: 100%;
    height: 100%;

    @include breakpoint(small) {
      display: none;
    }
  }

  .slide .content-outer-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: $content-width;
    max-width: $max-width;

    @include breakpoint(small) {
      position: relative;
      left: 0;
      width: 100%;
    }
  }

  .slide .mobile-link {
    display: none;

    @include breakpoint(small) {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
    }
  }

  .slide .content-inner-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -50%;
    width: 100%;
    display: flex;

    @include breakpoint(small) {
      position: static;
    }

    &.left {
      justify-content: flex-start;
    }

    &.bottom {
      align-items: flex-end;
      bottom: 15%;
    }

    &.top {
      align-items: flex-start;
      top: 12%;
    }

    &.center {
      justify-content: center;
      
      .content {
        text-align: center;
      }
    }

    &.center-center {
      justify-content: center;
      align-items: center;

      .content {
        text-align: center;
      }
    }

    &.middle {
      align-items: center;
    }

    &.right {
      justify-content: flex-end;
      
      .content {
        text-align: right;

        @include breakpoint(small) {
          text-align: center;
        }
      }
    }
  }

  .slide .content {
    width: 70%;
    max-width: 70%;
    padding: 0 15px;
    text-align: left;

    @include breakpoint(tablet) {
      width: 85%;
      max-width: 85%;
      padding: 0 25px;
    }

    @include breakpoint(small) {
      position: static;
      width: 100%;
      max-width: 550px;
      padding: 35px 30px 45px;
      margin: 0 auto;
      text-align: center;
    }

    .title {
      @include font($font-headings);
      font-size: 54px;
      color: $color--white;
      cursor: default;

      @if $font-headings-capitalize {
        text-transform: uppercase;
        font-size: calc(56px * 0.875) !important;
      }

      @include breakpoint(minimal) {
        font-size: 48px;
      }

      @include breakpoint(small) {
        overflow-x: hidden;
        font-size: 30px;
        color: $title-color;

        @if $font-headings-capitalize {
          font-size: calc(32px * 0.875) !important;
        }
      }
    }

    .tagline {
      @include font($font-body);
      margin-top: 4px;
      font-size: 20px;
      color: $color--white;
      cursor: default;

      @include breakpoint(minimal) {
        font-size: 18px;
      }

      @include breakpoint(small) {
        margin-top: 10px;
        overflow-x: hidden;
        color: $text-color;
      }
    }

    .call-to-action {
      @extend %button--large;
      margin-top: 35px;

      @include breakpoint(small) {
        padding: 10px 18px;
        margin-top: 30px;
      }
    }

    .title,
    .tagline,
    .call-to-action-wrap {
      opacity: 0;
      transform: translate3d(0,20px,0);
      transition: (
        opacity $slideshow--transition $transition--easing 0.45s,
        transform $slideshow--transition $transition--easing 0.45s
      );
      will-change: opacity, transform;
    }

    .tagline {
      transition-delay: 0.5s;
    }

    .call-to-action-wrap {
      transition-delay: 0.55s;
    }
  }

  .slideshow--loaded .slide.active {
    .title,
    .tagline,
    .call-to-action-wrap {
      opacity: 1;
      transform: translate3d(0,0,0);
    }
  }

  .featured-text-container {
    padding: 55px 15px 0;
    text-align: center;

    @include breakpoint(small) {
      padding: 30px 15px 0;
    }

    &.feature-borders .featured-text {
      padding: 55px 0;
      border-top: 1px solid $primary-border-color;

      @include breakpoint(small) {
        padding: 30px 15px 0;
      }

      &:first-of-type {
        padding-top: 0;
        border: 0;
      }

      &:last-of-type {
        padding-bottom: 0;
      }
    }

    h2,
    .rte {
      display: inline-block;
      width: 70%;
      margin: 10px 0;

      p {
        margin: 0;
      }
    }

    h2 {
      @include font($font-headings);
      font-size: 28px;
      line-height: 33px;
      color: $title-color;

      @if $font-headings-capitalize {
        text-transform: uppercase;
        font-size: calc(28px * 0.875) !important;
      }

      @include breakpoint(small) {
        font-size:21px;

        @if $font-headings-capitalize {
          font-size: calc(21px * 0.875) !important;
        }
      }
    }

    h3 {
      @include font($font-headings, $font-weight: lighter);
      display: inline-block;
      font-size: 18px;
      line-height: 29px;

      @include breakpoint(small) {
        font-size: 16px;
        line-height: 25px;
      }
    }
  }

  .featured-text + .featured-text {
    margin-top: 30px;
  }

  .feature-borders .featured-text + .featured-text {
    margin-top: 0;
  }

  .featured-collections {
    text-align: left;

    &.first {
      .section-title {
        padding-top: 75px;
        border-top: 0;
      }
    }

    .collection-wrap {
      @include breakpoint(minimal) {
        margin: 0 0 10px;
      }

      @include breakpoint(small) {
        margin: 0 0 10px;
      }
    }

    .wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      font-size: 0;

      @include breakpoint(small) {
        width: calc(100%);
        margin-left: 0;
      }

      &.wrap--1 {
        justify-content: center;
      }

      &.wrap--2 .collection-wrap {
        width: calc(50% - 15px);
        margin: 0;

        @include breakpoint(small) {
          width: calc(100%);
          margin-bottom: 10px;
        }
      }

      &.wrap--1 .collection-wrap {
        width: calc(100%);
        margin: 0;
      }
    }
  }

  .featured-collection {
    text-align: center;
    margin-bottom: -50px;

    &.first {
      .section-title {
        padding-top: 75px;
        border-top: 0;
      }
    }

    .product-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      margin-left: 0;

      &.row-of-2 .product {
        width: calc(50% - 12px);
      }

      &.row-of-3 .product {
        width: calc(#{percentage(1 / 3)} - 15px);
      }

      &.row-of-4 .product {
        width: calc(25% - 20px);

        @media (max-width:1200px) {
          width: calc(50% - 12px)
        }
      }

      @media (max-width: 940px) {
        &.row-of-2,
        &.row-of-3,
        &.row-of-4 {
          .product,
          .promo-block {
            width: calc(50% - 7.5px);
            min-width: calc(50% - 7.5px);
            text-align: left;
          }
        }
      }

      @include breakpoint(small) {
        &.row-of-2,
        &.row-of-3,
        &.row-of-4 {
          .product,
          .promo-block {
            margin-bottom: 35px;
          }
        }
      }

      .product {
        padding-left: 0;
        margin-bottom: 50px;

        @include breakpoint(large) {

          &.product-card-alt {
            margin: 0 0 30px;
          }
        }

        @include breakpoint(small) {
          margin: 0 0 35px;
        }
      }
    }

    @include breakpoint(small) {
      margin-bottom: -20px;
    }
  }

  .articles {
    margin-left: -30px;
    font-size: 0;

    @include breakpoint(large) {
      margin-bottom: -40px;
    }

    @include breakpoint(small) {
      margin-left: 0;
    }
  }

  .article {
    display: inline-block;
    width: 25%;
    padding-top: 10px;
    padding-bottom: 40px;
    padding-left: 30px;
    border-bottom: 0;
    text-align: left;
    vertical-align: top;

    &.first {
      margin-left: 0;
    }

    @media screen and (max-width: 1200px) {
      width: 50%;
    }

    @include breakpoint(small) {
      display: block;
      width: 100%;
      min-width: 290px;
      padding: 0;
      margin: 0 auto 50px;
      border: 0;

      &.last {
        margin-bottom: 0;
      }
    }

    .date {
      @extend %uc-title;
      @include font($font-accent);
      display: block;
      margin-bottom: 10px;
      font-size: 12px;
      color: $light-text-color;
    }

    .title {
      @include font($font-headings);
      display: block;
      margin-bottom: 18px;
      font-size: 21px;
      color: $title-color;

      @if $font-headings-capitalize {
        font-size: 21px !important;
        text-transform: uppercase;
      }

      &:hover {
        color: $accent-color;
      }
    }

    .rte {
      font-size: 15px;
      line-height: 1.6;
      color: $text-color;

      img {
        width: 100%;
      }
    }

    .article-image {
      display: block;
      margin-bottom: 20px;
    }
  }
}

.logo-list-container {
  margin: 0 -20px;
}

.logo-list {
  font-size: 0;
  text-align: center;
}

.logo-list-item {
  display: inline-block;
  padding: 10px 20px;
  vertical-align: middle;

  .rows-of-3 & {
    width: 33.333%;
  }

  .rows-of-4 & {
    width: 25%;
  }

  .rows-of-5 & {
    width: 20%;
  }

  .rows-of-3 &,
  .rows-of-4 &,
  .rows-of-5 & {
    @include breakpoint(small) {
      width: 50%;
    }
  }

  .logo-list-item-wrap {
    max-width: 240px;
    margin: 0 auto;
  }

  img,
  svg {
    max-width: 100%;
  }
}

.home-section {
  position: relative;
  padding-top: 65px;
  margin-top: 65px;

  @include breakpoint(small) {
    padding-top: 40px;
    margin-top: 40px;
  }

  .slideshow-sibling-section & {
    margin-top: 0;
  }

  > .section-title {
    padding-top: 0;
  }

  &.has-heading {
    padding-top: 50px;
  }

  &.has-border {
    &::before {
      position: absolute;
      top: 0;
      display: block;
      width: calc(100% - 30px);
      border-top: 1px solid $primary-border-color;
      content: "";
    }

    > .section-title {
      padding-top: 0;
    }
  }

  &.multi-row {
    margin-bottom: -50px; // 50px of product's bottom margins
  }

  &.picture-block,
  &.slideshow:not(.content-area) {
    padding-top: 0;

    &::before {
      display: none;
    }
  }

  &.slideshow.content-area {
    padding-top: 0;
  }
}

.template-index .shopify-section {
  &:not(:first-of-type) {
    .slide::before { display: none; }
  }

  &:first-of-type .home-section {
    margin-top: 0;

    &.has-border::before {
      display: none;
    }
  }

  &:first-of-type {
    .home-section.slideshow {
      margin-top: 0;

      &::before {
        display: none;
      }
    }

    .home-video:first-of-type {
      padding-top: 0;
    }
  }
}

// Yikes! When content width slideshow is the first section on a page and header layout is "normal", we
// need to add this extra whitespace.
html:not(.header-layout-minimal) .shopify-section:first-of-type .home-section.slideshow[data-full-width="false"] {
  padding-top: 65px;

  @include breakpoint(small) {
    padding-top: 0;
  }
}

.instagram-widget {
  position: relative;
}

.instagram-photos {
  margin: 0 -10px;
  font-size: 0;
  background: url("//www.lityourdreams.com/cdn/shop/t/11/assets/loading.gif?v=171368479448122837701616350773") no-repeat center;

  &.visible {
    background: none;
  }
}

.instagram-photo {
  display: inline-block;
  width: calc(16.666% - 20px);
  margin: 0 10px;
  background-size: 0;
  opacity: 0;
  visibility: hidden;

  &:not(.instagram-onboarding)::after {
    display: block;
    width: 100%;
    padding-bottom: 100%;
    background-image: inherit;
    background-position: center;
    background-size: cover;
    content: "";
  }

  @include breakpoint(tablet) {
    width: calc(33.333% - 20px);
    margin-bottom: 20px;
  }

  @include breakpoint(small) {
    width: calc(33.333% - 20px);
    margin-bottom: 20px;
  }

  @include breakpoint(phone) {
    width: calc(50% - 20px);
    margin-bottom: 20px;
  }

  &:nth-child(n+4) {
    @include breakpoint(tablet) {
      margin-bottom: 0;
    }

    @include breakpoint(small) {
      margin-bottom: 0;
    }

    @include breakpoint(phone) {
      margin-bottom: 20px;
    }
  }

  &:nth-child(n+7) {
    display: none;
  }

  .visible & {
    @include transition(opacity 0.5s ease-out);
    opacity: 1;
    visibility: visible;
  }

  img {
    display: block;
    max-width: 100%;
  }

  .placeholder-svg {
    min-height: auto;
  }
}

.twitter-tweet {
  max-width: 60%;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.375em;
  text-align: center;
  word-wrap: break-word;

  @media screen and (min-width: 500px) {
    font-size: 20px;
  }

  @media screen and (min-width: 900px) {
    font-size: 22px;
  }

  @media screen and (min-width: 1200px) {
    font-size: 24px;
  }

  img {
    height: 24px;
    margin-left: 5px;
    vertical-align: sub;
  }

  .tweet-image img {
    width: 100%;
    height: auto;
    margin: 0 0 30px;
  }

  .tweet-wrap {
    &:nth-child(n + 2) {
      display: none;
    }
  }

  .timestamp {
    @extend %uc-title;
    @include font($font-accent);
    display: block;
    margin-top: 2em;
    font-size: $font-size--button;
    color: $light-text-color;

    @include breakpoint(phone) {
      .divider {
        display: none;
      }

      span[data-scribe='element:screen_name'] {
        display: block;
      }
    }

    .divider {
      margin: 0 10px;
    }

    img,
    span[data-scribe='element:name'] {
      display: none;
    }

    [data-scribe="component:author"] {
      display: inline-block;
      font-size: $font-size--button;
    }
  }
}

.customer.login {
  #recover-password {
    display: none;
  }

  .secondary-wrap {
    width: 100%;
    padding-top: 35px;
    margin-top: 35px;
    border-top: 1px solid $primary-border-color;

    @include breakpoint(small) {
      text-align: center;

      .action-button {
        width: 100%;
      }
    }

    p {
      margin: 0 0 20px;
      font-size: 14px;
    }

  }

}

$pxs-map-height-small: 400px !default;
$pxs-map-height-medium: 560px !default;
$pxs-map-height-large: 720px !default;

$pxs-map-breakpoint-small: 720px;
$pxs-map-breakpoint-large: 1080px;

$pxs-map-space-large: 30px;

$pxs-map-height-small: 400px !default;
$pxs-map-height-medium: 500px !default;
$pxs-map-height-large: 600px !default;

$pxs-map-breakpoint-small: 680px !default;
$pxs-map-breakpoint-large: 1024px !default;

$pxs-map-space-small: 10px !default;
$pxs-map-space-medium: 20px !default;
$pxs-map-space-large: 25px !default;
$pxs-map-space-larger: 50px !default;

$pxs-map-split-map-width: calc(50% - #{$pxs-map-space-small}) !default;
$pxs-map-split-content-width: calc(50% - #{$pxs-map-space-small}) !default;

$pxs-map-content-max-width: 40% !default;
$pxs-map-content-min-width: 280px !default;

$pxs-map-content-background-color: #fff !default;

$pxs-map-heading-margin: 26px !default;

.pxs-map {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: $pxs-map-space-larger;

  @media (max-width: $pxs-map-breakpoint-small) {
    flex-wrap: wrap;
  }
}

.pxs-map-wrapper {
  position: relative;
  width: 100%;
  height: $pxs-map-height-small * 0.7;
  padding: 0;
  background-size: cover;

  @media (min-width: $pxs-map-breakpoint-small) {
    height: $pxs-map-height-small;

    .pxs-map-section-layout-x-outside-left &,
    .pxs-map-section-layout-x-outside-right & {
      width: $pxs-map-split-map-width;
    }
  }

  &.pxs-map-wrapper-height-medium {
    height: $pxs-map-height-medium * 0.7;

    @media (min-width: $pxs-map-breakpoint-small) {
      height: $pxs-map-height-medium;
    }
  }

  &.pxs-map-wrapper-height-large {
    height: $pxs-map-height-large * 0.7;

    @media (min-width: $pxs-map-breakpoint-small) {
      height: $pxs-map-height-large;
    }
  }

  .pxs-map-image {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;

    &[data-rimg="noscript"] {
      position: relative;
      width: 100%;
      height: 100%;
      opacity: 1;
      object-fit: cover;
    }
  }
}

.pxs-map-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  .pxs-map-section-layout-x-outside-left &,
  .pxs-map-section-layout-x-outside-right & {
    display: none;
  }

  @media (max-width: $pxs-map-breakpoint-small) {
    display: none;
  }
}

.pxs-map-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.pxs-map-error-message {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: $pxs-map-space-medium;

  p {
    margin: 0;
    text-align: center;
  }

  a {
    color: inherit;
  }
}

.pxs-map-card-wrapper {
  width: 100%;

  @media (max-width: $pxs-map-breakpoint-small) {
    .pxs-map-section-layout-mobile-above & {
      order: -1;
      margin-bottom: $pxs-map-space-medium;
    }

    .pxs-map-section-layout-mobile-below & {
      margin-top: $pxs-map-space-medium;
    }
  }

  @media (min-width: $pxs-map-breakpoint-small) {
    position: absolute;
    top: $pxs-map-space-medium;
    right: $pxs-map-space-medium;
    bottom: $pxs-map-space-medium;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 $pxs-map-space-medium;

    .pxs-map-section-layout-x-outside-left &,
    .pxs-map-section-layout-x-outside-right & {
      position: static;
      width: $pxs-map-split-content-width;
      padding: 0;
      background-color: $pxs-map-content-background-color;
    }

    .pxs-map-section-layout-x-outside-left & {
      order: -1;
    }

    .pxs-map-section-layout-y-outside-center &,
    .pxs-map-section-layout-y-overlay-center & {
      align-items: center;
    }

    .pxs-map-section-layout-y-outside-bottom &,
    .pxs-map-section-layout-y-overlay-bottom & {
      align-items: flex-end;
    }

    .pxs-map-section-layout-x-overlay-center & {
      justify-content: center;
    }

    .pxs-map-section-layout-x-overlay-right & {
      justify-content: flex-end;
    }
  }

  @media (min-width: $pxs-map-breakpoint-large) {
    top: $pxs-map-space-large;
    bottom: $pxs-map-space-large;
    padding: 0 $pxs-map-space-large;
  }
}

.pxs-map-card {
  width: 100%;
  padding: $pxs-map-space-large;
  background-color: $pxs-map-content-background-color;

  @media (max-width: $pxs-map-breakpoint-small) {
    max-width: 100%;
  }

  @media (min-width: $pxs-map-breakpoint-small) {
    right: auto;
    bottom: $pxs-map-space-large;
    left: $pxs-map-space-large;
    width: auto;
    max-width: $pxs-map-content-max-width;
    min-width: $pxs-map-content-min-width;

    .pxs-map-section-layout-x-outside-left &,
    .pxs-map-section-layout-x-outside-right & {
      width: 100%;
      max-width: 100%;
    }
  }
}

.pxs-map-card-text-alignment-left {
  text-align: left;
}

.pxs-map-card-text-alignment-center {
  text-align: center;
}

.pxs-map-card-text-alignment-right {
  text-align: right;
}

.pxs-map-card-heading {
  margin: 0 0 $pxs-map-heading-margin;
}

.pxs-map-card-content p:last-child {
  margin-bottom: 0;
}


.pxs-map {
  margin-top: 0;
}

.pxs-map-section {
  width: $content-width;
  max-width: $max-width;
  min-width: 690px;
  padding: 50px 15px 0;
  margin: 65px auto 0;


  @include breakpoint(full-down) {
    width: $content-width-tablet-desktop;
  }

  @include breakpoint(small) {
    width: 100%;
    min-width: 100%;
    padding-top: 0;
  }
}

.pxs-map-card {
  @include breakpoint(small) {
    padding-right: 0;
    padding-left: 0;

    .pxs-map-section-layout-x-outside-left &,
    .pxs-map-section-layout-x-outside-right & {
      padding-right: 30px;
      padding-left: 30px;
    }
  }

  @include breakpoint(full) {
    padding: 40px;
  }
}

.pxs-map-card-wrapper {
  @include breakpoint(full) {
    top: 40px;
    bottom: 40px;
    padding: 0 40px;
  }
}

.pxs-map-card,
.pxs-map-card-wrapper {
  @include breakpoint(small) {
    .pxs-map-section-layout-mobile-above &,
    .pxs-map-section-layout-mobile-below & {
      margin: 0;
    }
  }

  .pxs-map-section-layout-x-outside-left &,
  .pxs-map-section-layout-x-outside-right & {
    margin: 0;
  }
}

.pxs-map-wrapper,
.pxs-map-card-wrapper {
  .pxs-map-section-layout-x-outside-left &,
  .pxs-map-section-layout-x-outside-right & {
    width: 50%;

    @include breakpoint(small) {
      width: 100%;
    }
  }
}

.pxs-map-card-heading {
  @include font($font-headings-secondary);
  font-size: 18px;
  letter-spacing: 0.1em;
  color: $title-color;
  text-align: center;
  text-transform: uppercase;
}

.menu-list-link {
  display: block;
  font-size: 16px;
  color: $text-color;
  transition: color $transition--short $transition--easing;

  &:not(:first-of-type) {
    margin-top: 14px;
  }
}

.menu-list-link-more {
  @include font($font-accent);
  padding: 0;
  margin-top: 16px;
  font-size: $font-size--body - 1px;
  color: $accent-color;
  text-decoration: underline;
  background-color: transparent;
  border: 0;
  outline: 0;
  transition: color $transition--short $transition--easing;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  &:hover {
    color: $accent-color-hover;
  }
}

.menu-list-link-hidden {
  display: none;
}

.collections .label.menu-list-heading {
  padding-bottom: 16px;
  margin-bottom: 20px;
  font-size: 24px;
  text-align: left;
  border-bottom: 1px solid $primary-border-color;

  @include breakpoint(small) {
    font-size: 20px;
  }

  @include breakpoint(phone) {
    text-align: center;
  }
}

.menu-list-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0;

  text-align: left;
  border-bottom: 1px solid $primary-border-color;
}

.menu-list-container {
  &::before,
  &::after {
    display: none;
  }

  .collection-wrap {
    margin-bottom: 50px;

    @include breakpoint(small) {
      &:last-of-type {
        margin-bottom: 0;
      }
    }

    @include breakpoint(phone) {
      display: block;
      width: 100%;
      padding: 0;
      margin: 0 auto 50px;
      text-align: center;
    }

    img {
      position: static;
      width: 100%;
      height: auto;
      opacity: 1;
      object-fit: cover;
    }

    li:not(:first-of-type) {
      margin-top: 10px;

      @include breakpoint(phone) {
        margin-top: 8px;
      }
    }
  }
}

.subcollection-menu-list-container {
  &::before,
  &::after {
    display: none;
  }

  .collection-wrap {
    margin-bottom: 50px;
  }
}

.menu-list-link-hidden {
  display: none;
}

.menu-list-container.menu-list-count-1 .collection-wrap,
.menu-list-count-2 .collection-wrap:last-of-type,
.menu-list-count-2 .collection-wrap:nth-last-of-type(2),
.menu-list-container.menu-list-count-4 .collection-wrap,
.menu-list-count-5 .collection-wrap:last-of-type,
.menu-list-count-5 .collection-wrap:nth-last-of-type(2) {
  @include breakpoint(large) {
    width: calc(50% - 12px);
  }

  @include breakpoint(phone) {
    width: 100%;
  }
}

.menu-list-count-1 .collection-wrap:last-of-type {
  width: 100%;
}

.menu-list-count-2 .collection-wrap:last-of-type,
.menu-list-count-2 .collection-wrap:nth-last-of-type(2) {
  width: calc(50% - 15px);
}

$pxs-newsletter-breakpoint-small: 720px;
$pxs-newsletter-breakpoint-large: 1080px;

// Newsletter variables
$pxs-newsletter-section-width: 100% !default;

$pxs-newsletter-content-width-small: 65% !default;
$pxs-newsletter-content-width-large: 100% !default;

$pxs-newsletter-header-width: 80% !default;

$pxs-newsletter-breakpoint-small: 680px !default;
$pxs-newsletter-breakpoint-large: 1080px !default;

$pxs-newsletter-space-smaller: 12px !default;
$pxs-newsletter-space-small: 20px !default;
$pxs-newsletter-space-medium: 36px !default;
$pxs-newsletter-space-large: 50px !default;
$pxs-newsletter-space-larger: 68px !default;

.pxs-newsletter-section {
  position: relative;
  width: $pxs-newsletter-section-width;

  .newsletter-success {
    font-weight: bold;
    text-align: center;
  }
}

.pxs-newsletter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: $pxs-newsletter-content-width-large;
  padding: $pxs-newsletter-space-large 0 $pxs-newsletter-space-small;
  margin: 0 auto;

  @media screen and (max-width: $pxs-newsletter-breakpoint-small) {
    flex-direction: column;
  }

  @media (min-width: $pxs-newsletter-breakpoint-large) {
    max-width: $pxs-newsletter-content-width-small;
    padding-top: $pxs-newsletter-space-larger;
  }
}

.pxs-newsletter-figure {
  position: relative;
  flex-shrink: 1;
  order: 0;
  margin: 0;
  background-size: cover;

  @media screen and (max-width: $pxs-newsletter-breakpoint-small) {
    .pxs-newsletter-mobile-alignment-bottom & {
      order: 1;
    }
  }

  @media screen and (min-width: $pxs-newsletter-breakpoint-small) {
    .pxs-newsletter-desktop-alignment-right & {
      order: 1;
    }
  }
}

.pxs-newsletter-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  order: 0;
  padding: $pxs-newsletter-space-small;

  @media screen and (min-width: $pxs-newsletter-breakpoint-small) {
    padding: $pxs-newsletter-space-large;
  }
}

.pxs-newsletter-image {
  display: block;
  width: 100%;
  opacity: 0;

  &[data-rimg="noscript"] {
    opacity: 1;
  }
}

.pxs-newsletter-header {
  margin: 0 auto;
  text-align: center;

  @media (min-width: $pxs-newsletter-breakpoint-small) {
    max-width: $pxs-newsletter-header-width;
  }
}

.pxs-newsletter-heading {
  margin-top: 0;
  margin-bottom: $pxs-newsletter-space-smaller;
}

.pxs-newsletter-text {
  margin-top: 0;
  margin-bottom: $pxs-newsletter-space-medium;
}

.pxs-newsletter-form {
  .contact-form {
    margin: 0;
  }
}

.pxs-newsletter-form-fields {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.pxs-newsletter-form-label {
  display: none;
}

.pxs-newsletter-form-input {
  height: 100%;
  margin: 0;
}

.pxs-newsletter-form-button {
  height: 100%;
}


.pxs-newsletter {
  width: $content-width;
  max-width: $max-width;
  min-width: 690px;
  padding: 50px 15px 0;
  margin: 65px auto 0;

  @include breakpoint(full-down) {
    width: $content-width-tablet-desktop;
  }

  @include breakpoint(small) {
    width: 100%;
    min-width: 100%;
    padding-top: 0;
  }
}

.pxs-newsletter-header,
.pxs-newsletter-form {
  width: 100%;
  max-width: 100%;
}

.pxs-newsletter-heading {
  @include font($font-headings-secondary);
  font-size: 18px;
  letter-spacing: 0.1em;
  color: $title-color;
  text-align: center;
  text-transform: uppercase;
}

.pxs-newsletter-text {
  @extend .rte;
}

.pxs-newsletter-form-field:nth-of-type(1) {
  width: 67%;
}

.pxs-newsletter-figure {
  width: 50%;
  margin: 0;

  @include breakpoint(small) {
    width: 100%;
    margin-bottom: 50px;

    .pxs-newsletter-mobile-alignment-bottom & {
      margin-top: 50px;
      margin-bottom: 0;
    }
  }
}

.pxs-newsletter-content {
  padding: 0 30px;
}

.pxs-newsletter-figure + .pxs-newsletter-content {
  width: 50%;

  @include breakpoint(small) {
    width: 100%;
  }
}

.pxs-newsletter-form-input {
  @extend %input;
  width: calc(100% - 8px);
}

.pxs-newsletter-form-button {
  @extend %button;
}

.customer.order {
  .content-wrap {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    min-height: 200px;
    margin: 50px 0 85px;

    @include breakpoint(small) {
      flex-direction: column;
      margin: 50px 0 55px;
    }
  }

  .shipping-info {
    width: 28%;
    padding-right: 30px;
    font-size: 14px;
    line-height: 22px;

    @include breakpoint(small) {
      display: flex;
      width: 100%;
      padding-right: 0;
      margin: 40px 0;
      text-align: center;
    }

    @include breakpoint(phone) {
      display: block;
    }

    .shipping-title {
      @include font($font-headings);
      font-size: 18px;
      display: block;
      margin-bottom: 10px;
      color: $title-color;

      @if $font-headings-capitalize {
        font-size: calc(18px * 0.875) !important;
        text-transform: uppercase;
      }
    }

    .address,
    .city,
    .country {
      display: block;
    }

    .address-wrap {
      margin-bottom: 30px;

      @include breakpoint(small) {
        width: 50%;
      }

      @include breakpoint(phone) {
        margin-right: auto;
        margin-left: auto;
      }
    }

  }

  .order-history {
    width: 72%;

    @include breakpoint(small) {
      width: 100%;
    }

    .order-history-title {
      color: $title-color;
      @include breakpoint(small) {
        text-align: center;
      }
    }

    .product-item-wrap {
      display: flex;
      align-items: center;
    }

    .table {
      @include breakpoint(small) {
        margin-top: 50px;
      }

      th,
      td {
        width: 18%;
        text-align: right;

        &.first {
          width: 45%;
          text-align: left;

          @include breakpoint(small) {
            width: 100%;
          }
        }
      }

      th {
        @include breakpoint(small) {
          display: none;
        }
      }

      td {
        border: 0;

        @include breakpoint(small) {
          display: flex;
          justify-content: space-between;
          width: 100%;
          padding: 13px 0;

          &.first {
            padding-top: 30px;
          }

          &.last {
            padding-bottom: 30px;
          }
        }

        &.product-item {
          .wrap {
            flex-shrink: 1;
            width: 100%;
            padding-left: 30px;

            @include breakpoint(minimal) {
              padding-left: 0;
            }

            @include breakpoint(small) {
              text-align: right;
            }
          }

          .image-wrap {
            position: relative;
            width: 20%;
            min-width: 50px;

            @include breakpoint(minimal) {
              display: none;
            }

            img {
              width: 100%;
            }

            a {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;

              &.overlay {
                box-shadow: inset 0 0 0 1px rgba($color--black, 0.1);
              }
            }
          }

          .label {
            display: block;

            &.vendor {
              @extend %uc-title;
              @include font($font-accent);
              margin-bottom: 6px;
              font-size: 10px;
              color: $light-text-color;
            }

            &.title {
              margin-bottom: 6px;

              a {
                font-size: 16px;
                color: $accent-color;
              }
            }

            &.variant {
              @include font($font-accent);
              font-size: 13px;
              color: $light-text-color;
            }
          }
        }

        &.quantity {
          @include font($font-accent);
          font-size: $font-size--body;
          color: $light-text-color;
        }
      }
    }

    .order-totals {
      @include font($font-accent);
      width: 100%;
      font-size: 14px;

      .sub-total {
        padding: 30px 0 35px;
        border-bottom: 1px solid $primary-border-color;

        :first-child {
          padding-top: 0;
        }

        :last-child {
          padding-bottom: 0;
        }
      }

      .sub-total,
      .total {
        > li {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
        }
      }

      .total {
        padding: 30px 0;

        .order-total {
          padding: 0;
        }
      }



      // ul {
      //   // font-size: 14px;
      //   // text-align: right;

      //   // &.sub-total {
      //   //   padding: 30px 0 35px;
      //   //   border-bottom: 1px solid $primary-border-color;
      //   // }

      //   // &.total {
      //   //   padding: 30px 0;
      //   // }

      //   li {
      //     display: flex;
      //     justify-content: space-between;
      //     padding: 10px 0;
      //     // text-align: right;

      //     &.order-subtotal {
      //       padding-top: 0;
      //     }

      //     &.order-tax.last {
      //       padding-bottom: 0;
      //     }

      //     &.order-total {
      //       padding: 3px 0 5px;

      //       span {
      //         color: $title-color;
      //       }
      //     }
      //   }

        // h2,
        // span {
        //   display: inline-block;
        // }

      .order-totals-label {
        @include font($font-accent, $font-weight: lighter);
        font-size: 15px;
      }

        // span {
        //   width: 90px;
        //   margin-left: 30px;
        //   text-align: left;
        // }
      // }
    }
  }
}

.order-item-discounts {
  font-size: 13px;
  color: $accent-color;

  li {
    margin-top: 0.5rem;
  }

  .icon-sale-tag {
    width: 11px;
    height: 11px;
    margin-right: 0.15rem;
    margin-bottom: -1px;
  }
}

.order-item-original-price,
.order-item-final-price {
  display: block;
}

.order-item-original-price + .order-item-final-price {
  color: $accent-color;
}

.order-item-label-mobile {
  @extend %uc-title;
  display: none;
  font-size: 12px;
  color: $text-color;

  @include breakpoint(small) {
    display: block;
  }
}

.order-discounts {
  padding: 0;
  margin-bottom: 7px;
  color: $accent-color;

  .icon-sale-tag {
    width: 12px;
    height: 12px;
    margin-right: 0.15rem;
    margin-bottom: -1px;
  }
}

.order-discount {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.order-discount-container {
  flex-direction: column;
  text-align: left;
}

.template-page, .template-contact {

  .text-content-wrap {
    max-width: 760px;
    padding-top: 40px;
    padding-bottom: 80px;
    margin: 0 auto;

    @include breakpoint(small) {
      padding-top: 0;
      padding-bottom: 50px;
    }
  }

  .text-content.has-sidebar {
    float: left;
    width: 68.5714%;
    padding-right: 30px;

    @include breakpoint(small) {
      float: none;
      width: 100%;
      padding-right: 0;
    }
  }

  .sidebar {
    float: right;
    width: 31.4286%;
    padding-left: 8.5714%;

    @include breakpoint(small) {
      float: none;
      width: 100%;
      padding-top: 30px;
      padding-left: 0;
      margin-top: 40px;
      border-top: 1px solid $primary-border-color;
    }

    .title {
      @extend %uc-title;
      margin-top: 0;
      margin-bottom: 30px;
      font-size: 14px;
      color: $title-color;
    }
  }
}

.template-contact {
  .alert-message {
    width: 100%;
    height: auto;
    padding: 12px;
    margin: 0 0 25px;
    line-height: 1.5em;
    text-align: center;

    span {
      display: inline-block;
    }
  }

  .field-wrap {
    margin-top: 20px;

    &.author {
      margin-top: 0;

      @include breakpoint(tablet) {
        margin-top: 20px;
      }

      @include breakpoint(small) {
        margin-top: 20px;
      }
    }

    label {
      display: block;
      margin-bottom: 12px;
      font-size: 14px;
      cursor: auto;
    }

    .field {
      width: 100%;
    }

    textarea {
      min-height: 210px;
    }

  }

  .submit-button {
    padding: 10px 14px 9px;
    margin-top: 30px;

    @include breakpoint(small) {
      width: 100%;
    }
  }

  .full-width-form {
    width: 50%;

    @include breakpoint(tablet) { width: 75%; }
    @include breakpoint(small) {width: 100%;}
  }

}

// -- Layout -- //
.password-page-background {
  height: 100vh;
  text-align: center;
  background-position: center center;
  background-size: cover;

  .form-title {
    margin-bottom: 15px;
    font-size: 16px;
  }

  div.errors {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .social-links {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .social-link:not(:first-child) {
    margin-left: 1em;
  }

  svg {
    display: inline-block;
    width: 32px;
    height: 32px;
  }
}

.password-page {
  display: table;
  width: 100%;
  height: 100%;
}

.password-page-footer,
.password-page-header {
  display: table-row;
  height: 1px;
}

.password-page-header {
  font-size: 14px;
  text-align: right;
}

.password-page-footer {
  font-size: 14px;
  color: $light-text-color;
}

.password-page-content {
  display: table-row;
  width: 100%;
  height: 100%;
  margin: 0 auto;

  h2 {
    @include font($font-headings);
    font-size: 28px;
    line-height: 33px;
    color: $title-color;
  }
}

.password-page-inner {
  display: table-cell;
  padding: 10px 15px;

  .password-page-content & {
    vertical-align: middle;
  }

  .password-page-header &,
  .password-page-footer & {
    font-size: 95%;
    line-height: 1.2;
    vertical-align: bottom;
  }
}

// -- Page Header -- //
.password-login-text {
  text-align: right;
}

.password-page-logo {
  padding-bottom: 15px;

  .store-title {
    @extend %uc-title;
    display: block;
    margin: 0 auto;
    font-size: 28px;
    letter-spacing: 0.2em !important;


    @include breakpoint(tablet) {
      font-size: 21px;
    }

    @include breakpoint(small) {
      max-width: 100%;
      font-size: 23px;
      text-align: center;
    }

    img {
      width: 100%;
      max-width: 480px;

      &.regular-logo {
        display: inline-block;
      }

      &.retina-logo {
        display: none;
        max-height: px;
      }

      @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
        &.regular-logo {
          display: none;
        }

        &.retina-logo {
          display: inline-block;
        }
      }
    }

    a {
      color: $logo-link-color;
      &:hover { color: $logo-link-color-hover; }
    }
  }
}

// -- Sign up form -- //
.password-page-form-header {
  padding-top: 15px;
  padding-bottom: 15px;
  border-top: 1px solid $primary-border-color;

  &::after {
    display: block;
    max-width: 50px;
    margin: 15px auto 0;
    border-bottom: 1px solid $primary-border-color;
    content: "";
  }
}

.password-page-message {
  margin-top: 1em;
  margin-bottom: 0;
}

// -- Admin Form -- //

.password-page-modal-wrapper {
  @include opacity(0);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  display: none;
  overflow: auto;
  background: rgba($color--black, 0.5);
}

.password-page-modal {
  width: 100%;
  max-width: 100%;
  padding: 42px 30px;
  margin: 0 auto;
  background: $background-color;
  box-shadow: 0 0 0 1px rgba($color--black, 0.2);

  @include breakpoint(small) {
    width: 100%;
  }

  @include breakpoint(large) {
    max-width: 415px;
  }

  .header {
    position: relative;
    padding-bottom: 15px;
  }

  .close-modal {
    position: absolute;
    top: -30px;
    right: -15px;
    width: 20px;
    height: 20px;
    color: #ccc;
    cursor: pointer;
  }

  .admin-login {
    font-size: 14px;
    color: $light-text-color;
  }
}

// -- Password Page Forms -- //

.password-page-field-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 350px;
  margin: 0 auto;

  @include breakpoint(small) {
    width: 100%;
    max-width: 100%;
  }

  .password-page-input,
  .submit {
    margin: 0;
    outline: none;
  }

  .password-page-input {
    @extend %input;
    width: 100%;
  }

  .submit {
    @extend %button--large;
  }
}

.product-area {
  position: relative;
  padding: 30px 0 60px;

  @include breakpoint(small) {
    padding: 25px 0;
  }

  .showcase, .pager, .details { float: left; }

  .error-message {
    height: auto;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .zoom-enabled {
    [data-image-zoom] {
      cursor: zoom-in;
    }
  }

  .showcase, .pager {
    .container {
      margin-bottom: 10px;

      @include breakpoint(small) {
        margin-bottom: 0;
      }
    }

    .wrap {
      position: relative;
      z-index: 100;

      .overlay {
        @include transition(box-shadow 200ms);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
      }

      &.active .overlay {
        box-shadow: inset 0px 0px 0px 1px rgba($color--black, 0.3);
      }

      img {
        display: block;
        width: 100%;
        height: auto;
      }
    }

    .with-borders .overlay {
      box-shadow: inset 0px 0px 0px 1px rgba($color--black, 0.1);
    }
  }

  .pager {
    .wrap {
      max-width: 75px;
    }
  }

  .featured-product-container {
    @include breakpoint(large) {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .showcase,
      .product-details-wrapper {
        float: none;
      }
    }
  }

  .showcase {
    width: 55%;
    padding-right: 0;

    @include breakpoint(small) {
      width: 100%;
      padding: 0;
    }

    .container {
      position: relative;
      float: left;
      width: 85%;
      overflow: hidden;

      @include breakpoint(small) {
        width: 100%;
      }

      &.wide {
        width: 100%;
      }

      .spinner {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        z-index: 50 !important;
      }
    }
  }

  .product-main-image {
    @include transition(height 0.2s ease-in);
    position: relative;

    img {
      @include transition(opacity 0.2s ease-in);
      z-index: 100;
      display: block;
      margin: 0 auto;
    }

    &.zoom-enabled {
      cursor: zoom-in;
    }

    svg {
      display: block;
    }
  }

  .image-list-item {
    position: relative;

    ~ .image-list-item {
      margin-top: 10px;
    }

    @include breakpoint(small) {
      margin-bottom: 15px;
    }
  }

  .product-zoom {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
    cursor: zoom-out;
    background-color: $color--white;
    background-repeat: no-repeat;
    border: 1px solid rgba($color--black, 0.1);

    &.active {
      display: block;
    }
  }

  .pager {
    float: right;
    width: 15%;
    padding: 0 0 0 20px;

    @include breakpoint(small) {
      width: 100%;
      padding: 30px 0 0;
      text-align: center;
    }

    .wrap {
      margin-top: 10px;
      vertical-align: top;

      @include breakpoint(small) {
        display: inline-block;
        max-width: calc(55px - 5px);
        margin: 0 5px 10px;
      }

      &.first {
        margin-top: 0;
      }
    }

    .overlay {
      cursor: pointer;
    }
  }

  .left-main-image {
    .container {
      margin-left: 15%;

      @include breakpoint(small) {
        margin-left: auto;
      }

      .product-area .pager & {
        padding-left: 0;
      }
    }

    .pager {
      float: left;
      padding-right: 20px;
      padding-left: 0px;
      margin-left: -100%;

      @include breakpoint(small) {
        margin-left: auto;
      }
    }
  }

  .below-main-image {
    width: 100%;
    padding: 0;
    margin-bottom: 10px;
    font-size: 0;

    @include breakpoint(small) {
      padding-top: 30px;
      margin-bottom: 0;
    }

    .inner {
      margin: 0 -6px;
    }

    .wrap {
      display: inline-block;
      width: 20%;
      max-width: 75px;
      padding: 0 6px;

      @include breakpoint(small) {
        padding: 0;
      }

      &.first {
        margin-top: 10px;

        @include breakpoint(small) {
          margin-top: 0;
        }
      }

      .overlay {
        right: 6px;
        left: 6px;

        @include breakpoint(small) {
          right: 0;
          left: 0;
        }
      }
    }
  }

  .product-details-wrapper {
    float: left;
    width: 45%;
    padding: 0 0 0 50px;

    @media (max-width: 920px) {
      padding-left: 30px;
    }

    @include breakpoint(small) {
      width: 100%;
      padding: 0;

      &.border {
        border-top: 1px solid $primary-border-color;
      }
    }

    .header {
      .brand {
        margin: 0;
        font-size: 12px;
        color: $light-text-color;
      }

      .title {
        margin: 8px 0 8px;
        font-size: 32px;
      }

      .price {
        @include font($font-accent);
        margin-top: 0;
        margin-bottom: 35px;
        font-size: 18px;

        @include breakpoint(small) {
          margin-bottom: 15px;
        }

        .original {
          margin-right: 10px;
        }
      }
    }

    .inline-field-wrapper > label {
      display: inline-block;
      margin-right: 20px;
    }

    .description {
      padding-top: 32px;

      &.no-border {
        border-top: 0;
      }

      .go-to-product {
        @extend %uc-title;
        font-size: $font-size--body;
        color: $accent-color;

        &:hover {
          color: $text-color;
        }
      }
    }
  }

  .product-details {
    margin-top: 10px;

    li {
      text-align: left;
    }

    @include breakpoint(small) {
      margin-top: 20px;
    }
  }

  .details.no-options {
    @include breakpoint(small) {
      padding: 0;
      margin: 0;

      .options {
        padding: 15px 0;
      }
    }

    .options {
      padding: 20px 0 12px;

      .selector-wrapper label {
        display: none;
      }
    }
  }

  .options, .description {
    border-top: 1px solid $secondary-border-color;

    @include breakpoint(small) {
      border-top: 0;
    }
  }

  .product-interactions + .description {
    @include breakpoint(product-interactions) {
      border-top: 0;
    }
  }

  .product-interactions + .product-callout {
    border-top: 0;
  }

  .options {
    padding: 32px 0 22px;

    @include breakpoint(small) {
      padding-bottom: 32px;
    }

    &.unavailable {
      padding: 20px 0;

      .disabled {
        margin-top: 0;
      }
    }

    .disabled {
      cursor: default;
      background-color: mix($background-color, $accent-color, 75%);
      border-color: mix($background-color, $accent-color, 75%);
    }
  }
}

.product-form {
  text-align: left;

  .action-button.unavailable {
    width: 100%;
  }

  .select-wrapper,
  .selector-wrapper {
    width: 100%;
    min-width: 175px;
    margin-bottom: 20px;

    .single-option-selector {
      width: 100%;

      @include breakpoint(small) {
        width: 100% !important;
      }
    }
  }

  .quantity {
    margin-top: 15px;

    @include breakpoint(small) {
      margin-bottom: 15px;
    }

    > label {
      @include font($font-body, $font-weight: bolder);
      margin-right: 20px;
    }
  }

  .product-submit {
    @extend %button-large;
    width: 100%;
    margin-top: 29px;
    margin-right: auto;
    margin-bottom: 18px;
    margin-left: auto;
    line-height: 1;

    @include breakpoint(small) {
      margin-bottom: 15px;
    }

    &.addtocart-button-loading {
      padding-top: 14px;
      padding-bottom: 14px;
    }
  }
}

.product-area .options.has-no-variants {
  padding: 16px 0;

  .product-submit {
    margin: 15px auto;
  }
}

// Secondary styling when SPB is active
.product-form-has-spb .submit {
  @extend %button-large, %button-alt;

  &:disabled {
    color: $button-text-color;
  }

  &:disabled:hover {
    color: $button-text-color;
    background-color: mix($background-color, $accent-color, 75%);
    border-color: mix($background-color, $accent-color, 75%);
  }
}

.template-product {
  .product-recommendations {
    margin-bottom: -65px;

    .product-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 100%;
      margin-left: 0;
    }

    .product {
      width: calc(25% - 20px);
      padding-left: 0;
      margin-bottom: 42px;

      @include breakpoint(minimal) {
        // 3 @ 15px gutters
        width: calc(25% - 11.25px);
      }

      @include breakpoint(recommended-special) {
        width: calc(50% - 7.5px);
      }

      @include breakpoint(small) {
        min-width: calc(50% - 7.5px);
        margin: 0 0 35px;
        text-align: left;
      }
    }
  }
}

.pager {

  .wrap img {
    cursor: pointer;
  }

  &.with-borders .wrap .overlay {
    box-shadow: inset 0px 0px 0px 1px rgba($color--black, 0.1);
  }

  @include breakpoint(small) {
    margin-bottom: 20px;
  }
}

.antiscroll-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.antiscroll-scrollbar {
  position: absolute;
  background: rgba($color--black, 0.5);
  border-radius: 7px;
  opacity: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  box-shadow: 0 0 1px $color--white;
  transition: linear 300ms opacity;
}

.antiscroll-scrollbar-shown {
  opacity: 1;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
}

.antiscroll-scrollbar-horizontal {
  bottom: 2px;
  left: 0;
  height: 7px;
  margin-left: 2px;
}

.antiscroll-scrollbar-vertical {
  top: 0;
  right: 2px;
  width: 7px;
  margin-top: 2px;
}

.antiscroll-inner {
  height: 100% !important;
  overflow: scroll;
}

/** A bug in Chrome 25 on Lion requires each selector to have their own
blocks. E.g. the following:

.antiscroll-inner::-webkit-scrollbar, .antiscroll-inner::scrollbar {...}

causes the width and height rules to be ignored by the browser resulting
in both native and antiscroll scrollbars appearing at the same time.
*/
.antiscroll-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.antiscroll-inner:scrollbar {
  width: 0;
  height: 0;
}

.template-product .breadcrumb-navigation {
  padding: 40px 0 0;
  margin: 0 auto;
  text-align: left;
}

.featured-product .product-area {
  padding: 50px 0 0;
  margin-top: 65px;
}

// PRODUCT REFACTORING

.product-variant-sku {
  @include font($font-accent);
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  color: $light-text-color;

  .product-details-alignment-left & {
    width: 100%;
  }

  &:empty {
    display: none;
  }
}

.product-details-alignment-center,
.product-details-alignment-left {
  text-align: center;

  .header,
  .options,
  .description {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
  }

  .header > *,
  .options > *,
  .description > * {
    width: 100%;
  }

  .description {
    text-align: left;
  }

  .has-no-variants {
    .product-form-grid-select,
    .product-form-grid-radio {
      display: grid;
      grid-template-columns: unset;
    }
  }
}

.product-details-alignment-center {
  .options,
  .product-form.unavailable {
    padding-left: 8%;
    padding-right: 8%;

    @media (min-width: 1380px) {
      padding-left: 18%;
      padding-right: 18%;
    }

    @media (max-width: 1170px) {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.product-details-alignment-left {
  text-align: left;

  .header,
  .options,
  .description {
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
  }

  .header > *,
  .options > *,
  .description > * {
    width: 100%;
    max-width: 100%;
  }

  .has-no-variants {
    .product-form-grid-select,
    .product-form-grid-radio {
      grid-template-columns: minmax(-webkit-min-content, -webkit-max-content) 1fr;
      grid-template-columns: minmax(min-content, max-content) 1fr;
    }
  }
}

.product-interactions {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  border-top: 1px solid $primary-border-color;

  @include breakpoint(product-interactions) {
    flex-direction: column;
    border-bottom: 1px solid $primary-border-color;
    padding: 0;
  }

}

.product-interaction {
  @include font($font-accent);
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-grow: 1;
  justify-content: center;
  width: 26%;
  padding: 0 20px;
  font-size: 14px;
  text-align: left;
  color: $text-color;

  @include breakpoint(product-interactions) {
    padding: 16px 0;
  }

  .product-details-alignment-left & {
    text-align: center;
  }

  &:hover {
    color: morph($text-color, 1);
  }

  &.email-us {
    width: auto;
  }

  &.fitting-guide + .email-us,
  &.fitting-guide + .share-this,
  &.email-us + .share-this {
    border-left: 1px solid $primary-border-color;
  }

  .product-interactions & {
    flex: inherit;
    flex-direction: row;
    justify-content: center;
    width: auto;

    @include breakpoint(product-interactions) {
      &.fitting-guide + .email-us,
      &.fitting-guide + .share-this,
      &.email-us + .share-this {
        border-top: 1px solid $primary-border-color;
        border-left: 0;
      }

      &.email-us {
        width: 100%;
      }
    }
  }

  .product-interactions-3 & {
    flex-direction: column;
    text-align: center;

    .sharethis {
      align-self: center;
    }

    .sharethis-trigger {
      text-align: inherit;
    }

    &.product-interaction {
      flex-grow: 1;
    }

    @include breakpoint(product-interactions) {
      flex-direction: row;
      text-align: left;
    }
  }

  svg {
    display: block;
    height: 18px;
  }

  .icon-share {
    width: 16px;
  }

  .icon-ruler {
    width: 30px;
  }

  .icon-info {
    width: 22px;
  }

  .icon-shirt {
    width: 20px;
  }

  .icon-mail {
    width: 22px;
  }
}

.share-this {
  position: relative;
  padding: 0;

  .sharethis-trigger {
    width: 100%;
    padding: 0 20px;

    @include breakpoint(product-interactions) {
      padding: 16px 0;
    }

    .product-interactions-3 & {
      flex-direction: column;
      padding: 0 20px;

      @include breakpoint(product-interactions) {
        flex-direction: row;
        padding: 16px 0;
      }
    }

    @include breakpoint(product-interactions) {
      bottom: calc(100% - 8px);
    }
  }

  .sharethis-modal {
    @include breakpoint(product-interactions) {
      bottom: calc(100% - 8px);
    }
  }
}

.product-interaction-title,
.product-interaction .sharethis-title {
  margin-left: 12px;

  .product-interactions-3 & {
    margin-top: 8px;
    margin-left: 0;

    @include breakpoint(product-interactions) {
      margin-top: 0;
      margin-left: 12px;
    }
  }
}

.product-quantity-label {
  @extend %label;
  display: block;
  margin-bottom: 12px;
}

.product-quantity-input {
  @extend %input;
  display: block;
  width: 55px;
  height: 50px;
  margin-bottom: 12px;
  text-align: center;
  border: 1px solid $primary-border-color;
}

.product-interactions + .product-callout {
  padding-top: 30px;
  margin-top: 0;
  border-top: 1px solid $primary-border-color;
}

.product-callout {
  @extend %uc-title;
  display: block;
  margin-top: 30px;
  font-size: 13px;
  color: $accent-color;

  &:hover {
    color: $text-color;
  }

  span {
    margin-left: 5px;
  }
}

// PRODUCT GRID

.product-form-grid {
  display: grid;
}

.product-form-grid-select {
  align-items: center;
  grid-template-columns: 25% 75%;
  grid-template-columns: minmax(-webkit-min-content, -webkit-max-content) 1fr;
  grid-template-columns: minmax(min-content, max-content) 1fr;

  > :nth-child(1) {
    grid-row: 1;
    grid-column: 1 / 3;
  }

  @for $i from 1 through 3 {
    > :nth-child(#{$i * 2}) {
      grid-row: #{$i + 1};
      grid-column: 1;
      -ms-grid-row: #{$i + 1};
      -ms-grid-column: 1;
    }

    > :nth-child(#{$i * 2 + 1}) {
      grid-row: #{$i + 1};
      grid-column: 2;
      -ms-grid-row: #{$i + 1};
      -ms-grid-column: 2;
    }
  }

  .select-header {
    align-items: center;
    justify-content: flex-end;
    margin-right: 12px;
    margin-bottom: 15px;
    text-align: right;

    .product-details-alignment-left & {
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
    }
  }

  .select-wrapper {
    margin-bottom: 15px;
  }

  .product-infiniteoptions {
    grid-row: 5;
    grid-column: 1 / 3;
  }

  .product-uploadery {
    grid-row: 6;
    grid-column: 1 / 3;
  }

  .product-quantity-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 12px;
    text-align: right;
    grid-row: 7;
    grid-column: 1;

    .product-details-alignment-left & {
      justify-content: flex-start;
      text-align: left;
    }
  }

  .product-quantity-input {
    display: block;
    grid-row: 7;
    grid-column: 2;
  }

  .product-details-alignment-left & {
    display: block;
  }
}

.product-form-grid-radio {
  grid-template-columns: 100%;

  @for $i from 1 through 30 {
    > :nth-child(#{$i}) {
      grid-row: $i;
      grid-column: 1;
      -ms-grid-row: $i;
      -ms-grid-column: 1;
    }
  }
}

// END PRODUCT GRID

.template-search {
  .search-no-search-performed .page-title {
    border-bottom: 0;
  }

  .results {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-bottom: 50px;
  }

  .results-label {
    @include font($font-body, $font-style: italic);
    margin: 40px 0;
    font-size: 14px;
    text-align: center;

    @include breakpoint(small) {
      margin: 0 0 40px;
    }
  }

  .result {
    display: block;
    width: 66%;
    padding: 30px 0;
    margin: 0 auto;
    font-size: 0;
    border-top: 1px solid $secondary-border-color;

    @include breakpoint(small) {
      width: 100%;
    }

    &.first {
      padding-top: 0 !important;
      border-top: 0;
    }
  }

  .result {

    figure, .details {
      display: inline-block;
      vertical-align: top;
    }

    figure {
      position: relative;
      width: 32%;

      img {
        width: 100%;
      }

      a {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2000;

        &.overlay {
          box-shadow: inset 0 0 0 1px rgba($color--black, 0.1);
        }
      }

      ~ .details {
        width: 68%;
        padding-left: 30px;
      }
    }

    .details {
      max-width: calc((#{$max-width} * 0.66) * 0.66);

      .brand {
        @extend %uc-title;
        margin: 5px 0 0;
        font-size: 10px;

        a {
          color: $light-text-color;
        }
      }

      .title {
        margin: 14px 0 0;
        font-size: 16px;
        color: $accent-color;

        a {
          color: $accent-color;
        }
      }

      .rte {
        margin: 16px 0 0;

        p {
          margin: 0;

          &:not(:first-of-type) {
            margin: 20px 0 0;
          }
        }
      }

      .price {
        margin: 16px 0 0;
        font-size: 14px;
        color: $text-color;

        .label {
          margin-right: 5px;
          color: $title-color;
        }

        .original {
          margin-right: 2px;
          text-decoration: line-through;
        }
      }
    }
  }

  .pagination {
    padding-bottom: 40px;
  }
}


.results-search-form {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  padding: 13px 11px 14px;
  margin-bottom: 56px;
  background-color: $background-color;
  border: 1px solid $primary-border-color;
  transition: $transition--short $transition--easing border;

  @include placeholder {
    color: $primary-border-color;
  }

  &:focus-within {
    background-color: transparent;
    border: 1px $text-color solid;
  }
}

.rs-form-input {
  @include font($font-accent);
  flex-grow: 1;
  order: 0;
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 14px;

  &:-ms-input-placeholder {
    color: $light-text-color;
  }

  &::-ms-input-placeholder {
    color: $light-text-color;
  }

  &::placeholder {
    color: $light-text-color;
  }

  @include breakpoint-small {
    font-size: 16px;
  }
}

.rs-form-button-search {
  @extend %icon--large;
  flex-grow: 0;
  flex-shrink: 0;
  order: 1;
  padding: 0;
  color: $light-text-color;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  .svg-icon {
    width: 18px;
    height: 19px;
  }
}

.subcollection {
  margin-top: 50px;

  @include breakpoint(full-down) {
    width: $content-width-tablet-desktop;
  }

  @include breakpoint(small) {
    width: 100%;
    min-width: 290px;
    margin-top: 10px;
  }

  @media(max-width: 940px) {
    &:not(:first-of-type) {
      margin-top: 40px;
    }
  }
}

.subcollection-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 40px;
  font-size: 0;
}

.subcollection-hero {
  position: relative;
}

.subcollection-hero-image {
  width: 100%;
  margin: 30px 0 15px;

  @include breakpoint(phone) {
    display: none;
  }
}

.template-collection .subcollection-hero-image + .subcollection-heading.label {
  position: absolute;
  top: calc(50% + 10px);
  width: 100%;
  margin: 0;
  color: $color--white;
  text-align: center;
  transform: translateY(-50%);

  @include breakpoint(full) {
    font-size: 56px;
  }

  @include breakpoint(phone) {
    position: static;
    top: auto;
    color: $title-color;
    transform: none;
  }
}

.subcollection-block {
  display: flex;
  justify-content: space-between;
}

.subcollection-image + .subcollection-content,
.subcollection-image {
  position: relative;
  width: calc(50% - 12px);

  @media(max-width: 940px) {
    width: calc(50% - 7.5px);
  }

  @include breakpoint(small) {
    width: 100%;
  }
}

.subcollection-image {
  @include breakpoint(small) {
    display: none;
  }
}

.subcollection-featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.subcollection-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 150px 60px;
  text-align: center;
  background-color: rgba($text-color, 0.1);

  @media(max-width: 940px) {
    padding: 120px 50px;
  }

  @include breakpoint(small) {
    padding: 50px;
  }

  @include breakpoint(phone) {
    padding: 40px 30px;
  }
}

.subcollection-heading {
  color: $title-color;

  @include breakpoint(small) {
    font-size: 28px;
  }

  @if $font-headings-capitalize {
    font-size: calc(32px * 0.875);
    text-transform: uppercase;

    @include breakpoint(small) {
      font-size: calc(28px * 0.875);
    }
  }
}

.subcollection-description {
  margin-top: 10px;
  margin-bottom: 10px;
}

.subcollection-link {
  @extend %button;
  margin-top: 20px;
}

.subcollection-collection .rte {
  margin-top: 15px;
  margin-bottom: 50px;
  color: $text-color;
  text-align: center;

  @include breakpoint(small) {
    display: none;
  }
}


.breadcrumb-navigation {
  @include font($font-accent);
  padding: 40px 90px 0;
  font-size: $font-size--body;
  text-align: center;

  @include breakpoint(small) {
    display: none;
  }

  a {
    color: $accent-color;

    &:hover {
      color: $accent-color-hover;
    }
  }

  .template-collection & {
    padding: 0;
  }

  .sep {
    padding-right: 4px;
    padding-left: 4px;
  }
}

$local-cart-mini: #000;
$local-cart-mini-sidebar: $background-color;
$local-transition-function: cubic-bezier(0.4, 0, 0.2, 1);;
$local-transition-duration: 350ms;

.cart-mini {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: transparent;
  transform: translateX(100%);
  transition: (
    transform 0ms linear $local-transition-duration,
    background-color $local-transition-duration $local-transition-function
  );
  will-change: background-color;

  &.cart-mini-open {
    pointer-events: all;
    background-color: rgba($local-cart-mini, 0.7);
    transform: translateX(0);
    transition: (
      transform 0ms linear,
      background-color $local-transition-duration $local-transition-function
    );
  }
}

.cart-mini-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: 350px;
  padding: 0 20px 20px;
  background-color: $local-cart-mini-sidebar;
  transform: translateX(100%);
  box-shadow: 0 2px 8px rgba($local-cart-mini, 0.1);
  transition: transform $local-transition-duration $local-transition-function;
  will-change: transform;

  .cart-mini-open & {
    transform: translateX(0);
  }
}

.cart-mini-header {
  @extend %uc-title;
  @include font($font-accent);
  position: relative;
  width: 100%;
  padding: 18px 18px 16px;
  font-size: 12px;
  color: $title-color;
  text-align: center;
  border-bottom: 1px solid $primary-border-color;
}

.cart-mini-header-close {
  position: absolute;
  top: 50%;
  right: -3px;
  width: 26px;
  height: 26px;
  padding: 7px;
  cursor: pointer;
  transform: translateY(-50%);

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.cart-mini-content {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
}

.cart-mini-items {
  display: flex;
  flex-direction: column;
  flex-shrink: 1;
  width: calc(100% + 15px);
  padding-right: 15px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.cart-mini-item {
  display: flex;
  flex-shrink: 0;
  padding-top: 26px;
  padding-bottom: 27px;
  border-bottom: 1px solid $primary-border-color;
}

.cart-mini-item-row {
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
  width: 100%;
  transition: opacity $local-transition-duration $local-transition-function;

  .cart-mini-item-loading & {
    pointer-events: none;
    opacity: 0.1;
  }
}

.cart-mini-item-column {
  display: flex;
  flex-direction: column;
}

.cart-mini-item-column-image {
  flex-shrink: 0;
  width: 80px;
  margin-right: 20px;
}

.cart-mini-item-column-details {
  flex-grow: 1;
  margin-right: 10px;
}

.cart-mini-item-vendor,
.cart-mini-item-title,
.cart-mini-item-variant,
.cart-mini-item-quantity,
.cart-mini-item-remove {
  @include font($font-accent);
  margin-bottom: 3px;
}

.cart-mini-item-vendor,
.cart-mini-item-variant,
.cart-mini-item-quantity,
.cart-mini-item-remove {
  color: $light-text-color;
}

.cart-mini-item-vendor,
.cart-mini-item-variant,
.cart-mini-item-quantity {
  font-size: 13px;
}

.cart-mini-item-title {
  a {
    color: $title-color;

    &:hover {
      color: morph($title-color);
    }
  }
}

.cart-mini-item-title,
.cart-mini-item-price {
  font-size: 14px;
}

.cart-mini-item-price {
  @include font($font-accent);
  display: block;
  margin-top: 10px;
  margin-bottom: 0;
}

.cart-mini-item-remove {
  font-size: 12px;
  text-align: right;
  text-decoration: underline;
  cursor: pointer;
}

.cart-mini-item-details-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.cart-mini-actions {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  padding-top: 21px;
  border-top: 1px solid $primary-border-color;

  .action-button {
    @extend %button--small;
  }
}

.cart-mini-subtotal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 0 19px;

  .cart-mini-discount + & {
    padding-top: 19px;
  }
}

.cart-mini-subtotal-heading {
  @include font($font-accent);
  font-size: $font-size--body;
  color: $title-color;
}

.cart-mini-subtotal-value {
  @include font($font-accent);
  font-size: 18px;
  color: $title-color;
}

.cart-mini-actions-cart {
  margin-right: 17px;
}

.cart-mini-actions > .cart-mini-actions-cart,
.cart-mini-actions > .cart-mini-actions-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;

  svg {
    width: 16px;
    height: 16px;
    margin: -10px 8px -10px 0;
  }
}

.cart-mini-empty {
  @include font($font-body);
  margin-top: 40px;
  font-size: 14px;
  text-align: center;
}

.cart-mini-item-discounts {
  @include font($font-accent);
  font-size: 13px;
  color: $accent-color;

  li {
    margin-top: 0.5rem;
  }

  .icon-sale-tag {
    width: 11px;
    height: 11px;
    margin-right: 0.15rem;
    margin-bottom: -1px;
  }
}

.cart-mini-item-original-price + .cart-mini-item-final-price {
  margin-top: 2px;
  color: $accent-color;
}

.cart-mini-discounts {
  padding-top: 21px;
  font-size: 13px;
  color: $accent-color;

  .cart-discount {
    @include font($font-accent);
    justify-content: space-between;
  }

  .cart-discount-price {
    font-size: 14px;
  }

  .icon-sale-tag {
    width: 12px;
    height: 12px;
    margin-right: 0.15rem;
    margin-bottom: -1px;
  }
}

$local-xsmall-bp: 375px;

.template-list-collections {
  .collections {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 50px;
    padding-bottom: 40px;
    font-size: 0;

    @include breakpoint(small) {
      padding-top: 10px;
      margin-left: 0;
    }
  }

  .collection-wrap {
    margin-bottom: 25px;
  }

  .rte {
    margin-top: 15px;
    margin-bottom: 30px;
    color: $text-color;
    text-align: center;

    @media screen and (max-width: $local-xsmall-bp) {
      display: none;
    }
  }
}

.collections, .featured-collections {
  @include breakpoint(small) {
    margin-left: 0;
  }

  .collection-wrap {
    position: relative;
    display: inline-block;
    width: calc(#{percentage(1 / 3)} - 15px);
    overflow: hidden;
    vertical-align: top;

    @include breakpoint(small) {
      width: calc(#{percentage(1 / 2)} - 10px);
    }

    @media screen and (max-width: $local-xsmall-bp) {
      display: block;
      width: 100%;
      min-width: 290px;
      padding: 0;
      margin: 0 auto 50px;
    }

    &:hover .collection-wrap-image {
      transform: scale(1.03);
    }
  }

  &.row-of-2 .collection-wrap {
    width: calc(50% - 15px);
  }

  &.row-of-4 .collection-wrap {
    width: calc(25% - 15px);
  }

  .collection {
    position: relative;
    display: inline-block;
    width: 100%;
    padding-bottom: 76.66666667%;
    overflow: hidden;
    vertical-align: top;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

    &.collection-onboarding {
      padding-bottom: 0;
    }

    @include breakpoint(small) {
      height: 230px;
    }

    a {
      display: flex;
      align-items: center;
    }

    &:hover {
      .collection-overlay {
        transform: translateY(calc(-20px));
      }

      .browse {
        opacity: 1;
      }

      a {
        background-color: rgba($color--black, 0.4);
      }
    }

    .label, .browse {
      z-index: 1000;
      margin: 0;
      color: $color--white;
      text-align: center;
    }

    .label {
      @include font($font-headings);
      width: 100%;
      padding: 0 30px;
      font-size: 28px;
      text-shadow: 0 1px 5px rgba($color--black, 0.4);
      transition: $transition--short $transition--easing transform;

      @if $font-headings-capitalize {
        font-size: calc(21px * 0.875) !important;
        text-transform: uppercase;
      }
    }

    .browse {
      @extend %button, %button--alt;
      position: absolute;
      top: 100%;
      left: 50%;
      margin-top: 15px;
      color: $accent-color;
      background-color: $background-color;
      opacity: 0;
      transform: translateX(-50%);
      transition: opacity $transition--long $transition--easing,
                  background-color $transition--short $transition--easing,
                  border-color $transition--short $transition--easing;
    }

    .collection-overlay {
      position: relative;
      width: 100%;
      transition: transform $transition--long $transition--easing;
    }

    a {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2000;
      background-color: rgba($color--black, 0.2);
      background-image: url("//www.lityourdreams.com/cdn/shop/t/11/assets/ie-product-overlay-bg.png?v=130413172460849243661616346315") repeat 50% 50%;
      transition: background-color $transition--medium $transition--easing;
    }
  }
}

.collections .label {
  margin-top: 25px;
  font-size: 22px;
  color: $title-color;
  text-align: center;
}

.collection-wrap-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: center;
  background-size: cover;
  transition: $transition--longer $transition--easing transform;
}

.collection-image {
  width: 100%;
  min-height: 200px;
  object-fit: cover;
  object-position: center;
}

.collection-title-header {
  padding-top: 0;
  background-size: cover;

  &.page-title {
    // Fallback styles incase image fails to load
    min-height: 200px;
    overflow: hidden;
  }
}

.collection-header .breadcrumb-navigation {
  text-align: center;
}

.collection-content {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.picture-block {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  background-color: mix($light-text-color, $background-color, 10%);

  @media screen and (max-width: 700px) {
    flex-direction: column;
  }

  &.picture-block--desktop-height-small {
    .picture-block-image {
      height: 500px;
    }
  }

  &.picture-block--desktop-height-medium {
    .picture-block-image {
      height: 600px;
    }
  }

  &.picture-block--desktop-height-large {
    .picture-block-image {
      height: 700px;
    }
  }

  &.picture-block--desktop-height-extra-large {
    .picture-block-image {
      height: 800px;
    }
  }

  @include breakpoint(large) {
    &.picture-block--desktop-height-natural {
      .picture-block-image {
        height: auto;

        img,
        svg {
          position: static;
          max-width: 100%;
          min-height: auto;
          transform: translate(0, 0);
        }

        @supports (-webkit-appearance:none) {
          img {
            width: auto;
            height: auto;
            object-fit: fill;
          }
        }
      }
    }
  }

  @include breakpoint(small) {
    &.picture-block--mobile-height-small {
      .picture-block-image {
        height: 300px;
      }
    }

    &.picture-block--mobile-height-medium {
      .picture-block-image {
        height: 400px;
      }
    }

    &.picture-block--mobile-height-large {
      .picture-block-image {
        height: 500px;
      }
    }

    &.picture-block--mobile-height-natural {
      .picture-block-image {
        height: auto;

        img,
        svg {
          position: static;
          max-width: 100%;
          min-height: auto;
          transform: translate(0, 0);
        }

        @supports (-webkit-appearance:none) {
          img {
            width: auto;
            height: auto;
            object-fit: fill;
          }
        }
      }
    }
  }

  .picture-block-wrapper {
    position: relative;
  }

  + .picture-block.home-section {
    margin-top: 0;
  }
}

.home-section.picture-block-no-margin {
  margin-top: 0;
}

.picture-block-image {
  position: relative;
  height: 100%;
  overflow: hidden;
  background-position: center center;
  background-size: cover;

  img,
  svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
  }

  @supports (-webkit-appearance:none) {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.picture-block + .content-area .section-border {
  border-top: 0;
}

@media screen and (min-width: 700px) {
  .picture-block-right {
    .picture-block-wrapper {
      width: 50%;
    }

    .picture-block-image {
      order: 1;
      width: 50%;
    }
  }

  .picture-block-left {
    .picture-block-wrapper {
      width: 50%;
    }

    .picture-block-image {
      order: 0;
      width: 50%;
    }
  }
}

@media screen and (max-width: 700px) {
  .picture-block-wrapper .centering-wrapper {
    // Override normal centering style on smallest screens
    position: static;
    display: relative;
  }

  .picture-block-content {
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 0 auto;
  }
}

.picture-block-content {
  max-width: 60%;
  text-align: center;
}

.picture-block-heading {
  @include font($font-headings);
  margin-bottom: 30px;
  font-size: 60px;
  line-height: 62px;
  color: $title-color;

  @media screen and (max-width: 800px) {
    font-size: 45px;
    line-height: 46px;
  }

  @media screen and (max-width: 500px) {
    font-size: 32px;
    line-height: 32px;
  }
}

.picture-block-body {
  color: $light-text-color;
}

@media screen and (max-width: 700px) {
  .picture-block-image {
    width: 100%;
  }
}

.picture-block-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: mix($light-text-color, $background-color, 10%);

  p {
    max-width: 75%;
  }
}

$ls-dimmer-background-color: rgba(0, 0, 0, 0.7);

.live-search {
  display: flex;
  align-items: center;
  margin-right: 6px;
  margin-left: 6px;
}

.ls-button-search {
  @extend %icon--large;
  padding: 0;
  color: $header-action-link-color;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  .live-search-visible & {
    opacity: 0;
  }
}

.ls-label {
  @include font($font-accent);
  margin-right: 6px;
  margin-left: 6px;
  font-size: 14px;
  color: $header-action-link-color;

  .header-minimal & {
    display: none;
  }

  @include breakpoint-small {
    display: none;
  }
}

.ls-dimmer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 7000;
  display: block;
  width: 100vw;
  height: 100vh;
  background-color: $ls-dimmer-background-color;
  content: "";
  transition: opacity $transition--long $transition--easing;

  @include breakpoint-small {
    opacity: 1;
  }

  @include breakpoint-large {
    pointer-events: none;
    opacity: 0;
  }

  .live-search-hidden & {
    @include breakpoint-small {
      top: -100%;
      left: -100%;
      pointer-events: none;
      opacity: 0;
    }

    @include breakpoint-large {
      top: -100%;
      left: -100%;
      pointer-events: none;
      opacity: 0;
    }
  }
}

.ls-form {
  position: absolute;
  top: 0;
  z-index: 7500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 9px;
  background-color: $background-color;
  border-bottom: 1px solid $header-action-link-color;
  opacity: 1;
  transition: (
    opacity $transition--medium $transition--easing 0.05s,
    width $transition--medium $transition--easing,
    border-color $transition--medium $transition--easing
  );

  @include breakpoint-small {
    position: fixed;
    left: 0;
    padding: 14px 18px 14px 15px;
    border-bottom: 0;
    transition: padding-left $transition--short $transition--easing;
  }

  @include breakpoint-large {
    width: 270px;
  }

  .live-search-alignment-left & {
    @include breakpoint-large {
      left: 0;
    }
  }

  .live-search-alignment-right & {
    @include breakpoint-large {
      right: 0;
    }
  }

  .live-search-hidden & {
    pointer-events: none;
    opacity: 0;

    @include breakpoint-small {
      padding-left: 30px;

      .ls-input {
        opacity: 0;
      }
    }

    @include breakpoint-large {
      width: 160px;
      border-color: transparent;

      .ls-input {
        opacity: 0;
      }

      .ls-form-button-close {
        opacity: 0;
        transform: translateX(-10px);
      }
    }
  }
}

.ls-form-button-search {
  @extend %icon--large;
  flex-grow: 0;
  flex-shrink: 0;
  order: 0;
  padding: 0;
  color: $header-action-link-color;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  .svg-icon {
    width: 18px;
    height: 19px;
  }
}

.ls-form-button-close {
  @extend %icon--large;
  flex-grow: 0;
  flex-shrink: 0;
  order: 2;
  padding: 0;
  color: $header-action-link-color;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  @include breakpoint-large {
    opacity: 1;
    transform: translateX(0);
    transition: (
      opacity $transition--medium $transition--easing,
      transform $transition--medium $transition--easing
    );
  }

  .svg-icon {
    width: 14px;
    height: 14px;
  }
}

.ls-input {
  @include font($font-accent);
  flex-grow: 1;
  order: 1;
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 14px;

  @include breakpoint-large {
    opacity: 1;
    transition: opacity $transition--short $transition--easing 0.1s;
  }

  &:-ms-input-placeholder {
    color: $light-text-color;
  }

  &::-ms-input-placeholder {
    color: $light-text-color;
  }

  &::placeholder {
    color: $light-text-color;
  }

  @include breakpoint-small {
    font-size: 16px;
    transition: opacity $transition--short $transition--easing;
  }
}

$placeholder-color: $light-text-color; // TODO
$ls-results-shadow: rgba(#000, 0.1);

.ls-results {
  position: fixed;
  z-index: 8000;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 750px;
  text-align: left;
  background-color: $background-color;
  border: 1px solid $primary-border-color;
  box-shadow: 0 2px 8px $ls-results-shadow;
  transition: opacity $transition--short $transition--easing;

  @include breakpoint-small {
    bottom: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: none;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 0;
    box-shadow: none;
    transition: none;
  }

  @include breakpoint-large {
    // Move 1px into parent element, to cover parent element's border
    margin-top: -1px;
  }

  .live-search-results-hidden & {
    @include breakpoint-small {
      pointer-events: none;
      opacity: 0;
    }

    @include breakpoint-large {
      pointer-events: none;
      opacity: 0;
    }
  }
}

.ls-results-products {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  width: 67%;
  padding: 20px;
  transition: opacity $transition--short $transition--easing;
  
  @include breakpoint-small {
    flex-grow: 0;
    width: 100%;
  }
}

// Placeholder styles

.lsrp-content-placeholder {
  display: flex;
  width: 100%;
  margin-bottom: 25px;

  &:last-child {
    margin-bottom: 0;
  }
}

.lsrpc-placeholder-figure,
.lsrpcp-content-title,
.lsrpcp-content-price,
.lsrppc-placeholder-title,
.lsrppc-placeholder-date {
  width: 100%;

  &::before {
    @extend %placeholder-pulse;
    display: block;
    width: 100%;
    height: 10px;
    content: "";
  }
}

.lsrpc-placeholder-figure {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  margin-right: 15px;

  &::before {
    height: 100%;
  }
}

.lsrpc-placeholder-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.lsrpcp-content-title {
  max-width: 240px;
  margin-bottom: 7px;
}

.lsrpcp-content-price {
  max-width: 120px;
}

.ls-results-postspages {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  width: 33%;
  padding: 20px;
  border-left: 1px solid $primary-border-color;

  @include breakpoint-small {
    width: 100%;
    border-left: none;
  }
}

.lsrpp-content-placeholder {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 28px;

  &:last-child {
    margin-bottom: 0;
  }
}

.lsrppc-placeholder-title {
  max-width: 165px;
  margin-bottom: 7px;
}

.lsrppc-placeholder-date {
  max-width: 82px;
}

// End placeholder styles

.lsr-products-header,
.lsr-postspages-header {
  margin-bottom: 15px;

  .live-search-results-placeholder & {
    display: none;
  }
}

.lsrp-header-title,
.lsrpp-header-title {
  @extend %uc-title;
  @include font($font-headings-secondary);
  font-size: 12px;
  color: $title-color;
}

.lsr-products-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.lsrp-content {
  position: relative;
  display: flex;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid $primary-border-color;
  transition: background-color $transition--short $transition--easing;

  &:first-child {
    border-top: 1px solid $primary-border-color;
  }

  &:last-child {
    @include breakpoint(large) {
      padding-bottom: 0;
      border-bottom: 0;
    }
  }

  &:hover {
    background-color: rgba($primary-border-color, 0.15);
  }
}

.lsrpc-figure {
  flex-shrink: 0;
  width: 50px;
  height: auto;
  margin-right: 15px;

  img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
  }
}

.lsrpc-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.lsrpcc-vendor {
  @include font($font-accent);
  margin-bottom: 4px;
  font-size: 13px;
  color: $light-text-color;
}

.lsrpcc-title,
.lsrpcc-price {
  @include font($font-accent);
  margin-bottom: 2px;
  font-size: 14px;
}

.lsrpcc-title {
  margin-bottom: 5px;
}

.lsrpcc-price {
  .original {
    margin-right: 2px;
    text-decoration: line-through;
  }
}

.lsrpc-url {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lsrp-empty {
  @include font($font-headings);
  padding-top: 20px;
  font-size: 18px;
  color: $title-color;
  border-top: 1px solid $primary-border-color;
}

.lsrp-results-empty {
  margin-top: 5px;
  font-size: 15px;
}

.lsrp-products-viewall {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 15px;
}

.lsrpp-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 12px;
  padding-bottom: 12px;

  &:first-child {
    padding-top: 6px;
  }
}

.lsrppc-title {
  @include font($font-body);
  margin-bottom: 2px;
  font-size: 15px;
  color: $text-color;
}

.lsrppc-date {
  @include font($font-accent);
  font-size: 13px;
  color: $light-text-color;
}

.lsrppc-url {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lsr-footer {
  display: flex;
  width: 100%;
  padding: 20px;
  border-top: 1px solid $primary-border-color;

  @include breakpoint-small {
    position: fixed;
    bottom: 0;
    padding: 10px;
    border-top: 0;
  }

  .live-search-results-placeholder &,
  .live-search-results-footer-hidden & {
    @include breakpoint-small {
      display: none;
    }

    @include breakpoint-large {
      display: none;
    }
  }
}

.lsr-footer-viewall {
  @extend %button, %button--alt;
  width: 100%;
}

.pagination {
  padding: 12px 0;
  clear: both;
  text-align: center;

  > li {
    @include font($font-accent);
    display: inline-block;
    font-size: 14px;

    &:first-child {
      padding-left: 0;
    }

    &.previous, &.next {
      color: rgba($text-color, 0.5);
      transition: $transition--short $transition--easing color;

      &:hover {
        color: morph(rgba($text-color, 0.5));
      }
    }

    &.previous a, &.next a {
      color: $accent-color;
      transition: $transition--short $transition--easing color;

      &:hover {
        color: $accent-color-hover;
      }
    }

    &.position {
      margin: 0 25px;
      color: $text-color;
      transition: $transition--short $transition--easing color;

      &:hover {
        color: morph($text-color);
      }
    }
  }

  &.jump-to-page {
    .jump-to-link {
      opacity: 0.5;

      &.active {
        opacity: 1;
      }

      a {
        color: $text-color;
        transition: $transition--short $transition--easing color;

        &:hover {
          color: morph($text-color);
        }
      }
    }

    li {
      margin: 0 5px;
      border: 0;

      &:nth-of-type(2):not(.previous) {
        margin-left: 15px;
      }

      &:nth-last-child(2):not(.next) {
        margin-right: 15px;
      }
    }
  }
}

.pswp {
  z-index: 9000;
}

.pswp__bg {
  background-color: $background-color;
}

.pswp__top-bar {
  height: 45px;
  background-color: transparent;
}

.pswp__button {
  &.pswp__button--close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-top: 10px;
    margin-right: 10px;
    background-color: rgba($background-color, 0.75);
    background-image: none;
    border-radius: 50%;
    opacity: 1;

    @include breakpoint(small) {
      width: 36px;
      height: 36px;
    }

    svg {
      display: block;
      width: 18px;
      height: 18px;
      color: $title-color;
      pointer-events: none;
      fill: currentColor;

      @include breakpoint(small) {
        width: 16px;
        height: 16px;
      }
    }
  }
}

.pswp__img--placeholder {
  background-color: $color--white;
}

.product-list {
  font-size: 0;
  text-align: left;
}

.product-list,
.collections {
  &::before,
  &::after {
    order: 999;
    min-width: calc(50% - 15px);
    content: "";
  }

  &.row-of-3 {
    &::before,
    &::after {
      min-width: calc(33.33333% - 15px);
    }
  }

  &.row-of-4 {
    &::before,
    &::after {
      min-width: calc(25% - 15px);
    }
  }
}

.product {
  display: inline-block;
  width: 25%;
  padding-left: 30px;
  text-align: left;
  vertical-align: top;

  @include breakpoint(small) {
    display: block;
    width: 60%;
    min-width: 290px;
    padding-left: 0;
    margin: 0 auto 35px;
    text-align: center;

    &.last {
      margin-bottom: 0;
    }
  }

  figure {
    > a {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2000;

      &.with-border {
        box-shadow: inset 0 0 0 1px rgba($color--black, 0.1);
      }
    }
  }

  .with-border + .overlay {
    @include breakpoint(small) {
      box-shadow: inset 0 0 0 1px $background-color;
    }
  }

  .quick-shop-content {
    display: none;
  }

  .quickshop-trigger {
    @include breakpoint(small) {
      display: none;
    }
  }
}

// Sale, New and Sold Out badges on product items
.badge {
  @include font($font-headings-secondary);
  display: inline-block;
  padding: 5px 7px 4px;
  margin-right: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  color: $background-color;
  text-transform: uppercase;


  @include breakpoint(full) {
    .product-list-withsidebar & {
      padding: 4px 6px;
      font-size: 11px;
    }
  }
}

.badges-wrapper {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-block;
}

.badge-sale {
  background-color: $badge-color-sale;
}

.badge-new {
  background-color: $badge-color-new;
}

.badge-soldout {
  background-color: $badge-color-soldout;
}

.product,
.quick-shop-content,
.product-area {
  .brand {
    @extend %uc-title;
    margin: 25px 0 0;
    font-size: $font-size--body;

    @include breakpoint(small) {
      margin-top: 30px;
    }

    a {
      color: $light-text-color;
    }
  }

  .title {
    @include font($font-headings);
    margin: 10px 0 0;
    font-size: 16px;
    color: $title-color;

    @if $font-headings-capitalize {
      text-transform: uppercase;
    }

    a {
      color: $title-color;
      &:hover { color: $accent-color; }
    }
  }

  .price {
    margin: 13px 0 0;
    font-size: 14px;
    color: $text-color;

    .label {
      margin-right: 5px;
      color: $title-color;
    }

    .original {
      margin-right: 2px;
      text-decoration: line-through;
    }
  }
}

.product-inner {
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &:hover {
    overflow: visible;

    .product-card-overlay,
    .product-card-footer {
      opacity: 1;
      transform: translateY(0);
    }

    .product-card-overlay-content {
      opacity: 1;
    }

    .product-card-figure {
      overflow:visible;
    }
  }
}

.product-card-figure {
  overflow: hidden;
}

.product-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  height: auto;
  padding: 14px 0 0;
  background-color: $background-color;
  opacity: 0;
  transform: translateY(100%);
  transition: (
    opacity 200ms $transition--easing,
    transform 200ms $transition--easing
  );
  will-change: (
    transform,
    opacity
  );

  .with-border + & {
    box-shadow: 0 -1px 0 rgba($color--black, 0.1);
  }

  @include breakpoint(small) {
    display: none;
  }

  &.product-card-overlay--hide {
    display: none;
  }

  .product figure > & {
    top: auto;
  }

  .product-card-overlay-content {
    opacity: 0;
    transition: opacity 400ms $transition--easing;

    .product-card-alt & {
      opacity: 1;
    }
  }

  .product-card-alt & {
    padding: 15px 17px;
    background-color: rgba($accent-color, 0.95);

    .product-card-overlay-content {
      transition: opacity 400ms $transition--easing;
    }
  }

  .brand,
  .title,
  .price {
    color: $background-color;
  }
}

.product-card-footer {
  .product-card-alt & {
    opacity: 0;
    transition: opacity 200ms $transition--easing;
    will-change: opacity;
  }
}

.product-card-footer,
.product-card-footer-mobile {
  margin-top: 16px;
}

.product-card-footer {
  display: block;

  @include breakpoint(small) {
    display: none;
  }
}

.product-card-footer-mobile {
  display: none;

  @include breakpoint(small) {
    display: block;
  }
}

.product-card-details {
  .brand {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
  }

  .title {
    margin-top: 5px;
    margin-bottom: 9px;
    font-size: 18px;
  }

  .price {
    @include font($font-accent);
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
  }
}

.product-card-interactions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.product-card-interaction {
  @extend %button--small;
  @include font($font-headings-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - 6px);
  padding-left: 5px;
  padding-right: 5px;

  @include breakpoint(small) {
    width: 100%;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  &:only-child {
    width: 100%;
  }
}

.product-card-interaction-quickshop {
  @extend %button--alt;

  @include breakpoint(small) {
    display: none;
  }
}

.product-card-interaction-addtocart-text {
  display: flex;
  justify-content: center;

  .addtocart-button-loading & {
    display: none;
  }
}

.product-card-interaction-addtocart-available {
  display: none;

  .addtocart-button-active & {
    display: flex;
    justify-content: center;
  }
}

.product-card-interaction-addtocart-error {
  display: none;

  .addtocart-button-error & {
    display: flex;
    justify-content: center;
  }
}

.product-card-interaction-addtocart-spinner {
  display: none;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  animation: spinner 700ms infinite cubic-bezier(.69,.31,.56,.83);
  transform-origin: center center;

  .addtocart-button-loading & {
    display: flex;
  }

  svg {
    display: block;
    width: 18px;
    height: 18px;
  }

  .addtocart-button-loading.product-submit & {
    width: 19px;
    height: 19px;

    svg {
      width: 19px;
      height: 19px;
    }
  }
}

.product-card-figure {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .product-grid-square & {
    @include ratio(1 1);
  }

  .product-grid-tall & {
    @include ratio(4 5);
  }

  .product-grid-taller & {
    @include ratio(2 3);
  }

  .product-grid-wide & {
    @include ratio(3 2);
  }

  .product-grid-square &,
  .product-grid-tall &,
  .product-grid-taller &,
  .product-grid-wide & {
    .placeholder-svg {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }

  img {
    position: absolute;
    order: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity $transition--medium $transition--easing;

    &:not([data-rimg="loaded"]) {
      position: absolute;
      opacity: 0;
    }

    @supports(object-fit: cover) {
      object-fit: cover;

      &:last-of-type {
        order: 1;
        opacity: 0;
      }

      &:first-of-type {
        order: 0;
        opacity: 1;
        transition: opacity 0ms $transition--easing;
      }
    }

    .product-grid-default & {
      &:last-of-type {
        position: absolute;
        top: 0;
        left: 0;
        order: 1;
        width: 100%;
        height: auto;
        max-width: 100%;
        opacity: 0;
      }

      &:first-of-type {
        position: relative;
        order: 0;
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        opacity: 1;
      }
    }
  }

  &:hover img {
    @supports(object-fit: cover) {
      &:first-of-type {
        order: 0;
        opacity: 1;
      }

      &:last-of-type {
        order: 1;
        opacity: 1;
      }
    }

    .product-grid-default & {
      &:first-of-type {
        position: absolute;
        left: 0;
        order: 0;
        width: 100%;
        height: auto;
        opacity: 1;
      }

      &:last-of-type {
        position: relative;
        order: 0;
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        opacity: 1;
      }
    }
  }
}

.product-card-figure-ie {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;

  @supports(object-fit: cover) {
    display: none;
  }

  &:last-of-type {
    display: none;
  }

  &:first-of-type {
    display: block;

    @supports(object-fit: cover) {
      display: none;
    }
  }

  .product-card-figure:hover & {
    &:first-of-type {
      display: none;
    }

    &:last-of-type {
      display: block;

      @supports(object-fit: cover) {
        display: none;
      }
    }
  }
}

.option {
  display: block;
  margin-bottom: 26px;

  &:last-child {
    margin-bottom: 0;
  }
}

.option-header {
  display: block;
  margin-bottom: 12px;
  text-align: left;
}

.option-name {
  @extend %label;
  margin-bottom: 0;
}

.option-values {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.option-value {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  margin-bottom: 14px;

  &:last-child {
    margin-right: 0;
  }
}

.option-value-input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;

  &:checked + .option-value-name {
    color: $button-text-color;
    background-color: $accent-color;
    border-color: darken($accent-color, 15%);
  }

  &:checked:disabled + .option-value-name {
    color: $button-text-color;
    background-color: mix($background-color, $accent-color, 75%);
    border-color: mix($background-color, $accent-color, 75%);
  }

  &:disabled + .option-value-name {
    background: $background-color;
    color: $lightest-text-color;
    border-color: $primary-border-color;
    opacity: 0.5;
    text-decoration: line-through;
  }
}

.option-value-name {
  @extend %input;
  position: relative;
  z-index: 1;
  min-width: 46px;
  padding: 11px 12px;
  text-align: center;
  border: 1px solid $primary-border-color;
  transition: background-color $transition--short $transition--easing,
              border-color $transition--short $transition--easing,
              color $transition--short $transition--easing;
}

// Shopify Smart Payment Buttons
// Since their styles are added to the page dynamically, we have to override
// using a higher "specificity"--hence the `html` selector.
html {
  .shopify-payment-button {
    padding-bottom: 0;
    margin: 0 auto -22px auto;

    @include breakpoint(small) {
      padding-bottom: 0;
    }

    .shopify-payment-button__button {
      @extend %button-large;
      overflow: hidden; // to display rounded corners

      div[role="button"] {
        max-height: 44px !important;
      }

      &:hover {

      }

    }

    .shopify-payment-button__button--unbranded {
      @extend %button;
      padding: 17px 24px;
      font-size: $font-size--button;
      line-height: 1;

      &:hover {
        color: $button-text-color;
        background-color: $accent-color-hover;
      }

      &:disabled {
        cursor: default;
      }

      &:disabled:hover {
        background-color: $accent-color;
        border: 1px solid $accent-color;
      }
    }

    svg {
      width: 100%;
    }
  }

  .shopify-payment-button__more-options {
    @include font($font-accent);
    padding-right: 10%;
    padding-left: 10%;
    margin-bottom: 25px;
    font-size: 14px;
    color: $accent-color;

    &.shopify-payment-button__button--visible {
      margin-bottom: 30px;

      @include breakpoint(small) {
        margin-bottom: 10px;
      }
    }

    &:hover:not([disabled]) {
      color: $accent-color-hover;
      text-decoration: none;
    }
  }
}

// Hide the payment buttons if the selected variant is out of stock
.product-form-outofstock .shopify-payment-button {
  display: none;
}

.promo-block {
  position: relative;
  display: flex;
  align-content: space-between;
  flex-wrap: wrap;
  padding: 25px;
  margin-bottom: 42px;
  color: $accent-color;
  border: 1px solid;

  &:hover {
    color: $accent-color;
  }

  @media (min-width: 1071px) {
    .product-list.row-of-3.product-list-withsidebar &,
    .product-list.row-of-4.product-list-withsidebar &,
    .product-grid-wide .product-list.row-of-4:not(.product-list-withsidebar) &.promo-block--quickshop-enabled {
      padding: 20px;

      .promo-block--content {
        p,
        a {
          font-size: 24px;
        }
      }
    }
  }

  @media (max-width: 640px) {
    padding: 20px;
  }
}

.promo-block--secondary {
  color: $background-color;
  background-color: $accent-color;
  border-color: $accent-color;

  &:hover {
    color: $background-color;
  }

  .promo-block--content {
    &::after {
      border-color: $background-color;
    }

    p {
      color: $background-color;
    }

    a {
      color: $background-color;
    }
  }

  .promo-block--button {
    @extend %button--secondary, %button--small;
  }
}

.promo-block--content {
  @extend %uc-title;
  @include font($font-headings);
  position: relative;
  align-self: flex-start;
  width: 100%;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;

  &::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 75px;
    border-bottom: 1px solid $accent-color;
    content: "";
  }

  &:empty {
    opacity: 0;
  }

  p {
    font-size: 28px;
    line-height: 1.3;

    &:last-of-type {
      margin-bottom: 35px;
    }

    @include breakpoint(phone) {
      font-size: 24px;
    }
  }

  a {
    position: relative;
    z-index: 1;
    font-size: 28px;
    text-decoration: underline;

    @include breakpoint(phone) {
      font-size: 24px;
    }
  }
}

.promo-block--button {
  @extend %button--small;
  margin-top: 30px;
}

.promo-block--link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.quickshop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba($color--black, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms linear;

  @include breakpoint(m) { display: none; }

  &.quickshop-visible {
    opacity: 1;
    visibility: visible;
  }
}

.quickshop-content {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 960px;
  max-height: 90%;
  padding: 30px 0 30px 30px;
  overflow: hidden;
  pointer-events: none;
  background-color: $background-color;
  opacity: 0;
  transition: $transition--short $transition--easing opacity;

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // IE 11 needs a fixed height so the scroll bar in .quickshop-product
    // is displayed when required.
    height: 90%;
  }

  .quickshop-loaded & {
    pointer-events: all;
    opacity: 1;
  }

  .product-area {
    padding-top: 0;
    padding-bottom: 10px;
  }
}

.quickshop-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 30px;
  height: 30px;
  padding: 7px;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.quickshop-spinner {
  opacity: 1;

  .quickshop-loaded & {
    opacity: 0;
  }
}

.quickshop-product {
  width: 100%;
  height: auto;
  padding-right: 30px;
  overflow-y: auto;
}

img {
  &[data-rimg="loading"] {
    background-image: none;
  }

  &[data-rimg="lazy"],
  &[data-rimg="loading"],
  &[data-rimg="loaded"] {
    @extend %placeholder-pulse;
  }

  &[data-rimg="loaded"] {
    background-color: inherit;
  }
}

.no-js {
  img[data-rimg="lazy"] {
    display: none !important;
  }

  img[data-rimg="noscript"] {
    max-width: 100%;
    opacity: 1;
  }
}

.collection-wrap {
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;

    &[data-rimg="noscript"] {
      width: 100%;
      height: 100%;
      opacity: 1;
      object-fit: fill;
    }
  }
}

.sharethis {
  position: relative;
  display: flex;
  align-self: flex-start;
}

.sharethis-trigger {
  @include font($font-accent);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  padding: 0;
  color: $text-color;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  outline: inherit;

  &:hover {
    color: morph($text-color, 1);

    .svg-icon {
      color: morph($text-color, 1);
    }
  }

  @include breakpoint(small) {
    flex-direction: row;
    justify-content: center;
    width: 100%;
  }
}

.sharethis-modal {
  @include opacity(0);
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 21px 13px;
  background-color: $background-color;
  border: 1px solid $primary-border-color;
  transform: translate(-50%, 10px);
  box-shadow: 0px 2px 8px rgba($color--black, 0.08);

  &.animating,
  &.visible {
    display: flex;
  }

  &.animating-in,
  &.animating-out {
    transition: transform $transition--medium $transition--easing,
    opacity $transition--medium $transition--easing;
  }

  &.visible {
    @include opacity(1);
    transform: translate(-50%, 0);
  }

  &.sharethis-right-aligned {
    right: 0;
    left: auto;
    transform: translate(0, 10px);

    &.visible {
      transform: translate(0, 0);
    }
  }

  &.sharethis-left-aligned {
    right: auto;
    left: 0;
    transform: translate(0, 10px);

    &.visible {
      transform: translate(0, 0);
    }
  }
}

.sharethis-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 18px;
  margin: 0 7px;
  color: $text-color;
  transition: color $transition--short $transition--easing;

  svg {
    display: block;
    width: auto;
    height: 18px;
  }
}

.sharethis-email {
  svg {
    height: 16px;
  }
}

.cart-shipping-calculator {
  display: flex;
  width: 100%;
  margin-top: 45px;

  @include breakpoint(small) {
    flex-wrap: wrap;
    margin-top: 35px;
  }
}

.cart-shipping-calculator-column {
  display: flex;
  align-self: flex-start;
  flex-wrap: wrap;
  max-width: 370px;

  @include breakpoint(small) {
    max-width: none;

    &:not(:first-child) {
      margin-top: 35px;
    }
  }

  &.wrapper-response {
    margin-left: 40px;

    @include breakpoint(small) {
      margin-left: 0;
    }
  }
}

.cart-shipping-calculator-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  font-size: 14px;

  &:not(:last-child) {
    margin-bottom: 15px;
  }

  @include breakpoint(small) {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.cart-shipping-calculator-select-wrapper {
  position: relative;
}

.cart-shipping-calculator-select {
  @include font($font-body);
  width: 100%;
  padding: 14px 42px 14px 14px;
  line-height: 14px;
  background: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.cart-shipping-calculator-select-icon {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 12px;
  pointer-events: none;
  transform: translateY(-50%);

  svg {
    display: block;
    width: 100%;
  }
}

.cart-shipping-calculator-label {
  @include font($font-body, $font-weight: bolder);
  font-size: 14px;
  text-align: right;

  @include breakpoint(small) {
    text-align: left;
  }
}

.cart-shipping-calculator-select-wrapper,
.cart-shipping-calculator-input,
.cart-shipping-calculator-button {
  flex-shrink: 0;
  width: 269px;
  margin-left: 12px;

  @include breakpoint(small) {
    width: 100%;
    margin-top: 12px;
    margin-left: 0;
  }
}

.shipping-rates {
  margin-left: 25px;
  list-style: disc;
}

.cart-wrapper-response {
  @include font($font-body);
  font-size: $font-size--body;

  > p {
    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

// links
.modal-dommo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 100000;
}
.modal-container {
  width: 98vw;
  height: 80vh;
}
.modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-top: 10px;
  margin-right: 10px;
  background-color: rgba(255,255,255,.75);
  background-image: none;
  border-radius: 50%;
  opacity: 1;
  background-position: 0 -44px;
  position: relative;
  cursor: pointer;
    overflow: visible;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    float: right;
    opacity: .75;
    transition: opacity .2s;
    box-shadow: none;
}
.dm_button {
  background: #fff;
  border: 1px solid #98DBC9;
  padding: .2rem 1rem;
  color: #62AA96;
}
.dm_button:hover {
  background: #98DBC9;
  color: white;
}
.gallery-inner {
  transition: all .5s ease;
}









.header-minimal nav.full.bordered {
}


.store-title.store-logo {
  display: none;
}
.dic-19-update-layout-home {}
#epb_content {
  padding-left: 30vw;
}
@media(min-width: 1px) {
  .w-full {
      width: 100%;
  }
  .grid {
      display: grid;
      box-sizing: border-box;
      border-width: 0;
      border-style: solid;
      border-color: currentColor;
  }
  .h-vw-50 {
    height: 50vw;
  }
  .right-4 {
    right: 1rem;
  }
  .left-4 {
    left: 1rem;
  }
  .bottom-4 {
    bottom: 1rem;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .col-span-4 {
    grid-column: span 4 / span 4;
  }
  .col-span-5 {
    grid-column: span 5 / span 5;
  }
  .col-span-6 {
    grid-column: span 6 / span 6;
  }
  .col-span-7 {
    grid-column: span 7 / span 7;
  }
  .text-white {
    color: white;
  }
}

@media(min-width: 1px) {
  .new-logo {
      position: fixed;
      background-color: white;
      left: 2rem;
      top: 0;
      width: 8rem;
      height: 8rem;
      padding: 1rem;
      z-index: 5000;
  }
  .new-logo a {
      display: block;
  }
  .new-logo a img {
      width: 6rem;
      height: 6rem;
  }
  .header-minimal nav.full.bordered {

  }
  .box a {
      display: block;
  }
  .content-background {
      background-size: cover;
      height: 100%;
      animation: normal;
  }
  .content-box {
      padding: 1rem;
      width: 100%;
  }
  .content-box h1,
  .content-box h2,
  .content-box h3 {
      color: #2C4986;
      font-weight: 500;
  }
  .hashtag-section {
    margin: 0 auto;
    margin-top: 2rem;
  }
  .left-content {
      text-align: left;
      justify-content: start;
  }
  .right-content {
      text-align: right;
      justify-content: end;
  }
  .top-content {
      display: flex;
      justify-content: start;
  }
  .bottom-content {
      display: flex;
      align-items: flex-end;
  }
  .vertical-space-content {
      justify-content: space-around;
  }
  .text-blue {
      color: #2C4986;
  }
  .main-title {
      color: #1B1E3F;
      font-weight: 500;
      font-size: 1.5rem;
  }
  .box {
      height: 30vw;
  }
  .box.box-1 {
      height: 80vw;
  }
  .box.box-2 {
      height: 60vw;
  }
  .box.box-3 {
      height: 45vw;
  }
  .box-r-1\/2 {
      height: 50vw;
  }
  .box.box-scuare {
      height: 95vw;
  }
  .box h3 {
      font-size: 1.5rem;
      font-weight: 300;
  }
  .box figure {
      background: #0E0E0E;
      overflow: hidden;
  }
  .box:hover img,
  .box figure img:hover {
      opacity: .98;
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
  }

  .box figure img {
      background: linear-gradient( rgba(0, 0, 0, 0.22),rgba(0, 0, 0, 0.22));
      opacity: .8;
      -webkit-transition: .3s ease-in-out;
      transition: .3s ease-in-out;
      -webkit-transform: scale(1);
      transform: scale(1);
  }
  .flex-col {
    flex-direction: column;
  }
  .object-cover {
    object-fit: cover;
  }
  .w-full {
    width: 100%;
  }
  .h-vw-50 {
    height: 50vw;
  }
  .h-full {
    height: 100%;
  }
  .flex {
    display: flex;
  }
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .boxed {
    width: 100%;
  }
}

@media(min-width: 640px) {
  .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:h-full {
    height: 100%;
  }
  .sm\:absolute {
      position: absolute;
  }
  .sm\:h-vw-23 {
    height: 23vw;
  }
  .sm\:h-vw-35 {
      height: 35vw;
  }
  .sm\:.box-r-1\/2 {
      height: 50vw;
  }
  .box.box-1 {
      height: 30vw;
  }
  .box.box-2 {
    height: 25vw;
  }
  .boxed {
    width: 90vw;
  }
}
@media(min-width: 768px) {
  .gap-1 {
      gap: 0.25rem;
  }
  .md\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  
  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .md\:right-8 {
    right: 2rem;
  }
  .h-vw-23 {
    height: 23vw;
    }
  .h-vw-25 {
    height: 25vw;
  }
  
  .h-vw-60 {
      height: 60vw;
  }
  .h-vw-30 {
      height: 30vw;
  }
  .h-vw-35 {
      height: 35vw;
  }
  .h-vw-45 {
      height: 45vw;
  }
}

@media(min-width: 764px) {
  .content-box {
      padding: 2rem;
  }
}
@media(min-width: 1280px) {
  .content-box {
      padding: 4rem;
  }
}