/* remember to use https://autoprefixer.github.io/ or something similar to add vendor prefixes for the flex rules */
#ecocalculadora {

}

#ecocalculadora h5 {
    text-align: left!important;
}

.ecocalculdoraheader {
    flex-direction: column;
    background-color: #ffffff;
    padding: 15px 30px 30px;
    align-items: normal!important;
}

.ecocalculdoraheader img {
    margin: 10px 10px 0 0!important;
}

.ecocalculadora-list {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 30px;
    display: flex;
    flex-direction: column;
}

.ecocalculadora-list ul {
    list-style-type: none;
    margin-left:0;
}

.ecocalculadora-list li {
    display:flex;
    flex-direction: column;
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 10px;
}

.ecocalculadora-list li  .eco_value {
    width: 100%;
    background-color: #98D801;
    align-items: center;
}

.ecocalculadora-list li  .eco_meta {
    background-color: #F1F1F1;
    font-size: 14px;
    display: flex;
    flex: 1;
    align-items: center;
}

@media (min-width: 490px) and (max-width: 769px) {
    .ecocalculadora-list li {
        flex-direction: row;
        height: 80px;
    }
    .ecocalculadora-list li  .eco_value {
        float: left;
        width: 135px;
    }
    .ecocalculadora-list li .eco_meta {
        margin-left: 15px;
    }
}
@media (min-width: 1200px) {
    .ecocalculadora-list li {
        flex-direction: row;
        height: 80px;
    }
    .ecocalculadora-list li  .eco_value {
        float: left;
        width: 135px;
    }
    .ecocalculadora-list li .eco_meta {
        margin-left: 15px;
    }
}

.ecocalculadora-list li .eco_image {
    float: left;
    margin: 0 15px 0 0;
}

.ecocalculadora-list li .eco_value {
    padding: 7px 7px 7px 0;
    display: flex;
    flex-direction: row;
    background-color: #98D801;
}

.eco_value .eco_image {
    margin-left: -1px;
}

.eco_value-valor {
    font-size: 25px;
    font-weight: 700;
    line-height: 1.1;
}

@media (min-width: 769px) {
    .ecocalculdoraheader {

    }
}

.eco_estalvi {
    background-color: #ffffff;
}

.eco_estalvi .wrapper {
    background-color: #97D700;
}
.eco_estalvi-header {
    padding: 10px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    width: 100%;
}

.eco_estalvi-more-info {
    position: absolute;
    bottom: -5px;
    z-index: 999;
    overflow: hidden;margin: 0 auto;  width: 100%;
    padding: 15px 10px 20px 30px;
}
.eco_estalvi-more-info-text {
    margin-top: 20px; font-size: 3vw; font-weight: 600
}
.slide {
    position: absolute;
    bottom: -5px;
    z-index: 1;
    overflow: hidden;margin: 0 auto;  width: 100%;
    padding: 15px 15px 60px 30px;
}

.eco_estalvi-result table {
    border: none;
}

.eco_estalvi-result table td {
    vertical-align: middle;
    padding: 0;
    border-bottom: none;
}
.eco_estalvi-result table td.collegeseal {
    width: 7rem;
}
.eco_estalvi-result-image {
    padding-right: 30px;
}

.eco_estalvi-result-image img {
    margin-left: 10px;
    margin-top: -40px;
    min-width: 30vw;
}

@media (min-width: 769px) {
    .eco_estalvi-result table td.collegeseal {
        width: 0;
    }
}
.eco_estalvi-result-value {
    font-size: 90px;
    font-weight: bold;
    margin-bottom: 40px;
    margin-top: 50px;
}
.eco_estalvi-result-text-arbres {
    line-height: 30px;
    font-size: 30px;
    font-weight: 300;
}
.eco_estalvi-result-value-cafe {
    font-size: 90px;
    font-weight: bold;
    margin-bottom: 40px;
    margin-top: 70px;
}
@media (min-width: 1360px) {
    .eco_estalvi-result-value-cafe {
        margin-top: 50px;
    }
}
.eco_estalvi-result-text-cafe {
    line-height: 30px;
    font-size: 30px;
    font-weight: 300;
}
@media (min-width: 340px) {
    .eco_estalvi-result-image img {
        margin-top: -40px;
    }
}
@media (min-width: 440px) {
    .eco_estalvi-result-image img {
        margin-top: -10px;
    }
}
@media (min-width: 489px) {
    .eco_estalvi-result-image img {
        min-width: 25vw;
    }
}
.eco_estalvi-result-image-cafe img {
    margin-left: 10px;
    min-width: 50vw;
}
@media (min-width: 360px) {
    .eco_estalvi-result-image-cafe img {
        min-width: 50vw;
    }
}
@media (min-width: 768px) {
    .eco_estalvi-result-image img {
        min-width: 12vw;
    }
    .eco_estalvi-result-image-cafe img {
        min-width: 22vw;
    }
    .eco_estalvi-more-info-text {
        font-size: 10px;
    }
    .eco_estalvi-more-info-text a {
        font-size: 8px;
    }
}
@media (min-width: 910px) {

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

}

