* {
font-family: 'Fira Sans', sans-serif;
box-sizing: border-box;
}

@keyframes spin1 {
    0% {
        transform: scale(0.3);
    }
    100% {
        transform: scale(1);
    }
}

div.small {
font-size: 10pt;
}
.fw {
    display: flex;
    flex-wrap: wrap;
}

.fw div {
flex: 1 0 200px;
}
.bw {
word-break: break-word;
}

h1 {
    text-align:center;
    color: #d5cbe5;
    text-shadow: 0px 0px 2px white;
    background-color: #0f2031;
    padding: 21px;
    margin: 0;
}
h2 {
    margin: 0;
}
div.img {
    text-align:center;
}
div.img img {
visibility:hidden;
}
div.img img.loaded {
visibility:visible;
animation: spin1 0.5s ease-in;
}
body {
    margin: 0;
    background-color: #7654c7;
}
div.text1 {
    background-color: #0f2031;
    text-shadow: 2px 2px 3px #0f2031, 2px -2px 3px #0f2031, -2px 2px 3px #0f2031, -2px -2px 3px #0f2031;
}
div.text1 >div {
    color: #d5cbe5;
    margin: 0 auto;
}
div.text2 {
    background-color: #e9e9f5;
}
div.text2  > div {
    color: #0f2031;
    margin: 0 auto;
    line-height: 28pt;
}
form.calc {
    display: flex;
    flex-wrap: wrap;
    background-color: #dccfff;
    margin: 25px 0 0 0;
}
form.calc > div {
    flex: 1 0 300px;
    margin-top: 12px;
}
form.calc input[type=text] {
    font-size: 24pt;
    width: 60px;
    border: 1px solid #8a66e5;
    padding: 6px;
    text-align: right;
    background-color: #b7a3e9;
}
div.result {
    background-color: #8a66e5;
    color: #190d36;
}
div.result > div {
    margin-top: 12px;
}
div.result span {
    font-weight: bold;
    font-size: 40pt;
    color: #080808;
}
form > div.model {
width: 100%;
flex: 1 1 100%;
}

div.model input[type=radio] {
   display: none;
}
div.model input[type=radio] + label {
    padding: 11px 22px;
}
div.model input[type=radio]:checked + label {
    background-color: #8a66e5;
}
div.comment {
    font-size: 14pt;
    color: #33475c;
}

div.footer {
    background-color: #0f2031;
    color: #e9e0ff;
    font-size: 14pt;
}
div.footer > div {
    margin: 0 auto;
    padding: 20px 0 20px 0;
}

div.footer > h2 {
    margin: 0 auto;
}
div.footer a, div.text1 a {
    color: #cbd8e5;
}

div.footer > div.text {
    padding: 20px;
}

div.t {
    display: flex;
    flex-wrap: wrap;
}
div.t > div {
    width: 100%;
    display:flex;
}
div.t >div:nth-child(even) {
    background-color: #47269b;
}
div.t>div>div {
    flex: 2 2 200px;
    padding: 8px 12px;
}
div.t>div>div:not(:first-child) {
    flex: 1 1 100px;
}
div.c {
    text-align: center;
}

@media screen and (min-width:640px) {

div.price {
    position: absolute;
    right: calc(50% - 459px);
    font-size: 57pt;
    font-weight: bold;
    margin-top: 31px;
    color: #0f2031;
    text-shadow: 0 0 3px #ffdeb1;
}

div.img {
    margin: 40px 0 -207px 0;
}

div.text1 {
    font-size: 20pt;
}

div.text1 >div {
    width: 1000px;
    padding: 80px 0 50px 0;
}

div.text2 {
    font-size: 16pt;
}

div.text2 >div {
    width: 1000px;
    padding: 12px 0;
}
div.footer >div, div.footer > h2 {
    width: 1000px;
}

h1 {
    font-size: 50pt;
}

h2 {
    font-size: 40pt;
    padding: 39px 39px 21px 39px;
}
form.calc {
    padding: 21px 49px;
}

div.result {
    padding: 40px;
}

}

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

div.price {
    position: absolute;
    right: 25px;
    font-size: 30pt;
    font-weight: bold;
    margin-top: 15px;
    color: #0f2031;
    text-shadow: 0 0 3px #ffdeb1;
}

h1 {
    font-size: 28pt;
}
h2 {
    font-size: 22pt;
    padding: 39px 39px 21px 18px;
}

div.img {
    margin: 40px 0 -90px 0;
}
div.img img {
    width: calc(100vw - 40px);
}

div.text1 {
    font-size: 16pt;
}

div.text1 >div {
    width: 100%;
    padding: 80px 12px 50px 12px;
}
div.text2 {
    font-size: 16pt;
}

div.text2 >div {
    width: 100%;
    padding: 20px;
}

div.footer > div, div.footer > h2 {
    width: 100vw;
}
form.calc {
    padding: 16px 28px;
}
div.result {
    padding: 25px;
}

}