body {
   font-family:Lexend Deca;
   color:#0c0947;
   padding:0px ;
   text-align:center;
}


.lexendmega {
   font-family:Lexend Mega;
}
.lexenddeca {
   font-family:Lexend Deca;
}

.box100 {
   width:98%;
   padding:1%;
   box-sizing:border-box;
   float:left;
}

.box333 {
   width:31%;
   padding-top:1%;
   box-sizing:border-box;
   float:left;
}
@media (max-width: 480px) {
.box33 {
  display: none;
}
}
.box33 {
   width:31%;
   padding-top:1%;
   box-sizing:border-box;
   float:left;
}

.box25 {
   width:21%;
   padding:1%;
   box-sizing:border-box;
   float:left;
}

.box50 {
   width:50%;
   padding:1%;
   box-sizing:border-box;
   float:left;
}


.crossfade::after {
    background: white;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    z-index: -1;
    position: fixed;
    left: 0;
    top:0;
    border-radius: 2px;
}
.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: -2;
   margin:0;
   padding:0;
}
.crossfade > figure:nth-child(1) { background-image: url('grafika/tla/1.jpg'); }

.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('grafika/tla/2.jpg');
}

.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('grafika/tla/3.jpg');
}

.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('grafika/tla/4.jpg');
}

.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('grafika/tla/5.jpg');
}
@keyframes 
imageAnimation {  0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1;
 transform:scale(1.65);
}
 25% {
 opacity: 0;
 transform:scale(1.5);
}
 100% {
 opacity: 0;
 transform:scale(1.4);
}
}



.menu {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    border-radius: 9999px;
    left: calc(50% - 150px);
    top: -190px;
    position: fixed;
    background: white;
    padding: 202px 10px 10px 10px;
    box-sizing: border-box;
    text-align: center;
    transition-duration:0.1s;
    transition-timing-function: ease-in;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
.menu > a {
   text-decoration:none;
   margin: 5px 10px; 
}

.menu:hover {
   transform:scale(1.04);
   transition-timing-function: ease-out;
}

.blokergora {
   height:100px;
   width:100%;
}


.poznajnysekochajnyse {
   height:auto;
}

.glownapoznajnyse {
    font-size: 64px;
    text-align: right;
    position: absolute;
    width: 250px;
    left: calc(50% - 438px);
    top: 300px;
    line-height: 60px;
}
.glownasrodek {
   font-size:48px;
   text-align:center;
}

@keyframes heartbeat
{
  0%
  {
    transform: scale( .75 );
  }
  20%
  {
    transform: scale( 1 );
  }
  40%
  {
    transform: scale( .75 );
  }
  60%
  {
    transform: scale( 1 );
  }
  80%
  {
    transform: scale( .75 );
  }
  100%
  {
    transform: scale( .75 );
  }
}
.tresc {
   min-height:450px;
}
.sercecz {
   width:300px;
   height:300px;
   background-image:url('grafika/sercecz.png');
   background-size:contain;
   background-position:center center;
   background-repeat:no-repeat;
   margin:0 auto;
   z-index:5;
   position:absolute;
   animation-name:heartbeat;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   left: calc(49% - 150px);
}
.sercez {
   width:300px;
   height:300px;
   background-image:url('grafika/sercez.png');
   background-size:contain;
   background-position:center center;
   background-repeat:no-repeat;
   margin: 0 12px;
   z-index:3;
   position:absolute;
   animation-name:heartbeat;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-delay:0.1s;
   left: calc(49% - 150px);
}


.glownakochajnyse {
    font-size: 64px;
   text-align:left;
   position: absolute;
width: 300px;
left: calc(50% + 180px);
top:300px;
line-height:60px;
}
.podstart {
    top: 264px;
    position: relative;
    font-size: 25px;
}
.start {
    top: 264px;
    position: relative;
    font-size: 27px;
}

.glownasmfb {
   width:100px;
   height:100px;
   display:inline-block;
   background-image:url('grafika/fb.svg');
   margin:0 20px;
}
.glownasmyt {
   width:100px;
   height:100px;
   display:inline-block;
   background-image:url('grafika/yt.svg');
   margin:0 20px;

}
.glownasmig {
   width:100px;
   height:100px;
   display:inline-block;
   background-position:center;
   background-size:contain;
   background-repeat:no-repeat;
   background-image:url('grafika/ig.png');
   margin:0 20px;

}
.glownasmtt {
   width:100px;
   height:100px;
   display:inline-block;
   background-position:center;
   background-size:contain;
   background-repeat:no-repeat;
   background-image:url('grafika/tt.png');
   margin:0 20px;

}

.glownaURLsocial {
   margin:20px auto 50px;
   font-size:30px;
}

.partnerprojektu {
   
}
.partnerprojektu > img {
   width:200px;
}


@media (max-width: 480px) {

.menu {
   left:calc(50% - 50px);
}

.poznajnysekochajnyse {
   min-height:700px;
}

.podstart {
    top: 300px;
}
.start {
    top: 335px;
}

.glownapoznajnyse {
    font-size: 49px;
    text-align: right;
    position: absolute;
    width: 250px;
    left: calc(50% - 264px);
    top: 135px;
    line-height: 46px;
}
.glownakochajnyse {
    font-size: 49px;
    text-align: left;
    position: absolute;
    width: 300px;
    left: calc(50% + 9px);
    top: 487px;
    line-height: 46px;
}

.glownasmfb, .glownasmyt, .glownasmig, .glownasmtt {
    width: 60px;
    height: 60px;
    margin:20px;
}

#stopka123
{
margin-top:-250px;
}

@media (max-width: 480px) {
.stopka123
{
margin-top:-400px;
}
}


.video_background {
    bottom: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    top: 0px;
    left: -200%;
    position: fixed;

}

.youtube-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.youtube-container iframe,
.youtube-container object,
.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}