/*                          ---                          */
/* -------------------- Fonts MAIN --------------------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');
/* ----------------------------------------------------- */

/*                          ---                          */
/* ------------------ Dimensions MAIN ------------------ */
@media screen and (min-width: 1241px) {
  :root {
    /* -- Margins & Paddings */
    --margin:  100px;
    --padding: 100px;

    /* -- Max widths */
    --max-width:  1920px;
    --nav-height: 100px;
  }
}
@media screen and (max-width: 1240px) {
  :root {
    /* -- Margins & Paddings */
    --margin:  100px;
    --padding: 100px;

    /* -- Max widths */
    --max-width: 1920px;
    --nav-height: 100px;
  }
}
@media screen and (max-width: 900px) {
  :root {
    /* -- Margins & Paddings */
    --margin:  50px;
    --padding: 50px;

    /* -- Max widths */
    --max-width: 100%;
    --nav-height: 100px;
  }
}
@media screen and (max-width: 744px) {
  :root {
    /* -- Margins & Paddings */
    --margin:  35px;
    --padding: 35px;

    /* -- Max widths */
    --max-width: 100%;
    --nav-height: 100px;
  }
}
@media screen and (max-width: 428px) {
  :root {
    /* -- Margins & Paddings */
    --margin:  30px;
    --padding: 30px;

    /* -- Max widths */
    --max-width: 100%;
    --nav-height: 100px;
  }
}
@media only screen and (max-width: 320px) {
  :root {
    /* -- Margins & Paddings */
    --margin:  10px;
    --padding: 10px;

    /* -- Max widths */
    --max-width: 100%;
    --nav-height: 100px;
  }
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* -------------------- Colors MAIN -------------------- */
:root {
  --white:      #ffffff;
  --black:      #000000;
  --red:        #c01718;
  --autor-33d:  #2CA8A0;

  --primary:    #20201E;
  --secondary:  #F05A28;
  --gray:       #888888;
  --gray-light: #C6C4C3;
  --gray-dark:  #3b3b3b;

  --background-light: #ffffff;
  --background-dark: #000000;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ------------------- Settings MAIN ------------------- */
* {
  font-family: 'Oswald', sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}
*:focus {
  outline: none;
}
html {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  min-height: 100% !important;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}
body.disable-scrollbar {
  overflow: hidden;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
body.disable-scrollbar::-webkit-scrollbar {
  display: none;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}
h1, h2 {
  display: none;
}
a, img, strong, .logo-33d-1, .logo-33d-2, .text_stork, .text_pictures, .icon-adress, .icon-phone, .icon-mail, .photo, .detail-gallery div::after, svg.play-trailer-svg {
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
/* a[target=_blank] {
  background-color: yellow;
} */
a {
  text-decoration: none;
}
p, ul, li {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
img {
  border-style: none;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* --------------------- Body MAIN --------------------- */
body.light {
  background-color: var(--background-light);
}
body.dark {
  background-color: var(--background-dark);
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ------------------- Displays MAIN ------------------- */
.display-grid {
  display: grid;
}
.grid-v-align-top {}
.grid-v-align-center {}
.grid-v-align-bottom {}
.grid-h-align-top {}
.grid-h-align-center {}
.grid-h-align-bottom {}


.display-flex {
  display: flex;
}
/* -- xxx */
.f-direction-r {
  flex-direction: row;
}
.f-direction-r-reverse {
  flex-direction: row-reverse;
}
.f-direction-c {
  flex-direction: column;
}
.f-direction-c-reverse {
  flex-direction: column-reverse;
}
/* -- xxx */
.f-justify-space-between {
  justify-content: space-between;
}
/* -- align items */
.flex-v-align-top {
  align-items: flex-start;
}
.flex-v-align-center {
  align-items: center;
}
.flex-v-align-bottom {
  align-items: flex-end;
}
.flex-h-align-left {
  justify-content: flex-start;
}
.flex-h-align-center {
  justify-content: center;
}
.flex-h-align-right {
  justify-content: flex-end;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ----------------------- Widths ---------------------- */
.width-100 {
  width: 100px;
  border: 2px solid violet;
}
.width-150 {
  width: 150px;
}
.width-200 {
  width: 200px;
  border: 2px solid violet;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* --------------------- Animations -------------------- */
/* ----------------------------------------------------- */

/*                          ---                          */
/* --------------------- Navigation -------------------- */
nav {
  width: 100%;
  height: 100px;
  position: absolute;
  z-index: 11111111;
}
nav.background-color {
  background-color: var(--primary);
}
nav .nav-wrapper {
  width: -webkit-calc(100% - var(--margin) * 2);
  width: -moz-calc(100%- var(--margin) * 2);
  width: calc(100% - var(--margin) * 2);
  max-width: -webkit-calc(var(--max-width) - var(--margin) * 2);
  max-width: -moz-calc(var(--max-width)- var(--margin) * 2);
  max-width: calc(var(--max-width) - var(--margin) * 2);
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* -- Logo */
nav .logo-wrapper {
  width: 130px;
  height: 98px;
  display: block;
  position: relative;
}
nav .logo {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50px;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
nav .logo svg {
  width: 100%;
  height: auto;
  display: flex;
}
nav .logo svg .text_stork {
  fill: var(--white);
}
nav .logo svg .text_pictures {
  fill: var(--secondary);
}
nav .logo svg .orange {
  fill: var(--secondary);
}
nav .logo svg .gray {
  fill: var(--gray);
}
nav .logo svg .gray-light {
  fill: var(--gray-light);
}
nav .logo svg .white {
  fill: var(--white);
}
nav .logo svg:hover .text_stork {
  fill: var(--secondary);
}
nav .logo svg:hover .text_pictures {
  fill: var(--white);
}

/* -- Main menu */
nav .main-menu {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  border-bottom: 1px solid var(--gray);
  margin: 0 0 0 var(--margin);
}
nav .main-menu a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-light);
  text-transform: uppercase;
  padding: 10px 25px 10px 25px;
  position: relative;
}
nav .main-menu a:hover {
color: var(--white);
}
nav .main-menu a::after {
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
nav .main-menu a.active::after {
  content: '';
  width: 100%;
	width: -webkit-calc(100% - 50px);
	width: -moz-calc(100% - 50px);
	width: calc(100% - 50px);
  height: 3px;
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--secondary);
}
nav .main-menu a:last-child {
  padding: 10px 0 10px 25px;
}
nav .main-menu a.active:last-child::after {
	width: -webkit-calc(100% - 25px);
	width: -moz-calc(100% - 25px);
	width: calc(100% - 25px);
  margin-left: 25px;
  background-color: var(--secondary);
}

/* -- Phone button */
nav .phone-button {
  width: 60px;
  height: 60px;
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 20px 0;
}
nav .menu {
  --color: var(--white);
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  outline: none;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  -webkit-appearence: none;
  -webkit-tap-highlight-color: transparent;
}
nav .menu svg {
  width: 60px;
  height: 60px;
  top: 0px;
  left: 0px;
  stroke: var(--color);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: block;
}
nav .menu svg path {
  transition: stroke-dasharray var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s), stroke-dashoffset var(--duration, 0.85s) var(--easing, ease) var(--delay, 0s);
  stroke-dasharray: var(--array-1, 26px) var(--array-2, 100px);
  stroke-dashoffset: var(--offset, 126px);
  transform: translateZ(0);
}
nav .menu svg path:nth-child(2) {
  --duration: 0.7s;
  --easing: ease-in;
  --offset: 100px;
  --array-2: 74px;
}
nav .menu svg path:nth-child(3) {
  --offset: 133px;
  --array-2: 107px;
}
nav .menu.active svg path {
  --offset: 57px;
}
nav .menu.active svg path:nth-child(1), .menu.active svg path:nth-child(3) {
  --delay: 0.15s;
  --easing: cubic-bezier(0.2, 0.4, 0.2, 1.1);
}
nav .menu.active svg path:nth-child(2) {
  --duration: 0.4s;
  --offset: 2px;
  --array-1: 1px;
}
nav .menu.active svg path:nth-child(3) {
  --offset: 58px;
}










@media screen and (max-width: 1172px) {
  nav .phone-button {
    display: block;
  }

  nav .nav-wrapper {
    border-bottom: 1px solid var(--gray);
  }


  nav .main-menu {
    display: none;
  }
  nav .logo-wrapper {
    width: 90px;
    height: 68px;
  }
  nav .logo {
    top: 20px;
  }
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* --------------------- NAV Phone --------------------- */
#nav-phone {
  background-color: var(--primary);
  backdrop-filter: blur(10px) grayscale(100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  z-index: 11111;
  overflow-y: scroll;
  display: none;
}
#nav-phone .nav-phone-wrapper {
  margin: 125px 0 0 0;
  padding: 0 0 100px 0;
}
#nav-phone .nav-phone-items {
  display: flex;
  flex-direction: column;
}
@keyframes FadeInMenuItems {
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
#nav-phone .nav-phone-items a {
  width: 80%;
  margin: 15px auto 0 auto;
  animation: FadeInMenuItems 0.5s linear;
  animation-fill-mode: both;
  text-align: center;
  padding: 40px 0 10px 0;
  font-size: 1.5rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--white);
  background-color: var(--blue-dark);
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  border-radius: var(--border-radius);
  position: relative;
}
#nav-phone .nav-phone-items a::after {
  content: '';
  width: 30px;
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0px;
  background-color: var(--secondary);
}
#nav-phone .nav-phone-items a:first-child {
  margin: 0 auto 0 auto;
}
#nav-phone .nav-phone-items a:hover {
  color: var(--white);
  background-color: var(--blue-dark);
}
#nav-phone .nav-phone-items a:nth-child(1) { animation-delay: 0.1s }
#nav-phone .nav-phone-items a:nth-child(2) { animation-delay: 0.2s }
#nav-phone .nav-phone-items a:nth-child(3) { animation-delay: 0.3s }
#nav-phone .nav-phone-items a:nth-child(4) { animation-delay: 0.4s }
#nav-phone .nav-phone-items a:nth-child(5) { animation-delay: 0.5s }
#nav-phone .nav-phone-items a:nth-child(6) { animation-delay: 0.6s }
#nav-phone .nav-phone-items a:nth-child(7) { animation-delay: 0.7s }
#nav-phone .nav-phone-items a:nth-child(8) { animation-delay: 0.8s }
#nav-phone .nav-phone-items a:nth-child(9) { animation-delay: 0.9s }
#nav-phone .nav-phone-items a:nth-child(10) { animation-delay: 1.0s }
#nav-phone .nav-phone-items a:nth-child(11) { animation-delay: 1.1s }
#nav-phone .nav-phone-items a:nth-child(12) { animation-delay: 1.2s }
#nav-phone .nav-phone-items a:nth-child(13) { animation-delay: 1.3s }
/* ---------------------------------------------------- */

/*                          ---                          */
/* ----------------------- Header ---------------------- */
#header {
  width: 100%;
  height: 90%;
  min-height: 600px;
  max-height: 1000px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
#header::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -4px;
  display: block;
  background-color: var(--secondary);
}
#header::before {
  content: "";
  width: 100%;
	width: -webkit-calc(100% - var(--margin) * 2);
	width: -moz-calc(100%- var(--margin) * 2);
	width: calc(100% - var(--margin) * 2);
	max-width: -webkit-calc(var(--max-width) - var(--margin) * 2);
	max-width: -moz-calc(var(--max-width)- var(--margin) * 2);
	max-width: calc(var(--max-width) - var(--margin) * 2);
  height: 20px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--white);
  z-index: 1111;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
#header .header-wrapper {
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* -- Mouse */
#header section.mouse {
  position: absolute;
  left: -webkit-calc(var(--margin) / 2 - 12px);
  left: -moz-calc(var(--margin) / 2 - 12px);
  left: calc(var(--margin) / 2 - 12px);
  bottom: -webkit-calc(var(--margin) / 2 - 17px);
  bottom: -moz-calc(var(--margin) / 2 - 17px);
  bottom: calc(var(--margin) / 2 - 17px);
  z-index: 1111;
}
/* End presentation styling */
.mouse {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  position: relative;
  height: 36px;
  width: 22px;
}
.mouse:before,
.mouse:after {
  animation: mouse-wheel 1.5s ease-in-out infinite;
  background: #fff;
  border-radius: 100px;
  content: "";
  height: 4px;
  width: 4px;
  opacity: 0;
  position: absolute;
  left: 9px;
  top: 16px;
}
.mouse:after {
  animation-delay: 0.75s;
}
@keyframes mouse-wheel {
  0% {
    transform: translateY(-11px);
  }
  50% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    transform: translateY(11px);
  }
}

