body {
    color: #333333;
    font-family: "Lato", sans-serif;
}

h2 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
}

p {
    line-height: 1.5em;
		       
}

.underline {
    text-decoration: underline;
}

.a-link {
    color: rgb(0, 0, 255);
    text-decoration: none;
    border-bottom: 1px dashed rgb(0, 0, 255);
    display: inline;
    position: relative;
    padding: 0 .1em;
    -webkit-transition: all 250ms;
    transition: all 250ms;
}

/* .a-link:before { */
/*     content: ""; */
/*     z-index: -1; */
/*     width: 100%; */
/*     height: 0%; */
/*     background: rgba(0, 0, 255, 0.16); */
/*     bottom: 0; */
/*     left: 0; */
/*     position: absolute; */
/*     -webkit-transition: height 250ms; */
/*     transition: height 250ms; */
/* } */

.a-link:hover {
    border-color: transparent;
    color: rgb(0, 0, 255);
    text-decoration: none;
}

.a-link:hover:before {
    height: 100%;
}

blockquote {
    border-left: none;
    position: relative;
}

blockquote:before {
    display: block;
    padding-left: 10px;
    content: ",,";
    font-size: 60px;
    position: absolute;
    left: -30px;
    top: -10px;
    color: #333333;
    transform: rotate(180deg);
}

blockquote:after {
    display: block;
    padding-left: 10px;
    content: ",,";
    font-size: 60px;
    position: absolute;
    right: -30px;
    bottom: -20px;
    color: #333333;
}

blockquote footer:before {
    content: "";
}

.blockquote-footer {
    display: inline-block;
    position: relative;
    width: 100%;
    text-align: center;
}

.blockquote-footer:before {
    content: "";
    position: absolute;
    bottom  : -10px;
    left: 50%;
    height  : 2px;
    width   : 3rem;
    border-bottom: 2px solid #c2c2c2;
    transform: translateX(-50%);
}

.row-with-blockquote {
    margin-bottom: 20px;
}


#first-container {
    padding: 0px;
    box-shadow: 0px 3px 3px rgba(150,150,150,0.2);
}

#eating-law > a {
    font-family: "Alegreya", serif;
    font-size: 12px;
    letter-spacing: 0.075em;
    text-decoration: none;
    color: #333333;
}

.col-md-6.col-md-offset-3.text-center > h3 {
    font-family: "Alegreya", serif;
    font-size: 28px;
    letter-spacing: 4px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.col-md-6.col-md-offset-3 > h3 > a {
    color: #333333;
    text-decoration: none;
}

.logotype {
    font-family: "Alegreya", serif;
    color: #333333;
    letter-spacing: 0.075em;
    display: inline-block;
    text-decoration: none;
    margin: 0;
}

.logotype > a {
    color: #333333;
    text-decoration: none;
}

.dropdown.nav-item {
    margin: 0px 20px;
}

.dropdown-toggle::after {
    display: none;
}

.dropdown.nav-item:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
    border-radius: 0px;
    border: none;
    font-size: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    top: 30px;
    min-width: max-content;
}

.dropdown-menu {
    margin-top: 0;
    border-radius: 0px;
    border: none;
    font-size: 14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    top: 30px;
    min-width: max-content;
}

.dropdown-menu > li > a, 
.dropdown-menu > li > a:hover {
    color: #333333;
    text-decoration: none;
}


.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
    padding: 0;
}    

.nav > li > a.active,
.nav > li > a:hover {
    font-weight: 600;
    background-color: transparent;
}

.nav > li > a:focus {
    background-color: transparent;
}

.nav > li {
    padding-bottom: 0px;
}

.fa.fa-twitter {
    color: #333333;
    font-size: 16px;
}

.page-active {
    border-bottom: 2px solid;
    border-color: rgba(30,30,30,0.9);
}

.legalese-nav {
    background-color: white;
    min-height: 30px;
    border: none;
    width: 100%;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.brand-pic {
    height: 2rem;
    margin-right: 0.2rem;
    padding-bottom: 5px;
}

.legalese-nav.affix {
    position: fixed;
    top: 0;
    z-index: 1000;
    max-width: 100vw;
}

.title-font {
    font-size: 14px;
    font-family: "Lato", sans-serif;
    font-weight: 700;
    color: #333333;
    text-decoration: none;
    cursor: pointer;
}

.no-underline:hover {
    text-decoration: none;
}

.top-justify {
    display: inline-block;
    text-align: center;
    margin: 10px 5% 0px 5%;
}

@media (min-width: 768px) and (max-width: 1440px) {
    .top-justify {
	display: inline-block;
	text-align: center;
	margin: 10px 3% 0px 3%;
    }
}

.top-subtitle {
    color: #919191;
    padding: 3px 20px;
    text-align: center;
}

#top-bar {
    font-size: 12px;
    font-family: "Lato", sans-serif;
    height: 50px;
}
    
