main.css.scss

@import 'normalize';

@import 'fonts';

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}


.blurred {
  filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px);
  -o-filter: blur(2px); -ms-filter: blur(2px);
  filter: url(blur.svg#blur);
}

$width: 1024px;

.wrapper {
  position: relative;
  margin: 0 auto;
  width: $width;
  @include clearfix;

}

h1, h2, h3 {
  font-weight: normal;
  margin: 0;

}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}


body {
  font-family: 'din', sans-serif;
}



header {
  background: #F4F0E9;
  a.logo {
    position: absolute;
    top: 14px;
    right: 0;
    background: url("logo-grey.png") no-repeat;
    width: 135px;
    height: 57px;
  }
  ul.menu > li {
    text-transform: uppercase;
    display: inline-block;
    padding: 34px 0 34px 85px;
    &:first-child {padding-left: 0}
  }
}



footer {
  min-height: 240px;
  background: #011B2A;
  color: #fff;
  a.logo {
    position: absolute;
    background: url("logo-color.png");
    width: 112px;
    height: 47px;
    top: 30px;
    left: 0;
  }
  ul.menu {
    color: #96D0D9;
    text-transform: uppercase;
    font-size: 26px;
    padding: 40px 0 20px 185px;
    li {
      display: inline-block;
      margin: 0 0 0 45px;
      &:first-child {margin-left: 0}
    }
  }
  ul.submenu {
    margin-left: 185px;
    font-size: 12px;
    line-height: 20px;
    font-family: arial, sans-serif;
  }
  .copyrights {
    font-family: arial, sans-serif;
    text-align: center;
    position: absolute;
    top: 108px;
    left: 0;
    width: 145px;
    font-size: 12px;
    line-height: 20px;
  }
}





.block.header {
  position: relative;
  width: $width;
  margin: 0 auto;
  padding: 105px 0;
  text-align: center;
  &:after {
    content: '';
    position: absolute;
    background: url("separator-header.png") no-repeat center center;
    width: 293px;
    height: 13px;
    bottom: 70px;
    left: 50%;
    margin-left: -146px;
  }
  h1 {
    font-size: 41px;
    font-family: 'swift', serif;
  }
  h2 {
    color: #96D0D9;
    font-size: 31px;
    font-family: 'swift', serif;
  }
}







