body, button {
  font-family: 'Lato', 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #333;
  font-weight: 500;
  background: #fff;
  margin: 0;
  display: block;
}
.flex-col {
  display: flex;
  padding: 48px 8px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

a { color:#0055fd; text-decoration: none;}

a.zuplo-button {
  background-color:#FF00BD; 
  border:0; 
  border-radius: 5px;
  color: white; 
  font-size: large; 
  font-family:exo; 
  padding: 3px 15px 3px 15px;
   box-shadow: 1px 1px 2px #00000044; 
   text-decoration: none;
   white-space: nowrap;
}

a.zuplo-button:hover {
  background-color:#ff00bbd7;
  text-decoration: none;
}

a:not(.menu-item):hover { text-decoration: underline; }
h1,h2,h3 {
  margin-block-start: 1em;
  margin-block-end: 0.2em;
  font-weight:300; 
}

.mono, code { font-family: 'Roboto Mono', monospace; }
.bold { font-weight:700; }
.right{ text-align: right; }
.left{ text-align: left; }
.gray { color:#777; }
.dark-gray { color:#444; }
.light-gray { color:#aaa; }
.blue { color:steelblue; }
.orange { color:orangered; }
.small-font {font-size:12px;}
.table-title { margin: 12px 0 5px 0; font-weight:bold; }
.descr {
  font-size:13px;
  font-weight: normal;
  margin-left:12px;
}
.hide-in-mobile { display:none; }
.topbar{
  padding: 6px 24px;
}

.banner {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
  color:white;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.parallax > use {
  animation: animate-wave 25s cubic-bezier(.55,.5,.45,.5) 120s;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 45s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 55s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 65s;
}
@keyframes animate-wave {
  0% {
    transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

.section-text{
  background: url('./images/bg-shape1.svg') right top no-repeat;;
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
  .content {
    height:30vh;
  }
  h1 {
    font-size:24px;
  }
}

.banner-content{
  font-weight: 300;
}
.banner-title {
  font-size: 38px;
  line-height: 48px;
}
.header {
  display: flex;
  align-items: center;
  height: 60px;
  justify-content: center;
}

.logo{display:none}
.code-block{
  font-size:12px;
  width:320px;
  border-radius:4px;
  margin-top:2px;
}

.menu-item {
  margin-right: 12px;
  color: #caecff;
  font-weight: 300;
  text-decoration: none;
  position: relative;
}
.menu-item:hover {
  color:#fff;
}

.product-name {
  font-weight: 300;
  font-size: 32px;
  line-height: 40px;
  color: #fff;
}
.row{
  display:flex;
  flex-direction: row;
  width:100%;
  justify-content: space-evenly;
}
.col{
  display:flex;
  flex-direction: column;
  align-items: center;
  flex:1;
}
.footer{
  display:flex;
  flex-direction: row;
  background-color: #444;
  color:#ccc;
}

.footer-item{
  padding: 5px 16px;
}
.footer-item a{
  color:#ccc;
}

.feature-list{
  text-align: left;
}
.container{
  padding: 40px 64px;
}

.features {
  margin-top:50px;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  padding:60px 0 24px 0;
  min-height:150px;
}

.feature{
  display:flex;
  flex:1;
  max-width:320px;
  min-width:320px;
  margin:0 8px 24px 8px;
}

.feature-icon{
  min-width:64px;
  min-height:64px;
}

.feature-info{
  display:flex;
  flex-direction: column;
  margin-left:12px;
  text-align:left;
  font-size:16px;
}

.feature-info .feature-title{ font-size:18px;}
.feature-info .feature-descr{ font-size:14px;}

.shadow1 {
  box-shadow: 0 2px 2px rgba(0,0,0,0.25);
}
.shadow2 {
  border-radius:2px;  
  box-shadow: 0 2px 3px rgba(100,100,100,0.12), 0 2px 3px rgba(100,100,100,0.24);
}
.shadow3 {
  border-radius:4px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.25), 0 6px 6px rgba(0,0,0,0.22);
}

.btn {
  width: 90px;
  height: 32px;
  padding:2px;
  font-size:13px;
  background-color: DodgerBlue;
  color: #fff;
  border: none;
  margin: 0 2px;
  border-radius: 2px;
  cursor:pointer;
  outline:none;
}
.btn.medium {
  width: 75px;
  height: 28px
}
.btn.small {
  width: 60px;
  height: 24px
}

.txt{
  width: 100px;
  height: 30px;
  font-size:13px;
  background-color: #333;
  border: 1px solid #47AFE8;
  color: #fff;
  padding:0 8px;
  margin: 0 2px;
  border-radius: 2px;
  outline:none;
}

@media only screen and (min-width: 768px){
  .hide-in-mobile { display:block; }
  .header { justify-content:left }
  .menu   { display:flex; }
  .logo   { display:block; }
  .code-block{
    font-size:12px;
    width:650px;
  }
  
  .menu-item {
    margin-left: 20px;
    margin-right: 0;
  }
  .banner-1 {
    padding: 40px 32px 80px 32px;
  }    
  .features {
    padding:175px 32px 24px 32px;
  }
  
  .demo {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  
}

@media only screen and (min-width: 800px) {
  .hide-in-mobile { display:block; }
  .menu { display:flex; }
  .logo { display:block; }
  .code-block{
    font-size:14px;
    width:730px;
  }
  .menu-item {
    margin-left: 24px;
    margin-right: 0;
  }
}