#top-bar > li > a,
#blurb-nav-id {
    color: #333333;
    text-decoration: none;
    cursor: pointer;
}

#blurb-nav-id > div:hover {
    font-weight: bold;
}

.blurb-nav-highlight {
    text-decoration: underline;
    font-weight: 700;
}

.nav-pills > li + li {
    margin-left: 0px;
}

.blurb-nav {
    background-color: white;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    box-shadow: 0px 3px 3px rgba(150,150,150,0.2);
    padding: 10px;
}


#login-menu-item {
  color: #0000ff;
  text-shadow:
    0 0 5px #0ff,
    0 0 10px #0ff,
    0 0 20px #0ff,
    0 0 40px #0ff,
    0 0 80px #0ff,
    0 0 90px #0ff,
    0 0 100px #0ff,
    0 0 150px #0ff;
}

.login-menu-item-pink {
  color: #0000ff;
  text-shadow: #ff00b2 1px 0 10px;
}

.left-menu {
    color: #333333;
    height: 80%;
    position: sticky;
    text-decoration: none;
    font-family: 'Lato' sans-serif;
    font-size: 12px;
    font-weight: 100;
    top: 0;
    left: 0;
    padding-top: 20px;
}

.left-menu-item {
    font-weight: 300;
    color: #333333;
}

.left-menu-sub {
    font-size: 10px;
    text-indent: 5em each-line;
}

.legalese-logo {
    height: 3rem;
}

.techcrunch {
    padding-top: 25px;
    width: 60vw;
    padding-bottom: 25px;
}

#pompous {
    display: inline-block;
}

/* https://unsplash.com/photos/Oaqk7qqNh_c */

#second-container {
    padding-top: 20px;
}

.second-container-front {
    background-image: url('../images/paper.jpg');
    background-size: contain;
}

.black-rec {
    background-color: rgba(0,0,0, 0.1);
}

.row.text-center.black-rec > h2 {
    font-weight: 300;
    font-size: 25px;
}

.row.text-center.black-rec > p {
    font-size: 15px;
}

.get-started {
    width: 18vw;
    height: 3.5vw;
    font-size: 20px;
    border: 2px solid;
    border-color: rgba(82, 254, 206, 1);
    border-radius: 0px;
    background-color: black;
    color: rgba(82, 254, 206, 1);
}

.get-started-link:hover {
    cursor: pointer;
}

.downarrow {
    height: 3vh;
    cursor: pointer;
}

.top-container {
    margin-top: 30px;
}

.prose {
  max-width: 1200px;
  margin: 0 auto;
  align-content: center;
}

#return-to-top {
    position: fixed;
    bottom: 40px;
    right: 20px;
    background: blue;
    width: 40px;
    height: 40px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    z-index: 100;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top-text {
    position: fixed;
    bottom: 12px;
    right: 31px;
    color: #0000ff;
    display: block;
    font-size: 11px;
    font-family: "Roboto Condensed", sans-serif;
}

#return-to-top i {
    color: white;
    margin: 0;
    position: relative;
    left: 11px;
    top: 10px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top:hover {
    background: blue;
}

#return-to-top:hover i {
    color: rgba(255, 255,0 , 1);
    top: 5px;
}

div.li-inline p     { font-weight: bold; margin-bottom: 0; margin-top: 20px; }
div.li-inline ul    { list-style-type: disc; margin-top: 0 }
div.li-inline ul li { display: inline; line-height: 21pt; }
div.li-inline p.nobold { font-weight: normal; padding-left: 20px; }
div.li-inline li:not(:first-child)::before {
    content: "//";
    font-size: 17.5pt;
    position: relative;
    bottom:-3px;
    vertical-align: center;
    margin-right: 6pt;
    margin-left: 6pt;
}

/* Simplification so we don't always have to use the DIV */
ul.li-inline    { list-style-type: disc; margin-top: 0; padding-left: 0px; }
ul.li-inline li { display: inline; line-height: 1.5em }
ul.li-inline li:not(:first-child)::before {
    content: "//";
    position:relative;
    vertical-align: center;
    margin-right: 6pt;
    margin-left: 4pt;
}

.player-inline {
    display: inline;
}

.svg-wrapper {
    height: 40px;
    margin: 0 auto;
    width: 200px;
}

