@charset "UTF-8";
/*Обнуление*/
* {
  padding: 0;
  margin: 0;
  border: 0;
}

*, *:before, *:after {
  box-sizing: border-box;
}

:focus, :active {
  outline: none;
}

a:focus, a:active {
  outline: none;
}

nav, footer, header, aside {
  display: block;
}

html, body {
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

input, button, textarea {
  font-family: inherit;
}

input::-ms-clear {
  display: none;
}

button {
  cursor: pointer;
}

button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

a, a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

ul li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*--------------------*/
/* import fonts */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Regular.eot");
  src: local("☺"), url("../fonts/MyriadPro-Regular.woff") format("woff"), url("../fonts/MyriadPro-Regular.ttf") format("truetype"), url("../fonts/MyriadPro-Regular.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Gotham";
  src: url("../fonts/Gotham-Medium.eot");
  src: local("☺"), url("../fonts/Gotham-Medium.woff") format("woff"), url("../fonts/Gotham-Medium.ttf") format("truetype"), url("../fonts/Gotham-Medium.svg") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Gotham Pro";
  src: url("../fonts/GothamProMedium.eot");
  src: local("☺"), url("../fonts/GothamProMedium.woff") format("woff"), url("../fonts/GothamProMedium.ttf") format("truetype"), url("../fonts/GothamProMedium.svg") format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Gotham Pro";
  src: url("../fonts/ofont.ru_Gotham Pro.eot");
  src: local("☺"), url("../fonts/ofont.ru_Gotham Pro.woff") format("woff"), url("../fonts/ofont.ru_Gotham Pro.ttf") format("truetype"), url("../fonts/ofont.ru_Gotham Pro.svg") format("svg");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Gotham Book";
  src: url("../../fonts/Gotham-Book.eot");
  src: local("☺"), url("../../fonts/Gotham-Book.woff") format("woff"), url("../../fonts/Gotham-Book.ttf") format("truetype"), url("../../fonts/Gotham-Book.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "RobotoCondensed";
  src: url("../fonts/RobotoCondensed-Bold.eot");
  src: local("☺"), url("../fonts/RobotoCondensed-Bold.woff") format("woff"), url("../fonts/RobotoCondensed-Bold.ttf") format("truetype"), url("../fonts/RobotoCondensed-Bold.svg") format("svg");
  font-weight: 700;
  font-style: normal;
}
.icon__in, .icon__skype, .icon__twitter, .icon__facebook {
  background-image: url(../img/page/page__header_sprites.png);
  background-repeat: no-repeat;
  display: inline-block;
  width: 35px;
  height: 35px;
  margin-top: -13px;
}

/* css */
body {
  font-size: 15px;
  font-family: "Gotham Book";
  font-weight: normal;
  color: white;
}

/* container*/
.container {
  width: 1200px;
  margin: 0 auto;
}

/* link */
.link {
  text-decoration: none;
  color: white;
  font-family: "Myriad Pro";
  font-size: 19px;
  text-align: center;
  padding: 5px;
}

/* icon */
.icon__facebook {
  background-position: top right;
}
.icon__twitter {
  background-position: 0% 90%;
}
.icon__skype {
  background-position: 0% -5%;
}
.icon__in {
  background-position: 50% -5%;
}

/* title-letter */
.title-letter {
  font-weight: 700;
  font-size: 190px;
  font-family: "RobotoCondensed";
}

/* page */
.page {
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-image: url(../img/page/page_background.png);
  background-repeat: no-repeat;
  background-position: 50% top;
  background-size: cover;
  /* header */
  /* navigation */
  /* title */
}
.page__header {
  position: relative;
}
.page__logo::before {
  content: "CS";
  position: absolute;
  top: 20px;
  left: 0px;
  color: white;
  font-family: "Open Sans";
  font-weight: bold;
  font-size: 30px;
  background-color: #11749e;
  display: inline-block;
  padding: 20px 18px;
  box-shadow: 10px 10px 0 rgba(255, 255, 255, 0.7);
}
.page__nav ul {
  display: flex;
  justify-content: center;
}
.page__nav ul li {
  margin: 45px 0 0 0;
  text-align: center;
  padding: 5px;
}
.page__nav ul li:first-child {
  margin-left: 200px;
}
.page__nav ul li:nth-child(n+1):nth-child(-n+6) {
  margin-right: 50px;
  /* distance between <li> */
}
.page__nav ul li:nth-child(-n+6) {
  min-width: 50px;
  max-height: 27px;
  vertical-align: bottom;
}
.page__nav ul li:nth-child(n+7) {
  margin-right: 10px;
}
.page__link {
  cursor: pointer;
}
.page__nav ul li {
  transform: rotate(0deg);
  transition: transform 0.3s linear;
}
.page__nav ul li:hover {
  transform: rotate(360deg);
  transition: transform 200ms linear;
}
.page__main-title {
  display: flex;
  flex-wrap: wrap;
  width: 850px;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
  height: 500px;
  position: relative;
}
.page__title {
  font-family: "Gotham Pro";
  font-weight: 700;
  font-size: 150px;
  text-transform: uppercase;
  color: white;
}
.page__sub-title {
  font-family: "Gotham Pro";
  font-weight: 500;
  font-size: 25px;
  color: #11749e;
  text-transform: uppercase;
  letter-spacing: 15px;
  position: absolute;
  bottom: 140px;
}

/* info */
.info {
  width: 100%;
  height: 90vh;
  background-color: #11749e;
  padding-top: 150px;
  padding-bottom: 130px;
  overflow: hidden;
  /* info__header */
  /* info__title */
  /* info__letter */
  /* info__row */
  /* info__column */
}
.info:hover .info__letter {
  transform: translateX(-1000px);
  transition: transform 0.7s cubic-bezier(0, 0, 0.58, 1);
}
.info__header {
  margin-bottom: 175px;
  position: relative;
}
.info__title {
  text-transform: uppercase;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: -190px;
  left: 270px;
  z-index: 1000;
}
.info__letter {
  font-size: 230px;
  color: rgba(89, 147, 178, 0.7);
  position: absolute;
  top: -285px;
  left: 500px;
  z-index: 1;
  transform: translateX(0);
  transition: transform 500ms cubic-bezier(0.42, 0, 1, 1);
}
.info__letter_2 {
  font-size: 230px;
  color: rgba(89, 147, 178, 0.5);
  position: absolute;
  top: -285px;
  left: 500px;
  z-index: 1;
}
.info__row {
  display: flex;
  font-size: 0;
  margin-left: -90px;
}
.info__column {
  font-size: 15px;
  flex: 0 0 25%;
  padding: 0 40px;
}
.info__column:nth-of-type(2) img {
  margin-left: 15px;
}

/* title */
.title {
  font-family: "Gotham Pro";
  font-weight: bold;
  font-size: 40px;
}

/* item-info */
.item-info {
  /* item-info__icon */
  /* item-info__title */
  /* item-info__text */
}
.item-info__icon {
  width: 133px;
  height: 133px;
  border: 0 solid #fff;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.item-info__title {
  text-align: center;
  font-family: "Gotham Pro";
  font-weight: 500;
  font-size: 19px;
  text-transform: uppercase;
  margin: 25px 0 30px 0;
}
.item-info__text {
  line-height: 1.3;
  width: 265px;
  height: 70px;
}

/* news */
.section-news {
  width: 100%;
  height: 100vh;
}
.section-news-content {
  display: flex;
  flex-direction: column;
}
.section-news-content-box {
  display: flex;
  background-color: #222;
  color: #f0f0f0;
}
.section-news-content-item {
  display: flex;
  flex-direction: column;
  max-width: 50vw;
  padding: 45px 50px 38px 120px;
}
.section-news-content-item__subtitle-top {
  font-size: 11.5px;
}
.section-news-content-item__subtitle-top span {
  padding: 0 10px;
}
.section-news-content-item__title {
  font-size: 25px;
  font-family: "Gotham";
  font-weight: 500;
  padding: 10px 0 30px 0;
}
.section-news-content-item__subtitle {
  width: 70%;
  line-height: 1.5;
}
.section-news-content-item-img1 {
  background: url(../img/news/news-1.png) no-repeat center center;
  background-size: cover;
  width: 50vw;
  height: 50vh;
}
.section-news-content-item-img2 {
  background: url(../img/news/news-2.png) no-repeat center center;
  background-size: cover;
  width: 50vw;
  height: 50vh;
}

.black {
  background-color: #f0f0f0;
  color: #222;
}

.section-blog {
  width: 100%;
  height: 110vh;
  color: black;
  overflow: hidden;
}
.section-blog:hover .section-blog-content-header__letter {
  transform: translateX(-1000px);
  transition: transform 0.7s cubic-bezier(0, 0, 0.58, 1);
}
.section-blog-content {
  padding-top: 30px;
}
.section-blog-content-header {
  padding-top: 200px;
  margin-bottom: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 100;
}
.section-blog-content-header__title {
  font-size: 36px;
  font-family: "Gotham";
  font-weight: 500;
  text-transform: uppercase;
  position: absolute;
  top: 70px;
  z-index: 100;
}
.section-blog-content-header__letter {
  color: #d7d7d7;
  position: absolute;
  top: -10px;
  z-index: 2;
  transform: translateX(0px);
  transition: transform 500ms cubic-bezier(0.42, 0, 1, 1);
}
.section-blog-content-header__letter_2 {
  color: #d7d7d7;
  position: absolute;
  top: -10px;
  z-index: 1;
}
.section-blog-content-header__subtitle {
  font-family: "Gotham Book";
  font-size: 24px;
  position: absolute;
  top: 190px;
}
.section-blog-content-row {
  display: flex;
  font-size: 0;
  justify-content: center;
}
.section-blog-content-column {
  flex: 0 0 20%;
  padding: 0 17px;
  font-size: 15px;
}
.section-blog-content-column__title {
  font-family: "Gotham";
  font-weight: 500;
  font-size: 16px;
  color: #11749e;
  text-transform: uppercase;
  padding: 25px 0 25px 0;
  text-align: center;
}
.section-blog-content-column__text {
  width: 260px;
  line-height: 1.4;
  text-align: center;
}

.section-write {
  width: 100%;
  height: 45vh;
  background-color: #11749e;
}
.section-write-content {
  margin-right: -80px;
}
.section-write-content-row {
  display: flex;
  justify-content: center;
  padding-top: 115px;
}
.section-write-content-column {
  display: flex;
}
.section-write-content-column__icon {
  padding-right: 25px;
}
.section-write-content-column__text {
  max-width: 75%;
  line-height: 1.8;
  word-spacing: 6px;
}

.section-phone {
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-image: url(../img/phone/background-phone.png);
  background-repeat: no-repeat;
  background-position: 50% top;
  background-size: 110% 120%;
}
.section-phone-content-items {
  display: flex;
}
.section-phone-content-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 50px;
}
.section-phone-content-header {
  margin-top: -50px;
  margin-bottom: 70px;
}
.section-phone-content-header__title {
  font-family: "Gotham";
  font-weight: 500;
  font-size: 26px;
  text-transform: uppercase;
  padding-bottom: 35px;
}
.section-phone-content-header__text {
  max-width: 67.5%;
  word-spacing: 5px;
  line-height: 1.5;
}
.section-phone-content-line__text {
  font-size: 14px;
  margin-bottom: 20px;
  width: 330px;
  font-family: "Gotham";
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 20px 10px 15px;
  background-color: #11749e;
}
.section-phone-content-line__text:nth-child(2) {
  width: 360px;
}
.section-phone-content-line__text:last-child {
  width: 390px;
}
.section-phone-content-img {
  margin-right: 50px;
}

.section-team {
  width: 100%;
  height: 110vh;
  background-color: #fff;
  color: black;
  overflow: hidden;
}
.section-team:hover .section-team-content-header__letter {
  transform: translateX(-1000px);
  transition: transform 0.7s cubic-bezier(0, 0, 0.58, 1);
}
.section-team-content-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
  position: relative;
}
.section-team-content-header__title {
  font-family: "Gotham";
  font-weight: 500;
  font-size: 37px;
  text-transform: uppercase;
  position: absolute;
  top: 30px;
  z-index: 100;
}
.section-team-content-header__letter {
  font-size: 210px;
  color: #a9a9a9;
  position: absolute;
  top: -60px;
  transform: translateX(0);
  transition: transform 500ms cubic-bezier(0.42, 0, 1, 1);
}
.section-team-content-header__letter_2 {
  font-size: 210px;
  color: #a9a9a9;
  position: absolute;
  top: -60px;
}
.section-team-content-header__subtitle {
  margin-top: 170px;
  font-size: 27px;
}
.section-team-content-row {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
.section-team-content-column {
  text-align: center;
  flex: 0 0 25%;
  position: relative;
}
.section-team-content-column__background {
  margin: 0 auto;
  width: 70%;
  padding: 20px 25px 20px 25px;
  background-color: #fff;
  border: 0px solid #000;
  position: absolute;
  left: 15%;
  bottom: -35px;
}
.section-team-content-column__title {
  font-family: "Gotham";
  font-weight: 500;
  color: #11749e;
  text-align: center;
  font-size: 18px;
}
.section-team-content-column__text {
  font-size: 14px;
  margin-top: 7px;
  font-family: "Gotham";
  font-weight: 500;
  text-align: center;
}

.section-feedback {
  width: 100%;
  height: 100vh;
  background-color: #000;
  background-image: url(../img/feedback/feedback.png);
  background-repeat: no-repeat;
  background-position: 50% top;
  background-size: cover;
  overflow: hidden;
}
.section-feedback:hover .section-feedback-content-header__letter {
  transform: translateX(-1000px);
  transition: transform 0.7s cubic-bezier(0, 0, 0.58, 1);
}
.section-feedback-content-header {
  display: flex;
  justify-content: center;
  position: relative;
}
.section-feedback-content-header__title {
  text-transform: uppercase;
  font-family: "Gotham";
  font-weight: 500;
  font-size: 37px;
  margin-top: 130px;
  position: absolute;
  top: 0;
  z-index: 100;
}
.section-feedback-content-header__letter {
  font-size: 247px;
  color: rgba(86, 85, 85, 0.7);
  margin-top: 20px;
  position: absolute;
  top: 0px;
  left: 530px;
  z-index: 1;
  transform: translateX(0);
  transition: transform 500ms cubic-bezier(0.42, 0, 1, 1);
}
.section-feedback-content-header__letter_2 {
  font-size: 247px;
  color: rgba(86, 85, 85, 0.5);
  margin-top: 20px;
  position: absolute;
  top: 0px;
  left: 530px;
  z-index: 1;
}
.section-feedback-content-form {
  margin-top: 320px;
}
.section-feedback-content-form-input {
  display: flex;
}
.section-feedback-content-form-input input {
  color: white;
  border: 1px solid #fff;
  background-color: transparent;
  padding: 10px 0 10px 15px;
  font-size: 17px;
  margin-right: 20px;
  flex: 1;
  transform: scale(1);
  transition: transform 200ms linear;
}
.section-feedback-content-form-input input:last-child {
  margin-right: 0;
}
.section-feedback-content-form-input input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.section-feedback-content-form-input input:focus {
  border: 1px solid red;
  transform: scale(1.025);
  transition: all 150ms linear;
}
.section-feedback-content-form-input input:focus::placeholder {
  color: transparent;
}
.section-feedback-content-form-messange {
  display: flex;
  margin-top: 40px;
}
.section-feedback-content-form-messange textarea {
  color: white;
  border: 1px solid #fff;
  background-color: transparent;
  font-size: 17px;
  flex: 1;
  padding: 15px 0 0 15px;
  transform: scale(1);
  transition: transform 200ms linear;
}
.section-feedback-content-form-messange textarea::placeholder {
  color: rgba(255, 255, 255, 0.8);
}
.section-feedback-content-form-messange textarea:focus {
  border: 1px solid red;
  transform: scale(1.025);
  transition: all 150ms linear;
}
.section-feedback-content-form-messange textarea:focus::placeholder {
  color: transparent;
}
.section-feedback-content-form-button {
  text-align: center;
  margin-top: 50px;
  transform: scale(1);
  transition: transform 200ms linear;
}
.section-feedback-content-form-button span {
  padding: 20px 55px 20px 55px;
  border: none;
  outline: none;
  background-color: #11749e;
  text-align: center;
  font-family: "Gotham";
  font-weight: 500;
  font-size: 24px;
  text-transform: uppercase;
  color: white;
  transition: background-color 200ms linear;
}
.section-feedback-content-form-button:hover {
  transform: scale(1.1);
  transition: all 150ms linear;
}
.section-feedback-content-form-button:hover span {
  background-color: #0e5878;
  transition: all 150ms linear;
}
.section-feedback-content-form-button:hover:active span {
  background-color: #01425d;
  transition: all 150ms linear;
}

.section-footer {
  width: 100%;
  height: 100px;
  background-color: #222222;
  font-family: "Roboto";
  font-size: 14px;
}
.section-footer-content {
  display: flex;
  justify-content: space-between;
}
.section-footer-content-box {
  margin-top: 40px;
}
.section-footer-content-item__link {
  position: relative;
}
.section-footer-content-item__link a {
  text-decoration: none;
  color: white;
}
.section-footer-content-item__link a:hover {
  cursor: pointer;
  color: #d5d5d5;
}
.section-footer-content-item__link a:active {
  color: #b57878;
  transition: color 0.2s linear;
}
.section-footer-content-item__link::before {
  content: "";
  background-image: url(../img/footer/mail2.png);
  width: 24px;
  height: 24px;
  display: inline-block;
  position: absolute;
  left: -27px;
  bottom: -5px;
}