@import url('https://fonts.cdnfonts.com/css/montserrat?styles=17402,17398');


body {
    overflow-y: scroll !important; /* Calendly hack */
}

#ssl-hack {
    background: #102a4b;
    width: 100%;
    display: flex;
    justify-content: center;
}

#ssl-hack h2 {
    color: #fff;
}

#callout-banner p {
    padding: 0px 10px;
}

/* 
    COLOURS 

    Lime green - #94FFD4
    Soft blue - #87C0E8 // 94caff
    Pale cyan - #A1F1FF
    Light pink - #FF94BF // ff9494

    Dark grey - #565656

*/

body {
    font-family: 'Montserrat', sans-serif;

    font-weight: 300;
    color: #565656;
}


a.btn-link, #header a.btn-link, #header button.cta {
    background: #fff;
    color: #102a4b;
    border-radius: 10px;
    border: 1px solid #2bd8bb;
}

#header a.btn-link:hover,  #header button.cta:hover  {
    color: #2BD8BB;
}

#header button {
    font-size: 18px;
    line-height: 1.2em;
    font-weight: 300;
}

#header {
    font-size: 1.1rem;
    background-color: #102a4b;
}

.logo .process, .logo .warden {
    font-size: 1.5rem;
}

.logo .process {
    color: #ffffff;
}

footer .logo .process {
    color: #000;
}

.logo .warden {
    color: #2bd8bb;
}

#header a {
    text-decoration: none;
    color: #2bd8bb;
    font-weight: 400;
}

#header a.spaced {
    text-align: center;
}

a:hover .warden {
    color: #2bd8bb !important;
}

#header a:hover {
    color: #fff;
}

#header .hamburger {
    cursor: pointer;
    filter: saturate(400%) hue-rotate(42deg);
}

#hero-banner {
    background: url('/tubes/img/4k-donuts-2.jpg');
    background-size: cover;
    text-align: left;
    color: #102a4b;
}

#hero-banner h1 {
    font-size: 4rem;
    font-weight: normal;
    line-height: 5rem;
}

#hero-banner p {
    font-size: 1.7rem;
    font-weight: 400;
}

#main-intro {
    font-size: 1.2rem;
}

#main-intro p {
    font-size: 1.3rem;
}


#main-intro h1 {
    font-size: 3rem;
}

#main-intro ul {
    list-style-type: none;
}

#main-intro ul li span {
    color: #2bd8bb;
}

#main-intro ul li h3 {
    font-size: 1.7rem;
    margin: 10px 0px;
}
#main-intro ul li p {
    font-size: 1rem;
    line-height: 1.8rem;
    letter-spacing: 0.08rem;
}

#main-intro #free-trial-cta {
    background: #2bd8bb;
}

#free-trial-cta-buttons button {
    border-color: #102a4b;
}

#main-intro #free-trial-cta #conviction{
    text-align: left;
}

/* #main-intro #free-trial-cta button.contact-us { */
/*     color: #2bd8bb; */
/* } */
/* #main-intro #free-trial-cta button.contact-us:hover { */
/*     color: #fff; */
/* } */


#main-intro ol {
    list-style-type: none;
}



#main-intro p.bigger {
    font-weight: bold;
}

#main-intro #explanation li p {
    font-size: 1.3rem;
}


/* recopy */
#main-intro ul li {
    border-radius: 10px;    
}

 #main-intro ul li span {
    color: #2bd8bb;
 }
 
#main-intro ol {
    list-style-type: none;
    counter-reset: intro-counter;
}
#main-intro ol li:before {
    content: counter(intro-counter);
    position: absolute;
    top: -20px;
    left: -20px;
    border: 5px solid #fbfbfb;
    /* top: -1px; */
    /* left: -1px; */
    /* border: 5px solid white; */
    box-sizing: border-box;
    width: 70px;
    height: 70px;
    font-size: 40px;
    background: white;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
#main-intro ol li:after {
    content: "→";
    position: absolute;
    right: -50px;
    font-size: 50px;
}

#main-intro ol li:last-child:after {
    display: none;
 }
 
#main-intro ol li {
    counter-increment: intro-counter;
    border: 2px solid white;
    position: relative;
    border-radius: 20px;
    background: #f0fff0;
 }
 
#main-intro ol li span.material-icons-outlined {
    border-right: 1px solid grey;
}

#how-it-works .feature a {
    text-decoration: none;
    color: #2bd8bb;
    font-weight: 400;
}

#how-it-works .feature a:hover {
    color: #fff;
}


#how-it-works .feature:nth-child(2) {
    background: #102a4b;
}

