/*Bianco e nero*/
/*IlvinoUnaLungaStoria*/
.ps-timeline-sec {
    position: relative;
    background: #822533;
}

    .ps-timeline-sec .container {
        position: relative;
    }

@media screen and (max-width: 767px) {
    .ps-timeline-sec .container ol:before {
        /*background: #348e80;
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 100%;
        position: absolute;
        top: 130px !important;
        left: 36px !important;
    */
    }

    .ps-timeline-sec .container ol:after {
        background: #812434;
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 100%;
        position: absolute;
        top: inherit !important;
        left: 36px;
    }

    .ps-timeline-sec .container ol.ps-timeline {
        margin: 130px 0 !important;
        border-left: 2px solid #812434;
        padding-left: 0 !important;
        padding-top: 120px !important;
        border-top: 0 !important;
        margin-left: 25px !important;
    }

        .ps-timeline-sec .container ol.ps-timeline li {
            height: 220px;
            float: none !important;
            width: inherit !important;
        }

            .ps-timeline-sec .container ol.ps-timeline li:nth-child(2) .img-handler-bot img {
                width: 70px;
            }

            .ps-timeline-sec .container ol.ps-timeline li:last-child {
                margin: 0;
                bottom: 0 !important;
                height: 120px;
            }

                .ps-timeline-sec .container ol.ps-timeline li:last-child .img-handler-bot {
                    bottom: 40px !important;
                    width: 40% !important;
                    margin-left: 25px !important;
                    margin-top: 0 !important;
                }

                    .ps-timeline-sec .container ol.ps-timeline li:last-child .img-handler-bot img {
                        width: 100%;
                    }

                .ps-timeline-sec .container ol.ps-timeline li:last-child .ps-top {
                    margin-bottom: 0 !important;
                    top: 20px;
                    width: 50% !important;
                }

            .ps-timeline-sec .container ol.ps-timeline li span {
                left: 0 !important;
            }

                .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:before {
                    content: none !important;
                }

                .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:after {
                    content: none !important;
                }

                .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:before {
                    content: none !important;
                }

                .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:after {
                    content: none !important;
                }

            .ps-timeline-sec .container ol.ps-timeline li .img-handler-top {
                position: absolute !important;
                bottom: 150px !important;
                width: 30% !important;
                float: left !important;
                margin-left: 35px !important;
                margin-bottom: 0 !important;
            }

                .ps-timeline-sec .container ol.ps-timeline li .img-handler-top img {
                    margin: 0 auto !important;
                    width: 80% !important;
                }

            .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot {
                position: absolute !important;
                bottom: 115px !important;
                width: 30% !important;
                float: left !important;
                margin-left: 35px !important;
                margin-bottom: 0 !important;
            }

            .ps-timeline-sec .container ol.ps-timeline li p {
                text-align: left !important;
                width: 100% !important;
                margin: 0 auto !important;
                margin-top: 0px !important;
            }

            .ps-timeline-sec .container ol.ps-timeline li .ps-top {
                width: 60% !important;
                float: right !important;
                right: 0;
                top: -40px;
            }

            .ps-timeline-sec .container ol.ps-timeline li .ps-bot {
                width: 60% !important;
                float: right !important;
                right: 0;
                top: -40px;
            }
}

.ps-timeline-sec .container ol:before {
    background: #812434;
    content: "";
    /*width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    left: 8px;
    top: 49.5%;*/
}

.ps-timeline-sec .container ol:after {
    background: #812434;
    content: "";
    /*width: 10px;
    height: 10px;
    border-radius: 100%;
    position: absolute;
    right: 8px;
    top: 49.5%;
    */
}

.ps-timeline-sec .container ol.ps-timeline {
    margin: 390px 0;
    padding: 0;
    border-top: 12px solid #812434;
    list-style: none;
}

    .ps-timeline-sec .container ol.ps-timeline li {
        float: left;
        width: 20%;
        padding-top: 30px;
        position: relative;
    }

        .ps-timeline-sec .container ol.ps-timeline li span {
            width: 50px;
            height: 50px;
            margin-left: -25px;
            background: #fff;
            border: 4px solid #812434;
            border-radius: 50%;
            box-shadow: 0 0 0 0px #fff;
            text-align: center;
            line-height: 50px -10;
            color: #df8625;
            font-size: 2em;
            font-style: normal;
            position: absolute;
            top: -35px;
            left: 50%;
        }

            .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:before {
                content: "";
                color: #812434;
                width: 2px;
                height: 50px;
                background: #812434;
                position: absolute;
                top: -50px;
                left: 50%;
            }

            .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-top:after {
                content: "";
                color: #812434;
                width: 8px;
                height: 8px;
                background: #812434;
                position: absolute;
                bottom: 90px;
                left: 44%;
                border-radius: 100%;
            }

            .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:before {
                content: "";
                color: #812434;
                width: 2px;
                height: 50px;
                background: #812434;
                position: absolute;
                bottom: -50px;
                left: 50%;
            }

            .ps-timeline-sec .container ol.ps-timeline li span.ps-sp-bot:after {
                content: "";
                color: #812434;
                width: 8px;
                height: 8px;
                background: #812434;
                position: absolute;
                top: 90px;
                left: 44%;
                border-radius: 100%;
            }

        .ps-timeline-sec .container ol.ps-timeline li .img-handler-top {
            position: absolute;
            bottom: 0;
            margin-bottom: 130px;
            width: 100%;
        }

            .ps-timeline-sec .container ol.ps-timeline li .img-handler-top img {
                display: table;
                margin: 0 auto;
            }

        .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot {
            position: absolute;
            margin-top: 60px;
            width: 100%;
        }

            .ps-timeline-sec .container ol.ps-timeline li .img-handler-bot img {
                display: table;
                margin: 0 auto;
            }

        .ps-timeline-sec .container ol.ps-timeline li p {
            text-align: center;
            width: 80%;
            margin: 0 auto;
        }

        .ps-timeline-sec .container ol.ps-timeline li .ps-top {
            position: absolute;
            bottom: 0;
            margin-bottom: 100px;
        }

        .ps-timeline-sec .container ol.ps-timeline li .ps-bot {
            position: absolute;
            margin-top: 35px;
        }

