@import url('https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300;400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
  scroll-behavior: smooth;
  overflow: hidden; 
}

body {
  padding: -8px;
  height: 100%;
  margin-top: -8px;
  background-color: #eaeaea;
  -webkit-font-smoothing: antialiased
}

.backgroundmedigray{
  background-color: #e8e8ea;
}

html, body {
    font-size: 14px;
    max-width: 100%;
    overflow-x: hidden;
    margin-left: 0;
    margin-right: -12px;
}

::-moz-selection { 
  color: white;
  background: transparent;
  opacity: 100%;
}

::selection {
  color: white;
  background: transparent;
    opacity: 100%;
}

.indexbody{
  background-color: black;
}

.indexbodygray{
  background-color: #eaeaea;
}

/*.bodylightgray{
  background-color: #f6f6f6;
}*/

.indexbodyorange{
  background-color: #fc0000;
}

a.left {
    position: relative;
}

a.left:before {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #ff3000;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

a.left:hover:before {
  visibility: visible;
  width: 100%;
}

header{
position: sticky;
z-index: 4;
}

.heady{
  margin-top: 0.3em;
padding-left: 0em;
display: flex;
flex-wrap: wrap;
flex-direction: row;
vertical-align: top; 
z-index: 3;
width: 100%;
}

.heady-main{
margin-top: 0.3em;
padding-left: 0em;
display: flex;
flex-wrap: wrap;
flex-direction: row;
vertical-align: top; 
z-index: 2;
width: 100%;
margin-bottom: -0.5em;
}

.glowa{
    display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

/* unvisited link */
a:link {
color: #4e4e4e;

}

/* visited link */
a:visited {
color: #4e4e4e;
}

/* mouse over link */
a:hover {
  color: #fc0000;
}

/* selected link */
a:active {
  color: white;
}

strong{
  font-weight: 400;

}
.glowa1{
display: flex;
flex-wrap: wrap;
flex-direction: row;
position: absolute;
right: 0em;
margin-top: 1.1em;

}

.top-bg{
width: 100%;
height: 110px;
background-color: lightgray;
z-index: 1;
position: fixed;
}

.ew {
font-family: 'Inknut Antiqua', serif;
font-size: 1.6em;
font-weight: 100;
margin-left: 0.9em;
letter-spacing: 6px;
color: #6b00f3;
opacity: 1;
float: left;
line-height: 1.1em;
z-index: 99999999;
}

.ew-white {
font-family: 'Inknut Antiqua', serif;
/*font-family: 'Inknut Antiqua';
*/font-size: 1.6em;
font-weight: 400;
margin-left: 0.9em;
letter-spacing: 6px;
color: white;
opacity: 1;
float: left;
line-height: 1.1em;
z-index: 99999999;
}

.ew-gray {
font-family: 'Inknut Antiqua', serif;
/*font-family: 'Inknut Antiqua';
*/font-size: 1.6em;
font-weight: 400;
margin-left: 0.9em;
letter-spacing: 6px;
color: #eaeaea;
opacity: 1;
float: left;
line-height: 1.1em;
z-index: 99999999;
}

.socicon{
  margin-right: 1em;
/*  margin-bottom: 0.7em;
*/  width: 25px;
  float: left;
}

.socico{
  margin-right: 1em;
  width: 35px;
  float: left;
}

/*.hellotxt{
  animation-name: animate;
  -webkit-animation: 4.5s infinite animate;
  -moz-animation: 4.5s infinite animate;
  -o-animation: 4.5s infinite animate;
  animation: 4.5s infinite animate;
}*/

p span:before{
  -webkit-content: 'a visual artist';
  -moz-content: 'a visual artist';
  -o-content: 'a visual artist';
  content: 'a visual artist';

  -webkit-animation: 4.5s infinite animate;
  -moz-animation: 4.5s infinite animate;
  -o-animation: 4.5s infinite animate;
  animation: 4.5s infinite animate;
}


@-webkit-keyframes animate{
  0%{
    content: "a visual artist"}
    20%{
    content: "a photographer"}
      40%{
    content: "a graphic designer"}
        60%{
    content: "an illustrator"}
          80%{
    content: "a freelancer"}
            100%{
    content: "a visual artist"}
}

@-moz-keyframes animate{
  0%{
    content: "a visual artist"
  }
    20%{
    content: "a photographer"
  }
      40%{
    content: "a graphic designer"
  }
        60%{
    content: "an illustrator"
  }
          80%{
    content: "a freelancer"
  }
            100%{
    content: "a visual artist"
  }
}

@-o-keyframes animate{
  0%{
    content: "a visual artist"
  }
    20%{
    content: "a photographer"
  }
      40%{
    content: "a graphic designer"
  }
        60%{
    content: "an illustrator"
  }
          80%{
    content: "a freelancer"
  }
            100%{
    content: "a visual artist"
  }
}


@keyframes animate{
  0%{
    content: "a visual artist"
  }
    20%{
    content: "a photographer"
  }
      40%{
    content: "a graphic designer"
  }
        60%{
    content: "an illustrator"
  }
          80%{
    content: "a freelancer"
  }
            100%{
    content: "a visual artist"
  }
}


.ew-pink {
font-family: 'Inknut Antiqua', serif;
font-size: 1.6em;
font-weight: 400;
margin-left: 0.9em;
letter-spacing: 6px;
color: #f9238b;
opacity: 1;
float: left;
line-height: 1.1em;
}

.ew-orange {
font-family: 'Inknut Antiqua', serif;
/*font-family: 'Inknut Antiqua';
*/font-size: 1.6em;
font-weight: 400;
margin-left: 0.9em;
letter-spacing: 6px;
color: #fc0000;
opacity: 1;
float: left;
line-height: 1.1em;
}

.ew2 {
font-family: 'Inknut Antiqua', sans-serif;
margin-top: 0.65em;
/*font-family: 'Inknut Antiqua';
*/font-size: 1.8em;
font-weight: 800;
margin-left: 0.9em;
letter-spacing: 6px;
color: #6b00f3;
opacity: 1;
float: left;
/*border: 1px solid blue;
*/
}


.ew:hover{
color: white;
-webkit-transition: color 0.8s ease-in;
-ms-transition: color  0.8s ease-in;
transition: color  0.8s ease-in;
}


.icon{
/*padding-left: 0.5em;
*/float: left;
}

.opis{
font-family: 'Cormorant', serif;
  font-size: 2.1em;
  line-height: 1.4;
  font-weight: 400;
}


.opiss{
font-family: 'Cormorant', serif;
  font-size: 2.1em;
  line-height: 1.2;
  font-weight: 400;
    display: inline;
}

.opisi{
font-family: 'Cormorant', serif;
  font-size: 2.1em;
  font-weight: 400;
  font-style: italic;
  display: inline;
}

.menu{
padding-right: 2vw;
margin-right: 0.5em;
overflow: visible;
/*vertical-align: top;
*/}

.menu:hover > .yes svg { 
  transform: rotate(180deg); 
}

.yes svg{
/*  width: 50%;
  height: 50%;*/
float: left;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 57px;
}

li:hover > .yesmini svg { 
  transform: rotate(180deg); 
}

.yesmini svg{
/*  width: 50%;
  height: 50%;*/
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 70px;
    vertical-align: middle;
  }

.yesmini svg:hover{
transform: rotate(180deg);
}

/*.yesmini svg:active{
transform: rotate(100deg);
}*/

.menu:active > .yesmini svg { 
transform: rotate(100deg);
}

.yess svg:hover{
transform: rotate(180deg);
}

.yess svg{
/*  width: 50%;
  height: 50%;*/
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 200px;
}

#stroke-blue {
  stroke: #6b00f3;
}

#stroke-white {
  stroke: white;
}

#stroke-pink {
  stroke: #f9238b;
}

#stroke-orange {
stroke: #fc0000;
}

#stroke-gray {
  stroke: #eaeaea;
}

.yes svg:hover{
transform: rotate(180deg);
}

.yes svg:active{
transform: rotate(100deg);
}

.menu:active > .yes svg { 
transform: rotate(100deg);
}

.yess svg:hover{
transform: rotate(180deg);
}

.yess svg:active{
transform: rotate(100deg);
}

.menu:active > .yess svg { 
transform: rotate(100deg);
}

#txtblue{
  color: #6b00f3;
}
#bggray{
background-color: #eaeaea;
}
#bgblue{
background-color: #6b00f3;
}

#txtcream{
  color: #e9e6df;
}

#txtwhite{
  color: white;
}
#bgcream{
  background-color: #e9e6df;
}

#bgorange{
  background-color: #f65c31;
  }

 #bgearth{
  background-color: #c09082;
}

 #bggray{
  background-color: #3c3c3c;
}

 #bgblack{
  background-color: #131313
}

.tit1{
/*text-transform: uppercase;
*//*font-family: 'Montserrat', sans-serif;*/
/*font-size: 10pt;
*/font-weight: 500; 
padding-left: 0.5em;
padding-left: 4.5em;
position: center;
margin-top: 2%;
overflow: visible;
text-decoration: none;
color: #ff3000;
letter-spacing: 2px;
vertical-align: top;
}


#tit-white{
  color: white;
}

#tit-red{
  color: red;
}

#tit-blue{
  color: #6b00f3;
}

#tit-pink{
  color: #f9238b;
}

#tit-orange{
  color: #fc0000;
}

#tit-gray{
  color: #eaeaea;
}

a:hover{
/*color: red;
*/}

a{
text-decoration: none;
}


img {
  border: none;
  max-width: 100%;
  height: auto;
  display: block;
  transition: transform .3s ease-in;
  animation-iteration-count: 1;

}


h1{
font-family: 'Inknut Antiqua', serif;
font-size: 9vh;
font-weight: 400;
padding-right: 2.5em;
letter-spacing: 4px;
margin: 0;
line-height: 1em;
}

h2{
font-family: 'Inknut Antiqua', serif;
font-size: 3vh;
font-weight: 400;
padding-right: 2.5em;
letter-spacing: 4px;
margin: 0;
line-height: 1em;
padding-bottom: 2vh;
padding-top: 2vh;

}

h3{
font-family: 'Montserrat', sans-serif;
font-size: 0.5em;
font-weight: 500;
letter-spacing: 2px;
    margin-left: 0;
padding-left: 0;
}

h4{
    font-family: 'Inknut Antiqua', serif;
font-size: 3em;
font-weight: 400;
letter-spacing: 0.2em;
line-height: 1.3;
}

h5{
    font-family: 'Inknut Antiqua', serif;
font-size: 2.5em;
font-weight: 400;
letter-spacing: 0.2em;
line-height: 1.1;
}

h6{
    font-family: 'Inknut Antiqua', serif;
font-size: 0.9em;
font-weight: 400;
letter-spacing: 0.1em;
text-align: center;
}

.hh7{
font-family: 'Inknut Antiqua', serif;
font-size: 7.8vh;
font-weight: 400;
padding-right: 2.5em;
letter-spacing: 4px;
margin: 0;
line-height: 1.2em;
}

