/*!
 * Start Bootstrap - Scrolling Nav (https://startbootstrap.com/template-overviews/scrolling-nav)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-scrolling-nav/blob/master/LICENSE)
 */
header {
  padding: 106px 0 50px;
  /* background-image: linear-gradient(rgb(9, 170, 170), #006669); */
  background-image: linear-gradient(#136a8a,#267771);
  background-image: linear-gradient(180deg, #136a8a,#267771);
}

h1 {
  font-family: "roboto-light";
  font-size: 50px;
}

h2 {
  font-family: "roboto-light";
  font-size: 40px;
  margin-top: 22px;
}

section {
  padding: 50px 0;
}

@media (min-width: 768px) {
  section {
    padding: 150px 0;
  }
  header {
    padding: 150px 0 50px;
  }
}

#mainNav {
  
  box-shadow: black 0 0 30px;

}

@media (min-width: 570px) and (max-width: 760px) {
  .hide-medium {
    display: none;
  }
}
@media (min-width: 757px) and (max-width: 999px) {
.hide-medium {
  display: none;
}

section .col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 40.333333%;
    max-width: 40.333333%;
}

}

#section1 {
  /* background-image: linear-gradient(rgb(204, 101, 92), #811); */
  /* background-image: linear-gradient(#FFC371,#FF5F6D); */
  background-image: linear-gradient(135deg,#FFC371,#FF5F6D);
  color: white;
}

#section2 {
  /* background-image: linear-gradient(rgb(51, 200, 200), rgb(3, 87, 87)); */
  /* background-image: linear-gradient(#8f94fb,#3F2B96); */
  background-image: linear-gradient(45deg,#8f94fb,#3F2B96);
  color: white;
}

#section3 {
  /* background-image: linear-gradient(white, lightgray); */
  /* background-image: linear-gradient(135deg, #A1FFCE, #FAFFD1); */
  /* background-image: linear-gradient(45deg, #DCE35B, #45B649); */
  background-image: linear-gradient(-45deg, #00F260, #0575E6);
  /* color: #4a4a4d; */
  color: white;
}

#section4 {
  /* background-image: linear-gradient(white, lightgray); */
  background-image: linear-gradient(45deg, #434343, #151515);
  color: white;
}

@media (min-width: 768px) {
#header .container {
    max-width: 100%;
}
}
@media (min-width: 576px) {
#header .container {
    max-width: 100%;
}
}



@media (max-width: 999px) {
#header .top-screenshots {
  overflow-x: scroll;
  height: 550px;
  margin-left: -15px;
  margin-right: -15px;
  text-align: center;
  position: relative;
}
#header .top-screenshots .inner {
  width: 999px;
  position: absolute;
  /* left: calc((100vw - 1010px) * 0.5); */
  /* margin-left: calc((100vw - 1075px) * 0.5); */
  /* margin-left: 400px; */
  /* left: -265px; */
  /* left: -50%; */
  /* transform: translateX(.5vw); */
  /* margin-left: calc((100% - 810px)/-2); */
}
.top-screenshots::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.top-screenshots {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
}

#faq, #contact {
  background: #f5f5f7;
  color: #86868b;
}

#faq .row {
  margin-bottom: 25px;
}

#faq h3, #faq p, #contact p {
  font-size: 20px;
}

#contact {
  padding-top: 0;
}

body {
  font-family: "HelveticaNeue-Light", 'Trebuchet MS', Helvetica, Arial, sans-serif;
}

section .container p {
  font-family: "roboto-thin", "HelveticaNeue-Light", 'Trebuchet MS', Helvetica, Arial, sans-serif;
  font-size: 24px;
}

header .container p {
  font-family: "roboto-thin", "HelveticaNeue-Light", 'Trebuchet MS', Helvetica, Arial, sans-serif;
  font-size: 25px;
}

h3 {
  font-size: 24px;
}

a, a:visited {
  color: rgb(9, 170, 170);
}

a:hover, a:active {
  color: rgb(51, 200, 200);
}

.section-info {
  margin-top: 50px;
}

@media (min-width: 768px) {
.top-screenshots img:nth-child(1),
.top-screenshots img:nth-child(3) {
  margin-top: 40px;
}
}

.screenshot-main {
  max-height: 500px;
}

.screenshot-normal {
  max-height: 400px;
}

@media (max-width: 999px) {
  .screenshot-normal {
    max-height: 500px;
  }
}

.show-on-scroll {
  opacity: 0;
  transition: transform 1s .15s ease-in-out, opacity 1s .15s ease-in-out;
  transform: translateY(50px);
}

.screenshot-main.show-on-scroll {
  transform: translateY(20px);
}

.screenshot-main.one.show-on-scroll {
  transition: transform 2s .15s ease-in-out, opacity 2s .15s ease-in-out;
}

.screenshot-main.two.show-on-scroll {
  transition: transform 2s .15s ease-in-out, opacity 2s .15s ease-in-out;
}

.screenshot-main.three.show-on-scroll {
  transition: transform 2s .15s ease-in-out, opacity 2s .15s ease-in-out;
}

.screenshot-main.one.show-on-scroll:not(.is-visible) {
  transform: translateY(30px);
}

.screenshot-main.two.show-on-scroll:not(.is-visible) {
  transform: translateY(50px);
}

.screenshot-main.three.show-on-scroll:not(.is-visible) {
  transform: translateY(40px);
}

.show-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

h1.show-on-scroll, h2.show-on-scroll, p.show-on-scroll {
  transform: none;
}

.app-store-icon {
  margin-top: 50px;
}

.icon {
  height: 24px;
  margin-right: 10px;
}


.copyright {
  display: inline;
}

.privacy-policy {
  float: right;
}

.privacy-policy a,
.privacy-policy a:visited {
  color: white;
}

@media (max-width: 768px) {
  h2, h3, p, img {
    margin-top: 30px;
    text-align: center;
  }
  .icon {
    margin: 0;
    height: 32px;
  }
  .copyright {
    display: block;
    padding: 10px;
  }
  .privacy-policy {
    padding: 10px;
    float: none;
  }
}


@font-face {
  font-family: roboto-thin; 
  src: url(/font/roboto.thin.ttf);
}

@font-face {
  font-family: roboto-light; 
  src: url(/font/roboto.light.ttf);
}