/*raptor css v.1.0.0*/
/*                                      RESET
--------------------------------------------------------------------------------------------
https://alligator.io/css/minimal-css-reset/*/

html {box-sizing: border-box;}
*,
*:before,
*:after {box-sizing: inherit;}
/* Clearfix: http://nicolasgallagher.com/micro-clearfix-hack/
 * You need them after using floating elements */
.clearfix:before,
.clearfix:after,
.container:before,
.container:after {
    display: table;
    content: " ";
}

.clearfix:after,
.container:after {clear: both;}

body {
    margin: 0;
    padding: 0;
}
/*                                         TYPOGRAPHY
Scale 1.333
---------------------------------------------------------------------------------*/
/* better use body typo separated here (instead of with other HTML5 elements), avoid messing with external js generated styles */

body {
    color: #424242;
    font-family: "Segoe UI","Helvetica Neue", Roboto, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

article, aside {
  line-height: 0;
}

p {
    margin-top: 0;
    margin-bottom: 20px;
}

/* use only one h1, but you can use more h2-h5 on one page (SEO in mind) */
/* use .h1-.h5 classes  if only the font size matters (Accessibility in mind) */
h1, h2, h3, h4, h5 {
    line-height: 1.4;
    font-weight: bold;
    color: #212121;
}
h1, h2, h3, h4, h5 {
    margin-top: 0;
    margin-bottom: .5rem;
}

h1, .h1 {font-size: 3rem;}

h2, .h2 {font-size: 2.441rem;}

h3, .h3 {font-size: 1.953rem;}

h4, .h4 {font-size: 1.563rem;}

h5, .h5 {font-size: 1.25rem;}

@media screen and (max-width: 640px) {
  h1, .h1 {font-size: 2.441rem;}

  h2, .h2 {font-size: 1.953rem;}

  h3, .h3 {font-size: 1.563rem;}

  h4, .h4 {font-size: 1.25rem;}

  h5, .h5 {font-size: 1rem;}
}


small, .small {font-size: 0.875rem;}

h1 small, h2 small, h3 small {
    display: block;
}

.bolder {font-weight: bolder;}

.lighter {font-weight: lighter;}

.underline::after {
  content: "";
  display: block;
  border-top: 6px solid;
  width: 3rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

blockquote {
    padding: 0 15px;
    margin: 10px 40px;
    border-left: 6px solid;
}

blockquote small {
    display: block;
    line-height: 1.4;
    font-size: 14px;
    font-style: italic;
}

blockquote small:before {content: '\2014 \00A0';}

img {
    width: 100%;
    /*vertical-align: middle;  your images will be pixel-perfect relation to other elements, but cannot position img-tag icons with buttons for example...*/
    height: auto;
    color: #646464;
    font-size: 11px;
    font-weight: normal;
    font-style: italic;
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 0;
}

.list {
  padding-left: 15px; /*balance col paddings*/
}

.list li {
  margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: #8BC34A;
}

a:hover {
    text-decoration: underline;
}

hr {
    height: 1px;
    border: 0;
    border-top: 1px solid #eee;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0;
}

/*                                         BUTTONS
--------------------------------------------------------------------------------------------*/
.btn {
    display: inline-block;
    position: relative;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    padding: .5rem 1rem;
    border: 1px transparent;
    border-radius: 2px;
    -webkit-transition: all 0.1s;
    transition: all 0.1s;
    background-color: #8BC34A;
}

.btn-lg {padding: .75rem 1.5rem;}

.btn-sm {padding: .25rem .5rem; font-size: .875rem;}

.btn:hover {
    opacity: .9;
    transition: all 0.1s ease;
}

.btn-white {
    background-color: white;
    color: #8BC34A;
}

.btn-transparent {
  background-color: transparent;
  color: inherit;
}

.shadow {box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.navbar {
    top: 0;
    width: 100%;
    /* top and width is good for fixed nav!!! */
    position: relative;
    /* If it is fixed, check the main elemnt! */
    z-index: 100;
}

/*nav li:hover:not(.active) {color: gray;}*/

.active a, .current-menu-item a {
    font-weight: 700;
    color: inherit;
}


nav ul li {
  list-style: none;
}

.nav-links {
margin-left: -15px;
margin-right: -15px;
/* NOTE: balancing the paddings */
}

.nav-links li a {
display: block; /* NOTE: need for padding properly */
padding: .75rem 1rem;
}

.toggle-nav-button {
    padding: .75rem;
    background: transparent;
    border: none;
}

.toggle-nav-links {
  display: none;
}

@media screen and (min-width: 760px) {
  .nav-links li {
  display: inline-block;
  }
  .toggle-nav-button {
    display: none;
  }
  .toggle-nav-links {
    display: block;
  }
}

/*                                         ICONS
--------------------------------------------------------------------------------------------*/
/* Default icon formatting */

/* Source:
https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
*/
.icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

.icon-menu {
    background-image: url(/img/menu.svg);
}

.icon-close {
    background-image: url(/img/close.svg);
}

.icon-check {
    background-image: url(/img/check.svg);
}

.show {
  display: block;
}

.hide {
    display: none;
}
/*                                     BREADCRUMB NAVIGATION
--------------------------------------------------------------------------*/
.breadcrumb {margin: auto 0;}

.breadcrumb li {display: inline;}

.breadcrumb li+li:before {
    padding: 4px;
    color: inherit;
    content: "/\00a0";
}


/*                                   FOOTER
--------------------------------------------------------------------------*/
#scrolltop {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
    padding: 6px;
    margin: 6px 0;
    font-size: 12px;
    font-weight: bold;
    background: transparent;
    border: transparent;
}

/* GRIDS
--------------------------------------------------------------------------*/
.container {
    margin: 0 auto;
    width: 100%;
}

@media (max-width: 459px) {
    .container, .product-cards-container, .brand-cards-container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media screen and (min-width: 460px) {
    .container, .product-cards-container, .brand-cards-container {
        width: 420px;
    }
}

@media screen and (min-width: 760px) {
    .container, .product-cards-container, .brand-cards-container {
        width: 700px;
    }
}

@media screen and (min-width: 1020px) {
    .container, .product-cards-container, .brand-cards-container {
        width: 940px;
    }
}

@media screen and (min-width: 1280px) {
    .container, .product-cards-container, .brand-cards-container {
        width: 1200px;
    }
}


.flex {
    display: -webkit-box;
    display: flex;
}

.row {
    display: -webkit-box;
    display: flex;
    margin-left: -10px;
    margin-right: -10px;
    flex-flow: row wrap;
}

@media (max-width: 480px) {
  .row {
      display: -webkit-box;
      display: flex;
      margin-left: 0;
      margin-right: 0;
      flex-flow: row wrap;
  }
}


.flex {
    display: -webkit-box;
    display: flex;
}

[class*="col"] {padding: 0 10px; width: 100%;}

.col {-webkit-box-flex: 1; flex: 1; max-width: 100%;} /* you can pair with itself (same auto width columns), with fixed width columns, and with basic columns */

.col-auto {width: auto; /* great for buttons, you can pair with: col+col-auto */}

.col-12 {
	max-width: 100%;
}

.col-11 {max-width: 91.66666666%;}

.col-10 {max-width: 83.33333333%;}

.col-9 {max-width: 75%;}

.col-8 {max-width: 66.66666666%;}

.col-7 {max-width: 58.33333333%;}

.col-6 {max-width: 50%;}

.col-5 {max-width: 41.66666666%;}

.col-4 {max-width: 33.33333333%;}

.col-3 {max-width: 25%;}

.col-2 {max-width: 16.66666666%;}

.col-1 {max-width: 8.33333333%;}
/*Define the small cols before the md and lg cols, beacuse if not, the smallers overwrite the biggers*/

@media screen and (min-width: 420px) {
    .col-xs-12 {max-width: 100%;}

    .col-xs-11 {max-width: 91.66666666%;}

    .col-xs-10 {max-width: 83.33333333%;}

    .col-xs-9 {max-width: 75%;}

    .col-xs-8 {max-width: 66.66666666%;}

    .col-xs-7 {max-width: 58.33333333%;}

    .col-xs-6 {max-width: 50%;}

    .col-xs-5 {max-width: 41.66666666%;}

    .col-xs-4 {max-width: 33.33333333%;}

    .col-xs-3 {max-width: 25%;}

    .col-xs-2 {max-width: 16.66666666%;}

    .col-xs-1 {max-width: 8.33333333%;}

    .col-xs-auto {width: auto;}

    .col-xs {-webkit-box-flex: 1; flex: 1; max-width: 100%;}

    .xs-order-first {-webkit-box-ordinal-group: 2; order: 1;}

    .xs-order-last {-webkit-box-ordinal-group: 3; order: 2;}
  }

@media screen and (min-width: 760px) {
  .col-sm-12 {max-width: 100%;}

  .col-sm-11 {max-width: 91.66666666%;}

  .col-sm-10 {max-width: 83.33333333%;}

  .col-sm-9 {max-width: 75%;}

  .col-sm-8 {max-width: 66.66666666%;}

  .col-sm-7 {max-width: 58.33333333%;}

  .col-sm-6 {max-width: 50%;}

  .col-sm-5 {max-width: 41.66666666%;}

  .col-sm-4 {max-width: 33.33333333%;}

  .col-sm-3 {max-width: 25%;}

  .col-sm-2 {max-width: 16.66666666%;}

  .col-sm-1 {max-width: 8.33333333%;}

  .col-sm-auto {width: auto;}

  .col-sm {-webkit-box-flex: 1; flex: 1; max-width: 100%;}

  .sm-order-first {-webkit-box-ordinal-group: 2; order: 1;}

  .sm-order-last {-webkit-box-ordinal-group: 3; order: 2;}
}

@media screen and (min-width: 1020px) {
  .col-md-12 {max-width: 100%;}

  .col-md-11 {max-width: 91.66666666%;}

  .col-md-10 {max-width: 83.33333333%;}

  .col-md-9 {max-width: 75%;}

  .col-md-8 {max-width: 66.66666666%;}

  .col-md-7 {max-width: 58.33333333%;}

  .col-md-6 {max-width: 50%;}

  .col-md-5 {max-width: 41.66666666%;}

  .col-md-4 {max-width: 33.33333333%;}

  .col-md-3 {max-width: 25%;}

  .col-md-2 {max-width: 16.66666666%;}

  .col-md-1 {max-width: 8.33333333%;}

  .col-md-auto {width: auto;}

  .col-md {-webkit-box-flex: 1; flex: 1; max-width: 100%}

  .md-order-first {-webkit-box-ordinal-group: 2; order: 1;}

  .md-order-last {-webkit-box-ordinal-group: 3; order: 2;}
}

@media screen and (min-width: 1280px) {
  .col-lg-12 {max-width: 100%;}

  .col-lg-11 {max-width: 91.66666666%;}

  .col-lg-10 {max-width: 83.33333333%;}

  .col-lg-9 {max-width: 75%;}

  .col-lg-8 {max-width: 66.66666666%;}

  .col-lg-7 {max-width: 58.33333333%;}

  .col-lg-6 {max-width: 50%;}

  .col-lg-5 {max-width: 41.66666666%;}

  .col-lg-4 {max-width: 33.33333333%;}

  .col-lg-3 {max-width: 25%;}

  .col-lg-2 {max-width: 16.66666666%;}

  .col-lg-1 {max-width: 8.33333333%;}

  .col-lg-auto {width: auto;}

  .col-lg {-webkit-box-flex: 1; flex: 1; max-width: 100%}

  .lg-order-first {-webkit-box-ordinal-group: 2; order: 1;}

  .lg-order-last {-webkit-box-ordinal-group: 3; order: 2;}
}

/*------------ Flexible Grid------------*/
.col-1-3 {
    width: 33.33333333%;
    /* Just an example, but the most ideal width for screens is 1/3 - 1/4.
    The 1/2 seems large, the 1/5 looks small. Example math: This 1/3 is good for 3x2, 3x4, 3x6 etc.. grids.*/
    padding: 15px;
}
.col-1-4 {
    width: 25%;
    /* If you create 1/4 width /25%/ that will be good for 4x2, 4x3, 4x4, 4x5 etc... grids*/
    padding: 15px;
}


@media screen and (max-width: 1280px) {
    [class*="col-1-"] {width: 50%;}
}

@media screen and (max-width: 760px) {
    [class*="col-1-"] {width: 100%;}
}

/*
.block-img: ideal for a simple image gallery
.block: Ideal for creating multiple blocks ex.:products grid. It works nice only with equal height contents. */


/* all setup for 3 columns in a row , ideal for breaking 6/9/12/etc... columns, you can play with 25% width if you want 4 columns for 8/12/16/etc... */


/*                                         COLORS
--------------------------------------------------------------------------------------------*/
.bg-smoke {
    background-color: whitesmoke;
}
/*                                         INPUTS
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms
--------------------------------------------------------------------------------------------*/

/* hand cursor on clickable elements */
select,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,
input,
select,
textarea {
    margin: 0;
    font: inherit;
}

.search-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 38px;
}
.search-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  height: 38px;
}

input[type="radio"] {vertical-align: text-bottom;}

textarea {
    min-height: 80px;
    resize: vertical;
}

.required:after {
    color: #FF5E40;
    content: ' *';
}

/*--------------------------------------------------------------
# Custom checkbox
source: https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3
--------------------------------------------------------------*/

.checkbox input[type="checkbox"] {
    display: none;
    /*hide the deafult checkbox*/
}

.checkbox label {
    position: relative;
    display: inline-block;
    /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
    padding-left: 22px;
}

.checkbox label::before,
.checkbox label::after {
    position: absolute;
    content: "";

    /*Needed for the line-height to take effect*/
    display: inline-block;
}

/*Outer box of the fake checkbox*/
.checkbox label::before{
    height: 16px;
    width: 16px;
    border: 1px solid #ccc;
    left: 0px;
    background-color: white;
}

.checkbox[validation-error="true"] label::before {
    border: 1px solid red !important;
}

/*Checkmark of the fake checkbox*/
.checkbox label::after {
    height: 5px;
    width: 9px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg);
    left: 4px;
    top: 7px;
}

