/* style.css has img { max-width: 100%; } so we need height: auto; too to avoid distortion */
img {
    height: auto;
}

/* Small enhancement to Bootstrap. .row-xx-auto fits all cols, equal-sized, in one row */

.row.row-xs-auto {
    display: flex;
}
.row.row-xs-auto *[class*="col-"] {
    flex-basis: 0;
    flex-grow: 1;
}
@media (min-width: 768px) {
    .row.row-sm-auto {
        display: flex;
    }
    .row.row-sm-auto *[class*="col-"] {
        flex-basis: 0;
        flex-grow: 1;
    }
}
@media (min-width: 992px) {
    .row.row-md-auto {
        display: flex;
    }
    .row.row-md-auto *[class*="col-"] {
        flex-basis: 0;
        flex-grow: 1;
    }
}
@media (min-width: 1200px) {
    .row.row-lg-auto {
        display: flex;
    }
    .row.row-lg-auto *[class*="col-"] {
        flex-basis: 0;
        flex-grow: 1;
    }
}
/* Auto columns should behave like all other columns but are sized by their parent's flex rule */
.col-xs-auto, .col-sm-auto, .col-md-auto, .col-lg-auto {
    position: relative;
    min-height: 1px;
    padding-left: 20px;
    padding-right: 20px;
}

/* Another enhancement to Bootstrap. Allow "2point4" as a column width, to support 5-column layout */
.col-xs-2point4, .col-sm-2point4, .col-md-2point4, .col-lg-2point4 {
    position: relative;
    min-height: 1px;
    padding-left: 20px;
    padding-right: 20px;
}
.col-xs-2point4 {
    float: left;
    width: 20%;
}
@media (min-width: 768px) {
    .col-sm-2point4 {
        float: left;
        width: 20%;
    }
}
@media (min-width: 992px) {
    .col-md-2point4 {
        float: left;
        width: 20%;
    }
}
@media (min-width: 1200px) {
    .col-lg-2point4 {
        float: left;
        width: 20%;
    }
}

/* All Elements */
.elemental-element {
    padding-bottom: 36px;
    padding-top: 36px;
}
.userform .email.valid {/* To override some styles from another lib */
    display: block;
}

/* Element Multi Column */
.multicol-element .multicol-column iframe {
    width: 100%;
    height: 280px;
}
.multicol-element .multicol-column img {
    width: 100%;
}

/* Element Single Column */
.element-single-column .element__title {
    text-align: center;
}
.element-single-column .vid-img-row {
    text-align: center;
}
.element-single-column .vid-img-row iframe {
    width: 100%;
    height: 450px;
}
.element-single-column .content__inner p {
    margin-left: 15px;
    margin-right: 15px;
}
@media (max-width: 767px) {
    .element-single-column .columns img {
        height: auto;
        width: 98%;
        padding-left: 1%;
        padding-right: 1%;
    }
    .element-single-column .vid-img-row iframe {
        height: 298px;
    }
    .element-single-column .vid-img-row {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Collection Element */
.collection-element .col figure {
    text-align: center;
}
.collection-element .col figcaption {
    height: 85px;
    margin-top: 15px;
    padding-left: 10px;
    padding-right: 10px;
}
.collection-element .how-to-title {
    margin-top: 15px;
    height: 80px;
}
.collection-element .c-article {
    text-align: center;
}

/* Video Gallery */
.section.gallery-videos {
    position: relative;
    margin-top: 40px; 
}
.section.gallery-videos iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
}
.section.gallery-videos video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
}
.player-container {
    text-align: center; 
}
.mlvp-container {
    padding-bottom: 53%; 
}
.mlvp-list-container {
    padding-left: 40px;
    padding-right: 40px;
    position: relative; }
.mlvp-list {
    margin: 0 auto; }
.mlvp-arrow-right {
    right: 20px; }
.mlvp-arrow-left {
    left: 20px; }
