/*
Theme Name: Puik Child
Theme URI: http://demo.lion-themes.net/puik/
Author: Lion-Themes
Author URI: http://lion-themes.net/
Description: Puik is a new WordPress theme for Online Shopping. With this theme, we have presets and different layouts. With drag and drop home page layout manager, we can build many variations of home page layout. We also have ajax cart, wishlist, compare, zoom and fancybox to bring into a modern look of website. Some of amazing features like Revolution Slider, Mega Menu, Visual Composer, Product Tabs & Carousel, Contact Form with Google map will makes your website more attractive.
Template: puik
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: puik
*/

/* Style custom widget area after top bar */

#level-progression {
    opacity: 0;
    position:relative;
    z-index:1;
    transition: opacity 1s ease-in-out;
}

#level-progression .cls-1 {
    stroke: #f8cae0;
}
#level-progression .cls-1 {
    transition: stroke-dashoffset 1s ease-in-out, stroke 1s ease-in-out;
}

#level-progression .cls-1, #level-progression .cls-2, #level-progression .cls-3, #level-progression .cls-4{
    fill: none;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 64px;
    transition: stroke-dashoffset 1s ease-in-out, stroke 1s ease-in-out;
    stroke-dasharray: 1000;  /* Un valore sufficientemente grande per coprire la lunghezza del percorso */
    stroke-dashoffset: 1000; /* Inizialmente nasconde completamente il percorso */
    z-index:1;
    position:relative;
}
#level-progression-bg{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index:0;
}

#level-progression-bg .cls-1, #level-progression-bg .cls-2, #level-progression-bg .cls-3, #level-progression-bg .cls-4 {
    fill: none;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 64px;
}
#level-progression .cls-7 {
    fill: #676766;
    font-size: 25px;
    font-variation-settings: 'wght' 400;
}
#level-progression .cls-6 {
    fill: none;
    stroke-miterlimit: 10;
    stroke: #676766;
}


#level-progression-bg .cls-1{ stroke: #434343 }
#level-progression-bg .cls-2{ stroke: #676767; }
#level-progression-bg .cls-3{ stroke: #898989; }
#level-progression-bg .cls-4{ stroke: #cac8c9 }

#level-progression .cls-1 { stroke: #f8cae0; }
#level-progression .cls-2 { stroke: #f29ac0; }
#level-progression .cls-3 { stroke: #ed72a8; }
#level-progression .cls-4 { stroke: #e9488c; }


#level-progression .cls-1[data-percentage="0"] { stroke: #434343 }
#level-progression .cls-2[data-percentage="0"] { stroke: #676767; }
#level-progression .cls-3[data-percentage="0"] { stroke: #898989; }
#level-progression .cls-4[data-percentage="0"] { stroke: #cac8c9 }

#level-progression .cls-5 {
    fill: #fff;
    animation: fadeIn 1s;
}

#level-progression .cls-6 {
    fill: url(#Sfumatura_senza_nome);
}

.progress-chart{
    background-image: linear-gradient(to left top, #b1afb0, #bfbdbe, #cccccc, #dadadb, #e9e9e9, #e9e9e9, #e9e9e9, #e9e9e9, #dadada, #cccccc, #bebebe, #b0b0b0);
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    width:100%;
    border-radius: 15px;
    position:relative;
}

.progress-chart .chart{
    display:flex;
    justify-content:center;
    align-items:center;
}

#level-progression-bg,
#level-progression{
    max-width:500px;
}

.progress-chart h2{
    color:#e9488e;
    font-size: 38px;
    text-align: center;
    line-height: 110%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
    left: 0;
    right: 65px;
    top: 30px;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width:240px;
    z-index: 999;
    opacity:0;
    animation: fadeIn 5s;
    -webkit-animation: fadeIn 5s;
    -moz-animation: fadeIn 5s;
    -o-animation: fadeIn 5s;
    -ms-animation: fadeIn 5s;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


.pink-box-container{
    display: flex;
    padding-bottom: 20px;
    justify-content: space-between;
    margin:0 -10px;
}

.pink-box{
    width:100%;
    background-color:#f0528d;
    padding: 25px;
    border-radius: 15px;
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    color:#fff;
    margin: 10px;
}

.pink-box-content{
    font-size: 28px;
    line-height:110%;
    text-transform: uppercase;
}

.check-more-container{
    margin-top:20px;
}

.df-icon-share{
    display: none !important;
}

.program-desc-container{
    padding-top: 50px;
}

.program-desc-title{
    font-size: 28px;
    color:#f0528d;
    margin-bottom:25px;
}

.program-desc-levels{
    display: flex;
    flex-wrap: wrap;
}
.program-desc-levels .program-desc-level{
    width:50%;
    padding-bottom:25px;
}
.program-desc-level .level-title{
    color:#f0528d;
    font-size:17px;
    padding:10px 0;
}
.program-desc-level ul{
    padding-left: 20px;
}
.program-desc-level ul li{
    margin-bottom:0;
}

.standby-container-profile{
    font-size:20px;
    padding: 25px;
    border-radius: 15px;
    color:#fff;
    background: linear-gradient(90.32deg, #1B1B1B 0%, #B3B1B1 99.99%);
    -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-bottom:30px;
    text-align:center;
}

.woocommerce form .form-row .woocommerce-input-wrapper .description#billing_birthdate-description{
    display:block !important;
    background: #f0528d;
}
.woocommerce form .form-row .woocommerce-input-wrapper .description#billing_birthdate-description::before{
    border-color: #f0528d transparent transparent transparent;
}
.edit-password-myaccount p.woocommerce-form-row{
    flex-direction: column;
}

.birthday-myaccount-info{
    display: block !important;
    width:100%;
    background: #f0528d;
    color:#fff;
    border-radius: 3px;
    padding: 1em;
    margin: .5em 0 0;
    clear: both;
    position: relative;
}

.birthday-myaccount-info::before {
    left: 50%;
    top: 0;
    margin-top: -4px;
    transform: translateX(-50%) rotate(180deg);
    content: "";
    position: absolute;
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: #f0528d transparent transparent transparent;
    z-index: 100;
    display: block;
} 

@media (max-width: 1024px){
    .pink-box-content {
        font-size: 25px;
    }
}
@media (max-width: 767px){
    .pink-box-content {
        font-size: 25px;
    }

    .pink-box-container{
        margin-top:20px;
        flex-wrap: wrap;
    }
    .program-desc-levels .program-desc-level{
        width:100%;
    }


    .standby-container-profile .standby-title,
    .standby-container-profile .standby-date{
        padding-right:0;
        padding-left:0;
        display:block;
        font-size:18px;
    }
}