#how-it-works .feature ul li {
    color: #fff;
}

#how-it-works .feature:nth-child(2) h3,#how-it-works .feature:nth-child(2) p{
    color: #fff;
}

#how-it-works .feature:last-child {
    background: #fafafa;
}

#good-company p {
    text-align: center;
}


#pricing {
}

#pricing thead th {
    background: #ccffff;
    font-size: 1.3rem;
    border-top: 1px solid cyan;
}

#pricing thead th:first-child {
    background: #fff;
    border-left: none;
    border-top: none;
}

#pricing tbody th {
    text-align: left;
    border-left: 1px solid cyan;
}

#pricing th, #pricing td {
    border-right: 1px solid cyan;
    border-bottom: 1px solid cyan;
}

#pricing .cta {
    font-size: 1.2rem;
    padding: 5px 10px;
    font-weight: normal;
}

button {
    margin: 0px;
    background: #fff;
    color: #102a4b;
    border-radius: 10px;
    border: 1px solid #2bd8bb;
}

button:hover {
    color: #2bd8bb;

}

button.cta {
    font-size: 1.1rem;
    line-height: 2rem;
    cursor: pointer;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.4rem;
}

h1,h2,h3 {
    font-weight: normal;
    color: #102a4b;
}

h3 {
    font-weight: bold;
    font-size: 1.4rem;
}

p {
    font-size: 1.1rem;
    color: #102a4b;
}

p.bigger {
    font-size: 1.5rem;
}


.section-title {
  color: #333;
  font-size: 2.5rem;
  font-weight: 600;
  margin-top: 0.75em;
  margin-bottom: 0.55em;
}



/* body {
  background-color: #1abc9c;
  font-family: "Poppins", sans-serif;
  text-align: center;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
} */

.planContainer {
  justify-content: center;
    background: #2bd8bb;
}
.plan {
  background: white;
  max-width: 280px;
  box-sizing: border-box;
  text-align: center;
  margin: 1em;
  margin-bottom: 1em;
}
.plan.recommended {
  box-shadow: 5px 5px 5px 0px rgba(86,86,86,0.5);
}
.plan .titleContainer {
  background-color: #f3f3f3;
  padding: 1em;
}
.plan .titleContainer .title {
  font-size: 1.45em;
  text-transform: uppercase;
  color: #102a4b;
  font-weight: 700;
}
.plan .infoContainer {
  padding: 1em;
  color: #2d3b48;
  box-sizing: border-box;
}
.plan .infoContainer .price {
  font-size: 1.35em;
  padding: 1em 0;
  font-weight: 600;
  margin-top: 0;
  display: inline-block;
  width: 80%;
}
.plan .infoContainer .price p {
  font-size: 1.35em;
  display: inline-block;
  margin: 0;
}
.plan .infoContainer .price span {
  font-size: 1.0125em;
  display: inline-block;
}
.plan .infoContainer .desc {
  padding-bottom: 1em;
  border-bottom: 2px solid #f3f3f3;
  margin: 0 auto;
  width: 90%;
}
.plan .infoContainer .desc em {
  font-size: 1em;
  font-weight: 500;
}
.plan .infoContainer .features {
  font-size: 1em;
  list-style: none;
  padding-left: 0;
}
.plan .infoContainer .features li {
  padding: 0.5em;
}
.plan .infoContainer .selectPlan {
  border: 2px solid #2bd8bb;
  padding: 0.75em 1em;
  border-radius: 2.5em;
  cursor: pointer;
  transition: all 0.25s;
  margin: 1em auto;
  box-sizing: border-box;
  max-width: 85%;
  display: block;
  font-weight: 700;
  text-transform: uppercase;
}
.plan .infoContainer .selectPlan:hover {
  color: #2bd8bb;
}

#contact {
    background: url('/tubes/img/4k-dots-grey.jpg');
    background-size: cover;
}

#contact p {
    text-align: center;
}


#contact-form-container {
    background: #fff;
    border-radius: 10px;
}

#contact .contact-block span {
    font-size: 110px;
    color: #102A4B;
}

#contact form > input,
#contact form > textarea,
#contact form > button {
    font-size: 1.1rem;
    font-family: 'Montserrat', sans-serif;

}

footer {
  color: #FFF;
}

footer a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}
footer a:hover {
    color: #2BD8BB;
}

footer hr {
    border: 1px solid grey;
    color: #000;
}

footer .cta {
  font-size: 1rem;
  line-height: initial;
  background: #ff9494;
}

footer #cta-box h4 {
  font-weight: 400;
  font-size: 20px;
}

#request form > input, #request form > textarea, #request form > button {
  font-size: 1.3em;
