body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

body > * {
    max-width: 1920px;
}

.fixed-container {
    width: 100%;
    max-width: 1200px;
}

a.btn-link, #header button.cta {
    padding: 10px 30px;
}

button {
    padding: 10px 35px;
}

#header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    z-index: 2000;
    height: 75px;
}

#header-spacer {
    height: 75px;
    width: 100%;
}

#header #navbar {
    padding: 0px 50px;
}

#header a.spaced {
    max-width: 170px;
    flex-grow: 1;
}

#header .contact, #header nav #main-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-grow: 1;
}

#header .contact {
    max-width: 400px;
}

#header nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-grow: 1;
}

#header .logo {
    padding: 10px;
}

.logo img {
    max-width: 250px;
}

#header a {
    margin: 10px 25px;
}

#header a.btn-link {
    margin: 10px 20px;
}

#header .contact {
    display: flex;
    justify-content: flex-start;
}

#hero-banner {
    display: flex;
    min-height: 900px;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    max-width: 100%;
    overflow-x: hidden;
}

#hero-banner #strapline-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;;
    align-items: flex-start;
    flex-grow: 1;
    flex-basis: 50%;
}

#hero-banner #strapline-container > * {
    padding: 0px 50px;
}


#hero-banner #strapline-container #strapline-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#hero-banner #strapline-info p {
    margin: 0;
    margin-top: 10px;
}

#hero-banner #strapline-info button {
    max-width: 350px;
    padding: 10px 30px;
}


#hero-banner #strapline-sub {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#hero-banner #header-image-container, #main-intro #explanation-image-container {
    max-width: 50%;
}

#hero-banner #header-image-container img,#main-intro #explanation-image-container img {
    object-fit: contain;
    width: 100%;
}

#hero-banner #header-image-container img {
    width: 130%;
    overflow: hidden;
    padding-left: 20px;
}



#main-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    text-align: center;
}

#main-intro > p {
    max-width: 1200px;
}

#main-intro ul {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

#main-intro ul li {
    box-sizing: border-box;
    margin: 0;
    flex-basis: 30%;
    min-width: 200px;
    min-height: 200px;
    padding: 20px 10px;
    padding-top: 40px;
    margin: 20px;
}

#main-intro ul li span {
    font-size: 160px;
}

#main-intro #free-trial-cta {
    padding: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#main-intro #conviction {
    max-width: 50%;
}

#main-intro #free-trial-cta #free-trial-cta-buttons {
    flex-grow: 1;
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#main-intro #free-trial-cta #free-trial-cta-buttons > *{
    margin: 40px;
    min-width: 200px;
}


/* #main-intro #explanation { */
/*     display: flex; */
/*     flex-direction: row; */
/*     align-items: center; */
/* } */

#main-intro ol {
    width: 100%;
    /* max-width: 50%; */
    box-sizing: border-box;
    padding: 10px 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* flex-direction: column; */
    justify-content: space-evenly;
}

#main-intro ol li {
    box-sizing: border-box;
    margin: 0;
    /* flex-basis: 17%; */
    flex-basis: 30%;
    min-width: 400px;
    min-height: 200px;
    margin: 20px;
    padding: 20px;
    text-align: left;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* flex-direction: column; */
    /* align-items: flex-start; */
}

#main-intro ol li > * {
}

#main-intro ol li span.material-icons-outlined {
    font-size: 96px;
    margin-right: 15px;
    padding-right: 15px;
}


#how-it-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;

}

#how-it-works .feature {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: 20px;
    justify-content: space-evenly;
}


#how-it-works .feature .feature-image {
    max-width: 500px;
}
#how-it-works .feature .feature-image img {
    width: 100%;
}

#how-it-works .feature > * {
    padding: 30px;
}

#how-it-works .feature.reverse-feature {
    flex-direction: row-reverse;
}

#how-it-works .feature-description {
    max-width: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px 20px;
}


