@font-face {
  font-family: Msc-100;
  src: url(fonts/MuseoSansCyrl-100.ttf);
}

@font-face {
  font-family: Msc-300;
  src: url(fonts/MuseoSansCyrl-300.ttf);
}

@font-face {
  font-family: Msc-500;
  src: url(fonts/MuseoSansCyrl-500.ttf);
}

@font-face {
  font-family: Msc-700;
  src: url(fonts/MuseoSansCyrl-700.ttf);
}

@font-face {
  font-family: Msc-900;
  src: url(fonts/MuseoSansCyrl-900.ttf);
}

.container {
  display: flex;
  justify-content: center;
}

.fluid {
  width: 1170px;
  padding: 0 15px;
}

h1 {
  font-family: Msc-700;
  font-size: 32px;
  line-height: 20px;
  color: #92281f;
}

h2 {
  font-family: Msc-500;
  font-size: 26px;
  line-height: 24px;
  color: #92281f;
}

p,
body {
  font-family: Msc-100;
  font-size: 16px;
  line-height: 20px;
  color: #3c3d3e;
}

/* /////////////////// ↓ Banner ↓ /////////////////// */
.mainBanner {
  background: url(../images/banner.jpg) no-repeat;
  background-position: left;
  width: 100%;
  min-height: 920px;
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 33px 0;
  border-bottom: 1px solid rgba(196, 196, 196, 0.2);
}

.iconContainer {
  display: flex;
  align-items: center;
}

.iconContainer img {
  margin: 0 30px 0 0;
}

.iconContainer_2 {
  display: flex;
  align-items: flex-start;
}

.iconContainer_2 img {
  margin: 0 30px 0 0;
}

.lastName {
  font-family: Msc-700;
  font-size: 20px;
  line-height: 23px;
  color: #0cc3eb;
  text-transform: uppercase;
}

.firstName {
  font-family: Msc-500;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
}

.letterText {
  font-family: Msc-500;
  font-size: 16px;
  line-height: 19px;
  color: #0cc3eb;
}

.headerRight {
  display: flex;
  align-items: flex-start;
}

.headerRight .iconContainer {
  margin: 0 70px 0 0;
}

.headerNumber {
  font-family: Msc-900;
  font-size: 18px;
  line-height: 21px;
  color: #0cc3eb;
}

.numberFlexContainer {
  display: flex;
  align-items: center;
  margin: 0 0 5px 0;
}

.numberFlexContainer img {
  margin: 0 0 0 7px;
}

.lenguagesButtons {
  display: flex;
  margin: 0 0 0 60px;
}

.lenguagesButtons button {
  width: 30px;
  height: 30px;
  background: none;
}

.lenguagesButtons button.active img {
  border-radius: 100%;
  border: 3px solid #0cc3eb;
}

.lenguagesButtons button.blackOut img {
  filter: grayscale(50%);
}

.lenguagesButtons button img {
  border-radius: 100%;
  border: 3px solid #0cc3eb00;
  transition: 0.2s;
}

.lenguagesButtons button:focus img {
  border-radius: 100%;
  border: 3px solid #0cc3eb;
}

.lenguagesButtons button:first-child {
  margin-right: 17px;
}

.bannerContainer {
  position: absolute;
  top: 204px;
  left: 840px;
  width: 700px;
}

.bannerTitleBlue {
  font-family: Msc-100;
  font-size: 40px;
  line-height: 45px;
  color: #0cc3eb;
}

.bannerTitleWhite {
  font-family: Msc-100;
  font-size: 40px;
  line-height: 45px;
  color: #ffffff;
}

.postBannerTitle {
  display: flex;
  align-items: center;
  margin: 40px 0 0 0;
  font-family: Msc-300;
  font-size: 20px;
  line-height: 20px;
  color: #ffffff;
}

.postBannerTitle img {
  margin: 0 10px 0 0;
}

.bannerMainWaysTitle {
  margin: 98px 0 0 0;
  font-family: Msc-500;
  font-size: 20px;
  line-height: 20px;
  color: #ffffff;
}

.bannerMainWays {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 50px 0 0 0;
}

.bannerMainWaysItem {
  display: flex;
  align-items: center;
  width: 200px;
  padding: 11px 18px 11px 0;
  margin: 0 0 20px 0;
  background: #181110;
  border: 1px solid #0cc3eb;
  font-family: Msc-700;
  font-size: 16px;
  line-height: 20px;
  color: #ffffff;
}

