:root {
     color-scheme: light only;
}

body
{
    font-family: "Roboto", "Open Sans", Arial, sans-serif;
    line-height: 1.5;
    
    font-size:16px;
    margin:0px;
    color:#d5dde8;
    background: #01061f;
    overflow-x: hidden;
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
    overflow-y: auto;
    caret-color: transparent;
    scroll-snap-type: y mandatory;
   
}

@-moz-document url-prefix() {
  body {
    scroll-snap-type: none;
  }
}

.progress 
{
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: #01061f;
  
   
}
.bar 
{ 
  background-color: #819FF7; 
  width:0%; 
  height:5px; 
  border-radius: 3px; 
    justify-self: flex-start;
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}

#prewrap 
{
    position: absolute;
    height:100vh;
    width: 100vw;
    display:flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
   
    
   
    
}

.img-cont 
{
    display: block;
    width: 200px;
    height:200px;
    position: relative;
    align-self: center;
   
}
.img-cont img 
{
    display: block;
  
    left:0;
    top:0;
}

.img-cont img:first-child
{
    z-index: 1;
    opacity: 1;
}

.img-cont img:last-child
{
    position: absolute;
    opacity: 0;
     z-index: 2;
   
    
}

.load-text {
	align-self: center;
    width:100px;
    height:50px;
    text-align: center;
    display: block;
    z-index: 3;
     color: #9da9eb;
}
#procent-show
{
    font-weight:500;
    font-size: 24px;
}
.section 
{
  
  scroll-snap-align: start;
}


