.breadcrumb {
    background-color: #6782BB;
    padding: 10px 0;
    border-radius: 0;
    margin-bottom: 0;
}

.breadcrumb .control-flex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.breadcrumb .left {
    width: 30%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.breadcrumb .right {
    width: 70%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.separador-titulo {
    padding-left: 15px;
    width: 100%;
    float: left;
}

.separador-titulo:before {
    font-family: FontAwesome;
    content: "\f0c8";
    color: #C01D19;
    font-size: 10px;
    position: absolute;
    top: 10px;
    left: 0;
}

.separador-titulo h2 {
    font-family: BebasNeueRegular;
    font-size: 30px;
    color: #27241F;
}

.separador-titulo h2 span {
    color: #6782BB;
}

.whithe-back {
    background-color: #FFFFFF;
    padding: 0;
    width: 100%;
    float: left;
    border-top: 1px solid #868587;
    border-bottom: 1px solid #868587;
}

.select {
    width: 100%;
}

.select::after {
    content: "\f107";
    font-family: FontAwesome;
    color: #E9B280;
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 1;
    text-align: center;
    pointer-events: none;
    font-size: 22px;
    color: #CC565E;
    transition: color 0.5s ease;
}

.select select {
    float: left;
    width: 100%;
    display: block;
    border: 1px solid #868587;
    font-family: RobotoRegular;
    font-size: 16px;
    color: #CC565E;
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0 35px 0 10px;
    height: 45px;
    line-height: 45px;
}

.carrinho {
    padding: 30px 0;
    float: left;
    width: 100%;
}

.carrinho::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/frontend/img/background-padrao.png);
    background-color: #DCDDDE;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: 0;
}

.carrinho-lista-artigos .linha-titulos {
    float: left;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #868587;
}

.carrinho-lista-artigos .linha-titulos .title {
    font-family: RobotoMedium;
    font-size: 16px;
    color: #27241F;
    text-transform: uppercase;
}

.carrinho-lista-artigos .listagem .item {
    float: left;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #868587;
}

.carrinho-lista-artigos .listagem .item:last-child {
    border-bottom: none;
}

.carrinho-lista-artigos .listagem .item .coluna {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
}

.carrinho-lista-artigos .listagem .item .img-artigo {
    float: left;
    width: 100px;
    padding-right: 10px;
}

.carrinho-lista-artigos .listagem .item .nome-artigo {
    float: left;
    width: calc(100% - 100px);
    padding: 0 15px;
}

.carrinho-lista-artigos .listagem .item .quantidade {
    float: left;
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid #868587;
    padding: 0 10px;
    height: 45px;
}

.carrinho-lista-artigos .listagem .item .quantidade input {
    border: none;
    font-family: RobotoRegular;
    font-size: 16px;
    color: #CC565E;
    width: calc(100% - 30px);
    line-height: 43px;
}

.carrinho-lista-artigos .listagem .item .quantidade .controllers {
    position: absolute;
    right: 10px;
    top: -2px;
    line-height: inherit;
}

.carrinho-lista-artigos .listagem .item .quantidade .controllers i {
    font-size: 22px;
    color: #CC565E;
    transition: color 0.5s ease;
    z-index: 1;
    cursor: pointer;
}

.carrinho-lista-artigos .listagem .item .quantidade .controllers i:hover {
    color: #C01D19;
}

.carrinho-lista-artigos .listagem .item .valor {
    font-family: RobotoRegular;
    color: #5B5C5B;
    font-size: 16px;
}

.carrinho-lista-artigos .listagem .item .remove-artigo i {
    font-size: 22px;
    color: #CC565E;
    transition: background-color 0.5s ease;
}

.carrinho-lista-artigos .listagem .item .remove-artigo:hover i {
    color: #C01D19;
}