/* -- Socialne siete */
#header section.soc-networks {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: -webkit-calc(var(--margin) / 2 - 17px);
  right: -moz-calc(var(--margin) / 2 - 17px);
  right: calc(var(--margin) / 2 - 17px);
  bottom: -webkit-calc(var(--margin) / 2 - 17px);
  bottom: -moz-calc(var(--margin) / 2 - 17px);
  bottom: calc(var(--margin) / 2 - 17px);
  z-index: 1111;
  display: none;
}
#header section.soc-networks a {
  width: 34px;
  height: 34px;
  margin: 0 0 10px 0;
  display: block;
}
#header section.soc-networks a:last-child {
  margin: 0;
}
#header section.soc-networks svg {
  width: 100%;
  height: auto;
}
#header section.soc-networks svg .icon-facebook,
#header section.soc-networks svg .icon-instagram,
#header section.soc-networks svg .icon-LinkedIn-logo {
  fill: var(--gray-dark);
}
#header section.soc-networks svg .icon-facebook-bg,
#header section.soc-networks svg .icon-instagram-bg,
#header section.soc-networks svg .icon-LinkedIn-bg {
  fill: var(--gray);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
#header section.soc-networks svg:hover .icon-facebook-bg,
#header section.soc-networks svg:hover .icon-instagram-bg,
#header section.soc-networks svg:hover .icon-LinkedIn-bg {
  fill: var(--secondary);
}

