:root {
    --bleu: #3c9fe8;
    --lightgray: #999;
    --green:#234431;
    --lightgreen: #36604a;
    --yellow: #f4d060;
}

html {
    font-family: roboto, verdana;
    font-weight: 300;
    letter-spacing: .05em;
}

body {
    background-image: url(background.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

div.content h1,
div.content h2,
div.content h3 {
    color: var(--green) !important;
}
div.content h1 {
    font-size: 1.3em;
}
div.content h2 {
    font-size: 1.1em;
}
div.content h3 {
    font-size: 1em;
}

p {
    line-height: 1.8em;
}

.by2 {
    width: 50%;
    float: left;
}
.clr {
    clear: both;
}

div.content {
    width: 1024px; margin: 10px auto;
}

div.w200 {
    width: 200px;
    padding: 10px;
    float: left;
}
span.colorBlock {
    display: inline-block;
    padding: 6px;
    border-radius: 4px;
}
div.section {
    border: 1px solid var(--lightgray);
    border-radius: 10px;
    padding: 15px;
    margin: 5px 0;
    background-color: rgba(255,255,255,.5);
}
div.section textarea {
    display: block;
    width: 100%;
}
div.section.active {
    background-color: var(--yellow);
}

table.priceTable {
    width: 100%;
}
table.priceTable td {
    text-align: center;
}

button.btn-process {
    background-color: var(--green);
    color: white;
}
button.btn-process:hover {
    background-color: var(--lightgreen);
    color: white;
}

div#coord_fact {
    margin: 4px;
    padding: 10px;
    border: 1px solid var(--lightgreen);
    border-radius: 10px;
}

@media screen and (max-width: 800px) {
    div.content {
        width: auto;
        padding: 10px;
    }
    div.w200 {
        width: 140px;
    }
    .by2 {
        width: auto;
        float: none;
    }
}