/*
Theme Name:     Spiral Divi
Theme URI:      
Description:    Divi child theme.
Author:         Spiral
Author URI:     http://spiral-communication.fr
Template:       Divi
Version:        0.1.0
*/


/**
 vars 
 **/
 :root {
	/*colors*/
	--spcolor-main : #ed7642;
	--spcolor-second : #faa63f;
	--spcolor-third : #d54124;
	--spcolor-dark : #1d191a;
	--spcolor-light : #ead7c2;

    /* --spcolor-main50: rgba(243,113,58,0.75);
    --spcolor-second50: rgba(250,166,63,0.75);
    --spcolor-third50: rgba(213,65,36,0.75);
    --spcolor-dark50: rgba(29,25,26,0.75);
    --spcolor-light50: rgba(227,208,186,0.75); */

    --spopacity: .75;
}   


/***** HEADER *****/
#spet_top_header {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    right: 0;
}

#spet_top_header .spet_special_menu_item a {
    font-weight: bold;
    color: var(--spcolor-second) !important;
}

#spet_top_header .et_pb_column {
    display: flex;
    align-items: center;
}

ul#mobile_menu1 {
    max-height: calc(100vh - 80px);
    margin-top: 10px;
    width: calc(100% + 80px);
    margin-left: -40px;
    overflow: auto;
    border-top: solid 3px var(--spcolor-main);
}

/* sidebar */
.spet_sidebar_open,
.spet_sidebar_close {
    cursor: pointer;
}

#spet_sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    overflow: auto;
    transform: translateX(0);
    transition: all 600ms ease-in-out;
}

@media screen and (min-width: 481px) {
    #spet_sidebar {
        max-width: 300px;
    }
}

#spet_sidebar.off {
    transform: translateX(110%);
}

#spet_sidebar h2,
#spet_sidebar h3,
#spet_sidebar h4{
    margin-bottom: 0;
}

.spet_sidebar_close{
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
}

.spet_sidebar_close:before,
.spet_sidebar_close:after{
    content: '';
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
}

.spet_sidebar_close:before{
    transform: rotate(45deg);
}

.spet_sidebar_close:after{
    transform: rotate(-45deg);
}


/***** FOOTER *****/
/*
 une création <a href="http://spiral-communication.fr" class="at-spiral" target="_blank"><span>@</span>spiral</a>
 */
.at-spiral span {
    transform: scaleY(-1);
    display: inline-block;
    transition: 200ms color;
    color : inherit;
}

.at-spiral:hover span {
    color:#229898;
}

.spet_footer_menu .menu-item{
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-top: 0 !important;
}

@media screen and (min-width: 981px) {
    .spet_footer_menu .menu-item:after {
        content: '-';
        color: var(--spcolor-light);
        margin-left: 10px;
        padding-top: 8px;
    }
    
    .spet_footer_menu .menu-item:last-child:after {
        content: '';
    }
}

.spet_owlblack img{
    vertical-align: middle;
    margin: -10px 0;
}


/***** MAIN *****/
/*** Take out the divider line between content and sidebar ***/
#main-content .container:before {background: none;}
 
/*** Hide Sidebar ***/
#sidebar {display:none;}
 
/*** Expand the content area to fullwidth ***/
@media (min-width: 981px){
    #left-area {
        width: 100%;
        padding: 23px 0px 0px !important;
        float: none !important;
    }
}


/*** helpers ***/
/* contenus masqués */
.hidden {
    display: none !important;
}

/* image verticale */
.spet_vertical_image{
    height: 100%;
}

.spet_vertical_image .et_pb_image_wrap {
    height: 100%;
}

.spet_vertical_image .et_pb_image_wrap img {
    height: 100%;
    object-fit: contain;
}

/* super lien  (et boutons) */
.et_pb_button {
    color: inherit;
    padding: 0;
    margin: 0;
}

