html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::-moz-selection, ::selection {
  background: #b3d4fc;
  text-shadow: none; }

img {
  vertical-align: middle; }

fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

textarea {
  resize: vertical; }

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0; }

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }
  #header .header-main {
    max-width: 1160px;
    width: 90%;
    padding: 44px 0;
    margin: 0 auto; }

.container {
  max-width: 1160px;
  width: 90%;
  margin: 0 auto; }

.font_48 {
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1; }
  @media (max-width: 991px) {
    .font_48 {
      font-size: 30px; } }

.text_white {
  color: #fff; }

.text {
  color: #BABABA;
  letter-spacing: 0.01em;
  font-size: 17px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  line-height: 1.4; }
  @media (max-width: 991px) {
    .text {
      font-size: 15px; } }

a {
  color: #00732F;
  
}
.start {
  background-image: url("img/xmppae_background.png");
  background-position: center;
  background-size: cover; }
  .start .section-bg {
    padding-top: 115px;
    background: rgba(0, 0, 0, 0.4); }
    @media (max-width: 991px) {
      .start .section-bg {
        padding-top: 80px; } }
  .start .section__inner {
    margin: 0 auto;
    max-width: 1288px;
    width: 98%; }
  .start .col {
    max-width: 98%;
    width: 724px;
    padding: 86px 64px;
    background-color: #000000; }
    @media (max-width: 991px) {
      .start .col {
        padding: 40px 30px; } }
    .start .col .logo {
      margin-bottom: 48px; }
      @media (max-width: 991px) {
        .start .col .logo {
          margin-bottom: 24px; } }
      .start .col .logo p, h1 {
        text-transform: uppercase;
        line-height: 1;
        color: #00732F;
        font-size: 32px;
        font-family: 'Chakra Petch', sans-serif;
        font-weight: 600; }
        @media (max-width: 991px) {
          .start .col .logo p {
            font-size: 24px; } }
    .start .col .font_48, h2 {
      margin-bottom: 48px; }
      @media (max-width: 991px) {
        .start .col .font_48, h2 {
          margin-bottom: 24px; } }
    .start .col .text {
      max-width: 460px; }

.grid {
  padding-top: 95px;
  background-color: #000000; }
  @media (max-width: 991px) {
    .grid {
      padding-top: 50px; } }
  .grid .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 88px -20px 0 -20px;
    padding-bottom: 88px;
    border-bottom: 1px solid #404040; }
    @media (max-width: 991px) {
      .grid .row {
        padding-bottom: 50px; } }
    .grid .row .col {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 33%;
              flex: 0 0 33%;
      max-width: 33%;
      padding: 0 20px;
      margin-bottom: 40px; }
      @media (max-width: 991px) {
        .grid .row .col {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 50%;
                  flex: 0 0 50%;
          max-width: 50%; } }
      @media (max-width: 767px) {
        .grid .row .col {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 100%;
                  flex: 0 0 100%;
          max-width: 100%; } }
      .grid .row .col .item {
        padding: 48px;
        border: 1px solid #202020;
        height: 100%; }
        @media (max-width: 767px) {
          .grid .row .col .item {
            padding: 20px; } }
      .grid .row .col .title {
        font-size: 28px;
        font-family: 'Chakra Petch', sans-serif;
        font-weight: 600;
        color: #fff;
        line-height: 1.1;
        margin-bottom: 16px; }

.contact {
  padding-top: 96px;
  background-color: #000000;
  padding-bottom: 96px; }
  @media (max-width: 991px) {
    .contact {
      padding-top: 50px;
      padding-bottom: 50px; } }
  .contact .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .contact .container .font_48 {
      margin-bottom: 40px;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%; }
    .contact .container .form {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 60%;
      flex: 0 0 60%;
      max-width: 60%; }
      @media (max-width: 991px) {
        .contact .container .form {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 100%;
                  flex: 0 0 100%;
          max-width: 100%; } }
      .contact .container .form form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        margin: 0 -20px; }
        .contact .container .form form .col-half {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 50%;
          flex: 0 0 50%;
          max-width: 50%;
          padding: 0 20px; }
          @media (max-width: 767px) {
            .contact .container .form form .col-half {
              -webkit-box-flex: 0;
                  -ms-flex: 0 0 100%;
                      flex: 0 0 100%;
              max-width: 100%; } }
        .contact .container .form form .col {
          -webkit-box-flex: 0;
          -ms-flex: 0 0 100%;
          flex: 0 0 100%;
          max-width: 100%;
          padding: 0 20px; }
        .contact .container .form form input, .contact .container .form form textarea {
          display: block;
          width: 100%;
          background: #1C1C1C;
          padding: 20px 24px;
          font-size: 15px;
          border: none;
          line-height: 1.4;
          letter-spacing: 0.01em;
          color: #fff;
          margin-bottom: 24px;
          font-family: 'Roboto', sans-serif;
          font-weight: 400; }
          .contact .container .form form input::-webkit-input-placeholder, .contact .container .form form textarea::-webkit-input-placeholder {
            color: #BABABA; }
          .contact .container .form form input::-moz-placeholder, .contact .container .form form textarea::-moz-placeholder {
            color: #BABABA; }
          .contact .container .form form input:-ms-input-placeholder, .contact .container .form form textarea:-ms-input-placeholder {
            color: #BABABA; }
          .contact .container .form form input::-ms-input-placeholder, .contact .container .form form textarea::-ms-input-placeholder {
            color: #BABABA; }
          .contact .container .form form input::placeholder, .contact .container .form form textarea::placeholder {
            color: #BABABA; }
        .contact .container .form form button {
          padding: 16px 103px;
          background-color: #00732F;
          border: none;
          font-size: 16px;
          line-height: 1.5;
          color: #fff;
          font-family: 'Chakra Petch', sans-serif;
          font-weight: 600; }
    .contact .container .info {
      -webkit-box-flex: 0;
      -ms-flex: 0 0 40%;
      flex: 0 0 40%;
      max-width: 40%;
      padding-left: 140px; }
      @media (max-width: 991px) {
        .contact .container .info {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 100%;
                  flex: 0 0 100%;
          max-width: 100%;
          padding-left: 0;
          margin-top: 20px; } }