.button-shape {
    stroke-dasharray: 0 500;
    stroke-dashoffset: -240;
    stroke-width: 4px;
    fill: black;
    stroke: rgba(82,254,206, 1);
    border-bottom: 5px solid black;
    transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

.button-text > a,
.button-text > a:hover {
    font-family: 'Lato', sans serif;
    font-size: 18px;
    color: rgba(82,254,206, 1);
    top: -38px;
    position: relative;
    text-decoration: none;
}

.svg-wrapper:hover .button-shape {
    stroke-width: 4px;
    stroke-dashoffset: 0;
    stroke-dasharray: 760;
}

.svg-wrapper-special {
    height: 100%;
    margin: 0 auto;
    width: 100%;
    position: relative;
}

.button-shape-special {
    stroke-dasharray: 0 500;
    stroke-dashoffset: -240;
    stroke-width: 4px;
    fill: black;
    stroke: rgba(82,254,206, 1);
    border-bottom: 5px solid black;
    transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
}

.button-text-special,
.button-text {
    font-family: 'Lato', sans serif;
    font-size: 18px;
    color: rgba(82,254,206, 1);
    text-decoration: none;
    border: none;
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 0;
    // position: relative
}

a.button-text-special:hover {
    color: rgba(82,254,206, 1)
}

#inside-button {
    min-width: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.button-text-special:focus {
    outline: none;
}

.svg-wrapper-special:hover .button-shape-special {
    stroke-width: 4px;
    stroke-dashoffset: 0;
    stroke-dasharray: 900;
}


.bot-container {
    width: 100%;
    background-color: rgba(205, 205, 205, 1);
    margin-top: 50px;
    padding: 25px 48px 25px 48px;
    box-shadow: 0 -3px 3px -3px rgba(51, 51, 51, 0.2);
}

.rights-reserved,
.rights-reserved > a {
     margin-top: 10px;
    font-weight: 700;
    font-size: 12px;
    color: #0000ff;
    text-decoration: none;
}

.rights-reserved > a:hover {
    font-weight: 500;
    color: rgba(255,255,0,1);

}

.bot-squeeze {
    width: 10%;
    padding: 0;
    margin-right: 10px;
}

#first-bottom {
    margin-left: 20px;
}

#bot-legalese-col {
    width: 10%;
    padding-right: 0px;
    padding-top: 10px;
}

#bot-legalese-large {
    margin-top: 15px;
    margin-bottom: 0;
}

#bot-legalese-large > a {
    font-family: "Alegreya", serif;
    font-weight: 100;
    font-kerning: normal;
    color: #0000ff;
    font-size: 30px;
    letter-spacing: 8px;
    margin: 0;
    text-decoration: none;
}

#bot-legalese-large > a:hover {
    font-family: "Alegreya", serif;
    font-weight: 100;
    font-kerning: normal;
    color: rgba(248,34,115,1);
    font-size: 30px;
    letter-spacing: 8px;
    margin: 0;
    text-decoration: none;
}


#legalese-pte-ltd > p {
    margin-bottom: 0px;
    font-weight: 100;
}

.not-found {
    font-size: 40px;
}

.not-found-container {
    margin-top: 20px;
}

.vert-center {
    display: flex;
    align-items: center;
}

.not-found-btn {
    background-color: #54edfc;
    border: none;
    box-shadow: 2px 2px 2px 1px rgba(51, 51, 51, 0.2)
}

#accept-disclaimer {
    border-bottom: 3px solid;
    border-color: #f0fe1e;
    font-size: 20px;
}

.big-ticks {
    list-style: none;
}

.big-ticks > li {
    margin-top: 5px;
}

.big-ticks > li > input {
    margin-right: 1em;
    display: inline;
}

.subtitle {
    font-size: 12px;
}

.fancy-community {
    list-style: none;
    padding-left: 0px;
}

.developer-ul {
    padding-left: 20px;
}

.community-row {
    margin-top: 20px;
}

.tick-li:before {
    font-family: FontAwesome;
    content: "\f00c";
    left: -10px;
    margin-right: 10px;
    color: #25ff1d;
}

.cross-li:before {
    font-family: FontAwesome;
    content: "\f00d";
    left: -10px;
    margin-right: 10px;
    color: deeppink;
}

#slack-li:before {
    font-family: FontAwesome;
    content: "\f198";
    left: -10px;
    margin-right: 10px;
}

#forum-li:before {
    font-family: FontAwesome;
    content: "\f27b";
    left: -10px;
    margin-right: 10px;
}

