/**
 *  ---- Media queries ----
 */
@font-face {
  font-family: "Circular";
  src: url("/fonts/CircularStd-Medium.otf"); }

.heading {
  font-family: "Circular", serif;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: 0.04em;
  font-weight: 500; }
  @media screen and (min-width: 768px) {
    .heading {
      font-size: 46px;
      line-height: 46px; } }
  @media screen and (min-width: 1366px) {
    .heading {
      font-size: 54px;
      line-height: 60px; } }
  @media screen and (min-width: 1500px) {
    .heading {
      font-size: 64px;
      line-height: 68px; } }

.text--invert,
.heading--invert {
  color: #fff; }

/**
 *  ---- Media queries ----
 */
@-webkit-keyframes flyDown {
  from {
    top: -500px; }
  to {
    top: 60px; } }
@keyframes flyDown {
  from {
    top: -500px; }
  to {
    top: 60px; } }

@-webkit-keyframes flyUp {
  from {
    top: 60px; }
  to {
    top: -500px; } }

@keyframes flyUp {
  from {
    top: 60px; }
  to {
    top: -500px; } }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation: fadeIn 500ms;
  animation: fadeIn 500ms; }

@-webkit-keyframes animate-terrass-first {
  0% {
    opacity: 0;
    margin-left: 0em; }
  to {
    margin-left: -1em; } }

@keyframes animate-terrass-first {
  0% {
    opacity: 0;
    margin-left: 0em; }
  to {
    margin-left: -1em; } }

@-webkit-keyframes animate-terrass-last {
  0% {
    opacity: 0;
    margin-left: 0em; }
  to {
    margin-left: 1em; } }

@keyframes animate-terrass-last {
  0% {
    opacity: 0;
    margin-left: 0em; }
  to {
    margin-left: 1em; } }

.animate-terrass {
  margin: 0px;
  margin-left: 1em;
  margin-bottom: 1em; }
  .animate-terrass span {
    margin-left: -1em;
    display: block; }
  .animate-terrass span:nth-child(1) {
    margin-left: -1em;
    -webkit-animation: animate-terrass-first 800ms;
    animation: animate-terrass-first 800ms; }
  .animate-terrass span:nth-child(2) {
    margin-left: 0em;
    -webkit-animation: fadeIn 800ms;
    animation: fadeIn 800ms; }
  .animate-terrass span:nth-child(3) {
    margin-left: 1em;
    -webkit-animation: animate-terrass-last 800ms;
    animation: animate-terrass-last 800ms; }

.text--shadow {
  text-shadow: rgba(0, 0, 0, 0.8) 2px 2px 10px; }

/* === GLOBAL STYLE === */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  font-family: "Circular", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #ededed;
  background: #fff; }
  @media screen and (min-width: 768px) {
    body {
      font-size: 18px;
      line-height: 24px; } }

img {
  max-width: 100% !important;
  height: auto; }

a:hover {
  text-decoration: none !important; }

/* === UTILITY CLASSES === */
@media screen and (min-width: 768px) {
  .app {
    padding-bottom: 50px; } }

@media screen and (min-width: 1024px) {
  .app {
    padding-bottom: 0px; } }

.app__main {
  background-color: #242423;
  margin: 0px auto;
  position: relative; }

@media screen and (min-width: 768px) {
  .auto-adjust-columns {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

@media screen and (min-width: 768px) {
  .auto-adjust-columns > div {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%; } }

/* === OVERWRITES OF LIBS === */
/* Bootstrap utility class modifier, used for proper alignment  */
.container.container--padded {
  padding-left: 22px;
  padding-right: 22px; }

/* Bootstrap utility class - provides non-gutter rows */
.row.no-gutter {
  margin-right: -11px;
  margin-left: -11px;
  margin-left: 0;
  margin-right: 0; }
  @media screen and (min-width: 768px) {
    .row.no-gutter {
      margin-left: 0;
      margin-right: 0; } }

.row.no-gutter > [class*='col-']:not(:first-child),
.row.no-gutter > [class*='col-']:not(:last-child) {
  padding-right: 0;
  padding-left: 0; }

.ytplayer-container {
  opacity: 0; }

.loaded .ytplayer-container {
  -webkit-animation: fadeIn 1500ms;
  animation: fadeIn 1500ms;
  opacity: 1; }

.unfinished {
  color: #000;
  border: 1px solid red;
  z-index: 1;
  opacity: 0.2; }

.video-fallback {
  background-size: cover; }

@media screen and (min-width: 1024px) {
  .swiper-wrapper {
    height: 100vh; } }