.toto{
  font-family: 'Montserrat', sans-serif;
font-size: .9em;
font-weight: 500;
letter-spacing: 0.5px;
line-height: 1.4em;
}


p {
  font-family: 'Montserrat', sans-serif;
font-size: 1em;
font-weight: 300;
letter-spacing: 0.5px;
line-height: 1.4em;
}

.p-mini{
  font-size: 0.7em;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.minimini{
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.2em;
}

.lekki{
  font-family: 'Montserrat', sans-serif;
font-size: 1em;
font-weight: 200;
letter-spacing: 0.5px;
line-height: 1.4em;
}

i {
  font-family: 'Montserrat', sans-serif;
font-weight: 300;
}

.full{
  width: 100%;
  margin-right: 5em;
}

.opiscredit{
font-family: 'Montserrat', sans-serif;
text-align: left;
font-weight: 300;
font-size: 0.8em;
float: left;
width: 100%;
padding-left: 6%; 
padding-right: 6%; 
margin-top: -10em;
}

.opiscreditright{
font-family: 'Montserrat', sans-serif;
text-align: right;
font-weight: 300;
font-size: 0.8em;
float: left;
width: 100%;
padding-left: 6%; 
padding-right: 6%; 
margin-top: -5em;
}

.smili{
float: right;
width: 2.5%;
}

.copyright{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 0.6em;
  float: left;
  text-align: center;
 margin-top: 3%;
color: #ff3000;
  margin-right: 3%;
  margin-bottom: 3%;
  width: 100%;
line-height: 1.7;
}


.opis2{
  text-align: right;
  text-align: top;
  font-weight: 400;
  font-size: 1em;
  color: #fc0000;
  width: 50%;
  float: right;
}

.almost{
  width: 30%;
  margin-left: 35%;
margin-top: 12%;
    }

.opis3{
  font-weight: 400;
  font-size: 1em;
  color: #fc0000;
  padding-bottom: 1em;
top: -260px;

}

.foot{
padding-top: 2.5em;
padding-right: 0.9em;
/*background-color: black;
*/font-family: 'Montserrat', sans-serif;
font-size: 1em;
font-weight: 300;
letter-spacing: 0.5px;
line-height: 1.4em;
padding-bottom: 6em;
}

.next a{
  margin-right: -1.5em;
    height: 1.7em;
  position: fixed;
  right: 0;
  margin-top: 37vh;
  transform: rotate(90deg);
  padding-right: 5px;
  padding-left: 7px;  
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  z-index: 2;
     box-sizing: border-box;
   -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
    -webkit-transition: background-color 0.2s 0s ease-in;
-moz-transition: background-color 0.2s 0s ease-in;
-o-transition: background-color 0.2s 0s ease-in;
transition: background-color 0.2s 0s ease-in;
}

/*next white*/
#next-white a{
  background-color: transparent;
  color: #f5f5f5;
  border: 0.5px solid #f5f5f5;
}

#next-white a:hover{
  background-color: white;
  color: #9a9896;
  border: 0.5px solid white;
}
/*next white*/

/*next orange*/
#next-orange a{
  background-color: transparent;
  color: #ff3000;
  border: 0.5px solid #ff3000;
}

#next-orange a:hover{
  background-color: #ff3000;
  color: white;
  border: 0.5px solid #ff3000;
}
/*next white*/

/*next blue*/
#next-blue a{
  background-color: #6b00f3;
  color: white;
  border: 0.5px solid #6b00f3;
}

#next-blue a:hover{
  background-color: white;
  color: #6b00f3;
  border: 0.5px solid #6b00f3;
}
/*next blue*/

/*next red*/
#next-pink a{
  background-color: transparent;
  color: #f9238b;
  border: 0.5px solid #f9238b;
}

#next-pink a:hover{
    background-color: #f9238b;
  color: white;
  border: 0.5px solid #f9238b;
}
/*next red*/


.next a:hover{
  margin-right: -1.5em;
  height: 1.7em;
  position: fixed;
  right: 0;
  margin-top: 37vh;
  background-color: white;
  color: #6b00f3;
  padding-right: 5px;
  padding-left: 7px; 
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  z-index: 2;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 0.5px solid #6b00f3;
}

.arrow{
position: fixed;
right: 1.3vw;
bottom: 2vh;
z-index: 200;
mix-blend-mode: color-dodge;
color: #6b00f3;
}

.arrow:hover{
 fill: red;
}

.previous a{
height: 1.7em;
position: fixed;
display: block;
margin-left: -2.3em;
margin-top: 37vh;
transform: rotate(-90deg);
padding-right: 4px;
padding-left: 7px;
z-index: 1;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: background-color 0.2s 0s ease-in;
-moz-transition: background-color 0.2s 0s ease-in;
-o-transition: background-color 0.2s 0s ease-in;
transition: background-color 0.2s 0s ease-in;
}

.previous a:hover{
height: 1.7em;
position: fixed;
display: block;
margin-left: -2.3em;
margin-top: 37vh;
transform: rotate(-90deg);
padding-right: 4px;
padding-left: 7px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/*previous white*/
#previous-white a{
  background-color: transparent;
  color: #f5f5f5;
  border: 0.5px solid #f5f5f5;
}

#previous-white a:hover{
  background-color: white;
  color: #9a9896;
  border: 0.5px solid white;
}
/*previous white*/

/*previous orange*/
#previous-orange a{
  background-color: transparent;
  color: #ff3000;
  border: 0.5px solid #ff3000;
}

#previous-orange a:hover{
  background-color: #ff3000;
  color: white;
  border: 0.5px solid #ff3000;
}
/*next white*/

/*previous pink*/
#previous-pink a{
  background-color: transparent;
  color: #f9238b;
  border: 0.5px solid #f9238b;
}

#previous-pink a:hover{
    background-color: #f9238b;
  color: white;
  border: 0.5px solid #f9238b;

}
/*previous red*/

/*previous blue*/
#previous-blue a{
  background-color: #6b00f3;
  color: white;
  border: 0.5px solid #6b00f3;
}

#previous-blue a:hover{
  background-color: white;
  color: #6b00f3;
  border: 0.5px solid #6b00f3;
}
/*previous blue*/

* {
  box-sizing: border-box;
}



.content{
margin-right: -1.4em;
margin-left: -2em;
margin-top: 7%;
}

.content2{
/*  position: absolute; 
*//*  top: 0; 
*/  left: 0; 
  min-width: 100vw;
  bottom: 0;
}

.clearfix{
  margin-top: 3em;
/*  margin-left: 4em;
  margin-right: 2.5em;*/

}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
  margin-right: -12px;
}

.clearfix2{
  margin-top: 3em;
/*  margin-left: 4em;
  margin-right: 2.5em;*/

}

.clearfix2::after {
  content: "";
  clear: both;
  display: table;
  margin-right: -12px;
}

.gallery{
    padding-top: 0em;
    margin-left: 0.5em;
    margin-right: 0.5em;
}

/*photo scrolling effect*/
.inline-photo {
opacity: 0;
-webkit-transition: opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2.5s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1.5s -0.1s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2s -0.1s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;

}

.inline-photo.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect*/

/*photo scrolling effect speed 2*/
.inline-photo2 {
opacity: 0;
-webkit-transition: opacity .7s .25s ease-out,
            -webkit-transform 4s .4s cubic-bezier(0,1,.3,1);
transition: opacity .7s .25s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 4s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .25s ease-out;
transition: transform 4s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .25s ease-out,
            -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo2.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-4em);
          transform:  translateY(-4em);
}
/*photo scrolling effect speed 2*/

/*photo scrolling effect speed 3*/
.inline-photo3 {
opacity: 0;
-webkit-transition: opacity .7s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: opacity .7s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .15s ease-out;
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .15s ease-out,
            -webkit-transform 2s .15s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo3.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-3em);
          transform:  translateY(-3em);
}
/*photo scrolling effect speed 3*/

/*photo scrolling effect speed 4*/
.inline-photo4 {
opacity: 0;
-webkit-transition: opacity 1s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out;
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out,
            -webkit-transform 2s .15s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo4.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 4*/

/*photo scrolling effect speed 5*/
.inline-photo5 {
opacity: 0;
-webkit-transition: opacity 1s .25s ease-out,
            -webkit-transform 2.5s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .25s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2.5s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .25s ease-out;
transition: transform 2.5s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out,
            -webkit-transform 2.5s .25s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo5.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 5*/

/*photo scrolling effect speed 6*/
.inline-photo6 {
opacity: 0;
-webkit-transition: opacity 1s .35s ease-out,
            -webkit-transform 3s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .35s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 3s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .35s ease-out;
transition: transform 3s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .35s ease-out,
            -webkit-transform 3s .35s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo6.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 6*/


.reka1{
  padding-top: 2vw;
  padding-left: 8vw;
    margin-top: -90px;
  z-index: 100;
}
.reka2{
  margin-left: -120px;
    z-index: 100;

}

#reka3{
  margin-top: 95vh;
  width: 250px;
  padding: 10vh;
}

/*img #reki{
  width: 250px;
}*/

#reki{
    width: 120px;
    margin-top: -2vw;
  margin-left: 15%;
  margin-right: 30%;
}

#medi1{
width: 70%;
}

#medi11{
width: 100%;
margin: 0;
z-index: -10;
}

/*tytuł*/
#medi2{
width: 50%;
padding: 1.5em;
margin-bottom: 7em;
margin-left: 10vw; 
/*border: 1px solid black;
*/}


#medi3{
width: 55%;
}

#medi4{
width: 45%;
z-index: -2;
padding-left: 5%;

}

#medi5{
width: 70%;
}

#medi7{
width: 100%;
}

#medi8{
  width: 24%;
margin-left: 38%;
margin-left: 38%;
margin-top: -80px;
}

#medi9{
width: 40%;
margin-left: 50vw;
margin-top: -12em;
}

#inframe{
  width: 33.3%;
    float: left;
    padding-left: 1em;
}

#acojesli{
  width: 33.33%;
      float: left;
      box-sizing: padding-box;
}

#dwie{
  width: 40%;
    float: left;
    padding-left: 1em;
}

#trzy{
  width: 33.3%;
    float: left;
}

#inframeleft{
padding-right: 1em;
  width: 33.3%;
      float: left;

}

#tote1{
  width: 32%;
}

#tote2{
width: 42%;
}

#tote22{
width: 42%;
float: left;
margin-left: 10%;
}

#inframebig{
  width: 100%
}

#tote3{
width: 30%;
margin-top: 13em;
margin-left: -5em;
}

#tote4{
  width: 38%;
  margin-left: 10%;
}

#inframebig{
  width: 60%
}

#description{
  mix-blend-mode: screen;
  position: relative;
  z-index: 20;
  padding: 5%;
   margin-top: 10em;
  width: 40%;
}