body #page-container #et-boc .et_pb_section .et_pb_module .et_pb_button:before,
body #page-container #et-boc .et_pb_section .et_pb_module .et_pb_button:after {
    /* hack divi pour afficher le before/after des boutons */
    display: block !important; 
    opacity: 1;
    margin: 0 auto !important;
}

.spet_superlink, 
.pagination a,
.et_pb_button {
   position: relative;
   display: inline-block;
   padding-top: 10px;
   padding-bottom: 15px;
}

.spet_superlink:before, 
.spet_superlink:after,
.pagination a:before, 
.pagination a:after,
.et_pb_button:before, 
.et_pb_button:after {
    content: '';
    display: block;
    background-color: var(--spcolor-main);
    width: 128px;
    max-width: 100%;
    height: 6px;
    border-radius: 3px;
    position: absolute;
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: all 400ms ease-in-out;
    transform: rotate(0deg);
}

.spet_superlink:before,
.pagination a:before,
.et_pb_button:before {
    top: 0;
}

.spet_superlink:after,
.pagination a:after,
.et_pb_button:after {
    top: calc(100% - 6px);
}

.special_link .spet_superlink:before, 
.special_link .spet_superlink:after,
.special_link .et_pb_button:before, 
.special_link .et_pb_button:after {
    background-color: var(--spcolor-second);
}

.spet_superlink:hover:before, 
.spet_superlink:hover:after,
.pagination a:hover:before, 
.pagination a:hover:after,
.et_pb_button:hover:before, 
.et_pb_button:hover:after {
    top: calc(50% - 3px);
}

.spet_superlink:hover:before,
.pagination a:hover:before,
.et_pb_button:hover:before {
    transform: rotate(45deg);
}

.spet_superlink:hover:after,
.pagination a:hover:after,
.et_pb_button:hover:after {
    transform: rotate(-45deg);
}

/* titre de la page */
.spet_page_title h1{
    margin-bottom: 0;
    padding: 0;
}

/* titre vertical */
@media screen and (min-width: 980px) {
    .spet_vertical_title {
        transform-origin: left;
        transform: rotate(-90deg);
        position: absolute;
        bottom: 30px;
        left: auto;
        right: auto;
        z-index: 3000;
        white-space: nowrap;
    }
    
    .spet_vertical_title.left {
        left: 72px;
    }
    
    .spet_vertical_title.right {
        right: 40px;
        transform: translateX(100%) rotate(-90deg);
    }
}

/* texte avec + */
.spet_text_plus:after{
    content: '+';
    font-family: Montserrat Thin, Helvetica, Arial;
    font-size: 36px;
    text-align: center;
    display: block;
    margin: 10px auto;
}


/* element toggle */
.spet_more_toggle {
    overflow: hidden;
    transition: all 800ms ease-in-out;
}

.spet_more_button {
    background-color: transparent;
    display: block;
    font-size: 18px;
    line-height: 18px;
    margin: 20px auto;
    font-weight: bold;
    border: solid 3px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

/*** accueil ***/
/* title */
@media screen and (max-width: 980px){
    #spet_site_title {
        position: absolute;
        bottom: 30px;
        left: 0;
        right: 0;
        z-index: 3000;
    }
}


/* bouton scroll */
.spet_button_scroll {
    position: absolute;
    width: 100%;
    bottom: -15px;
    z-index: 3000;
    padding-top: 15px;
}

.spet_button_scroll:hover img {
    animation: drift 800ms ease-in-out infinite alternate;
}

@keyframes drift {
    0% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* raccourcis */
.spet_cross{
    position: relative;
    overflow: hidden;
}

.spet_cross.et_pb_row .et_pb_column {
    padding: 20px;
}

.spet_cross.et_pb_row .et_pb_column:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: all 600ms ease-in-out;
    opacity: var(--spopacity);
}

.spet_cross.et_pb_row .spet_cross_top:before{
    background-color: var(--spcolor-dark);
}

.spet_cross.et_pb_row .spet_cross_left:before {
    background-color: var(--spcolor-third);
}