.carrinho-lista-artigos .listagem .total-artigos {
    padding: 20px 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.envio-pagamento {
    padding: 30px 0;
    float: left;
    width: 100%;
}

.envio-pagamento .envio {
    border-bottom: 1px solid #868587;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.envio-pagamento .envio .title-zona {
    width: 105px;
    float: left;
    font-family: RobotoRegular;
    color: #6782BB;
    font-size: 16px;
}

.envio-pagamento .envio .select-zona {
    width: calc(100% - 105px);
    float: left;
}

.envio-pagamento .envio .title-entrega {
    width: 140px;
    float: left;
    font-family: RobotoRegular;
    color: #6782BB;
    font-size: 16px;
}

.envio-pagamento .envio .select-entrega {
    width: calc(100% - 140px);
    float: left;
}

.envio-pagamento .envio .coluna, .envio-pagamento .pagamento .coluna {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
}

.envio-pagamento .pagamento .title-pagamento {
    width: 190px;
    float: left;
    font-family: RobotoRegular;
    color: #6782BB;
    font-size: 16px;
}

.envio-pagamento .pagamento .select-pagamento {
    width: calc(100% - 190px);
    float: left;
}

.resumo .linha-titulos {
    padding: 20px 0;
    float: left;
    width: 100%;
    border-bottom: 1px solid #868587;
}

.resumo .linha-totais {
    padding: 20px 0;
    float: left;
    width: 100%;
}

.finalizar-buttons {
    padding: 30px 0 0 0;
}

.finalizar-buttons .btn-back {
    padding: 20px 30px;
    background-color: #6782BB;
    color: #ffffff;
    width: 100%;
    display: block;
    transition: background-color 0.5s ease;
}

.finalizar-buttons .btn-back:hover {
    background-color: #536B9D;
}

.finalizar-buttons .btn-finalizar {
    border: 1px solid #CC565E;
    padding: 20px 30px;
    background-color: #CC565E;
    color: #ffffff;
    width: 100%;
    display: block;
    transition: background-color 0.5s ease;
}

.finalizar-buttons .btn-finalizar:hover {
    background-color: #C01D19;
    border: 1px solid #C01D19;
}

.dados-entrega-facturacao {
    padding: 25px 0 10px 0;
    width: 100%;
    float: left;
}

.dados-entrega-facturacao label {
    font-family: RobotoRegular;
    color: #6782BB;
    font-size: 16px;
    width: 130px;
    float: left;
    line-height: 45px;
}

.dados-entrega-facturacao input {
    border: 1px solid #868587;
    font-family: RobotoRegular;
    font-size: 16px;
    color: #CC565E;
    width: calc(100% - 130px);
    line-height: 43px;
    padding: 0 10px;
}

.dados-entrega-facturacao .select {
    width: calc(100% - 130px);
    float: left;
}

.dados-entrega-facturacao .coluna {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
}


.titleMobile {
    display: none;
}
.resumoTitleMobile {
    display: none;
}


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

    .breadcrumb {
        padding: 15px;
    }
    .breadcrumb .left {
        display: none;
    }
    .breadcrumb .right {
        width: 100%;
    }
    .breadcrumb .right {
        width: 100%;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .separador-titulo {
        padding-left: 30px;
    }
    .separador-titulo::before {
        left: 15px;
    }

    .carrinho-lista-artigos .linha-titulos {
        display: none;
    }

    .whithe-back {
        background-color: #FFFFFF;
        padding: 0 15px;
    }

    .listagem {
        margin-top: 30px;
    }

    .titleMobile {
        display: block;
        font-family: RobotoMedium;
        font-size: 16px;
        color: #27241F;
        text-transform: uppercase;
        float: left;
    }
    .carrinho-lista-artigos .listagem .item {
        padding: 15px;
        border: 1px solid #868587;
        margin-bottom: 20px;
    }
    .carrinho-lista-artigos .listagem .item .nome-artigo {
        padding: 0 0 0 15px;
    }
    .carrinho-lista-artigos .listagem .item .flex {
        display: initial;
    }

    .carrinho-lista-artigos .listagem .item .contend {
        float: left;
    }
    /*.carrinho-lista-artigos .listagem .item .col-5,*/
    .carrinho-lista-artigos .listagem .item .col-10,
    .carrinho-lista-artigos .listagem .item .col-15,
    .carrinho-lista-artigos .listagem .item .col-20,
    .carrinho-lista-artigos .listagem .item .col-40 {
        width: 100%;
    }
    .carrinho-lista-artigos .listagem .item .col-5 {
        width: initial;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 2;
    }
    .carrinho-lista-artigos .listagem .item .col-40 {
        margin-bottom: 10px;
    }
    .carrinho-lista-artigos .listagem .item .col-10,
    .carrinho-lista-artigos .listagem .item .col-15,
    .carrinho-lista-artigos .listagem .item .col-20 {
        padding: 5px 0;
        text-align: left;
        justify-content: initial;
        flex-wrap: initial;
    }
    .carrinho-lista-artigos .listagem .item .col-10 .titleMobile,
    .carrinho-lista-artigos .listagem .item .col-10 .valor,
    .carrinho-lista-artigos .listagem .item .col-15 .titleMobile,
    .carrinho-lista-artigos .listagem .item .col-15 .valor,
    .carrinho-lista-artigos .listagem .item .col-20 .titleMobile,
    .carrinho-lista-artigos .listagem .item .col-20 .valor {
        width: 50%;
    }
    .carrinho-lista-artigos .listagem .item .col-10 .valor,
    .carrinho-lista-artigos .listagem .item .col-15 .valor,
    .carrinho-lista-artigos .listagem .item .col-20 .valor {
        text-align: right;
    }
    .listagem .item .coluna:nth-child(5) {
        height: 55px;
    }
    .carrinho-lista-artigos .listagem .item .quantidade {
        width: 120px;
        float: right;
        position: absolute;
        right: 0;
        top: 5px;
    }
    .carrinho-lista-artigos .listagem .total-artigos {
        padding: 0 0 20px 0;
    }

    .envio {
        float: left;
        width: 100%;
    }
    .envio .coluna {
        width: 100%;
    }
    .envio .contend {
        display: initial;
    }
    .envio .col-20 {
        margin-bottom: 15px;
    }
    .envio .col-35 {
        padding: 0;
        margin-bottom: 15px;
    }
    .envio .col-35 .title-zona, .envio .col-35 .title-entrega {
        width: 30%;
    }
    .envio .col-35 .select {
        width: 70%;
    }

    .pagamento {
        float: left;
        width: 100%;
    }
    .pagamento .coluna {
        width: 100%;
    }
    .pagamento .contend {
        display: initial;
    }
    .pagamento .col-30 {
        margin-bottom: 15px;
    }
    .pagamento .col-60 {
        padding: 0;
        margin-bottom: 15px;
    }
    .pagamento .col-60 .title-pagamento {
        width: 30%;
    }
    .pagamento .col-60 .select {
        width: 70%;
    }

    .resumo .linha-titulos {
        display: none;
    }
    .resumoTitleMobile {
        display: block;
        font-family: RobotoMedium;
        text-transform: uppercase;
        font-size: 16px;
    }
    .resumo .col-20 {
        width: 100%;
        margin-bottom: 10px;
    }
    .resumo .col-20:first-child {
        width: 100%;
        margin-bottom: 0;
        height: 15px;
    }
    .resumo .col-20 div:nth-child(1) {
        width: 50%;
        float: left;
        text-align: left;
    }
    .resumo .col-20 div:nth-child(2) {
        width: 50%;
        float: left;
        text-align: right;
    }

    .dados-entrega-facturacao .col-48 {
        width: 100%;
    }

    .finalizar-buttons {
        padding: 30px 15px 0 15px;
    }
    .finalizar-buttons .col-25 {
        width: 45%;
    }

}

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

    .breadcrumb {
        padding: 15px;
    }
    .breadcrumb .left {
        display: none;
    }
    .breadcrumb .right {
        width: 100%;
    }
    .breadcrumb .right {
        width: 100%;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .separador-titulo {
        padding-left: 30px;
    }
    .separador-titulo::before {
        left: 15px;
    }

    .carrinho-lista-artigos .linha-titulos {
        display: none;
    }

    .whithe-back {
        background-color: #FFFFFF;
        padding: 0 15px;
    }

    .listagem {
        margin-top: 30px;
    }



    .titleMobile {
        display: block;
        font-family: RobotoMedium;
        font-size: 16px;
        color: #27241F;
        text-transform: uppercase;
        float: left;
    }
    .carrinho-lista-artigos .listagem .item {
        padding: 15px;
        border: 1px solid #868587;
        margin-bottom: 20px;
    }
    .carrinho-lista-artigos .listagem .item .nome-artigo {
        padding: 0 0 0 15px;
    }
    .carrinho-lista-artigos .listagem .item .flex {
        display: initial;
    }
    .carrinho-lista-artigos .listagem .item .contend {
        float: left;
    }
    /*.carrinho-lista-artigos .listagem .item .col-5,*/
    .carrinho-lista-artigos .listagem .item .col-10,
    .carrinho-lista-artigos .listagem .item .col-15,
    .carrinho-lista-artigos .listagem .item .col-20,
    .carrinho-lista-artigos .listagem .item .col-40 {
        width: 100%;
    }
    .carrinho-lista-artigos .listagem .item .col-5 {
        width: initial;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 2;
    }
    .carrinho-lista-artigos .listagem .item .col-40 {
        margin-bottom: 10px;
    }
    .carrinho-lista-artigos .listagem .item .col-10,
    .carrinho-lista-artigos .listagem .item .col-15,
    .carrinho-lista-artigos .listagem .item .col-20 {
        padding: 5px 0;
        text-align: left;
        justify-content: initial;
        flex-wrap: initial;
    }
    .carrinho-lista-artigos .listagem .item .col-10 .titleMobile,
    .carrinho-lista-artigos .listagem .item .col-10 .valor,
    .carrinho-lista-artigos .listagem .item .col-15 .titleMobile,
    .carrinho-lista-artigos .listagem .item .col-15 .valor,
    .carrinho-lista-artigos .listagem .item .col-20 .titleMobile,
    .carrinho-lista-artigos .listagem .item .col-20 .valor {
        width: 50%;
    }
    .carrinho-lista-artigos .listagem .item .col-10 .valor,
    .carrinho-lista-artigos .listagem .item .col-15 .valor,
    .carrinho-lista-artigos .listagem .item .col-20 .valor {
        text-align: right;
    }
    .listagem .item .coluna:nth-child(5) {
        height: 55px;
    }
    .carrinho-lista-artigos .listagem .item .quantidade {
        width: 120px;
        float: right;
        position: absolute;
        right: 0;
        top: 5px;
    }
    .carrinho-lista-artigos .listagem .total-artigos {
        padding: 0 0 20px 0;
    }

    .envio {
        float: left;
        width: 100%;
    }
    .envio .coluna {
        width: 100%;
    }
    .envio .contend {
        display: initial;
    }
    .envio .col-20 {
        margin-bottom: 15px;
    }
    .envio .col-35 {
        padding: 0;
        margin-bottom: 15px;
    }
    .envio .col-35 .title-zona, .envio .col-35 .title-entrega {
        width: 30%;
    }
    .envio .col-35 .select {
        width: 70%;
    }

    .pagamento {
        float: left;
        width: 100%;
    }
    .pagamento .coluna {
        width: 100%;
    }
    .pagamento .contend {
        display: initial;
    }
    .pagamento .col-30 {
        margin-bottom: 15px;
    }
    .pagamento .col-60 {
        padding: 0;
        margin-bottom: 15px;
    }
    .pagamento .col-60 .title-pagamento {
        width: 30%;
    }
    .pagamento .col-60 .select {
        width: 70%;
    }

    .resumo .linha-titulos {
        display: none;
    }
    .resumoTitleMobile {
        display: block;
        font-family: RobotoMedium;
        text-transform: uppercase;
        font-size: 16px;
    }
    .resumo .col-20 {
        width: 100%;
        margin-bottom: 10px;
    }
    .resumo .col-20:first-child {
        width: 100%;
        margin-bottom: 0;
        height: 15px;
    }
    .resumo .col-20 div:nth-child(1) {
        width: 50%;
        float: left;
        text-align: left;
    }
    .resumo .col-20 div:nth-child(2) {
        width: 50%;
        float: left;
        text-align: right;
    }

    .dados-entrega-facturacao .col-48 {
        width: 100%;
    }

    .finalizar-buttons {
        padding: 30px 15px 0 15px;
    }
    .finalizar-buttons .col-25 {
        width: 45%;
    }

}

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

    .breadcrumb {
        padding: 15px;
    }
    .breadcrumb .left {
        display: none;
    }
    .breadcrumb .right {
        width: 100%;
    }
    .breadcrumb .right {
        width: 100%;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .separador-titulo {
        padding-left: 30px;
    }
    .separador-titulo::before {
        left: 15px;
    }

    .carrinho-lista-artigos .linha-titulos {
        display: none;
    }

    .whithe-back {
        background-color: #FFFFFF;
        padding: 0 15px;
    }

    .listagem {
        margin-top: 30px;
    }



    .titleMobile {
        display: block;
        font-family: RobotoMedium;
        font-size: 16px;
        color: #27241F;
        text-transform: uppercase;
        float: left;
    }
    .carrinho-lista-artigos .listagem .item {
        padding: 15px;
        border: 1px solid #868587;
        margin-bottom: 20px;
    }
    .carrinho-lista-artigos .listagem .item .nome-artigo {
        padding: 0 0 0 15px;
    }
    .carrinho-lista-artigos .listagem .item .flex {
        display: initial;
    }
    .carrinho-lista-artigos .listagem .item .contend {
        float: left;
    }
    /*.carrinho-lista-artigos .listagem .item .col-5,*/
    .carrinho-lista-artigos .listagem .item .col-10,
    .carrinho-lista-artigos .listagem .item .col-15,
    .carrinho-lista-artigos .listagem .item .col-20,
    .carrinho-lista-artigos .listagem .item .col-40 {
        width: 100%;
    }
    .carrinho-lista-artigos .listagem .item .col-5 {
        width: initial;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 2;
    }
    .carrinho-lista-artigos .listagem .item .col-40 {
        margin-bottom: 10px;
    }
    .carrinho-lista-artigos .listagem .item .col-10,
    .carrinho-lista-artigos .listagem .item .col-15,
    .carrinho-lista-artigos .listagem .item .col-20 {
        padding: 5px 0;
        text-align: left;
        justify-content: initial;
        flex-wrap: initial;
    }
    .carrinho-lista-artigos .listagem .item .col-10 .titleMobile,
    .carrinho-lista-artigos .listagem .item .col-10 .valor,
    .carrinho-lista-artigos .listagem .item .col-15 .titleMobile,
    .carrinho-lista-artigos .listagem .item .col-15 .valor,
    .carrinho-lista-artigos .listagem .item .col-20 .titleMobile,
    .carrinho-lista-artigos .listagem .item .col-20 .valor {
        width: 50%;
    }
    .carrinho-lista-artigos .listagem .item .col-10 .valor,
    .carrinho-lista-artigos .listagem .item .col-15 .valor,
    .carrinho-lista-artigos .listagem .item .col-20 .valor {
        text-align: right;
    }
    .listagem .item .coluna:nth-child(5) {
        height: 55px;
    }
    .carrinho-lista-artigos .listagem .item .quantidade {
        width: 120px;
        float: right;
        position: absolute;
        right: 0;
        top: 5px;
    }
    .carrinho-lista-artigos .listagem .total-artigos {
        padding: 0 0 20px 0;
    }

    .envio {
        float: left;
        width: 100%;
    }
    .envio .coluna {
        width: 100%;
    }
    .envio .contend {
        display: initial;
    }
    .envio .col-20 {
        margin-bottom: 15px;
    }
    .envio .col-35 {
        padding: 0;
        margin-bottom: 15px;
    }
    .envio .col-35 .title-zona, .envio .col-35 .title-entrega {
        width: 100%;
    }
    .envio .col-35 .select {
        width: 100%;
    }

    .pagamento {
        float: left;
        width: 100%;
    }
    .pagamento .coluna {
        width: 100%;
    }
    .pagamento .contend {
        display: initial;
    }
    .pagamento .col-30 {
        margin-bottom: 15px;
    }
    .pagamento .col-60 {
        padding: 0;
        margin-bottom: 15px;
    }
    .pagamento .col-60 .title-pagamento {
        width: 100%;
    }
    .pagamento .col-60 .select {
        width: 100%;
    }

    .resumo .linha-titulos {
        display: none;
    }
    .resumoTitleMobile {
        display: block;
        font-family: RobotoMedium;
        text-transform: uppercase;
        font-size: 16px;
    }
    .resumo .col-20 {
        width: 100%;
        margin-bottom: 10px;

        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
    }
    .resumo .col-20:first-child {
        width: 100%;
        margin-bottom: 0;
        height: 15px;
    }
    .resumo .col-20 div:nth-child(1) {
        width: 50%;
        float: left;
        text-align: left;
    }
    .resumo .col-20 div:nth-child(2) {
        width: 50%;
        float: left;
        text-align: right;
    }

    .dados-entrega-facturacao .col-48 {
        width: 100%;
    }
    .dados-entrega-facturacao label {
        width: 100%;
        line-height: initial;
    }
    .dados-entrega-facturacao input {
        width: 100%;
    }
    .dados-entrega-facturacao .select {
        width: 100%;
    }

    .finalizar-buttons {
        padding: 30px 15px 0 15px;
    }
    .finalizar-buttons .col-25 {
        width: 100%;
    }

    .finalizar-buttons .col-25:nth-child(1) {
        margin-bottom: 15px;
    }


}