/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Functions
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Fonts
--------------------------------------------------------------*/
@font-face {
  font-family: 'Open Sans Regular';
  src: url("src/assets/fonts/OpenSans-Regular.woff2") format("woff2"), url("src/assets/fonts/OpenSans-Regular.woff") format("woff"), url("src/assets/fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans Bold';
  src: url("src/assets/fonts/OpenSans-Bold.woff2") format("woff2"), url("src/assets/fonts/OpenSans-Bold.woff") format("woff"), url("src/assets/fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/*--------------------------------------------------------------
## Main Variables
--------------------------------------------------------------*/
/*
	Breakpoints for max-width.
 */
/*--------------------------------------------------------------
# Helpers
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Mixins
--------------------------------------------------------------*/
/*
Media Query
Example:

@include mq($sm) 			 		Will render: @media screen and (max-width: 575px)
@include mq(991px) 			 	 	Will render: @media screen and (max-width: 991px)
@include mq($sm + 1, min) 	 		Will render: @media screen and (min-width: 576px)
@include mq(992px, min) 			Will render: @media screen and (min-width: 992px)
@include mq(400, min, height) 	 	Will render: @media screen and (min-height: 400px)
@include mq(992px) {				Will render: @media screen and (max-width: 992px) and (min-width: 767px)
	@include mq(767px, min) {

	}
}
 */
/*
Insert SVG Icon DataUri as Background
The mixing takes three arguments:

First argument is a name of a file.
Second argument is a color of an icon.
Third argument is whether psuedo element should be `::before` or `::after`. The default value is `::before`.

Example:

@include svg-icon-data(ico-happy, $red, after);


Will render:
&::after {
	...
	background: url("data:image/svg+xml...") no-repeat center
	...
}
 */
/*--------------------------------------------------------------
## Print
--------------------------------------------------------------*/
@media print {
  body {
    background: #fff;
    color: #000;
    margin: 0;
    padding: 0;
    text-align: left;
  }
  a:link, a:visited {
    background: #fff;
    color: #000;
    text-decoration: underline;
  }
  a:not([href="javascript:;"])::after {
    content: " [" attr(href) "] ";
  }
  h1, h2, h3, h4, h5, h6 {
    background: none;
    color: #000;
  }
  .temp {
    display: none;
  }
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Parts
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Buttons
--------------------------------------------------------------*/
.btn--invert {
  background-color: transparent;
  color: #ff6363;
}

@media only screen and (min-width: 1199px) {
  .btn--invert:hover {
    background-color: #ff6363;
    color: #fff;
  }
}

.btn-disabled {
  background: #b3abab !important;
  border-color: #b3abab !important;
  color: #fff !important;
  cursor: not-allowed;
}

.btn-hidden {
  display: none;
}

.form-field.product-quantity .qty-selector {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/

.video-hero-mp4.contain {
  object-fit: contain;
}

.video-hero-mp4.cover {
  object-fit: cover;
}

.hero-video--media.no-overlay {
  pointer-events: auto;
}