#github-li:before {
    font-family: FontAwesome;
    content: "\f09b";
    left: -10px;
    margin-right: 10px;
}

#twitter-li:before {
    font-family: FontAwesome;
    content: "\f099";
    left: -10px;
    margin-right: 10px;
}

#contact-li:before {
    font-family: FontAwesome;
    content: "\f0e0";
    font-size: 12px;
    left: -10px;
    margin-right: 10px;
}

#investment-contract {
    padding: 20px;
    background-color: #f0f2ff;
    box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
    font-family: "Alegreya", serif;
    font-weight: 400;
}

.card-pictures {
    height: 160px;
    width: 160px;
    cursor: pointer;
    
}

.col-md-2.flipcard.text-center, .col-md-2.col-md-offset-2.flipcard.text-center {
    padding: 0px;
}

a.footnote {
   text-align: center;
   color: #0000ff;
   background-color: rgba(51,236,255,0.3);
   border-radius: 5px;
   padding-left: 5px;
   padding-right: 5px;
   padding-bottom: 3px;
   margin-right: 4px;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
   cursor: help;
}

a.footnote span {
   z-index: -1;
   opacity: 0;
   position: absolute;
   transform: translateY(-50%);
   width: 300pxk
   margin-left: 15px;
   padding:14px 20px;
   border-radius:4px;
   box-shadow: 0 0 8px #c2c2c2;
   box-sizing: border-box;
   background-color: #d4fbff ;
   color: #727778;
   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   transition: all 1s ease;
}

a.footnote span:after {
    border-color: transparent #d4fbff transparent transparent;
    border-style: solid;
    border-width: 7px 7px 7px 0px;
    content: "";
    position: absolute;
    left: -9px;
    top: 50%;
}

a.footnote:hover {
    font-weight: normal;
}

a.footnote:hover span {
   z-index: 9;
   opacity: 1;
   -webkit-transition: all 1s ease;
   -o-transition: all 1s ease;
   -moz-transition: all 1s ease;
   transition: all 1s ease;
}

.para-ml,
.para-ml > a {
    margin: 0;
    font-size: 10px;
    font-weight: 300;
    text-decoration: none;
    color: #0000ff;
    }

.para-ml > a:hover {
    font-weight: 100;
    font-size: 2px;
}

.lower-nav-el {
    margin-top: 20px;
}

.hvr-underline-from-center {
  display: inline;
  vertical-align: middle;
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}


.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: -0.2em;
  height: 1em;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
    left: 0;
    right: 0;
    background: rgba(82, 254, 206, 1);
}
  /* background: rgba(82, 254, 206, 1); */


.bot-container-fixed {
    position: fixed;
    bottom: 0;
}

/* button on profile pictures */

.prof-link {
    position: absolute;
    top: 120px;
    right: 45px;
    height: 24px;
    width: 24px;
    background-color: white;
    z;
    color: rgba(0,0 , 255,1);
    z-index: 10000;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 5px 3px -3px rgba(0,0,255,0.8);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

.prof-link:hover {
    animation-name: bounce;
    -moz-animation-name: bounce;
}

.flipcard.text-center:hover > .prof-link {
    animation-name: bounce;
    -moz-animation-name: bounce;
}

@keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform:     translateY(0);
    transform:         translateY(0)
    }
    40% {
    -webkit-transform: translateY(-20px);
    -ms-transform:     translateY(-20px);
    transform:         translateY(-20px)
    }
    60% {
    -webkit-transform: translateY(-8px);
    -ms-transform:     translateY(-8px);
    transform:         translateY(-8px)
    }
}

}

.modal-title {
    color: rgba(58, 83, 250, 1);
    text-align: left;
}


.favourite-things-qn {
    background-color: rgba(58, 83, 250, 1);
    font-family: "roboto condensed";
    text-align: left;
    color: white;
    margin-top: 3px;
}

.favourite-things-ans {
    color: rgba(58, 83, 250, 1);
    font-family: "roboto condensed";
    text-align: left;
 }

.profiles-tldr {
    color: rgba(58, 83, 250, 1);
    text-align: left;
}

.modal-content {
    background-color: rgba(232, 232, 232, 1);
    margin: 0 auto;   
}

.modal-content-form {
    background-color: white;
    border-radius: 4px;
    margin-top: 10vh;
}

