@charset "UTF-8";
@font-face {
  font-family: 'fontello';
  src: url("../font/fontello.eot?19777723");
  src: url("../font/fontello.eot?19777723#iefix") format("embedded-opentype"), url("../font/fontello.woff2?19777723") format("woff2"), url("../font/fontello.woff?19777723") format("woff"), url("../font/fontello.ttf?19777723") format("truetype"), url("../font/fontello.svg?19777723#fontello") format("svg");
  font-weight: normal;
  font-style: normal; }

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?19777723#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

.icon-calendar:before {
  content: '\e800'; }

/* '' */
.icon-left-dir:before {
  content: '\e801'; }

/* '' */
.icon-right-dir:before {
  content: '\e802'; }

/* '' */
.icon-twitter:before {
  content: '\f099'; }

/* '' */
.icon-facebook:before {
  content: '\f09a'; }

/* '' */
.icon-gplus:before {
  content: '\f0d5'; }

/* '' */
.icon-chart-line:before {
  content: '\f201'; }

/* '' */
.icon-server:before {
  content: '\f233'; }

/* '' */
@font-face {
  font-family: 'Gotham-Bold';
  src: url("../font/Gotham-Bold.eot?#iefix") format("embedded-opentype"), url("../font/Gotham-Bold.otf") format("opentype"), url("../font/Gotham-Bold.woff") format("woff"), url("../font/Gotham-Bold.ttf") format("truetype"), url("../font/Gotham-Bold.svg#Gotham-Bold") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Gotham-Book';
  src: url("../font/Gotham-Book.eot?#iefix") format("embedded-opentype"), url("../font/Gotham-Book.otf") format("opentype"), url("../font/Gotham-Book.woff") format("woff"), url("../font/Gotham-Book.ttf") format("truetype"), url("../font/Gotham-Book.svg#Gotham-Book") format("svg");
  font-weight: normal;
  font-style: normal; }

body {
  padding: 0;
  margin: 0; }

