html,body,#gallery{
  scroll-behavior: smooth;
}

body.dark {
  background: #30393F;
  color: #fafafa;
  background-image: radial-gradient(#474bff9c 1px, #0000 1px);
  background-size: 16px 16px;
  background-color: rgb(32, 38, 49);
}

body{
  font-family:Inter, "Open Sans",Calibri, sans-serif; 
  line-height: 1.8rem;
  padding: 0rem;
  margin: 0rem;

  background: #1D272F;

  background-image: radial-gradient(#474bff12 1px, #0000 1px);

  background-size: 16px 16px;
  background-color: #fafafa;
}

body.fullscreen{
  overflow: hidden;
}

body:not(.loading) #loadimages{
  display:none;
}

.loading main{
  opacity: 0;
}

body:not(.loading) main{
  opacity: 1;
}

body main{
  position: relative;
  width:800px;
  margin:0 auto;
  padding-top: 3rem;
  max-width:100%;
  padding-bottom: 20rem;
  padding-right: 2rem;
  padding-left: 2rem;
  box-sizing: border-box;

  -webkit-transition: opacity 1300ms linear;
  -moz-transition: opacity 1300ms linear;
  -o-transition: opacity 1300ms linear;
  transition: opacity 1300ms linear;

  transition-delay :1s;
}

.inlineblock{
  display:inline-block;
  margin: 0;
}

.displayinline{
  display:inline;
  margin: 0;
}

.displaynone{
  display:none;
}

.smaller{
  font-size: 0.8em;
}

.lighter{
  color: #666666;
}

.dark .lighter{
  color: #aaaaaa;
}

.bolder{
  font-weight: 700;
}

h1,h2{
  margin-bottom:0;
  margin-top: 0;
}

h1{
  margin-bottom: 0.5rem;
  overflow: hidden;
  line-height: 1.1em;
}

h2{
  color: #888;
  font-size: 1.4rem;
}

h3{
  color: #3d85c6;
  /*background: #f0f6ff;*/
  display: inline-block;
  color: #b3b3b3;
}

li{
  margin-bottom:0.4rem;
}

.list li{
  margin-bottom:0.6rem;
}

a{
  color: #888;
  text-decoration: underline;
  -webkit-transition: all 200ms linear;
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  transition: all 200ms linear;
}

a:hover{
  color: #444;
}

.dark a:hover{
  color: #ccc;
}

.mask{
  overflow: hidden;
  max-height: 100%;
}

/**/

#download{
  float: right;
  padding-top: 2.1rem;
}

header{
  margin-bottom: 1rem;
  margin-top: 2rem;
}

main > header{
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.item{
  margin-bottom: 3rem;
}

.basictable{
  margin-bottom: 1rem;
  margin-top: 1rem;
  white-space:nowrap;
  overflow: auto;
}

.basictable .left{
  display:inline-block;
  margin-right:1rem;
}

.responsive-mini-table{
  margin-top: 0.2rem;
}

.responsive-mini-table span{
  display: inline-block;
}

.responsive-mini-table .wrap > span:nth-child(1){
  min-width: 7.5rem;
  color: #888;
  font-weight: bold;
  padding-right: 1rem;
}

.responsive-mini-table .wrap > span:nth-child(2){
  min-width: 21rem;
}

#intro{
  margin-top: 3rem;
}

h5{
  font-size: inherit;
}

.basictable .right{display:inline-block;}

body.dark #float-menu .button{
  background: #fff;
}

#float-menu{
  display: none;

  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;

}

#float-menu .button{
  background: #444;
  border-radius: 3px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0,.3);

  width: 60px;
  height: 50px;

  -webkit-transition: all 400ms linear;
  -moz-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;

  cursor: pointer;
}

#float-menu .button:hover{
  box-shadow: 0px 2px 5px rgba(0, 0, 0,.55)
}

#gallery{
  height: 20%;
  height: 20vh;
  box-sizing:  border-box;
  background: #1D272F;
  position: relative;

  padding: 2rem;
  padding: 1vw;

  animation: ease-out gallery-movement-2 1.6s;
  animation-direction: alternate;
  animation-delay: 0.7s;
  animation-fill-mode: backwards;

  transition: height 0.5s ease-out;

  background-image: radial-gradient(#2d30dc61 1px, #0000 1px);
  background-size: 10px 10px;
  background-color: rgb(37, 44, 56);

  /*
  background-image: radial-gradient(#474bff2b 1px, #0000 1px);
  background-size: 16px 16px;
  background-color: rgba(71, 212, 255, 0);
  */
}

