/* Shared
================================================== */

p.partner {
  color: #8E8E8E;
}

.fa, .fas, .far, .fal, .fab {
  opacity: 0.2;
}

.button .fa,
.button .fas,
.button .far,
.button .fal,
.button .fab {
  opacity: 0.4;
}

.em-color {
  font-style: normal;
  color: #34D789;
}

.button-group {
    text-align: center;
    display: inline-block;
}

.button-group .button {
    display: inline-block;
    margin-bottom: 8px;
}

.button-group .button.large {
    margin-bottom: 10px;
}

.button-group .button-partner {
    font-size: 16px;
    color: #A2A2A2;
    display: block;
}

.button-group.with-arrow {
  position: relative;
}

.align-right {
  text-align: right;
}

.align-left {
  text-align: left;
}

.p-partner {
  color: #8E8E8E;
}

.text-highlight {
  background-color: #FFFC99;
  background-size: auto 8px;
  padding: 0 5px;
  border-radius: 6px;
}

.bg-bubbles {
  position: relative;
}

.bg-bubbles::before {
  background-image: url(../images/bg-bubbles-repeat.webp);
  background-position: center center;
  background-repeat: repeat-x;
  content: "";
  height: 185px;
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
}

.bg-waves {
  background-image: url(../images/bg-pattern-waves-blue-on-white.webp);
  background-position: center top;
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 500px;
  position: relative;
}

.bg-gradient-top::before {
  height: 250px;
  width: 100%;
  background-image: linear-gradient(180deg, rgba(255,255,255,1.00) 0%, rgba(255,255,255,0.00) 100%);
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
}

.bg-gradient-bottom::before {
  height: 400px;
  width: 100%;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,1.00) 100%);
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.sub-title {
  font-size: 2.0rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 2px;
  color: #34D789;
  margin-bottom: 15px;
  display: block;
}

.sub-title.rule1 {
  color: #1BBDF6;
}

.sub-title.rule2 {
  color: #34D789;
}

.sub-title.rule3 {
  color: #16EDDE;
}

.sub-title.rule4 {
  color: #FFB40B;
}

.sub-title span {
  opacity: 0.4;
}

.color-rule1 {
  color: #1BBDF6;
}

.color-rule2 {
  color: #34D789;
}

.color-rule3 {
  color: #16EDDE;
}

.color-rule4 {
  color: #FFB40B;
}

.body-panel {
  max-width: 360px;
  background-color: #fff;
  border-radius: 10px;
  padding: 50px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 130px;
  text-align: center;
  -webkit-box-shadow: 0px 10px 60px rgba(0, 0, 0, .10);
  -moz-box-shadow: 0px 10px 60px rgba(0, 0, 0, .10);
  box-shadow: 0px 10px 60px rgba(0, 0, 0, .10);
}

.body-panel form {
  text-align: left;
}

.body-panel form input,
.body-panel form textarea {
  width: 100%;
}

.call-out-wrapper {
  text-align: center;
  background-color: rgba(27,189,246,0.05);
  border-radius: 18px;
  padding: 60px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}

@media (max-width: 767px) {
.call-out-wrapper {
  padding: 40px;
}
}

.call-out-wrapper .title-image {
  margin-bottom: 20px;
}

.submit-note {
  font-size: 1.6rem;
  margin-bottom: 0;
  margin-top: 15px;
  text-align: center;
}

#ck_error_msg {
  text-align: center;
  display: block;
  color: #FF5722;
}

small.error {
  color: #FF5722;
  font-size: 75%;
  margin-top: -10px;
  display: block;
}

.four-oh-four {
  padding: 100px 20px 50px;
}

.card {
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}

.heading-divider {
  margin-bottom: 40px;
  padding-bottom: 15px;
  border-bottom: 1px solid #E4E4E4;
}

.header-announcement {
  background-color: rgba(27, 189, 246, 0.13);
  display: block;
  text-align: center;
  font-size: 16px;
  padding: 12px 20px 17px;
}

.header-announcement p {
  margin-bottom: 0px;
}

.header-announcement i {
  opacity: 0.3;
}

.block-list {
  list-style: none;
  text-align: center;
}

.block-list li {
  margin-bottom: 40px;
  transform: rotate(-1deg);
}

.block-list li:nth-child(even) {
  transform: rotate(1deg);
}

.block-list li span {
  background-color: rgba(27, 189, 246, 0.15);
  padding: 15px 30px 17px;
}

.block-list li:nth-child(even) span {
  background-color: rgba(52, 215, 137, 0.15);
  padding: 15px 30px 17px;
  transform: rotate(1deg);
}

.divider-title {
  font-family: "Caveat","Roboto","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  color: #1BBDF6;
  letter-spacing: -2px;
  text-align: center;
  position: relative;
  margin-bottom: 130px;
}

/* Header
================================================== */

header {
    height: 90px;
    padding: 0px 25px;
    background-color: rgba(27,189,246,0.05);
    font-size: 18px;
    position: relative;
    z-index: 1;
}

header h1 {
    position: absolute;
    line-height: 0;
    left: 25px;
    top: 25px;
}

header h1 a {
    display: block;
    padding-top: 1px;
}

header nav {
    position: absolute;
    right: 25px;
    top: 13px;
}

@media only screen and (max-width: 767px) {
header nav {
    display: none;
}
}

header nav ul {
  display: table;
  list-style: none;
  margin: 0;
}

header nav ul li {
  display: inline-block;
  margin-left: 35px;
  margin-bottom: 0;
}

@media only screen and (max-width: 935px) {
header nav ul li {
  margin-left: 25px;
}
}

header nav .nav-cta .button {
  padding: 12px 35px 15px;
  margin-bottom: -1px
}

header .mobile-nav {
  display: none;
}

header .mobile-nav .fas {
  opacity: 1.0;
}

@media only screen and (max-width: 767px) {
header .mobile-nav {
    font-size: 32px;
    display: block;
    position: absolute;
    top: 16px;
    right: 25px;
    color: #1ab6ed;
    z-index: 100;
}
}

/* Main nav dropdowns */

header nav ul li.with-drop {
  position: relative;
}

header nav ul li.with-drop a {
  padding-bottom: 20px;
  display: block;
}

header .main-nav-drop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  display: none;
  width: 610px;
  padding: 15px;
  margin: 45px 0 0;
  list-style: none;
  font-size: 13px;
  text-align: left;
  background-color: #fff;
  border-radius: 8px;
  -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.15);
  -moz-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.15);
  box-shadow: 0 3px 10px 0 rgba(0,0,0,0.15);
}

@media only screen and (max-width: 935px) {
header .main-nav-drop {
  width: 300px;
}
}

header .main-nav-drop a {
  color: #1ab6ed;
}

header .main-nav-drop a:hover {
  color: #1ab6ed;
}

/*
header .main-nav-drop::before {
  width: 0;
  height: 0;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%, 0);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #fff;
  content: "";
}
*/

header nav li.with-drop:hover > .main-nav-drop {
  display: block;
}

header .main-nav-drop li {
  margin-left: 0px;
  margin-bottom: 5px;
  display: block;
}

@media only screen and (min-width: 936px) {
header .main-nav-drop li:last-child {
  margin-bottom: 0px;
}
}

header nav ul li.with-drop .main-nav-drop li a {
  color: #1ab6ed;
  line-height: 1.6;
  display: block;
  position: relative;
  padding: 10px 8px 15px 70px;
  border-radius: 7px;
  -webkit-transition: background-color .1s ease-in-out;
	-moz-transition: background-color .1s ease-in-out;
	-o-transition: background-color .1s ease-in-out;
}

header .main-nav-drop li a:hover {
 background-color: rgba(27,189,246,0.07);
 color: #1ab6ed;
}

header .main-nav-drop li a i {
  position: absolute;
  top: 9px;
  left: 10px;
  opacity: 0.35;
  font-size: 22px;
  text-align: center;
  line-height: 51px;
  color: #fff;
  width: 50px;
  height: 50px;
  background-color: #1BBDF6;
  border-radius: 1000px;
}

header .main-nav-drop li a img {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 50px;
  height: 50px;
  border-radius: 1000px;
}

header .main-nav-drop li a strong {
  display: block;
  font-size: 1.6rem;
}

header .main-nav-drop li a span {
  opacity: 0.8;
}

header .main-nav-drop a.main-nav-drop-cta {
  background-color: rgba(27,189,246,0.07);
  font-weight: 600;
  font-size: 1.6rem;
  padding: 16px 20px 17px 20px !important;
  position: relative;
  display: block;
  border-radius: 7px;
  -webkit-transition: background-color .1s ease-in-out;
	-moz-transition: background-color .1s ease-in-out;
	-o-transition: background-color .1s ease-in-out;
}

