/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

 @font-face {
  font-family: 'Montserrat';
  src: url('../fnt/Montserrat-LightItalic.woff2') format('woff2'),
      url('../fnt/Montserrat-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/Montserrat-Light.woff2') format('woff2'),
      url('../fnt/Montserrat-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/*
@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/Montserrat-LightItalic.woff2') format('woff2'),
      url('../fnt/Montserrat-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/Montserrat-Italic.woff2') format('woff2'),
      url('../fnt/Montserrat-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/Montserrat-BoldItalic.woff2') format('woff2'),
      url('../fnt/Montserrat-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/Montserrat-Regular.woff2') format('woff2'),
      url('../fnt/Montserrat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/Montserrat-Bold.woff2') format('woff2'),
      url('../fnt/Montserrat-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/Montserrat-Light.woff2') format('woff2'),
      url('../fnt/Montserrat-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-SemiBold.woff2') format('woff2'),
      url('subset-Montserrat-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-ExtraBold.woff2') format('woff2'),
      url('subset-Montserrat-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-BoldItalic.woff2') format('woff2'),
      url('subset-Montserrat-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-Medium.woff2') format('woff2'),
      url('subset-Montserrat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-Bold.woff2') format('woff2'),
      url('subset-Montserrat-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-ThinItalic.woff2') format('woff2'),
      url('subset-Montserrat-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-Thin.woff2') format('woff2'),
      url('subset-Montserrat-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-ExtraLight.woff2') format('woff2'),
      url('subset-Montserrat-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-SemiBoldItalic.woff2') format('woff2'),
      url('subset-Montserrat-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
/*
@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-Light.woff2') format('woff2'),
      url('subset-Montserrat-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-ExtraLightItalic.woff2') format('woff2'),
      url('subset-Montserrat-ExtraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-Regular.woff2') format('woff2'),
      url('subset-Montserrat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-ExtraBoldItalic.woff2') format('woff2'),
      url('subset-Montserrat-ExtraBoldItalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-BlackItalic.woff2') format('woff2'),
      url('subset-Montserrat-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-Black.woff2') format('woff2'),
      url('subset-Montserrat-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-Italic.woff2') format('woff2'),
      url('subset-Montserrat-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
/*
@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-LightItalic.woff2') format('woff2'),
      url('subset-Montserrat-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
*/
@font-face {
  font-family: 'Montserrat';
  src: url('../fnt/subset-Montserrat-MediumItalic.woff2') format('woff2'),
      url('subset-Montserrat-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}



/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */

html {
 color: #222;
 font-size: 1em;
 line-height: 1.4;
}

/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/

::-moz-selection {
 background: #b3d4fc;
 text-shadow: none;
}

::selection {
 background: #b3d4fc;
 text-shadow: none;
}

/*
* A better looking default horizontal rule
*/

hr {
 display: block;
 height: 1px;
 border: 0;
 border-top: 1px solid #ccc;
 margin: 3em 0;
 padding: 0;
}

/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/

audio,
canvas,
iframe,
img,
svg,
video {
 vertical-align: middle;
}

/*
* Remove default fieldset styles.
*/

fieldset {
 border: 0;
 margin: 0;
 padding: 0;
}

/*
* Allow only vertical resizing of textareas.
*/

textarea {
 resize: vertical;
}

/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */

.browserupgrade {
 margin: 0.2em 0;
 background: #ccc;
 color: #000;
 padding: 0.2em 0;
}

/* ==========================================================================
Author's custom styles
========================================================================== */
html,
body {
  height: 100%;
}

body {
font-family: 'Montserrat', sans-serif;
background-color: #111111;
color: #fff;
display: flex;
justify-content: center;
align-items: center;

font-size: 1vw;
font-weight: 300;
overflow: hidden;
}

a, strong {
color: #C19232;
text-decoration: none;
}

a:hover {
color: #ffab00;
}

a:focus {
outline: none;
}

p {
letter-spacing: 0.016em;
}

strong {
font-weight: 300;
}

h3 strong, h4 strong {
 font-weight: bold;
}

ul {
padding-left: 0;
}

li {
list-style-type: none;
}

h2 {
font-size: 2.5em;
font-weight: 500;
/* letter-spacing: .016em; */
}

h3 {
 font-size: 2em;
}

nav {
padding: 2em;
font-size: 2em;
font-weight: 400;
}

label {
color: #1D1D1E;
}

.field {
position: relative;
left: 0;
}

.field label {
position: absolute;
left: 0;
transform-origin: top left;
transform: scale(1.61);
transition: .3s transform ease-out;
}

.field input:focus + label,
.field input.focused + label {
transform: scale(1) translateY(-1em);
}

a.cta#send {
cursor: pointer;
}

input,
textarea {
border: 0;
border-bottom: 1px solid #CCCCD5;
background: transparent;
color: #1D1D1E;
font-size: 1.5em;
font-family: 'Montserrat', sans-serif;
width: 100%;
margin-bottom: 1em;
transition: .4s border ease-out;
padding: .6em 0;
box-sizing: border-box;
}

input:focus,
textarea:focus {
outline: none;
border-bottom: 1px solid #212121;
}

input.error,
textarea.error {
outline: none;
border-bottom: 1px solid #cc0000;
}

input[type="checkbox"]{
width: auto;
margin-right: .4em;
}

.field {
margin: 1em 0;
}

.half {
width: 50%;
display: inline-block;
padding-right: 1em;
vertical-align: middle;
box-sizing: border-box;
}

.half + .half {
width: calc(50% - 1em);
margin-left: 1em;
padding-right: 0;
}


.flex {
display: flex;
}

.flex-horizontal {
 justify-content: flex-start;
 align-items: center;
}

.callouts {
position: relative;
 font-size: .9em;
}

.callouts div {
padding: 1em 1em 1em 0;
 font-size: .8em;
}

.callouts p {
font-size: 1.5em;
}

.callouts h3 {
 padding-right: 1em;
}

i.icon {
 transform: scale(3.5);
 display: inline-block;
}

.site-branding {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 1em;
text-align: left;
padding: 4em 2em 0;
letter-spacing: .1em;
}


.site-branding h1 {
margin: 0;
font-weight: 300;
text-transform: uppercase;
 line-height: 1.2;
 font-size: 1.6em;
}

.site-branding .subtitle {
 line-height: 1.61;
}
.site-branding i,
.site-branding-text {
vertical-align: middle;
}

.site-branding-text {
 max-width: 12em;
 display: inline-block;
color: #fcfcfc;
}

.site-branding i {
display: inline-block;
font-size: 4em;
width: 2em;
text-align: center;
transform: scale(2.6);
transition: .6s transform ease-in-out, .3s color ease-out;
color: #c19232;
/* vertical-align: -.25em; */
}

/* .site-branding a.active {
pointer-events: none;
} */

.site-branding a:hover i {
color: #fcfcfc;
}

.social {
 font-size: .6em;
 position: absolute;
 bottom: 4em;
 font-size: .475em;
}

.social li {
display: inline-block;
vertical-align: middle;
 margin-right: .6em;
}

.social li a {
 padding: 1em;
border: 1px solid rgba(193, 146, 50, 0.2);
 color: #C19232;
 width: 2.4em;
 height: 2.4em;
 display: inline-flex;
 justify-content: center;
 align-items: center;
 font-size: .6em;
 line-height: 2.4em;
 transition: .2s border-color ease-in-out;
}

.social a:hover {
border: 1px solid rgba(255,255,255,0.6);
}

a.cta, a.cta-underline {
color: #eee;
display: inline-block;
letter-spacing: .04em;
text-transform: uppercase;
transition: .2s border-color ease-in-out;
}

a.cta:hover{
color: #fff;
border: 1px solid rgba(255,255,255,0.6);
}
a.cta-underline:hover {
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.6);
}

a.cta {
padding: 1em 1.6em;
border: 1px solid rgba(255,255,255,0.4);
margin: 1em 0;
letter-spacing: .16em;
}

a.cta-underline {
padding: .4em 0;
border-bottom: 1px solid rgba(255,255,255,0.4);
letter-spacing: .26em;
font-size: .8em;
}

.page-ratio header nav ul {
 line-height: 2em;
 margin: 0;
 font-size: .8em;
}

.page-ratio header nav ul li {
 text-transform: uppercase;
 font-size: .8em;
 letter-spacing: .1em;
}


header nav li a {
display: block;
}

header nav li a::before {
content: '';
display: inline-block;
height: 1em;
border-left: 1px solid #fcfcfc;
vertical-align: -.16em;
margin-right: 0;
opacity: 0;
transition: .6s margin ease-in-out, .6s opacity ease-in-out;
}


header nav li a:hover::before {
margin-right: 1em;
opacity: 1;
}

header nav li.active a::before {
content: '';
display: inline-block;
height: 1em;
border-left: 1px solid #c19232;
vertical-align: -.16em;
margin-right: 1em;
opacity: 1;
}

header nav li.active a {
color: #ffffff;
}
header nav li.active a ul li a {
color: #ffffff;
}

header nav li a.cta::before,
header nav .social li a::before,
header nav li a.cta-underline::before {
display: none;
}

.page-ratio header nav ul li ul li a::before {
 opacity: 0;
 margin-right: 1.8em;
}

.page-ratio header nav ul li ul {
max-height: 0;
overflow: hidden;
transition: 1s max-height ease-out;
}
.page-ratio header nav ul li ul li {
line-height: 3em;
}

.page-ratio header nav ul li.active ul{
max-height: 20vw;
}


.page-ratio > * {
opacity: 0;
transition: .3s opacity ease-in-out;
}

.loaded .page-ratio > * {
opacity: 1;
}

.anim { opacity: 0; transition: .3s opacity ease-in-out;}

.animated .anim {
opacity: 1;
}

.loaded .anim,
.loaded.animated .anim {
opacity: 0;
}

.page-ratio header > div:nth-child(1) { position: relative; }
.page-ratio header > div + div > div:nth-child(1) { position: relative; }
.page-ratio header > div + div > div + div > div:nth-child(1) { position: relative; }
.page-ratio header > div + div > div + div > div + div { position: relative; }
.page-ratio .content { position: relative; }

.page-ratio header > div:nth-child(1)::before,
.page-ratio header > div + div > div:nth-child(1)::before,
.page-ratio header > div + div > div + div > div:nth-child(1)::before,
.page-ratio header > div + div > div + div > div + div::before,
.page-ratio .content::before {
content: '';
display: block;
background: rgba(200,200,200,1);
width: 100%;
height: 100%;
z-index: 3;
position: absolute;
opacity: 1;
transition: .6s opacity ease-out;
pointer-events: none;
}

.page-ratio header > div:nth-child(1)::before { transition-delay: .3s; }
.page-ratio header > div + div > div:nth-child(1)::before { transition-delay: .2s; }
.page-ratio header > div + div > div + div > div:nth-child(1)::before { transition-delay: .0s;  }
.page-ratio header > div + div > div + div > div + div::before  { transition-delay: .1s; }
.page-ratio .content::before { transition-delay: .4s; }

.loaded .page-ratio header > div:nth-child(1)::before,
.loaded .page-ratio header > div + div > div:nth-child(1)::before,
.loaded .page-ratio header > div + div > div + div > div:nth-child(1)::before,
.loaded .page-ratio header > div + div > div + div > div + div::before,
.loaded .page-ratio .content::before {
opacity: 0;
}

.loaded.fade-to-white .page-ratio header > div:nth-child(1)::before,
.loaded.fade-to-white .page-ratio header > div + div > div:nth-child(1)::before,
.loaded.fade-to-white .page-ratio header > div + div > div + div > div:nth-child(1)::before,
.loaded.fade-to-white .page-ratio header > div + div > div + div > div + div::before,
.loaded.fade-to-white .page-ratio .content::before {
opacity: 1;
}


blockquote {
font-size: 1.2em;
 margin: 0;
 padding-right: 7em;
}
blockquote p {
 font-weight: bold;
 font-size: 1.4em;
 margin-bottom: .4em;
}
blockquote:before {
 content: '';
 display: block;
 position: absolute;
 width: 4em;
 height: 4em;
 background-image: url(../img/quotes.svg);
 background-size: contain;
 background-repeat: no-repeat;
 z-index: 0;
 left: auto;
 right: 4em;
 margin: 0;
 margin-top: -.4em;
}

blockquote cite {
 text-align: right;
 width: 100%;
 display: block;
   font-weight: normal;
}

.content img {
 max-width: 100%;
}

.content.home {

 display: flex;
 justify-content: center;
 align-items: flex-end;
}
.home .callouts {
 flex-direction: column;
 align-items: flex-start;
}
.home .callouts::before {
content: '';
display: block;
border-bottom: 1px solid #C19232;
width: 3em;
margin: 1em 0;

}

.content.obyro {
background: #fcfcfc;
color: #111111;
}

.contact {
background-color: #ffffff;
color: #58585D;
display: flex;
justify-content: center;
align-items: center;
}


.contact > div {
width: 100%;
}

.contact .contact-title {
display: block;
font-weight: 600;
font-size: 2.5em;
}

.contact a.cta {
 color: #C19232;
 border: 1px solid #C19232;
 margin: 1em 1em;
}

.page-ratio .content.contact > div.close {
position: absolute;
top: 0;
right: 0;
width: 6em;
height: 6em;
padding: 0;
background: #111111;
cursor: pointer;
}

/* .page-ratio .content.kontakty > div,
.page-ratio .content.kontakty > div .map,
.page-ratio .content.kontakty > div .map img {
width: 100%;
padding: 0;
} */
.page-ratio .content.kontakty > div .map {
position: relative;
}
.page-ratio .content.kontakty > div .map .mark {
width: 4em;
height: 4em;
background: url(../img/mark.svg);
background-repeat: no-repeat;
background-position: 50%;
background-size: contain;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none;
transition: .3s transform ease-out;
transform: scale(1.01);
}
.page-ratio .content.kontakty > div .map:hover .mark {
transform: scale(1.6);
}

.page-ratio .content.kontakty > div .map + div {
height: 100%;
background: #ffffff;
min-height: 19.1em;
color: #1D1D1E;
}
.page-ratio .content.kontakty > div .map + div.flex-horizontal {
 justify-content: center;
}

.kontakty a span {
 color: #212121;
transition: .3s color ease-out;
}

.kontakty a:hover span {
 color: #C19232;
}

.detail {
padding: 1em;
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
}
.detail div {
text-align: left;
}
.detail div:nth-child(1) {
padding: .6em;
border: 1px solid rgba(193, 146, 50, 0.21);
width: 2em;
height: 2em;
margin: 1em;
display: flex;
justify-content: center;
align-items: center;
color: #C19232;
}
.detail span {
display: block;
font-weight: bold;
}

.obiekty {
background: #ffffff;
color: #1D1D1E;
}

.project-details {
background: #000000;
color: #DDD8D8;
}

#details .slider {
 margin: 4em 0;
}

.page-ratio .content > div.project-cover {
padding: 0;
position: relative;
}

.page-ratio .content > div.project-cover div.project-header {
 padding: 4em;
 position: absolute;
 bottom: 0;
 color: #fcfcfc;
}
.page-ratio .content > div.project-cover div.project-header .icon {
color: #C19232;
margin-right: 1em;
margin-left: 1em;
}


.page-ratio .content.contact > div.close::before,
.page-ratio .content.contact > div.close::after {
content: '';
display: block;
width: 4em;
background: #C19232;
height: 1px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition: .4s background ease-in-out,.4s transform ease-in-out;
}
.page-ratio .content.contact > div.close::before {
transform: rotate(45deg);
}
.page-ratio .content.contact > div.close::after {
transform: rotate(-45deg);
}
.page-ratio .content.contact > div.close:hover::before {
background: #ffffff;
transform: rotate(225deg);
}
.page-ratio .content.contact > div.close:hover::after {
background: #ffffff;
transform: rotate(135deg);
}

.page-ratio .content.home img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 position: absolute;
 top: 0;
 z-index: -1;
}

div.navigation {
padding: 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

div.navigation > div {
width: 50%;
max-width: 50%;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: center;
transition: .4s background ease-out;
font-weight: bold;
cursor: pointer;
}

div.navigation > div:hover {
background-color: #C19232;
color: #fcfcfc;
}

div.navigation > div + div {
text-align: right;
justify-content: flex-end;
}

div.navigation > div .arrow {
width: 4em;
height: 4em;
display: flex;
justify-content: center;
align-items: center;
background-position: 50%;
background-size: cover;
color: #fcfcfc;
}

.page-ratio .content.obiekty > div.navigation > div .arrow {
width: 4em;
height: 4em;
display: flex;
justify-content: center;
align-items: center;
background-image: url(../img/obiekty-arrow.jpg);
background-position: 50%;
background-size: cover;
color: #fcfcfc;
margin-right: 1.61em;
}

div.navigation > div + div .arrow {
margin-left: 0;
margin-right: 0;
}
.page-ratio .content.obiekty > div.navigation >  div + div .arrow  {
margin-left: 1.61em;
margin-right: 0;
}

div.navigation.short {
width: 8em;
}

div.navigation.short {
 width: 8em;
 position: absolute;
 right: 4em;
}

div.navigation.short > div { background: #000000; }
div.navigation.short > div + div { background: #292929; }

div.navigation.short > div:hover { background: #ffab00; }
div.navigation.short > div + div:hover { background: #ffab00; }


.project-details.flex.flex-horizontal {
 padding: 2em;
}
.cutout {
background: #F2F2F2;
display: flex;
justify-content: center;
align-items: center;
}
.cutout > div {
background-image: url(../img/cutout.png);
background-position: 50%;
background-size: cover;
 padding: 4em 2em;
width: calc(100% - 26em);
}
.cutout > ul {
width: 26em;
text-align: center;
}
.cutout > ul li {
display: inline-block;
padding: .6em;
border: 1px solid rgba(193, 146, 50, 0.21);
margin: 0 .2em;
font-weight: 400;
}
.cutout > ul li i.icon {
 transform: scale(2.5);
}

.content-cover {
background: #212121;
}

.content-cover img {
opacity: .61;
}

.content-title {
 height: 21vw;
 position: absolute;
 top: 0;
 display: flex;
 justify-content: flex-end;
 align-items: flex-end;
 color: #fcfcfc;
}

.content-1 {
background: #dddddd;
 font-weight: 500;
}
.content-2 {
background: #404040;
color: #fcfcfc;
overflow: hidden;
position: relative;
}
.content-2 .callouts h3 {
 padding-right: 1em;
 color: #c19232;
font-weight: 600;
}
.content-2::before {
 content: '';
 display: block;
 width: calc(100% - 2px);
 padding-bottom: 100%;
 position: absolute;
 background: transparent;
 border-radius: 100%;
 border: 1px solid #c19232;
 top: -130%;
 left: -20%;
 z-index: 0;
 pointer-events: none;
 transition: 2s transform ease-in-out;
 transform: scale(.6,.6);
}
.content-2::after {
 content: '';
 display: block;
 height: 30vw;
 width: 30vw;
 position: absolute;
 left: 74.8034%;
 top: -0.8034%;
 z-index: -1;
 background-image: url(../img/texture.png);
 background-size: 64%;
 border-radius: 100%;
 z-index: 0;
 pointer-events: none;
 background-color: #444;
 transition: 2s top ease-out, 2s transform ease-out;
 transform: scale(.6);
}
.content-2 .callouts {
position: relative;
 z-index: 2;
}
.content-2 h2,
.content-3 h2 {
 font-size: 1.6em;
}
.content-3 {
background: #1E1D24;
color: #fcfcfc;
padding-bottom: 8em;
overflow: hidden;
}
.content-3 h3 {
 font-size: 5em;
 font-weight: 500;
 opacity: .1;
 margin-bottom: -.8em;
 margin-left: -.3em;
}
.content-3 .slider .slide {
width: 100%;
 max-width: 19.6em;
 padding-left: 1.6em;
outline: 0;
 display: inline-block;
 vertical-align: top;
}
.content-3 .slider .slide:focus {
outline: 0;
}
.content-3 h2 {
position: absolute;
}

.content-3 .controls {
 position: relative;
 z-index: 2;
}


.content.usugli2 {
 background: #fcfcfc;
 color: #111111;
}

.content.usugli2 ul {
}

.content.usugli2 ul li {
margin-bottom: .4em;
}

.content.usugli2 li::before {
 content: '•';
 margin-right: .6em;
 color: #c19232;
}

.content.usugli {
 background: #fcfcfc;
 color: #111111;
}

.content.usugli .padding {
 padding-right: 0;
}

.content.usugli .service {
 padding-top: 2.6em;
 padding-bottom: 2.6em;
 border-top: 1px solid #ddd;
position: relative;
padding-left: 0;
transition: .6s padding ease-out, .6s border ease-out;
}
.content.usugli .service:first-child { border-top: 1px solid transparent; }
.content.usugli .service::before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: url(../img/bg.png);
background-size: cover;
background-repeat: no-repeat;
z-index: -1;
opacity: 0;
border-left: 1px solid #c19232;
transition: .6s opacity ease-out;
}
.content.usugli .service:hover { border-top: 1px solid transparent; padding-left: 2em; }
.content.usugli .service:hover + .service { border-top: 1px solid transparent;}
.content.usugli .service:hover h3 { color: #c19232; }
.content.usugli .service:hover::before {
opacity: 1;
}

.content.usugli .service h3 { margin-bottom: 0; font-size: 1.25em; }


.content.usugli .service > * {
 max-width: 30em;
}

.content.usugli .service p { margin-top: .4em; font-size: .9em; line-height: 1.6; max-width: 36em }

.tick {
display: inline-block;
 width: 1em;
 height: 1em;
 background: #c19232;
 margin-right: .6em;
 vertical-align: -.12em;
}

input[name="tick"] {
display: none;
}

input[name="tick"]:checked + label .tick {
background-image: url(../img/tick.svg);
 background-size: 60%;
 background-repeat: no-repeat;
 background-position: 50%;
}

.contact input[name="tick"] + label + a.cta { pointer-events: none; border: 1px solid #ccc; color: #ccc; }

.contact input[name="tick"]:checked + label + a.cta { border: 1px solid #C19232; color: #C19232; pointer-events: auto; }

.contact label a {
position: relative;
color: #1D1D1E;
}
.contact label a:after {
 content: '';
 display: block;
 border-bottom: 1px solid #58585D;
 position: absolute;
 left: 0;
 right: 0;
 bottom: -.40em;
}

.contact label a:hover::after {
 border-bottom: 1px solid #C19232;
}

.anim {
 width: 40vw;
 height: 40vw;
 position: fixed;
 top: 0;
 margin: auto;
 right: 0;
 left: 0;
 bottom: 0;
}

input[name="tap"] {
display: none;
}

label[for="tap"] {
display: none;
}

@media (orientation: landscape) {

.page-ratio {
 position: relative;
 width: 100vw;
 height: 61.8034vw;
 background: #1e1d23;
 background-size: auto 100%;
 background-position: left;
 background-repeat: no-repeat;
 display: flex;
 justify-content: center;
 align-items: center;
}

.page-ratio header {
 width: 38.1966vw;
 height: 100%;
 display: flex;
 flex-direction: column;
}
.page-ratio header > div {
 width: 100%;
 height: 38.1966vw;
}

.page-ratio header > div:nth-child(1) {
 background-image: url("../img/bar.svg");
 background-size: 100% 100%;
}

.page-ratio header > div:nth-child(1)::after {
   content: '';
   display: block;
   height: 20vw;
   width: 20vw;
   position: absolute;
   left: 62.8034%;
   top: 19.1966%;
   background-image: url(../img/texture.png);
   background-size: 64%;
   border-radius: 100%;
   z-index: 0;
   pointer-events: none;
   background-color: #2a2a2c;
   transition: 2s top ease-out, 2s transform ease-out;
   transform: scale(.6);
}
.loaded .page-ratio header > div:nth-child(1)::after {
 top: 39.1966%;
 transform: scale(1);
}


.page-ratio header > div + div {
 height: calc(61.8034vw - 38.1966vw);
 background-color: rgba(255,255,255,0.0);
 display: flex;
}
.page-ratio header > div + div > div {
 width: 61.8034%;
 overflow: hidden;
 max-height: 100%;
 position: relative;
}
.page-ratio header > div + div > div:nth-child(1) {
 background: rgba(50,50,50,0.6);
}
.page-ratio header > div + div > div:nth-child(1) nav{
padding: 2em;
}
.page-ratio header > div + div > div:nth-child(1) ul {
 margin: 0;
 font-size: .61em;
}

.page-ratio header > div + div > div:nth-child(1)::after {
   content: '';
   display: block;
   width: calc(100% - 2px);
   padding-bottom: 100%;
   position: absolute;
   background: transparent;
   border-radius: 100%;
   border: 1px solid #c19232;
   top: 50%;
   z-index: 0;
   pointer-events: none;
   transition: 2s transform ease-in-out;
   transform: scale(.6,.6);
}

.loaded .page-ratio header > div + div > div:nth-child(1)::after {
 top: 50%;
 transform: scale(1,1);
}

.page-ratio header > div + div > div + div {
 width: 38.1966%;
}
.page-ratio header > div + div > div + div > div {
width:100%;
height: 38.1966%;
}

.page-ratio header > div + div > div + div > div:nth-child(1) {
 background: rgba(50,50,50,0.5);
}
.page-ratio header > div + div > div + div > div:nth-child(1)::after {
 content: '';
 display: block;
 background-image: url(../img/bar.svg);
 background-size: 100% 100%;
 width: 100%;
 height: 100%;
 transform: scale(0,0);
 transition: 1s transform ease-in-out 1s;
}
.loaded .page-ratio header > div + div > div + div > div:nth-child(1)::after {
 transform: scale(-2,1.2);
}

.page-ratio header > div + div > div + div > div + div {
 width:100%;
 height: 61.8034%;
 background: rgba(50,50,50,0.6);
 background-image: url(../img/texture.png);
 background-size: 64%;
}

.page-ratio .content {
 position: relative;
 width: 61.8034%;
 height: 100%;
 z-index: 1;
 top: 0;
 /* overflow-x: hidden; */
}

.page-ratio .content .padding {
   padding: 4em;
}

.page-ratio .content.usugli .padding {
   padding-right: 0;
}

.page-ratio .content.home::after {
 content: '';
 display: block;
 position: absolute;
 width: 61.8034vw;
 height: 61.8034vw;
 background-image: url(../img/fond2.png);
 background-size: auto 100%;
 background-position: right;
 background-repeat: no-repeat;
 z-index: -1;
 top: 0;
}

.site-branding > * {
 /* font-size: .8em; */
}

.site-branding i {
 font-size: 3em;
}

div#content.home {
 height: 100%!important;
}

}


@media (orientation: landscape) and (min-aspect-ratio: 161/100){
/*
body {
 overflow: hidden;
 font-size: 1.617vh;
}
.page-ratio {
 height: 100vh;
 width: 161.8034vh;
 overflow: hidden;
}
.content-title {
 height: 28vh;
}
*/
body {
 overflow-y: scroll;
 align-items: flex-start;
}
.scrollbar-macosx > .scroll-element.scroll-y {
 right: 11px;
}

}



@media (orientation: portrait) {

 body {
   font-size: 1.6vw;
   align-items: flex-start; /* 200922 */
 }
 .page-ratio .content.home img {
   height: 90vh;
   bottom: 0;
 }
/*
 label[for="tap"] {
 display: block;
 width: 2.6em;
 height: 2.6em;
 background-image: url(../img/tap.svg);
 background-size: cover;
 opacity: .6;
 margin: .3em 0;
 position: absolute;
 right: 1.6em;
 }
 input[name="tap"] + header {
 max-height: 0;
 transition: .4s max-height ease-out;
 }
 input[name="tap"]:checked + header {
 max-height: 100vh;
 transition: .4s max-height ease-out;
 }
input[name="tap"] + header nav > ul {
max-height: 0;  overflow: hidden; opacity: 0;
transition: .4s opacity ease-out;
}
input[name="tap"]:checked + header nav > ul {
max-height: 100vh;   opacity: 1;
}
*/
.flex-horizontal {
 flex-direction: column;
}
.callouts {
 font-size: 1em;
 }
 a.cta {
 font-size: 1.1em;
 }
.page-ratio header nav ul li.active ul{
 display: none;
}

 .page-ratio {
     position: relative;
     width: 100vw;
     height: 161.8034vw;
     background: #1e1d23;
     background-size: auto 100%;
     background-position: left;
     background-repeat: no-repeat;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

   .page-ratio header {
     width: 100vw;
     height: 61.8034vw;
     display: flex;
     justify-content: center;
     align-items: center;
   }

   .page-ratio header > div {
   }

   .page-ratio header > div:nth-child(1) {
     width: 61.8034vw;
     height: 61.8034vw;
     background-image: url("../img/bar.svg");
     background-size: 100% 100%;
   }

   .page-ratio header > div:nth-child(1)::after {
   }

   .loaded .page-ratio header > div:nth-child(1)::after {
   }


   .page-ratio header > div + div {
     width: 38.1966vw;
     height: 61.8034vw;
   }
   .page-ratio header > div + div > div {
     height: calc(61.8034vw - 38.1966vw);
   }
   .page-ratio header > div + div > div:nth-child(1) {
     height: 38.1966vw;
     background: rgba(50,50,50,0.6);
   }
   .page-ratio header > div + div > div:nth-child(1) nav{
     text-align: right;
   }
   .page-ratio header > div + div > div:nth-child(1) ul {
     margin-top: 4.6em;
   }

   .page-ratio header > div + div > div:nth-child(1)::after {
       content: '';
       display: block;
       width: calc(100% - 2px);
       padding-bottom: 100%;
       position: absolute;
       background: transparent;
       border-radius: 100%;
       border: 1px solid #c19232;
       top: 100%;
       z-index: 0;
       pointer-events: none;
       transition: 2s top ease-in-out;
   }

   .loaded .page-ratio header > div + div > div:nth-child(1)::after {
   }

   .page-ratio header > div + div > div + div {
     height: calc(61.8034vw - 38.1966vw);
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .page-ratio header > div + div > div + div > div {
   }

   .page-ratio header > div + div > div + div > div:nth-child(1) {
     width: 61.8034%;
     height: calc(61.8034vw - 38.1966vw);
     background: rgba(50,50,50,0.5);
   }
   .page-ratio header > div + div > div + div > div:nth-child(1)::after {
     content: '';
     display: block;
     background-image: url(../img/bar.svg);
     background-size: 100% 100%;
     width: 100%;
     height: 100%;
     transform: scale(0,0);
     transition: 1s transform ease-in-out 1s;
   }
   .loaded .page-ratio header > div + div > div + div > div:nth-child(1)::after {
   }

   .page-ratio header > div + div > div + div > div + div {
     width: calc(38.1966vw);
     height: calc(61.8034vw - 38.1966vw);
     width:38.1966%;
     background: rgba(50,50,50,0.6);
     background-image: url(../img/texture.png);
     background-size: 64%;
   }

   .page-ratio .content {
     position: relative;
     width: 100vw;
     height: 100vw;
     z-index: 1;
     top: 0;
     /* overflow-x: hidden; */
   }

   .page-ratio {
     height: 100%; /* 200922 */
   }
   .page-ratio .content {
       min-height: calc(100% - 61.8034vw);  /* 200922 */
       height: calc(100% - 61.8034vw);  /* 200922 */
   }
   .page-ratio .content.contact {
     padding: 4em;
     box-sizing: border-box;
     max-width: 100%;
     overflow: hidden;
   }


     .page-ratio .content.home {
           align-items: flex-start;
     }

/*
 .page-ratio .content > div {
       padding: 4em;
   }
*/
.page-ratio .content .content-title {
 height: 22vh;
}

.page-ratio .content .content-title,
.content-1, .content-2, .content-3, .content-4	{

 padding: 4em;
}

.page-ratio .content.kontakty > div .map + div.flex-horizontal {
 justify-content: center;
 flex-direction: column;
 align-items: flex-start;
 padding-left: 11em;
}

.page-ratio .content.kontakty > div .map img {
 height: 43vw;
 object-fit: cover;
}
   .page-ratio .content.home::after {
     content: '';
     display: block;
     position: absolute;
     width: 100vw;
     height: 100vw;
     background-image: url(../img/fond2.png);
     background-size: auto 100%;
     background-position: right;
     background-repeat: no-repeat;
     z-index: -1;
     top: 0;
   }

   .page-ratio header nav ul {
       font-size: 1em;
   }

   p, figcaption, .detail{
     font-size: 1.6em;
     line-height: 1.6;
   }

   .callouts p, blockquote  {
     font-size: 2em;
   }

   .social {
     bottom: -4.4em;
     z-index: 2;
   }

 .site-branding i {
   transform: scale(2);
   vertical-align: -.2em;
 }

 .page-ratio .content.home .padding,
 .page-ratio .content.obiekty .padding	  {
 padding: 4em;
 box-sizing: border-box;
 }
 .page-ratio .content.usugli .padding {
   padding: 1em 0 1em 4em;
   box-sizing: border-box;
 }
 .content.usugli .service p {
   font-size: 1.6em;
 }
 .project-details.flex.flex-horizontal {
 flex-direction: row;
}
.content.usugli .service {
   padding-top: 2em;
   padding-bottom: 2em;
 }
.kontakty .map + .flex {
     padding: 4.6em 0;
     padding: 9.6em 0; /* 200922 */
}

.kontakty  .detail {
font-size: 1.6em;
line-height: 1.6;
padding-top: 0;
padding-bottom: 0;
}
.cutout > ul li {
  font-size: 1.6em;
}
.page-ratio .content.obiekty .padding {
padding-bottom: 6em;
}
}


@media (orientation: portrait) and (min-aspect-ratio: 100/161){
body {
 display: block;
 overflow-y: scroll;
 padding-bottom: 4em;
}
}

/* ==========================================================================
Helper classes
========================================================================== */

/*
* Hide visually and from screen readers
*/

.hidden {
 display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/

.visuallyhidden {
 border: 0;
 clip: rect(0 0 0 0);
 height: 1px;
 margin: -1px;
 overflow: hidden;
 padding: 0;
 position: absolute;
 width: 1px;
}

/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
 clip: auto;
 height: auto;
 margin: 0;
 overflow: visible;
 position: static;
 width: auto;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
 visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
 content: " "; /* 1 */
 display: table; /* 2 */
}

.clearfix:after {
 clear: both;
}

/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */

@media only screen and (min-width: 35em) {
 /* Style adjustments for viewports that meet the condition */
}

@media print,
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-resolution: 1.25dppx),
    (min-resolution: 120dpi) {
 /* Style adjustments for high resolution devices */
}

/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */

@media print {
 *,
 *:before,
 *:after,
 *:first-letter,
 *:first-line {
     background: transparent !important;
     color: #000 !important; /* Black prints faster:
                                http://www.sanbeiji.com/archives/953 */
     box-shadow: none !important;
     text-shadow: none !important;
 }

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

 a[href]:after {
     content: " (" attr(href) ")";
 }

 abbr[title]:after {
     content: " (" attr(title) ")";
 }

 /*
  * Don't show links that are fragment identifiers,
  * or use the `javascript:` pseudo protocol
  */

 a[href^="#"]:after,
 a[href^="javascript:"]:after {
     content: "";
 }

 pre,
 blockquote {
     border: 1px solid #999;
     page-break-inside: avoid;
 }

 /*
  * Printing Tables:
  * http://css-discuss.incutio.com/wiki/Printing_Tables
  */

 thead {
     display: table-header-group;
 }

 tr,
 img {
     page-break-inside: avoid;
 }

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

 p,
 h2,
 h3 {
     orphans: 3;
     widows: 3;
 }

 h2,
 h3 {
     page-break-after: avoid;
 }
}


.page-ratio .content > div.project-cover:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
}
.detail__text_objects{margin-bottom: 42px;}
.detail__text_objects p {
 margin: 0px 0 25px;
 line-height: 1.6;
}

.detail__text_objects p:last-child {
 margin-bottom: 0;
}
#prev-title,#next-title {
  white-space: nowrap;
  max-width: 77%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.contact__map__inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact__map {
  padding-top: 69%;
  position: relative;
}

[class*="ymaps-2"][class*="-ground-pane"] {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
}


.map__pointer h2 {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: bold;
  max-width: 230px;
  line-height: 1.2;
}

.map__pointer {
  background: #1e1d23;
  padding: 25px 40px 25px 25px;
  color: #fff;
}


.map__pointer h5 {
  margin: 0;
  font-size: 11px;
  line-height: 1.2;
}

.map__pointer p {margin: 0 0 10px;font-size: 12px;color: #c19232;}

.map__pointer p:last-child {
  margin-bottom: 0;
}

[class$="-balloon__close"]+[class$="-balloon__content"] {

  padding: 0 !important;
  margin: 0 !important;

}

[class$="-balloon__close"] {
  filter: invert(1);
  right: 0;
}
[class$="-balloon__layout"] {
  padding-right: 0;
  background: #1e1d23;
}

[class$="-balloon__tail"] {
  background: #1e1d23;
}

[class$="-balloon__tail"]:after {
  background: #1e1d23 !important;
}

.page-ratio .content.kontakty > div .map + div.contact__info {
  height: auto;
  box-sizing: border-box;
}


@media  screen and (max-width: 1000px) {
  .contact__wrap > .contact__wrap {
    display: flex;
    flex-direction: column;
    background: #fff;
  }

  .page-ratio .content.kontakty > div .map + div.flex-horizontal.contact__info {
    padding: 5em 1em;
    order: -1;
    min-height: auto;
  }

  .contact__map {
    padding-top: 50%;
  }
  }
@media  screen and (max-width: 500px) {
.contact__map {
  padding: 0;
  height: 300px;
}
}