.fullscreen #gallery{
  position: relative;
  height: 100vh;
  overflow: auto;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fullscreen main{
  opacity: 0;
  display: none;

  animation: ease-out display-block-to-none 300ms;

  -webkit-transition: opacity 2000ms linear;
  -moz-transition: opacity 2000ms linear;
  -o-transition: opacity 2000ms linear;
  transition: opacity 2000ms linear;
}



body:not(.fullscreen) #view-gallery-button .close,
.fullscreen #view-gallery-button .view{
  display: none;
}

#view-gallery-button{
  color: #695b11;
  font-weight: bold;

  background: #ffda15;
  border: 1px solid #ffdd31;

  border-radius: 6rem; 

  display: inline-block;

  padding: 0.65rem 0.9rem;
  position: absolute;
  z-index: 9;
  width: 9rem;
  left: calc(50vw - 6rem);
  bottom: 2rem;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  box-shadow: none;
  outline: none;
  transform: translate(0, 0rem);

  vertical-align: middle;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;

  animation: cubic-bezier(.31,.76,.35,1) gallery-button-1 0.7s;
  animation-delay: 100ms;
  animation-direction: alternate;
  animation-fill-mode: backwards;
}

#view-gallery-button:hover{
  box-shadow: 0px 0px 15px #ffda15;
  background-image: radial-gradient(#ffffff54 1px, #0000 1px);
  background-size: 5px 5px;

    background-color: #ffe038;
  border-color: #ffea7a;
}

body:not(.three-seconds-after) #view-gallery-button{
  transform: translate(0, 0rem);
  animation: cubic-bezier(.31,.76,.35,1) gallery-button-1 2.5s;
  animation-delay: 0.7s;
  animation-fill-mode: backwards;
}

#view-gallery-button > * {
  vertical-align: middle;
  display: inline-block;
}

#view-gallery-button > *:nth-child(1){
  margin-right: 5px;
}

.fullscreen #float-menu{
  display: none;
}

.fullscreen #view-gallery-button{
  animation: ease-out gallery-button 0.5s;
  animation-delay: 0.35s;
  animation-direction: alternate;
  animation-fill-mode: both;
  transform: translate(0, 0rem);
  box-shadow: 0px 2px 10px rgba(0,0,0,.1);
}

#gallery .icon-gallery{
  position: relative;
  height: 1.2rem;
  width: 1.4rem;
  margin-right: 8px;

  display: none;
}

.icon-gallery > span{
  display: inline-block;
  width: 0.15rem;
  height: 1.2rem;
  background: #887613;
  border-radius: 0.1rem;
  margin-left: 0px;
  content: "";
  position: absolute;
  left: 0rem;
}

.icon-gallery > span:nth-child(2){
  width: 0.25rem;
  left: 0.25rem;
}

.icon-gallery > span:nth-child(3){
  width: 1rem;
  left: 0.6rem;
}

.loading .gallery-item{
  opacity: 0;

  -webkit-transition: opacity 100ms linear;
  -moz-transition: opacity 100ms linear;
  -o-transition: opacity 100ms linear;
  transition: opacity 100ms linear;
}

.gallery-item{
  width: 530px;
  height: 400px;
  vertical-align: top;
  background: rgba(255, 255, 255, 0.2);

  transform: scale(0.75);

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  display: inline-block;
  margin:0;
  margin-left: 0px;

  transform: scale(0.75);

  animation: ease-out gallery-item-in 1.8s;
  animation-direction: alternate;

  opacity: 0.8;
  max-width: 100%;
  border-radius: 12px;
  filter: blur(1.8px);
}

.three-seconds-after .gallery-item{
  -webkit-transition: transform 350ms linear, opacity 250ms linear, filter 250ms linear;
  -moz-transition: transform 350ms linear, opacity 250ms linear, filter 250ms linear;
  -o-transition: transform 350ms linear, opacity 250ms linear, filter 250ms linear;
  transition: transform 350ms linear, opacity 250ms linear, filter 250ms linear;
}

.fullscreen .gallery-item:hover/*,
.fullscreen .is-inViewport.gallery-item*/{
  transform: scale(1);
  opacity: 1;
}

body:not(.fullscreen) #view-gallery-button:hover ~ .wrap .gallery-item{
    filter: blur(0px);
}

.fullscreen .gallery-item{
  filter: blur(0px);
  transform: scale(0.79);
}

#gallery .wrap{
  text-align: center;
  animation: ease-out gallery-movement-1 2.85s;
  padding-bottom: 3.5rem;

  -webkit-user-select: none;  
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}