#placebo1{
width: 70%;
padding-right: 11em;
padding-left: 11em;
}

#placebo2{
    width: 33%;
}

#placebo2u{
    width: 33%;
}

#placebo3{
  padding-top: 5em; 
  width: 67%;
}

#placebo4{
  width: 38%;
}

#placebo4e{
  width: 38%;
}

#placebo4u{
  width: 38%;
  margin-left: 34%;
}

#placebo5{
  width: 28%;
}

#placebo5e{
  width: 28%;
}

#procent4{
  width: 25%;
}

#tamta{
  width: 25%;
}

#procent44{
  margin-left: 50%;
  width: 25%;
}

#procent11{
  margin-left: 30%;
  width: 40%;
}

#procent11c{
  margin-left: 30%;
  width: 40%;
}

#placebo33{
  width: 70%;
}

#placebo22{
 width: 30%;
}

#uszy1{
  width: 40%;
}

#uszy1i{
  width: 40%;
}

#uszy1j{
  width: 40%;
}

#uszy1ii{
  width: 40%;
}

#uszy1p{
  width: 40%;
}

#uszy1u{
  width: 40%;
}

#tinytiny{
  width: 40%;
}

#uszy2{
  width: 60%;
}

#uszy2i{
  width: 50%;
}

#uszy2ii{
  width: 50%;
}

#uszy3{
  width: 69%;
}

#uszy4{
  width: 30%;
}

#uszy4l{
  width: 30%;
  margin-left: 30%;
}

#uszy5{
  width: 16%;
  margin-top: 8%;
  margin-left: 15%;
}

#uszy6{
  width: 66%;
}

#uszy7{
  width: 20%;
  margin-top: 6%;
  margin-bottom: 6%;
  margin-left: 20%;
}

#tourist1{
width: 13.5%;
margin-left: 2.7%;
margin-bottom: 8em;
padding: 0;
margin-top: 30vh;
float: left;
display: block;
}

#tourist1a{
width: 13.5%;
margin-left: 2.7%;
margin-bottom: 8em;
padding: 0;
margin-top: 30vh;
float: left;
display: block;
}

.tourbg {
margin-top: -3em;
width: 101%;
padding-bottom: 100vh;
background-color: #6b00f3;
margin-right: -8px;
margin-left: -8px;
}


.acobg {
margin-top: -3em;
padding-bottom: 100vh;
background-color: #f4e1e1;
margin-right: -8px;
margin-left: -8px;
}

#tourist2{
width: 65%;
}

#tourist3{
width: 30%;
margin-left: 2%;
}

#tourist4{
width: 70%;
}

#tourist4t{
width: 70%;
}

#tourist5{
width: 40%;
}

#tourist5l{
width: 40%;
}

#tourist5p{
width: 40%;
}

#tourist6{
width: 60%;
}

#tourist6p{
width: 60%;
}

#tourist7{
width: 20%;
margin-left: 5%;
margin-right: 5%;
margin-top: 6em;
}

#aco{
height: 70%;
padding-left: 15%;
}

#foto1{
  width: 55%;
}

#foto2{
  width:  33.33%;
  padding-top: 20%;
    padding-bottom: 20%;
}

.boldtxt{
font-weight: 800;
}


.logos{
  width: 20%;
  position: absolute;
  margin-top: 15vw;
  left: 40%;
  margin-right: -40%;
  margin-bottom: 20vw;
}

.logotxt{
  position: absolute;
  bottom: 0
}

.logoyear{
  position: absolute;
right: 0;
bottom: 0
}

#no40{
width: 40%;
}

#no40po{
  width: 40%;
}

#no40ke{
width: 40%;
}

#no40i{
width: 40%;
}

#no40n{
width: 40%;
}

#no40l{
width: 40%;
}

#no50l{
width: 60%;
}

#no60n{
width: 60%;
}

#no40t{
width: 50%;
margin-top: 20%;
}


#no40k{
width: 45%;
margin-top: 10%;
margin-right: 20%;
}

#no40dd{
width: 40%;
margin-left: 20%
}

#no40d{
width: 40%;
}

#no40j{
width: 40%;
margin-top: 10%;
margin-left: 10%;
}

#no40p{
width: 60%;
margin-left: 50%;

}

#no40z{
width: 40%;
margin-left: 25%;
}

#no30d{
width: 30%;
margin-right: 10%;
margin-top: 10%;
margin-left: 10%;

}
 
#no20z{
width: 10%;
margin-left: 20%;
margin-top: -40%;

}

#no35w{
width: 35%;
margin-left: 15%;
margin-top: 15%;
margin-bottom: 15%;
}

#no35m{
width: 35%;
margin-right: 15%;
margin-top: 15%;
margin-bottom: 15%;
}

#no60z{
width: 55%;
margin-left: 45%;
}

#no60{
width: 60%;
}

#u60z{
width: 50%;
}

#no60i{
width: 60%;
}

#no60j{
width: 60%;
}

#no30{
width: 30%;
}

#no30m{
width: 30%;
margin-right: 10%;
margin-left: 10%;
margin-top: 7%;

}

#no30l{
width: 30%;
margin-left: 40%;
}

#no30s{
width: 20%;
margin-left: 10%;
margin-top: 6%;
margin-right: 10%;
}

#no45{
width: 45%;
}

#no50c{
width: 40%;
margin-left: 30%;
}

#no50cc{
width: 40%;
margin-left: 30%;
padding-top: 10%;
padding-bottom: 10%;
}

#no35{
width: 35%;
}

#no35po{
  width: 35%;
}

#no35e{
width: 25%;
 margin-left: 67%;
 margin-top: 7%;
}

#no35i{
width: 25%;
 margin-left: 67%;
 margin-top: 7%;
}

#no35t{
width: 35%;
margin-bottom: 5%;
}

#no40f{
width: 40%;
margin-bottom: 5%;
}


#no75{
width: 75%;
}

#no75s{
width: 90%;
  margin-left: 70%;
}

#no25{
width: 25%;
}

#no25s{
width: 30%;
margin-left: 5%;
margin-top: 30%;
}

#no25z{
width: 25%;
margin-left: 20%;
margin-top: -13%;
}

#no65, #no65p{
  width: 65%;
}

#no65s{
  width: 65%;
  margin-left: 10%;
}

#no70s{
  width: 30%;
  margin-left: 0;
  margin-top: 20%;
}

#no70{
  width: 70%;
}

#no55{
  width: 55%;
}

#no55l{
  width: 55%;
}

#no32{
  width: 32.5%;
}

#no45r{
width: 40%;
padding-top: 20%;
}

#no45l{
width: 80%;
padding-left: 10%;
}

#no50{
width: 50%;
}

#no50po{
  width: 50%;
}

#no50ee{
width: 50%;
margin-bottom: 4%;
padding-right: 1em; 
float: left;
display: inline-block;
}

#no50e{
width: 50%;
margin-bottom: 4%;
padding-left: 1em; 
float: left;
display: inline-block;
}

#no50r{
width: 50%;
padding-top: 20%;

}

#no100{
  width: 100%;
}

#kto{
  margin-left: 4%;
  margin-top: 5%;
  width: 100%;
}

.mini{
  float: left;
  position: relative;
  display: block;
}

.mini-pho{
  float: left;
  position: relative;
  display: block;
}

/*.iii{
  width: 100%;
}*/

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease-in-out;
  background-color: #eaeaea;
  border: solid #fc0000 0.7px;
}

.mini:hover .overlay {
  opacity: 1;
}

.mini-pho:hover .overlay {
  opacity: 1;
}

.text {
  color: #fc0000;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}



.shape1{
  margin-top: 19%;
  margin-left: 75%;
    position: absolute;
    display: block;
      z-index: 10;

}

.shape2{
  margin-top: 85%;
  margin-left: -10%;
   z-index: 10;
   position: absolute;

}

.shape3{
  margin-top: 9%;
  margin-left: -2%;
    position: absolute;
  z-index: 10;

}

.shape4{
margin-top: 75%;
margin-left: 80%;
position: absolute;
z-index: 10;
width: 58px;
}

.shape5{
  margin-top: 50%;
  margin-left: 44%;
  position: absolute;
  z-index: 10;
}


img#Library{
    transition: 1s;
}


#Library{
    position: absolute;
}

#Library:before{
    height: 200px;
    width: 200px;
   background: url("https://i.ibb.co/RyjNmjR/see.png");
    background-size: 200px 200px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

#Library:after{    
  height: 200px;
    width: 200px;
   background: url("https://i.ibb.co/k9rjQjm/see1.png");
    background-size: 200px 200px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
            opacity: 0;
}

#Library:hover:after{
      height: 200px;
    width: 200px;
    opacity: 1;
}

#Library:hover:before{
      height: 200px;
    width: 200px;
    opacity: 0;
}

/*buy button*/

img#buy{
    transition: 1s;
}


#buy{
    position: absolute;
}

#buy:before{
    height: 155px;
    width: 155px;
   background: url("https://i.ibb.co/WWyQvp4/buyy.png");
    background-size: 155px 155px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

#buy:after{    
  height: 155px;
    width: 155px;
   background: url("https://i.ibb.co/mymvzK1/buyb-01.png");
    background-size: 155px 155px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
            opacity: 0;
}

#buy:hover:after{
      height: 155px;
    width: 155px;
    opacity: 1;
}

#buy:hover:before{
      height: 155px;
    width: 155px;
    opacity: 0;
}

/*see button*/

img#see{
    transition: 1s;
}


#see{
    position: absolute;
}

#see:before{
    height: 155px;
    width: 155px;
   background: url("https://i.ibb.co/pdmMXRL/sii-01.png");
    background-size: 155px 155px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

#see:after{    
  height: 155px;
    width: 155px;
   background: url("https://i.ibb.co/1X89Htw/sii-01.png");
    background-size: 155px 155px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
            opacity: 0;
}

#see:hover:after{
      height: 155px;
    width: 155px;
    opacity: 1;
}

#see:hover:before{
      height: 155px;
    width: 155px;
    opacity: 0;
}


/****************** NAVIGATION ******************/
nav {
    right: 0;
    position: relative;
    top: -2.8em;
    width: 100%;
    z-index: 9999;
}

/*** INPUT ***/
nav input {
    opacity: 0;
    position: absolute;
    z-index: -1;
}

/*** LABEL ***/
nav label {
    cursor: pointer;
    display: block;
    font: 1.7em 'Lato', sans-serif;
    margin-right: 1.3em;
        margin-top: 0.25em;

}