#good-company {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
}

#good-company p {
    padding: 0px 20px;
    max-width: 1600px;
}


#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
}

#contact>  p {
    padding: 0px 20px;
    max-width: 1600px;
}

#contact-form-container {
    width: 100%;
    max-width: 1100px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: stretch;
}

@media only screen and (max-width: 767px) {
    #contact-form-container {
        flex-direction: column;
        align-items: center;
        padding: 0 1em;
        box-sizing: border-box;
        margin-bottom: 50px;
    }
}


#contact-form-container form {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
    margin-top: 50px;
    max-width: 500px;
    padding: 0 1em;
    box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
    #contact-form-container form {
        padding: 0;
    }
}


#contact-form-container form > * {
    padding: 5px;
    margin: 1em 0;
    max-width: none;
}

#contact-form-container #contact-form-sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex-grow: 1;
    max-width: 500px;
}

#contact-form-container #contact-form-sidebar .contact-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1em;
}

#contact-form-container #contact-form-sidebar .contact-block img {
    width: 100%;
    max-width: 100px;
    min-height: 100px;
    margin-bottom: 16px;
}


#contact-form-container #contact-form-sidebar .contact-block a {
    text-decoration: none;
    color: #102a4b;
    padding: 10px 20px;
    font-weight: 700;
}

footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 0 10px;
}

footer .logo {
    margin-top: -15px;
}

footer > * {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#footer-nav {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 30px;
    margin-bottom: 10px;
}

#footer-nav > * {
    flex-basis: 10%;
    flex-grow: 1;
    text-align: center;
}

footer hr {
    box-sizing: border-box;
    max-width: 100%;
    margin: 20px;
}

footer #cta-box {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-grow: 1;
    align-items: flex-start;
    margin-bottom: 50px;
    margin-top: 25px;
}

footer #cta-box h4 {
    margin-top: 0;
    margin-bottom: 15px;
}

footer #cta-box .cta {
    margin: 0;
    padding: 0.5em 1em;
}

/* Burger Menu */
#header .hamburger {
    display: none;
    margin: 30px;
}


#header nav.open {
    position: absolute;
    background: #FFF;
    top: 75px;
    left: 0;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

#demo-modal-parent {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-height: 100%;
}

#demo-modal {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* max-width: 800px; */
    max-height: 700px;
    padding: 20px 30px;
}

#request form {
    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
}

#request form button {
    width: 200px;
    margin: auto;
}

#request #modal-header {
    max-width: 700px;
}

#request > * {   
    max-width: 700px;
}

#request.submitted > *, #request.submitted form {
    max-width: 300px;
}

#request form > * {
    padding: 5px;
    margin: 10px;
    max-width: none;
}

#request .modal-content {
    display: flex;
    flex-direction: row;
    max-width: 700px;
    justify-content: flex-end;
}

#demo-modal h1 {
    margin-top: 3px;
    margin-bottom: 3px;
}

#modal-close {
    width: 16px;
    height: 16px;
}

#modal-header {
    padding: 5px;
    margin: 10px;
    display: flex;
    flex-direction: row;
}

.modal-header {
    flex-direction: row;
    justify-content: space-between;
    display: flex;
    justify-content: flex-start;
}

#modal-title {
    width: 100%;
}

/* Request demo modal at lower widths */
@media only screen and (max-width: 862px) {
    #demo-modal {
        margin: 0 20px;
    }

}

@media only screen and (max-width: 367px) {
    #demo-modal {
        width: 100vw;
        height: 100vh;
        border-radius: 0px;
        
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    footer #cta-box {
        margin-top: 0;
        align-items: flex-end;
    }
}