a {text-decoration:none;color:#4dd4fd;}
a:hover{color:#b2ffff;}
a.active{font-weight:800;padding: 0 0px;}
a.active:before
{
    content:"";

    padding-left:25px;
    z-index:-1;
    display: inline;
    position: relative;
    margin-left: -20px;
    margin-right: -4px;
    background: url('img/dot.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
    
   
    
}
button
{
    background: none;
    
    color:#386eb6;
    border-radius:2px;
    padding:0px 12px;
    font-size:14px;
    height:32px;
    border:2px solid #a0cadd;
    border:1px solid #709bd3;
    cursor:pointer;
    margin:2px 2px;
    
}
#filterMenu button:hover
{
     background: #e5f4f4;
     
}
#filterMenu .active-filter
{
    background: azure;
    font-weight: bold;
}
#filterMenu .active-filtr:hover
{
    background: azure;
}

#filterMenu
{
	color:#7693cb;
    margin-left:0px;
    margin-top:10px;
    margin-bottom:5px;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    
	
}
#filterMenu .ico
{
    height:22px;
    
    margin:2px 0;
    margin-right:4px;
    display:inline-block;
    
}

div {border:0px solid blue;}
.vl 
{
    height:100%;
    width: 1px;
    border-left: 1px solid #43539f;
    margin-right:5px;
}

.hl 
{
    width:100%;
    height: 1px;
    border-top: 1px solid #43539f;
    display:inline;
    margin:5%;
    
    
}

#menu 
{
	position: fixed;
    height:6vh;
    width:80vw;
    margin-left:0;
    margin-top:0px;
    padding-top:5px;
    padding-bottom:9px;
    padding-left:10vw;
    padding-right:10vw;
    
    z-index:500;
    display: flex;
    justify-content: space-between;
    align-items: center;
     
     background: rgba(2, 2, 31, 0.4);



    
}

#menu label 
{ 
    display: inline-block; 
    color: white;
    background: none;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
    margin-right:5px;
   
}

#menu label, #hamburger { display: none; }

#menu-list 
{
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    
    align-items: center;
    
    font-family: Barlow;
    color:#ffffff;
    font-size: 20px;
    
}
#menu-list a
{color:#ffffff; padding:0 10px; margin-right:5px;}
#menu-list a.lang
{
    padding:0px;
}

.lang 
{
	border:1px solid #43539f;
    border-radius:50%;
    font-size:11px;
    width:25px;
    height:25px;
    line-height: 2.2em;
    font-weight:800;
    display: flex;
    justify-content: center;
    align-content: center;
    margin-top:5px;
    margin-left:6px;
}

.logo 
{
	height:62%;
    cursor:pointer;

    
}

.section-cont
{
    width: 100%;
    height: 100vh;
    margin:0;
    
    display: flex;
    align-items: flex-start;
    justify-content: center;
    
    overflow: hidden;
    
}
#sekcja2.section-cont{height:auto;min-height: 10vh;max-height:none;}
#sekcja1
{
    
    background: url('img/bg1.jpg') no-repeat #01061f;
    background-size: cover;
    position: relative;
}

#sekcja2
{
    background: #b2e6f5;
    position: relative;
    min-height:104vh;
    
}

#sekcja3
{
    background: #01061f;
    overflow:hidden;
    max-height: 100vh;
    position: relative;
    
   
    
    

}

.waves 
{
    height:100%;
    width:105%;
    position:absolute;
	background:url('img/waves2.png') no-repeat;
    background-size: cover;
    top:0px;
    transition: 0.3s ease-out;
    

    
}

.wavesb 
{
    height:100%;
    width:105%;
    position:absolute;
	background:url('img/waves2.png') no-repeat;
    background-size: cover;
    transition: 0.6s ease-out;
    
    
}

.light-stains
{
    height:100%;
    width:100%;
    position:absolute;
	background:url('img/bg2.png') no-repeat;
    opacity:0.9;
    background-size: cover;
    
    z-index: 0;
    
}

.stains
{
    height:100%;
    width:100%;
    position:absolute;
	background:url('img/bg3.png') no-repeat center;
    opacity:0.9;
    background-size: contain;
    
    z-index: 0;
    
}

.grain
{
    height:100%;
    width:100%;
    position:absolute;
	background:url('img/bg5.png') no-repeat center;
    opacity:0.3;
    background-size: cover;
    
    z-index: 0;
    
}


.container 
{
    height: 90%;
    max-height:90%;
    width: 70%;
    max-width: 1300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
}


.subcontainer 
{
	width:75%;
    min-height:50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    
}
#sekcja3 .subcontainer
{
    justify-content: space-between;
    margin-top:5%;
    width:51%;
}

.subcontainer2 
{
	width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#omnie-border 
{
    min-height: 50px;
    width:40px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
   
    padding-right:10px;

}

.vtitle 
{
    height: auto;
	writing-mode: vertical-rl;
    font-family: "Barlow";
    font-weight: 800;
     white-space: nowrap;
   width: 100%;
    font-size: 25px;
    margin-top: 3px;
}
.vtitle:after
{
  background-color: #2e3192;
  content: " ";
  display: inline-flex;
  width: 1px;
  position: RELATIVE;
  vertical-align: middle;
  justify-content: center;
  align-content: center;
  height: 600%;

  margin-top: 30px;
  RIGHT:10px;

 
}

#omnie
{
    width:100%;
    height: auto;
    min-height: 32vh;
    max-height: 50vh;
    padding-right:0px;
    overflow: hidden;
    position: relative;
    z-index: 50;
    line-height: 1.5;
    font-size:19px;
    
}
@-moz-document url-prefix() {
    .vtitle:after {RIGHT: 12%;}
    #omnie{ height: 48vh;}
}


#omnie p {margin-top:0;

}
#omnie p:last-child
{margin-bottom:0px;}




.text-fade-b
{
   
    -webkit-mask: linear-gradient(to bottom, black 75%, rgba(0,0,0,.0) 101%) bottom;
    
}

.text-fade-t
{
    -webkit-mask: linear-gradient(to top, black 75%, rgba(0,0,0,.0) 101%) top;
   
}


#tree 
{
    width:40%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
}

#tree img
{
   
    max-height: 110vh;
    max-width:200%;
    height:auto;
    width:auto;
    position:relative;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    
}
#tree-cont
{
    display:block;
    position:relative;
    height:110vh;
    width:200%;
    align-self: center;
    top:-8%;
}
#tree-cont img
{
}
#tree-cont img:first-child
{
    position:absolute;
    z-index: 1;
    opacity: 1;
}

#tree-cont img:last-child
{
    position: absolute;
    opacity: 1;
     z-index: 0;
   
    
}

#down 
{
    position: absolute;
	align-self: flex-end;
    justify-self:center;
    bottom:100px;
    z-index:5;
}

#down img
{
     height:15px;
}

#grass 
{
	width:100%;
    height:90px;
    position:absolute;
    bottom:0px;
    background: url('img/trawa.png') repeat-x;
    background-position: bottom;
}

#works-header 
{
    color: #588d9b;
    color: #7bbad4;
    width:100%;
    height: 100%;
    font-family: Barlow;
    font-size:42px;
    font-weight:500;
    letter-spacing: 0.1em;
    margin-bottom: 3px;
 
    z-index: 5;
    
   
}

.myworks
{
    height:auto;
    width:100%;
    margin-top:65px;

    
    
}

.myworks .slide
{
    width:100%;
    height:75vh;
     
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
     background: #4f9ecc;
     background:rgba(0, 60, 100, 0.1);
   
    
    
}
.slide a
{
    display: inline-block;
    
    width: 100%;
    height:100%;
    display: flex;
    align-content: center;
    justify-content: flex-end;
     cursor:zoom-in;
}

img.work
{
    height:100%;
    width:100%;
    object-fit: cover;
    overflow: hidden;
}
#thumb-wrap 
{
    display:flex;
    justify-content: flex-end;
    align-content: flex-start;
    align-self: center;
    width: 100%;
   
    background:#a1e5e5;
    background:rgba(50, 155, 155, 0.10);
    position: relative;
    background-size: cover;
    padding:0;
    margin:0;
    margin-top:4px;
    margin-bottom:15%;
     box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
   
}

 #back-text {
    position: absolute;
	font-size: 4.5vw;
    align-self: center;
    left:0;
     font-weight:800;
     letter-spacing: 0.03em;
     margin-left:-4px;
     color:#bdf0ff;
     opacity:0.6;

    
}

.thumb-works
{
    
    
    display:flex;
    justify-content: center;
    align-content: center;
    z-index: 50;
    margin-left: 0px;
    margin-top:0px;
    align-self: center;
    padding: 0px 0px;
    width:auto;
     box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
   
     
    
   
   
  
   
}



.thumb-works img 
{
	height:auto;
    width:7.54vw;
    width: calc(100% / 9);
    aspect-ratio:1/1;

    -moz-aspect-ratio:1/1;
    -webkit-aspect-ratio:1/1;
    
    
    
    object-fit: cover;
  
    background:#cbc7c7;
    margin-left:0px;
    margin-bottom:0px;
 

     display: block;
     cursor: pointer;
  
     box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -webkit-filter: grayscale(95%); /* Safari 6.0 - 9.0 */
    filter: grayscale(95%);
    border-bottom:5px solid ;
    border-right:1px solid ;
}
.thumb-works img:hover
{
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
    
    -webkit-filter: brightness(1.08);
    -moz-filter: brightness(1.08);
    -ms-filter: brightness(1.08);
    filter: brightness(1.08);
    
    transition: 1s;
}
.iphone .thumb-works img{
        height:calc(70vw / 9);  
    }


img.activetb
{

	border-bottom: 5px solid #41bdff;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.slide-description 
{
    position:absolute;
    height: 90%;
    width:2.2vw;
    background: #0081d1;
    background: rgba(0, 25, 160, 0.1);
    display:flex;
    align-items: center;
    justify-content: flex-end;
    writing-mode: vertical-rl;
    padding-left:5px;
    padding-right:5px;
    top:-5%;
    padding-top:50px;
    padding-bottom:90px;
    color:white;
    opacity: 0.7;
    transition: 0.4s;
  
}
.slide-description:empty
{
    display: none;
}
.work:hover + .slide-description, .slide-description:hover
{
    color:white;
    opacity: 1;
}

.info 
{
  
    height: 100%;
    width:30%;
    background: #2a2d9f;
    background: #5a6a84;
    background: #1d205c;
    background: url('img/bg3.png') no-repeat center  #091038;
    background-size: cover;
    padding:4%;
    margin-top: -4%;
    line-height: 1.7;
    display:flex;
     flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    
    font-size:14px;
    font-weight:300;
   
}
.info p {width:100%;text-align:left;}

.work-title {
	color: #d5dde8;
    font-weight: 900;
    font-size:22px;
    text-align: left;
    width: 100%;
    line-height: normal;
    margin-bottom: 5px;
}

#topborder
{
	width:100%;
    height:100px;
    position:absolute;
    bottom:0px;
    margin-bottom: 0;
    background: url('img/sec3border.png') repeat-x;
     background-size: contain;
    background-position: bottom center;
}

.avatar 
{
	width:25%;
    height: auto;
    margin:1%;
    margin-top: 8%;
    margin-left: 0;

   

    
}

.avatar img
{
    width: 100%;
    height:AUTO;
    border-radius: 50%;
    
    
}

.contact-text
{
    text-align: right;
    font: bold 22px Barlow;
    line-height: 1.7;
    letter-spacing:.05em;
    
}
.contact-text h4
{
    color:#27ffff;
    font-weight: 100;
    margin:5px 0 15px 0;
}
.contact-text h1
{
    font-size:30px;
    font-weight: 800;
    margin:0px 0;
    
}

.name 
{
	font-weight: 100;
}

#contact-border
{
    min-height: 50px;
    width:40px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    margin-top:10px;
    padding-right:0px;
    justify-self: flex-start;

}
#sm-box 
{
    margin-bottom:0;
    margin-top:15%;
    line-height: 1.5em;
    font-size:20px;
    font-weight: 800;
    color:#27ffff;
}

img.sm 
{
	height:35px;
    width:35px;
  
    display: block;
    margin: 0px 5px;
    padding: 0;
    float: right;
    border-radius:10px;
    opacity: 0.4;
    cursor: pointer;
}
img.sm:hover
{
    opacity: 1;
}

#footer
{
    color:#353f76;
    width: 100%;
    height:40px;
   margin-top: 1%;
    z-index: 800;
    align-self: flex-end;
    font-family:Barlow;
    font-size: 14px;
    text-align: center;
    background: rgba(0, 0, 23,0.0);
}




/* === RWD === */

@media only screen and (orientation: portrait) and (min-width: 721px){
   
    .container{flex-direction: column-reverse; padding-bottom: 200px; }
    #omnie-cont{width:85%; top:-15%;}
    .subcontainer {}
    #omnie{min-height:18vh;  max-height: 30vh;}
    #omnie p:last-of-type{padding-bottom:80px;}
    
    .slide{flex-direction: column; height:auto !important;}
    #sekcja2 {height:auto;}
    #sekcja2 .container{padding-bottom:0px;}
    #sekcja3 .container{padding-bottom:0px;}
    #sekcja3 .subcontainer{ width:100%;padding-top:120px;}
    #sekcja3 { overflow:hidden;max-height: none;}
    .avatar {width:50%; padding-top: 0px;}
    .contact-text{font-size: 17px;}
     .stains{background-size:auto 70%; opacity:0.3;}
    #thumb-wrap {margin-bottom:100px;}
    .thumb-works img { width: calc(100% / 4);}
    .iphone .thumb-works img{
        height:calc(90vw / 4);  
    }
    #sm-box {
    }
    
     
}

@media only screen and (max-width: 1150px) {
    .container{width:90%;}
    #menu{ width:90vw;padding-left:5vw;padding-right:5vw;}
    .slick-next{right:-40px !important;}
    .slick-prev{left:-40px !important;}
    .logo{height:50%;}
}
@media only screen and (max-width: 960px)  {
    body{font-size:14px;}
    #menu-list a{font-size:18px; padding:0 10px;}
    #menu-list a.lang{font-size:11px; padding:0;margin-right:20px;}
    .logo{height:45%;}
    .work-title{font-size:19px;}
    .info{font-size:14px;}
    .contact-text{font-size: 19px;}
    .contact-text h1{font-size: 28px;}
    .stains{background-size:cover; opacity:0.5;}
    .slick-next{right:-32px !important;}
    .slick-prev{left:-32px !important;}
   
}
@media only screen and (max-width: 720px) {
    .section-cont {height:auto;}
    .container{flex-direction: column-reverse; padding-bottom: 200px; }
    .subcontainer{width:100%;}
     .logo{height:24px;margin-left:15px;}
    .slide{flex-direction: column; height:auto !important;}
    .slick-next{right:-22px !important; display:none !important;}
    .slick-prev{left:-22px !important; display:none !important;}
    .myworks:before{content:""; display:block;margin-top:1vh;}
    .info{display:none; width:92%;height:auto; max-height:200px;  line-height: 1.4em;font-size:12px;letter-spacing: 0.06em; padding:2% 4%;}
    .work-title {font-size:16px;}
    #sekcja2 {height:auto;}
    #sekcja2 .container{padding-bottom:0px;}
    #sekcja3 .container{padding-bottom:50px;}
    #sekcja3 .subcontainer{ width:100%;padding-top:80px;}
    #sekcja3 { overflow:hidden;max-height: none;}
    .avatar {width:60%; padding-top: 40px;}
    .contact-text{font-size: 17px;}
     .stains{background-size:auto 70%; opacity:0.3;}
    #thumb-wrap {margin-bottom:100px;}
    .thumb-works img { width: calc(100% / 4);}
    .iphone .thumb-works img{
        height:calc(90vw / 4);  
    }
    .slide-description 
    {
	    font-size:12px; height:88%; top:-9%; width:3vw;
        
    }
    #menu{
        flex-wrap: wrap;
        height:auto;
        margin:0;
        padding:0;
        width:100%;
    }
    .hl {
    display:none !important;
	width:55%;
    }
    #menu-list {
    margin:0;
	margin-top:10px;
    width:100vw;
  
        
    }
    #menu-list a {
    font-size: 20px;
    height: 50px;
    box-sizing: border-box;
    display: block;
    width: 100%;
    border:none;
    line-height: 50px;
  
    border-top: 1px solid #323c69;
    border-radius:0;  
    padding-left:30px;
        
        background:rgba(3, 8, 36, 0.73);
    
    }
     #menu-list a:last-child {
         border-bottom:1px solid #323c69;
    }
    #menu-list a.active:before
    {
        z-index:80;
     
        
    }
   #menu-list a.lang
    {
        font-size:16px;
        margin: 0;
        line-height:50px;
        padding:0px 10px;
        padding-left:30px;
        font-weight: normal;
    }
   #menu-list a.lang:after {
    content: '';
    font-weight: 500;
    }
  /* (B) SHOW HAMBURGER ICON */
  #menu label { 
    display: inline-block; 
   
    background: none;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
  }

  /* (C) TOGGLE SHOW/HIDE MENU */
  #menu-list { display: none; }
  #menu input:checked ~ #menu-list { display: block; }
   
}

@media only screen and (max-height: 480px){
    .info{width:auto;height:100%;line-height: 1.4em;font-size:12px;letter-spacing: 0.06em;padding:20px 10px; }
    #sekcja3{min-height:300px;}
    #menu{}
    .logo{height:18px;}
    
}
@media only screen and (max-height: 480px) and (max-width: 720px){
    #menu-list a, #menu-list a.lang {
        font-size:16px;
        height:30px;
        line-height: 30px;
    }
    
}
@media only screen and (min-width: 720px) and (max-height: 440px) {
    #down{display:none;}
}
@media only screen and (min-width: 720px) and (max-height: 210px) {
    #grass {height:30px;background-size:cover;}
    #menu{display:none;}
    img.work{ object-fit:contain;width:auto;}
    .myworks .slide{background:#a0d9d9;}
}

.iphone body{
    scroll-snap-type: none;
}