.spet_cross.et_pb_row .spet_cross_right:before {
    background-color: var(--spcolor-light);
}

.spet_cross.et_pb_row .spet_cross_bottom:before {
    background-color: var(--spcolor-second);
}

@media  screen and (min-width: 981px) {
    .spet_cross:before, .spet_cross:after {
        content: '';
        position: absolute;
        background-color: #fff;
        width: 4000px;
        height: 80px;
        top: calc(50% - 40px);
        left: calc(50% - 2000px);
        z-index: 1;
        clear: none;
        visibility: initial;
    }

    .spet_cross:before {
        transform: rotate(45deg);
    }

    .spet_cross:after {
        transform: rotate(-45deg);
    }

    .spet_cross.et_pb_row .et_pb_column {
        width: 30%;
        float: none;
        position: initial;
    }
    
    .spet_cross.et_pb_row .spet_cross_left {
        float: left;
        margin: 0 15% 0 5%;
    }
    
    .spet_cross.et_pb_row .spet_cross_right {
        float: right;
        margin: 0 5% 0 15%;
    }
    
    .spet_cross.et_pb_row .spet_cross_top,
    .spet_cross.et_pb_row .spet_cross_bottom {
        margin: 20px 35%;
        padding: 20px 90px;
        clear: both;
    }

    .spet_cross.et_pb_row .et_pb_column:before {
        width: 50vw;
        height: 50vw;
        transform: rotate(-45deg);
    }
    
    .spet_cross.et_pb_row .spet_cross_top:before{
        top: calc(50% - 50vw);
        left: 50%;
        transform-origin: left bottom;
    }
    
    .spet_cross.et_pb_row .spet_cross_left:before {
        top: calc(50% - 50vw);
        left: calc(50% - 50vw);
        transform-origin: right bottom;
    }
    
    .spet_cross.et_pb_row .spet_cross_right:before {
        top: 50%;
        left: calc(50%);
        transform-origin: left top;
    }
    
    .spet_cross.et_pb_row .spet_cross_bottom:before {
        top: calc(50%);
        left: calc(50% - 50vw);
        transform-origin: right top;
    }
}

@media screen and (max-width: 1280px){
    .spet_cross .spet_superlink.dp_field_text {
        font-size: 32px !important;
    }
}

/* survol */
.spet_cross.et_pb_row .et_pb_column:hover:before {
    opacity: 1;
}

.spet_cross.et_pb_row .et_pb_column:hover .spet_superlink:before, 
.spet_cross.et_pb_row .et_pb_column:hover .spet_superlink:after {
    top: calc(50% - 3px);
}
.spet_cross.et_pb_row .et_pb_column:hover .spet_superlink:before {
    transform: rotate(45deg);
}
.spet_cross.et_pb_row .et_pb_column:hover .spet_superlink:after {
    transform: rotate(-45deg);
}

/* diapo pictos */
/* hack : forcer l'affichage de la première slide pour corriger le masquage avant le premier changement de slide */
.spet_diapo_pictos .et_pb_slide:first-of-type {
    display : block;
}

.spet_diapo_pictos .et_pb_slide_description {
    padding: 0 40px;
}

.spet_diapo_pictos .et_pb_slide_description .et_pb_slide_content p img {
    display: inline;
    max-width: 19%;
}


/*** contact ***/
/* label */
.spet_labeled_contact .et_pb_contact_form_label{
    display: block;
    color: #fff;
    margin-bottom: 5px;
}

/* bouton envoyer */
.spet_labeled_contact .et_contact_bottom_container {
    float: left;
}

.spet_labeled_contact .et_pb_contact_submit:before,
.spet_labeled_contact .et_pb_contact_submit:after {
    max-width: 60px;
}

/* messages erreur */
.et_pb_bg_layout_light .et-pb-contact-message {
    color: #fff;
}


