/* ---------------------------------------------------------
 * Hero Scroll Icon
 * --------------------------------------------------------- */
.scroll-down-wrap{
  transition:opacity 0.4s ease;
  -webkit-transition:opacity 0.4s ease;
  -moz-transition:opacity 0.4s ease;
}
.scroll-down-wrap,.scroll-down-wrap.no-border{
  position:absolute;
  bottom:20px;
  left:50%;
  width:60px;
  margin-left:-30px;
}
.scroll-down-wrap.no-border,.scroll-down-wrap.no-border{
  bottom:12px;
}
.scroll-down-wrap.no-border .section-down-arrow{
  display:inline-block;
  width:49px;
  height:49px;
  color:#fff!important;
  border:2px solid #fff;
  text-align:center;
  line-height:50px;
  border-radius:100px;
  font-size:25px;
  -webkit-border-radius:100px;
  transition:opacity 0.4s ease;
  -webkit-transition:opacity 0.4s ease;
  -moz-transition:opacity 0.4s ease;
  overflow:hidden;
  margin-left:0px;
  left:0;
  bottom:16px;
  opacity:0.6;
}
.scroll-down-wrap.no-border .section-down-arrow,.slider-down-arrow.no-border{
  border:none!important;
  overflow:visible;
  text- align:center;
  opacity:1;
  height:auto;
  bottom:13px;
  -webkit-animation:nudgeMouse 2.4s cubic-bezier(0.250,0.460,0.450,0.940) infinite;
  animation:nudgeMouse 2.4s cubic-bezier(0.250,0.460,0.450,0.940) infinite;
}
.nectar-scroll-icon-path{
  fill:transparent;
  stroke-width:2px;
  stroke-dashoffset:120;
  stroke-dasharray:120;
  -webkit-animation:mouse-scroll-btn-roll-out .55s cubic-bezier(.5,.1,.07,1);
  animation:mouse-scroll-btn-roll-out .55s cubic-bezier(.5,.1,.07,1);
}
.nectar-scroll-icon{
  width:30px;
  height:45px;
  text-align:center;
  cursor:pointer;
  position:relative;
}
.scroll-down-wrap.no-border .section-down-arrow:after,.slider-down-arrow.no-border:after{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  display:block;
  width:30px;
  height:45px;
  margin-left:-15px;
  border:2px solid rgba(255,255,255,0.5);
  border-radius:30px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
.scroll-down-wrap.no-border:hover .section-down-arrow:before, .slider-down-arrow.no-border:hover:before{
  background-color:rgba(255,255,255,1);
}
.scroll-down-wrap.no-border:hover .nectar-scroll-icon-path, .slider-down-arrow.no-border:hover .nectar-scroll-icon-path{
  stroke-dashoffset:0;
  -webkit-animation:mouse-scroll-btn-roll-over .55s cubic-bezier(.5,.1,.07,1);
  animation:mouse-scroll-btn-roll-over .55s cubic-bezier(.5,.1,.07,1)
}
@-webkit-keyframes mouse-scroll-btn-roll-over{
  0%{stroke-dashoffset:120}
  100%{stroke-dashoffset:0}
}
@keyframes mouse-scroll-btn-roll-over{
  0%{stroke-dashoffset:120}
  100%{stroke-dashoffset:0}
}
@-webkit-keyframes mouse-scroll-btn-roll-out{
  0%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-120}
}
@keyframes mouse-scroll-btn-roll-out{
  0%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-120}
}
.scroll-down-wrap.no-border .section-down-arrow:before,.slider-down-arrow.no-border:before{
  position:absolute;
  content:'';
  display:block;
  left:50%;
  margin-left:-1px;
  top:22px;
  background-color:rgba(255,255,255,0.5);
  width:2px;
  height:6px;
  border-radius:10px;
  transition:background-color .55s cubic-bezier(.5,.1,.07,1);
  -webkit-animation:trackBallSlide 2.4s cubic-bezier(0.000,0.000,0.725,1.000) infinite;
  animation:trackBallSlide 2.4s cubic-bezier(0.000,0.000,0.725,1.000) infinite;
}
@-webkit-keyframes trackBallSlide{
  0%{
    opacity:1;
    -webkit-transform:scaleY(1) translateY(-10px);
    transform:scaleY(1) translateY(-10px);
  }
  45%{
    opacity:0;
    -webkit-transform:scaleY(0.5) translateY(13px);
    transform:scaleY(0.5) translateY(13px);
  }
  46%{
    opacity:0;
    -webkit-transform:scaleY(1) translateY(-10px);
    transform:scaleY(1) translateY(-10px);
  }
  65%,100%{
    opacity:1;
    -webkit-transform:scaleY(1) translateY(-10px);
    transform:scaleY(1) translateY(-10px);
  }
}
@keyframes trackBallSlide{
  0%{
    opacity:1;
    -webkit-transform:scaleY(1) translateY(-10px);
    transform:scaleY(1) translateY(-10px);
  }
  45%{
    opacity:0;
    -webkit-transform:scaleY(0.5) translateY(13px);
    transform:scaleY(0.5) translateY(13px);
  }
  46%{
    opacity:0;
    -webkit-transform:scaleY(1) translateY(-10px);
    transform:scaleY(1) translateY(-10px);
  }
  65%,100%{
    opacity:1;
    -webkit-transform:scaleY(1) translateY(-10px);
    transform:scaleY(1) translateY(-10px);
  }
}
@keyframes nudgeMouse{
  0%{
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
  45%{
    -webkit-transform:translateY(8px);
    transform:translateY(8px);
  }
  65%,100%{
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
}
@-webkit-keyframes nudgeMouse{
  0%{
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
  45%{
    -webkit-transform:translateY(8px);
    transform:translateY(8px);
  }
  65%,100%{
    -webkit-transform:translateY(0);
    transform:translateY(0);
  }
}

/* ---------------------------------------------------------
 * Styles
 * --------------------------------------------------------- */
.content-title {
  font-family: "Lato", sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #212121;
  line-height: 1.7;
  text-align: left;
}

.content-subtitle {
  font-family: "Lato", sans-serif;
  font-size: 25px;
  font-weight: 700;
  color: #212121;
  line-height: 1.7;
  text-align: left;
  padding-top: 16px;
}

#screenshots {
  padding-bottom: 70px;
  display: none;
}

#facts {
  display: none;
}

.screenshot {
  width: 20%;
  margin: 5px 20px 35px 20px;
  max-width: 250px;
}

@media (max-width: 1180px) {
  .screenshot {
    width: 50%;
  }
}

@media (max-width: 780px) {
  .screenshot {
    width: 80%;
  }
}

#technologies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.technology {
  width: 120px;
  margin: 40px 40px 0 40px;
}

.technology img {
  width: 100%;
}

.technology p {
  color: #000000;
  text-align: center;
  margin-top: 10px;
}