header .main-nav-drop a.main-nav-drop-cta:hover {
  background-color: rgba(27,189,246,0.10);
}

@media only screen and (max-width: 935px) {
header .main-nav-drop a.main-nav-drop-cta {
  text-align: center;
}
}

header .main-nav-drop a.main-nav-drop-cta i {
  position: absolute;
  right: 20px;
  top: 23px;
  opacity: 0.4;
}

@media only screen and (max-width: 935px) {
header .main-nav-drop a.main-nav-drop-cta i {
  display: none;
}
}

header .main-nav-drop a.main-nav-drop-cta .cta-doodle-arrow {
  position: absolute;
  top: -11px;
  right: 20px;
}

@media only screen and (max-width: 935px) {
header .main-nav-drop a.main-nav-drop-cta .cta-doodle-arrow {
  display: none;
}
}

header .main-nav-drop .half-list-drop {
 width: 49%;
 float: left;
 margin-bottom: 10px;
}

header .main-nav-drop .half-list-drop:last-of-type {
  float: right;
}

@media only screen and (max-width: 935px) {
header .main-nav-drop .half-list-drop {
 width: 100%;
 float: none;
}
}

/* Hero
================================================== */

.hero {
  background-color: rgba(27,189,246,0.05);
  padding: 90px 0px 160px;
  margin-bottom: 100px;
  position: relative;
  overflow: hidden;
}

/* Must be 1 pixel less than grid breakpoint */
@media (max-width: 1099px) {
.hero {
  text-align: center;
  padding: 70px 0px 120px;
}

.hero.landing-hero {
  padding-bottom: 350px;
}

.hero h1,
.hero p {
  max-width: 575px;
  margin-left: auto;
  margin-right: auto;
}
}

.hero.with-cta p {
  margin-bottom: 4.0rem;
}

.hero.hero-centered {
  text-align: center;
}

.hero.hero-centered h1,
.hero.hero-centered p {
  margin-left: auto;
  margin-right: auto;
}

.hero.hero-centered img {
  margin-top: -30px;
  margin-bottom: 20px;
}

.hero.curved {
  background-color: inherit;
}

.hero.curved::before {
  border-radius: 100%;
  position: absolute;
  background: rgba(27,189,246,0.05);
  right: -900px;
  left: -900px;
  top: -900px;
  content: '';
  bottom: 0px;
}

/* For large headlines on Home hero: */
@media (min-width: 1205px) {
.hero.home-hero .headline-large {
  font-size: 6.5rem;
}
}

@media (min-width: 1100px) {
.hero.home-hero .headline-large .script-large {
  font-family: "Caveat", "nudista-web", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100px;
  font-weight: 400;
  line-height: 100px;
  letter-spacing: -5px;
  margin-left: -15px;
  margin-bottom: -5px;
  display: block;
}

.hero.home-hero .headline-large.with-script {
  font-size: 5.5rem;
}
}

@media (min-width: 1150px) {
.hero.home-hero .headline-large .script-large {
  font-size: 110px;
  line-height: 110px;
}

.hero.home-hero .headline-large.with-script {
  font-size: 6.0rem;
}
}

/* Must equal grid breakpoint */
@media (min-width: 1100px) {
.hero.home-hero {
  margin-bottom: 0px;
  padding-bottom: 300px;
}
}

/* Must equal grid breakpoint */
@media (min-width: 1100px) {
.hero.landing-hero {
  margin-bottom: 0px;
  padding-bottom: 400px;
}
}

/* Must equal grid breakpoint */
@media (min-width: 1100px) {
.hero.landing-hero h1 {
  font-size: 5.8rem;
}
}

.hero.pricing-hero {
  margin-bottom: 0px;
  padding-bottom: 280px;
}

.hero.blog-landing-hero {
  margin-bottom: 0px;
  padding-bottom: 200px;
}

.hero.blog-post-hero {
  margin-bottom: 0px;
  padding-bottom: 200px;
}

.hero.affiliate-promo-hero {
  margin-bottom: 0px;
  padding-bottom: 200px;
}

/* Must equal grid breakpoint */
@media (min-width: 1100px) {
.hero.mac-hero {
  margin-bottom: 0px;
  padding-top: 70px;
  padding-bottom: 280px;
}
}

.hero.support-post-hero {
  padding: 70px 0px 120px;
}

.hero.support-hero {
  padding-bottom: 120px;
}

.hero.testimonials-request-hero {
  margin-bottom: 0px;
  padding-bottom: 200px;
}

.hero.book-download-hero {
  margin-bottom: 0px;
  padding-bottom: 200px;
}

/* Intro & Section Titles
================================================== */

.intro,
.section-title {
  text-align: center;
  margin-bottom: 100px;
}

.intro.home-intro.landing-intro {
  max-width: 97%;
  margin-left: auto;
  margin-right: auto;
}

/* Must be 1 pixel less than grid breakpoint */
@media (max-width: 1099px) {
.intro,
.section-title {
  margin-bottom: 80px;
}

.intro.home-intro.landing-intro {
  margin-top: -375px;
}
}

@media (min-width: 1100px) {
.intro.home-intro {
  margin-top: -230px;
}
}

@media (min-width: 1100px) {
.intro.home-intro.landing-intro {
  margin-top: -330px;
}
}

@media (min-width: 1100px) {
.intro.mac-intro {
  margin-top: -200px;
}
}

.intro.home-intro.bg-bubbles:before {
  top: 125px;
}

.intro.mac-intro.bg-bubbles:before {
  top: 70px;
}

/* Must be 1 pixel less than grid breakpoint */
@media (max-width: 1099px) {
.intro.home-intro.bg-bubbles:before {
  display: none;
}
}

/* Must be 1 pixel less than grid breakpoint */
@media (max-width: 1099px) {
.intro.mac-intro.bg-bubbles:before {
  display: none;
}
}

.intro-feature-img {
  margin-bottom: 100px;
}

.intro.landing-intro .intro-feature-img {
  margin-bottom: 70px;
}

.intro h2,
.section-title h2,
.intro p,
.section-title p {
  margin-left: auto;
  margin-right: auto;
}

.intro .title-image,
.section-title .title-image {
  margin-bottom: 20px;
}

/* Card Slides
================================================== */

.card-slides {
  position: relative;
  display: block;
  max-width: 1040px;
  height: 420px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.card-slides img {
  width: 360px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.1);
}

.card-holder-1,
.card-holder-2,
.card-holder-3 {
  width: 360px;
  height: 325px;
  background-color: #fff;
  position: absolute;
  border-radius: 10px;
}

.card-holder-1 {
  top: 0;
  left: 0;
}

.card-holder-2 {
  position: absolute;
  z-index: 1;
  top: -50px;
  left: 0px;
  right: 0px;
  margin: auto;
}

.card-holder-2 img {
  box-shadow: 0 3px 20px rgba(0,0,0,.1);
}

.card-holder-3 {
  top: 0;
  right: 0;
}

/* Features Teaser
================================================== */

.features-teaser h3 i {
  font-size: 160%;
  display: block;
  color: #1BBDF6;
  margin-bottom: 20px;
}

.features-teaser .teaser {
  margin-bottom: 130px;
}

/* Must be 1 pixel less than grid breakpoint */
@media (max-width: 1099px) {
.features-teaser h3 {
  margin-top: 2rem;
}

.features-teaser h3 i {
  display: none;
}

.features-teaser .teaser {
  text-align: center;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}
}

/* Features Nav Panel (Cards)
================================================== */

.features-nav-cards {
  margin-bottom: 130px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.features-nav-cards h3 {
  margin-bottom: 50px;
}

.features-nav-cards nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}

@media (max-width: 1070px) {
.features-nav-cards nav {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
}
}