.current-vid {
    color: #963821 !important; }
.vid-item .desc {
    font-family: "Squada One", Helvetica, Arial, sans-serif;
    line-height: 1.2; }
.vid-item:hover .desc {
    color: #963821; 
}
@media (max-width: 767px) {
    .mlvp-list-container {
        padding-left: 0;
        padding-right: 0; }
    .mlvp-arrow-right {
        right: 0px; }
    .mlvp-arrow-left {
        left: 0px; } 
}

/* User Forms (and contact forms) */
.elemental-area .form-element__form {
    margin: 0 auto;
    max-width: 100%;
    width: 805px;
}
.form-element__form .field {
    padding: 1em 0;
}
/* all labels */
.form-element__form .field label {
    display: inline;
    float: none;
    margin-right: 0;
    max-width: none;
    padding: 0;
    text-align: left;
    width: auto;
}
/* labels that should appear to the left on wide screens */
.form-element__form .field > .left {
    display: block;
}
.form-element__form .field.checkbox {
    margin: 0;
}
.form-element__form input.text,
.contact-form input,
.elemental-element input.search__input {
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 0 1rem;
    height: 45px;
    width: 100%;
}
.form-element__form textarea,
.contact-form textarea {
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 10px 1rem;
    width: 100%;
}
.form-element__form input.checkbox,
.form-element__form input.radio {
    position: relative;
    margin: 0;
    display: inline;
}
.form-element__form .right-title {
    font-style: italic;
}
.form-element__form .field.file input[type=file] {
    display: inline;
    line-height: 1;
    margin: 0;
}
.form-element__form fieldset.field legend {
    font-size: 14px;
    border: 0;
}
.form-element__form .userform .userformsgroup > legend {
    margin-bottom: 0;
    margin-left: 14px;
}
.form-element__form .userform .userformsgroup > .right-title,
.form-element__form .userform .userformsgroup > .middleColumn {
    padding: 0 18px;
}

.form-element__form .message.error {
    color: #ff9805;
    display: block;
}
.form-element__form nav.Actions input,
button.contact-form__btn {
    background-color: #000;
    border: 1px solid #000;
    color: #fff;
    float: none;
    font-family: brandon-grotesque,sans-serif;
    font-size: 14px;
    font-weight: normal;
    margin: 0 2rem 0 0;
    padding: 0.5rem 2rem;
    text-transform: uppercase;
    transition: all 0.25s;
}
.form-element__form nav.Actions input:last-child,
button.contact-form__btn:last-child {
    margin-right: 0;
}
.form-element__form nav.Actions input:hover,
button.contact-form__btn:hover {
    border-color: #d5d5d5;
}
.form-element__form nav.Actions input[type=submit],
button.contact-form__btn[type=submit] {
    border-width: 2px;
}
.form-element__form nav.Actions input[type=submit]:hover,
button.contact-form__btn[type=submit]:hover {
    background-color: #fff;
    border-color: #000;
    color: #000;
}
@media (min-width: 768px) {
    .elemental-area .form-element__form {
        margin: 0 auto;
        max-width: calc(100% - 20px);
        width: 805px;
    }
    .form-element__form .field {
        padding: 1em 0;
    }
    .form-element__form .field > .left {
        height: 45px;
        line-height: 45px;
        position: absolute;
        text-align: right;
        width: 150px;
    }
    .form-element__form .middleColumn {
        padding-left: 165px;
    }
    .form-element__form .right-title {
        padding-left: 165px;
    }
    .form-element__form .field.dropdown .middleColumn,
    .form-element__form .field.file .middleColumn {
        line-height: 45px;
    }
    .form-element__form input.text,
    .contact-form input,
    .form-element__form textarea,
    .contact-form textarea {
        width: 70%;
    }
    .form-element__form fieldset.field legend {
        font-size: 18px;
    }
    .form-element__form .checkboxset .middleColumn,
    .form-element__form .optionset .middleColumn,
    .form-element__form .composite .middleColumn {
        padding-top: 10px;
    }
    .form-element__form .userform .userformsgroup > .middleColumn {
        padding: 0;
    }
    .form-element__form .checkbox .message.error {
        padding-left: 165px;
    }
    .form-element__form nav.Actions {
        padding-left: 165px;
    }
}

/* Contact Form Element */
.contact-form input, .contact-form textarea {
    width: 100%;
    margin-bottom: 12px;
}

/* Thumbnails with image placeholder */
.recipe__container figure.thumbnail.image-placeholder {
    background: url(../img/puhoi-valley-logo.png) no-repeat center/contain;
    opacity: 0.2;
}
/* Make the placeholder the same height as its width */
.recipe__container figure.thumbnail.image-placeholder:before {
    content: '';
    padding-top: 100%;
    display: block;
}

.contact-form input::placeholder, .contact-form textarea::placeholder {
  opacity: 0.75;
}

.userform-fields input::placeholder {
  opacity: 0.75;
}




.section-feature.bg-image-mobile .banner-mobile {
    width: 100%;
    display: none;
}

@media (max-width: 768px) {
    .section-feature.bg-image-mobile {
        background-image: none !important;
        height: auto;
        display: block;
        padding: 0;
    }

    .section-feature.bg-image-mobile .banner-mobile {
        display: block;
    }
}




.block-grid__item--wide {
    width: 100%
}