body {
  font-family: 'Roboto', sans-serif;
  color: #ffffff; }

.header {
  background: url("../img/header_bg.jpg");
  -webkit-background-size: cover;
          background-size: cover;
  height: 1100px; }
  .header__logo {
    height: 65px;
    width: auto; }
  .header__jumbotron {
    padding-top: 100px;
    text-align: center; }
  .header__title {
    font-size: 60px;
    font-weight: 100; }
  .header__desc {
    font-size: 36px;
    color: #8492af;
    margin-bottom: 80px; }
  .header__button, .pricing__button {
    display: block;
    color: #ffffff;
    padding: 12px 48px;
    margin: 0 auto;
    margin-bottom: 80px;
    background-color: #5584ff;
    border: 1px solid #5584ff;
    -webkit-border-radius: 25px;
            border-radius: 25px;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
    font-weight: 700;
    max-width: 200px; }
    .header__button:hover, .pricing__button:hover {
      color: #ffffff;
      text-decoration: none; }
    .header__button:focus, .pricing__button:focus {
      outline: 0; }
    .header__button:active, .pricing__button:active {
      background-color: #225fff;
      color: #e6e6e6;
      outline: 0; }

.navbar {
  margin-top: 68px;
  padding: 0 120px; }
  .navbar-item {
    font-size: 18px;
    margin-left: 50px; }
    .navbar-item__link {
      color: #ffffff;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s; }
      .navbar-item__link:hover {
        color: #5584ff;
        text-decoration: none; }
      .navbar-item__link:active {
        color: #3c72ff; }
    .navbar-item__button {
      color: #5584ff;
      padding: 12px 36px;
      border: 1px solid #5584ff;
      -webkit-border-radius: 25px;
              border-radius: 25px;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s; }
      .navbar-item__button:hover {
        color: #5584ff;
        text-decoration: none; }
      .navbar-item__button:active {
        border: 1px solid #3c72ff;
        color: #3c72ff; }

.features__image {
  margin: 0 auto;
  margin-top: -540px;
  margin-bottom: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.feature {
  text-align: center; }
  .feature__icon {
    color: #5584ff;
    font-size: 96px; }
  .feature__title {
    color: #0e1a35;
    font-size: 24px;
    font-weight: 700; }
  .feature__description {
    color: #8492af;
    padding-bottom: 30px; }
  .feature__button {
    font-weight: 700;
    color: #0e1a35;
    font-size: 18px;
    padding: 10px 80px;
    border: 1px solid #dadee7;
    -webkit-border-radius: 25px;
            border-radius: 25px;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
    .feature__button:hover {
      background-color: #5584ff;
      border: 1px solid #5584ff;
      color: #ffffff;
      text-decoration: none; }
    .feature__button:active {
      background-color: #3c72ff;
      color: #ffffff; }

.application-main {
  padding-top: 280px;
  padding-bottom: 100px; }

.application__title {
  font-size: 60px;
  font-weight: 100;
  color: #0e1a35;
  padding-bottom: 20px; }

.application__description {
  padding: 10px 0;
  color: #8492af;
  max-width: 60%; }

.application_left {
  padding: 0 80px; }

.application__image {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 0 50%;
     object-position: 0 50%;
  height: 100%; }

.application-list {
  color: #5584ff;
  font-size: 22px;
  list-style: none;
  padding: 0;
  padding-top: 40px; }
  .application-list__item {
    background: url("../img/list-check-item.png") no-repeat top left;
    padding-left: 45px;
    padding-bottom: 24px; }

.drag-drop {
  background: url("../img/header_bg.jpg");
  -webkit-background-size: cover;
          background-size: cover;
  padding: 150px 0; }
  .drag-drop_right {
    padding-left: 100px; }
  .drag-drop__title {
    font-size: 60px;
    font-weight: 100; }
  .drag-drop__image {
    padding-left: 20px; }
  .drag-drop__text {
    padding: 10px 0;
    color: #8492af;
    max-width: 80%; }
  .drag-drop__button {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    border: 1px solid #8492af;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    padding: 0;
    margin-right: 20px;
    color: #8492af;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; }
    .drag-drop__button:hover {
      border: 1px solid #5584ff;
      color: #5584ff; }
    .drag-drop__button:focus {
      outline: 0; }
    .drag-drop__button:active {
      background: #5584ff;
      border: 1px solid #5584ff;
      color: #ffffff; }
  .drag-drop__icon {
    display: block;
    font-size: 20px; }

.pricing, .template {
  padding: 100px 0;
  color: #0e1a35;
  text-align: center;
  position: relative; }
  .template__title, .pricing__title {
    font-weight: 100;
    font-size: 60px;
    padding-bottom: 20px; }
  .template__description, .pricing__description {
    color: #8492af;
    font-size: 18px;
    padding-bottom: 50px; }

.pricing__title {
  font-weight: 100;
  font-size: 60px;
  padding-bottom: 100px; }

.pricing__description {
  padding: 80px 0 40px 0; }

.pricing__button {
  margin-bottom: 0;
  position: relative;
  z-index: 1; }
  .pricing__button_no-border {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #ffffff;
    position: relative;
    padding: 10px 30px;
    width: 230px;
    margin: 0 auto;
    z-index: 0; }

.pricing__decoration {
  border: 1px solid #dadee7;
  width: 100%;
  position: absolute;
  top: 45%;
  z-index: 0; }

.price-box {
  text-align: center;
  -webkit-box-shadow: 0px 0px 50px 0px #c7c7c7;
          box-shadow: 0px 0px 50px 0px #c7c7c7;
  padding: 30px;
  color: #0e1a35;
  max-width: 90%; }
  .price-box__title {
    text-transform: uppercase;
    font-weight: 400; }
  .price-box__currency {
    font-weight: 700;
    font-size: 40px; }
  .price-box__price {
    font-weight: 700;
    font-size: 72px; }
  .price-box__period {
    font-size: 24px;
    color: #8492af; }
  .price-box__features {
    list-style: none;
    padding: 0; }
  .price-box__item {
    color: #8492af;
    font-size: 18px; }
    .price-box__item_check {
      background: url("../img/list-check-item.png") no-repeat top left;
      padding-left: 24px;
      padding-bottom: 12px; }
    .price-box__item_fail {
      background: url("../img/list-fail-item.png") no-repeat top left;
      padding-left: 24px;
      padding-bottom: 12px; }

.footer {
  background-color: #0e1a35;
  color: #8492af;
  padding: 40px 0; }
  .footer-nav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    list-style: none; }
    .footer-nav__item {
      color: #8492af;
      margin-right: 50px;
      -webkit-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s; }
      .footer-nav__item:hover {
        text-decoration: none;
        color: #ffffff; }
      .footer-nav__item:active {
        color: #5584ff; }
      .footer-nav__item_social {
        margin-right: 30px; }

@media (min-width: 576px) and (max-width: 995px) {
  .header {
    height: 100vh; }
  .navbar {
    margin-top: 20px;
    padding: 0; }
    .navbar-brand {
      width: 60%; }
    .navbar-item {
      margin: 0 auto;
      padding-bottom: 30px; }
  .features__image {
    display: none; }
  .feature {
    text-align: center; }
    .feature__button {
      padding: 10px 60px; }
  .application-main {
    padding-top: 30px; }
  .pricing, .template {
    padding: 30px 0; }
  .pricing__title {
    padding-bottom: 30px; }
  .pricing__decoration {
    width: 68vw; }
  .price-box {
    max-width: 100%;
    margin-bottom: 30px; }
    .price-box__title {
      font-size: 18px; }
    .price-box__item {
      font-size: 16px; }
  .footer-nav__item {
    margin-right: 20px; }
    .footer-nav__item_social {
      margin-right: 10px; } }

@media (max-width: 575px) {
  .navbar {
    margin-top: 20px;
    padding: 0; }
    .navbar-brand {
      width: 60%; }
    .navbar-item {
      margin: 0 auto;
      padding-bottom: 30px; }
  .header {
    height: auto; }
    .header__logo {
      height: auto;
      width: 100%; }
    .header__title {
      font-size: 32px; }
    .header__desc {
      font-size: 18px; }
  .features__image {
    display: none; }
  .application_left {
    padding: 0 15px;
    text-align: center; }
  .application-main {
    padding-top: 30px; }
  .application__title {
    font-size: 32px; }
  .application__description {
    max-width: 100%; }
  .application-list {
    font-size: 16px; }
  .application__image {
    width: 100%; }
  .drag-drop {
    text-align: center; }
    .drag-drop_right {
      padding-left: 0; }
    .drag-drop__title {
      font-size: 32px; }
    .drag-drop__text {
      max-width: 100%; }
  .pricing, .template {
    padding: 30px 0; }
    .template__title, .pricing__title {
      font-size: 32px; }
    .template__image {
      display: none; }
  .pricing__title {
    padding-bottom: 30px; }
  .pricing__decoration {
    width: 90vw; }
  .price-box {
    max-width: 100%;
    margin-bottom: 30px; }
  .footer-nav {
    display: none; } }