/* Hamburger Icon WHITE */
.menu-icon-white,
.menu-icon-white:before,
.menu-icon-white:after {
    background: white;
    border-radius: 0.02em;
    height: 0.085em;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

/* Hamburger Icon ORANGE */
.menu-icon-orange,
.menu-icon-orange:before,
.menu-icon-orange:after {
    background: #fc0000;
    border-radius: 0.02em;
    height: 0.085em;
    transition: all 0.2s ease-in-out;
    width: 100%;
}
/* Hamburger Icon BLUE */
.menu-icon-blue,
.menu-icon-blue:before,
.menu-icon-blue:after {
    background: #6b00f3;
    border-radius: 0.02em;
    height: 0.085em;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

/* Hamburger Icon PINK */
.menu-icon-pink,
.menu-icon-pink:before,
.menu-icon-pink:after {
    background: #f9238b;
    border-radius: 0.02em;
    height: 0.085em;

    transition: all 0.2s ease-in-out;
    width: 100%;
}

.menu-icon {
    display: inline-block;
    max-width: 1em;
    position: relative;
}

nav label .menu-icon {
    float: right;
}

.menu-icon:before,
.menu-icon:after {
    content: '';
    left: 0;
    position: absolute;
}

.menu-icon:before {
    top: -0.35em;
}

.menu-icon:after {
    bottom: -0.36em;
}

/* Close Icon */
nav input[type=checkbox]:checked + label .menu-icon {
    background: transparent;
}

nav input[type=checkbox]:checked + label .menu-icon:before {
    top: 0;
    transform: rotate(-45deg);
}

nav input[type=checkbox]:checked + label .menu-icon:after {
    bottom: 0;
    transform: rotate(45deg);
}

/*ul{
display: none;
-webkit-display: none;

}

nav input:checked ~ ul {
  display: block;
  -webkit-display: block;

}
*/

ul{
display: none;
-webkit-display: none;

}

nav input:checked ~ ul {
  display: block;
  -webkit-display: block;

}

/*** MENU ***/
/* Overlay */
nav input:checked ~ #overlay {
    background: #eaeaea;
    bottom: 0;
    left: 0;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw;
    z-index: -1;
}

nav input:checked ~ #overlay-white {
    background: black;
    bottom: 0;
    left: 0;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw;
    z-index: -1;
}


#nav-blue a{
  stroke: #6b00f3;
}

#nav-white a{
  color: white;
}

#nav-pink a{
  stroke: #f9238b;
}

#nav-gray a{
  stroke: #eaeaea;
}


/* List */
nav ul {
    font-size: 1.8em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
  letter-spacing: 2px;
    list-style: none;
    margin: 0;
    max-height: 0;
    opacity: 0;
/*    overflow: hidden;
*/    padding: 0;
    text-align: center;
}


.menu1 {
text-align: center;
}

.menu2 {
display: inline-block; 
text-align: left;
margin-top: 0em;
margin-left: 1.5em;
}

#menu-orange{
color: #fc0000;
}

#menu-blue{
  color: #6b00f3;
}

#menu-white {
  color: white;
}

#menu-pink {
  color: #f9238b;
}

#menu-gray {
  color: #eaeaea;
}

nav input:checked ~ ul {
/*    margin: 1em;
*/    max-height: inherit;
    opacity: 1;
}

nav ul > li {
    margin: 1em 0;
}

nav ul a {
    text-decoration: none;
}

nav ul a:hover {
}

/* Social Media */
nav ul#social-media > li {
    display: inline-block;
    font-size: 1.5em;
    margin: 0.5em;
}

hr{
    border-top: 1px solid red;
    width: 100vw;
    margin: 0;
}

/*// Big screens */    
@media only screen and (min-width: 992px) {

.box {
  float: left;
  width: 50%;
  padding: 1em;
}

.boxx {
  float: left;
  width: 50%;
  -webkit-transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1), 
  -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  will-change: transform;
  animation-iteration-count: 1;
}


#bg {
  position: absolute; 
  top: 0; 
  left: 0; 
  /* Preserve aspet ratio */
  min-width: 100vw;
  z-index: -99999;
  -webkit-z-index: -99999;

}

.opisr{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 0.8em;
/*  float: left;
*/  padding-right: 4em;
line-height: 1.7;
}

.spacee{
  margin-top: 1.5em;
}

#medi6{
width: 15%;
margin-top: -40em;
margin-left: 68%;
}

hr{
    border-top: 1px solid red;
}
/*tytuł*/
#medi2-3{
width: 50%;
padding: 1.5em;
/*margin-bottom: em;
*/
margin-left: 10vw; 
/*border: 1px solid black;
*/}

.bg3 {
  float: left;
  margin-top: -100px; 
  left: 0; 
  width: 33.33%;
  padding-right: 1em;
}

.bg33 {
  float: left;
  left: 0; 
margin-right: -1em;
}

/*tytuł-nizej*/
#medi2-2{
margin-top: 60%;
margin-bottom: 4%;
width: 60%;
padding-left: 6%; 
float: left;
display: inline-block;
}

#medi2-niz{
margin-top: 70%;
margin-bottom: 10vh;
width: 60%;
padding-left: 6%; 
float: left;
display: inline-block;
}


.filler{
display: none;
}


#storr{
margin-top: 24vh;
width: 100%;
float: left;
display: inline-block;
}

#right{
 margin-top: 64%;
width: 40%;
padding-left: 6%; 
/*float: left;
*/display: inline-block;
}


#right0{
width: 40%;
padding-left: 6%; 
/*float: left;
*/display: inline-block;
}

#right00{
 margin-top: 60%;
width: 40%;
padding-left: 6%; 
/*float: left;
*/display: inline-block;
}

.ew-orange2 {
font-family: 'Inknut Antiqua', serif;
font-size: 5em;
font-weight: 500;
letter-spacing: 2px;
/*color: #ff2d00;
*/opacity: 1;
float: none;
line-height: 1.3em;
margin-top: -0.1em;
  margin-top: 0.3em;
  margin-bottom: 0em;
   display:inline;
}

.hellotxt{
font-family: 'Cormorant', serif;
  font-size: 6vw;
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0.2em;
}

.photoegi img{
width: 100%;
margin-top: 0;
/*padding-bottom: 20vh;
*/padding-left: 60%;
position: absolute;
z-index: -2;

}

.parent{
    position: relative;
    width: 100%;
    height: 100vh;
}


.hello{
padding-top: 4%;
padding-bottom: 6%;
padding-left: 4%;
width: 100%;
height: 100vh;
margin-right: 0;
float: left;
position: absolute;
}


.helloinne{
margin-top: 32%;
margin-left: 48%;
width: 100%;
height: 100%;
margin-right: 0;
position: absolute;
z-index: 10;
}

.shapes{
  float: left;
  margin-left: 55%;
  width: 45%;
  position: absolute;
}

.opis1{
  font-size: 1.1em;
  color: #fc0000;
  float: left;
  width: 33.33%;
text-align: left;
padding-left: 1.8em;
}

.opiss2{
  font-size: 0.5em;
  font-weight: 500;
  color: #fc0000;
  float: left;
    width: 33.33%;
text-align: center;
}

.opis3{
  font-size: 1.1em;
  color: #fc0000;
  float: left;
 text-align: right;
   width: 33.33%;
   padding-right: 0.9em;
}

.opisy{
     padding-top: 3em;
     padding-bottom: -4em;
}

.mini{
  width: 33.33%;
}

.filler{
  width: 33.33%;
}

.mini-pho{
  width: 50%;
  float: left;
}


#medi2-3{
  margin-top: 105vh;
  width: 50%;
padding: 1.5em;
margin-left: 10vw; 
}

#medi2{
margin-top: 105vh;
}

#middletxt{
width: 100%;
margin-bottom: 4%;
margin-top: 7%;
padding-left: 7%; 
padding-right: 60%; 
}

#middletxt2{
width: 100%;
margin-bottom: 4%;
margin-top: 7%;
padding-left: 7%; 
padding-right: 40%; 
}

#inframek{
  width: 33.33%;
 margin-bottom: 1em;
}


.logo-bg1{
width: 100vw;
height: 100vh;
margin-left: -8px;
margin-right: -8px;
}

.logo{
  padding-right: 37vw;
  padding-left: 37vw;
  padding-top: 28vh;
}

.logo-d{
  float: left;
  margin-right: 8%;
  margin-left: 8%;
  margin-bottom: 2em;
  width: 17%;
  padding: 1em;
}

.logobox{
  margin-top: 10em;
  margin-right: 4em;
  margin-left: 4em;
   margin-bottom: 7em;

}


.logotxt1{
  letter-spacing: 2px;
  padding-bottom: 0;
  margin-bottom: 2em;
    margin-left: 4%;
    font-size: 0.7em;
    font-weight: 500;
    margin-bottom: -0.6em;
}

.logotxt2{
  letter-spacing: 2px;
  margin-left: 4%;
  font-size: 0.7em;
  font-weight: 300;
}

.logotxt3{
  letter-spacing: 2px;
  margin-right: 5%;
  font-size: 0.7em;
  font-weight: 500;
  float: right;
}

.logoopis{
  margin-top: 14vh;
}

.container{
display: none;
}

/*abbout big
*/.opiso{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 300;
  font-size: 0.9em;
  float: left;
  margin-right: 3%;
  margin-bottom: 3%;
  width: 25%;
line-height: 2;
}


.opiso1{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 300;
  font-size: 0.9em;
  float: left;
  margin-right: 3%;
  margin-bottom: 3%;
  width: 40%;
line-height: 2;
}

.strzala{
font-family: 'Inknut Antiqua', sans-serif;
font-size: 1.7em;
line-height: 2.4;
display: inline-block;
}

#aboutt{
margin-top: 23vh;
margin-bottom: 10vh;
width: 100%;
padding-left: 6%; 
float: left;
display: inline-block;
}

.strz{
  display: inline-block;
  width: 20px;
}

.strz1{
  display: inline-block;
  width: 35px;
}

.opisg{
font-family: 'Montserrat', sans-serif;
text-align: left;
font-weight: 300;
font-size: 0.8em;
float: left;
margin-left: 80%;
margin-top: 11em;
transform: rotate(90deg);
z-index: -2;
position: absolute;
width:  20%;
}

sup{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 0.4em;
  display: inline;
}

.co{
  float: left;
  width: 25%;
  margin-bottom: 7%;
}

.czas{
  margin-top: 5px;
}


.strzalared{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 0.8em;
  font-weight: 600;
  display: inline;
    color: #fc0000;
    margin-left: 2.5em;
}


.strzala2{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 1.9em;
  display: inline;
}

.strzala3{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 1em;
      transform: rotate(15deg);
        z-index: -1;
          letter-spacing: 3px;
            font-weight: 400;
  font-size: 1em;
/*  color: #fc0000;
*/  padding-bottom: 1em;
top: -260px;
}

.strzala3 a{
  color: red; !important;
}

.strzala3 a:hover{
  color: gray; !important;
}

.story{
font-family: 'Cormorant', serif;
  font-size: 1.8em;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 50%;
  padding-right: 5%;
    display: inline;
}

em { font-style: italic;
  font-family: 'Cormorant', serif;
  font-weight: 400;
 } 

.who{
font-family: 'Cormorant', serif;
  font-size: 2.2em;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 67%;
  padding-right: 5%;
    display: inline;
}

