* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: 'Oswald', sans-serif;
    background-color: #dce2e6;
    position: relative;
    height: 100%;
    color: #000000;
}

img {
    /* max-width: 100%; */
    height: auto;
}

.card {
    position: absolute;
    left: 50%;
    /* top: 50%;
    transform: translate(-50%, -50%); */

    top: 100px;
    transform: translate(-50%, 0%);

    width: 980px;
    /* height: 616px; */
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 55px 0px rgba(181, 196, 206, 1);

    padding-top: 44px;
    padding-right: 50px;
    padding-bottom: 50px;
    padding-left: 60px;
}

.card-img-wrapper {
    /* position: absolute; */
    /* top: 0; */
    /* bottom: 0; */
    /* left: 60; */
    /* width: 367px; */
    /* height: 100%; */
}

.card-img {
    position: absolute;
    top: 50%;
    left: -192px;
    transform: translate(0, -50%);
    max-width: initial;
}

.card-content-wrapper {
    width: 441px;
    float: right;
}

.card-title {
    margin-bottom: 26px;
    font-weight: 500;
    font-size: 38px;
    line-height: 1;
    text-transform: uppercase;
}

.card-details-wrapper {
    margin-bottom: 31px;
}

.card-label {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    text-transform: uppercase;
    color: #bfc5c8;
}

.card-price {
    font-weight: 600;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
}

.card-colors-wrapper {
    margin-top: 14px;
}

.card-colors-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.card-color {
    float: left;
    margin-right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: black;
}

.card-color-yellow {
    background-color: #f5cb2e;
    background: linear-gradient( 135deg, rgb(254,246,118) 0%, rgb(237,182,29) 100%);
}
  
.card-color-red {
    background-color: #d70909;
    background: linear-gradient( 135deg, rgb(239,31,31) 0%, rgb(191,12,12) 100%);
}

.card-color-gray {
    background-color: #909090;
    background: linear-gradient( 135deg, rgb(165,165,165) 0%, rgb(115,115,115) 100%);
}

.card-color-active {
    border: 4px solid #393939;
}

.card-text {
    margin-top: 34px;
    margin-bottom: 39px;
    color: #6c757f;
    font-size: 16px;
    font-weight: 300;
}

.card-text p {
    margin-bottom: 18px;
    line-height: 1.27;
}

.card-buttons-wrapper {

}

.card-buttons-wrapper::after {
    content: "";
    display: table;
    clear: both;
}

.buttom-primary {
    float: left;
    display: inline-block;
    vertical-align: top;
    height: 68px;
    padding-left: 30px;
    padding-right: 30px;
    margin-right: 20px;
    border-radius: 4px;
    background-color: #ffd01e;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 22px;
    line-height: 66px;
}

.button-outline {
    float: left;
    display: inline-block;
    vertical-align: top;
    height: 68px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 4px;
    border: 3px solid #545454;
    color: #545454;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 22px;
    line-height: 62px;
}