/* -- Slider */
#header section.slider {
  width: 100%;
  position: absolute;
}

/* -- Content detail */
#header section.content-detail {
  max-width: var(--max-width);
  margin: auto;
  position: absolute;
  bottom: 0;
  width: 100%;
	height: -webkit-calc(100% - var(--nav-height));
	height: -moz-calc(100% - var(--nav-height));
	height: calc(100% - var(--nav-height));
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 100px;
  padding: 0 var(--padding);
}
#header section.content-detail .photo {
  width: 300px;
  border-radius: 6px;
}
#header section.content-detail .photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}
#header section.content-detail .container {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
#header section.content-detail .description-wrapper {
}
#header section.content-detail .description-header {
  margin: 0 0 50px 0;
}
#header section.content-detail .description-header h3 {
  font-size: 3rem;
  color: var(--white);
  margin: 0 0 15px 0;
}
#header section.content-detail .play-trailer {
  display: flex;
  align-items: center;
  min-height: 34px;
}
#header section.content-detail .play-trailer svg {
  width: 30px;
  height: 30px;
  fill: var(--white);
}
#header section.content-detail .play-trailer a {
  font-size: 1.5rem;
  font-family: 'Playfair Display', serif;
  color: var(--white);
  margin: 0 0 0 15px;
}
#header section.content-detail .play-trailer a:hover {
  color: var(--secondary);
}
#header section.content-detail .play-trailer:hover svg.play-trailer-svg {
  fill: var(--secondary);
}
#header section.content-detail .description-info {
  display: flex;
  flex-direction: column;
  color: var(--white);
  padding: 0 0 0 30px;
  position: relative;
}
#header section.content-detail .description-info::after {
  content: '';
  width: 2px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: var(--secondary);
}
#header section.content-detail .description-info div {
  display: flex;
  flex-direction: column;
  margin: 0 0 10px 0;
}
#header section.content-detail .description-info div:last-child {
  margin: 0 0 0 0;
}
#header section.content-detail .description-info div strong {
  font-size: 0.8rem;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--gray);
}
#header section.content-detail .description-info div span {
  font-size: 1rem;
  font-weight: 400;
}
#header section.content-detail .imdb-stats {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 10px 0 0 0;
}
#header section.content-detail .imdb-stats div {
  color: var(--white);
  font-size: 1rem;
  font-weight: 500;
}
#header section.content-detail .imdb-stats div span {
  color: var(--gray-light);
  font-size: 0.7rem;
  font-weight: 300;
}
#header section.content-detail .imdb-stats svg {
  width: auto;
  height: 20px;
  margin: 0 0 0 20px;
}

