body {margin: 0; padding: 0; text-align: center; font-family: 'Open Sans'; font-weight: 400; color: #636363; font-size: 100%}
a {color: #636363}
a img {border: none}
strong {color: #013A71; font-weight: 700}


.head-in {margin: 0 auto; background-color: #F1F1F1; text-align: left; width: 1200px}
.logo {display: inline-block; float: left; background: url("../images/logo.png") left top no-repeat; width: 214px; height: 67px; margin: 14px 0 14px 60px}
.menu-whole {text-align: right; padding: 37px 60px 35px 0; position: relative; z-index: 50; margin-left: 275px}
.menu {margin: 0; padding: 0}
.menu li {list-style-type: none; display: inline-block; margin-left: 45px; text-transform: uppercase; line-height: 1.3em}
.menu li a {text-decoration: none; color: #545454}
.menu li a:hover, .menu li.active a {color: #2997E2}

.main-image {background-color: #EFEFEF}
.main-image-in {margin: 0 auto; text-align: left; width: 1200px; height: 310px; background: url("../images/main_image.jpg") center bottom no-repeat}
.main-image h1 {font-weight: 400; color: #FFFFFF; margin: 0; padding: 125px 50px 0 14%; font-size: 300%; line-height: 1.1em}

.main {margin: 0 auto; text-align: left; width: 1130px; padding: 45px 0 0 0}
.service {display: inline-block; vertical-align: top; width: 22.4%; margin: 0 3% 45px 0; text-decoration: none; color: #FFFFFF; padding-top: 20px; padding-bottom: 55px; position: relative; z-index: 20}
.service.s1 {background-color: #F04335}
.service.s1:hover {background-color: #DB3E32}
.service.s2 {background-color: #4EAA53}
.service.s2:hover {background-color: #438F47}
.service.s3 {background-color: #018FE1}
.service.s3:hover {background-color: #027FC7}
.service.s4 {margin-right: 0; background-color: #013A71}
.service.s4:hover {background-color: #012D58}
.service h2 {margin: 0 5px 35px 5px; line-height: 1.2em; font-size: 170%; text-align: center; font-weight: 400; text-transform: uppercase}
.service ul {padding: 0 10px 20px 15px; min-height: 130px}
.service ul li {list-style-type: none; padding-left: 17px; background: url("../images/list.png") left 8px no-repeat; line-height: 1.3em; font-size: 90%}
.service-arrow {padding: 17px 50px 17px 30px; text-transform: uppercase; font-size: 90%; font-weight: 300; position: absolute; left: 0; bottom: 0; width: 100%; box-sizing: border-box}
.service.s1 .service-arrow {background: #C0362A url("../images/arrow.png") right center no-repeat}
.service.s2 .service-arrow {background: #3E8842 url("../images/arrow.png") right center no-repeat}
.service.s3 .service-arrow {background: #0172B4 url("../images/arrow.png") right center no-repeat}
.service.s4 .service-arrow {background: #012E5A url("../images/arrow.png") right center no-repeat}
.service.s1:hover .service-arrow {background-color: #A73127}
.service.s2:hover .service-arrow {background-color: #347238}
.service.s3:hover .service-arrow {background-color: #026198}
.service.s4:hover .service-arrow {background-color: #00203F}
.customers {display: inline-block; vertical-align: top; width: 48.2%; margin: 0 3% 50px 0; background-color: #E6F5FD; color: #2F2F2F}
.customers a {color: #2F2F2F}
.customers strong {color: #018FE1}
.customers h3 {text-align: center; margin: 0 0 30px 0; padding: 22px 20px; line-height: 1.3em; font-size: 150%; font-weight: 400; border-bottom: 1px solid #ACC8DF}
.slider {padding: 0 30px 30px 30px}
.slider-left, .slider-right {display: inline-block; width: 11px; height: 24px; margin-top: 70px}
.slider-left {float: left; background: url("../images/slider_left.png") left top no-repeat}
.slider-right {float: right; background: url("../images/slider_right.png") left top no-repeat}
.slider ul {margin: 0 35px; padding: 0}
.slider ul li {list-style-type: none}
.slider-image {display: inline-block; vertical-align: middle; width: 40%; text-align: center}
.slider-image img {max-width: 90%}
.slider-text {display: inline-block; vertical-align: middle; width: 58%}
.slider-text .name {font-weight: 300; line-height: 1.2em; font-size: 150%}
.slider-text .company {font-weight: 700; color: #018FE1; line-height: 1.3em; font-size: 110%; margin-bottom: 17px}
.slider-text p {line-height: 1.3em; margin: 0; font-size: 85%}
.why {display: inline-block; vertical-align: top; width: 48%; margin: 0 0 50px 0; background-color: #FFD562; color: #2F2F2F}
.why h3 {text-align: center; margin: 0 0 40px 0; padding: 22px 20px; line-height: 1.3em; font-size: 150%; font-weight: 400; border-bottom: 1px solid #C7A035; color: #876301}
.why-list {padding: 0 0 1px 65px}
.why-list > span {display: inline-block; vertical-align: top; width: 47%; margin: 0 2% 53px 0; box-sizing: border-box; padding-left: 52px; line-height: 1.3em; font-size: 90%}
.wl1 {background: url("../images/ico_why1.png") left center no-repeat}
.wl2 {background: url("../images/ico_why2.png") left center no-repeat}
.wl3 {background: url("../images/ico_why3.png") left center no-repeat}
.wl4 {background: url("../images/ico_why4.png") left center no-repeat}

.subpage {padding-bottom: 50px}
.subpage p {line-height: 1.4em; margin: 0 0 30px 0}
.subpage h2 {font-weight: 400; color: #013A71; line-height: 1.3em; margin: 0 0 25px 0; font-size: 150%}
.subpage ul {margin: 0; padding: 0 0 30px 40px}
.subpage ul li {list-style-type: none; padding-left: 17px; background: url("../images/list2.png") left 11px no-repeat; line-height: 1.4em}
.subpage-text {display: inline-block; vertical-align: top; width: 66%; margin-right: 4%}
.subpage-text p {text-align: justify}
.subpage-images {display: inline-block; vertical-align: top; width: 29%}
.subpage-images img {display: block; width: 100%; margin-bottom: 30px}

.footer {background-color: #EFEFEF; color: #8E8E8E}
.footer a {color: #8E8E8E}
.footer strong {color: #656464}
.footer-in {margin: 0 auto; text-align: left; width: 1020px; padding: 30px 0 1px 0}
.footer-col {display: inline-block; vertical-align: top; width: 25%; margin: 0 1% 27px 0}
.about {display: inline-block; vertical-align: top; width: 47%; margin-bottom: 27px}
.footer h2 {font-weight: 300; font-size: 140%; line-height: 1.2em; color: #656565; margin: 0 0 30px 0}
.footer-col p {line-height: 2em; margin: 0}
.about p {margin: 0; line-height: 1.3em; font-size: 90%}

.copyright {padding: 25px 20px; color: #B6B6B6; font-size: 90%; line-height: 1.3em}
.copyright a {color: #B6B6B6; text-decoration: none}

#formular form {margin: 0; padding: 0}
#formular form .form-left {display: inline-block; vertical-align: top; width: 40%; margin-right: 2%}
#formular form .form-right {display: inline-block; vertical-align: top; width: 57%}
#formular form input[type=text], #formular form textarea {width: 89%; padding: 7px 5%; border: 1px solid #444444; height: 21px; font-family: Arial, sans-serif; font-size: 115%; color: #595959; margin-bottom: 10px}
#formular form textarea {height: 162px}
#formular form .form-button {padding-top: 10px; margin-right: 5px}
#formular form .form-button span {line-height: 1.3em; display: inline-block; padding-top: 10px; color: #989898}
#formular form input[type=submit] {float: right; cursor: pointer; border: 1px solid #3798CF; font-family: 'Open Sans', sans-serif; font-weight: 400; line-height: 1.3em; font-size: 140%; color: #3798CF; width: 185px; height: 37px; text-transform: uppercase; background-color: transparent}
#formular form input[type=submit]:hover {color: #5C5C5C; border: 1px solid #5C5C5C}


.fix {display: block; clear: both}


@media (max-width: 1220px){
  .head-in, .main-image-in {width: 100%}
}

@media (max-width: 1180px){
  .main {width: 94%}
}

@media (max-width: 1070px){
  .footer-in {width: 94%}
}

@media (max-width: 1040px){
  .service {width: 48%}
  .service.s2 {margin-right: 0}
  .service ul {min-height: 0; padding-left: 25px}
  .why-list > span {display: block; margin: 0 0 25px 0; width: auto}
}

@media (max-width: 930px){
  .logo {margin-left: 30px}
  .menu-whole {padding-right: 30px}
  .menu li {margin-left: 30px}
  .main-image h1 {padding-left: 30px}
}

@media (max-width: 910px){
  .footer-col {width: 48%}
  .about {display: block; width: auto}
}

@media (max-width: 810px){
  .customers {display: block; margin: 0 auto 30px auto; width: auto}
  .why {display: block; margin: 0 auto 50px auto; width: auto}
  .why-list > span {display: inline-block; width: 47%; margin: 0 2% 53px 0}
  .menu {display: none; position: absolute; padding: 10px 0; right: 30px; top: 80px; width: 200px; background-color: #FFFFFF; border: 1px solid #000068}
  .menu li {display: block; margin: 0; padding: 10px 20px; text-align: center}
  .menu li a {display: block}
  .menu-whole {text-align: right; position: relative; z-index: 50; padding: 30px 30px 25px 0}
  .mobile-menu {display: inline-block; width: 42px; height: 35px; background: url("../images/mobile_menu.png") left top no-repeat}
}

@media (max-width: 720px){
  .main-image-in {height: 250px; background-size: 820px auto}
  .main-image h1 {padding-top: 80px}
  .subpage-text {display: block; width: auto; margin-right: 0}
  .subpage-images {display: block; width: auto}
  .subpage-images img {max-width: 100%; width: auto}
}

@media (max-width: 530px){
  .why-list > span {display: block; margin: 0 0 25px 0; width: auto}
}

@media (max-width: 510px){
  .service {margin: 0 auto 25px auto !important; display: block; width: auto}
}

@media (max-width: 460px){
  .main-image h1 {padding-top: 90px; font-size: 200%}
  .main, .footer-in {width: 92%}
  .slider-image {display: block; width: auto; margin-bottom: 15px}
  .slider-text {display: block; width: auto}
  .footer-col {width: auto; display: block; margin-right: 0}
  .footer h2 {margin-bottom: 20px}
  #formular form .form-left, #formular form .form-right {width: auto; display: block; margin: 0}
}

@media (max-width: 370px){
  .logo {margin-left: 20px}
  .menu-whole {padding-right: 20px; margin-left: 235px}
  .menu {right: 20px}
  .why-list {padding-left: 30px}
}


@media screen and (min-width: 811px) {
.menu {
display: block !important;}
}