/*

 Theme Name:    Soda Bio

 Description:   Thème créé par Nethink

 Author:        Nethink

 Author URI:    http://www.nethink.com

 Template:      astra

 Version:       1.0.2

*/









.visually-hidden {

    position: absolute !important;

    clip: rect(1px, 1px, 1px, 1px);

    width: 1px !important;

    height: 1px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    overflow: hidden;

}





h1.entry-title {

    margin-bottom: 1em;

    color: #5d8f21;

}





p {

    margin-bottom: 1em;

}





ul.list {

    margin-left: 0;

    list-style: none;

}

ul.list>li:not(:last-child) {

    margin-bottom: 2.25rem;

}





body.post-type-archive-plante {

    position: relative;

    background: url('images/bg-archive-plantes.jpg') center center no-repeat;

    background-size: cover;

}

body.post-type-archive-plante::after {

    content: "";

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    background: #fff;

    opacity: 0.8;

    z-index: -1;

}





body.home #primary {

    margin: 0;

    padding: 0;

}

body:not(.home).ast-theme-transparent-header #content {

    padding-top: 86px;

}





.entry-meta,

.entry-meta * {

    color: #b8b7b8;

}



.entry-title a {

    color: #5d8f21;

}





#primary-menu>.ast-masthead-custom-menu-items:last-child {

    padding-right: 0;

}











#hero {

    position: relative;

    height: 100vh;

    width: 100vw;

    margin-left: -50vw;

    left: 50%;

    background-color: #ccc;

}

.logged-in #hero {

    height: calc(100vh - 32px);

}







.row {

    display: flex;

    flex-wrap: wrap;

    margin-left: -0.5rem;

    margin-right: -0.5rem;

}

.col {

    flex: 1 1 auto;

    margin: 0.5rem;

}







/* Flickity slider custom style */

.carousel-cell {

    width: 100%;

    height: 100%;

}

.carousel-cell>img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.flickity-page-dots {

    bottom: 22px;

}

.flickity-page-dots .dot {

    height: 4px;

    width: 40px;

    margin: 0;

    border-radius: 0;

}











.home-slider {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

}

.home-slider .dot {

    background: #fff;

}





.home-banner {

    position: absolute;

    top: 0;

    left: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: calc(100% - 3rem);

}

.home-title {

    max-width: 1024px;

    color: #fff;

    font-weight: bold;

    text-align: center;

    opacity: 0;

    -webkit-transform: translateY(20px);

    transform: translateY(20px);

    -webkit-animation: fadeUp 350ms ease-in 0.75s 1 normal forwards;

    animation: fadeUp 350ms ease-in 0.75s 1 normal forwards;

}

@media (min-width: 922px) {

    .home-title {

        font-size: 3.3em;

        text-shadow: #000 1px 0 10px;

    }

}

.home-illustration {

    display: block;

    margin-top: 0rem;

    text-shadow: #000 1px 0 10px;

    opacity: 0;

    -webkit-animation: fade 350ms ease-in 1s 1 normal forwards;

    animation: fade 350ms ease-in 1s 1 normal forwards;

}



