@font-face{
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Light.ttf");
    font-style: normal;
    font-weight: 100;
}

@font-face{
    font-family: 'Roboto-Regular';
    src: url("../fonts/Roboto-Regular.ttf");
    font-style: normal;
    font-weight: 100;
}
.aux {
    max-width: 1180px;
    max-width: 79.25rem;
    margin: 0px 29px;
}

@media only screen and (max-width: 425px) {
    .aux {
        max-width: 980px;
        max-width: 70.25rem;
        margin: 0px auto;
    }
}

.section--content--right .section__image img {
    max-width: 100% !important;
}

@media (min-width:769px) {
    .section__header {
        width: 100% !important;
    }
    .page-header {
        padding-left: 50px;
    }
    .mobile-container {
        background-image: url("../images/backgrounds/home/mobile-containerhero-banner-mobile&categories-svg.svg");
        width: 446px;
        height: 526px;
        background-repeat: no-repeat;
        margin: auto;
        background-size: 100%;
        padding: 96px 86px 0;
    }
    .carousel {
        width: 274px !important;
        height: 430px !important;
    }
}

@media (max-width:768px) and (min-width:513px) {
    .mobile-container {
        background-image: url("../images/backgrounds/home/hero-banner-mobile&categories-svg.svg");
        width: 446px;
        background-size: 100%;
        height: 526px;
        background-repeat: no-repeat;
        margin: auto;
        padding: 96px 86px 0;
    }
    .carousel {
        width: 274px !important;
        height: 430px !important;
    }
    .section__header {
        text-align: center;
    }
}

@media (max-width:512px) and (min-width:321px) {
    .mobile-container {
        background-image: url("../images/backgrounds/home/hero-banner-mobile&categories-svg.svg");
        width: 320px;
        background-size: 100%;
        height: 377px;
        background-repeat: no-repeat;
        margin: auto;
        padding: 69px 62px 0;
    }
    .carousel {
        width: 196px !important;
        height: 308px !important;
    }
    .section__header {
        text-align: center;
    }
}

@media (max-width:320px) {
    .mobile-container {
        background-image: url("../images/backgrounds/home/hero-banner-mobile&categories-svg.svg");
        width: 188px;
        background-size: 100%;
        height: 222px;
        background-repeat: no-repeat;
        margin: auto;
        padding: 40px 37px 0 36px;
    }
    .carousel {
        width: 116px !important;
        height: 182px !important;
    }
    .section__header {
        text-align: center;
    }
}

.banner--home .banner__bg-container-home section {
    padding: 1.25rem 1.25rem 0 1.25rem !important;
}

.section {
    padding: 22px 22px 0;
    padding: 1.375rem 1.375rem 0;
}

@media only screen and (min-width: 48.0625rem) and (max-width: 63.9375rem) {
    .section {
        padding: 3.75rem 1.25rem;
    }
}

.section .mdl-button {
    padding: 21px 20px 23px;
    padding: 1.3125rem 1.25rem 1.4375rem
}

.section__title {
    color: #444
}

.section__image {
    margin-top: 1em;
    text-align: center
}

.section-header-title {
    font: 400 28px "Roboto-Regular", sans-serif;
    font-weight: 500;
    line-height: normal; text-align: left;
}

.section-header-content {
    font: 400 17px "Roboto-Regular", sans-serif;
    line-height: normal;
    line-height: 1.31;
    text-align: left;
}

@media only screen and (min-width: 64rem) {
    .section__image {
        margin: 0
    }
}

@media only screen and (min-width: 48rem) {
    .section__image {
        text-align: left
    }
}

@media only screen and (min-width: 363px) and (max-width: 768px) {
    .section__image {
        text-align: center !important;
    }
}

.section__image img {
    display: inline-block;
    max-width: 70%
}

@media only screen and (max-width: 30rem) {
    .section__image img {
        max-width: 100%
    }
}

@media only screen and (min-width: 48rem) {
    .section__image img {
        margin: 0;
        max-width: 100%;
        max-height: 30.25rem
    }
    /* .section__image1 img {
        margin: 0;
        max-width: 100%;
        max-height: 36.25rem
    } */
}

@media only screen and (max-width: 1024px) {
    .section__image1 img {
        margin: 0;
        max-width: 100%;
        max-height: 30.25rem
    }
}