.feel{
font-family: 'Cormorant', serif;
  font-size: 1.5em;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 70%;
    display: inline;
      float: left;
  width: 50%;
  padding-right: 5%;
}

#teraz{
font-family: 'Cormorant', serif;
  font-size: 2.2em;
  color: #333333;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 100%;
  padding-left: 30%;
    padding-right: 20%;
    margin-top: 20%;
  padding-bottom: 7%;  
  position: relative;
    display: inline;
}

.arr{
z-index: -10;
  position: absolute;
  width: 120px;
  top: -0.2em;
  margin-left: -1.8em;
/*  margin-right: 0.2em;
*/}
}
/*// Medium devices (tablets, 768px and up)
*/      
@media only screen and (max-width: 77em) {

/*photo scrolling effect*/
.inline-photo {
opacity: 0;
-webkit-transition: opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2.5s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1.5s -0.1s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2s -0.1s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;

}

.inline-photo.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect*/

/*photo scrolling effect speed 2*/
.inline-photo2 {
opacity: 0;
-webkit-transition: opacity .7s .25s ease-out,
            -webkit-transform 4s .4s cubic-bezier(0,1,.3,1);
transition: opacity .7s .25s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 4s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .25s ease-out;
transition: transform 4s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .25s ease-out,
            -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo2.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-4em);
          transform:  translateY(-4em);
}
/*photo scrolling effect speed 2*/

/*photo scrolling effect speed 3*/
.inline-photo3 {
opacity: 0;
-webkit-transition: opacity .7s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: opacity .7s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .15s ease-out;
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .15s ease-out,
            -webkit-transform 2s .15s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo3.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-3em);
          transform:  translateY(-3em);
}
/*photo scrolling effect speed 3*/

/*photo scrolling effect speed 4*/
.inline-photo4 {
opacity: 0;
-webkit-transition: opacity 1s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out;
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out,
            -webkit-transform 2s .15s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo4.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 4*/

/*photo scrolling effect speed 5*/
.inline-photo5 {
opacity: 0;
-webkit-transition: opacity 1s .25s ease-out,
            -webkit-transform 2.5s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .25s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2.5s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .25s ease-out;
transition: transform 2.5s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out,
            -webkit-transform 2.5s .25s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo5.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 5*/

/*photo scrolling effect speed 6*/
.inline-photo6 {
opacity: 0;
-webkit-transition: opacity 1s .35s ease-out,
            -webkit-transform 3s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .35s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 3s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .35s ease-out;
transition: transform 3s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .35s ease-out,
            -webkit-transform 3s .35s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo6.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 6*/

#acojesli{
  width: 50%;
      float: left;
      box-sizing: padding-box;
}

.clearfix2::after {
  display: none;
}
.box {
  float: left;
  width: 50%;
  padding: 1em;
}

.boxx {
  float: left;
  width: 100%;
  -webkit-transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1), 
  -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  will-change: transform;
  animation-iteration-count: 1;
}

#bg {
  position: absolute; 
  top: 0; 
  left: -15vw; 
  /* Preserve aspet ratio */
  min-width: 130vw;
}

#medi6{
width: 15%;
margin-top: -30em;
margin-left: 72%;
}

.box {
  float: left;
  padding: 1em;
}

.helloinne{
margin-top: 35%;
margin-left: 50%;
width: 100%;
height: 100%;
margin-right: 0;
position: absolute;
z-index: 10;
}

#medi9{
width: 43%;
margin-left: 50%;
margin-top: -9em;
}

#no40dd{
width: 40%;
margin-left: 10%;
}

#tote1{
  width: 60%;
}

#tote2{
width: 50%;
padding: 4em;
float: left;
}

#tote22{
width: 50%;
padding: 4em;
float: left;
margin-left: 0;
}

#tote3{
width: 30%;
margin-top: 13em;
margin-left: -5em;
}

#tote4{
  width: 38%;
  margin-left: 40%;
}

#no40n{
width: 40%;
}

#no40l{
width: 40%;
}

#no60n{
width: 60%;
}

#no30n{
width: 30%;
}

#no55l{
  width: 60%;
margin-left: 20%;
margin-right: 20%;
}

#procent11{
  margin-left: 20%;
  width: 60%;
}


.tourbg {
margin-top: -3em;
width: 101%;
padding-bottom: 85vh;
background-color: #6b00f3;
margin-right: -8px;
margin-left: -8px;
margin-bottom: 6em;
}

.hh7{
font-family: 'Inknut Antiqua', serif;
font-size: 3.7em;
font-weight: 600;
padding-right: 2.5em;
letter-spacing: 4px;
margin: 0;
line-height: 1.3em;
}

.ew-orange2 {
font-family: 'Inknut Antiqua', serif;
font-size: 3.8em;
font-weight: 500;
letter-spacing: 4px;
/*color: #ff2d00;
*/opacity: 1;
float: none;
line-height: 1.3em;
margin-top: -0.1em;
margin-bottom: 0.8em;
  margin-top: 0.3em;
  margin-bottom: -0.3em;
}

.photoegi img{
width: 100%;
margin-top: 0;
/*padding-bottom: 20vh;
*/padding-left: 60%;
position: absolute;
z-index: -2;
}

.hellotxt{
font-family: 'Cormorant', serif;
  font-size: 5em;
  font-style: italic;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0.2em;
}

.bg3 {
  float: left;
  margin-top: -100px; 
  left: 0; 
  width: 50%;
  padding-right: 1em;
}

.bg33 {
  float: left;
  left: 0; 
margin-right: -1em;
}

#fotoout1{
  display: none;
}

.opisr{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 0.8em;
  float: left;
margin-right: 6em;
line-height: 1.7;
}

#middletxt2, #middletxt{
width: 100%;
margin-bottom: 4em;
margin-top: 6em;
padding-left: 10%; 
padding-right: 30%; 
}

#no50cc{
width: 80%;
margin-left: 10%;
padding-top: 10%;
padding-bottom: 10%;
}


#storr{
margin-top: 7vh;
width: 100%;
float: left;
display: inline-block;
margin-bottom: 5em;
}

#right{
margin-top: 2%;
width: 100%;
padding-left: 9%; 
padding-right: 9%; /*float: left;
*/display: inline-block;
padding-bottom: 15%;
}

#right0{
/* margin-top: 130vh;
*/width: 100%;
padding-left: 9%; 
padding-right: 9%; /*float: left;
*/display: inline-block;
}

#right00{
/* margin-top: 130vh;
*/width: 100%;
padding-left: 9%; 
padding-right: 9%; /*float: left;
*/display: inline-block;
}

.hello{
margin-top: 4%;
margin-left: 4%;
width: 50%;
height: 100%;
margin-right: 0;
float: left;
position: relative;
}

.photoegi img{
width: 100%;
margin-top: 0;
/*padding-bottom: 20vh;
*/padding-left: 60%;
position: absolute;
z-index: -2;
}

.shapes{
  float: left;
  width: 45%;
  position: relative;
}


#inframe{
  width: 50%;
 margin-bottom: 1em;
}

#inframek{
  width: 33.33%;
 margin-bottom: 1em;
}

.opis1{
  font-size: 1.1em;
  color: #fc0000;
  float: left;
  width: 33.33%;
text-align: left;
padding-left: 0.9em;
}

.opiss2{
  font-size: 0.5em;
  font-weight: 500;
  color: #fc0000;
  float: left;
    width: 33.33%;
text-align: center;
}

.opis3{
  font-size: 0.8em;
  color: #fc0000;
  float: left;
 text-align: right;
   width: 33.33%;
   padding-right: 0.9em;
}

.opisy{
     padding-top: 3em;
}

.glowa1{
display: none;
}

.menu{
display: none;
}

.yes{
display: none;
}

.logoopis{
  margin-top: 22%;
}

.yess svg{
width: 100px;
}

#uszy1i{
  width: 60%;
  margin-left: 20%;
}

#uszy1j{
  width: 80%;
  margin-left: 10%;
}

#uszy1ii{
  width: 50%;
}

#no60i{
width: 100%;
}

#no35i{
  width: 70%;
  margin-left: 25%; 
  margin-top: 0;
}

#no60j{
width: 60%;
}

#u60z{
width: 50%;
}

#no60z{
width: 55%;
margin-left: 45%;
}

#no35po{
  width: 50%;
}

#no50po{
  width: 100%;
}

#no40t{
  width: 70%;
  margin-top: 0;
  margin-left: 30%;
}

#no55, #no45{
    width: 100%;
    margin-bottom: 2em;
}

#no35{
    width: 60%;
    margin-bottom: 2em;
}

#no55, #no60z, #no60, #uszy1, #no65, #no65; , #no50c, #no50, #no40j, {
  width: 100%;
/*  margin-bottom: 10%;
*/  margin-left: 0;
}

#no25s, #uszy5, #uszy7, /*#no35, #no45,*/ #no30s, #no25z, #no35t, #no35e,  #no30m, #tourist3, #tourist4{
  width: 50%;
  margin-left: 25%; 
  margin-top: 0;
}

#tourist5{
  padding: 1em;
    width: 50%;
    float: left;
}

#tourist5l{
    width: 40%;
    float: left;
}

 #tourist6 {
  width: 70%;
    padding: 1em;
}

 #tourist6p{
  width: 60%;
}

#uszy1i{
  width: 60%;
  margin-left: 20%;
}

#uszy1j{
  width: 80%;
  margin-left: 10%;
}

#uszy1ii{
  width: 50%;
}


#tinytiny, #uszy1u{
  width: 40%;
}

#uszy1p{
  width: 40%;
}

#no75s{
    width: 120%;
    margin-left: 20%;
    margin-top: -3%;
    margin-bottom: -5em;
}
#no30, #no30d, #no35w, #no35m, #no40d{
  width: 50%;
  margin: 0;
}

#procent4{
  width: 50%;
  padding: 1em;
  float: left;
}

#tamta{
  width: 25%;
  float: left;
}

.filler{
  float: left;
  position: relative;
  display: block;
}

#no40k, #no40, #no35e {
  width: 80%;
  margin-top: 0;
}

#no40po{
  width: 50%;
}


#no40ke{
  width: 50%;
}

#no35i{
  width: 30%;
  margin-top: 0;
  margin-left: 60%;
}

#no40i{
    width: 40%;
}

img#Library{
    transition: 1s;
}


#Library{
    position: absolute;
}

#Library:before{
    height: 200px;
    width: 200px;
   background: url("https://i.ibb.co/RyjNmjR/see.png");
    background-size: 200px 200px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

#Library:after{    
  height: 200px;
    width: 200px;
   background: url("https://i.ibb.co/k9rjQjm/see1.png");
    background-size: 200px 200px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
            opacity: 0;
}

#Library:hover:after{
      height: 200px;
    width: 200px;
    opacity: 1;
}

#Library:hover:before{
      height: 200px;
    width: 200px;
    opacity: 0;
}