.features-nav-cards nav a {
  padding: 42px 30px 53px 226px;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.features-nav-cards nav a img {
  position: absolute;
  opacity: 0.5;
  -webkit-transition: opacity .1s ease-in-out;
	-moz-transition: opacity .1s ease-in-out;
	-o-transition: opacity .1s ease-in-out;
}

.features-nav-cards nav a:hover img {
  opacity: 0.80;
}

@media (max-width: 540px) {
.features-nav-cards nav a {
  text-align: center;
  padding: 42px 30px 226px;
}

.features-nav-cards nav a img {
  top: 50% !important;
  transform: translate(-50%, -10%);
  left: 50% !important;
  opacity: 0.15;
}

.features-nav-cards nav a:hover img {
  opacity: 0.15;
}
}

.features-nav-cards nav a i {
  position: absolute;
  right: 30px;
  bottom: 20px;
  font-size: 24px;
  opacity: 0.5;
}

.features-nav-cards nav a h5 {
  font-size: 3.0rem;
  margin-bottom: 5px;
}

.features-nav-cards nav a:hover h5 {
  color: #1BBDF6;
}

.features-nav-cards nav a p {
  margin-bottom: 0px;
  font-size: 16px;
  color: #8e8e8e;
}

/* Features Nav Panel
================================================== */

.features-nav {
  margin-bottom: 130px;
}

.features-nav-panel {
  padding: 30px 30px 20px;
  display: block;
}

.features-nav-panel h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.features-nav-panel h4 {
  margin-bottom: 50px;
  font-weight: normal;
  color: #8E8E8E;
}

.features-nav-panel ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.features-nav-panel ul li {
  display: inline-block;
  flex: 0 0 32.33%;
  margin-bottom: 10px;
  padding: 0 0.5%;
}

@media only screen and (max-width: 1175px) {
.features-nav-panel ul li {
  flex: 0 0 49%;
}
}

@media only screen and (max-width: 825px) {
.features-nav-panel ul li {
  flex: 0 0 100%;
}
}

.features-nav-panel ul li a {
  display: block;
  padding: 20px;
  border-radius: 8px;
  -webkit-transition: background-color .1s ease-in-out;
	-moz-transition: background-color .1s ease-in-out;
	-o-transition: background-color .1s ease-in-out;
}

.features-nav-panel ul li img {
  height: 170px;
  margin-bottom: 5px;
}

.features-nav-panel ul li h5 {
  margin-bottom: 2px;
  color: #222222;
}

.features-nav-panel ul li p {
  font-size: 85%;
  margin-bottom: 5px;
  color: #8E8E8E;
}

.features-nav-panel ul li a:hover {
  background-color: rgba(27,189,246,0.06);
  color: #1ab6ed;
}

.features-nav-panel a.features-nav-panel-cta {
  background-color: rgba(27,189,246,0.06);
  font-weight: 600;
  font-size: 1.6rem;
  width: 100%;
  text-align: left;
  margin-top: 15px;
  padding: 16px 20px 17px 20px !important;
  position: relative;
  display: block;
  border-radius: 7px;
  -webkit-transition: background-color .1s ease-in-out;
	-moz-transition: background-color .1s ease-in-out;
	-o-transition: background-color .1s ease-in-out;
}

.features-nav-panel a.features-nav-panel-cta:hover {
  background-color: rgba(27,189,246,0.10);
}

@media only screen and (max-width: 825px) {
.features-nav-panel a.features-nav-panel-cta {
  text-align: center;
}
}

.features-nav-panel a.features-nav-panel-cta i {
  position: absolute;
  right: 20px;
  top: 23px;
  opacity: 0.4;
}

@media only screen and (max-width: 825px) {
.features-nav-panel a.features-nav-panel-cta i {
  display: none;
}
}

.features-nav-panel a.features-nav-panel-cta .cta-doodle-arrow {
  position: absolute;
  top: -11px;
  right: 20px;
}

@media only screen and (max-width: 825px) {
.features-nav-panel a.features-nav-panel-cta .cta-doodle-arrow {
  display: none;
}
}

.features-nav-panel-partner {
  text-align: center;
  font-size: 85%;
  margin-top: 35px;
}

/* Testimonial (Single)
================================================== */

.testimonial-single {
  background: url(../images/bg-testimonial-bubbles.webp) center top no-repeat;
  min-height: 185px;
  padding-top: 40px;
  padding-bottom: 90px;
}

.testimonial-single.no-bg {
  background: none;
}

@media only screen and (max-width: 767px) {
.testimonial-single {
  text-align: center;
}
}

@media only screen and (max-width: 479px) {
.testimonial-single {
  padding-bottom: 50px;
}
}

.testimonial-single.bottom {
  padding-bottom: 80px;
}

.testimonial-single.standalone {
  margin-top: 85px;
  padding-bottom: 80px;
}

@media only screen and (max-width: 767px) {
.testimonial-single.standalone {
  margin-top: 45px;
  padding-bottom: 70px;
}
}

.testimonial-single blockquote {
  max-width: 450px;
  padding-left: 150px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
.testimonial-single blockquote {
  max-width: 100%;
  padding-left: 0px;
}
}

.testimonial-single blockquote p {
  font-size: 22px;
  line-height: 34px;
}

@media only screen and (max-width: 479px) {
.testimonial-single blockquote p {
  font-size: 18px;
  line-height: 30px;
}
}

.testimonial-single .testimonial-avatar {
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-border-radius: 1000px;
  -moz-border-radius: 1000px;
  -o-border-radius: 1000px;
  -ms-border-radius: 1000px;
  border-radius: 1000px;
}

@media only screen and (max-width: 767px) {
.testimonial-single .testimonial-avatar {
  position: inherit;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}
}

/* Testimonials List
================================================== */

.testimonials-list {
  max-width: 600px;
  /* background: url(../images/bg-bubbles-testimonials.webp) left -15px repeat-y; */
  padding-top: 90px;
  padding-bottom: 40px;
  /* padding-left: 25px; */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  list-style: none;
}

@media only screen and (max-width: 767px) {
.testimonials-list {
  text-align: center;
  /* background: url(../images/bg-bubbles-testimonials.webp) center -15px repeat-y; */
  padding-left: 20px;
  padding-right: 20px;
}
}

@media only screen and (max-width: 479px) {
.testimonials-list {
    padding-top: 50px;
}
}

.testimonials-list.with-arrow {
  position: relative;
}

.testimonials-list.with-arrow::before {
  background-image: url(../images/arrow-doodle-2@2x.webp);
  background-size: 196px 265px;
  width: 196px;
  height: 265px;
  position: absolute;
  top: -240px;
  left: 50%;
  transform: translate(-50%, 0);
  content: "";
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

@media only screen and (max-width: 1099px) {
.testimonials-list.with-arrow::before {
  top: -220px;
}
}

.testimonials-list li {
  min-height: 125px;
  margin-bottom: 100px;
}

@media only screen and (max-width: 767px) {
.testimonials-list li {
  margin-bottom: 70px;
}
}

.testimonials blockquote {
  position: relative;
  padding-left: 150px;
}

@media only screen and (max-width: 767px) {
.testimonials blockquote {
  padding-left: 0px;
}
}

.testimonials .testimonial-avatar {
    background-color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    border-radius: 1000px;
}

@media only screen and (max-width: 767px) {
.testimonials .testimonial-avatar {
    position: inherit;
    margin: auto;
    margin-bottom: 10px;
    width: 115px;
    height: 115px;
}
}

/* Testimonial Request
================================================== */

.testimonials-request {
  margin-top: -150px;
}

/* Book Download
================================================== */

.book-download {
  margin-top: -150px;
}

/* Features Teaser
================================================== */
.features-teaser.with-arrow {
  padding-top: 50px;
}
.features-teaser .container.with-arrow {
  position: relative;
}

@media (min-width: 1100px) {
.features-teaser .container.with-arrow::before {
  background-image: url(../images/arrow-doodle-1@2x.webp);
  background-size: 403px 230px;
  width: 403px;
  height: 230px;
  position: absolute;
  top: -290px;
  left: 160px;
  content: "";
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}
}

/* Feature Details
================================================== */

.feature-details-list {
  margin-bottom: 4.5rem;
}

@media only screen and (max-width: 767px) {
.feature-details-list {
    text-align: center;
}
}

.feature-details-list.with-arrow {
  position: relative;
}

@media (min-width: 1100px) {
.feature-details-list.with-arrow::before {
  background-image: url(../images/arrow-doodle-1@2x.webp);
  background-size: 403px 230px;
  width: 403px;
  height: 230px;
  position: absolute;
  top: -240px;
  left: 160px;
  content: "";
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}
}

.feature-details-list li {
    width: 44%;
    display: inline-block;
    text-align: left;
    margin-right: 10%;
    margin-bottom: 2.4rem;
    vertical-align: top;
}

@media only screen and (max-width: 767px) {
.feature-details-list li {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 6.4rem;
    text-align: center;
    display: block;
}
}

.feature-details-list li:nth-child(even) {
    margin-right: 0px;
}

.feature-details-list .badge {
  margin-left: 5px;
}

.feature-details-list h4 .fas {
  font-size: 160%;
  display: block;
  color: #1BBDF6;
  margin-bottom: 20px;
}

/* Feature Summary List
================================================== */

.features-summary-list {
    margin-bottom: 20px;
}

.features-summary-list.with-arrow {
  position: relative;
  padding-top: 30px;
}

.features-summary-list.with-arrow::before {
  background-image: url(../images/arrow-doodle-2@2x.webp);
  background-size: 196px 265px;
  width: 196px;
  height: 265px;
  position: absolute;
  top: -215px;
  left: 50%;
  transform: translate(-50%, 0);
  content: "";
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

@media only screen and (max-width: 1099px) {
.features-summary-list.with-arrow::before {
  top: -220px;
}
}

@media only screen and (max-width: 767px) {
  .features-summary-list.with-arrow::before {
    display: none;
  }
}

.features-summary-list h3,
.features-summary-list h2 {
    margin-bottom: 70px;
    padding-bottom: 15px;
    border-bottom: 1px solid #E4E4E4;
}

.features-summary-list h3 a,
.features-summary-list h2 a {
    font-size: 14px;
    margin-left: 5px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.features-summary-list h4 {
  font-size: 2.0rem;
}

.features-summary-list p {
  font-size: 1.8rem;
}

.features-summary-list h4 .fas {
  font-size: 140%;
  min-width: 35px;
  text-align: right;
  display: block;
  color: #1BBDF6;
  margin-bottom: 20px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
}

.features-summary-list ul {
    margin-bottom: 100px;
    padding-bottom: 30px;
    text-align: left;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 30px;
    list-style: none;
    border-bottom: 1px dashed #E4E4E4;
}

@media only screen and (max-width: 479px) {
.features-summary-list ul {
    margin-bottom: 10px;
}
}

.features-summary-list li {
    text-align: left;
    padding-left: 48px;
    vertical-align: top;
    position: relative;
}

@media only screen and (max-width: 960px) {
.features-summary-list ul {
    grid-template-columns: auto auto;
}
}

@media only screen and (max-width: 767px) {
.features-summary-list ul {
    grid-template-columns: auto;
}
}

.features-summary-list li:nth-child(3n+3) {
    margin-right: 0px;
}

.features-summary-list .testimonial-single {
  padding-bottom: 60px;
}

/* FAQs (Pricing)
================================================== */

.faqs-list {
  margin-bottom: 4.5rem;
}

@media only screen and (max-width: 767px) {
.faqs-list {
    text-align: center;
}
}

.faqs-list li {
    width: 44%;
    display: inline-block;
    text-align: left;
    margin-right: 10%;
    margin-bottom: 2.4rem;
    vertical-align: top;
}

@media only screen and (max-width: 767px) {
.faqs-list li {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 6.4rem;
    text-align: center;
    display: block;
}
}

.faqs-list li:nth-child(even) {
    margin-right: 0px;
}

/* How It Works
================================================== */

.how-it-works.with-arrow .container {
  position: relative;
}

@media (min-width: 1100px) {
.how-it-works.with-arrow .container::before {
  background-image: url(../images/arrow-doodle-1-alt@2x.webp);
  background-size: 403px 230px;
  width: 403px;
  height: 230px;
  position: absolute;
  top: -240px;
  left: 460px;
  content: "";
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}
}

.how-it-works .rule {
  margin-bottom: 130px;
}

@media (max-width: 1099px) {
.rules-teaser .row.rule {
  text-align: center;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

.rules-teaser .sub-title {
  margin-top: 2rem;
}

.rules-teaser .align-left,
.rules-teaser .align-right {
  text-align: center;
}
}

/* About Us
================================================== */

.about-us {
  padding-top: 70px;
}

.about-us.with-arrow {
  position: relative;
}

.about-us.with-arrow::before {
  background-image: url(../images/arrow-doodle-2@2x.webp);
  background-size: 196px 265px;
  width: 196px;
  height: 265px;
  position: absolute;
  top: -240px;
  left: 50%;
  transform: translate(-50%, 0);
  content: "";
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

@media only screen and (max-width: 1099px) {
.about-us.with-arrow::before {
  top: -220px;
}
}

.about-intro {
  color: #8E8E8E;
}

.about-intro,
.about-summary {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.about-intro p {
  font-size: 2.4rem;
  margin-bottom: 45px;
}

@media only screen and (max-width: 479px) {
.about-intro p {
  font-size: 2rem;
  margin-bottom: 25px;
}
}

.about-us .block-list {
  margin-top: 70px;
  margin-bottom: 70px;
}

.our-team {
  margin-top: 100px;
  margin-bottom: 100px;
  text-align: center;
}

.team-member {
  margin-top: 20px;
}

.team-member h4 {
  margin-bottom: 0.5rem;
}

.team-member p {
}

.team-member img {
  margin-bottom: 10px;
  margin-top: 20px;
  height: 201px;
}

.our-values {
  margin-bottom: 100px;
  text-align: center;
}

.our-values .value {
  margin-top: 20px;
}

.our-values .value h4 {
  margin-bottom: 0.5rem;
}

.our-values .value .fas {
  color: #1BBDF6;
  font-size: 300%;
  margin-bottom: 15px;
}

/* Affiliates
================================================== */

.affiliate-steps.with-arrow .container {
  position: relative;
}

@media (min-width: 1100px) {
.affiliate-steps.with-arrow .container::before {
  background-image: url(../images/arrow-doodle-1-alt@2x.webp);
  background-size: 403px 230px;
  width: 403px;
  height: 230px;
  position: absolute;
  top: -240px;
  left: 300px;
  content: "";
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}
}

.affiliate-steps .step {
  margin-bottom: 130px;
}

@media (max-width: 1099px) {
.affiliate-steps .row.step {
  text-align: center;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

.affiliate-steps .sub-title {
  margin-top: 2rem;
}

.affiliate-steps .align-left,
.affiliate-steps .align-right {
  text-align: center;
}
}

.affiliate-tools {
  text-align: center;
  margin-bottom: 130px;
}

.affiliate-tool-cards {
  margin-top: 50px;
}

.affiliate-tool {
  min-width: 375px;
  max-width: 500px;
  display: inline-block;
  margin-right: 30px;
  padding-bottom: 30px;
}

@media (max-width: 1099px) {
.affiliate-tool {
  min-width: 200px;
  max-width: 400px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
}

.affiliate-tool:last-child {
  margin-right: 0px;
}

@media (max-width: 1099px) {
.affiliate-tool:last-child {
  margin-right: auto;
}
}

.affiliate-tool img {
  margin-top: 20px;
  margin-bottom: 10px;
  height: 134px;
}

.affiliate-tool h3 {
  margin-bottom: .5rem;
}

.affiliate-promo {
  margin-top: -170px;
  margin-bottom: 130px;
}

/* Media Kit
================================================== */

.hero.media-kit-hero {
  margin-bottom: 0px;
  padding-bottom: 300px;
}

.logos {
  text-align: center;
  margin-top: -150px;
  margin-bottom: 130px;
}

.logos.bg-bubbles:before {
  top: 40px;
}

/* Must be 1 pixel less than grid breakpoint */
@media (max-width: 1099px) {
.logos.bg-bubbles:before {
  display: none;
}
}

.logos-wrapper {
  text-align: center;
  width: 100%;
  height: 250px;
  background-color: #fff;
  margin-bottom: 50px;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0,0,0,.1);
}

.logos-wrapper img {
  padding: 20px 0px;
}

.logos-wrapper .logo-download {
  position: absolute;
  bottom: 20px;
  right: 25px;
}

@media (max-width: 520px) {
.logos-wrapper .logo-download {
  display: none;
}
}

.logo-one {
  width: 50%;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px 0px 0px 10px;
}

.logo-two {
  background-color: #1BBDF6;
  width: 50%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0px 10px 10px 0px;
}

@media (max-width: 840px) {
.logo-one, .logo-two {
  width: 100%;
  height: 200px;
  position: relative;
}

.logo-one {
  border-radius: 10px 10px 0px 0px;
}

.logo-two {
  border-radius: 0px 0px 10px 10px;
}
}

.logo-two .logo-download {
  color: #fff;
}

.screenshots {
  margin-bottom: 130px;
}

.screenshots img {
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0,0,0,.1);
}

.screenshot {
  margin-bottom: 50px;
}

.screenshot p {
  position: relative;
}

.screenshot p a {
  position: absolute;
  top: 0px;
  right: 0px;
}

.media-kit-colors {
  margin-bottom: 130px;
}

.media-kit-colors .swatch {
  color: #fff;
  background-color: #1BBDF6;
  height: 100px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media-kit-colors .swatch.green {
  background-color: #34D789;
}

.media-kit-colors .swatch.orange {
  background-color: #FFB40B;
}

.media-kit-colors .swatch.aqua {
  background-color: #16EDDE;
}

.media-kit-colors .swatch.red {
  background-color: #FF5722;
}

.media-kit-colors .secondary-swatches .swatch {
  height: 60px;
}

.media-kit-banners {
  margin-bottom: 130px;
}

.media-kit-banners img {
  border: 1px solid rgba(27, 189, 246, 0.30);
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0,0,0,.1);
}

/* Must be 1 pixel less than grid breakpoint */
@media (max-width: 1099px) {
.media-kit-banners img {
  max-width: 300px;
}
}

.media-kit-banner {
  margin-bottom: 50px;
}

.media-kit-landing-pages {
  margin-bottom: 130px;
}

.media-kit-landing-pages img {
  border: 1px solid rgba(27, 189, 246, 0.30);
  border-radius: 10px;
  box-shadow: 0 3px 15px rgba(0,0,0,.1);
}

.media-kit-landing-page {
  margin-bottom: 50px;
}

.media-kit-landing-page p {
  position: relative;
}

.media-kit-landing-page p a {
  position: absolute;
  top: 0px;
  right: 0px;
}

.media-kit-landing-page p i {
  opacity: 0.5;
}

/* Pricing
================================================== */

.pricing-plans {
  margin-bottom: 130px;
  margin-top: -263px;
}

.pricing-plans.bg-bubbles:before {
  top: 140px;
}

/* Must be 1 pixel less than grid breakpoint */
@media (max-width: 1099px) {
.pricing-plans.bg-bubbles:before {
  display: none;
}
}

.pricing-plans .button-group {
  display: block;
}

.pricing-plans .button-group .button-partner {
  margin-top: 10px;
}

.pricing-plans .button-group .button-partner em {
  font-size: 36px;
  font-style: normal;
  color: #1bbdf6;
  vertical-align: middle;
  line-height: 0.5;
}

a.pricing-matrix {
    color: #222222;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    background-color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 40px;
    display: block;
    -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, .10);
    -moz-box-shadow: 0px 3px 10px rgba(0, 0, 0, .10);
    box-shadow: 0px 3px 10px rgba(0, 0, 0, .10);
}

@media only screen and (max-width: 767px) {
a.pricing-matrix {
    margin-bottom: 50px;
}
}

.pricing-plan {
  display: block;
  background-color: #fff;
  position: relative;
  padding: 20px 20px 22px;
}

.pricing-plan:nth-child(odd) {
  background-color: rgba(27,189,246,0.05);
}

.pricing-plan h3 {
  font-size: 28px;
  color: #34d789;
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: baseline;
}

.pricing-plan .plan-users {
  font-size: 16px;
  font-weight: 400;
  background-color: #fff;
  color: #a6a6a6;
  padding: 7px 20px 8px;
  position: relative;
  border: 1px solid rgba(27,189,246,0.20);
  border-radius: 1000px;
  vertical-align: middle;
}

.pricing-plan .plan-users strong {
  color: #222222;
}

.pricing-plan .plan-users em {
  font-size: 35px;
    font-style: normal;
    color: #1bbdf6;
    position: absolute;
    top: -1px;
    right: 3px;
}

.pricing-plan .plan-price h4 {
  font-size: 20px;
  text-align: right;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.pricing-plan .plan-price h4 span {
  color: #a6a6a6;
  font-weight: 400;
}

.pricing-plan .plan-price h4 span.plan-savings {
  color: #ffb40b;
  font-weight: 400;
  margin-right: 10px;
}

@media only screen and (max-width: 767px) {
.pricing-plan {
  text-align: center;
}

.pricing-plan h3 {
    display: block;
    margin-bottom: 28px;
}

.pricing-plan h3 .plan-users {
  display: block;
  margin-top: 15px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.pricing-plan .plan-price h4 {
  position: inherit;
  display: block;
  text-align: center;
  margin-bottom: 0px;
}
}

.paypal-plan {
  border: 1px solid #d8d8d8;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 40px 5px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.paypal-plan h4 {
  margin-bottom: 0px;
}

.paypal-plan h5 {
  margin-bottom: 10px;
  color: #8e8e8e;
}

.payment-toggle {
    text-align: center;
    margin-bottom: 30px;
}

.payment-toggle button {
    color: #00BDFF;
    font-size: 14px;
    font-weight: 600;
    min-width: 110px;
    padding: 8px 20px 9px;
    background-color: #fff;
    position: relative;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.payment-toggle button {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.payment-toggle button:focus,
.payment-toggle button:active {
    outline: none;
}

.payment-toggle button.active {
    color: #fff;
    background-color: #00BDFF;
}

.payment-toggle button:first-child {
    margin-right: -3px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
}

.payment-toggle button:last-child {
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
}

.payment-toggle button .pricing-burst {
  color: #fff;
    text-align: center;
    position: absolute;
    background-color: #ffb40b;
    width: 70px;
    height: 70px;
    display: block;
    top: -33px;
    right: -50px;
    border-radius: 1000px;
}

.payment-toggle button .pricing-burst span {
  margin-top: 13px;
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.payment-toggle button .pricing-burst strong {
    display: block;
    font-weight: 600;
    font-size: 23px;
    margin-top: -8px;
    letter-spacing: -1px;
}

/* CTA Prompt
================================================== */

.cta-prompt {
  text-align: center;
  /* background: url(../images/bg-bubbles-repeat.webp) center 40px repeat-x; */
  min-height: 185px;
  margin-bottom: 130px;
}

.cta-prompt.with-image {
  /* background: url(../images/bg-bubbles-repeat.webp) center 240px repeat-x; */
}

.cta-prompt.with-image img {
  margin-bottom: 5px;
}

.cta-prompt h2,
.cta-prompt p {
  margin-left: auto;
  margin-right: auto;
}

.cta-prompt.with-arrow {
  position: relative;
}

@media (min-width: 1100px) {
.cta-prompt.with-arrow {
  margin-top: 375px;
}

.cta-prompt.with-arrow::before {
  background-image: url(../images/arrow-doodle-2@2x.webp);
  background-size: 196px 265px;
  width: 196px;
  height: 265px;
  position: absolute;
  top: -320px;
  left: 50%;
  transform: translate(-50%, 0);
  content: "";
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}
}

/* Blog
================================================== */

.article-list-wrapper {
    text-align: center;
    margin-top: -120px;
}

.list-post {
    width: 31%;
    margin-right: 2%;
    display: inline-block;
    margin-bottom: 20px;
    vertical-align: top;
}

.list-post:nth-child(3n+3) {
    margin-right: 0px;
}

@media only screen and (max-width: 960px) {
.list-post {
 width: 48%;
}

.list-post:nth-child(3n+3) {
    margin-right: 2%;
}

.list-post:nth-child(odd) {
    margin-right: 2%;
}

.list-post:nth-child(even) {
    margin-right: 0px;
}
}

@media only screen and (max-width: 675px) {
.list-post {
  width: 100%;
}

.list-post:nth-child(3n+3) {
    margin-right: 0px;
}

.list-post:nth-child(odd) {
    margin-right: 0px;
}
}

.blog-post-card {
    color: #222222;
    background-color: #fff;
    padding: 8%;
    display: block;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.blog-post-card:visited {
    color: #222222;
}

.blog-post-card:hover {
    color: #222222;
    -webkit-box-shadow: 0px 2px 15px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0px 2px 15px rgba(0, 0, 0, .05);
    box-shadow: 0px 3px 20px rgba(0, 0, 0, .05);
}

.blog-post-card:active {
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .15);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, .15);
}

.blog-post-card img {
    margin-bottom: 15px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.blog-post-card h2 {
    font-size: 2.0rem;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: 0px;
}

.blog-post-card p {
    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8e8e8e;
    margin-bottom: 15px;
}

.related-entries {
  margin-bottom: 130px;
  text-align: center;
}

.blog-author {
  margin-top: 25px;
}

.blog-post-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.blog-post-header h1 {
  font-size: 3.2rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  text-align: center;
}

.blog-post-meta {
  font-size: 1.3rem;
  color: #8e8e8e;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-bottom: 3rem;
}

.blog-post-meta .blog-author {
  margin-top: 0;
  margin-right: 0.5rem;
}

.blog-post-meta .blog-author::after {
  content: "•";
  margin-left: 0.75rem;
  color: #ccc;
}

.blog-post-meta .blog-date {
  display: inline;
}

.blog-post-meta .fa-calendar {
  display: none;
}

.blog-post {
  margin-top: -190px;
}

.full-post {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.full-post img {
  max-width: 100%;
  display: block;
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
}

.full-post .blog-feature-img {
  margin-top: 0px;
  margin-bottom: 4rem;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, .15);
  -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, .15);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, .15);
}

.full-post blockquote {
  margin-bottom: 20px;
  display: block;
}

.full-post .image-caption {
  font-style: italic;
  font-size: 14px;
  line-height: 25px;
  color: #8E8E8E;
  margin-bottom: 2.5rem;
  margin-top: -3rem;
}

.full-post ol, .full-post ul {
  padding-left: 20px;
  text-indent: -20px;
  margin-top: 0;
}

.full-post li {
  margin-bottom: 2.5rem;
}

.full-post .note {
  text-align: center;
  padding: 25px 30px 27px;
  margin-bottom: 23px;
  border-radius: 8px;
  background-color: rgba(27,189,246,0.06);
}

/* Blog Pagination */

.blog-pagination ul {
    margin-top: 80px;
    margin-bottom: 120px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media only screen and (max-width: 768px) {
.blog-pagination ul {
    padding-left: 20px;
    padding-right: 20px;
}
}

.blog-pagination li {
    display: inline-block;
    margin-bottom: 17px;
}

.blog-pagination li a {
    padding: 10px 23px 11px;
    margin-right: 3px;
    background-color: rgba(27,189,246,0.07);
    -webkit-transition: background-color .15s ease-in-out;
  	-moz-transition: background-color .15s ease-in-out;
  	-o-transition: background-color .15s ease-in-out;
}

@media only screen and (max-width: 959px) {
.blog-pagination li a {
    padding: 9px 17px 11px;
}
}

@media only screen and (max-width: 767px) {
.blog-pagination li a {
    padding: 9px 13px 11px;
}
}

@media only screen and (max-width: 567px) {
.blog-pagination li a {
    padding: 9px 10px 11px;
}
}

.blog-pagination li a.active {
    background-color: rgba(27,189,246,0.12);
}

.blog-pagination li a:hover {
    background-color: rgba(27,189,246,0.12);
    color: #00BDFF;
}

.blog-pagination li:first-child a {
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
}

.blog-pagination li:last-child a {
    -webkit-border-radius: 0px 5px 5px 0px;
    -moz-border-radius: 0px 5px 5px 0px;
    border-radius: 0px 5px 5px 0px;
}

.blog-pagination li a.page-previous {
  margin-right: -2px;
}

.blog-pagination li a.page-next {
  margin-left: -5px;
}

.blog-related {
    margin-bottom: 30px;
}

.blog-related li {
    font-size: 14px;
    line-height: 24px;
    display: inline-block;
    width: 32%;
    vertical-align: top;
    margin-right: 1%;
}

@media only screen and (max-width: 479px) {
.blog-related li {
    width: 80%;
    display: block;
}
}

.blog-related li:last-child {
    margin-right: 0%;
}

.blog-related a {
    display: block;
}

section.blog .articles .blog-related img {
    margin-top: 0px;
    margin-bottom: 10px;
    height: inherit;
}

.category-subnav {
    text-align: center;
    font-size: 20px;
    padding-bottom: 40px;
    margin-top: 80px;
    margin-bottom: 25px;
}

@media only screen and (max-width: 479px) {
.category-subnav {
    display: none;
}
}

.category-subnav li {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
.category-subnav li {
    display: block;
    margin-right: 0px;
}
}

.category-subnav li:last-child {
    margin-right: 0px;
}

.category-subnav li a {
    display: inline-block;
    padding: 7px 24px 9px;
    background-color: #fff;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    -o-border-radius: 500px;
    -ms-border-radius: 500px;
    border-radius: 500px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.07);
    -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.07);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.07);
    -webkit-transition: color .15s ease-in-out;
	-moz-transition: color .15s ease-in-out;
	-o-transition: color .15s ease-in-out;
}

@media only screen and (max-width: 767px) {
.category-subnav li a {
    display: block;
}
}

.category-subnav li.active a {
    color: #fff;
    background-color: #1BBDF6;
}

.hero-subnav .category-subnav {
  margin-top: 50px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.blog-cta {
  padding: 30px;
  margin-top: 50px;
  margin-bottom: 50px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 3px 15px 0 rgba(0,0,0,0.10);
  -moz-box-shadow: 0 3px 15px 0 rgba(0,0,0,0.10);
  box-shadow: 0 3px 15px 0 rgba(0,0,0,0.10);
}

@media only screen and (max-width: 959px) {
.blog-cta {
  text-align: center;
}
}

.blog-cta img {
  max-width: 200px !important;
  float: left;
  margin-top: 0px !important;
  margin-right: 25px;
  margin-bottom: 0px !important;
}

@media only screen and (max-width: 959px) {
.blog-cta img {
  float: inherit;
  margin-left: auto;
  margin-right: auto;
}
}

.blog-cta-content {
  text-align: center;
  padding-top: 20px;
}

@media only screen and (max-width: 959px) {
.blog-cta-content {
  display: block;
  padding-bottom: 10px;
}
}

.blog-cta-byline {
  font-size: 14px;
  color: #8e8e8e;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 20px;
}

.blog-social {
  font-size: 3.6rem;
  list-style: none;
  text-align: center;
}

.blog-social li {
  display: inline;
  margin-right: 40px;
}

@media only screen and (max-width: 450px) {
.blog-social li {
  margin-right: 25px;
}
}

.blog-social li:last-child {
  margin-right: 0px;
}

.blog-social .fa,
.blog-social .fas,
.blog-social .far,
.blog-social .fal,
.blog-social .fab {
  opacity: 0.25;
}

.author-bio {
  background-color: rgba(27,189,246,0.05);
  padding: 30px;
  margin-bottom: 130px;
  position: relative;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

.author-bio img {
  margin: 0;
  position: absolute;
  top: -13px;
  right: -14px;
}

.author-bio p {
  font-size: 1.6rem;
  margin-bottom: 0;
}

/* The Harpoon Method
================================================== */

.rules-nav {
  margin-top: 40px;
}

.rules-nav ul li {
  display: inline-block;
  margin-right: 15px;
  margin-bottom: 15px;
  font-size: 16px;
}

@media only screen and (max-width: 800px) {
.rules-nav ul li {
  display: block;
  margin-right: 0px;
}
}

.rules-nav ul li:last-child {
  margin-right: 0px;
}

.rules-nav ul li a {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  padding: 14px 35px 15px;
  display: inline-block;
  background-color: #fff;
  border-radius: 1000px;
  -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.10);
  -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,0.10);
  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.10);
  -webkit-transition: background-color .15s ease-in-out;
	-moz-transition: background-color .15s ease-in-out;
	-o-transition: background-color .15s ease-in-out;
}

@media only screen and (max-width: 800px) {
.rules-nav ul li a {
  display: block;
}
}

.rules-nav ul li a:active,
.rules-nav ul li a.active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.rules-nav ul li.rule1 a {
  color: #1BBDF6;
}

.rules-nav ul li.rule1.active a,
.rules-nav ul li.rule1 a:hover {
  color: #fff;
  background-color: #1BBDF6;
}

.rules-nav ul li.rule2 a {
  color: #34D789;
}

.rules-nav ul li.rule2.active a,
.rules-nav ul li.rule2 a:hover {
  color: #fff;
  background-color: #34D789;
}

.rules-nav ul li.rule3 a {
  color: #16EDDE;
}

.rules-nav ul li.rule3.active a,
.rules-nav ul li.rule3 a:hover {
  color: #fff;
  background-color: #16EDDE;
}

.rules-nav ul li.rule4 a {
  color: #FFB40B;
}

.rules-nav ul li.rule4.active a,
.rules-nav ul li.rule4 a:hover {
  color: #fff;
  background-color: #FFB40B;
}

.rules-nav ul li.active a {
  color: #fff;
}

.method-rule-content.with-arrow {
  position: relative;
}

.method-rule-content.with-arrow::before {
  background-image: url(../images/arrow-doodle-2@2x.webp);
  background-size: 196px 265px;
  width: 196px;
  height: 265px;
  position: absolute;
  top: -240px;
  left: 50%;
  transform: translate(-50%, 0);
  content: "";
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

@media only screen and (max-width: 1099px) {
.method-rule-content.with-arrow::before {
  top: -220px;
}
}

.method-rule-content.rule-two.with-arrow::before {
  background-image: url(../images/arrow-doodle-2-green@2x.webp);
}

.method-rule-content.rule-three.with-arrow::before {
  background-image: url(../images/arrow-doodle-2-teal@2x.webp);
}

.method-rule-content.rule-four.with-arrow::before {
  background-image: url(../images/arrow-doodle-2-orange@2x.webp);
}

.method-rule-content {
  padding-top: 70px;
  padding-bottom: 100px;
}

.rule-title {
  text-align: center;
}

.rule-title .subhead-graphic {
  margin-bottom: 25px;
}

.rule-one .sub-title {
  color: #1BBDF6;
}

.rule-two .sub-title {
  color: #34D789;
}

.rule-three .sub-title {
  color: #16EDDE;
}

.rule-four .sub-title {
  color: #FFB40B;
}

.rule-intro {
  text-align: center;
  color: #8E8E8E;
  max-width: 790px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.rule-intro p {
  font-size: 2.4rem;
  margin-bottom: 45px;
}

@media only screen and (max-width: 479px) {
.rule-intro p {
  font-size: 2rem;
  text-align: left;
  margin-bottom: 25px;
}
}

.rule-body {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.rule-body .summary {
  background-color: rgba(27,189,246,0.06);
  border-radius: 8px;
  padding: 30px 40px;
  margin-bottom: 30px;
}

@media only screen and (max-width: 479px) {
.rule-body .summary {
  padding: 30px 20px;
}
}

.rule-two .rule-body .summary {
  background-color: rgba(52, 215, 137, 0.06);
}

.rule-three .rule-body .summary {
  background-color: rgba(22, 238, 223, 0.07);
}

.rule-four .rule-body .summary {
  background-color: rgba(255, 183, 11, 0.06);
}

.rule-body .summary h2 {
  font-size: 48px;
  font-weight: 400;
  line-height: 50px;
  font-family: "Caveat", "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #1BBDF6;
  letter-spacing: -2px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 30px;
}

@media only screen and (max-width: 479px) {
.rule-body .summary h2 {
  font-size: 40px;
  line-height: 42px;
  margin-bottom: 20px;
}
}

.rule-two .rule-body .summary h2 {
  color: #34D789;
}

.rule-three .rule-body .summary h2 {
  color: #16EDDE;
}

.rule-four .rule-body .summary h2 {
  color: #FFB40B;
}

.rule-body .summary ul {
  color: #8E8E8E;
  margin-bottom: 10px;
}

@media only screen and (max-width: 479px) {
.rule-body .summary ul {
  margin-bottom: 0px;
}
}

.rule-body .summary ul li:last-child {
  margin-bottom: 0px;
}

.rule-body .caption {
  display: block;
  font-style: italic;
  font-size: 15px;
  line-height: 25px;
  color: #8E8E8E;
  margin-bottom: 20px;
}

.rule-body .disclaimer {
  font-style: italic;
  font-size: 15px;
  line-height: 25px;
  color: #8E8E8E;
}

@media only screen and (max-width: 479px) {
.rule-body .disclaimer {
  font-size: 13px;
  line-height: 23px;
}
}

.rule-body ul {
  list-style: disc;
}

.rule-body ol,
.rule-body ul {
  padding-left: 20px;
  margin-top: 0;
}

.rule-body ol {
  text-indent: -20px;
}

.rule-two .rule-body a {
  color: #34D789;
}

.rule-three .rule-body a {
  color: #16EDDE;
}

.rule-four .rule-body a {
  color: #FFB40B;
}

.next-rule {
  background-color: rgba(27,189,246,0.06);
  text-align: center;
  margin-top: 50px;
  padding: 30px 30px 40px;
  margin-bottom: 30px;
  border-radius: 8px;
}

.next-rule.rule2 {
  background-color: rgba(52, 215, 137, 0.06);
}

.next-rule.rule3 {
  background-color: rgba(22, 238, 223, 0.07);
}

.next-rule.rule4 {
  background-color: rgba(255, 183, 11, 0.06);
}

.next-rule a.button {
  color: #fff;
}

.next-rule.rule1 .button {
  background-color: #1BBDF6;
}

.next-rule.rule2 .button {
  background-color: #34D789;
}

.next-rule.rule3 .button {
  background-color: #16EDDE;
}

.next-rule.rule4 .button {
  background-color: #FFB40B;
}

.next-rule .rule-marker {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-bottom: 5px;
  display: block;
}

.next-rule .rule-marker.rule2 {
  color: #32CD32;
}

.next-rule .rule-marker.rule3 {
  color: #1BDBC6;
}

.next-rule .rule-marker.rule4 {
  color: #FFA405;
}

.next-rule h3 {
  margin-top: 0px;
  margin-bottom: 20px;
}

.rule-body .call-out {
  font-family: "Caveat", "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -2px;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 50px;
  padding-left: 5px;
}

@media only screen and (max-width: 479px) {
.rule-body .call-out {
  font-size: 48px;
  line-height: 50px;
  letter-spacing: -2px;
  margin-top: 20px;
  margin-bottom: 30px;
}
}

.rule-one .rule-body .call-out {
  color: #1BBDF6;
}

.rule-two .rule-body .call-out {
  color: #34D789;
}

.rule-three .rule-body .call-out {
  color: #16EDDE;
}

.rule-four .rule-body .call-out {
  color: #FFB40B;
}

.rule-body .note {
  text-align: center;
  padding: 25px 30px 27px;
  margin-bottom: 23px;
  border-radius: 8px;
}

.rule-one .note {
  background-color: rgba(27,189,246,0.06);
}

.rule-two .note {
  background-color: rgba(52, 215, 137, 0.06);
}

.rule-three .note {
  background-color: rgba(22, 238, 223, 0.07);
}

.rule-four .note {
  background-color: rgba(255, 183, 11, 0.06);
}

.rule-body .note img {
  margin-bottom: 10px;
}

.rule-body .note p {
  margin-bottom: 0px;
}

.rule-body .rule-img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
}

.rule-body .rule-img.with-shadow {
  margin-bottom: 10px;
}

/* Support
================================================== */

.support-article-wrapper {
  padding-top: 100px;
}

.support-sidebar {
  background-color: #ffffff;
  padding: 30px;
  max-width: 645px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 130px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -webkit-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.07);
  -moz-box-shadow: 0 10px 30px 0 rgba(0,0,0,0.07);
  box-shadow: 0 10px 30px 0 rgba(0,0,0,0.07);
}

@media only screen and (max-width: 1099px) {
.support-sidebar {
  margin-bottom: 50px;
}

.support-sidebar.on-post .support-categories {
    display: none;
}
}

.support-search {
  background-color: rgba(27,189,246,0.05);
  padding: 30px;
  margin: -30px -30px 25px;
  border-radius: 8px 8px 0px 0px;
  border: 1px solid rgba(27,189,246,0.08);
}

@media only screen and (max-width: 1099px) {
.support-search {

}

.support-sidebar.on-post .support-search {
  border-radius: 8px 8px 8px 8px;
  margin-bottom: -30px;

}
}

.support-search-field {
  position: relative;
}

.support-search form,
.support-search-field input {
  margin-bottom: 0px;
}

.support-search-field input {
  padding-left: 40px;
  margin-bottom: 0px;
  display: block;
  width: 100%;
}

.support-search-field i {
  position: absolute;
  top: 15px;
  left: 15px;
}

.support-search-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
}

@media only screen and (max-width: 1099px) {
.support-search-img {
  display: none;
}
}

.support-categories ul {
  list-style: none;
  margin-bottom: 0px;
}

.support-article-post,
.support-articles {
  margin-bottom: 130px;
  max-width: 645px;
  margin-left: auto;
  margin-right: auto;
}

.support-article-post img {
    max-width: 100%;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
}

.support-article-post ul {
  list-style: disc;
}

.support-article-post ol,
.support-article-post ul {
  padding-left: 20px;
  margin-top: 0;
}

.support-article-post ol {
  text-indent: -20px;
}

.support-related-articles {
  max-width: 645px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 130px;
}

/* Press Logos
================================================== */

.press-logos {
  text-align: center;
  padding: 30px 10px 20px;
  position: relative;
}

.press-logos::before {
  height: 100px;
  width: 100%;
  background-image: linear-gradient(180deg, rgba(27,189,246,0.00) 0%, rgba(27,189,246,0.04) 100%);
  content: "";
  position: absolute;
  top: -100px;
  left: 0px;
  right: 0px;
}

/* Privacy & Terms
================================================== */

.privacy,
.terms {
  padding: 100px 0px;
}

.privacy ol,
.privacy ul,
.terms ol,
.terms ul {
  padding-left: 20px;
  text-indent: -20px;
  margin-top: 0;
}

.privacy li, .terms li {
  margin-bottom: 2.5rem;
}

/* Footer
================================================== */

.main-footer {
  font-size: 1.4rem;
  background-color: rgba(27,189,246,0.05);
  padding: 70px 0px 80px;
  -webkit-box-shadow: 0px 1000px 0px 1000px rgba(27,189,246,0.05);
  -moz-box-shadow: 0px 1000px 0px 1000px rgba(27,189,246,0.05);
  box-shadow: 0px 1000px 0px 1000px rgba(27,189,246,0.05);
}

.main-footer.main-footer-simple {
  padding: 50px 0px 55px;
}

.main-footer h4 {
  font-size: 1.4rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid #E5E5E5;

}

@media only screen and (max-width: 767px) {
.main-footer h4 {
  margin-top: 20px;
}
}

footer a,
footer a:visited {
  color: #8E8E8E;
}

footer a:hover {
  color: #1BBDF6;
}

.main-footer nav {
  margin-bottom: 25px;
}

@media only screen and (max-width: 1099px) {
.main-footer nav {
  float: none;
  display: block;
}
}

.main-footer nav ul {
  margin-bottom: 10px;
  list-style: none;
}

@media only screen and (max-width: 1099px) {
.main-footer nav ul {
    margin-bottom: 25px;
}
}

.main-footer nav ul.half-list {
  width: 47%;
  display: inline-block;
  margin-right: 3%;
  float: left;
}

.main-footer nav ul.half-list:last-child {
  margin-right: 0px;
}

@media only screen and (max-width: 767px) {
.main-footer nav ul.half-list {
  width: 100%;
  display: block;
  margin-right: 0px;
  margin-bottom: 0px;
}
}

.main-footer nav ul li {
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
.main-footer nav ul li {
    float: none;
    display: block;
}
}

.main-footer nav ul li:last-child {
    margin-right: 0px;
}

.main-footer.main-footer-simple nav {
  margin-bottom: 0px;
}

.main-footer.main-footer-simple nav ul {
  text-align: center;
  margin-bottom: 0px;
}

.main-footer.main-footer-simple nav ul li {
  display: inline-block;
  margin-right: 15px;
}

.main-footer.main-footer-simple nav ul li:last-of-type {
  margin-right: 0px;
}

@media only screen and (max-width: 767px) {
.main-footer.main-footer-simple nav ul li {
    float: none;
    display: block;
}
}

.main-footer.main-footer-simple p {
  color: #8E8E8E;
  margin-bottom: 0px;
}

@media only screen and (max-width: 767px) {
.main-footer.main-footer-simple p {
    margin-top: 20px;
}
}

.main-footer nav ul li a {
  display: block;
}

@media only screen and (max-width: 767px) {
.main-footer nav ul li a {
    font-size: 16px;
    color: #1BBDF6;
    display: block;
    background-color: rgba(27,189,246,0.05);
    text-align: left;
    padding: 15px 10px 19px 25px;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    -o-border-radius: 1000px;
    -ms-border-radius: 1000px;
    border-radius: 1000px;
}
}

.main-footer .copyright {
    color: #8E8E8E;
    margin-bottom: 0;
    border-top: 1px solid #E5E5E5;
    padding-top: 15px;
    text-align: right;
    position: relative;
}

@media only screen and (max-width: 959px) {
.main-footer .copyright {
    float: none;
    display: block;
}
}

@media only screen and (max-width: 767px) {
.main-footer .copyright {
    text-align: center;
}
}

@media only screen and (max-width: 479px) {
.main-footer .copyright {
    padding-right: 0px;
}
}

.main-footer .copyright .footer-logo {
  position: absolute;
  left: 0px;
  top: 15px;
}

@media only screen and (max-width: 767px) {
.main-footer .copyright .footer-logo {
  text-align: center;
  margin-top: 15px;
  position: inherit;
  left: inherit;
  top: inherit;
  display: block;
}
}

/* Blogger Modal
================================================== */

.reveal-modal {
    text-align: center;
}

.reveal-modal img {
    margin-bottom: 15px;
}

.reveal-modal h1 em {
    font-weight: 400;
}

.reveal-modal .button {
    margin-top: 10px;
}

p.content-upgrade {
    background-color: #fff;
    font-size:18px;
    padding: 20px 20px 22px 20px;
    margin-top: 0px;
    margin-bottom: 20px;
    text-align: center;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
}

p.content-upgrade img {
    display: inline !important;
    vertical-align: middle;
    margin-top: 0px !important;
    margin-right: 10px;
    margin-bottom: 0px !important;
}

.reveal-modal .subtext {
    background-color: rgba(27,189,246,0.07);
    display: inline-block;
    padding: 5px 12px 7px;
}

.reveal-modal .submit-note {
  font-size: 1.6rem;
  margin-bottom: 0;
  margin-top: 15px;
}

.ck_checkbox {
  font-size: 1.6rem;
   margin-bottom: 25px;
   margin-top: 15px;
   font-weight: 400;
}

.ck_checkbox input {
    width: 15px;
    height: 15px;
    margin-bottom: 0;
}

.ck_opt_in_prompt {
    font-size: 100%;
}

input.modal-input {
    width: 260px;
    margin-left: auto;
    margin-right: auto;
}

/* Giveaway Modal
================================================== */

#modal-giveaway {
    background-color: #F4F4F4;
    padding-top: 10px;
}

#modal-giveaway img {
    margin-bottom: 0px;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
}

#modal-giveaway input[type="submit"] {
    margin-top: 10px;
}

/* Reveal Modals Base Styles
================================================== */

.reveal-modal-bg {
	position: fixed;
	height: 100%;
	width: 100%;
	background: #fff;
	background: rgba(255,255,255,.95);
	z-index: 100;
	display: none;
	top: 0;
	left: 0;
}

.reveal-modal {
	visibility: hidden;
	top: 100px;
	left: 50%;
	margin-left: -240px;
	width: 400px;
	background: #fff;
	position: absolute;
	z-index: 101;
	padding: 30px 40px 34px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.reveal-modal h1 {
  font-size: 30px;
  line-height: 40px;
}

@media only screen and (max-width: 567px) {
.reveal-modal {
	width: initial;
  margin-left: auto;
  left: 20px;
  right: 20px;
}
}

.reveal-modal.small 		{ width: 200px; margin-left: -140px;}
.reveal-modal.medium 		{ width: 400px; margin-left: -240px;}
.reveal-modal.large 		{ width: 600px; margin-left: -340px;}
.reveal-modal.xlarge 		{ width: 800px; margin-left: -440px;}

.reveal-modal .close-reveal-modal {
	font-size: 30px;
	line-height: .5;
	position: absolute;
	top: 10px;
	right: 11px;
	color: #aaa;
	text-shadow: 0 -1px 1px rbga(0,0,0,.6);
	cursor: pointer;
}

/* Animations
================================================== */

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
animation-delay: 0.1s;
}

.fade-in.two {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.fade-in.three {
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
animation-delay: 1.0s;
}

.fade-in.fast {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-duration:0.1s;
-moz-animation-duration:0.1s;
animation-duration:0.1s;
}

/* Animations
================================================== */

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

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.25, 1.25, 1.25);
    transform: scale3d(1.25, 1.25, 1.25);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.25, 1.25, 1.25);
    transform: scale3d(1.25, 1.25, 1.25);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */
    animation-delay: 1.5s;
}

/* Mobile Menu
================================================== */

body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

header .mobile-nav {
    display: none;
}

@media only screen and (max-width: 935px) {
    header .mobile-nav {
        font-size: 28px;
        display: block;
        position: absolute;
        top: 20px;
        right: 25px;
        color: #1ab6ed;
        z-index: 10000;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        box-shadow: none;
        line-height: 1;
    }

    header .mobile-nav:focus,
    header .mobile-nav:active {
        outline: none;
        background: transparent;
        box-shadow: none;
    }

    header .mobile-nav .fas,
    header .mobile-nav .fa-bars {
        opacity: 1;
    }

    header nav ul.main-nav {
        display: none;
    }

    header nav ul.main-nav.mobile-open {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background: #fff;
        z-index: 9999;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    header nav ul.main-nav.mobile-open li {
        display: block;
        margin: 0;
        text-align: center;
        width: 100%;
    }

    header nav ul.main-nav.mobile-open li a {
        display: block;
        padding: 25px 30px;
        color: #333;
        text-decoration: none;
        font-size: 2rem;
        font-weight: 500;
    }

    header nav ul.main-nav.mobile-open li a:hover,
    header nav ul.main-nav.mobile-open li a:active {
        background: rgba(26, 182, 237, 0.1);
        color: #1ab6ed;
    }

    header nav ul.main-nav.mobile-open li a.btn-green {
        color: #34D789;
    }
}

/* Breadcrumbs
================================================== */

.breadcrumbs {
    padding: 15px 0;
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
}

.breadcrumbs a {
    color: #1ab6ed;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.breadcrumbs .separator {
    margin: 0 8px;
    color: #999;
}

.breadcrumbs .current {
    color: #333;
}