/*** boutique ***/
/* ligne/colonne */
.spet_grid_products .spet_products_container,
.spet_formules .et_pb_column {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

@media screen and (min-width: 960px) {
    .spet_grid_products .spet_products_container,
    .spet_formules .et_pb_column {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1440px) {
    .spet_grid_products .spet_products_container,
    .spet_formules .et_pb_column {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* product */
.spet_product {
    position: relative;
    padding: 50px;
    overflow: hidden;
    border: solid 1px #fff;
}

.spet_product:before {
    content: '';
    position: absolute;
    top: -50px;
    bottom: -50px;
    left: -50px;
    right: -50px;
    transform: translateX(225px) translateY(calc(-100% + 390px)) rotate(-45deg);
    transform-origin: left bottom;
    background-color:var(--spcolor-dark);
    opacity: var(--spopacity);

    
    transition: all 800ms ease-in-out;
}

.spet_product.product_cat-burger:before{
    background-color:var(--spcolor-light);
}
.spet_product.product_cat-hotdog:before{
    background-color:var(--spcolor-main);
}
.spet_product.product_cat-salade:before{
    background-color:var(--spcolor-second);
}
.spet_product.product_cat-dessert:before{
    background-color:var(--spcolor-third);
}

/* background */
.spet_product .spet_product_background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    object-fit: cover;
    width: 100%;
    z-index: -1;
    height: 390px;
}

@media screen and (min-width: 1025px) {
    /* .spet_product .spet_product_background {
        height: 100%;
    } */
}

/* header */
.spet_product .spet_product_header {
    width: 250px;
    min-height: 180px;
    margin-bottom: 50px;
    position: relative;
    transition: all 800ms ease-in-out;
}

/* content */
.spet_product .spet_product_content {
    position: relative;
    margin-top: 200px;
}

/* prix */
.spet_product .dp_field_price {
    margin-bottom: 20px;
    font-family: 'American Typewriter black',Helvetica,Arial,Lucida,sans-serif;
    font-weight: 900;
    font-size: 30px;
    text-align: center;
}

/* description */
.spet_product .dp_field_tinymce,
.spet_product .dp_field_excerpt {
    position: relative;
    font-size: 18px;
    text-align: center;
}

.spet_product .dp_field_tinymce h3{
    font-size: 36px;
    color: var(--spcolor-second) !important;
    margin-bottom: 0;
}

.spet_product .dp_field_tinymce h4{
    font-family: inherit;
    font-size: inherit;
    font-weight: bold;
    color: var(--spcolor-main) !important;
    margin-bottom: 0;
}

@media screen and (min-width: 1025px) {
    .spet_product .dp_field_price {
        transform: translateX(140px) translateY(0px) rotate(-45deg);
        transform-origin: left center;
        text-align: left;
    }

    /* description */
    .spet_product .dp_field_tinymce,
    .spet_product .dp_field_excerpt {
        margin-left: 210px;
    }
}

/* inspi */
.spet_product.product_cat-inspi:before,
.spet_product.product_cat-inspi .spet_product_header {
    opacity: 0;
}


/* produit survol */
@media screen and (min-width: 1025px) {
    .spet_products_hover .spet_product.product_cat-dessert {
        color: #fff;
    }

    .spet_products_hover .spet_product:hover:before {
        transform: translateX(0) translateY(0) rotate(0);
    }

    .spet_products_hover .spet_product .spet_product_background {
        height: 100%;
    }

    .spet_products_hover .spet_product .spet_product_content {
        margin-top: 0;
    }

    .spet_products_hover .spet_product .dp_field_price:after {
        content: '';
        width: 80%;
        max-width: 360px;
        height: 14px;
        margin-top: 5px;
        background-color: var(--spcolor-dark);
        display: block;
        border-radius: 7px;
    }
    
    .spet_products_hover .spet_product.product_cat-dessert .dp_field_price:after {
        background-color: #fff;
    }
    
    .spet_products_hover .spet_product .dp_field_price {
        transition: all 800ms ease-in-out 200ms;
        transform: translateX(-480px) translateY(620px) rotate(-45deg);
    }
    
    .spet_products_hover .spet_product:hover .dp_field_price {
        transform: translateX(140px) translateY(0px) rotate(-45deg);
    }
    
    .spet_products_hover .spet_product .dp_field_tinymce,
    .spet_products_hover .spet_product .dp_field_excerpt{
        margin-top: -50px;
    }
    
    .spet_products_hover .spet_product .dp_field_tinymce,
    .spet_products_hover .spet_product .dp_field_excerpt,
    .spet_products_hover .spet_product .dp_field_description {
        transition: all 400ms ease-in-out 800ms;
        opacity: 0;
    }
    
    .spet_products_hover .spet_product:hover .dp_field_tinymce,
    .spet_products_hover .spet_product:hover .dp_field_excerpt,
    .spet_products_hover .spet_product:hover .dp_field_description {
        opacity: 1;
    }
    
    .spet_product.product_cat-inspi:hover:before{
        opacity: var(--spopacity);
    }
    
    .spet_product.product_cat-inspi:hover .spet_product_header {
        opacity: 1;
    }
}

/* formule */
.spet_formule {
    height: 100%;
}

.spet_formule .spet_product_content {
    margin-top: 100px;
}

/* accompagnements */
.spet_accompagnement:before {
    transform: translateX(225px) translateY(calc(-100% + 340px)) rotate(-45deg);
}

.spet_accompagnement .spet_product_header {
    min-height: 130px;
}

.spet_accompagnement .spet_product_content {
    margin-top: 50px;
}

.spet_accompagnement .dp_field_tinymce {
    margin-top: 30px;
    padding-top: 40px;
    position: relative;
    z-index: 10;
}

.spet_accompagnement .dp_field_tinymce:before{
    content: '';
    background-color: var(--spcolor-dark);
    opacity: var(--spopacity);
    position: absolute;
    top: -50px;
    bottom: auto;
    left: 50%;
    right: auto;
    width: 800px;
    height: 800px;
    transform: rotate(45deg);
    transform-origin: left top;
    z-index: -1;
}


/* filtres & animations filtrage */
#spet_products_filters ul {
    margin: 0;
    padding: 0;
}

#spet_products_filters ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0 5px;
}

#spet_products_filters ul li a:not(.active){
    color: inherit;
}


