main {
    background-color: #EFEFEF;
    padding-top: 50px;
}

main div.container{
    display: flex;  
    align-items: baseline;
    padding-bottom: 100px;
}

main div.container div.products{
    flex: 0 0 75%;
    max-width: 75%;
    display: inline-flex;
    flex-direction: column;
    padding-right: 30px;
}
main div.container div.order{
    flex: 0 0 25%;
    max-width: 25%;
    display: inline-flex;
    position: sticky;
    top: 100px;
}

.product-box{
    width: 100%;
    background-color: #fff;
    margin-bottom: 30px;
    padding: 30px 30px 0 30px;
    box-shadow: 0 0 6px rgb(0 0 0 / 10%);
    border-radius: 8px;
}
.product-box h2{
    color: #7354ef;
    font-size: 1.3em;
    margin-bottom: 10px;
    font-weight: 400;
    -webkit-text-shadow: 1px 1px 1px rgb(0 0 0 / 25%);
    -moz-text-shadow: 1px 1px 1px rgb(0 0 0 / 25%);
    text-shadow: 1px 1px 1px rgb(0 0 0 / 25%);
}
.product-box p{
    color: #7d7d7d;
    font-size: 0.9em;
    font-weight: 400;
}

.product-box ul.choose{
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: space-around;
}

.product-box ul.choose>li{
    border-radius: 6px;
    border: 1px solid #ececec;
    background-color: #ffffff;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,250,250,1) 100%);
    color: #909090;
    padding: 25px 25px;
    min-width: 250px;
    margin-bottom: 30px;
    cursor: pointer;
    flex: 0 0 48%;
    transition: all 0.25s ease-out;
    transition: visibility 0s, opacity 0.5s linear;
    position: relative;
}

.product-box ul.choose>li h3{
    font-size: 1em;
    color: #676767;
}
.product-box ul.choose>li.ativo h3{
    color: #7354ef;
    font-weight: 700;
}

.product-box ul.choose>li.big{
    text-align: center;
}
.product-box ul.choose>li.ativo{
    border: 1px solid #b7a5ff;
    background-color: #f4f2ff;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 8%);
}

.product-box ul.choose>li i{
    font-size: 1.2em;
    vertical-align: bottom;
}

.product-box ul.choose>li a{
    font-size: 1em;
    position: absolute;
    background-color: #ffffff;
    padding: 5px 8px;
    border-radius: 15px;
    top: -7px;
    right: -7px;
    border: 1px solid #b7a5ff;
    color: #7354ef;
    display: none;
}

.product-box ul.choose>li.ativo a{
    display: unset;
}

.product-box ul.choose>li ul.detail{
    display: inline-block;
    margin-top: 30px;
}
.product-box ul.choose>li ul.detail>li{
    text-align: left;
    font-size: 1em;
    margin-bottom: 10px;
    font-weight: 300;
    color: #8c8c8c;
}
.product-box ul.choose>li ul.detail>li i{
    color: #d8d8d8;
    font-size: 0.7em;
    vertical-align: middle;
    margin: 0 3px 3px 0;
}
.product-box ul.choose>li ul.detail>li b{
    font-weight: 700;
}
.product-box ul.choose>li ul.detail>li.preco{
    color: #656565;
    font-size: 0.8em;
    margin-top: 25px;
    font-weight: 700;
    text-align: center;
}
.product-box ul.choose>li ul.detail>li.percore{
    font-size: 0.8em;
    color: #0175ff;
    margin: 0;
    text-align: right;
    font-weight: 500;
}
.product-box ul.choose>li.ativo ul.detail>li{
    color: #7354f0;
}
.product-box ul.choose>li.ativo ul.detail>li i{
    color: #00f300;
}
.product-box ul.choose>li.ativo ul.detail>li.preco{
    color: #424242;
}

.order h2{
    text-align: center;
}
.order li.detalhe, .order li#plano{
    color: #424242;
    font-size: 0.9em;
}
.order li.detalhe::before, .order li#plano::before{
    content: "-";
    margin-right: 3px;
}
.order ul.detalhes>li{
    margin-top: 6px;
}
.order ul.pedido>li:last-child{
    text-align: center;
    margin-bottom: 30px;
}
.order ul.pedido>li.preco{
    text-align: right;
}
.order ul.pedido>li.preco>span.preco-val{
    font-size: 2em;
}

.order .btnContratar>a.disabled{
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    background: #dcdcdc;
    color: #ececec;
    text-shadow: -1px -1px 0px rgb(0 0 0 / 40%);
    -webkit-text-shadow: -1px -1px 0px rgb(0 0 0 / 40%);
    -moz-text-shadow: -1px -1px 0px rgb(0 0 0 / 40%);
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

.order .pedido .desconto{
    text-align: right;
    font-size: 1em;
    margin-bottom: 10px;
}
.order .pedido .desconto>b{
    font-size: 1.2em;
    font-weight: 700;
}

div.remove{
    text-align: center;
}
div.remove h2, div.remove p{
    text-align: left;
}
div.remove ul.choose>li ul.detail{
    margin-top: 0;
}


@media only screen and (max-width: 950px) {
    #top-img{
        top: 220px;
        top: calc(340px - 20vw);
    }
    #top-img img{
        min-width: 120px;
        width: 40vw;
        height: auto;
    }
    header #top .container {
        margin-top: 135px;
    }
    header #top h1{
        margin-left: 6vw;
    }
    header #top p.text{
        margin-left: 6vw;
    }
    header #top a.btn-m {
        margin-left: 6vw;
    }

    main div.container {
        justify-content: center;
        align-items: stretch;
        flex-flow: row wrap;
    }

    main div.container div.products {
        flex: 0 0 100%;
        max-width: unset;
        padding-right: unset;
    }

    main div.container div.order {
        flex: 0 0 100%;
        max-width: unset;
        position: unset;
        top: auto;
    }
    main div.container div.order .product-box {
        text-align: center;
    }
    main div.container div.order ul.pedido {
        display: inline-block;
        text-align: left;
    }

    .product-box ul.choose>li{
        flex: 0 0 30%;
    }


}


@media only screen and (max-width: 600px) {
    header #top-img{
        display: none;
    }
    header #top .container{
        margin-top: 170px;
        text-align: center;
    }
    header #top h1{
        margin-left: 0;
    }
    header #top p.text{
        margin: 30px 0;
        width: 100%;
    }
    header #top a.btn-m {
        margin:0;
    }



}


/* .order{
    background-color: darkorange;
}
.order>.product-box{
    background-color: green;
}
.order>.product-box>ul{
    background-color: rgb(4, 138, 248);
} */