@import "style-variables";

.visible-xxs {
    display: none !important;
}





/* md sizes */
@media (max-width: $breakpointMd) {

    .md-font-md {
        font-size: $fontsizeMd;
    }

    .md-d-block {
        display:block;
    }

    .hidden-md {
        display:none;
    }

    .offset-md-05 {
        margin-left: 3.125%;
    }

    .pb-md-0 {
        padding-bottom: 0;
    }

    .md-pr-0 {
        padding-right: 0;
    }

    .md-border-none {
        border:none;
    }

}

/* sm sizes */
@media (max-width: $breakpointSm) {

    .sm-p-0 {
        padding: 0;
    }

    .hidden-sm {
        display:none;
    }

    .offset-sm-05 {
        margin-left: 3.125%;
    }
    .sm-text-center {
        text-align: center !important;
    }

    .sm-text-left {
        text-align: left !important;
    }

    .sm-float-none {
        float:none;
    }
    .sm-margin-0 {
        margin:0;
    }
    .sm-pt-lg {
        padding-top: $paddinglg;
    }
    .sm-pb-lg {
        padding-bottom: $paddinglg;
    }

    .sm-pt-xl {
        padding-top: $paddingxl;
    }
    .sm-pb-xl {
        padding-bottom: $paddingxl;
    }

}
/* xs sizes
 (max-width: 767px)
 */
@media (max-width: $breakpointXs) {

    .xs-text-center {
        text-align: center !important;
    }

    .xs-text-left {
        text-align: left !important;
    }

    .xs-justify-content-flex-start {
        justify-content:flex-start !important;
    }

    .xs-justify-content-center {
        justify-content:center !important;
    }

    body {
        overflow-x: hidden;
    }

    .xs-headline-xl {
       font-size:$fontsizeXl;
    }

    #video-modal_inner {
        width: 85%;
    }

    .xs-p-0 {
        padding: 0;
    }


    .xs-float-none {
        float:none;
    }

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

    .d-xs-block,
    .xs-d-block {
        display:block;
    }
    .xs-d-none,
    .d-xs-none{
        display:none !important;
    }
    .xs-margin-0 {
        margin:0;

    }

    .btn-responsive {
        padding: 6px 15px;
        font-size: 10px;
    }



    html {
        font-size: 14px;
    }


    .xs-position-relative {
        position:relative;
        top: auto;
        left: auto;

    }

    .hidden-xs {
        display:none;
    }

    .visible-xs {
        display: block !important;
        visibility: visible !important;
    }

    .xs-padding-0  {
        padding: 0;
    }

    .xs-padding-md  {
        padding: $paddingmd
    }

    .xs-padding-sm  {
        padding: $paddingsm;
    }

    .offset-xs-05 {
        margin-left: 3.125%;
    }

    .xs-pb-0 {
        padding-bottom: 0;
    }

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

    #cartform{
        font-size:11px;
    }


    .xs-font-md  {
        font-size:$fontsizeMd;
        line-height:$lineHeightMd;
    }

    .xs-font-md-plus  {
        font-size:$fontsizeMdPlus;
        line-height:$lineHeightMdPlus;
    }



    .header .header-logo{
        margin-top: 8px;
        max-width: 267px;
        margin-bottom: 0;
    }

    .row.xs-no-flex {
        display: block;
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .row.xs-no-flex > [class*='col-'] {
        display: block;

    }


    .row.xs-no-flex.is-flex:before ,
    .row.xs-no-flex.is-flex:after {
        display: table;
        content: " ";
    }

    .row.xs-gutters {

    }

    .row.xs-gutters  > [class^="col-"],
    .row.xs-gutters > [class*=" col-"] {
        padding-right: 10px;
        padding-left: 10px; }


    .xs-width-50 {
        width:50%;

    }

    .xs-pl-0 {
        padding-left: 0;
    }

    .xs-pr-0{

        padding-right: 0;
    }

    .responsive-tabs {
        border-bottom:0;

    }

    ul.tabs.responsive-tabs li {
        border-bottom:1px solid #666;
        margin-right: 2px;
        margin-bottom: 7px;
    }


    .xs-pl-xs {
        padding-left: $paddingxs;}

    .xs-pr-xs {
        padding-right: $paddingxs;}

    .xs-pl-md {
        padding-left: $paddingmd;}

    .xs-pr-md {
        padding-right: $paddingmd;}

    .xs-pt-md {
        padding-top: $paddingmd;}

    .xs-pb-md {
        padding-bottom: $paddingmd;}


    .xs-pt-lg {
        padding-top: $paddinglg;}

    .xs-pb-lg {
        padding-bottom:  $paddinglg;}

    .xs-pr-lg {
        padding-right: $paddinglg;}

    .xs-pl-lg {
        padding-left:  $paddinglg;}


    .xs-pt-xl {
        padding-top: $paddingxl;}

    .xs-pb-xl {
        padding-bottom:  $paddingxl;}

    .xs-pr-xl {
        padding-right: $paddingxl;}

    .xs-pl-xl {
        padding-left:  $paddingxl;}

    .review-stars {
        margin: 0 auto;
        max-width: 320px;
    }

    .xs-border-none {
        border:none;
    }

}


/* xxs sizes
470px
*/
@media (max-width: $breakpointXxs) {


    .site--footer__links .footer-links__linklist {
        width: 100%;
        margin-right: 0;
    }


    .xxs-pb-xl {
        padding-bottom: $paddingxl;
    }

    .xxs-hidden {
        display: none;
    }


    .xxs-offset-0 {
        margin-left: 0;
    }

    .xxs-col-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .xxs-col-8 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .xxs-col-10 {
        flex: 0 0 62.5%;
        max-width: 62.5%;
    }

    .xxs-col-12 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .xxs-col-16 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .xxs-font-sm  {
        font-size:$fontsizeSm;
        line-height:$lineHeightSm
    }

    .xxs-font-md  {
        font-size:$fontsizeMd;
        line-height:$lineHeightMd;
    }

    .xxs-font-lg {
        font-size:$fontsizeLg;
        line-height:$lineHeightLg;
    }


    .xxs-position-relative {
        position: relative;
        top: auto;
        left: auto;
    }

    .xxs-full-width {
        float:none;
        width:100%;
    }

    .xxs-btn-responsive {
        padding: 6px 15px;
    }

}

/* xxxs sizes
374px
*/
@media (max-width: $breakpointXxxs) {



    .xxxs-pb-xl {
        padding-bottom: $paddingxl;
    }

    .xxxs-offset-0 {
        margin-left: 0;
    }

    .xxxs-col-16 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .xxxs-font-sm  {
        font-size:$fontsizeSm;
        line-height:$lineHeightSm;
    }

    .xxxs-font-md  {
        font-size:$fontsizeMd;
        line-height:$lineHeightMd;
    }

    .xxxs-font-lg  {
        font-size:$fontsizeLg;
        line-height:$lineHeightLg;
    }

    .xxxs-font-xl  {
        font-size:$fontsizeXl;
        line-height:$lineHeightXl;
    }

    .xxxs-position-relative {
        position: relative;
        top: auto;
        left: auto;
    }

    .xxxs-full-width {
        float:none;
        width:100%;
    }

    .xxxs-btn-responsive {
        padding: 6px 15px;
    }

    .xxxs-padding-md  {
        padding: $paddingmd
    }

    .xxxs-padding-sm  {
        padding: $paddingsm;
    }

    .xxxs-pt-0 {
        padding-top: 0;
    }

}