.tit1{
font-size: 0.8em;
font-weight: 400; 
margin-left: 0.5em;
position: center;
margin-top: 2%;
overflow: visible;
text-decoration: none;
/*color: #6b00f3;
*/letter-spacing: 2px;
vertical-align: top;
}

.gallery{
margin-top: 0em;
}

.mini{
  width: 50%; 
}

.filler{
  width: 50%; 
}

.mini-pho{
  width: 50%; 
}

.minii{
  width: 10%;
  float: none;
/*  overflow: hidden;
*/}

/*tytuł*/
#medi2-3{
margin-top: 20%;
width: 100%;
padding-bottom: 7em;
padding-left: 7%; 
padding-right: 7%; 
}

/*tytuł-nizej*/
#medi2-2{
margin-top: 80%;
width: 80%;
padding-left: 9%; 
padding-right: 9%; 
}

#medi2-niz{
margin-top: 90%;
padding-bottom: 3em;
width: 80%;
padding-left: 9%; 
padding-right: 9%; 
}


#medi2{
  margin-top: 50vh;
}

.logotxt1{
  padding-bottom: 0;
  margin-bottom: 2em;
  margin-left: 3%;
  font-size: 0.7em;
  font-weight: 500;
  display: inline-block;
  margin-bottom: -2em;
}

.logotxt2{
  margin-left: 3%;
  font-size: 0.7em;
  font-weight: 300;
}

.logotxt3{
  padding-bottom: 0;
  margin-right: 3%;
  font-size: 0.7em;
  font-weight: 500;
  display: inline-block;
  float: right;
}

.logoopis{
  width: 100%;
top: 55%;
  position: absolute;
}

.logo{
padding-right: 36%;
padding-left: 36%;
top: 35%;
  position: absolute;

}

.logo-bg1{
    position: relative;
width: 100vw;
height: 100vh;
margin-left: -8px;
margin-right: -8px;
}


.logo-d{
  float: left;
  margin-right: 8%;
  margin-left: 8%;
  margin-bottom: 2em;
  width: 17%;
}

.logobox{
  margin-top: 10em;
  margin-right: 4em;
  margin-left: 4em;
      margin-bottom: 7em;

}

.container{
display: block;
flex-wrap: wrap;
flex-direction: row;
margin-top: -1em;
vertical-align: top; 
z-index: 9999;
}


img#Library{
    transition: 1s;
}

#Library{
    position: absolute;
    z-index: 10;
}

#Library:before{
    height: 200px;
    width: 200px;
   background: url("https://i.ibb.co/RyjNmjR/see.png ");
    background-size: 200px 200px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

#Library:after{    
  height: 200px;
    width: 200px;
   background: url("https://i.ibb.co/k9rjQjm/see1.png");
    background-size: 200px 200px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
            opacity: 0;
}

#Library:hover:after{
      height: 200px;
    width: 200px;
    opacity: 1;
}

#Library:hover:before{
      height: 200px;
    width: 200px;
    opacity: 0;
}

/*abbout big */
.opiso{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 300;
  font-size: 0.9em;
  float: left;
  margin-right: 3%;
  margin-bottom: 3%;
  width: 25%;
line-height: 2;
}


.opiso1{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 300;
  font-size: 0.9em;
  float: left;
  margin-right: 3%;
  margin-bottom: 3%;
  width: 40%;
line-height: 2;
}

.strzala{
font-family: 'Inknut Antiqua', sans-serif;
font-size: 1.7em;
line-height: 2.4;
display: inline-block;
}

#aboutt{
margin-top: 20vh;
margin-bottom: 10vh;
width: 100%;
padding-left: 6%; 
float: left;
display: inline-block;
}

.strz{
  display: inline-block;
  width: 20px;
}

.strz1{
  display: inline-block;
  width: 35px;
}

.opisg{
font-family: 'Montserrat', sans-serif;
text-align: left;
font-weight: 300;
font-size: 0.8em;
float: left;
margin-left: 80%;
margin-top: 15vh;
transform: rotate(90deg);
z-index: -2;
position: absolute;
width:  20%;
}

sup{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 0.4em;
  display: inline;
}

.co{
  float: left;
  width: 30%;
  margin-right: 3%;
  margin-bottom: 7%;
}

.czas{
  margin-top: 5px;
}


.strzalared{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 0.8em;
  font-weight: 600;
  display: inline;
    color: #fc0000;
    margin-left: 2.5em;
}


.strzala2{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 1.9em;
  display: inline;
}

.strzala3{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 0.8em;
      transform: rotate(15deg);
        z-index: -1;
          letter-spacing: 3px;
            font-weight: 400;
/*  color: #fc0000;
*/  padding-bottom: 1em;
top: -260px;
}

.strzala3 a{
  color: red; !important;
}

.strzala3 a:hover{
  color: gray; !important;
}
.story{
font-family: 'Cormorant', serif;
  font-size: 1.8em;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 50%;
  padding-right: 5%;
    display: inline;
}

em { font-style: italic;
  font-family: 'Cormorant', serif;
  font-weight: 400;
 } 

.who{
font-family: 'Cormorant', serif;
  font-size: 2.2em;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 67%;
  padding-right: 5%;
    display: inline;
}

.feel{
font-family: 'Cormorant', serif;
  font-size: 1.5em;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 70%;
    display: inline;
      float: left;
  width: 50%;
  padding-right: 5%;
}

#teraz{
font-family: 'Cormorant', serif;
  font-size: 2.2em;
  color: #333333;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 100%;
  padding-left: 30%;
    padding-right: 20%;
    margin-top: 20%;
  padding-bottom: 7%;  
  position: relative;
    display: inline;
}

.arr{
z-index: -10;
  position: absolute;
  width: 120px;
  top: -0.2em;
  margin-left: -1.8em;
/*  margin-right: 0.2em;
*/}
}

/*// Smaller medium devices (landscape phones, 576px and up)
*/
@media screen and (max-width: 53em) {

/*photo scrolling effect*/
.inline-photo {
opacity: 0;
-webkit-transition: opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2.5s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1.5s -0.1s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2s -0.1s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;

}

.inline-photo.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect*/

/*photo scrolling effect speed 2*/
.inline-photo2 {
opacity: 0;
-webkit-transition: opacity .7s .25s ease-out,
            -webkit-transform 4s .4s cubic-bezier(0,1,.3,1);
transition: opacity .7s .25s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 4s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .25s ease-out;
transition: transform 4s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .25s ease-out,
            -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo2.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-4em);
          transform:  translateY(-4em);
}
/*photo scrolling effect speed 2*/

/*photo scrolling effect speed 3*/
.inline-photo3 {
opacity: 0;
-webkit-transition: opacity .7s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: opacity .7s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .15s ease-out;
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .15s ease-out,
            -webkit-transform 2s .15s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo3.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-3em);
          transform:  translateY(-3em);
}
/*photo scrolling effect speed 3*/

/*photo scrolling effect speed 4*/
.inline-photo4 {
opacity: 0;
-webkit-transition: opacity 1s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out;
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out,
            -webkit-transform 2s .15s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo4.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 4*/

/*photo scrolling effect speed 5*/
.inline-photo5 {
opacity: 0;
-webkit-transition: opacity 1s .25s ease-out,
            -webkit-transform 2.5s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .25s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2.5s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .25s ease-out;
transition: transform 2.5s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out,
            -webkit-transform 2.5s .25s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo5.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 5*/

/*photo scrolling effect speed 6*/
.inline-photo6 {
opacity: 0;
-webkit-transition: opacity 1s .35s ease-out,
            -webkit-transform 3s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .35s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 3s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .35s ease-out;
transition: transform 3s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .35s ease-out,
            -webkit-transform 3s .35s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo6.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 6*/

.box {
  float: left;
  width: 50%;
  padding: 1em;
}

.boxx {
  float: left;
  width: 50%;
  -webkit-transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1), 
  -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  will-change: transform;
  animation-iteration-count: 1;
}

.ew-orange2 {
font-family: 'Inknut Antiqua', serif;
font-size: 3.3em;
font-weight: 500;
letter-spacing: 6px;
/*color: #ff2d00;
*/opacity: 1;
float: none;
line-height: 1.1em;
  margin-top: 0.3em;
  margin-bottom: -0.3em;
}
/*tytuł*/
#medi2-3{
margin-top: 70%;
width: 100%;
padding-bottom: 7em;
padding-left: 7%; 
padding-right: 7%; 
}

#tamta{
  width: 50%;
}

#no50cc{
width: 80%;
margin-left: 10%;
padding-top: 10%;
padding-bottom: 10%;
}


#description{
mix-blend-mode: screen;
position: relative;
z-index: 20;
width: 60%;
margin-left: 20%; 
margin-top: -15%;
   margin-top: 0em;
}

.clearfix2::after {
  display: none;
}


#acojesli{
  width: 50%;
      float: left;
      box-sizing: padding-box;
}

#medi9{
width: 60%;
margin-left: 48vw;
margin-top: -5em;
}

#medi6{
width: 28%;
margin-left: 55%;
margin-top: -6em;
}

#no60n{
width: 100%;
}

#medi7{
width: 110%;
margin-left: -5%;
}

#no30n, #no40n #no40l{
width: 80%;
margin-left: 10%;
}

#medi5{
width: 100%;
margin-top: 10%;
}

#no45r, #no55n{
  width: 80%;
}

#uszy2i{
  width: 50%;
}

#no45l{
width: 80%;
padding-left: 10%;
}

#no40p{
    width: 80%;
margin-left: 20%;
}

#medi8{
  width: 40%;
margin-left: 30%;
margin-top: 0px;
}

#inframebig{
  width: 80%;
margin-left: 10%; 
}

#tote3{
width: 50%;
margin-top: 13em;
margin-left: -5em;
}

#tote4{
width: 60%;
margin-left: 13em;
}

#uszy4l{
  width: 50%;
  margin-left: 0;
}

#uszy4{
  width: 50%;
}
#tinytiny{
  width: 50%;
}

#tamta{
  width: 40%;
}



.logoopis{
  width: 100%;
top: 65%;
  position: absolute;
}

.logo{
padding-right: 26%;
padding-left: 26%;
top: 25%;
  position: absolute;

}

.logo-bg1{
    position: relative;
width: 100vw;
height: 100vh;
margin-left: -8px;
margin-right: -8px;
}


.logo-d{
  padding-right: 5%;
    padding-left: 5%;
padding-bottom: 3%;
  width: 33.33%;
  float: left;
  margin: 0;
}

.logobox{
  width: 100vw;
height: 100vh;
margin-left: -8px;
margin-right: -8px;
  margin-top: 16em;
      margin-bottom: 7em;

}


/*tytuł-nizej*/
#medi2-2{
margin-top: 92%;
width: 100%;
padding-bottom: 3%;
padding-left: 9%; 
padding-right: 9%; 
}

#medi2-niz{
margin-top: 107%;
width: 100%;
padding-bottom: 7em;
padding-left: 9%; 
padding-right: 9%; 
}

