//Flexbox
// Flexbox display
@mixin flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  
  // Inline flexbox display
  @mixin inline-flexbox() {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  
  // The 'flex' shorthand
  // - applies to: flex items
  // <positive-number>, initial, auto, or none
  @mixin flex($values) {
    -webkit-box-flex: $values;
       -moz-box-flex: $values;
        -webkit-flex: $values;
        -ms-flex: $values;
            flex: $values;
  }
  
  // Flex Flow Direction
  // - applies to: flex containers
  // row | row-reverse | column | column-reverse
  @mixin flex-direction($direction) {
    -webkit-flex-direction: $direction;
       -moz-flex-direction: $direction;
        -ms-flex-direction: $direction;
            flex-direction: $direction;
  }
  
  // Flex Line Wrapping
  // - applies to: flex containers
  // nowrap | wrap | wrap-reverse
  @mixin flex-wrap($wrap) {
    -webkit-flex-wrap: $wrap;
       -moz-flex-wrap: $wrap;
        -ms-flex-wrap: $wrap;
            flex-wrap: $wrap;
  }
  
  // Flex Direction and Wrap
  // - applies to: flex containers
  // <flex-direction> || <flex-wrap>
  @mixin flex-flow($flow) {
    -webkit-flex-flow: $flow;
       -moz-flex-flow: $flow;
        -ms-flex-flow: $flow;
            flex-flow: $flow;
  }
  
  // Display Order
  // - applies to: flex items
  // <integer>
  @mixin order($val) {
    -webkit-box-ordinal-group: $val;
       -moz-box-ordinal-group: $val;
           -ms-flex-order: $val;
            -webkit-order: $val;
              order: $val;
  }
  
  // Flex grow factor
  // - applies to: flex items
  // <number>
  @mixin flex-grow($grow) {
    -webkit-flex-grow: $grow;
       -moz-flex-grow: $grow;
        -ms-flex-grow: $grow;
            flex-grow: $grow;
  }
  
  // Flex shrink
  // - applies to: flex item shrink factor
  // <number>
  @mixin flex-shrink($shrink) {
    -webkit-flex-shrink: $shrink;
       -moz-flex-shrink: $shrink;
        -ms-flex-shrink: $shrink;
            flex-shrink: $shrink;
  }
  
  // Flex basis
  // - the initial main size of the flex item
  // - applies to: flex itemsnitial main size of the flex item
  // <width>
  @mixin flex-basis($width) {
    -webkit-flex-basis: $width;
       -moz-flex-basis: $width;
        -ms-flex-basis: $width;
            flex-basis: $width;
  }
  
  // Axis Alignment
  // - applies to: flex containers
  // flex-start | flex-end | center | space-between | space-around
  @mixin justify-content($justify) {
    -webkit-justify-content: $justify;
       -moz-justify-content: $justify;
        -ms-justify-content: $justify;
            justify-content: $justify;
              -ms-flex-pack: $justify;
  }
  
  // Packing Flex Lines
  // - applies to: multi-line flex containers
  // flex-start | flex-end | center | space-between | space-around | stretch
  @mixin align-content($align) {
    -webkit-align-content: $align;
       -moz-align-content: $align;
        -ms-align-content: $align;
            align-content: $align;
  }
  
  // Cross-axis Alignment
  // - applies to: flex containers
  // flex-start | flex-end | center | baseline | stretch
  @mixin align-items($align) {
    -webkit-align-items: $align;
       -moz-align-items: $align;
        -ms-align-items: $align;
            align-items: $align;
  }
  
  // Cross-axis Alignment
  // - applies to: flex items
  // auto | flex-start | flex-end | center | baseline | stretch
  @mixin align-self($align) {
    -webkit-align-self: $align;
       -moz-align-self: $align;
        -ms-align-self: $align;
            align-self: $align;
  }

@font-face {
  font-family: MADETOMMYBold;
  src: url('./MADETOMMYBold.woff2');
  font-weight: normal;
  font-style: normal;
}

body.template-password
{
    height: fit-content;
    position: relative;
    background-color: #000000;
    overflow: hidden;
}


.password-page-background-desktop
{
    // background: url(//whitefoxboutique.com/cdn/shop/files/usa-warehouse-launch-maintenance-page-desktop-3_2000x.jpg?v=1745925799);
    background-size: cover;
    background-position: center;
    height: fit-content;
    
        width: 100vw;
        img
        {
            width: 100%;
        }
    
}

.password-page-background-mobile
{
    background-size: cover;
    background-position: center;
    display: none;
    height: 100vh;
    overflow: hidden;
    img
    {
        width: 100%;
        @include align-self(center);
    }
}

.password-main-container
{
    @include flexbox();
    @include justify-content(center);
    @include align-items(center);
    width: 100vw;
    // height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    .countdown-timer {

      top: 32vw;

        
        width: 100%;
        max-width: 420px;
        padding: 10px;
        position: relative;
        font-size: 32px;
        text-align: center;
        color: #fff;
        font-weight: 700;
        .logo-svg
        {
            position: absolute;
            left: 10%;
            top: -100%;
            width: 80%;
            fill: rgba(0,0,0,0);
        }
        .numbers
        {
            font-family: MADETOMMYBold;
            font-weight: normal;
            font-style: normal;
            min-height: 24px;
            transition: .4s all ease-in-out;
            font-size: 72px;
            line-height: 1;
            letter-spacing: 5px;
            @media screen and (max-width: 420px) {
              font-size: 56px;
            }
            @include flexbox();
            .box
            {
                @include flexbox();
                @include flex-direction(column);
                @include justify-content(flex-end);
            }
        }
        .words
        {
            // border: 1px solid blue;
            @include flexbox();
            font-size: 12px;
            .box
            {
                @include justify-content(center);
            }
        }
        p {
          font-size: 22px;
          font-weight: normal;
        }
        .box
        {
            width: calc(100% / 3);
            // border: 1px solid yellow;
            text-align: center;
            @include flexbox();
        }
        .hour-number,
        .hour-words,
        .min-number,
        .min-words
        {
            
        }
    }
}