#contrastButton,
.contrastButton {
    border: none;
    background: linear-gradient(30deg,#82fece 40%,#10e7ff);
    border-radius: 0;
    box-shadow: inset 0 0 3px #10e7ff, 0 0 6px #10e7ff;
    position: relative;
    vertical-align: middle;
}

.modal-header {
    display: block;
}

.modal-center-circle {
    position: absolute;
    margin: 0;
    left: 50%;
    top: 0px;
    border: 10px solid #fefc59;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.modal-center-logo {
    position: absolute;
    margin: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 40px;
}

.form-modal {
    border-top: 10px solid #fefc59;
}

#formModalContainer {
    width: 800px;
    max-width: 80vw
}

#formTitle {
    color: #333;
    margin-top: 40px;
}

.modal-dialog {
    margin: 0 auto; 
    margin-top: 20px;
    max-width: 1000px;
}

/* close button on the modal */
button.close {
    background-color: white;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 6px 3px -3px rgba(150,150,150,0.5);
}

.close {
    float: none;
    position: absolute;
    top: -5px;
    right: -11px;
    opacity: 1;
}

/* size of x in close button */
.close > span {
    font-size: 18px;
    color: #333333;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(50%, 5%);
}

.card-pictures {
    border-radius: 50%;
        
}

.flipcard.text-center {
    width: 300px;
    display: inline-block;
}

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

.row.team-row {
    text-align: center;
}

::selection {
    background: #1d40ec;
    color: #fff;
}

.pricing-choice-active {
    color: white;
    font-weight: 700;
    font-size: 16px;
}

.pricing-choice-inactive {
    color: #d6d6d6;
    font-weight: 700;
    font-size: 16px;
}

.individual-left,
.api-right {
    position: relative;
    padding-bottom: 2px;
    display: inline-block;
}

.individual-left::before {
    content: '';
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, white 46%, #d6d6d6 46%)
}

