@font-face {
  font-family: 'Proxima Nova123';
  src: url("../fonts/ProximaNova-Reg.eot");
  src: url("../fonts/ProximaNova-Reg.eot?#iefix") format("embedded-opentype"), url("../fonts/ProximaNova-Reg.woff2") format("woff2"), url("../fonts/ProximaNova-Reg.woff") format("woff"), url("../fonts/ProximaNova-Reg.ttf") format("truetype"), url("../fonts/ProximaNova-Reg.svg#Proxima Nova") format("svg");
}

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

body {
  background: #000;
  font-family: mundial, sans-serif;
  color: #FFF;
}

::selection {
  color: red;
  background: yellow;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  color: #12AADA;
}

h1 {
  color: #FFF;
}

h2 {
  font-style: normal;
  font-weight: 300;
  line-height: 58px;
  font-size: 3rem;
}

h3 {
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

h3 > a {
  font-size: 2.5rem;
}

h4 {
  font-size: 2rem;
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.25rem;
}

a {
  color: #12AADA;
  font-style: normal;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.5rem;
  text-decoration: none;
}

a:hover {
  color: #FFF;
}

p {
  font-size: 1.25rem;
}

.position-relative {
  position: relative;
}

.content {
  float: left;
  width: 80%;
}

.sidebar {
  float: left;
  width: 20%;
}

.blog-list {
  display: flex;
  flex-wrap: wrap;
}

.blog-list header {
  display: block;
  width: 100%;
  margin-bottom: 4rem;
}

.post-item {
  width: calc(50% - 1.5rem);
  margin-bottom: 4rem;
  border-bottom: 1px solid;
  padding-bottom: 2rem;
}

.post-item:nth-child(even) {
  margin-right: 3rem;
}

.post-item.post-detail {
  width: 100%;
}

@media (max-width: 768px) {
  .post-item {
    width: 100%;
  }
}

.blog-tag {
  background: #000;
  padding: 0.5rem 1rem;
  margin: 1.5rem 1rem 1.5rem 0;
  display: block;
  width: fit-content;
  border-radius: 25px;
  font-size: .8rem;
  border: 1px solid #FFF;
  color: #FFF;
}

.blog-tag:hover {
  color: #12AADA;
  border-color: #12AADA;
}

.post-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.post-detail.tags {
  display: block;
}

.template-vector {
  position: absolute;
  z-index: 0;
}

.template-vector.top {
  position: absolute;
  top: -115px;
}

.template-vector.bottom {
  bottom: 0;
}

.main-shadow {
  box-shadow: 40px 80px 80px rgba(62, 66, 81, 0.3);
}

.main-header .navbar {
  background: #000;
  padding: .5rem 0;
}

@media screen and (max-width: 992px) {
  .main-header .navbar {
    position: absolute;
    z-index: 1000;
  }
}

.main-header .navbar-dark .nav-link {
  color: #12AADA;
}

@media screen and (max-width: 992px) {
  .main-header .navbar-collapse {
    padding: 0.5rem 0;
  }
}

.main-logo {
  position: relative;
  width: 296px;
}

@media screen and (max-width: 992px) {
  .main-logo {
    width: 50%;
    margin: 0 auto;
    display: block;
  }
}

.main-logo-link {
  display: block;
}

.main-logo .logo {
  width: 100%;
}

.main-logo-big {
  position: absolute;
  width: 70%;
  max-width: 798px;
  left: 15%;
  top: 85px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 25px;
  padding: 15px;
}

@media screen and (max-width: 992px) {
  .main-logo-big {
    top: 70px;
  }
}

.main-footer {
  background: #393D4C;
  color: #FFF;
  position: relative;
}

.main-footer.article .main-footer-legal {
  background: #FFF;
}

.main-footer-vector {
  top: 3rem;
  left: 0;
  position: absolute;
}

.main-footer-top {
  width: 86%;
  margin: 0 auto;
  padding: 5rem 0;
}

.main-footer-quote {
  width: 100%;
  max-width: 535px;
  margin: 0;
}

.main-footer-bottom {
  width: 86%;
  margin: 0 auto;
  padding: 5rem 0 7rem;
}

.main-footer-bottom .link-list {
  margin-right: 6%;
}

.main-footer-bottom .link-list-title {
  font-size: 1.25rem;
}

.main-footer-bottom .link-list-list {
  padding: 0;
  margin: 0;
}

.main-footer-bottom .link-list-list-cta {
  color: #FFF;
}

.main-footer-bottom .main-logo {
  position: absolute;
  right: 0;
  bottom: 1rem;
}

.main-footer-legal {
  background: #FFF;
  position: relative;
  padding: .8rem 7%;
}

.main-footer-legal .link-list-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-footer-legal .link-list-list-item {
  margin-right: 1rem;
}

.main-footer-legal .link-list-list-cta {
  color: #393D4C;
}

.main-footer-legal-copy-right {
  position: absolute;
  right: 7%;
  margin: 0;
  padding: 0;
  top: 1.1rem;
  color: #393D4C;
}

.teaser {
  position: relative;
  width: 100%;
}

.teaser.hero {
  width: 100%;
  max-width: 1250px;
  padding: 15rem 0;
}

.teaser.hero .teaser-content {
  position: absolute;
  top: 6rem;
  left: 3%;
  color: #FFF;
  width: 100%;
  max-width: 520px;
}

.teaser.hero .teaser-image-container {
  width: 100%;
}

.teaser.hero .teaser-description {
  margin: 0 0 2rem 0;
}

.teaser.hero .teaser-link {
  background: none;
  color: #FFF;
  border-radius: 30px;
  border: 1px solid #FFF;
  padding: 0.5rem 10%;
}

.teaser.position-image .teaser-image-container, .teaser.position-image .teaser-content {
  width: 50%;
}

@media (max-width: 768px) {
  .teaser.position-image .teaser-image-container, .teaser.position-image .teaser-content {
    width: 100%;
  }
}

.teaser.position-image .teaser-image {
  width: 100%;
}

.teaser.position-image .teaser-content {
  padding: 3rem 4%;
}

.teaser.position-image .teaser-title {
  color: #12AADA;
}

.teaser.position-image .teaser-description {
  margin: 0 0 2rem 0;
}

.teaser.position-image .teaser-link {
  background: none;
  color: #12AADA;
  border-radius: 30px;
  border: 1px solid #12AADA;
  padding: 0.5rem 10%;
}

.teaser.slider {
  color: #393D4C;
  padding: 2rem 3%;
}

.teaser.slider .teaser-title {
  font-style: normal;
  font-weight: 300;
  font-size: 2.12rem;
  line-height: 2.37rem;
  color: #393D4C;
}

.teaser.slider .teaser-image-container {
  margin-bottom: 1rem;
}

.teaser.slider .teaser-description {
  padding: 0 27% 2rem 0;
}

.teaser.slider:hover {
  background: #393D4C;
}

.teaser.slider:hover .teaser-title {
  color: #12AADA;
}

.teaser.slider:hover .teaser-description {
  color: #FFF;
}

.teaser.gradient {
  width: 100%;
}

.teaser.gradient .teaser-image-container {
  width: 122px;
  margin: 0 0 2rem 0;
}

.teaser.gradient .teaser-title {
  color: #12AADA;
  font-size: 1.8rem;
  font-weight: normal;
  margin: 0 0 1rem 0;
}

.teaser.grid {
  max-width: 565px;
  background: #000;
  padding: 3rem 7% 9rem;
}

.teaser.grid .teaser-title {
  color: #12AADA;
}

.teaser.grid .teaser-image-container {
  margin: 0 0 1rem;
}

.teaser.highlight {
  color: #FFF;
  width: 100%;
  max-width: 555px;
}

.teaser.highlight .teaser-pre-title {
  font-style: normal;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 2.25rem;
}

.teaser.highlight .teaser-title {
  font-size: 4rem;
  font-weight: 300;
  line-height: 4.5rem;
  margin-bottom: 0.75rem;
}

.teaser.highlight .teaser-description {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 2rem;
  margin-bottom: 4rem;
  font-style: normal;
}

.teaser.highlight .teaser-link {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5rem;
  color: #FFF;
  border: 2px solid #FFF;
  border-radius: 2rem;
  padding: .5rem 2rem;
}

.teaser.highlight.light {
  max-width: 1132px;
}

.teaser.highlight.light .teaser-title {
  color: #FFF;
  font-style: normal;
  font-weight: 400;
  font-size: 4rem;
  line-height: 4.5rem;
}

.teaser.highlight.light .teaser-description {
  font-style: normal;
  font-weight: 400;
  font-size: 3rem;
  line-height: 3.5rem;
}

.teaser.linear-mischka {
  background: linear-gradient(180deg, #E2E2EA -81.64%, #F6F6F9 94.58%);
}

.teaser.two-items-group {
  width: 50%;
}

.teaser.three-items-group {
  width: 33.33%;
}

.teaser.four-items-group {
  width: 24.49%;
}

.teaser.title-color-cerulean .teaser-title {
  color: #12AADA;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

@media screen and (max-width: 992px) {
  .container {
    padding: 0 2%;
  }
}

.button-border {
  border-style: solid;
  border-width: 2px;
  padding: .5rem 3rem;
  border-radius: 30px;
}

.button-bright {
  border-color: #12AADA;
  color: #12AADA;
}

.button-bright:hover {
  border-color: #393D4C;
  color: #393D4C;
}

.button-dark {
  border-color: #393D4C;
  color: #393D4C;
}

.button-dark:hover {
  border-color: #12AADA;
  color: #12AADA;
}

.title.role {
  position: relative;
  max-width: 569px;
  height: 6rem;
  color: #12AADA;
}

.title.role::before {
  border-right: 15px solid #12AADA;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  width: 0;
  height: 0;
  content: "";
  display: block;
  top: 11px;
  position: absolute;
  left: -28px;
}

.link-list {
  justify-content: center;
}

.link-list-item {
  border: 0.5px dotted #FFF;
  justify-items: center;
  align-items: center;
}