/** Shopify CDN: Minification failed

Line 53:9 Expected ":"
Line 87:14 Expected ":"

**/
:root{
    --margin_value: 10vh;
}


#values_title{
    width: 80%;
    margin: auto;
    text-align: center;
}

#values-tree{
    background-image: url("/cdn/shop/files/VALORES_ALPHA_SVG_2.svg?v=1772131930");
    background-size: 121%;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 12% 0 0;
    height: 1300px;
}

#first-values-row{
    width: 45%;
    margin-top: 8%;
}
#second-values-row{
    width: 75%;
    margin-top: 2%;
}

#middle-tree{
    width: 20%;
    text-align: center;
    margin: auto;
    margin-top: 10%;
}
#middle-tree span{
    color: white;
    font-size: .8em;
    line-height: 1em;
    -webkit-text-stroke: 3px #473113;
    paint-order: stroke fill;
}

#tree-roots{
    margin-top: 10%;
    display: grid;
    width 100%; 
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 50px);
    grid-gap: 20px 0px;
}
#root-1{
    grid-area: 1/1;
    width: 100%;
}
#root-2{
    grid-area: 2/1;
    width: 90%;
}
#root-3{
    grid-area: 3/1;
    width: 78%;
}
#root-4{
    grid-area: 4/1;
    width: 65%;
}
#root-5{
    grid-area: 5/1;
    width: 40%;
}

#values-resume{
    font-size: .7em;
    text-align: center;
}



.value-container{
    max-height 150px;
    height: auto;
    border-radius: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: auto;
    margin-top: 30px;
}

.apple-value{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 120px;
    width: 120px;
    background-color: orange;
    border-radius: 100%;
    text-align: center;
    /*word-break: break-all;*/
    overflow-wrap: break-word;

    font-size: .6em;
    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: italic;
    -webkit-text-stroke: 2px orange;
    paint-order: stroke fill;
    line-height: 1em;
}

.root-class{
    margin-left: auto;
    margin-right: auto;
    color: black;

    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.left-column-value{
    display: flex;
    justify-content: left;
    align-items: center;
}
.right-column-value{
    display: flex;
    justify-content: right;
    align-items: center;
}

.value-box{
    display: flex;
    align-items: center;
    font-size: .6em;
    padding: 0 10px;

    font-family: "DM Serif Text", serif;
    font-weight: 400;
    font-style: italic;

    color: white; 
    width: fit-content;
    border-radius: 12px;
    
}
.red-box{
    background-color: #ff585b;
}
.blue-box{
    background-color: #01c3cb;
}

.mini-title{
    color: #ffffff;
    font-size: 1em;
}

.bigger-heading-5 {
  font-size: 2.5em;
  font-weight: 800;
  margin: 0;
  line-height: 80px;
  letter-spacing: -6px;
  color: #b7cdd8;
  font-family: "Montserrat", sans-serif;
}

@media(max-width: 1350px){
    #first-values-row{
        margin-top: 6%;
    }
}

@media(max-width: 1300px){
    #values-tree{
        padding: 12% 0 6%;
        height: auto;
    }
    #first-values-row{
        margin-top: calc(10% - 7vh);
    }
}

@media(max-width: 1200px){
    #tree-roots{
        margin-top: 7%;
    }
}

@media (max-width: 1100px) {
    .bigger-heading-5 {
        font-size: 12vw;
        line-height: 12vw;
    }
    .apple-value{
        height: 4em;
        width: 4em;
    }
    .value-box{
        line-height: 1.5em;
    }
}

@media(max-width: 1000px){
    #tree-roots{
        margin-top: 5%;
        grid-gap: 0px 0px;
    }
}

@media(max-width: 950px){
    #tree-roots{
        grid-template-rows: repeat(5, 42px);
        margin-top: 4%;
    }
}

@media(max-width: 900px){
    #tree-roots{
        margin-top: 2%;
    }
}

@media(max-width: 850px){
    #tree-roots{
        margin-top: 0%;
    }
}

@media(max-width: 800px){
    #tree-roots{
        margin-top: -2%;
    }
}

@media(max-width: 700px){
    #middle-tree{
        width: 30%;
    }
}

@media (max-width: 600px){
    #values1{
        width: 100%;
    }

    .value-container{
        height: 50px;
        width: 50px;
        font-size: 6vw !important;
    }

    .apple-value{
        height: 3em;
        width: 3em;
        font-size: .5em;
    }

    #first-values-row {
        margin-top: calc(17% - 7vh);
    }

    #middle-tree{
        width: 30%;
    }
    #middle-tree span{
        font-size: .5em;
    }

    #tree-roots {
        grid-template-rows: repeat(5, 28px);
    }
}

@media(max-width: 450px){
    .left-column-value{
        justify-content: right
    }
    .right-column-value{
        justify-content: left;
    }

    .value-box{
        width: 100%;
    }
    #middle-tree {
        display: flex;
        margin-bottom: 20px;
    }
    #middle-tree span{
        width: 100%;
    }

    .root-class{
        column-gap: 20px;
    }

    .apple-value span{
        color: #005AFF;
        -webkit-text-stroke: 2px #ffffff;
    }
}

@media(max-width: 400px){
    #root-5{
        width: 50%;
    }
}