@-webkit-keyframes fadeUp {

    0% {

        opacity: 0;

        -webkit-transform: translateY(20px);

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}

@keyframes fadeUp {

    0% {

        opacity: 0;

        -webkit-transform: translateY(20px);

        transform: translateY(20px);

    }

    100% {

        opacity: 1;

        -webkit-transform: translateY(0);

        transform: translateY(0);

    }

}

@-webkit-keyframes fade {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}

@keyframes fade {

    0% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}











.home-introduction {

    margin: 0 0 1em !important;

    padding-top: 2em;

    font-weight: bold;

    text-align: center;

}















.product-grid {

    display: flex;

    flex-wrap: wrap;

    margin: 2em -2em;

}

.product-item {

    width: calc(100% - 4em);

    margin: 2em;

    text-align: center;

}

@media (min-width: 922px) {

    .product-item {

        width: calc(100% / 3 - 4em);

    }

}

.product-item-legend {

    padding: 1em 1.5em;

    color: #77925c;

    line-height: 1.5;

}

.product-item-img {

    border-radius: 12px;

    transition: all 0.25s ease-in-out;

}

.product-item-link:hover .product-item-img {

    box-shadow: 0 2px 18px 4px #ccc;

    -webkit-transform: translate(6px, -6px);

    transform: translate(6px, -6px);

}













.site-footer {

    position: relative;

}

.site-footer::before {

    content: '';

    display: block;

    position: absolute;

    top: -50px;

    left: calc(50% - 50px);

    width: 101px;

    height: 101px;

    background: url('images/pastille-blanche.png') no-repeat;

    z-index: 1;

}

.ast-footer-overlay {

    padding-top: calc(1.66666em + 50px);

    padding-bottom: 1.6666em;

}













.grid {

    display: flex;

    flex-wrap: wrap;

    margin: 0 -2em;

}

.grid-item {

    width: calc(100% - 4em);

    margin: 2em;

}

@media (min-width: 642px) {

    .grid-item {

        width: calc(100% / 2 - 4em);

    }

}

@media (min-width: 922px) {

    .grid-item {

        width: calc(100% / 3 - 4em);

    }

}











.card {

    width: 300px;

    height: 300px;

    border-radius: 99em;

    overflow: hidden;

    box-shadow: 0 2px 18px 4px #ccc;

    background-color: white;

}

.card-illustration {

    height: 150px;

}

.card-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.card-content {

    padding: 1em 1.5em;

    text-align: center;

}

.card-title {

    font-size: 1.25rem;

    font-weight: bold;

}

.card-subtitle {

    color: #b8b7b8;

    font-size: 1rem;

    font-style: italic;

}

.card-more-details {

    margin-top: 2em;

    color: #5d8f21;

    font-size: 0.875rem;

    cursor: pointer;

}















.filters {

    display: none;

    margin-bottom: 2.5em;

}

.filters-item {

    margin-left: 1.25em;

    cursor: pointer;

    border-bottom: 2px solid transparent;

}

.filters-item.selected {

    color: #5d8f21;

    font-weight: 700;

    border-color: #5d8f21;

}

.filters-item:hover {

    border-color: #5d8f21;

}

@media (min-width: 922px) {

    .filters {

        display: inline-flex;

    }

}







.plante-item {

    opacity: 1;

    transition: opacity 0.25s linear;

}

.plante-item.shutdown {

    opacity: 0.22;

}

























@media (min-width: 922px) {

    .boisson {

        display: flex;

        padding: 4em 4em 1em 4em;

        background-color: rgba(255, 255, 255, 0.8);

        border-radius: 12px;

    }

    .boisson-complementary {

        flex: 0 0 400px;

        min-width: 400px;

        margin-left: 6em;

    }

}









.page-boisson {

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

}

@media (max-width: 921px) {

    .page-boisson {

        background-image: none !important;

    }
    .home-title{text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
    margin-bottom:1rem;
    padding-top:1rem;
    padding-bottom:1rem;}
    .home-banner {
        top: 69px;}

}

.boisson ul,

.boisson ol {

    margin-left: 1.15em;

}

.boisson .entry-title {

    margin-bottom: 0.5em;

}

.boisson-section:not(:last-child) {

    margin-bottom: 2em;

}

.boisson-section>*:last-child {

    margin-bottom: 0;

}

.boisson-title {

    margin-bottom: 1.5em;

    font-weight: bold;

}

.boisson-title-prefix {

    color: #77925c;

    font-weight: normal;

}

.boisson-content {

    margin-bottom: 3em;

}

.boisson-complementary {

    margin-bottom: 2em;

    font-size: 0.875rem;

}

.boisson-complementary .entry-title {

    font-size: 1.5rem;

    color: #77925c;

}

.boisson-complementary .entry-title small {

    color: #3a3a3a;

    margin-left: 0.25em;

}

.boisson-complementary .boisson-section {

    padding: 1.5em 2em;

    background-color: whitesmoke;

    border-radius: 12px;

}

.boisson-complementary .boisson-section p,

.boisson-complementary .boisson-section ol,

.boisson-complementary .boisson-section ul {

    opacity: 0.65;

}

.boisson-illustration {

    margin-bottom: 2em;
}

.boisson-illustration img {

    border-radius: 12px;

}









.poster>figure {

    padding: 1.025em;

    background-color: #fff;

    box-shadow: 0px 2px 18px 4px #ccc;

}

.poster>figure img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}





.wp-block-image .alignleft {

    margin-right: 2em;

}

.wp-block-image .alignright {

    margin-left: 2em;

}







.header-main-layout-1 .main-header-container {

    align-items: unset;

}

.main-header-menu .sub-menu {

    background: rgba(255, 255, 255, 0.88);

}







.main-header-icons .icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 2em;

    height: 2em;

    margin-left: 0.325em;

    font-size: 1.325em;

    line-height: 1;

    border-radius: 99em;

}

.main-header-icons .icon-facebook {

    background-color: #4267b2 !important;

    color: #fff !important;

}

.main-header-icons .icon-instagram {

    background-color: #e24063 !important;

    color: #fff !important;

}





