.bg{background: #aae2f7 url("images/dashboard/bg-carbon.jpg");  }
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    

    .bg-line, .settings-panel .color-tiles .tiles.primary {
        
        background: rgb(4, 126, 63);
        background: linear-gradient(0deg, rgb(4, 126, 63) 0%, rgba(78,228,151,1) 100%);
    }

    .intro-banner-vdo-play-btn,.num-dm{ font-size: 8.3vw; color:#46a7fa;} 
    .intro-banner-vdo-play-btn,.num-cm{ font-size: 5vw;} 

    .whiteBg {
        /* background-color: #ed184f!important;
           background-image: linear-gradient(90deg, #fd5581, #fd8b55);*/
           background: rgb(209, 235, 243);
       background: linear-gradient(90deg, rgb(255, 255, 255) 0%, #ffffff 100%);
       }
       .intro-banner-vdo-play-btn{
         height: 250px;
         width: 250px;
         position: relative;
         top: 35%;
         right: 0%;
         left:0%;
         text-align: center;
         margin: 0px 0 0 15%;
         border-radius: 50%; 
         z-index: 1;
         opacity: 0.8;
        
       }
       .intro-banner-vdo-play-btn i{
         line-height:56px;
         font-size:30px;  
       }
       .intro-banner-vdo-play-btn .ripple{
         position:absolute;
         width:400px;
         height:400px;
         z-index: -1;
         left: 50%;
         top: 50%;
         opacity: 0;
         margin: -200px 0 0 -200px;
         border-radius: 50%;
         -webkit-animation:ripple 4s infinite;
         animation:ripple 4s infinite;
        
       }
       
       @-webkit-keyframes ripple{
         0%{
             opacity:1;
             -webkit-transform:scale(0);
             transform:scale(0)
         }
         100%{
             opacity:0;
             -webkit-transform:scale(1);
             transform:scale(1)
         }
       }
       @keyframes ripple{
         0%{
             opacity:1;
             -webkit-transform:scale(0);
             transform:scale(0)
         }
         100%{
             opacity:0;
             -webkit-transform:scale(1);
             transform:scale(1)
         }
       }
       .intro-banner-vdo-play-btn .ripple:nth-child(2){
         animation-delay:.3s;
         -webkit-animation-delay:.3s
       }
       .intro-banner-vdo-play-btn .ripple:nth-child(3){
         animation-delay:.6s;
         -webkit-animation-delay:.6s
       }


       #ca-3{ position: absolute; width: 50%;
        top: auto;
        left: 25%;}




/* mobile */

        .section2{background:#ffffff;
            flex-direction: column;
            padding: 5%;
            min-height: 10vh;
        }

        .section3{background:#ffffff;
            flex-direction: row;
            padding: 5%;
            border-top: 1px #a6a6a6 solid;
             
        }
        .section4{background:#daf2ff;
            flex-direction: row;
            padding: 5%;
            border-top: 1px #a6a6a6 solid;
             
        }
        .section5{background:#ffffff;
            flex-direction: row;
            padding: 5%;
            border-top: 1px #a6a6a6 solid;
             
        }


        .progress {
            display: flex;
            height: 1rem;
            overflow: hidden;
            line-height: 0;
            font-size: 0.75rem;
            background-color: #e9ecef;
            border-radius: 25rem;
            box-shadow: 0px 2px 10px rgba(105, 105, 105, 0.8) inset;
        }
.block-pro{
    
    padding: 5% 3%;
    border: 1px #a6a6a6 solid;
    margin: 5%;
    border-radius: 8px;
}









.icon-ca4{    position: absolute;
    max-width: 50%;
    left: 26%;
    top: 20%;}
.svg-item {
        width: 100%;
        font-size: 16px;
        margin: 0 auto;
        animation: donutfade 1s;
    }
    
    .donut-segment-2 {
        stroke: #235bad;
        animation: donut1 3s;
    }
     
    .donut-segment-3 {
        stroke: #d9e021;
        animation: donut2 3s;
    }
     
    .donut-segment-4 {
        stroke: #ed1e79;
        animation: donut3 3s;
    }
     
    .segment-1{fill:#ccc;}
    .segment-2{fill:#235bad;}
    .segment-3{fill:#d9e021;}
    .segment-4{fill:#ed1e79;}
    .donut-ring {
        stroke: #EBEBEB;
    }
    
    @keyframes donutfade {
      /* this applies to the whole svg item wrapper */
        0% {
            opacity: .2;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes donutfadelong {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
     
    @keyframes donut1 {
        0% {
            stroke-dasharray: 0, 100;
        }
        100% {
            stroke-dasharray: 30, 70;
        }
    }
     
    @keyframes donut2 {
        0% {
            stroke-dasharray: 0, 100;
        }
        100% {
            stroke-dasharray: 30, 70;
        }
    }
     
    @keyframes donut3{
        0% {
            stroke-dasharray: 0, 100;
        }
        100% {
            stroke-dasharray: 1, 99;
        }
    }


    .num-c1{font-size: 15vw; color:#2e76d0;}

    
    .num-c2{font-size: 15vw; color:#2e76d0;}

    .num-c3{font-size: 8vw; color:#2e76d0;}












 }

  

/*  Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {



    .bg-line, .settings-panel .color-tiles .tiles.primary {
        
        background: rgb(0,147,72);
        background: linear-gradient(0deg, rgba(0,147,72,1) 0%, rgba(78,228,151,1) 100%);
    }
    .progress .progress-bar {
        border-radius: 25px;
        margin: 5px;
        font-size: 1.5vw;
    }
    .progress {
        border-radius: 25px;
        height: 8px;
    }

 

    .intro-banner-vdo-play-btn,.num-dm{ font-size: 11vw; color:#46a7fa;} 
    .intro-banner-vdo-play-btn,.num-cm{ font-size: 5vw;} 

    .whiteBg {
        /* background-color: #ed184f!important;
           background-image: linear-gradient(90deg, #fd5581, #fd8b55);*/
           background: rgb(209, 235, 243);
       background: linear-gradient(90deg, rgb(255, 255, 255) 0%, #ffffff 100%);
       }
       .intro-banner-vdo-play-btn{
         height: 350px;
         width: 350px;
         position: relative;
         top: 35%;
         right: 0%;
         left:0%;
         text-align: center;
         margin: 0px 0 0 15%;
         border-radius: 50%; 
         z-index: 1;
         opacity: 0.8;
        
       }
       .intro-banner-vdo-play-btn i{
         line-height:56px;
         font-size:30px;  
       }
       .intro-banner-vdo-play-btn .ripple{
         position:absolute;
         width:400px;
         height:400px;
         z-index: -1;
         left: 50%;
         top: 50%;
         opacity: 0;
         margin: -200px 0 0 -200px;
         border-radius: 50%;
         -webkit-animation:ripple 4s infinite;
         animation:ripple 4s infinite;
        
       }
       
       @-webkit-keyframes ripple{
         0%{
             opacity:1;
             -webkit-transform:scale(0);
             transform:scale(0)
         }
         100%{
             opacity:0;
             -webkit-transform:scale(1);
             transform:scale(1)
         }
       }
       @keyframes ripple{
         0%{
             opacity:1;
             -webkit-transform:scale(0);
             transform:scale(0)
         }
         100%{
             opacity:0;
             -webkit-transform:scale(1);
             transform:scale(1)
         }
       }
       .intro-banner-vdo-play-btn .ripple:nth-child(2){
         animation-delay:.3s;
         -webkit-animation-delay:.3s
       }
       .intro-banner-vdo-play-btn .ripple:nth-child(3){
         animation-delay:.6s;
         -webkit-animation-delay:.6s
       }


       #ca-3{ position: absolute; width: 50%;
        top: auto;
        left: 25%;}




/* mobile */

        .section2{background:#ffffff;
            flex-direction: column;
            padding: 5%;
            min-height: 10vh;
        }

        .section3{background:#ffffff;
            flex-direction: row;
            padding: 5%;
            border-top: 1px #a6a6a6 solid;
             
        }
        .section4{background:#daf2ff;
            flex-direction: row;
            padding: 5%;
            border-top: 1px #a6a6a6 solid;
             
        }
        .section5{background:#ffffff;
            flex-direction: row;
            padding: 5%;
            border-top: 1px #a6a6a6 solid;
             
        }


        .progress {
            display: flex;
            height: 1rem;
            overflow: hidden;
            line-height: 0;
            font-size: 0.75rem;
            background-color: #e9ecef;
            border-radius: 25rem;
            box-shadow: 0px 2px 10px rgba(105, 105, 105, 0.8) inset;
        }
.block-pro{
    
    padding: 5% 3%;
    border: 1px #a6a6a6 solid;
    margin: 5%;
    border-radius: 8px;
}









.icon-ca4{    position: absolute;
    max-width: 50%;
    left: 26%;
    top: 20%;}
.svg-item {
        width: 100%;
        font-size: 16px;
        margin: 0 auto;
        animation: donutfade 1s;
    }
    
    .donut-segment-2 {
        stroke: #235bad;
        animation: donut1 3s;
    }
     
    .donut-segment-3 {
        stroke: #d9e021;
        animation: donut2 3s;
    }
     
    .donut-segment-4 {
        stroke: #ed1e79;
        animation: donut3 3s;
    }
     
    .segment-1{fill:#ccc;}
    .segment-2{fill:#235bad;}
    .segment-3{fill:#d9e021;}
    .segment-4{fill:#ed1e79;}
    .donut-ring {
        stroke: #EBEBEB;
    }
    
    @keyframes donutfade {
      /* this applies to the whole svg item wrapper */
        0% {
            opacity: .2;
        }
        100% {
            opacity: 1;
        }
    }
    @keyframes donutfadelong {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
     
    @keyframes donut1 {
        0% {
            stroke-dasharray: 0, 100;
        }
        100% {
            stroke-dasharray: 30, 70;
        }
    }
     
    @keyframes donut2 {
        0% {
            stroke-dasharray: 0, 100;
        }
        100% {
            stroke-dasharray: 30, 70;
        }
    }
     
    @keyframes donut3{
        0% {
            stroke-dasharray: 0, 100;
        }
        100% {
            stroke-dasharray: 1, 99;
        }
    }


    .num-c1{font-size: 15vw; color:#2e76d0;}

    
    .num-c2{font-size: 8vw; color:#2e76d0;}

    .num-c3{font-size: 8vw; color:#2e76d0;}



 

}




/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
    #ca-3{ position: absolute; width: 80%;
        left: 13%;
        top: 8%;}
 

    #num-d{ font-size: 5vw; color:#2e76d0;}
    #num-c{font-size: 5vw; color:#2e76d0;}
    .bg-line, .settings-panel .color-tiles .tiles.primary {
        
        background: rgb(0,147,72);
        background: linear-gradient(0deg, rgba(0,147,72,1) 0%, rgba(78,228,151,1) 100%);
    }
    .progress .progress-bar {
        border-radius: 25px;
        margin: 5px;
        font-size: 1.8vw;
    }
    .progress {
        border-radius: 25px;
        height: 8px; 
        box-shadow: 0px 2px 10px rgba(105, 105, 105, 0.8) inset;
    }


#ico-co2{ margin: 10%;
    background: #e0e8f0;
    border-radius: 15%; 
    -moz-box-shadow: 3px 5px 5px 1px #618498;
    -webkit-box-shadow: 3px 5px 5px 1px #618498;
    box-shadow: 3px 5px 5px 1px #618498;}



 }

















/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {


    .bg-cab2{
        background: #aae2f7 url("images/dashboard/bg-carbon2.png") ; 

    }
#ca-2{ position: absolute; width: 40%;
    padding: 5%;
    left: 5%;}

#ca-3{ position: absolute; width: 70%;
    left: 13%;
top: 30%;}
#c{font-size: 4.1vw; color:#2e76d0;}
    #num-d{ font-size: 3vw; color:#2e76d0;}
    #num-c{font-size: 5vw; color:#2e76d0;}
    .bg-line, .settings-panel .color-tiles .tiles.primary {
        
        background: rgb(0,147,72);
        background: linear-gradient(0deg, rgba(0,147,72,1) 0%, rgba(78,228,151,1) 100%);
    }
    .progress .progress-bar {
        border-radius: 25px;
        margin: 5px;
        font-size: 1.8vw;
    }
    .progress {
        border-radius: 25px;
        height: 8px; 
        box-shadow: 0px 2px 10px rgba(105, 105, 105, 0.8) inset;
    }

}
/*  Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) and (max-width: 1599.98px) {

    .bg-cab2{
        background: #aae2f7 url("images/dashboard/bg-carbon2.png") ; 

    }
#ca-2{ position: absolute; width: 40%;
    padding: 5%;
    left: 5%;}

#ca-3{ position: absolute; width: 80%;
    left: 13%;
    top: 28%;}

    #num-d{ font-size: 3vw; color:#2e76d0;}
    #num-c{font-size: 5vw; color:#2e76d0;}
    .bg-line, .settings-panel .color-tiles .tiles.primary {
        
        background: rgb(0,147,72);
        background: linear-gradient(0deg, rgba(0,147,72,1) 0%, rgba(78,228,151,1) 100%);
    }
    .progress .progress-bar {
        border-radius: 25px;
        margin: 5px;
        font-size: 1.5vw;
    }
    .progress {
        border-radius: 25px;
        height: 8px; 
        box-shadow: 0px 2px 10px rgba(105, 105, 105, 0.8) inset;
    }

  

}

@media (min-width: 1600px) and (max-width: 2660px)  {

    .bg-cab2{
        background: #aae2f7 url("images/dashboard/bg-carbon2.png") ; 

    }
#ca-2{ position: absolute; width: 40%;
    padding: 5%;
    left: 5%;}

#ca-3{ position: absolute; width: 80%;
    left: 13%;
    top: 28%;}

    #num-d{ font-size: 3.5vw; color:#2e76d0;}
    #num-c{font-size: 5vw; color:#2e76d0;}
    .bg-line, .settings-panel .color-tiles .tiles.primary {
        
        background: rgb(4, 126, 63);
        background: linear-gradient(0deg, rgb(4, 126, 63) 0%, rgba(78,228,151,1) 100%);
    }
    .progress .progress-bar {
        border-radius: 25px;
        margin: 5px;
        font-size: 1.5vw;
    }
    .progress {
        border-radius: 25px;
        height: 8px;
    }
























    
}