.box {
  float: left;
  padding: 1em;
}

.hellotxt{
font-family: 'Cormorant', serif;
  font-size: 3.7em;
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0.2em;
}

.shapes{
  padding-top: 58vh;
  width: 100vw;
  float: none;
  position: relative;
  left: 0;
  right: 0;
}

.helloinne{
margin-top: 55%;
margin-left: 48%;
width: 100%;
height: 100%;
margin-right: 0;
position: absolute;
z-index: 10;
}


.hello{
padding-top: 4%;
padding-left: 4%;
width: 100vw;
position: absolute;
}

.photoegi img{
width: 100vw;
margin-top: 90%;
/*padding-bottom: 20vh;
*/padding-left: 0;
position: absolute;
z-index: -2;
}

.bg3 {
  float: left;
  margin-top: -100px; 
  left: 0; 
  width: 100%;
  padding-right: 1em;
}

.bg33 {
  float: left;
  left: 0; 
margin-right: -1em;
}

#fotoout2{
  display: none;
}

#fotoout1{
  display: none;
}


#foto2{
  width:  65%;
  margin-left: 35%;
padding-top: 0;
    padding-bottom: 2em;
}

.box {
  float: left;
/*  width: 50%;
  padding: 1em;*/
  -webkit-transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1), 
  -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  will-change: transform;
}

.opisr{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 400;
  font-size: 0.8em;
/*  float: left;
*/margin-right: 6em;
line-height: 1.7;
}

#storr{
margin-top: 27vh;
width: 100%;
padding-right: 9%;
float: none;
display: inline-block;
}

#right{
/* margin-top: 130vh;
*/width: 100%;
padding-left: 9%; 
padding-right: 9%; /*float: left;
*/display: inline-block;
padding-bottom: 30%;
}

#right00{
/* margin-top: 130vh;
*/width: 100%;
padding-left: 9%; 
padding-right: 9%; /*float: left;
*/display: inline-block;
}

#right0{
/* margin-top: 130vh;
*/width: 100%;
padding-left: 9%; 
padding-right: 9%; /*float: left;
*/display: inline-block;
padding-bottom: 0;
}

#no60i{
width: 100%;
}

#no60j{
width: 100%;
}

#no50po{
  width: 100%;
}

#no40t{
  width: 100%;
  margin-top: 2em;
}

#no35{
    width: 60%;
    margin-bottom: 2em;
    margin-left: 40%;
  }

#no55, #no60z, #no60, #uszy1, #no65, #no55, #no45, #no50c, #no50, #no40j, #no40t {
  width: 100%;
  padding: 0;
/*  margin-bottom: 10%;
*/  margin-left: 0;
}

#no25s, #uszy5, #uszy7, #no30s, #no25z, #no35t, #no35e, #no30m{
  width: 50%;
  margin-left: 25%; 
  margin-top: 0;
}

#no35po{
  width: 80%;
  margin-left: 10%;
}


#u60z{
width: 70%;
margin-left: 15%;
}

#no65p{
  width: 100%;
}

#no35i{
  width: 50%;
  margin-left: 30%;
}

#no75s{
    width: 70%;
    margin-left: 20%;
    margin-top: 5%;
    margin-bottom: -7em;
}

#no30, #no30d, #no35w, #no35m, #no40d{
  width: 50%;
  margin: 0;
}

#no40k, #no40, #no35e {
  width: 80%;
  margin-top: 0;
}

#no40po{
  width: 70%;
}

#no40ke{
  width: 80%;
}

#no35i{
  width: 60%;
  margin-top: 0;
}

#no55l{
  width: 70%;
}

#tote2{
width: 50%;
padding: 0;
float: left;
}

#tote22{
width: 50%;
padding: 0;
float: left;
margin-left: 0;
}

h1{
font-family: 'Inknut Antiqua', serif;
font-size: 6vh;
font-weight: 600;
padding-right: 2.5em;
letter-spacing: 4px;
margin: 0;
line-height: 1em;
}

.filler{
width: 50%;
}

.opis1{
  font-size: 1.1em;
  color: #fc0000;
  float: left;
    width: 100%;
text-align: left;
 clear: both;  
 padding-bottom: 2%; 

}

.opiss2{
  font-size: 0.5em;
  font-weight: 500;
  color: #fc0000;
  text-align: left;
    width: 100%;
     clear: both;   
     padding-left: 1.8em;

}

.opis3{
  font-size: 0.9em;
  color: #fc0000;
    width: 100%;
    clear: both;   
    text-align: left;
         padding-left: 0.9em;
}

.opisy{
     padding-top: 3em;
          padding-bottom: 3em;
     padding-left: 0.9em;
}

.shape1  svg{
  display: none;
}
.shape2  svg{
  display: none;
}
.shape3  svg{
  display: none;
}
.shape4  svg{
  display: none;
}
.shape5  svg{
  display: none;
}

img#Library{
    transition: 1s;
}

#Library{
    position: absolute;
    z-index: 10;
}

#Library:before{
    height: 200px;
    width: 200px;
   background: url("https://i.ibb.co/RyjNmjR/see.png");
    background-size: 200px 200px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

#Library:after{    
  height: 200px;
    width: 200px;
   background: url("https://i.ibb.co/k9rjQjm/see1.png");
    background-size: 200px 200px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
            opacity: 0;
}

#Library:hover:after{
      height: 200px;
    width: 200px;
    opacity: 1;
}

#Library:hover:before{
      height: 200px;
    width: 200px;
    opacity: 0;
}

/*abbout big */
.opiso{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 300;
  font-size: 0.9em;
  float: left;
  margin-right: 3%;
  margin-bottom: 15%;
  width: 100%;
line-height: 2;
}


.opiso1{
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  font-weight: 300;
  font-size: 0.9em;
  float: left;
  margin-right: 3%;
  margin-bottom: 15%;
  width: 100%;
line-height: 2;
}

.strzala{
font-family: 'Inknut Antiqua', sans-serif;
font-size: 2em;
line-height: 2.4;
display: inline-block;
}

#aboutt{
margin-top: 18vh;
margin-bottom: 10vh;
width: 100%;
padding-left: 6%; 
float: left;
display: inline-block;
}

.strz{
  display: inline-block;
  width: 20px;
}

.strz1{
  display: inline-block;
  width: 35px;
}

.opisg{
font-family: 'Montserrat', sans-serif;
text-align: left;
font-weight: 300;
font-size: 0.7em;
float: left;
margin-left: 75%;
margin-top: 10vh;
transform: rotate(90deg);
z-index: -2;
position: absolute;
width: 30%;
}

sup{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 0.4em;
  display: inline;
}

.strzalared{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 0.8em;
  font-weight: 600;
  display: inline;
    color: #fc0000;
    margin-left: 2.5em;
}

.co{
  float: left;
  width: 100%;
  margin-bottom: 7%;
  order: 2;
  -webkit-order: 2;
}

.strzala2{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 1.9em;
  display: inline;
}

.strzala3{
    font-family: 'Inknut Antiqua', sans-serif;
      font-size: 0.6em;
      transform: rotate(15deg);
        z-index: -1;
          letter-spacing: 3px;
            font-weight: 400;
/*  color: #fc0000;
*/  padding-bottom: 7em;
margin-left: 0em;
margin-right: 1em;
top: -260px;
display: inline-block;
}

.strzala3 a{
  color: red; !important;
}

.strzala3 a:hover{
  color: white; !important;
}

.story{
font-family: 'Cormorant', serif;
  font-size: 1.8em;
  line-height: 1.3;
  font-weight: 400;
  float: none;
  width: 100%;
  margin-bottom: 1em;
    display: inline-block;
}

em { font-style: italic;
  font-family: 'Cormorant', serif;
  font-weight: 400;
 } 

.who{
font-family: 'Cormorant', serif;
  font-size: 2.2em;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 100%;
  padding-right: 5%;
    display: inline;
      order: 1;
      -webkit-order: 1;

}

.feel{
font-family: 'Cormorant', serif;
  font-size: 0.9em;
  line-height: 1.3;
  font-weight: 600;
  float: left;
  width: 100%;
    display: inline;
      float: left;
  width: 50%;
  padding-right: 5%;
}

#teraz{
font-family: 'Cormorant', serif;
  font-size: 2.2em;
  color: #333333;
  line-height: 1.3;
  font-weight: 400;
  float: left;
  width: 100%;
  padding-left: 10%;
    padding-right: 10%;
    margin-top: 20%;
  padding-bottom: 7%;  
  position: relative;
    display: inline;
}

.arr{
z-index: -10;
  position: absolute;
  width: 120px;
  top: -0.2em;
  margin-left: -1.8em;
/*  margin-right: 0.2em;
*/}


/* small devices */
@media  screen and (max-width: 38em) {

/*body {
    overflow-x: hidden;
    position: fixed;
}
*/
.box {
  float: left;
  width: 50%;
  padding: 1em;
}

.boxx {
  float: left;
  width: 100%;
  -webkit-transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1);
  transition: transform 2s .25s cubic-bezier(0,1,.3,1), 
  -webkit-transform 2s .25s cubic-bezier(0,1,.3,1);
  will-change: transform;
  animation-iteration-count: 1;
}

.ew-orange2 {
font-family: 'Inknut Antiqua', serif;
font-size: 8vw;
font-weight: 500;
letter-spacing: 4px;
color: black;
opacity: 1;
float: none;
line-height: 1.1em;
  margin-top: 0.3em;
  margin-bottom: -0.4em;
}

.hellotxt{
font-family: 'Cormorant', serif;
  font-size: 10vw;
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 0.1em;
}

.shapes{
  padding-top: 58vh;
  width: 100vw;
  float: none;
  position: relative;
  left: 0;
  right: 0;
}

.smili{
float: right;
width: 5%;
}

nav ul {
    font-size: 1.2em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
  letter-spacing: 2px;
    list-style: none;
    margin: 0;
    max-height: 0;
    opacity: 0;
/*    overflow: hidden;
*/    padding: 0;
    text-align: center;
}

.next a{
  margin-right: -2em;
    height: 1.7em;
  position: fixed;
  right: 0;
  margin-top: 37vh;
  transform: rotate(90deg);
  padding-right: 5px;
  padding-left: 7px;  
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  z-index: 2;
     box-sizing: border-box;
   -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
    -webkit-transition: background-color 0.2s 0s ease-in;
-moz-transition: background-color 0.2s 0s ease-in;
-o-transition: background-color 0.2s 0s ease-in;
transition: background-color 0.2s 0s ease-in;
}

.next a:hover{
  margin-right: -2em;
  height: 1.7em;
  position: fixed;
  right: 0;
  margin-top: 37vh;
  background-color: white;
  color: #6b00f3;
  padding-right: 5px;
  padding-left: 7px; 
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  z-index: 2;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border: 0.5px solid #6b00f3;
}

