body {
    font-family: Calibri, serif;
    background-color: #ffffff;
    overflow: hidden;
}

#load-screen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffffff;
    overflow: hidden;
}

#load-screen > img {
    display: block;
    margin: 50px auto;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}
.loader {
    color: #000000;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.loader:before,
.loader:after {
    content: '';
    position: absolute;
    top: 0;
}
.loader:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader:after {
    left: 3.5em;
}
@-webkit-keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}
@keyframes load7 {
    0%,
    80%,
    100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }
    40% {
        box-shadow: 0 2.5em 0 0;
    }
}


.top, .bottom {
    position: absolute;
    left: 0;
    right: 0;
}

.top {
    top: 0;
    bottom: 50%;
}

.bottom {
    top: 50%;
    bottom: 0;
}

.left, .right {
    position: absolute;
    top: 0;
    bottom: 0;
    /*border: 1px solid black;*/
}

.left {
    left: 0;
    right: 50%;
}

.right {
    left: 50%;
    right: 0;
}

.container-block {
    display: table;
    width: 100%;
    height: 100%;
}

#images-block {
    top: 0;
    bottom: 31%;
}

#description-block {
    top: 69%;
    bottom: 0;
}

#description-block .left {
    left: 0;
    right: 65%;
}

#description-block .right {
    left: 35%;
    right: 0;
}

.card {
    position: relative;
    margin: 10px;
    padding: 5px;
    background-color: #eeeeee;
    border-radius: 2px;
    height: calc(100% - 20px);
}

.card-body {
    display: table-cell;
    width: 100%;
}

.image-block {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
}

.image-top {
    vertical-align: top;
}

.image-bottom {
    vertical-align: bottom;
}

.image-block > img {
    width: 100%;
    box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
}

#title {
    font-size: 45px;
    font-weight: bold;
}

#title + img {
    width: 45%;
}

#qrcode {
    display: inline-block;
    width: 35%;
}

#qrcode > img {
    width: 100%;
}

#equipments {
    position: absolute;
    list-style-type: none;
    margin: 0;
    padding: 10px;
}

#equipments > li {
    padding-top: 5px;
    font-size: 25px;
}

#equipments > li > span {
    border-bottom: 1px solid #101010;
}

.price {
    position: absolute;
    bottom: 0;
    right: 5px;
    font-size: 45px;
    font-weight: bold;
}

#price1 {
    display: none;
}

#description-loader {
    text-align: center;
}

@media (max-width: 1100px) {
    #title {
        font-size: 35px;
    }
}

@media (max-width: 875px) {
    #title {
        font-size: 25px;
    }

    #equipments > li {
        font-size: 15px;
    }
}

@media (max-width: 700px) {
    #images-block > .left {
        right: 0;
    }

    #images-block > .right {
        display: none;
    }

    .price {
        font-size: 25px;
    }
}

@media (max-width: 500px) {
    #description-block > .left {
        right: 0;
    }

    #description-block > .right {
        display: none;
    }

    #price1 {
        display: inherit;
    }

    #price2 {
        display: none;
    }
}