.bannerMainWaysItem img {
  margin: 0 20px 0 0;
}

.bannerMainWaysItemPL {
  display: flex;
  align-items: center;
  width: 200px;
  padding: 11px 18px 11px 0;
  margin: 0 0 20px 0;
  background: #181110;
  border: 1px solid #0cc3eb;
  font-family: Msc-700;
  font-size: 13px;
  line-height: 20px;
  color: #ffffff;
}

.bannerMainWaysItemPL img {
  margin: 0 20px 0 0;
}

/* /////////////////// ↑ Banner ↑ /////////////////// */

.mainWhiteContainer {
  display: flex;
  padding: 60px 0;
}

.mainWhiteContainer img {
  margin: 0 0 0 40px;
}

.titleWithSemicercle {
  display: flex;
  align-items: center;
}

.titleWithSemicercle img {
  margin: 0 10px 0 0;
}

.contentTitleBlack {
  font-family: Msc-500;
  font-size: 30px;
  line-height: 35px;
  color: #1a1b1b;
}

.postContentTitle {
  margin: 18px 0 40px 0;
  font-family: Msc-300;
  font-size: 16px;
  line-height: 20px;
  color: #626666;
}

.advantagesOurJob {
  margin: 0 0 30px 0;
  font-family: Msc-500;
  font-size: 20px;
  line-height: 20px;
  color: #3c3d3e;
}

.containerText li {
  display: flex;
  padding: 0 0 20px 0;
  list-style-type: none;
  font-family: Msc-300;
  font-size: 16px;
  line-height: 20px;
  color: #626666;
}

.containerText li:before {
  color: #0cc3eb;
  content: "●";
  padding-right: 15px;
  font-size: 20px;
}

.listTitle {
  font-family: Msc-500;
  font-size: 16px;
  line-height: 20px;
  color: #3c3d3e;
}

.darckBlock {
  background: url(../images/darkBackground.jpg) no-repeat;
  width: 100%;
  min-height: 357px;
}

.contentTitleWhite {
  font-family: Msc-500;
  font-size: 30px;
  line-height: 35px;
  color: #ffffff;
}

.listTitleWhite {
  font-family: Msc-500;
  font-size: 16px;
  line-height: 20px;
  color: #bec2c3;
}

.listInDarkBlock {
  display: flex;
  justify-content: space-between;
}

.listInDarkBlock ul:nth-child(2) {
  margin-left: 20px;
}

.listInDarkBlock ul li {
  padding: 0 0 26px 0;
}
/* /////////////////// ↑  ↑ /////////////////// */

/* /////////////////// ↓ White contacts container ↓ /////////////////// */
.whiteContactsContainer {
  display: flex;
  padding: 60px 0;
}

.contactsContainer {
  display: flex;
  margin: 16px 0 100px 0;
}

.contactsTitle {
  margin: 0 23px 0 45px;
  font-family: Msc-700;
  font-size: 18px;
  line-height: 20px;
  color: #3c3d3e;
}

.contactsBody {
  font-family: Msc-500;
  font-size: 18px;
  line-height: 21px;
  color: #626666;
}

.whomenWithLibra {
  position: absolute;
  bottom: 0;
  right: 376px;
}

body {
  position: relative;
}
/* /////////////////// ↑ White contacts container ↑ /////////////////// */

/* /////////////////// ↓ Footer ↓ /////////////////// */
footer {
  background: #181110;
}

.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 22px 0;
}

.footer p {
  width: 30%;
  font-family: Msc-300;
  font-size: 12px;
  line-height: 20px;
  color: #f9f9f9;
}

.footer a {
  width: 70%;
  font-family: Msc-300;
  font-size: 16px;
  line-height: 20px;
  text-decoration: underline;
  color: #f9f9f9;
  transition: 0.15s;
}

.footer a:hover {
  text-decoration: none;
}
/* /////////////////// ↑ Footer ↑ /////////////////// */

@media screen and (max-width: 1580px) {
  .bannerContainer {
    left: 750px;
  }
  .whomenWithLibra {
    right: 250px;
  }
}

@media screen and (max-width: 1490px) {
  .mainBanner {
    background: url(../images/banner_2.jpg) no-repeat;
  }
  .bannerContainer {
    left: 580px;
  }
  .whomenWithLibra {
    right: 100px;
  }
}

@media screen and (max-width: 1230px) {
  .bannerContainer {
    left: 500px;
  }
}