#spet_filterable_products{
    overflow: hidden;
}

.spet_products_clone{
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
}

#spet_filterable_products .spet_product {
    opacity: 1;
    transform: perspective(1000px) rotateY(0deg);
    transform-origin: right; 
}

#spet_filterable_products .spet_products_clone .spet_product {
    transform-origin: left; 
}

#spet_filterable_products .spet_product.on {
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0;
    animation: producton 800ms both ease-in-out; 
}
#spet_filterable_products .spet_product.off {
    transform: perspective(1000px) rotateY(0deg);
    opacity: 1;
    animation: productoff 800ms both ease-in-out; 
}

@keyframes productoff {
    0% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        opacity: 0;
        transform: perspective(1000px) rotateY(90deg);
    }
}

@keyframes producton {
    0% {
        opacity: 0;
        transform: perspective(1000px) rotateY(-90deg);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) rotateY(0deg);
    }
}

/* boissons */
.spet_mini_product {
    position: relative;
    overflow: hidden;
}

.spet_mini_product .dp_field_title{
    position: relative;
    z-index: 10;
    padding: 20px 50px;
    margin: -50px auto 120px 0;
    width: 250px;
    height: 125px;
    text-align: center; 
}

.spet_mini_product .dp_field_title:before{
    content: '';
    position: absolute;
    z-index: -1;
    top: auto;
    bottom: -50px;
    left: 50%;
    right: auto;
    width: 800px;
    height: 800px;
    background-color: #fff;
    transform-origin: bottom left;
    transform: rotate(-45deg);
}


/*** articles ***/
.spet_post_metas .et_pb_title_container {
    margin-top: 20px;
    text-transform: uppercase;
}

.published:before {
    content: '}';
    font-family: 'ETMODULES';
    margin-right: 10px;
}