.api-right::before {
    content: '';
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(to right, #d6d6d6 46%, white 46%)
}

.table-col-width {
    width: 20%;
    text-align: center;
}

.small-button {
    font-size: 10px;
    padding: 3px 6px;
}

.pricing-logo {
    height: 250px;
    position: absolute;
    bottom: -50px;
    right: 0;
}

.test-pricing {
    height: 100%;
    position: absolute;
    right: 0;
    transform: translateY(-40%);
}

.api-pricing {
    height: 150%;
    position: absolute;
    right: 0;
    transform: translateY(-30%);
}

.pricing-logo-docs {
    height: 200px;
    position: absolute;
    right: -10%;
    transform: translateY(-20%);
}

.optional-logo {
    height: 300%;
    position: absolute;
    right: 0%;
    transform: translateY(-40%);
}

.row-equal-height {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
}

.row-spacing {
    margin-top: 100px;
}

.highlight-row-purple {
    background: linear-gradient(169deg, #dd68ff 0%, #413eff 100%);
    padding-top: 20px;
}

.highlight-row-special-above {
    height: 8rem
}

.highlight-row-special::before {
    top:-7rem;
    left:-2rem;
    right:0rem;
    height:14rem;
    border-top: 1px solid rgba(130,148,255, 0.2);
    background-color: #fafbfc;
    background-position-x:center;
    background-position-y:bottom;
    background-size:100% auto;
    transform:rotate(4deg);
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    pointer-events: none;
    display: block;
    z-index: -1;
}

.highlight-row-special {
    background: linear-gradient(180deg, #fafbfc 0, rgba(130,148,255,0.4));
    position: relative;
}

.highlight-row-green {
    background: linear-gradient(90deg, rgba(50,251,145,1) 0%, rgba(87,255,198,1) 100%);;
}

.highlight-row-blue {
    background: linear-gradient(90deg, rgba(97,89,255,1) 0%, rgba(62,236,255,1) 100%);
}

.highlight-row-neon-blue {
    background: linear-gradient(90deg, rgba(37,255,253,1) 0%, rgba(62,236,255,1) 100%);
}


.table-header-fixed {
    background-color: white;
    border-left: 1px solid white !important;
    border-right: 1px solid white !important;
    border-top: 1px solid white !important;
    border-bottom: 1px solid white !important;
}

.btn-horizontal-padding {
    padding: 0px 5px;
}

.column-right-border {
    border-right: 3px solid #00f9d8 !important;
    border-left: 3px solid #00f9d8 !important;
    position: relative !important;
}

.column-right-border:before {
    box-shadow: -15px 0 8px -15px inset;
    content: " ";
    color: #333333;
    height: 102%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}

.column-right-border:after {
    box-shadow: 15px 0 8px -15px inset;
    content: " ";
    height: 102%;
    color: #333333;
    position: absolute;
    top: 0;
    right: -15px;
    width: 15px;
}

.column-right-border-top:before {
    box-shadow: -15px 0 8px -15px inset;
    content: " ";
    color: #333333;
    height: 104%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}

.column-right-border-top:after {
    box-shadow: 15px 0 8px -15px inset;
    content: " ";
    height: 104%;
    color: #333333;
    position: absolute;
    top: 0;
    right: -15px;
    width: 15px;
}

.bottom-shadow-hack {
    position: absolute;
    bottom: 0px;
    height: 10px;
    width: 100%
}

.bottom-shadow-hack:before {
    box-shadow: 0px 10px 4px -1px;
    content: " ";
    color: #7a7a7a;
    height: 5px;
    bottom: 5px;
    position: absolute;
    left: -1%;
    width: 102%;
}

.top-shadow-hack {
    position: absolute;
    top: 0px;
    height: 10px;
    width: 100%
}

.top-shadow-hack:before {
    box-shadow: inset 0px -10px 8px -12px #333; 
    content: " ";
    color: #7a7a7a;
    height: 5px;
    top: -5px;
    position: absolute;
    left: -1%;
    width: 102%;
}

.column-right-border-top {
    border-right: 3px solid rgb(0, 249, 216, 0.5) !important;
    border-left: 3px solid #00f9d8 !important;
    border-top: none !important;
    position: relative !important;
}

.column-bottom-border {
    border-bottom: 2px solid #00c7ac !important
}

.paragraph-small-margin {
    margin: 2px;
}

.blue-check {
    color: blue
}

.highlight-border {
    height: 5px;
    border-radius: 2px;
    background: 2px linear-gradient(169deg, rgba(198,50,241,1) 0%, rgba(65,62,255,1) 100%);
}

.picture-padding {
    padding-top: 50px
}

.subscription-box {
    display: inline-block;
    padding: 2px;
    margin: 10px 0px;
}

.subscription-box-margins {
    padding: 2px;
    margin: 0 auto;
    width: 100%;
    height: 104px;
}

.subscription-box-margins-large {
    display: inline-block;
    padding: 2px;
    margin: 10px;
    max-width: 300px;
}    

.subscription-box-margins > div > h3,
.subscription-box-margins > div > p,
.subscription-box-margins-large > div > h3,
.subscription-box-margins-large > div > p {
    margin: 0px;
}

.subscription-content {
    background: #fff;
    padding: 10px;
    height: 100px;
    display: block;
    position: relative;
}

.subscription-box-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;    
}

.subscription-box-center > p {
    min-width: 130px;
    max-width: 100%;
    margin-bottom: 0;
}

.subscription-box-center > h3 {
    margin: 0;
}

.cost-label {
    width: 80px;
}

.pricing-features-cols {
    border-top: 2px solid transparent;
    padding: 10px;
}

.pricing-labels {
    text-align: right;
    width: 100%;
}

@media (max-width: 767px) {
    .pricing-labels {
	text-align: center;
	height: 50px;
	font-size: 20px;
    }
}

.pricing-cols-padding {
}	


.active-tab {
    border-bottom: 2px solid rgba(82, 254, 206, 1);
}

.table-col-center {
    text-align: center;
}

.larger-font {
    font-size: 16px;
    color: #43474d;
}

@media (max-width: 767px) {
    .larger-font {
	font-size: 12px;
    }
}

.table-left-title {
    font-size: 18px;
    color: #333;
    position: relative;
}

@media (max-width: 767px) {
    .table-left-title {
	font-size: 14px;
    }
}

.dollar-font {
    font-size: 18px;
}

td {
    vertical-align: middle !important
}

table.floatThead-table {
    border-top: none !important;
    border-bottom: none !important;
    border-color: white !important;
    background-color: #FFF;
}

.child-no-border > td {
    border-top: none !important;
}
    
.floatThead-col {
    border-bottom: none !important;
    border: 1px solid white !important;
}

.popover-display {
    position: absolute;
    display: inline;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
}

.popover-display-inline {
    position: relative;
}

.popover-display-inline > img {
    left: 0;
    top: 0;
    transform: translateY(-20%);
}

.popover-display-custom {
    padding: 0;
    vertical-align: bottom;
}

#popover-title {
    left: -30px;
}

.inline-p {
    margin: 0;
    display: inline;
}

.transparent-button {
    background-color: transparent;
}

.nice-buttons {
    padding: 6px;
    background-color: blue;
    border-radius: 0;
    color: white;
    border: none;
    position: relative;
}

@media (max-width: 767px) {
    .nice-buttons {
	font-size: 10px;
	padding: 3px;
    }
}

.nice-buttons:hover {
    box-shadow: 0px 0px 4px 2px #bdbdbd;
}
.nice-buttons:hover,
.nice-buttons:focus {
    background-color: blue;
    color: white;
}

.nice-buttons:focus {
    outline: none;
}

.nice-buttons:before{
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 0;
  height: 0;
  background: transparent;
  border: 2px solid transparent;
}

.nice-buttons:hover:before{
    animation: animate 0.5s ease forwards;
}

@keyframes animate{
  0%{
    width: 0;
    height: 0;
    border-top-color: #dd68ff;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
  }
  50%{
    width: calc(100% + 4px);
    height: 0;
    border-top-color: #dd68ff;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: #dd68ff;
  }
  100%{
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-top-color: #dd68ff;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: #dd68ff;
  }
}

.nice-buttons:after{
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 0;
  height: 0;
  background: transparent;
  border: 2px solid transparent;
}

.nice-buttons:hover:after{
  animation: animate2 0.5s ease forwards;
  animation-delay: 0.5s;
}

@keyframes animate2{
  0%{
    width: 0;
    height: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: #dd68ff;
    border-right-color: transparent;
  }
  50%{
    width: 0;
    height: calc(100% + 4px);
    border-top-color: transparent;
    border-bottom-color: #dd68ff;
    border-left-color: #dd68ff;
    border-right-color: transparent;
  }
  100%{
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    border-top-color: transparent;
    border-bottom-color: #dd68ff;
    border-left-color: #dd68ff;
    border-right-color: transparent;
  }
}

.tell-us {
    cursor: pointer;
    display: block;
}

.floatThead-container {
    padding-top:5px;
    border-color: white !important;
    background-color: white !important;
}

.horizontal-squeeze {
    display: flex;
    justify-content: center;
}

.horizontal-squeeze-child {
    display: inline-block;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
    padding-top: 15px;
    
}

.pseudo-table-header {
    position: relative;
    padding: 0 5px 0px 5px;
    height: 6em;
    box-sizing: border-box;
}

#recommended-header {
    font-size: 10px;
    background-color: #00f9d8;
    margin-bottom: 0px;
    margin-top: -15px;
}

