@import url("https://fonts.googleapis.com/css?family=:700|Roboto:400,400i,500");

@font-face {
  font-family: 'Kelson';
  src: url('images/kelson-bold.woff') format('woff'),}

/*----------------------------------------------------*/
body {
  line-height: 27px;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #777777; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Kelson", "Lato", sans-serif;
  font-weight: 700;
  color: #222222; }

 /*----------------------------------------------------*/ 

:root {
  --jumbotron-padding-y: 3rem;
}

.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.card-img {opacity:0.3;}

section {
  padding: 120px 0; }
  @media (max-width: 991px) {
    section {
      padding: 80px 0; } }




#spotlight{padding-top: 0px}
.spotlight-text{padding-left:10%;}
.spotlight-img{padding-right:0px;}

.clip-circle{-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);}


.clip-svg{-webkit-clip-path: url('images/blob.vg');
clip-path: url('images/shape.svg')
margin-left:-0%;}

.shape{-webkit-mask-box-image:url('images/blob.svg');
mask:url('images/shape.svg');}

.mermaid{position:absolute;
right:-20%;
bottom:-9%;
z-index:99;}

div.kolumienka{width:50%; float:left; !important;}

/*.navbar-brand img {
  position: relative;
  -webkit-animation: rocket 2s linear infinite;
  animation: rocket 2s linear infinite;
}

@-webkit-keyframes rocket {
  0% {
    left: 20px;
    bottom: 20px;
  }
  25% {
    left: -20px;
    bottom: 20px;
  }
  50% {
    left: -20px;
    bottom: 0px;
  }
  75% {
    left: 0px;
    bottom: 0px;
  }
  100% {
    left: 20px;
    bottom: 20px;
  }
}

@keyframes rocket {
  0% {
    left: 20px;
    bottom: 20px;
  }
  25% {
    left: -20px;
    bottom: 20px;
  }
  50% {
    left: -20px;
    bottom: 0px;
  }
  75% {
    left: 0px;
    bottom: 0px;
  }
  100% {
    left: 20px;
    bottom: 20px;
  }
}
*/

/*Vertical Sliding*/
.slidingVertical{
  display: inline;
  text-indent: 8px;
}
.slidingVertical span{
  animation: fadeInOut 10s linear infinite  0s;
  -ms-animation: fadeInOut 10s linear infinite  0s;
  -webkit-animation: fadeInOut 10s linear infinite  0s;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}
.slidingVertical span:nth-child(2){
  animation-delay: 1s;
  -ms-animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.slidingVertical span:nth-child(3){
  animation-delay: 2s;
  -ms-animation-delay: 2s;
  -webkit-animation-delay: 2s;
}
.slidingVertical span:nth-child(4){
  animation-delay: 3s;
  -ms-animation-delay: 3s;
  -webkit-animation-delay: 3s;
}
.slidingVertical span:nth-child(5){
  animation-delay: 4s;
  -ms-animation-delay: 4s;
  -webkit-animation-delay: 4s;
  color: #00abe9;

}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
  0% { opacity: 0; }
  5% { opacity: 0; -moz-transform: translateY(-50px); }
  10% { opacity: 1; -moz-transform: translateY(0px); }
  25% { opacity: 1; -moz-transform: translateY(0px); }
  30% { opacity: 0; -moz-transform: translateY(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
  0% { opacity: 0; }
  5% { opacity: 0; -webkit-transform: translateY(-50px); }
  10% { opacity: 1; -webkit-transform: translateY(0px); }
  25% { opacity: 1; -webkit-transform: translateY(0px); }
  30% { opacity: 0; -webkit-transform: translateY(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
  0% { opacity: 0; }
  5% { opacity: 0; -ms-transform: translateY(-50px); }
  10% { opacity: 1; -ms-transform: translateY(0px); }
  25% { opacity: 1; -ms-transform: translateY(0px); }
  30% { opacity: 0; -ms-transform: translateY(50px); }
  80% { opacity: 0; }
  100% { opacity: 0; }
}

/*fadeInOut Animation*/
@-moz-keyframes fadeInOut{
  0% { opacity: 0; }
  5% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-webkit-keyframes fadeInOut{
  0% { opacity: 0; }
  5% { opacity: 0; }
  10% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}
@-ms-keyframes fadeInOut{
  0% { opacity: 0; }
  5% { opacity: 0;  }
  10% { opacity: 1;  }
  25% { opacity: 1; }
  30% { opacity: 0; }
  80% { opacity: 0; }
  100% { opacity: 0; }
}