/*Hide the checkmark by default*/
.checkbox input[type="checkbox"] + label::after {
    content: none;
}

/*Unhide on the checked state*/
.checkbox input[type="checkbox"]:checked + label::after {
    content: "";
}

/*Change background*/
.checkbox input[type="checkbox"]:checked + label::before {
    background-color: #00B6FF;
}

/*Adding focus styles on the outer-box of the fake checkbox*/
.checkbox input[type="checkbox"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}

/***************END**************/

/*Hide the deafult checkbox*/
.checkbox input[type="radio"] {
    display: none;
}

/*Hide the checkmark by default*/
.checkbox input[type="radio"] + label::after {
    content: none;
}

/*Unhide on the checked state*/
.checkbox input[type="radio"]:checked + label::after {
    content: "";
}

/*Change background*/
.checkbox input[type="radio"]:checked + label::before {
    background-color: #00B6FF;
}

/*Adding focus styles on the outer-box of the fake checkbox*/
.checkbox input[type="radio"]:focus + label::before {
    outline: rgb(59, 153, 252) auto 5px;
}




/*--------------------------------------------------------------
# MISC
--------------------------------------------------------------*/
/* ALIGNMENTS */
.text-right {text-align: right;}

.text-center {text-align: center;}

.float-right {float: right;}