.gallery-item:nth-child(18){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (17).jpg') no-repeat 0 0; 
  display: none;
}

.gallery-item:nth-child(17){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (18).jpg') no-repeat 0 60%; 
  -webkit-background-size: 116%;
  -moz-background-size: 116%;
  -o-background-size: 116%;
  background-size: 116%; 
  
}

.gallery-item:nth-child(16){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (16).jpg') no-repeat 0 0; 
}


.gallery-item:nth-child(15){

    animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (2).jpg') no-repeat 0 0;
}


.gallery-item:nth-child(14){
    animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (14).jpg') no-repeat 0 0; 
}

.gallery-item:nth-child(13){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (1).jpg') no-repeat 0 0; 
}


.gallery-item:nth-child(12){
    animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (13).jpg') no-repeat 0 0; 
}

.gallery-item:nth-child(11){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (11).jpg') no-repeat 0 0; 
  display: none;
}

.gallery-item:nth-child(10){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (10).jpg') no-repeat 0 0;
  filter: grayscale(100%); /* Current draft standard */
  -webkit-filter: grayscale(100%); /* New WebKit */
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
  filter: url(resources.svg#desaturate); /* Gecko */
  filter: gray; /* IE */
  -webkit-filter: grayscale(1); /* Old WebKit */
}


.gallery-item:nth-child(9){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (9).jpg') no-repeat 0 0; 
}

.gallery-item:nth-child(8){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/porto4.jpg') no-repeat 30% 48%;
  background-size: 170%;
}

.gallery-item:nth-child(7){
    animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (7).jpg') no-repeat 0 0;
}

.gallery-item:nth-child(6){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (6).jpg') no-repeat 0 0; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.gallery-item:nth-child(5){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (5).jpg') no-repeat 75% 15%;
  background-size: 103%;
}

.gallery-item:nth-child(4){
  background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (4).jpg') no-repeat 0 50%; 
}

.gallery-item:nth-child(3){
  background: rgba(255, 255, 255, 0.1) url('./gallery/porto2.jpg') no-repeat 11% 25%;
  background-size: auto;
  background-size: 290%;
}

.gallery-item:nth-child(2){
  animation: ease-out gallery-item-in-1 1.8s;
  /*background: rgba(255, 255, 255, 0.1) url('./gallery/gallery-item (15).jpg') no-repeat 0 0;*/
  background: rgba(255, 255, 255, 0.1) url('./gallery/porto1.jpg') no-repeat 56% 59%;
  background-size: auto;
  background-size: 160%;
}


.gallery-item:nth-child(1){
  animation: ease-out gallery-item-in-1 1.8s;
  background: rgba(255, 255, 255, 0.1) url('./gallery/porto3.jpg') no-repeat 1% 4%;
  background-size: 201%;
}

.label-1{
  background: #e3e3e3;
  color: #aaa;
  margin-left: 5px;
  padding: 3px 8px;
  font-size: 0.8em;
  border-radius: 5px;
  cursor: default;
}

.label-1:nth-of-type(1){
  margin-left: 10px;
}

.strikethrough a{
  text-decoration: line-through;
}



@keyframes gallery-movement-1 {
  0% {
    transform: translate(0, -70%);    
  }
  100% {
    transform: translate(0px, 0%);
  }
}

@keyframes gallery-movement-2 {
  0% {
    height: 100vh;    
  }
  100% {
    height: 20vh;
  }
}

@keyframes gallery-button-1 {
  0% {
    transform: translate(0,8rem); 
    position: fixed;
  }
  50% {
    transform: translate(0,8rem); 
    position: fixed;
  }
  100% {
    transform: translate(0,0rem);
    position: absolute;
  }
}

@keyframes gallery-button {
  0% {
  }
  100% {
    position: fixed;
  }
}

@keyframes display-block-to-none {
  0% {
    display: block;
  }
  100% {
    display: none;
  }
}

@keyframes gallery-item-in-1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}

@keyframes gallery-item-in-2 {
  0% {
    opacity: 0;
  }
  20%{
    opacity:0;
  }
  100% {
    opacity: 0.8;
  }
}

@media screen and (max-width: 700px) {
  #download {
    float: none;
    padding: 0;
  }

  #float-menu{
    display: none;
  }

  .gallery-item{
    background-position: 50% 0% !important;
  }

  .gallery-item:nth-child(10){
    background-position: 83% 0% !important;
  }

  .fullscreen .gallery-item:hover{
    transform: scale(0.85);
    opacity: 0.8;
  }
}