/*****************************************************************

SPECTACLE ARCHIVE

*****************************************************************/

.spectacle-archive {


    margin-bottom: 100px;
    

}


/*****************************************************************

SPECTACLE PAGE

*****************************************************************/

ul#filters {

    margin: 0;
    padding: 0;
    margin-bottom: 24px;
    margin-top: 6px;
    text-align: center;


    li {

        min-height: 32px;
        list-style: none;
        display: inline-block;
       margin-bottom: 14px;

        a {

            border: 1px solid #000000;
            color: #000000;
            font-weight: 300;
            font-size: 14px;
            padding: 6px 16px;
            line-height: 20px;

            &.selected {

                background-color: #000000;
                color: #ffffff;
                border: 1px solid #000000;
            }

            &:hover {

                color: #ffffff;
                text-decoration: none;
                background-color: #000000;
                border: 1px solid #000000;
            }

        }
    }
}

@media (min-width: 990px) {

    ul#filters {


        text-align: left;
      
    
    
    
        li {

            margin-bottom: inherit;

        }
}
}

.spectacle-page {}

// avirer
.spectacle-container {


    //margin-top: 100px;
}

/*@media (min-width: 990px) {

    // avirer
    .spectacle-container {


        margin-top: inherit;
    }
}*/

.spectacle-home {

    .col-md-6:nth-child(4) {

        display: block;
    }

}

@media (min-width: 990px) {

    .spectacle-home {

        .col-md-6:nth-child(4) {

            display: none;
        }

    }

}

.spectacle {

    &-item {

        background: #F1EFED;
        // position: relative;
        margin-bottom: 30px;

        a {

            text-decoration: none;
            color:$dark-color;

            &:hover {

                text-decoration: none;
                color:$dark-color;
            }

            &:active {

                text-decoration: none;
                color:$dark-color;
            }
        }

        .date {

            padding: 0;
            margin: 0;
            list-style: none;

            li {

                text-transform: uppercase;
                line-height: 17px;
            }
        }

        .visuel {

            position: relative;

            .categorie {

                display: block;
                position: absolute;
                background-color: $dark-color;
                padding: 6px 14px 6px 14px;
                color: white;
                font-weight: 300;
                left: 0;
                top: 0;
                text-align: center;


            }

            img {}

        }

        .content {

            padding: 30px;

            min-height: 350px;
            max-height: 600px;


            h3 {


                font-size: 24px;
                font-family: $titleFont;
                font-weight: 700;
                font-style: italic;
                margin-top: 16px;
                margin-bottom: 0px;
                text-transform: lowercase;

                &::first-letter {

                    text-transform: uppercase;
                }

                a {

                    text-decoration: none;
                    color: $dark-color;

                    &:hover {

                        color: $primary-color;

                    }
                }


            }

            p {

                &.auteur {

                    font-size: 14px;
                    font-weight: 300;

                }


            }

            .bt-savoir-plus {

                position: absolute;
                bottom: 60px;

            }

        }


    }
}

@media (min-width: 768px) {

    .spectacle {

        &-item {

            a {

                text-decoration: none;
                color:$dark-color;
            }

            .content {

                min-height: 350px;
                max-height: 600px;

            }
        }
    }
}

@media (min-width: 990px) {

    .spectacle {

        &-item {
            a {

                text-decoration: none;
                color:$dark-color;
            }
            .content {

                min-height: 430px;
                max-height: 600px;

            }
        }
    }
}

@media (min-width: 1200px) {

    .spectacle {

        &-item {

            a {

                text-decoration: none;
                color:$dark-color;
            }
            .content {

                min-height: 370px;
                max-height: 600px;

            }
        }
    }
}


/*****************************************************************

SINGLE SPECTACLE PAGE

*****************************************************************/



