* { margin: 0; padding: 0; outline: none; box-sizing: border-box;}
html, body.mainbody { height: 100%; width: 100%;}
body.mainbody, th, td, p, div, span, ul, li, textarea, input, select, sup, sub,
#maineditor { color: #5d5d5d; font: 16px 'Open Sans', Arial, Helvetica, sans-serif }
body.mainbody {}

a:link, a:visited, a:active, .content a, #maineditor a { color: #234f82; text-decoration: underline; }
a:hover, .content a:hover, #maineditor a:hover {color:#cc0000; text-decoration: underline;}
img, .content a.ext_icon img, #content a:hover.ext_icon img { border: 0; }

h1, h2, h3, h4, h5, h6, #edmheaderspan { color: #234f82 ; text-decoration: none; text-transform: uppercase; font-weight: 600; }
.title h1, .title h2, #edmheaderspan {color: #234f82; font-size: 30px;}
  /* .title {margin-bottom: 60px;} */
  .title * {position: relative;display: inline-block;}
  .title span {
    vertical-align: top;  padding-top: 18px;
    bottom: 8px;  opacity: 0;
    transform: translate3D(-10px,0,0);
    transition: transform .6s ease,opacity .5s ease;
  }
  .title span:after {
    content: "";
    position: relative;
    display: inline-block; margin: 4px 10px; width: 100px; height: 2px;
    background-color: #004e85;

    transition: transform 2s ease .6s;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .title.animate-in span {opacity: 1; transform: translate3D(0,0,0);}
  .title.animate-in span:after { transform: scaleX(1);}

h2 { color: #5d5d5d; text-transform: none; font-size: 22px; }
h3 { color: #414040; text-transform: none; font-size: 20px; font-weight: 600; }


input, textarea, select { margin: 0; padding: 4px 10px; vertical-align: middle; border: 1px solid #d4d4d4; background-color: #fff; }
input[type='checkbox'],input[type='radio'] { border: none; }

/* clearfix */
.clearfix:before, .clearfix:after {content: ""; display: table;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
.clear {clear: both; margin: 0; padding: 0; font-size: 0; line-height: 0;}
.flt_l {float: left;}
.flt_r {float: right;}


/* ====== Standart forms ======== */
.weform table td { padding: 2px 4px; }
.weform input { padding: 2px; }
.weform .btn input { font-weight: bold; padding: 5px 20px; border: none; background: none; background-color: #8B755B; color: #fff; }
span.we--form-err_msg {color: #CC0000;}


.fbstar { color: #CC0000; } /* for feedback stars */
.btn input, .btn-contact-form { padding: 16px 60px; border: none; background: none; background-color: #004e85; color: #fff; font-size: 22px; text-transform: uppercase;cursor: pointer;}
.btn-contact-form {margin-right: 20px;}
a[data-href] {cursor: pointer}
a[data-href]:hover {text-decoration: none;}

/* ================= */
.we--div-row {display: flex; justify-content: space-around; flex-wrap: wrap; }
.we--div-cell {min-width: 320px; padding: 40px; }
.we--div-cell img { width: 100% !important; height: auto !important;}

.webedit .we--div-table, .webedit .we--div-row {display: block; width: 100%;}
.webedit .we--div-cell {display: inline-block; text-align: center;}
.webedit .we--div-cell img {width: auto !important; height: auto !important;}
/* ========================================================================== */
.section {width: 100%;}
.container { position: relative; margin: 0 auto; padding: 80px 10px; max-width: 1400px; }
.content {margin-top: 60px;}
.compound .content {margin-top: 0;}
.webedit .content { min-height: 300px; height: auto !important; height: 300px; he\ight: 300px; }

.parll {
  position: relative; height: 400px; overflow: hidden;
  background-position: 50% 50%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;

  -webkit-background-size:cover;
  -o-background-size:cover;
  -moz-background-size:cover;
  }
  .innerpage .parll {height: 500px;}
  #img1 {background-image: url(../images/img1.jpg)}
  #img2 {background-image: url(../images/img2.jpg)}
  #img3 {background-image: url(../images/img3.jpg)}

.compound-list-item {padding-top: 60px;}
/* .compound-list-item:first-of-type {padding-top: 0;} */
.compound-list-item h2 {margin-bottom: 40px;}


/**** body ****/
#header { position: relative; width: 100%; background-color: #234f82; z-index: 900; }

    .indexpage #header {display: none; opacity: 0;}
    .indexpage #header.show-nav {display: block; opacity: 1; transition: all 2s; }
    .indexpage #header._fixed {position: fixed; top:0; left:0; transition: all 2s;}

    .innerpage #header {position: fixed;}
    .innerpage.webedit #header {position: relative;}


  #header .container {padding-top: 10px; padding-bottom: 10px; display: flex; justify-content: space-between; flex-wrap: nowrap;}

  .logo {
    display: block; width: 190px; height: 40px;
    background: url(../images/silsteve.svg) 0 50% no-repeat;}
    .logo#logo {background: none;}
    .logo span { display: none; width: 100%; height: 100%; }
    .logo#logo span {display: block;}
    .logo#logo span img { width: 100%; height: auto;}

  .header-tools {position: relative; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;}

    .langs {display: flex; margin: 0 40px; list-style-type: none;}
    .langs li, .langs a {display: block; }
    .langs a {padding: 0 6px; color:#fff; text-decoration: none; text-transform: uppercase; line-height: 20px;}
    .langs a.cur {text-decoration: underline; }

    .nav-up {
      display: none; position: absolute; left: 0; top: 20px; padding: 0 10px; width: 100%;
      justify-content: flex-end; align-items: center;
      }
    .nav-dwn {
      position: absolute; left: 0; bottom: 20px; width: 100%;
      display: flex; justify-content: center;
      }

      .level-1 {display: flex; list-style-type: none;}
      .level-1 li, #level-1 a {position: relative; display: block;}
      .level-1 a {padding: 0 14px; color: #fff; text-decoration: none; text-transform: uppercase;}

    .header-tools .navigation li > div {
      display: none; width: 350px;
      position: absolute; left: -40px; padding: 20px 0 40px 0;
      background-color: rgba(35, 79, 130, 0.8);
      z-index: 910;
      }
      .header-tools .navigation >ul > li:hover >div {display: block}
      .header-tools .navigation ul ul li {padding: 6px 30px;}
      .header-tools .navigation ul ul li a {font-size: 16px; text-transform: none;}

    .mobile-menu-trigger { display: none; cursor:pointer;}
      .mobile-menu-trigger span {display: block; margin: 4px 0; width: 22px; height: 3px; background-color: #fff;}

    .mobile-navigation {
      display: none; padding: 20px 0;
      position: absolute; top:60px; right:-10px; width: 350px;
      background-color: rgba(35, 79, 130, 0.8); z-index: 910;
      }
      .nav-up .mobile-navigation {top:40px;}

      .mobile-level-1 li {padding: 6px 45px;}
      .mobile-level-1 li:hover, .mobile-level-1 li.cur, .header-tools .navigation ul ul li:hover {background-color: rgba(35, 79, 130, 0.8);}
      .mobile-level-1, #mobile-level-2, .mobile-level-1 li, .mobile-level-1 a {display: block; list-style-type: none}
      .mobile-level-1 a {color: #fff; text-decoration: none;}
      .mobile-level-1 > li > a { text-transform: uppercase; font-size: 20px;}
        .mobile-level-1 ul {padding-top: 8px;}
        .mobile-level-1 ul li {padding: 3px 35px;}



#top-img {
width: 100%; height: 100%;
	background-image: url(../images/start.jpg);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size:cover;
    -o-background-size:cover;
    -moz-background-size:cover;
}
  #block-shadow {
    position: absolute; top:0; left:0;
    width: 100%; height: 100%;
    background-color: rgba(18, 48, 94, 0.4);
  }
  #top-img .container { height: 100%; padding-top:10px; padding-bottom:10px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    #big-logo { width: 60%; height: 10%; max-width: 500px; background: url(../images/silsteve.svg) 50% 50% no-repeat;}
    #slogan { width: 60%; max-width: 460px; margin-top:20px; color: #fff; font-size: 30px; text-align: center; text-transform: uppercase;}

#services-nav {
  display: flex; justify-content: center; flex-wrap: wrap;
  width: 100%; list-style-type: none;
  }
  #services-nav li {
    display: block; margin: 20px 14px; margin-bottom: 55px; width: 29%; min-width: 300px; height: 300px;
    background-position: 50% 100%; background-size: cover;
    transform: scale(1);transition: transform .6s ease;
  }
  #services-nav li:hover {transform: scale(0.96);}
  #services-nav li a {position: relative; display: block; width: 100%; height: 100%;}
  #services-nav a span {
    position: absolute; left: 0; bottom: -36px;
    display: block; padding: 6px 10px; width: 100%;
    color: #fff; text-decoration: none; font-size: 24px; text-transform: uppercase;
    background-color: #004e85;
  }

/* CONTACTs */
#contacts .container {display: flex; justify-content: space-between}
  .contact-block {width: 46%;}
  #contact-data { display: flex; flex-direction: column; justify-content: center; padding: 0 40px; background-color: #004e85;}
  #contact-data * {color: #fff; font-size: 22px; }
  #contact-data .logo {margin-bottom: 40px; width: 300px;}

/* CONTACT FORM */
#contact-form {display: block; position: relative;}
    .form-group { position: relative;	margin-bottom: 15px; float: left; width: 48%; }
    .form-group:nth-child(2n){ margin-left: 4%; }
    .form-group:after {
      content: "";
      position: absolute; top:28px; right:20px;
      display: block; width: 4px; height: 4px;
      background-color: #1e488e; border-radius: 50%;
     }
     #form-bttn + span {position: relative;}
     #form-bttn + span:after {
      content: "";
      position: absolute; top:30px; left:-10px;
      display: block; margin: -20px 8px 0 0; width: 4px; height: 4px;
      background-color: #1e488e; border-radius: 50%;
     }
    .wrong-inp { border: 1px solid #CC3300 !important }

    #contact-form {display: block; position: relative;}
    #contact-form-block h2 {margin-bottom: 20px;}
    #contact-form div, #contact-form textarea, #contact-form p { position: relative; z-index: 100 }
    #contact-form input[type='text'],#contact-form input[type='email'], #contact-form textarea, .content input[type='text'], .content input[type='email'], .content textarea {
    	/*color: #666fb5;*/ background-color: #efefef;
    	border: 1px solid #eee;
    	border-radius: 2px;
    	-webkit-border-radius: 2px;
    	-moz-border-radius: 2px;
    	-o-border-radius: 2px;
    	outline: none;
    	width: 100%;
    	padding: 18px 40px 18px 20px;
    	display: block;
    	margin-bottom: 20px;

    	transition: all 1s ease-in-out;
    	-moz-transition: all 1s ease-in-out;
    	-webkit-transition: all 1s ease-in-out;
    	-o-transition: all 1s ease-in-out;
    }


      #contact-form input[placeholder]::-webkit-input-placeholder {color:#999;}
      #contact-form input[placeholder]::-moz-placeholder          {color:#999;}/* Firefox 19+ */
      #contact-form input[placeholder]:-moz-placeholder           {color:#999;}/* Firefox 18- */
      #contact-form input[placeholder]:-ms-input-placeholder      {color:#999;}
      #contact-form textarea[placeholder]::-webkit-input-placeholder {color:#999;}
      #contact-form textarea[placeholder]::-moz-placeholder          {color:#999;}/* Firefox 19+ */
      #contact-form textarea[placeholder]:-moz-placeholder           {color:#999;}/* Firefox 18- */
      #contact-form textarea[placeholder]:-ms-input-placeholder      {color:#999;}


    #contact-form div#success {
      position: absolute; top:0; left:0;
      width: 100%; height: 100%;
      text-align: center; color: #fff; vertical-align: middle;
      background: #234f82 url(../images/gnu-loader.gif) 50% 50%;
      opacity: 0; z-index: 90;

    	transition: all 1s ease-in-out;
    	-moz-transition: all 1s ease-in-out;
    	-webkit-transition: all 1s ease-in-out;
    	-o-transition: all 1s ease-in-out;
    }
    #contact-form #success.sending {
      opacity: 1; z-index: 1000;

    	transition: all 1s ease-in-out;
    	-moz-transition: all 1s ease-in-out;
    	-webkit-transition: all 1s ease-in-out;
    	-o-transition: all 1s ease-in-out;
    }
    #contact-form #success.done {
      background-image: none !important;

    	transition: all 1s ease-in-out;
    	-moz-transition: all 1s ease-in-out;
    	-webkit-transition: all 1s ease-in-out;
    	-o-transition: all 1s ease-in-out;
    }
    #contact-form #success p { padding: 30% 40px 0; font-size: 1.8em; color: #fff }

#gmap {width: 100%; height: 600px;}

/* ===== FOOTER ===== */
#footer {background-color: #234f82}
#footer * {color: #fff;}
#footer .container {padding-top: 10px; padding-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }

#edss {display: block; width: 14px; height: 10px; background: url(../images/edss.gif) 0 0 no-repeat; }
#edss span { display: none; }

/* ===== Error 404 ===== */
.error404 #cont .container {display: flex; justify-content: space-between; align-items: center;}
.error404 #cont .container #contact-data {padding-top: 40px; padding-bottom: 40px}

@media screen and (max-width: 1280px){
  .header-tools .navigation {display: none}
  .mobile-menu-trigger {display: block !important}
}
@media screen and (max-width: 1100px){
  .nav-dwn #level-1 a {padding: 0 6px;}
  #services-nav a span {font-size: 22px;}
}
@media screen and (max-width: 1023px){
  .nav-dwn {display: none !important;}
  .nav-up {display: flex;}
  #header, .indexpage #header {display: block !important; opacity: 1;}

  #contacts .container {justify-content: center; flex-direction: column; }
  #contacts .contact-block {width: 100%;}
  #contact-data {padding-top: 40px; padding-bottom: 40px; margin-bottom: 40px; }
}
@media screen and (max-width: 640px){
  #slogan {width: 100%; font-size: 20px;}
  .title span:after {width: 50px;}
  #news .transparent_table tr {display: flex; flex-direction: column; }
  #news .transparent_table td img {width: 100% !important; height: auto !important;}

  #contact-data {padding: 20px;}
  #contact-form p  {flex-direction: column-reverse; align-items: center}
  #form-bttn + span {text-align: center; margin-bottom: 20px;}
  .form-group {float: none; width: 100%; }
  .form-group:nth-child(2n) {margin-left: 0; }

  .innerpage .parll#img2 {height: 300px;}
  .error404 #cont .container {flex-direction: column-reverse;}
  .error404 #cont .container .contact-block {width: 100%;}
  .error404 #cont .container #contact-data {margin-top: 40px;}
}
@media screen and (max-width: 350px){
  .mobile-navigation { width: calc(100% + 10px)}
  #contact-data .logo {margin-bottom: 20px; width: 260px;}
}
@media screen and (max-device-width: 1024px){
	.parll, #top-img {
        background-attachment: scroll !important;
	}
}