.ast-theme-transparent-header #masthead,

.single-boisson.ast-theme-transparent-header #masthead {

    background-color: rgba(255, 255, 255, 0.88);

}





.ast-header-break-point .main-header-menu {

    background-color: transparent;

}









.external-link>a::after {

    /* Help : https://stackoverflow.com/questions/47712987/font-awesome-5-on-pseudo-elements */

    /* >> Symbol you want to use: */

    content: "\f35d";

    /* >> Name of the FA free font (mandatory), e.g.:

               - 'Font Awesome 5 Free' for Regular and Solid symbols;

               - 'Font Awesome 5 Brand' for Brands symbols. */

    font-family: "Font Awesome 5 Free";

    /* >> Weight of the font (mandatory):

               - 400 for Regular and Brands symbols;

               - 900 for Solid symbols;

               - 300 for Light symbols. */

    font-weight: 900;

    /* >> Optional styling: */

    display: inline-block;

    margin-left: 0.425rem;

    color: #6b6b6b;

    font-size: 0.725rem;

}













.shops {

    margin-top: 3rem;

}

.shop-title {

    display: inline-block;

    margin-left: 0.625rem;

}

.shop-address {

    margin-left: 2.15rem;

    color: #b8b7b8;

    font-size: 0.9em;

    line-height: 1.5;

}











.map-shops,

.map-contact {

    width: 32.5rem;

}

@media (min-width: 922px) {

    .map-shops .acf-map {

        position: sticky !important;

        top: 32px;

    }

    .logged-in .map-shops .acf-map {

        top: 64px;

    }

}











.metatag {

    display: inline-block;

    margin: 0 2rem 2rem 0;

    padding: 0.25rem 1rem;

    background-color: #eee;

    color: #7a7a7a;

    border-radius: 6px;

}









.entry-address {

    font-size: 1.25rem;

}

.entry-title+.entry-address {

    margin-top: -1.5rem;

}











.button-ingredients {

    background: #fff url('images/pastille-blanche.png') left -10px center no-repeat;

    background-size: 50px;

    color: #3a3a3a;

}

.button-ingredients:hover,

.button-ingredients:focus,

.button-ingredients:active {

    background-color: #fff;

    color: #5d8f21;

}











.flag-made-in-france {
display:none;
    position: fixed;

    right: 0;

    bottom: 0;

    z-index: 10;

}





















/** IMPORT BOOTSTRAP MODAL STYLES **/

.fade {

    transition: opacity .15s linear;

}

.fade:not(.show) {

    opacity: 0;

}

.modal {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1050;

    display: none;

    width: 100%;

    height: 100%;

    overflow: hidden;

    outline: 0;

}

.modal-open .modal {

    overflow-x: hidden;

    overflow-y: auto;

}

.modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1040;

    width: 100vw;

    height: 100vh;

    background-color: #000;

}

.modal-backdrop.fade {

    opacity: 0;

}

.modal-backdrop.show {

    opacity: .75;

}



.modal.fade .modal-dialog {

    transition: -webkit-transform .3s ease-out;

    transition: transform .3s ease-out;

    transition: transform .3s ease-out, -webkit-transform .3s ease-out;

    -webkit-transform: translate(0, -50px);

    transform: translate(0, -50px);

}

.modal.show .modal-dialog {

    -webkit-transform: none;

    transform: none;

}

.modal-dialog {

    position: relative;

    width: auto;

    margin: .5rem;

    pointer-events: none;

}

@media (min-width: 768px) {

    .modal-dialog {

        max-width: 750px;

        margin: 5rem auto;

    }

}

.modal-content {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    pointer-events: auto;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid rgba(0, 0, 0, .2);

    border-radius: 8px;

    outline: 0;

}

.modal-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding: 2rem;

    border-bottom: 1px solid #e9ecef;

    border-top-left-radius: 8px;

    border-top-right-radius: 8px;

}

.modal-title {

    font-size: 1.5rem;

    font-weight: bold;

}

.modal-subtitle {

    color: rgba(146, 146, 146, 0.85);

    font-size: 1.125rem;

    font-style: italic;

}

.close:not(:disabled):not(.disabled) {

    cursor: pointer;

}

button.close {

    padding: 0;

    background-color: transparent;

    border: 0;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

}

.close {

    float: right;

    font-size: 1.5rem;

    font-weight: bold;

    line-height: 1;

    color: #000;

    text-shadow: 0 1px 0 #fff;

    opacity: .5;

}

.close:hover {

    color: #000;

}

.modal-body {

    position: relative;

    flex: 1 1 auto;

    padding: 2rem;

}