#recommended-container {
    padding: 0;
    height: calc(6em + 15px);
}

@media(max-width: 767px) {
    .pseudo-table-header {
	height: 8em;
    }
    #recommended-header {
	margin-bottom: calc(12em + 15px);
	font-size: 8px;
    }
    #recommended-container {
	height: calc(14em + 15px);
    }
}

.pseudo-table-header-no-padding {
    padding-top: 5px;
}

.pseudo-table-header-price-before {
    margin-bottom: 5px;
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

#pseudo-table-header-price-before-basic {
    margin-top: 0px;
}

@media(max-width: 767px) {
    .pseudo-table-header-price-before {
	font-size: 14px;
	transform: rotate(55deg);
	transform-origin: bottom right;
	position: absolute;
	top: 50px;
	right: 50%;
    }
    #pseudo-table-header-no-rotate {
	transform: rotate(0deg);
	position: relative;
	right: 0;
    }
    #pseudo-table-header-price-before-basic {
	margin-top: 0;
	top: 65px;
    }

}

.pseudo-table-header-price-p {
    font-size: 14px;
    color: #929292;
    margin-bottom: 0;
}

.pseudo-table-header-price-h5 {
    color: #929292;
    margin-top: 0;
}

@media (max-width: 767px) {
    .pseudo-table-header-price-h5 {
	font-size: 12px;
    }
}
.pseudo-table-header-price {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

@media (max-width: 767px) {
    .pseudo-table-header {
	height: 14em;
	padding-top: 9em;
    }
    .pseudo-table-header > p {
	margin: 0;
    }
    .pseudo-table-header-price {
	font-size: 14px;
	display: block;
    }
}

@media (max-width: 767px) {
    #monthly-commitments {
	display: none;
    }
}

.pseudo-table {
    position: relative;
    height: 60px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 8px;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    box-sizing: border-box;
}

.pseudo-table-tall {
    position: relative;
    height: 80px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 8px;
    border-bottom: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    box-sizing: border-box;
}

.pseudo-table > p,
.pseudo-table-tall > p,
.p-no-bottom {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .pseudo-table-tall {
	height: 100px;
    }
}

.pseudo-table-no-border {
    position: relative;
    height: 120px;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 8px;
    box-sizing: border-box;
}

.table-row-title {
    text-align: right;
    justify-content: flex-end;
}

.table-row-title > p {
    margin: 0;
}

.table-row-title-content-subtitle{
    margin: 0;
}