.single-spectacle {

    h1 {


        font-family: $titleFont;
        font-weight: 700;
        font-style: italic;
        font-size: 50px;
        letter-spacing: 1.25px;
        text-align: center;
        line-height: 43px;
        margin-bottom: 12px;

    }

    .auteur {

        font-weight: 300;
        font-size: 16px;
        text-align: center;



    }

    #wpv-view-layout-178 {

        .btn-primary {

            margin-bottom: 80px;

        }

    }

    &-content {

        margin-top: 20px;

        ul.date {

            list-style: none;
            margin: 0 0 35px 0;
            padding: 0;

            li {

                text-transform: uppercase;
                line-height: 18px;

                .lieu {

                    text-transform: none;

                }
            }

        }

        p {

            font-size: 14px;


        }

        .auteur-article {

            font-size: 12px;
            font-weight: 700;

        }

        .infos-pratiques {

            margin: 30px 0 30px 0;
            font-size: 13px;

            &::before {

                content: '';
                display: block;
                width: 45px;
                height: 1px;
                background-color: $primary-color;
                margin-bottom: 20px;
            }

            &::after {

                content: '';
                display: block;
                width: 45px;
                height: 1px;
                background-color: $primary-color;
                margin-top: 20px;
            }

        }

        .genre {

            font-weight: 700;

        }

        .tarif {}

        .duree {}

        .age {}

        .distribution {

            a.btn-distribution {

                font-family: $contentFont;
                font-size: 14px;
                font-weight: 700;
                text-transform: uppercase;
                border-bottom: 1px solid #F1EFED;
                padding-bottom: 6px;
                display: block;
                position: relative;
                color: $dark-color;
                text-decoration: none;


                &:after {

                    content: '+';
                    position: absolute;
                    right: 0;
                    font-size: 14px;
                    font-weight: 700;

                }

                &:hover {

                    color: $primary-color;


                }

                &:focus {


                    outline: none;

                }


            }

            .card {

                border: none;

            }

            p {}

        }

        .actions {

            // avirer 
            //display: none;

            width: 100%;
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;

            a {

                display: inline-block;
                text-transform: uppercase;
                font-size: 14px;
                font-weight: 500;
                height: 50px;

               //a voir
                margin-right: 10px;
                padding: 8px 0 10px 0;
                line-height: 32px;
                &.btn-ico {

                    width: inherit;
                    background-color: $dark-color;
                    //padding: 10px 0 10px 0;
                    margin-bottom: 30px;

                    &::before {
                        content: url(img/pictos/picto-voiture.svg);
                        width: 33px;
                        height: 27px;
                        position: relative;

                        margin-right: 10px;

                    }

                    span {

                        &.covtext {

                            vertical-align: text-bottom;

                        }

                        &.covnbannonce {}
                    }

                }

                &.btn-reservez {

                    width: inherit;


                }

            }

        }
        

        .partage {
            text-align: right;
            display: flex;
            flex-direction: column;
            margin-left: auto;
            width: 100%;
            margin-top: 30px;

            p {

                flex: 1 0 auto;
                margin: 0;
                text-align: center;
                font-weight: 700;
                font-size: 13px;
                margin-bottom: 8px;
            }

            ul {

                list-style: none;
                margin: 0;
                padding: 0;
                text-align: center;
                flex: 1 0 auto;




                li {

                    display: inline;
                    padding-left: 4px;

                }

            }

        }


    }


    .btn-ico-bande-annonce {

        margin-top: 40px;
        margin-bottom: 40px;
        margin-left: auto;
        margin-right: auto;
        display: block;
 


        // &::before {
        //     content: url(img/pictos/picto-bande-annonce.svg);
        //     width: 32px;
        //     height: 33px;
        //     position: relative;
        //     top: -2px;
        //     margin-right: 10px;
        //     vertical-align: middle;
        //     line-height: 2px;

        // }

    }

    .slider-single-spectacle {

        .slick-dots li button:before {

            font-size: 12px;

        }

        .slick-dots li {

            margin: 0 2px;

        }

        .slick-dots li button:before {

            color: $dark-color;
            opacity: 1;

        }

        .slick-dots li.slick-active button:before {

            color: $primary-color;
            opacity: 1;

        }

    }

    .section-title {

        margin-top: 150px;

    }
}
@media (min-width: 768px) {

    .single-spectacle {

        &-content {
            .partage {
                text-align: right;
                flex-direction: row;
                width: 53%;
                p {

                    text-align: left;

                }

                ul {

                    text-align: right;

                }
            }

          
               
        }
    
        .actions {

            flex-direction: row;

            a {

                flex: 1 0 43%;

                &.btn-ico {
                    margin-bottom: inherit;
                }
            }
        }

        }

       

}

@media (min-width: 990px) {
    .single-spectacle {
   
        &-content {

            .partage {
                
              

                p {

                    
                    margin-bottom: inherit;
                }
            }

            .btn-ico-bande-annonce {

                margin-top: 20px;
                margin-bottom: inherit;
                margin-left: inherit;
                margin-right: inherit;
            }
        }

        

       
    }
}