font-family: 'Montserrat', sans-serif;

}

#request .section-title {
    font-size: 2rem;
}

#request form > input, #request p {
    font-size: 1em;
}

.smallprint {
    font-size: 0.7rem;
}

#request.submitted {   
    background-position: 10%;
    background-repeat: no-repeat;
    background-size: 180px;
}

#scroll-wrapper {
  overflow: scroll;
}

#modal-close, button[type=submit] {
  cursor: pointer;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#scroll-wrapper::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#scroll-wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Animation */

.waypoint {
  opacity: 0;
}

@keyframes fadeInUp {
  from {
      transform: translate3d(0,40px,0)
  }

  to {
      transform: translate3d(0,0,0);
      opacity: 1
  }
}

@-webkit-keyframes fadeInUp {
  from {
      transform: translate3d(0,40px,0)
  }

  to {
      transform: translate3d(0,0,0);
      opacity: 1
  }
}

@keyframes fadeInDown {
  from {
      transform: translate3d(0,-40px,0)
  }

  to {
      transform: translate3d(0,0,0);
      opacity: 1
  }
}

@-webkit-keyframes fadeInDown {
  from {
      transform: translate3d(0,-40px,0)
  }

  to {
      transform: translate3d(0,0,0);
      opacity: 1
  }
}

@keyframes fadeInLeft {
  from {
      transform: translate3d(40px,0,0)
  }

  to {
      transform: translate3d(0,0,0);
      opacity: 1
  }
}

@-webkit-keyframes fadeInLeft {
  from {
      transform: translate3d(40px,0,0)
  }

  to {
      transform: translate3d(0,0,0);
      opacity: 1
  }
}

@keyframes fadeInRight {
  from {
      transform: translate3d(-40px,0,0)
  }

  to {
      transform: translate3d(0,0,0);
      opacity: 1
  }
}

@-webkit-keyframes fadeInRight {
  from {
      transform: translate3d(-40px,0,0)
  }

  to {
      transform: translate3d(0,0,0);
      opacity: 1
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

.fadeInDown {
  opacity: 0;
  animation-name: fadeInDown;
  -webkit-animation-name: fadeInDown;
}

.fadeInLeft {
  opacity: 0;
  animation-name: fadeInLeft;
  -webkit-animation-name: fadeInLeft;
}

.fadeInRight {
  opacity: 0;
  animation-name: fadeInRight;
  -webkit-animation-name: fadeInRight;
}

#demo-modal-parent {
    color: #333;
    background-color: #000000aa;
    z-index: 1000;
}

#demo-modal {
    border-radius: 10px;
    background-color: #fff;
    z-index: 1000;
}

#demo-modal h1 {
    text-align: center;
}

.quote {
    font-style: italic;
}

/* Phones (max 375px) */
@media only screen and (max-width: 898px) {
    #hero-banner {
      min-height: 0px;
    }

    #hero-banner p {
        font-size: 2rem;
    }

    #hero-banner #strapline-info p {
      background-color: #f3f3f3;
      font-size: 1.25rem;
      text-transform: uppercase;
      color: #102a4b;
      font-weight: 700;
      text-align: center;
    }

    #hero-banner h1 {
      font-size: 2.85rem;
      line-height: 4rem;
    }

    #how-it-works h1 {
      font-size: 3.10rem;
    }
    
    #phone-divider {
      border-bottom: 2px solid #f3f3f3;
    }
}

@media only screen and (max-width: 1160px) {
    #how-it-works .feature-phone {
      align-items: center;
    }

    .feature-description h2 {
      font-size: 1.8rem;
    }

    #tubes-model h2, #tubes-model h1, .feature-description h2 {
      text-align: center;
    }

}



@media only screen and (max-width: 1700px) {
    #hero-banner {
        background-position: center left;
    }
}

@media only screen and (max-width: 1200px) {
    #main-intro ol li:after {
        content: "";
    }
}


@media only screen and (max-width: 367px) {
  #how-it-works h1,
  #tubes-model h1,
  #pricing h1,
  #contact h1 {
      font-size: 2.4rem;
  }

  #contact form > input, #contact form > textarea, #contact form > button {
    font-size: 1em;
  }
}

@media only screen and (max-width: 898px) {
  #tubes-model h2, 
  .feature-description h2 {
    font-size: 1.8rem;
  }
  #footer-nav >* {
      padding: 10px 0px;
  }
}


@media only screen and (max-width: 550px) {
    #main-intro ol li:before {
        font-size: 20px;
        width: 35px;
        height: 35px;
    }

    #main-intro {
        padding-top: 20px;
    }
}