.highlight-column {
    border: 2px solid #00f9d8;
    border-radius: 2px;
    box-shadow: 0px 0px 4px 4px #c9c9c9;
}

.highlight-column-hover:hover {
}

.highlight-column > .pseudo-table,
#third-column > .pseudo-table {
    border-right: none;
}

#first-column > .pseudo-table,
#first-column > .pseudo-table-tall {
    border-left: 1px solid #ebebeb
}

.table-row-top {
    border-right: none;
    margin-top: 20px;
}

.table-row-top-half {
    margin-top: 0;
}

#celebration-canvas {
    position: absolute;
    right: 50%;
    bottom: 0px;
    height: 80px;
    transform: translateX(50%);
}

#get-started-addons {
    align-items: center;
    justify-content: center;
    display: flex;
    position: relative
}

.small-money {
    font-size: 12px;
    margin-left: 0.1em;
}

.api-call-h2 {
    padding-left: 70px;
}

@media (max-width: 767px) {
    .api-call-h2 {
	padding: 0;
	text-align: center;
    }
}

.pink-asterisk {
    color: #ff38d1;
    font-size: 100%;
    top: -.3em;
    right: -.1em;
}

.has-error > label {
    color: #ff38d1 !important;
}

.has-error > div > input,
.has-error > div > div.checkbox,
.has-error > div > div.radio {    
    border-color: #ff38d1 !important;
    color: #ff38d1 !important;
}

.inline-media {
    height: 1rem;
    margin-right: 0.5rem;
}

.p-no-bottom > .inline-media,
.inline-media-small {
    height: 1rem;
    margin-right: 0.5rem;
}

.inline-media-left {
    margin-left: 0.5rem;
}

.media-jumbo {
    background-color: #f7f6f6;
    padding: 0px 0px 50px 0px;
}

.media-menu {
    padding-top: 40px;
    text-align: right;
}

.media-col {
    padding: 40px 10px 0px 10px;
}

.media-col-offset-right {
    margin-right: 16.66666667%;
}

.media-col-offset-right-5 {
    margin-right: 41.66666667%;
}

.media-col-offset-right-8 {
    margin-right: 66.66666667%;
}

.left-media-col {
    text-align: right;
}

.news-square {
    padding-top: 100%;
    width: 100%;
    line-height: 1rem;
    text-align: center;
    display: block;
    border: none;
    background-color: white;
    border: 3px solid #efefef;
    margin: 0 auto;
    position: relative;
    margin-bottom: 5px;
}

#media-logo {
    left: 75%;
    transform: translateX(-50%);
    top: -30px;
}

.media-list-item {
    cursor: pointer;
    display: inline-block;
    padding: 5px 10px;
}

.active-media-link {
    position: relative;
    background-color: #32fb91;
    transform: translateX(50px);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    padding: 1rem 1rem 1rem 3rem;
    z-index: 2;
}

.a-link.long {
    display: inline;
    font-size: 1rem;
}

.news-pictures {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.icon-pictures {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.small-caps {
    font-variant: small-caps;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
}

.hidden-white {
    background-color: white;
}

.small-block {
    display: inline;
}

#hq-img {
    margin-left: 3rem;
}

#knowallmen {
    max-width: 100%;
}

.sidebar-title {
    display: none;
}

.media-content {
    display: none;
}

.media-content-show {
    display: block;
}

.media-gray {
    color: gray;
}

.grey-bull {
    font-size: 0.8rem;
}

.media-gray > .a-link {
    margin: 0px 0.2rem;
}

.media-blue > .inline-media {
    height: 1rem;
    margin-right: 0.5rem;
}

.press-release {
    margin-bottom: 0;
    padding: 20px;
    position: relative;
    border-left: 5px solid #ff2f9f;
}

.press-release:before {
    content: '';
    position: absolute;
    left: -10px;
    width: 15px;
    height: 15px;
    background-color: #33fff8;
    border-radius: 50%;
    top: 25px;
}

.top-margin-large {
    margin-top: 20px;
}

.yellow-span {
    background-color: #f1ff07;
    font-weight: 700;
}

.col-6.col-lg-2 > .small-caps {
    font-size: 12px;
    color: gray;
}

.col-12.col-lg-11.offset-lg-1 {
    padding-left: 0px;
}

.name-col {
    margin-top: 10px;
    border-top: 8px solid white;
    padding-top: 50px;
}

#termsModalClose {
    position: absolute;
    right: 10px;
    border: none;
    top: 10px;
}

#teamModalClose {
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: lightgrey;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 3px 3px rgba(150,150,150,0.2);
}