.navbar-bianconero {
    background-color: #822533;
}
        .navbar-white-color{
            color:white
        }
   /*Custom h3 font size for index of bianco e nero page */
        .customized-font-h3 {
            font-size: 35px
        }


/* Dettaglio IlvinoUnaLungaStoria CSS*/

.button-indietro-timeline {
    background-color: #822533 !important;
    color: #fefefe !important;
    margin-top: 2rem;
    height: 60px;
}

.button-indietro-timeline a {
    color:white!important;
}


.container-dettaglio-ilvinounalungastoria {
    font-size: 27px;
    background-color: #e3dee4;
    border-radius: 15px;
    width: 1200px;
    height: 500px;
    overflow: auto;
    text-align: justify;
    padding: 20px !important;
}


/*Css Timeline*/

.preistoria {
    background-color: #dc3187;
    color: #fefefe;
    margin-top: 2rem;
    height: 60px
}

.eta-antica {
    background-color: #ef7d2f;
    color: #fefefe;
    margin-top: 2rem;
    height: 60px
}

.medioevo {
    background-color: #e84066;
    color: #fefefe;
    margin-top: 2rem;
    height: 60px
}

.eta-moderna {
    background-color: #0092c2;
    color: #fefefe;
    margin-top: 2rem;
    height: 60px
}

.eta-contemporanea {
    background-color: #00a4b3;
    color: #fefefe;
    margin-top: 2rem;
    height: 60px
}
.timeline-circle {
    margin-bottom: 51px !important;
}
/*Css AppuntiDiViticoltura*/
.mt-7{
    margin-top:6rem;
}
.m-7 {
    margin:5rem !important;
}
.col-frontpage-appunti-di-viticoltura {
    background-color: #822533;
    padding: 10px;
    margin-top: 3rem;
    margin-right: 3rem;
    margin-left: 3rem;
    color: white;
}

    .col-frontpage-appunti-di-viticoltura a {
        color: #ffffff !important;
        text-decoration: none !important;
        font-family: 'Comic Gecko Pro';
    }

.descrizione-appunti-viticoltura {
    background-color: #822533;
    color: #fefefe;
}
.tab-scelta-vino {
    background-image: url("../img/bianco-nero/Sfondo_tab_vini.png");
    color: #822533;
    border-radius: 75px;
}
.testo-descrizione-appunti-viticoltura {
    overflow: auto;
    text-align: justify;
    padding-left: 50px !important;
    padding-right: 50px !important;
    font-size: 27px;
    height: 600px;
    overflow: auto;
}
/*Vini del Territorio CSS*/
.mt-6 {
    margin-top: 5rem;
}
.height-div-vini-del-territorio{
height: 980px;
}

.col-frontpage-vini-del-territorio {
    padding: 10px;
    margin-top: 10rem;
    margin-right: 10rem;
    margin-left: 10rem;
    color: white;
}

.child-icon-rounded{
    border-radius: 100%;
    height: 300px;
    width:300px;
}


.col-dettaglio-vini-del-territorio {
    background-color: #822533;
    /*height: 60px;
    margin-top: 2rem;*/
    color: white;
}
    .col-dettaglio-vini-del-territorio-active {
        background-color: #820316;
        /*height: 60px;
    margin-top: 2rem;*/
        color: white;
    }

/*CLASSE MAP*/
#map {
    width:100%;
}

.active {
    fill: #0f9921 !important;
}
.disactive {
    fill: #ff0000 !important;
}
.foggia {
    fill: lightgray;
}
.brindisi {
    fill: lightgray;
}
.bat {
    fill: lightgray;
}
.lecce {
    fill: lightgray;
}
.bari {
    fill: lightgray;
}
.taranto {
    fill: lightgray;
}