/* All sub-medium devices  */
@media only screen and (max-width: 767px) {
    #how-it-works .feature {
        flex-direction: column !important;
    }
}



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

    }

    #hero-banner #strapline-container {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      max-width: none;
    }
    
    #hero-banner #strapline-container #strapline-info {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #strapline-info {
      margin-top: 0px;
      width: 100%;
    }

    .phone-strapline {
        display: block;
        margin: 10px 0px;
    }

    #strapline-info h1 {
      padding: 30px 0px;
      margin-bottom: 0px;
      margin-top: 0px;
      width: 100%;
    }

    #hero-banner #strapline-info p {
      padding: 25px 0px;
      margin: 0px;
      min-width: 100%;
      
    }

    #hero-banner h1 {
        max-width: none;
        padding-left: 3rem;
        padding-right: 3rem;
        box-sizing: border-box;
    }

    .greater-than-phone-res-image {
      display: none;
    }
    
    #phone-divider {
      width: 90%;
    }
}

@media only screen and (max-width: 1220px) {
    #header .logo {
        max-width: 230px;
    }
}
@media only screen and (max-width: 1400px) {
    #how-it-works .feature-phone {
      display: flex;
      flex-direction: column-reverse !important;
      width: 90%;
      margin-top: 0px;
      justify-content: space-evenly;
    }

    #header nav {
        display: none;
    }

    #hero-banner #header-image-container {
        display: none;
    }


    .feature-description h2 {
        margin: 5px 0px;
    }

    #header nav #main-nav, #header nav .contact {
        flex-direction: column;
    }

    #header nav.open {
        align-items: flex-end;
    }
    #header nav #main-nav{
        flex-direction: column;
        align-items: flex-end;
    }

    #header .hamburger {
        display: block;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (max-width: 1200px) {
    #main-intro ol {
        display: flex;
        flex-wrap: wrap;        
    }
}


@media only screen and (max-width: 367px) {
    #hero-banner h1 {
        padding-left: 0.5em;
        padding-right: 0.5em;
        box-sizing: border-box;
    }

    #hero-banner #strapline-info button {
        margin-left: 1em;
        margin-right: 1em;
    }

    #how-it-works h1 {
        padding-left: 0.5em;
        padding-right: 0.5em;
        box-sizing: border-box;
    }

    #how-it-works .feature-description {
        margin: 0;
        padding: 0;
    }

    #how-it-works .feature .feature-image {
        margin-bottom: 2em;
        padding: 0;
    }

    #tubes-model > * {
        margin: 25px 15px 0 15px;
        padding: 20px 15px;
    }

    .planContainer .plan {
        margin: 1em 0.5em;
    }
}


@media only screen and (max-width: 898px) {
    #tubes-model h2, 
    #tubes-model h1, 
    .feature-description h2 {
        padding-left: 0.5em;
        padding-right: 0.5em;
        box-sizing: border-box;
    }

    #hero-banner {
        padding: 20px 0px;
    }

    #strapline-container {
        padding: 0px 20px;
    }

    #strapline-container h1 {
        padding: 0px;
    }

    #main-intro ul {
        padding: 0px;
    }

    #main-intro #free-trial-cta {
        padding: 80px 0px;
    }

    #main-intro #conviction {
        padding: 0px 20px;
    }

    #main-intro #free-trial-cta #free-trial-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    #contact h2 {
        padding: 0px 20px;
    }

    #footer-nav {
        flex-direction: column;
    }
        

    
    #main-intro #free-trial-cta {
        flex-direction: column;
    }

    #main-intro #conviction {
        max-width: 100%;
    }

    .planContainer {
        margin: 0;
      }
      .planContainer .plan {
        width: 100%;
        margin: 1em 0;
        box-sizing: border-box;
      }
  }

@media only screen and (max-width: 550px) {
    #main-intro ol li span {
        display: none;
    }
    #main-intro ol li:before {
        display: none;
    }

    #main-intro ol li {
        min-width: 240px;
    }

    #main-intro p.much-bigger {
        padding: 10px;
    }

    #how-it-works .feature-phone {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }

    .fadeInUp {
        opacity: 1;
    }
}