@charset "UTF-8";
* {
  font-weight: 200;
}
html {
  scroll-behavior: smooth;
}
body { margin: 0;
       padding: 0;
       color: #FFFFFF;
       font-family:'Poppins';
       overflow: hidden;
     }

h1 { font-family: 'Poppins';
     font-size: 5em;
     padding: 0.3em;
     margin: 0px;
     font-weight: 400;
   }

h4 { font-family: 'Poppins';
     line-height: 2rem;
     font-size: 1.5em;
     padding: 0.3em;
     margin-top: -25px;
   }

p {
  margin: 0;
  padding: 0;
  font-family: 'Poppins';
  color: #000;
  max-width: 100vh;
  text-align: justify;
}

* { text-decoration: none; }

.content { background-image: url(/res/img/bg-front-page.jpg);
           background-repeat: no-repeat;
           background-size: cover;
           background-position: center; 
         }
 @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6 / 2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {.main }

 .container { margin: 0 auto;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              flex-direction: column;
              height: 100vh;
            }


.buttons-container { margin: 0.5em auto;
                     display: flex;
                     justify-content: center; 
                   }
.buttons-container .btn {
  min-width: 150px;
  margin: 10px;;
}
 @media (min-width: 0) and (max-width: 800px) { .buttons-container { flex-direction: column; } }

.small { width: auto;
         font-size: 0.87rem;
         line-height: 1.3rem; 
       }

.connect, .pen { border: 1px solid #076AAB;
                 color: #FFFFFF; 
               }

.connect:hover, .pen:hover { background: #076AAB;
                             color: #FEFEFE; 
                           }

.active { background: #076AAB;
          color: #FFFFFF; 
        }

#section1 {

}

#section2 {
  height: 100vh;
  background-color: #FFF;
  background-image: url(/res/img/pastelky.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; 
}

.info {
  color: black !important;
  font-size: 22px;
  
}
.info-text {
  font-weight: 300;
  padding: 10px;
  padding-top: 200px;
  quotes: "„" "“";
}

@media only screen and (max-width: 600px) {
  .info-text { padding-top: 10px; }

}