@media (min-width: 1200px) {
    .eco_estalvi-result-image img {
        min-width: 12vw;
    }
}
.eco_estalvi-cost {
    background-color: white;
    margin-top: 20px;
}

.eco_estalvi-cost #totalTime {
    justify-content: space-between;
    align-items: center;
    display: flex;
    margin-top: 0!important;
}

.eco_estalvi-cost .totalTimeLabel, .eco_estalvi-cost .totalCostLabel {
    color: #333333!important;
    font-size: 18px!important;
    font-weight: 600!important;
}

.eco_estalvi .slider {
    position: relative;
    padding-bottom: 100vw;
}
@media (min-width: 390px) {
    .eco_estalvi .slider {
        padding-bottom: 85vw;
    }
}
@media (min-width: 440px) {
    .eco_estalvi .slider {
        padding-bottom: 80vw;
    }
}
@media (min-width: 520px) {
    .eco_estalvi .slider {
        padding-bottom: 65vw;
    }
}
@media (min-width: 615px) {
    .eco_estalvi .slider {
        padding-bottom: 60vw;
    }
}
@media (min-width: 768px) {
    .eco_estalvi .slider {
        padding-bottom: 50vw;
    }
}
@media (min-width: 860px) {
    .eco_estalvi .slider {
        padding-bottom: 40vw;
    }
}
@media (min-width: 981px) {
    .eco_estalvi .slider {
        padding-bottom: 35vw;
    }
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
    .eco_estalvi-more-info-text {
        font-size: 16px;
    }
    .eco_estalvi-more-info-text a {
        font-size: 14px;
    }
}
@media (min-width: 1200px) {
    .eco_estalvi .slider {
        padding-bottom: 330px;
    }
}
.eco_estalvi #nav_slide .dots {
    width: 32px;
    height: 4px;
    margin: 0 4px;
    position: relative;
    display: inline-block;
}

.eco_estalvi #nav_slide {
    position: absolute;
    bottom: -20px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 25px;
    z-index: 99;
    cursor: default;
}

.eco_estalvi #nav_slide .dots:hover {
    cursor: pointer;
    transition: .25s
}
.eco_estalvi #nav_slide .dots:active { background-color: #0A503C!important;}

.eco_estalvi .slide{
    position: absolute;
    width: 100%;
    height: 100%;
}

#slider input {
    display: none;
}

/*#i1:checked ~ #nav_slide #dot1  ,
#i2:checked ~ #nav_slide #dot2
{ background-color: #0A503C!important; }*/

/*#i1:checked ~ #slide-one  ,
#i2:checked ~ #slide-two
{z-index: 9; animation: scroll 1s ease-in-out;}*/

#nav_slide #dot1 {
    -webkit-animation: dotColor1 12s infinite;
    animation: dotColor1 12s infinite;
}
#nav_slide #dot2 {
    -webkit-animation: dotColor2 12s infinite;
    animation: dotColor2 12s infinite;
}
#slide-arbres {
    -webkit-animation: fade 12s infinite;
    animation: fade 12s infinite;
}
#slide-cafe {
    -webkit-animation: fade2 12s infinite;
    animation: fade2 12s infinite;
}
@-webkit-keyframes fade
{
    0% { opacity: 1 ; z-index: 9; }
    50% { opacity: 0; z-index: -1; }
    100% { opacity: 1; z-index: 9; }
}
@keyframes fade
{
    0% { opacity: 1 ; z-index: 9; }
    50% { opacity: 0; z-index: -1; }
    100% { opacity: 1; z-index: 9; }
}
@keyframes fade2
{
    0% { opacity: 0; z-index: -1; }
    50% { opacity: 1; z-index: 9; }
    100% { opacity: 0; z-index: -1; }
}
@-webkit-keyframes fade2
{
    0% { opacity: 0; z-index: -1; }
    50% { opacity: 1; z-index: 9; }
    100% { opacity: 0; z-index: -1; }
}
@keyframes dotColor1
{
    0% { background-color: #0A503C; }
    50% { background-color: #E0E0E0; }
    100% { background-color: #0A503C; }
}
@-webkit-keyframes dotColor1
{
    0% { background-color: #0A503C; }
    50% { background-color: #E0E0E0; }
    100% { background-color: #0A503C; }
}
@keyframes dotColor2
{
    0% { background-color: #E0E0E0; }
    50% { background-color: #0A503C; }
    100% { background-color: #E0E0E0; }
}
@-webkit-keyframes dotColor2
{
    0% { background-color: #E0E0E0; }
    50% { background-color: #0A503C }
    100% { background-color: #E0E0E0; }
}
@keyframes scroll{
    0%{	opacity:.4;}
    100%{opacity:1;}
}

@media screen and (max-width: 685px){

    label span { font-size: 50pt; }

    #nav_slide .dots{
        width: 12px;
        height: 12px;
    }
}

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-container > div.value {
    width: 60%;
}
.flex-container > div.icon {
    width: 40%;
}
.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}
.noanimation {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
}

.hidden {
    visibility: hidden;
}