html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
hr,
a,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
}
.fL {
    float: left;
}
.fR {
    float: right;
}
.cB {
    clear: both;
}
ul,
ol {
    list-style: none;
}
a img {
    border: 0;
}
a {
    text-decoration: none;
    cursor: pointer;
}
a:focus,
a:hover {
    text-decoration: underline;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5 {
    margin-bottom: 24px;
    font-weight: bold;
}
h1,
.h1 {
    font-size: 1.5em;
    line-height: 1em;
} /* fs=24px|lh=24px */
h2,
.h2 {
    font-size: 1.375em;
    line-height: 1.0909em;
} /* fs=22px|lh=24px */
h3,
.h3 {
    font-size: 1.25em;
    line-height: 1.2em;
} /* fs=20px|lh=24px */
h4,
.h4 {
    font-size: 1.125em;
    line-height: 1.333em;
} /* fs=18px|lh=24px */
h5,
.h5 {
    font-size: 1em;
    line-height: 1.5em;
} /* fs=16px|lh=24px */
/* clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    zoom: 1;
}
a {
    color: blue;
}

.loginWrapper {
    width: 250px;
    padding: 12px;
    border: 1px solid black;
    margin: 150px auto;
}
.input {
    width: 240px;
    border: 1px solid black;
    height: 32px;
    line-height: 32px;
    padding: 0 4px;
    margin-bottom: 15px;
}
.submit {
    cursor: pointer;
    padding: 5px;
    border: 1px solid black !important;
}
.message {
    text-align: center;
    color: red;
}

.addWrapper {
    width: 250px;
    padding: 12px;
    border: 1px solid black;
    margin: 20px auto;
}
.wrapper {
    width: 250px;
    padding: 12px;
    margin: 20px auto;
}
.wrapper table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid black;
}
.wrapper table td {
    border-bottom: 1px solid black;
    padding-bottom: 6px;
    padding-top: 11px;
    text-align: right;
}
.wrapper table td.l {
    text-align: left;
}
.wrapper .message {
    padding-bottom: 20px;
}
.addUser {
    display: block;
    padding: 6px 15px;
    background: grey;
    text-align: center;
    margin-bottom: 20px;
}

#calcWrap {
    width: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: scroll;
}
#calcWrap:after {
    clear: both;
    display: table;
    content: "";
}
#calcWrapHandler {
    min-width: 570px;
}
#calcWrapHandler:after {
    clear: both;
    display: table;
    content: "";
}

#calcWrap .columnLeft {
    width: 25%;
    float: left;
    padding: 15px 0;
    background: #f4f4f4 url("kalk/leftBgLine.png") repeat-y top right;
    height: 645px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.tab {
}
#calcWrap .tab a {
    display: block;
    padding: 3px 0;
    text-align: center;
    border: 3px solid transparent;
    border-right: none;
}
#calcWrap .tab a:hover,
#calcWrap .tab.selected a {
    border: 3px solid #cecece;
    border-right: none;
    background: #fff;
}
#calcWrap img {
    vertical-align: middle;
    max-width: 100%;
    max-height: 100%;
}

.columnRight {
    display: none;
    width: 30%;
    float: right;
    height: 645px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.columnRight .top {
    padding: 10px 15px;
    background: #f4f4f4;
    margin-bottom: 15px;
}
.columnRight .center {
    padding: 10px 15px;
    background: #f4f4f4;
    margin-bottom: 15px;
    height: 248px;
}
.columnRight .bottom {
    padding: 10px 15px;
    background: #f4f4f4;
    margin-bottom: 0px;
}

.blueDesc {
    color: #628ec6;
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 5px;
}
.greyDesc {
    color: #898989;
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 5px;
}
.line {
    line-height: 35px;
    text-align: right;
}
.calculate {
    cursor: pointer;
    width: 100%;
    line-height: 35px;
    margin-bottom: 12px;
    display: block;
    text-align: center;
    font-size: 14px;
    color: #fff;
    border-radius: 10px;
    background: #ff8a4e url("/kalk/arrow.png") no-repeat right 20px center; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(
        #ff8a4e,
        #df5007
    ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(
        #ff8a4e,
        #df5007
    ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(
        #ff8a4e,
        #df5007
    ); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#ff8a4e, #df5007); /* Standard syntax */
    box-shadow: 0 4px 3px -2px #ae1400;
}

.columnRight select {
    width: 100%;
    height: 30px;
    border: none;
    margin-bottom: 5px;
}
.columnRight input {
    height: 30px;
    border: none;
    margin-bottom: 5px;
    padding: 0 0 0 10%;
}
.columnRight input.long {
    width: 90%;
}
.columnRight input.short {
    width: 80%;
    float: left;
}
.columnCenter {
    display: none;
}

.titleWrap {
    min-height: 141px;
    border-bottom: 3px solid #cecece;
    padding-top: 40px;
}
.title {
    color: #628ec6;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    padding-bottom: 15px;
}
.desc {
    color: #898989;
    font-size: 16px;
    text-align: center;
    padding: 0 35px;
}

.titleMain {
    color: #628ec6;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
    padding-top: 150px;
}
.descMain {
    color: #898989;
    font-size: 16px;
    text-align: center;
    max-width: 270px;
    margin: 0 auto;
}

.product {
    width: 43%;
    margin-right: 2%;
    float: left;
    height: 645px;
    border: 3px solid #cecece;
    border-left: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.imageWrap {
    display: table;
    width: 100%;
    height: 455px;
}
.image {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.c0 {
    display: block;
    width: calc(75% - 3px);
    float: right;
    text-align: center;
    height: 639px;
    border: 3px solid #cecece;
    border-left: none;
}
.c1,
.c2,
.c3,
.c4,
.c5,
.c6,
.c7,
.c8,
.c9,
.c10,
.c11,
.c12,
.c13 {
    display: none;
}
.op1,
.op2,
.op3,
.op4,
.op5,
.op6,
.op7,
.op8,
.op9,
.op10,
.op11,
.op12,
.op13 {
    display: none;
}

.wrapper {
    max-width: 990px;
    margin: 20px auto;
}
.map {
    width: 100%;
}
.map-img {
    width: 100%;
    max-width: 380px;
}
.map h3 {
    font-size: 24px;
    letter-spacing: 0px;
    line-height: 28px;
    color: #628ec6;
    font-family: "Arial";
    flex-basis: 100%;
}
.map p {
    font-size: 12px;
    line-height: 18px;
    color: #898989;
    flex-basis: 100%;
    max-width: 700px;
}

.map-list {
    list-style: none;
    flex-basis: 50%;
}
.map-column {
    padding: 10px;
}
.map-column:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
}
.map-list li {
    display: flex;
    align-items: center;
    padding: 10px 0;
}
.map-list li:before {
    content: "";
    display: block;
    margin-right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #628ec6;
}
@media (min-width: 500px) {
    .map-list {
        list-style: none;
        flex-basis: 30%;
    }
}
@media (min-width: 800px) {
    .map {
        display: flex;
    }
    .map-column {
        flex-basis: 50%;
    }
    .map-column:nth-child(2) {
        padding-top: 20px;
    }
}