.previous a{
height: 1.7em;
position: fixed;
display: block;
margin-left: -3em;
margin-top: 37vh;
transform: rotate(-90deg);
padding-right: 4px;
padding-left: 7px;
z-index: 1;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-transition: background-color 0.2s 0s ease-in;
-moz-transition: background-color 0.2s 0s ease-in;
-o-transition: background-color 0.2s 0s ease-in;
transition: background-color 0.2s 0s ease-in;
}

.previous a:hover{
height: 1.7em;
position: fixed;
display: block;
margin-left: -3em;
margin-top: 37vh;
transform: rotate(-90deg);
padding-right: 4px;
padding-left: 7px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

.photoegi img{
width: 50vw;
margin-top: 90%;
/*padding-bottom: 20vh;
*/padding-left: 0;
position: absolute;
z-index: -2;
}

#placebo33{
  width: 100%;
}

 #tourist6 {
  width: 100%;
}
 #tourist6p{
  width: 100%;
}

 #tourist5p {
  width: 60%;
  margin-left: 20%;
}
 #tourist5l{
  width: 60%;
  margin-left: 20%;
}

.hh7{
font-family: 'Inknut Antiqua', serif;
font-size: 2.5em;
font-weight: 600;
padding-right: 2.5em;
letter-spacing: 4px;
margin: 0;
line-height: 1.3em;
}

#no40p{
width: 80%;
}

#no40d{
width: 70%;
margin-left: 10%;

}

#no40dd{
width: 80%;
margin-left: 10%;
}

#kto{
  margin-left: 4%;
  margin-top: 15%;
  width: 100%;
}

#tamta{
  width: 50%;
}

#inframebig{
  width: 100%
}

#inframebig{
  width: 100%;
margin-left: 0; 
}

#procent11{
  margin-left: 11%;
  width: 80%;
}

#uszy3{
  width: 100%;
}

#uszy1ii{
  width: 100%;
}

#uszy2i{
  width: 100%;
}

#medi3, #medi4{
width: 100%;
margin: 0;
padding: 0;
}

#medi9{
width: 60%;
margin-left: 20%;
margin-top: 1em;
}

#procent11c{
  margin-left: 0;
  width: 50%;
}

#placebo22{
 width: 50%;
}

#uszy1p{
  width: 60%;
    margin-left: 20%;
}

#uszy1u{
  width: 70%;
  margin-left: 30%;
}

#no45l, #no40l{
width: 90%;
padding-left: 10%;
}

.opis{
font-family: 'Cormorant', serif;
  font-size: 1.7em;
  line-height: 1.4;
  font-weight: 400;
}

#middletxt2, #middletxt{
width: 100%;
margin-bottom: 3em;
margin-top: 6em;
padding-left: 14%; 
padding-right: 12%; 
}


#acojesli{
  width: 100%;
      float: left;
      box-sizing: padding-box;
}


.clearfix2::after {
  display: none;
}


#description{
  mix-blend-mode: screen;
  position: relative;
  z-index: 20;
  width: 70%;
margin-left: 15%; 
margin-right: 15%; 
margin-top: 10%;
margin-bottom: 10%;

}

.filler{
display: none;
}

.hello{
padding-top: 6%;
padding-left: 4%;
padding-right: 2%;
width: 100vw;
position: absolute;
}

.helloinne{
margin-top: 76%;
margin-left: 48%;
width: 100%;
height: 100%;
margin-right: 0;
position: absolute;
z-index: 10;
}


.photoegi img{
width: 100%;
}

.filler{
width: 50%;
}

.shape1  svg{
  display: none;
}
.shape2  svg{
  display: none;
}
.shape3  svg{
  display: none;
}
.shape4  svg{
  display: none;
}
.shape5  svg{
  display: none;
}

.yesmini svg{
width: 60px;
}

#medi2-niz{
margin-top: 60vh;
width: 100%;
padding-bottom: 7em;
padding-left: 9%; 
padding-right: 9%; 
}

#placebo2{
    width: 100%;
/*padding: 3em;
*/}

#placebo3{
  padding-top: 0; 
  width: 100%;
  padding: 3em;
}

#uszy4l{
  width: 50%;
  margin-left: 0;
}

#medi8{
  width: 50%;
margin-left: 25%;
margin-top: 0px;
}

#placebo4u{
  width: 100%;
  margin: 0;
    padding: 0;
}

#placebo4e{
  width: 40%;
  margin: 0;
  padding: 0;
}

#placebo5{
  width: 100%;
  margin: 0;
}

#placebo5e{
  width: 70%;
  margin-right: 30%;
  padding-left: 0;
}

#placebo2u{
  width: 60%;
  margin: 0;
}

#uszy4{
  width: 70%;
  margin-left: 15%;

}
}

#no50l{
width: 100%;
}
#no45{
width: 75%;
}

#no55l{
  width: 75%;
margin-right: 25%;
margin-left: 0;
}

#uszy2{
  width: 100%;
}


#tourist1{
width: 30%;
padding-right: 1%;
padding-left: 1%;
float: left;
margin-bottom: 10%;
margin-top: 5em;
/*padding: 0;
margin-top: 30vh;*/
display: block;
}

#tourist1a{
width: 30%;
float: right;
padding-right: 1%;
padding-left: 1%;
margin-bottom: 50%;
margin-top: 4%;
/*margin: 0;
padding: 0; */
display: block;
}

.tourbg {
margin-top: -7em;
width: 101%;
height: 180vw;
/*padding-bottom: 100vh;
*/background-color: #6b00f3;
margin-right: -8px;
margin-left: -8px;
margin-bottom: -7em;

}

img{
  width: 100%;
}

#tourist2{
width: 100%;
padding: 0;
}

#inframe{
  width: 100%;
    float: left;
}

#inframek{
  width: 100%;
    float: left;
}

#tourist7{
  width: 60%;
margin-left: 20%;
}

#no40i{
    width: 100%;
}


#tourist4t{
width: 100%;
}

.container{
display: block;
flex-wrap: wrap;
flex-direction: row;
margin-top: -1em;
vertical-align: top; 
z-index: 9999;
}


.mini{
  width: 100%;
}

.filler{
display: none;
}

.mini-pho{
  width: 100%; 
}

.glowa1{
display: none;
}

.menu{
display: none;
}

.yes{
display: none;
}

#domnibezdomni{
font-size: 2.5em;
}

.yes{
  float: none;
}

.mup{
position: absolute;
    padding-bottom: 0.5em;
}

.mdown{
    position: relative;
}

#bg {
  position: absolute; 
  top: 0; 
/*  overflow-x: hidden;
*/  left: -30vw; 
  /* Preserve aspet ratio */
  min-width: 160vw;
  z-index: -99999;
-webkit-z-index: -99999;

}

.logotxt1{
  padding-bottom: 0;
  margin-bottom: 2em;
  margin-left: 3%;
  font-size: 0.6em;
  font-weight: 500;
  display: inline-block;
  margin-bottom: -2em;
}

.logotxt2{
  margin-left: 3%;
  font-size: 0.6em;
  font-weight: 300;
}

.logotxt3{
  padding-bottom: 0;
  margin-right: 5%;
  font-size: 0.6em;
  font-weight: 500;
  display: inline-block;
  float: right;
}


.logo-bg1{
width: 100vw;
height: 100vh;
margin-left: -8px;
margin-right: -8px;
}

.logo{
padding-right: 25vw;
padding-left: 25vw;
padding-top: 15%;
}

.logo-d{
  padding-right: 10%;
    padding-left: 10%;
padding-bottom: 3%;
  width: 50%;
  float: left;
  margin: 0;
}

.logobox{
  width: 100vw;
height: 100vh;
margin-left: -8px;
margin-right: -8px;
margin-top: 10em;
margin-bottom: 7em;
}

.logoopis{
  width: 100%;
top: 75%;
  position: absolute;
}

img#Library{
    transition: 1s;
}

#Library{
    position: absolute;
    z-index: 10;
}

#Library:before{
    height: 150px;
    width: 150px;
   background: url("https://i.ibb.co/RyjNmjR/see.png");
    background-size: 150px 150px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

#Library:after{    
  height: 150px;
    width: 150px;
   background: url("https://i.ibb.co/k9rjQjm/see1.png");
    background-size: 150px 150px;
position: absolute;
    content: '';
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
            opacity: 0;
}

#Library:hover:after{
      height: 150px;
    width: 150px;
    opacity: 1;
}

#Library:hover:before{
      height: 150px;
    width: 150px;
    opacity: 0;
}


/*photo scrolling effect*/
.inline-photo {
opacity: 0;
-webkit-transition: opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2.5s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1.5s -0.1s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1.5s -0.1s cubic-bezier(0,1,.3,1),
            -webkit-transform 2s -0.1s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;

}

.inline-photo.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect*/

/*photo scrolling effect speed 2*/
.inline-photo2 {
opacity: 0;
-webkit-transition: opacity .7s .25s ease-out,
            -webkit-transform 4s .4s cubic-bezier(0,1,.3,1);
transition: opacity .7s .25s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 4s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .25s ease-out;
transition: transform 4s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .25s ease-out,
            -webkit-transform 4s .25s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo2.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-4em);
          transform:  translateY(-4em);
}
/*photo scrolling effect speed 2*/

/*photo scrolling effect speed 3*/
.inline-photo3 {
opacity: 0;
-webkit-transition: opacity .7s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: opacity .7s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .15s ease-out;
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity .7s .15s ease-out,
            -webkit-transform 2s .15s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo3.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-3em);
          transform:  translateY(-3em);
}
/*photo scrolling effect speed 3*/

/*photo scrolling effect speed 4*/
.inline-photo4 {
opacity: 0;
-webkit-transition: opacity 1s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .15s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out;
transition: transform 2s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out,
            -webkit-transform 2s .15s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo4.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 4*/

/*photo scrolling effect speed 5*/
.inline-photo5 {
opacity: 0;
-webkit-transition: opacity 1s .25s ease-out,
            -webkit-transform 2.5s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .25s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 2.5s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .25s ease-out;
transition: transform 2.5s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .15s ease-out,
            -webkit-transform 2.5s .25s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo5.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 5*/

/*photo scrolling effect speed 6*/
.inline-photo6 {
opacity: 0;
-webkit-transition: opacity 1s .35s ease-out,
            -webkit-transform 3s .4s cubic-bezier(0,1,.3,1);
transition: opacity 1s .35s ease-out,
            -webkit-transform 2s .4s cubic-bezier(0,1,.3,1);
transition: transform 3s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .35s ease-out;
transition: transform 3s .4s cubic-bezier(0,1,.3,1),
            opacity 1s .35s ease-out,
            -webkit-transform 3s .35s cubic-bezier(0,1,.3,1);
will-change: transform, opacity;
}

.inline-photo6.is-visible {
  opacity: 1;
  -webkit-transform: translateY(-5em);
          transform:  translateY(-5em);
}
/*photo scrolling effect speed 6*/

}