.section.section--align-image-bottom {
    padding-bottom: 0
}

@media only screen and (min-width: 64rem) {
    .section.section--align-image-bottom .section__content {
        margin-bottom: 120px
    }
}

@media only screen and (min-width: 48.0625rem) and (max-width: 63.9375rem) {
    .section.section--align-image-bottom .section__content {
        margin-bottom: 70px
    }
}

@media only screen and (max-width: 30rem) {
    .section.section--align-image-bottom .section__content {
        margin-bottom: 0
    }
}

@media only screen and (min-width: 48rem) {
    .section--rev .grid {
        direction: rtl;
        text-align: left;
    }
    .section--rev .grid>.grid__item {
        direction: ltr;
        text-align: left;
    }
}

.section--text-left .section__image {
    text-align: center;
}

@media only screen and (min-width: 48rem) {
    .section--text-left .section__image {
        text-align: right;
    }
}

.section--grey {
    background-color: #f6f6f6
}

@media only screen and (min-width: 64rem) {
    .section {
        padding: 90px 20px;
        padding: 5.625rem 1.25rem
    }
    .section.section--content--right,
    .section.section--safety {
        padding-top: 50px;
        padding-top: 7.125rem
    }
}

/*
@media only screen and (min-width: 48.0625rem) and (max-width: 63.9375rem) {
.section--content--right .section__image img {
max-width:150%;
margin-left:-60%
}
}
@media only screen and (min-width: 64rem) {
.section--content--right .section__image img {
max-width:150%;
margin-left:-60%
}
}*/

.section--content--left .section__image img {
    max-width: 80%
}

@media only screen and (min-width: 48rem) {
    .section--content--left .section__image img {
        max-width: 80%
    }
}

.section--content--right .section__image img {
    max-width: 80%
}

@media only screen and (min-width: 48rem) {
    .section--content--left .section__image img {
        max-width: 80%
    }
}

@media only screen and (min-width: 64rem) {
    .section {
        padding: 90px 20px;
        padding: 5.625rem 1.25rem
    }
    .section.section--content--right,
    .section.section--safety {
        padding-top: 50px;
        padding-top: 7.125rem
    }
}

.grid {
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: -20px
}

.grid__item {
    display: inline-block;
    padding-left: 10px;
    vertical-align: top;
    width: 100%;
    box-sizing: border-box
}

@media only screen and (max-width: 425px) {
    .grid__item {
        padding-left: 19px;
    }
}

.grid--rev {
    direction: rtl;
    text-align: left
}

.grid--rev>.grid__item {
    direction: ltr;
    text-align: left
}

.grid--full {
    margin-left: 0
}

.grid--full>.grid__item {
    padding-left: 0
}

.grid--right {
    text-align: right
}

.grid--right>.grid__item {
    text-align: left
}

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

.grid--center>.grid__item {
    text-align: left
}

.grid--middle>.grid__item {
    vertical-align: middle
}

/* .grid--bottom>.grid__item {
    vertical-align: bottom
} */

.grid--narrow {
    margin-left: -10px
}

.grid--narrow>.grid__item {
    padding-left: 10px
}

.grid--wide {
    margin-left: -40px
}

.grid--wide>.grid__item {
    padding-left: 40px
}

.grid-last {
    margin-bottom: 100px;
}

@media only screen and (max-width: 480px) {
    .palm--one-whole {
        width: 100%
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .lap--one-half {
        width: 50%
    }
    .lap--one-quarter {
        width: 25%
    }
}

@media only screen and (min-width: 1024px) {
    .desk--one-half {
        width: 45%;
        margin-left: 5%;
    }
    .desk--one-half-first {
        width: 45%;
        margin-left: 5%;
    }
    .desk--one-quarter {
        width: 25%
    }
}

@media only screen and (min-width: 1400px) {
    .desk--one-half {
        width: 35%;
        margin-left: 15%;
    }
    .desk--one-half-first {
        width: 35%;
        margin-left: 15%;
    }
}

@media only screen and (max-width: 768px) {
    .desk--one-half {
        padding-top: 50px !important;
    }
}

.text-space1 {
    margin-top: 50px;
}

@media only screen and (max-width: 768px) {
    .text-space1 {
        margin-top: 10px;
    }
}