/* -- Detail gallery - zatial vypnute */
#header section.detail-gallery {
  position: absolute;
  bottom: -50px;
  right: 0;
  z-index: 111111;
  display: flex;
}
#header section.detail-gallery div {
  margin: 0 20px 0 0;
}
#header section.detail-gallery div:last-child {
  margin: 0;
}
#header section.detail-gallery div.photo {
  width: 275px;
  height: 175px;
  background-color: red;
  border-radius: 6px;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
#header section.detail-gallery div.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#header section.detail-gallery div.button {
  width: 60px;
  height: 175px;
  background-color: var(--secondary);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
#header section.detail-gallery div.button:hover {
  background-color: var(--primary);
}
#header section.detail-gallery div.button a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
#header section.detail-gallery div.button h4 {
  writing-mode: vertical-lr;
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--white);
  text-transform: uppercase;
}
#header section.detail-gallery div.button svg {
  width: 34px;
  height: 34px;
  fill: var(--white);
  margin: 0 0 20px 0;
}

/* -- Content detail */
#header section.detail-photo {
  position: absolute;
  width: 100%;
	height: 100%;
  z-index: -1;
  position: relative;
}
#header section.detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#header section.detail-photo::after {
  content: '';
  width: 100%;
	height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: 11111;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ------------------------ Main ----------------------- */