.o {
    fill: #fff;
    font-family: Rubik-Medium, Rubik;
    font-size: 15.93px;
}

.descrizione_vino_container {
    display:none;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #e3dee4;
    border-radius: 15px;
    height: 300px;
    overflow: auto;
    padding: 20px;
}

#descrizione_vino {
    font-size: 21px;
}

@media (hover: none) and (pointer: coarse) {
    /* touchscreens */
    ::-webkit-scrollbar {
        display: none;
    }
}


@media (hover: hover) and (pointer: coarse) {
    /* controllers */
    ::-webkit-scrollbar {
        display: none;
    }
}
/*GIOCARE CON IL VINO CSS */

/*Puzzle di vino*/

#collage hr {
    border: none;
    border-top: 2px solid #f5f2f2;
    height: 1px;
}

#collage #playPanel {
    /*background-color: #c2defc;*/
    padding: 10px 0px;
    margin: 10px auto;
   /* max-width: 800px;*/
    width: 100%;
}

#collage #actualImageBox {
    display: inline-block;
    font-size: 0.8em;
    /*margin: 10px 10px;*/
    vertical-align: top;
    width: 280px;
}

/*#collage #stepBox, #collage #timeBox {
    display: inline-block;
    width: 48%;
}*/

    #collage #stepBox div {
        /*background-color: #c2defc;*/
        display: inline-block;
        padding: 1px 4px;
        margin: 0px auto;
        max-width: 800px;
    }

#collage img#actualImage {
    /*border: 2px solid #a46;*/
    height: 400px;
    width: 400px;
}

#collage #sortable {
    /*border: 2px solid #a46;*/
    list-style-type: none;
    display: inline-block;
    margin: 10px;
    padding: 0;
    width: 600px;
}

    #collage #sortable li {
        background-size: 400% 400%;
        border: none;
        cursor: pointer;
        margin: 0;
        padding: 0;
        float: left;
        width: 100px;
        height: 100px;
    }

#collage button {
    background-color: #f5f2f2;
    border: 1px solid #cce;
    display: inline;
    font-size: 17px;
    height: auto;
    width: auto;
    padding: 3px 8px;
}
.box-img-puzzle {
    background-color: #e6e6e6;
    display: inline-block;
    width: 95%;
    vertical-align: top;
    border-radius:15px;
}
.body-base {
    font-family: 'Comic Gecko Pro';
}


/*css Radio button  */
label {
    width: 190px;
    border-radius: 3px;
    border: 1px solid #D1D3D4;
    background-color: #822533;
    cursor: pointer;
    line-height: 2;
    color: #FFFFFF;
}

/* hide input */
input.radio:empty {
    margin-left: -999px;
}

    /* style label */
    input.radio:empty ~ label {
        position: relative;
        float: left;
        line-height: 2.5em;
        text-indent: 3.25em;
        margin-top: 2em;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        input.radio:empty ~ label:before {
            position: absolute;
            display: block;
            top: 0;
            bottom: 0;
            left: 0;
            content: '';
            width: 2.5em;
            background: #D1D3D4;
            border-radius: 3px 0 0 3px;
        }

/* toggle hover */
input.radio:hover:not(:checked) ~ label:before {
    content: '\2714';
    text-indent: .9em;
    color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
    color: #888;
}

/* toggle on */
input.radio:checked ~ label:before {
    content: '\2714';
    text-indent: .9em;
    color: #9CE2AE;
    background-color: #4DCB6D;
}

input.radio:checked ~ label {
    color: #777;
}

/* radio focus */
input.radio:focus ~ label:before {
    box-shadow: 0 0 0 3px #999;
}
.input-hide-circle {
   visibility: hidden;
  }
/*#easy-label #medium-label #hard-label #veryhard-label {
    cursor: pointer;
    background-color: #6c2a2b;
    color: white;
}*/
.pointer-label {
    height: 35px;
    font-size: 17px;
}

.pointer-label-active {
    background-color: white;
    color: #822533;
    height: 35px;
    font-size:17px;
}

.completamento-puzzle {
    background-color: #822533;
    color: #ffffff;
    padding: 40px 10px 20px 10px;
    text-align: center;
    margin-top: 6rem;
}
.color-vino {
    color: #6c2a2b;
}
.descrizione_vino_gioco {
    display: none;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    background-color: #e3dee4;
    border-radius: 15px;
    height: 500px;
    overflow: auto;
    padding: 20px;
}
.descrizione_vino_info {
    -webkit-overflow-scrolling: touch;
    background-color: #e3dee4;
    border-radius: 15px;
    height: 500px;
    overflow: auto;
    padding: 20px;
}
.button_avanti {
    background-color: #812434;
    color: #ffffff;
    width: 100%;
    display: none
}

.margin-map{
    margin-left: 12rem !important;
}
.mt-20{
    margin-top:22rem;
}
/*Audio icon */
.white-color {
    color: white !important;
}

.audio-icon {
    height: 50px;
    width: 50px;
    cursor: pointer;
}