/**
 * https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 *
 *
 */

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  blockquote.zenplayer {
    width: 562px;
    height: 321px;
  }
  
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {

  blockquote.zenplayer {
    width: 700px;
    height: 394px;
  }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* flickity */


a:visted, a:hover {
    text-decoration: none;
  }
  

  .brand-scroll {
  	animation: scroll 100s linear infinite;
  }
  
  @-webkit-keyframes scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - 5rem));
    }
  }
  
  
  .w-webflow-badge,
  .w-webflow-badge *,
  body a.w-webflow-badge {
    display: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
  }
  
  
  /* zencastr embed */
  iframe[title="Zencastr video player"] {
    box-shadow: 15px 20px 11px 0px rgba(0,0,0,0.4);
  }
  


/* ALL PAGES CSS */

/* Your max width code replaces the code below */
@media only screen and (min-width: 1560px) {
	body {font-size: 0.975em;}
}


/* Main Variables */
:root {
  --main-dark: #0a2540;
  --main-light: white;
}

/* Global Styles */
::selection {
	background: var(--main-dark);
  color: var(--main-light);
  text-shadow: none;
}
img::selection, svg::selection {
	background: transparent;
}

/* Link color inherits from parent font color  */
a {
	color: inherit;
}

/* Disable / enable clicking on an element and its children  */
.no-click {
	pointer-events: none;
}
.can-click {
	pointer-events: auto;
}

/* Target any element with a certain "word" in the class name  */
[class*="spacer"] {
	
}

/* navbar CSS */
.logo_svg path,
.small-link_icon path {
	fill: currentColor;
}
.products_icon svg {
	width: 100%;
  	height: 100%;
}
.small-link:hover .small-link_icon {
	color: var(--main-dark);
}

.menu_content {
	pointer-events: none;
}
.active {
	z-index: 2;
  	pointer-events: auto;
}

.menu_dp-link.active {
	opacity: 0.6;
}
  
  /* homepage css */

  /*FadeIn*/
.fade-in-header{
	display: inline;
}
.fade-in-header .hero-header-callout{
	animation: fadeEffect 12.5s linear infinite 0s;
	-ms-animation: fadeEffect 12.5s linear infinite 0s;
	-webkit-animation: fadeEffect 12.5s linear infinite 0s;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.fade-in-header .hero-header-callout:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.fade-in-header .hero-header-callout:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.fade-in-header .hero-header-callout:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.fade-in-header .hero-header-callout:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}

/*FadeIn Animation*/
@-webkit-keyframes fadeEffect{
	5% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}