@media only screen and (max-width: 1024px) {
    .countdown-timer {
      top: 123vw;
      color: white !important;
    }

    .password-page-background-mobile
    {
        @include flexbox();
    }
    .password-page-background-desktop
    {
        display: none;
    }

    .password-main-container 
    {
        .countdown-timer
        {
            width: 70vw;
            padding: 13px 5px;
            .numbers
            {
                min-height: 42px;
                font-size: 42px;
            }
            .words
            {
                font-size: 12px;
            }
        }
    }
}

@media only screen and (min-width: 415px) and (max-width: 1024px) {

    .password-main-container 
    {
        .countdown-timer
        {
            width: 60vw;
            padding: 20px 5px;
            .numbers
            {
                min-height: 62px;
                font-size: 62px;
            }
            .words
            {
                font-size: 22px;
            }
        }
    }

}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  @media (min-width: 992px) {
    // top: 5vh;
    // height: 95vh;
    width: 90vw;
    left: 5vw;
    overflow: visible;
  }
}
.video-container > video {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
}

@media screen and (max-aspect-ratio: 1920/1080) {
  .video-container > video {
    width: 100vw !important;
    height: auto !important;
  }
}
@media screen and (min-aspect-ratio: 1920/1080) {
  .video-container > video {
    width: 100vw !important;
    height: auto !important;
  }
}


.iti__flag {background-image: url("//whitefoxboutique.com/cdn/shop/t/880/assets/flags.png?v=110639247209705433541745836480") !important;}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {background-image: url("//whitefoxboutique.com/cdn/shop/t/880/assets/flags@2x.png?v=103499352672715989171745836481") !important;}
}

.pswd_desktop_only {
  @media (max-width: 991px) {
    display: none !important;
  }
}

.pswd_devices_only {
  @media (min-width: 992px) {
    display: none !important;
  }
}