.float-left {float: left;}

.align-items-center {
  -ms-flex-align: center!important;
    align-items: center!important;
}

.inline {
  display: inline-block;
}

/* FLEXIBLE VIEWPORT HEIGHT EXAMPLES */
.vh-100 {height: 100vh;} /* example usage: fullscreen landing-page headers */

.vh-40 {height: 40vh;} /* example usage: main-page headers */

.vh-20 {height: 20vh;} /* example usage: sub-page headers */

/* MARGINS, PADDINGS */
.m-0 {margin: 0;}

.mt-0 {margin-top: 0;}

.mt-1 {margin-top: 1rem;}

.mt-2 {margin-top: 2rem;}

.mt-3 {margin-top: 3rem;}

.mb-0 {margin-bottom: 0;}

.mb-1 {margin-bottom: 1rem;}

.mb-2 {margin-bottom: 2rem;}

.mb-3 {margin-bottom: 3rem;}

.p-0 {padding: 0;}

.pt-1 {padding-top: 1rem;}

.pt-2 {padding-top: 1rem;}

.pb-1 {padding-bottom: 1rem;}

.pb-2 {padding-bottom: 2rem;}

/* AVATAR IMAGES */
.round {border-radius: 100rem; /*better than 50%, it is reusable for rounded images and buttons*/}

.size-50x50 {
  width: 50px !important;
  height: 50px !important;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {outline: 0;}