main section {
  padding: var(--padding) var(--padding);
  position: relative;
}
main section.first::after {
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  top: 2px;
  display: block;
  background-color: var(--secondary);
  z-index: 111;
}
main section.first::before {
  content: "";
  width: 100%;
	width: -webkit-calc(100% - var(--margin) * 2);
	width: -moz-calc(100% - var(--margin) * 2);
	width: calc(100% - var(--margin) * 2);
	max-width: -webkit-calc(var(--max-width) - var(--margin) * 2);
	max-width: -moz-calc(var(--max-width)- var(--margin) * 2);
	max-width: calc(var(--max-width) - var(--margin) * 2);
  height: 6px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0px;
  margin: auto;
  display: block;
  background-color: var(--white);
  z-index: 1111;
}
main section.dark {
  background-color: var(--primary);
}
main section header {
  max-width: -webkit-calc(var(--max-width) - var(--margin) * 2);
  max-width: -moz-calc(var(--max-width)- var(--margin) * 2);
  max-width: calc(var(--max-width) - var(--margin) * 2);
  margin: auto;
  text-transform: uppercase;
  text-align: center;
  position: relative;
}
main section header::after {
  content: '';
  width: 36px;
  height: 4px;
  background-color: var(--secondary);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -15px;
  margin-left: auto;
  margin-right: auto;
}
main section.light {
}
main section:nth-child(2) {
  padding: 70px var(--padding) var(--padding) var(--padding);
}
main section.first-2 {
  padding: 150px var(--padding) var(--padding) var(--padding);
}
main section header h3 {
  font-size: 2rem;
  color: var(--black);
}
main section header h4 {
  font-size: 1rem;
  font-weight: 400;
  color: var(--secondary);
}
main section.dark {
  color: var(--white);
  background-color: var(--primary);
}
main section.dark h3 {
  color: var(--white);
}
main section.dark h4 {
  color: var(--secondary);
}
main section article {
  max-width: -webkit-calc(var(--max-width) - var(--margin) * 2);
  max-width: -moz-calc(var(--max-width)- var(--margin) * 2);
  max-width: calc(var(--max-width) - var(--margin) * 2);
  margin: auto;
  margin: 55px auto 0 auto;
}
main .text-orange {
  color: var(--secondary);
}
main .text-uppercase {
  text-transform: uppercase;
}
main .bold {
  font-weight: 500;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* --------------------- Projects ---------------------- */
main .projects {
}
main .projects .container {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
main .projects .container .item {
  margin: 1em;
  text-align: center;
  text-decoration: none;
}
main .projects .container .item .poster {
  width: 185px;
  height: 262px;
  background-position: center;
  background-size: cover;
  margin-bottom: .5em;
  box-shadow: 0 10px 17px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border-radius: 4px;
}
main .projects .container .item .poster img {
  width: 100%;
  height: auto;
  object-fit: cover;
  }
main .projects .container .item p {
  font-size: 1rem;
  color: var(--primary);
  margin: 25px 0 0 0;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
main .projects .container .item:hover p {
  color: var(--secondary);
}
main .projects .mtt {
	position: absolute;
	bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
	color: #999;
	text-decoration: none;
}
main .projects .mtt span {
  color: #e74c3c;
}
main .projects .mtt:hover {
	color: #666;
}
main .projects .mtt:hover span {
	color: #c0392b;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ----------------- Upcoming projects ----------------- */
main .upcoming-projects {
  max-width: 800px;
}
main .upcoming-projects .container {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
main .upcoming-projects .wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
main .upcoming-projects .description {
  width: 100%;
  height: 100%;
  flex: 1;
  margin: 0 var(--margin) 0 0;
}
main .upcoming-projects .description h5 {
  width: 100%;
  font-size: 1.75rem;
  text-transform: uppercase;
  position: relative;
  margin: 0 0 50px 0;
}
main .upcoming-projects .description h5::after {
  content: '';
  width: 30px;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -20px;
  background-color: var(--secondary);
}
main .upcoming-projects .description h5 a {
  color: var(--white);
}
main .upcoming-projects .description p {
  color: var(--gray);
  font-weight: 300;
}
main .upcoming-projects .photo {
  width: 250px;
  border-radius: 6px;
}
main .upcoming-projects .photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ----------------------- Detail ---------------------- */

/* ----------------------------------------------------- */

/*                          ---                          */
/* ------------------- Detail Gallery ------------------ */
main .detail-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
main .detail-gallery div {
  width: 325px;
  height: 225px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.25);
  position: relative;
}
main .detail-gallery div::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  border: 3px solid transparent;
}
main .detail-gallery div:hover::after {
  border: 3px solid var(--secondary);
}
main .detail-gallery div img {
  width: auto;
  height: 100%;
  object-fit: cover;
}
main .detail-gallery div:hover img {
  transform: scale(1.1) rotate(2.5deg);
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ------------------------ xxx ------------------------ */
/* ----------------------------------------------------- */

/*                          ---                          */
/* ----------------------- Teams ----------------------- */
main .teams {
  display: flex;
  justify-content: center;
}
main .teams > div {
	width: -webkit-calc(50% - (var(--margin) / 2));
	width: -moz-calc(50% - (var(--margin) / 2));
	width: calc(50% - (var(--margin) / 2));
  max-width: 500px;
  display: flex;
  flex-direction: column;
}
main .teams > div:first-child {
  margin: 0 50px 0 0;
}
main .teams > div:last-child {
  margin: 0 0 0 50px;
}
main .teams .header {
  display: flex;
  flex-direction: row;
}
main .teams .media {
  display: flex;
  flex-direction: row;
}
main .teams .info {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 0 0 50px;
}
main .teams .name h5 {
  font-size: 1.75rem;
  position: relative;
  margin: 0 0 45px 0;
  font-weight: 200;
}
main .teams .name h5 strong {
  text-transform: uppercase;
  font-weight: 600;
}
main .teams .name h5::after {
  content: '';
  width: 50px;
  height: 2px;
  position: absolute;
  bottom: -15px;
  left: 0;
  background-color: var(--secondary);
}

/* -- Social media */
main .teams .soc-media {
  width: 150px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
main .teams .soc-media a {
  display: flex;
  margin: 0 10px 0 0;
}
main .teams .soc-media a:last-child {
  margin: 0 0 0 0;
}
main .teams .soc-media a span {
  display: none;
}
main .teams .soc-media svg {
  width: 100%;
  height: auto;
}
main .teams .soc-media a.icon-imdb-size {
  width: 52px;
  height: 26px;
}
main .teams .soc-media a.icon-linkedin-size {
  width: 26px;
  height: 26px;
}
main .teams .soc-media svg .icon-imdb-bg {
  fill: #F5C518;
}
main .teams .soc-media svg .icon-imdb-text {
  fill: #1D1D1B;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
main .teams .soc-media svg .icon-linkedin-logo {
  fill: var(--primary);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
main .teams .soc-media svg .icon-linkedin-bg {
  fill: var(--gray);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
main .teams .soc-media svg:hover .icon-linkedin-bg {
  fill: #0072b1;
}
main .teams .soc-media svg:hover .icon-linkedin-logo,
main .teams .soc-media svg:hover .icon-imdb-text {
  fill: var(--white);
}
main .teams .description {
  margin: 50px 0 0 0;
}
main .teams .description p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  color: var(--gray);
  text-align: justify;
}
main .teams .photo {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--gray-dark);
}
main .teams .photo:hover {
  border: 1px solid var(--secondary);
}
main .teams .photo img {
  width: 280px;
  height: 280px;
  object-fit: cover;
  display: block;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ----------------------- Blogs ----------------------- */
main .blogs {
  border: 1px solid cyan;
  display: flex;
}
main .blogs > div {
  border: 1px solid cyan;
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* ---------------------- Footer ----------------------- */
footer {
  background-color: var(--primary);
}
footer .wrapper {
  max-width: var(--max-width);
  padding: 25px var(--padding);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* border-top: 2px solid var(--secondary); */
}
footer .adress-navigation {
  color: white;
  margin: 0 0 5px 0;
  padding: 0 0 25px 0;
  border-bottom: 2px solid var(--gray);
  display: flex;
  flex-direction: row;
}
footer .logo-adress {
  width: 100%;
  display: flex;
}

/* -- Bottom  logo */
footer .logo {
  width: 86px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  margin: 0 50px 0 0;
}
footer .logo svg {
  width: 86px;
  height: auto;
  display: flex;
}
footer .logo svg .text_stork {
  fill: var(--white);
}
footer .logo svg .text_pictures {
  fill: var(--secondary);
}
footer .logo svg .orange {
  fill: var(--secondary);
}
footer .logo svg .gray {
  fill: var(--gray);
}
footer .logo svg .gray-light {
  fill: var(--gray-light);
}
footer .logo svg .white {
  fill: var(--white);
}
footer .logo svg:hover .text_stork {
  fill: var(--secondary);
}
footer .logo svg:hover .text_pictures {
  fill: var(--white);
}

/* -- Bottom  contact */
footer .adress {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
footer .row-adress {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
footer .row-adress:first-child {
  margin: 0 50px 0 0;
}
footer .adress h3 {
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
}
footer .adress h3 span {
  font-size: 1rem;
  font-weight: 200;
  text-transform: lowercase;
}
footer .adress h3 a {
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--white);
}
footer .adress h3 a:hover {
  color: var(--secondary);
}
footer .adress-row {
  display: flex;
  flex-direction: row;
  margin: 10px 0 0 0;
}
footer .adress-row a {
  font-size: 0.8rem;
  font-weight: 300;
  color: var(--gray);
  display: flex;
  align-items: center;
  margin: 0 25px 0 0;
}
footer .adress-row a:last-child {
  margin: 0 0 0 0;
}
footer .adress-row a:hover {
  color: var(--secondary);
}
footer .adress-row svg.icon-adress,
footer .adress-row svg.icon-phone,
footer .adress-row svg.icon-mail {
  height: auto;
  margin: 0 10px 0 0;
  fill: var(--secondary);
}
footer .adress-row svg.icon-adress {
  width: 18px;
}
footer .adress-row svg.icon-phone {
  width: 16px;
}
footer .adress-row svg.icon-mail {
  width: 16px;
}
footer .adress-row a:hover svg.icon-adress,
footer .adress-row a:hover svg.icon-phone,
footer .adress-row a:hover svg.icon-mail {
  fill: var(--white);
}

/* -- Bottom navigation */
footer .navigation {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  display: none;
}
footer .navigation a {
  color: var(--gray);
  font-size: 1rem;
  font-weight: 400;
  padding: 0 28px;
  text-transform: uppercase;
  position: relative;
}
footer .navigation a:last-child {
  padding: 0 0 0 28px;
}
footer .navigation a::after {
  content: '';
  width: 6px;
  height: 6px;
  background-color: var(--secondary);
  position: absolute;
  right: -3px;
  bottom: 8px;
  margin-left: auto;
  margin-right: auto;
}
footer .navigation a:last-child::after {
  width: 0px;
  height: 0px;
}
footer .navigation a:hover {
  color: var(--secondary);
}

/* -- Bottom wrapper */
footer .bottom-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* -- Social media */
footer .soc-icons {
  width: 150px;
  display: flex;
  align-items: center;
}
footer .wrapper .soc-icon {
  margin: 0 10px 0 0;
  display: none;
}
footer .wrapper .soc-icon:last-child {
  margin: 0 0 0 0;
}
footer .wrapper .soc-icon a {
  width: 26px;
  height: 26px;
  display: block;
}
footer .wrapper .soc-icon a span {
  display: none;
}
footer .wrapper .soc-icon svg {
  width: 100%;
  height: auto;
}
footer .wrapper .soc-icon svg .icon-facebook,
footer .wrapper .soc-icon svg .icon-instagram-bg,
footer .wrapper .soc-icon svg .icon-LinkedIn-bg {
  fill: var(--gray);
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
footer .wrapper .soc-icon svg:hover .icon-facebook,
footer .wrapper .soc-icon svg:hover .icon-instagram-bg,
footer .wrapper .soc-icon svg:hover .icon-LinkedIn-bg {
  fill: var(--secondary);
}

/* -- Copyright */
footer .copyright {
  font-size: 0.75rem;
  display: flex;
  align-items: center;
}
footer .copyright strong {
  text-transform: uppercase;
}
footer .copyright,
footer .copyright a {
  color: var(--gray);
}
footer .copyright a strong {
  color: var(--gray-light);
}
footer .copyright a:hover,
footer .copyright a:hover strong {
  color: var(--secondary);
}

/* -- Autor */
footer .autor {
  width: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: flex-end;
  color: var(--gray);
  font-size: 0.75rem;
  text-transform: uppercase;
}
footer .autor a {
  width: 34px;
  height: 100%;
  margin: 0 0 0 10px;
  display: flex;
  align-items: center;
}
footer .autor span {
  display: none;
}
footer .autor svg {
  width: 48px;
  height: 40px;
  display: block;
}
footer .autor svg .logo-33d-1 {
  fill: var(--gray);
}
footer .autor svg .logo-33d-2 {
  fill: var(--gray);
}
footer .autor svg:hover .logo-33d-1 {
  fill: var(--white);
}
footer .autor svg:hover .logo-33d-2 {
  fill: var(--autor-33d);
}
/* ----------------------------------------------------- */

/*                          ---                          */
/* --------------------- Responsive -------------------- */
@media only screen and (max-height: 550px) and (orientation: landscape) {}
@media screen and (min-width: 1281px) {
}
@media screen and (max-width: 1280px) {
  main section article {
    max-width: var(--max-width);
  }
  main .teams {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  main .teams > div {
  	width: 100%;
    display: flex;
    flex-direction: column;
  }
  main .teams > div:first-child {
    margin: 0 0 0 0;
  }
  main .teams > div:last-child {
    margin: 0 0 0 0;
  }
  main .teams .header {
    justify-content: center;
  }
  main .teams > div:last-child {
    margin: 75px 0 0 0;
  }
  footer .adress-navigation {
    flex-direction: column;
  }
  footer .logo-adress {
    width: auto;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  footer .adress {
    width: auto;
  }
  footer .navigation {
    border-top: 1px solid var(--gray-dark);
    margin: 25px 0 0 0;
    padding: 25px 0 0 0;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 900px) {
  #header section.mouse {
    display: none;
  }
  #header section.soc-networks {
    right: var(--margin);
    flex-direction: row;
    bottom: 30px;
  }
  #header section.soc-networks a {
    width: 34px;
    height: 34px;
    margin: 0 10px 0 0;
    display: block;
  }
  footer .row-adress {
    justify-content: flex-start;
  }
  footer .adress h3 {
    padding: 0 0 10px 0;
  }
  footer .adress-row {
    flex-direction: column;
  }
  footer .adress-row a {
    margin: 0 0 20px 0;
  }
  footer .logo-adress {
    display: flex;
    align-items: flex-start;
  }
  footer .adress {
    flex: 1;
  }
}
@media screen and (max-width: 830px) {
  #header.header-detail {
    height: 1175px;
    max-height: none;
  }
  #header section.content-detail {
    gap: 0;
    flex-direction: column;
  }
  #header section.content-detail .photo-wrapper {
    margin: 50px 0;
  }
  main section:nth-child(2) {
    padding: 20px var(--padding) var(--padding) var(--padding);
  }
}
@media screen and (max-width: 640px) {
  main .upcoming-projects .wrapper {
    flex-direction: column-reverse;
    padding: 0 var(--padding);
  }
  main .upcoming-projects .description h5 {
    margin: 40px 0 35px 0;
    text-align: center;
  }
  main .upcoming-projects .description h5::after {
    content: '';
    width: 30px;
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: -20px;
    background-color: var(--secondary);
  }
  main .upcoming-projects .description {
    margin: 0 0 0 0;
  }
  main .upcoming-projects .description p {
    text-align: center;
  }
  main .teams > div:last-child {
    margin: 75px 0 0 0;
  }
  main .teams .info {
    margin: 30px 0 0 0;
    text-align: center;
  }
  main .teams .name h5::after {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }
  main .teams .soc-media {
    width: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  main .teams .description {
    margin: 30px 0 0 0;
  }
  main .teams .header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  footer .logo {
    width: 70px;
    margin: 0 30px 0 0;
  }
  footer .row-adress:first-child {
    margin: 0 30px 0 0;
  }
}
@media screen and (max-width: 548px) {
  main .projects .container .item .poster {
    width: 275px;
    height: 390px;
  }
  main .projects .container .item p {
    font-size: 1.5rem;
    margin: 15px 0 25px 0;
  }
  footer .logo {
    width: 100px;
    margin: 0 0 30px 0;
  }
  footer .logo-adress {
    flex-direction: column;
    display: flex;
    align-items: center;
  }
  footer .adress {
    width: 100%;
    flex-direction: column;
  }
  footer .row-adress:first-child {
    margin: 0 20px 40px 0;
  }
  footer .navigation {
    flex-direction: column;
  }
  footer .navigation a {
    padding: 20px 0;
  }
  footer .navigation a:last-child {
    padding: 20px 0;
  }
  footer .navigation a::after {
    right: 0;
    left: 0;
    bottom: -4px;
  }
  footer .bottom-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
  }
  footer .soc-icons {
    width: auto;
    margin: 5px 0 30px 0;
  }
  footer .autor {
    width: auto;
    margin: 25px 0 0 0;
  }
}
@media only screen and (max-width: 420px) {
}
@media only screen and (max-width: 365px) {
  main .teams .photo {
    width: 260px;
    height: 260px;
  }
  main .teams .photo img {
    width: 240px;
    height: 240px;
  }
}
/* ----------------------------------------------------- */