*{
    font-family:'Roboto',sans-serif;
}

textarea, select, input, button{ 
    outline: none; 
}



body{
    background-color:#fafafa;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
}

.breadcrumb{
    margin-bottom:15px;
}

.breadcrumb ul{
    display:flex;
    flex-direction:row;
    padding-left:0;
}

.breadcrumb ul li{
    color:#9f9f9f;
    list-style-type:none;
}

.breadcrumb ul li:not(.active):after{
    content:" - ";
    display:inline-block;
    color:#9f9f9f;
    margin:0 5px;
}

.breadcrumb ul li a{
    text-decoration:none;
    color:#9f9f9f;
    font-weight:700;
    font-size:0.8em;
    transition:all 0.25s ease;
}

.breadcrumb ul li a:hover{
    color:#000;
}

.breadcrumb ul li.active a{
    color:#000;
}

.main-container{
    width:70%;
    display:flex;
    flex-direction:column;
}


.card{
    background-color:#fff;
    border-radius:4px;
    padding:25px;
    margin-bottom:40px;
    box-shadow:0 1px 2px rgba(0,0,0,0.02), 0 2px 4px rgba(0,0,0,0.07), 0 4px 8px rgba(0,0,0,0.02), 0 8px 16px rgba(0,0,0,0.02), 0 16px 32px rgba(0,0,0,0.02), 0 32px 64px rgba(0,0,0,0.02)
}

.card h2{
    margin-top:0;
}

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



.card-containers .left-container{
    flex-basis:65%
}

.card-containers .right-container{
    flex-basis:30%;
    color:#000;
}


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

.form-group{
    display:flex;
    flex-direction:column;
    margin-bottom:25px;
    width:100%;
}

.form-group-60{
    width:55%;
}

.form-group-20{
    width:20%;
}

label{
    color:#aaaaaa;
    margin-bottom:5px;
    font-weight:bold;
    font-size:0.8em;
}

label.radio{
    color:#000;
    font-weight:400;
    font-size:1em;
}

hr.separacion{
    margin:20px 0;
    border-top:1px solid #dedede;
    border-bottom:0;
}

input{
    color:#757575;
    border:2px solid #dedede;
    border-radius:5px;
    padding:8px 0 8px 10px;
    font-weight:600;
}

input:focus{
    border:2px solid #757575;
}

.buttons{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
}

.buttons a{
    text-decoration:none;
    color:#5f86ed;
    font-weight:500;
    transition:all 0.25s ease;
}

.buttons button{
    background-color:#5f86ed;
    border-radius:5px;
    color:#fff;
    padding:10px 20px;
    border:0;
    cursor:pointer;
    transition:all 0.25s ease;
}

.buttons button:hover{
    background-color:#436bd4;
}

.buttons a:hover{
    color:#436bd4;
}

.cart-row{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
}

.cart-row p{
    margin:10px 0;
}

.thumbnail-container{
    position:relative;
}

.product-thumbnail{
    width:50px;
    padding:10px;
    border:1px solid #ccc;
    border-radius:4px;
}

.quantity{
    position:absolute;
    width:12px;
    height:12px;
    right:-10px;
    top:-10px;
    background-color:#5f86ed;
    display:block;
    color:#fff;
    padding:5px;
    border-radius:100%;
    font-size:0.7em;
    text-align:center;
}

.price{
    font-weight:bold;
}

.cart-row.final .price{
    font-size:1.3em;
}

@media screen and (max-width:1280px){
    .main-container{
        width:90%;
    }

}


@media screen and (max-width:996px){
    .main-container{
        width:90%;
    }

    .card-containers{
        flex-direction:column;
    }

    .left-container{
        order:2;
    }

    .right-container{
        order:1;
    }
}