.block.first {
  position: relative;
  padding-bottom: 50px;

  .bg {
    position: absolute;
    background: url("header-bg.jpg") no-repeat center center;
    background-size: cover;
    height: 100%;
    width: 100%;
  }
  .left {float: left; width: 600px;}
  .right {
    float: right;
     @include clearfix;
  }
  h1 {
    color: #fff;
    width: 500px;
    text-transform: uppercase;
    font-size: 120px;
    line-height: 114px;
    padding-top: 90px;
    padding-bottom: 20px;
  }
  h2 {
    color: #fff;
    font-size: 22px;
    font-family: 'swift', serif;
    &:before {
      content: '';
      display: block;
      width: 110px;
      height: 1px;
      background: #acacac;
      margin: 0 0 20px 10px;
    }
  }
  ul.social {
    text-align: right;
    li {
      display: inline-block;
      margin-left: 1px;
      background: #fff;
      a {
        display: block;
        background: url("vk-icon.png") no-repeat;
        width: 45px;
        height: 45px;
        &.fb {background-image: url("fb-icon.png")}
        &.tw {background-image: url("tw-icon.png")}
        &.vk {background-image: url("vk-icon.png")}
        &.ok {background-image: url("ok-icon.png")}
        &.mr {background-image: url("mailru-icon.png")}
      }
    }
  }
  a.tablet {
    margin-top: 30px;
    margin-right: 6px;
    text-transform: uppercase;
    width: 78px;
    float: right;
    padding-left: 70px;
    background: url("tablet-icon.png") no-repeat left top;
    min-height: 75px;
    clear: both;
    span {
      display: block;
    }
  }
  p {
    font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    font-size: 14px;
    float: right;
    width: 230px;
    clear: both;
  }

  a.button {
    font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    margin: 10px 0 7px;
    float: right;
    color: #fff;
    font-size: 16px;
    width: 190px;
    line-height: 40px;
    clear: both;
    display: block;
    text-align: center;
    &.blue {background: #194F7E}
    &.red {background: #DB3318}
  }
  .subletter {
    font-family: "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    clear: both;
    text-align: right;
    font-size: 14px;
  }

}




.block.blue {
  height: 800px;
  padding-top: 5px;
  color: #fff;
  .hex {
    position: absolute;
    transition: .5s;

    &:not(:hover) {
      @extend .blurred;

    }
  }
  .left {
    position: relative;
    height: 100%;
    margin-left: -3px;
    margin-right: 3px;
    float: left;
    width: 50%;
    box-sizing: border-box;
    .bg {
      position: absolute;
      z-index: -1;
      top: 0px;
      right: 0px;
      width: 100%;
      height: 100%;
      background: url("writing-bg.jpg") no-repeat right center;
      background-size: cover;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(2,38,60,.7);
      }
    }
    .text {
      float: right;
      width: 550px;
      height: 100%;
      h1 {
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        font-size: 48px;
        span {display: block}
        width: 500px;
        top: 450px;
        right: 18px;
      }
      p {
        width: 200px;
        position: absolute;
        top: 587px;
        right: 176px;
      }
      .hex-0 {
        background: url("hex-1-0.png") no-repeat;
        width: 134px;
        height: 154px;
        right: 200px;
        top: 255px;
        &:hover:before {
          opacity: 1;
        }
        &:before {
          z-index: 10;
          transition: .5s;
          opacity: 0;
          content: '';
          position: absolute;
          background: url("hex-hover.png") no-repeat;
          width: 139px;
          height: 160px;
          top: -3px;
          left: -3px;
        }
      }
      .hex-1 {
        background: url("hex-1-1.png") no-repeat;
        width: 97px;
        height: 154px;
        right: 219px;
        top: 105px;
      }
      .hex-2 {
        background: url("hex-1-2.png") no-repeat;
        width: 126px;
        height: 119px;
        right: 331px;
        top: 197px;
      }
      .hex-3 {
        background: url("hex-1-3.png") no-repeat;
        width: 171px;
        height: 133px;
        right: 329px;
        top: 366px;
      }
      .hex-4 {
        background: url("hex-1-4.png") no-repeat;
        width: 135px;
        height: 126px;
        right: 68px;
        top: 348px;
      }
      .hex-5 {
        background: url("hex-1-5.png") no-repeat;
        width: 158px;
        height: 126px;
        right: 46px;
        top: 172px;
      }
    }
  }
  .right {
    position: relative;
    margin-right: -2px;
    margin-left: 2px;
    height: 100%;
    float: right;
    width: 50%;
    box-sizing: border-box;
    .bg {
      z-index: -1;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: url("wheel-bg.jpg") no-repeat left center;
      background-size: cover;
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(2,38,60,.7);
      }
    }
    .text {
      float: left;
      width: 550px;
      height: 100%;
      h1 {
        position: absolute;
        text-align: center;
        text-transform: uppercase;
        font-size: 48px;
        span {display: block}
        width: 500px;
        top: 450px;
        left: 10px;
      }
      p {
        width: 200px;
        position: absolute;
        top: 587px;
        left: 176px;
      }
      .hex-0 {
        background: url("hex-2-0.png") no-repeat;
        width: 135px;
        height: 154px;
        left: 190px;
        top: 255px;
        &:hover:before {
          opacity: 1;
        }
        &:before {
          z-index: 10;
          transition: .5s;
          opacity: 0;
          content: '';
          position: absolute;
          background: url("hex-hover.png") no-repeat;
          width: 139px;
          height: 160px;
          top: -3px;
          left: -3px;
        }
      }
      .hex-1 {
        z-index: 1;
        background: url("hex-2-1.png") no-repeat;
        width: 147px;
        height: 143px;
        left: 318px;
        top: 176px;
      }
      .hex-2 {
        z-index: 1;
        background: url("hex-2-2.png") no-repeat;
        width: 151px;
        height: 150px;
        left: 42px;
        top: 172px;
      }
      .hex-3 {
        z-index: 1;
        background: url("hex-2-3.png") no-repeat;
        width: 122px;
        height: 182px;
        left: 197px;
        top: 78px;
      }
      .hex-4 {
        background: url("hex-2-4.png") no-repeat;
        width: 235px;
        height: 210px;
        left: 265px;
        top: 54px;
      }
      .hex-5 {
        z-index: 1;
        background: url("hex-2-5.png") no-repeat;
        width: 168px;
        height: 141px;
        left: 320px;
        top: 347px;
      }
      .hex-6 {
        background: url("hex-2-6.png") no-repeat;
        width: 173px;
        height: 141px;
        left: 22px;
        top: 363px;
      }
      .hex-7 {
        background: url("hex-2-7.png") no-repeat;
        width: 198px;
        height: 260px;
        left: 322px;
        top: 366px;
      }
      .hex-8 {
        background: url("hex-2-8.png") no-repeat;
        width: 186px;
        height: 247px;
        left: 16px;
        top: 44px;
      }
    }
  }
}




.block.services {
  height: 500px;
  color: #fff;
  h1 {
    margin-top: 143px;
    text-transform: uppercase;
    text-align: center;
    span {display: block;}
  }
  .left {
    position: relative;
    height: 100%;
    margin-left: -3px;
    margin-right: 3px;
    float: left;
    width: 50%;
    box-sizing: border-box;
    .bg {
      position: absolute;
      z-index: -1;
      top: 0px;
      right: 0px;
      width: 100%;
      height: 100%;
      background: url("rocket-bg.jpg") no-repeat right center;
      background-size: cover;
    }
    .text {
      float: right;
      width: 500px;
      height: 100%;
      background: rgba(0,41,58,.5);

    }
  }
  .right {
    position: relative;
    margin-right: -2px;
    margin-left: 2px;
    height: 100%;
    float: right;
    width: 50%;
    box-sizing: border-box;
    .bg {
      z-index: -1;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background: url("plants-bg.jpg") no-repeat left center;
      background-size: cover;
    }
    .text {
      float: left;
      width: 500px;
      height: 100%;
      background: rgba(0,41,58,.5);
    }
  }
}



.block.links {
  height: 260px;
  overflow: hidden;
  li {
    position: absolute;
    top: 0;
    transition: .5s;
    &:hover {
      top: -30px;
    }
    &.hex-1 {
      background: url("foothex-1.png") no-repeat;
      width: 158px;
      height: 195px;
      left: 202px;
    }
    &.hex-2 {
      background: url("foothex-2.png") no-repeat;
      width: 103px;
      height: 195px;
      left: 80px;
    }
    &.hex-3 {
      background: url("foothex-3.png") no-repeat;
      width: 103px;
      height: 195px;
      left: 490px;
    }
    &.hex-4 {
      background: url("foothex-4.png") no-repeat;
      width: 133px;
      height: 195px;
      left: 645px;
    }
    &.hex-5 {
      background: url("foothex-5.png") no-repeat;
      width: 134px;
      height: 194px;
      left: 800px;
    }
  }


}