.ui-state-error {
    outline: 2px solid red;
}

body {
    margin: 0;
    padding: 0;

    background-color: white;
}

/****************************** Globals ******************************/

header .logo, header .contact-us, nav .logo {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    display: inline-block;
    padding: 0px;
}

button:hover, div.features .container-image img.expandable:hover {
    -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.57);
    -moz-box-shadow:    0px 0px 0px 10px rgba(0,0,0,0.57);
    box-shadow:         0px 0px 10px rgba(0,0,0,0.57);
    transition: all 0.2s ease 0s;
}

button.primary:hover, input.primary:hover {
    background: white;
    border: 2px solid black;
    color: black;
}

button:active {
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
}

button {
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    outline: none;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
}

button.primary, input.primary {
    background-color: #207245;
    border: 2px solid #207245;
    color: white;
    cursor: pointer;
}
button.secondary {
    background-color: white;
    border: 2px solid black;
    color: black;
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.font1 { font-family: 'Roboto', sans-serif; }
.font2 { font-family: 'Farro', sans-serif; }

h1, h2, h3, h4, h5, h6 { margin: 0px; }
h1 { font-size: 45px; }
h2 { font-size: 38px; }
h3 { font-size: 30px; }
h4, div.features li { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

li { font-size: 22px; padding-bottom: 5px; }

.redcolor { color: red; }
.greencolor { color: #207245; }
.graycolor { color: gray; }
.center { text-align: center; }
.positionrelative { position: relative; }
.positionabsolute { position: absolute; }
.displayinline { display: inline; }
.displaynone { display: none; }
.cursorzoomin  { cursor: zoom-in; }
.cursorpointer { cursor: pointer; }
.cursorzoomout { cursor: zoom-out; }
.floatleft { float: left; }
.floatright { float: right; }
.fullwidth { width: 100%; }
.invisible { visibility: hidden; }

button.output {
    border: none;
    vertical-align: bottom;
    background: lightgrey;
    color: white;
    cursor: pointer;
    outline: none;
    padding: 0px;
    margin: 0px 15px 5px 0px;
    padding: 3px 5px;
}

button.output:hover, button.active {
    background-color: #767676;
}

/****************************** Header ******************************/

header { padding: 20px 20px 0px 20px; }
header .logo { max-width: 50%; width: 261px; }
header .logo img.main-logo {
    background: url(../img/Logo_FormulaChop_Play_Sprite_310_49.png);
    background-repeat: no-repeat;
    background-position: 0% 50%; /* horizontal shift, vertical shift */
    background-size: 118.8%; /* (fullwidth of sprite) / (imagewidth) */
    padding-bottom: 18.8%; /* imagewidth / imageheight */
    width: 100%;
    height: 0px;
}

header .contact-us {
    float: right;
    width: 300px;
    max-width: 30%;
    cursor: default;
}
header .contact-us img {
    width: 100%;
}

/****************************** Nav ******************************/

nav {
    z-index: 100;
    width: 100%;
    height: 60px;
    padding-top:    5px;
    padding-left:   20px;
    padding-bottom: 5px;
    padding-right:  20px;
    box-sizing: border-box;
    text-align: center;
    background-color: white;
    color: black;
    border-bottom: 1px solid black;
}

nav.sticky {
    position: fixed;
    top: 0;
}

nav .container {
    position: relative;
    height: 100%;
    width: 100%;
}

nav img {
    background: url(../img/Logo_FormulaChop_Play_Sprite_310_49.png);
    background-repeat: no-repeat;
    background-position: 0% 50%; /* horizontal shift, vertical shift */
    background-size: 632.7%; /* (fullwidth of sprite) / (imagewidth) */
    padding-bottom: 100%; /* imagewidth / imageheight */
    width: 100%;
    height: 0px;
}

nav .logo {
    width: 49px;
    height: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

nav ul {
    display: inline-block;
    list-style-type: none;
    margin: auto;
    padding: 0px;
    margin-top: 15px;
}
nav ul li {
    display: inline-block;
    margin: 0px 20px 0px 20px;
}
nav ul li a {
    text-decoration: none;
    cursor: pointer;
    padding: 10px 10px 3px 10px;
    color: black;
    font-size: 25px;
    font-weight: bold;
}
nav ul li a.active, nav ul li a:hover { border-bottom: 6px solid black; }

nav button.download {
    height: 100%;
    font-size: 20px;
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/****************************** Section ******************************/

section.sticky { padding-top: 60px; } /* Set to same as nav height */

section .button-container {
    margin-top: 10px;
    margin-bottom: 10px;
}

section button, .learn-more button, .landing-and-confirmation .form-submit, .view-documentation button {
    font-size: 24px;
    height: 55px;
    font-weight: normal;
}

section ul {
    margin: 5px;
    padding-left: 25px; /* same as li margin-left to remove wrapping on bullet points */
}

section li:before, #confirmation-page li:before, .landing-requirements li:before, .landing-ul li:before {
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-left: -25px; /* same as ul padding-left to remove wrapping on bullet points */
    margin-right: 5px;
    background-image: url(../img/Logo_FormulaChop_Play_Sprite_310_49.png);
    background-repeat: no-repeat;
    background-position: 0% 50%; /* horizontal shift, vertical shift */
    background-size: 632.7%; /* (fullwidth of sprite) / (imagewidth) */
}
section li, #confirmation-page li {
    list-style: none;
}

/*************** Home ***************/

div.home section.landing, div.home section.jungle, div.home section.hill {
    height: 650px;
    max-width: 1300px;
    margin: auto;
}

div.home section .container-title {
    width: 50%;
    padding: 20px 20px 0px 20px;
    box-sizing: border-box;
}
div.home section .container-image {
    width: 50%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;

    white-space: nowrap;
}
div.home section .container-button {
    width: 50%;
    padding: 0px 20px 20px 20px;
    box-sizing: border-box;
}

div.home section.landing .container-title  { float: left;  height: 70%; }
div.home section.landing .container-image  { float: right; }
div.home section.landing .container-button { float: left;  height: 30%; }

div.home section.jungle  .container-title  { float: right; height: 75%; }
div.home section.jungle  .container-title .container-top { height: 45%; }
div.home section.jungle  .container-title .container-bot { height: 55%; width: 90%; margin: auto; }
div.home section.jungle  .container-image  { float: left; }
div.home section.jungle  .container-button { float: right; height: 25%; }

div.home section.hill    .container-title  { float: left;  height: 80%; }
div.home section.hill    .container-title .container-top { height: 50%; }
div.home section.hill    .container-title .container-bot { height: 50%; width: 80%; margin: auto; }
div.home section.hill    .container-image  { float: right; }
div.home section.hill    .container-button { float: left;  height: 20%; }

div.home section .container-image .for-vertical-align {
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
.load-image-now { display: none; } /* used to load the preload an image in HTML so it can be accessed as a sprite in the css. */

div.home section .container-image img:last-child {
    width: 100%;
    max-height: 100%;
    vertical-align: middle;
    display: inline-block;
    background: url(../img/Section_Landing_Page_Sprite_1830_481_Greyscale.png);
    background-repeat: no-repeat;
    background-size: 300%; /* (fullwidth of sprite) / (imagewidth) - NOTE: this works for all section images because the widths are the same */
    height: 0px;
}

div.home section .container-image img#cutting-board {
    background-position: 0% 50%; /* horizontal shift, vertical shift */
    padding-bottom: 78.8%; /* (imageheight) / (imagewidth) - used to determine the height of the image that is based on the width */
}
div.home section .container-image img#jungle {
    background-position: 50% 50%; /* horizontal shift, vertical shift */
    padding-bottom: 57.7%; /* (imageheight) / (imagewidth) - used to determine the height of the image that is based on the width */
}
div.home section .container-image img#hill {
    background-position: 100% 50%; /* horizontal shift, vertical shift */
    padding-bottom: 57.1%; /* (imageheight) / (imagewidth) - used to determine the height of the image that is based on the width */
}

.play-button {
    background: url(../img/Logo_FormulaChop_Play_Sprite_310_49.png);
    background-repeat: no-repeat;
    background-position: 100% 50%; /* horizontal shift, vertical shift */
    background-size: 632.7%; /* (fullwidth of sprite) / (imagewidth) */
    padding-bottom: 6%; /* (imageheight) / (width of the image and entire text) - may need to estimate this? */
    width: 25px;
    height: 0px;
    vertical-align: middle;
}

header .play-button           { padding-bottom: 14%; }
.features-header .play-button { padding-bottom: 4%; }

.play-button-anchor:hover {
    text-decoration: underline;
    cursor: pointer;
}
.play-button-anchor {
    text-decoration: none;
    color: black;
}

div.home .play-button-anchor, .features-header .play-button-anchor {
    font-size: 18px;
}

div.home section .container-title .contents {
    width: 85%;
    height: 100%;
    padding-top: 50px;
    padding-left: 10%;
    box-sizing: border-box;
}

div.home section .container-button .contents {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/****************************** Features ******************************/
.features-header .contents { padding: 30px 0px; }

div.features {
    max-width: 1300px;
    margin: auto;
}
div.features section {
    width: 100%;
    padding: 10px 10px 40px 10px;
    box-sizing: border-box;
    overflow: auto;
}
div.features section img {
    width: 100%;
    height: unset;
}

div.features section.feature-other .container-text { width: 100%; }
div.features section .container-text {
    float: left;
    width: 40%;
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
}
div.features section div.container-text.fullwidth, div.features section div.container-image.fullwidth  { width: 100%; }

div.features section .container-image {
    float: right;
    width: 60%; 
    padding: 10px 10px 10px 10px;
    box-sizing: border-box;
}
div.features section .container-image           img.expandable { cursor: zoom-in; }
div.features section .container-image.fullwidth img.expandable { cursor: zoom-out; }

div.features section .expandshrinklarge {
    width: 50px;
    height: 50px;
    right: 25px;
    bottom: 25px;
}

div.features section .expandshrinksmall {
    width: 25px;
    height: 25px;
    right: 15px;
    bottom: 15px;
}

/****************************** Subscribe ******************************/

div.subscribe { padding-top: 50px; padding-bottom: 50px; }

div.subscribe section.subscribe {
    max-width: 800px;
    margin: auto;
    overflow: auto;
}
div.subscribe section.subscribe button { font-size: 20px; }

div.subscribe section.subscribe .container-d {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}
div.subscribe section.subscribe .container-d img {
    width: 100%;
}

div.subscribe section.subscribe .container-e {
    margin-bottom: 50px;
    width: 100%;
    height: 55px;
    box-sizing: border-box;
}
div.subscribe section.subscribe .container-e .third {
    width: calc(100% / 3);
    height: 100%;
    float: left;
}
div.subscribe section.subscribe .container-f .half, .modal .half {
    width: 50%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
}

div.subscribe section.subscribe .container-f { padding: 50px 0px 30px 0px; }

/****************************** Documentation ******************************/

section.documentation .button-container { margin: 10px; }
section.documentation .button-container button { margin: 0px 30px; }

section.documentation iframe#sphinx {
    width: 100%;
    display: block;
    border: none;
}

/****************************** Modal ******************************/
.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 3px solid #207245;
    box-sizing: border-box;
    border-radius: 0.5rem;
}
.modal-content .header {
    font-size: 20px;
    background: #207245;
    color: white;
    padding: 10px;
}
.modal-content .body {
    padding: 15px 25px;
    overflow: auto;
    width: 100%;
    box-sizing: border-box;
}

.modal-content .body, #trial-dialog .modal-content input {
    font-size: 25px;
    font-weight: bold;
}

.modal-content .text-container {
    padding: 15px 0px 15px 0px;
    line-height: 1.3;
}

#trial-dialog table#trial td:first-child {
    padding-right: 10px;
}

#trial-dialog .terms-container {
    padding: 30px 0px 20px 0px;
    font-size: 16px;
    line-height: 1.3;
}
#trial-dialog .terms-container a {
    color: blue;
    border-bottom: 1px solid blue;
    text-decoration: none;
    cursor: pointer;
}

.modal-content .footer {
    float: right;
    padding-top: 15px;
}

.modal .header .close-button {
    font-size: 30px;
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
}
.modal .header .close-button:hover {
    background-color: darkgray;
}

.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.modal #input-price-calculator {
    font-size: 25px;
    width: 150px;
    display: inline-block;
    border: 1px solid black;
}

.modal button {
    font-size: 25px;
    height: 50px;
}
.modal button.smallbutton, nav button.download.smallbutton { font-size: 18px; }
button.primary #license-count { font-size: smaller; }

.modal #inputagreeterms { font-size: 16px; }

table.volume-discount {
    margin: auto;
    border-collapse: collapse;
    margin-bottom: 30px;
}

table.volume-discount th {
    border-bottom: 2px solid darkgrey;
    padding: 10px 80px 10px 10px;
}

table.volume-discount th:first-child { padding-left: 10px; }
table.volume-discount th:last-child { padding-right: 10px; }
table.volume-discount td {
    border-bottom: 1px solid lightgrey;
    padding: 10px 0px 10px 15px;
}
table.volume-discount td:first-child { padding-left: 15px; }
table.volume-discount td:last-child {
    color: green;
    padding-right: 15px;
}

div.price-calculator {
    margin-top: 30px;
    margin-bottom: 30px;
    background: lightgrey;
    border: 2px solid black;
    padding: 10px;
}

table.table-calculator td { padding-right: 15px; }
table.table-calculator td.price { text-align: right; }

/************************************************************/
/************************************************************/
/************************************************************/


@media only screen and (max-width: 1250px) {
    header { padding: 15px 15px 0px 15px; }

    nav {
        padding: 5px 15px 5px 15px;
        height: 55px;
    }
    nav .logo { width: 44px; }
    nav ul { margin-top: 17px; }
    nav ul li { margin: 0px 10px; }
    nav ul li a {
        padding: 5px 5px 3px 5px;
        font-size: 20px;
    }

    nav button.download, div.subscribe section.subscribe button { font-size: 18px; }

    section.sticky { padding-top: 55px; } /* Set to same as nav height */
    
    div.home section.landing, div.home section.jungle, div.home section.hill { height: 500px; }

    div.home section .container-title  { padding: 10px 10px 0px 10px; }
    div.home section .container-image  { padding: 10px 10px 10px 10px; }
    div.home section .container-button { padding: 0px 10px 10px 10px; }

    div.home section .container-title .contents {
        width: 90%;
        padding-top: 35px;
        padding-left: 7.5%;
    }

    .play-button { width: 22px; }
    div.home .play-button-anchor, .features-header .play-button-anchor { font-size: 16px; }

    div.home section.hill .container-title                { height: 80%; }
    div.home section.hill .container-title .container-top { height: 45%; }
    div.home section.hill .container-title .container-bot { height: 55%; width: 75%; }

    div.features section .expandshrinklarge {
        width: 40px;
        height: 40px;
        right: 20px;
        bottom: 20px;
    }

    div.features section .expandshrinksmall {
        width: 20px;
        height: 20px;
        right: 10px;
        bottom: 10px;
    }

    div.subscribe section.subscribe .container-e { margin-bottom: 40px; }
    div.subscribe section.subscribe .container-f { padding: 40px 0px 24px 0px; }
    
    section button, .modal button, .learn-more button, .view-documentation button {
        font-size: 22px;
        height: 50px;
    }
    .modal button.smallbutton, nav button.download smallbutton { font-size: 15px; }

    button {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    h3 { font-size: 25px; }
    h4, div.features li { font-size: 20px; }
    h5 { font-size: 16px; }
    h6 { font-size: 14px; }

    li { font-size: 19px; }
}


@media only screen and (max-width: 1000px) {
    header { padding: 10px 10px 0px 10px; }

    nav {
        padding: 5px 10px 5px 10px;
        height: 50px;
    }
    nav .logo { width: 39px; }
    nav ul { margin-top: 14px; }
    nav ul li { margin: 0px 7.5px; }
    nav ul li a {
        padding: 5px 5px 3px 5px;
        font-size: 18px;
    }

    nav button.download, div.subscribe section.subscribe button { font-size: 16px; }

    section.sticky { padding-top: 50px; } /* Set to same as nav height */
    
    div.home section.landing, div.home section.jungle, div.home section.hill { height: 400px; }
    
    div.home section .container-title  { padding: 5px 5px 0px 5px; }
    div.home section .container-image  { padding: 5px 5px 5px 5px; }
    div.home section .container-button { padding: 0px 5px 5px 5px; }

    div.home section.hill .container-title .container-top { height: 40%; }
    div.home section.hill .container-title .container-bot { height: 60%; }
    
    div.home section .container-title .contents {
        width: 98%;
        padding-top: 15px;
        padding-left: 2%;
    }

    .play-button { width: 20px; }
    div.home .play-button-anchor, .features-header .play-button-anchor { font-size: 14px; }

    div.home section.jungle .container-title .container-bot { width: 85%; }
    div.home section.hill   .container-title .container-bot { width: 75%; }

    div.subscribe section.subscribe .container-e { margin-bottom: 20px; }
    div.subscribe section.subscribe .container-f { padding: 20px 0px 16px 0px; }
    
    section button, .modal button, .learn-more button, .view-documentation button {
        font-size: 19px;
        height: 45px;
    }
    .modal button.smallbutton, nav button.download.smallbutton { font-size: 13px; }


    button {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    h1 { font-size: 35px; }
    h2 { font-size: 29px; }
    h3 { font-size: 22px; }
    h4, div.features li { font-size: 18px; }
    h5 { font-size: 14px; }
    h6 { font-size: 13px; }

    li { font-size: 16px; }
}


@media only screen and (max-width: 750px) {
    
    header { padding: 5px 5px 0px 5px; }

    nav {
        padding: 5px 5px 5px 5px;
        height: 40px;
    }
    nav .logo { width: 29px; }
    nav ul {
        position: absolute;
        bottom: -1px;
        left: 50px;
    }
    nav ul li { margin: 0px 1px; }
    nav ul li a {
        padding: 2px 2px 3px 2px;
        font-size: 8px;
    }
    nav ul li a.active, nav ul li a:hover { border-bottom: 3px solid black; }

    nav button.download { font-size: 14px; }

    section.sticky { padding-top: 40px; } /* Set to same as nav height */
    
    div.home section.landing, div.home section.jungle, div.home section.hill {
        height: 500px;
        max-width: 400px;
    }

    div.home section .container-title {
        width: 100%;
        padding: 2px 2px 0px 2px;
    }
    div.home section .container-image {
        width: 100%;
        padding: 1% 15% 1% 15%;
    }
    div.home section .container-button {
        width: 100%;
        padding: 0px 2px 2px 2px;
    }

    div.home section.landing .container-title  { height: 35%; }
    div.home section.landing .container-image  { height: 47%; }
    div.home section.landing .container-button { height: 18%; }

    div.home section.jungle  .container-title  { height: 46%; }
    div.home section.jungle  .container-title .container-top { height: 45%; }
    div.home section.jungle  .container-title .container-bot { height: 55%; width: 75%; }
    div.home section.jungle  .container-image  { height: 37%; }
    div.home section.jungle  .container-button { height: 17%; }

    div.home section.hill    .container-title  { height: 50%; }
    div.home section.hill    .container-image  { height: 38%; }
    div.home section.hill    .container-button { height: 12%; }
    
    div.home section .container-title .contents {
        width: 99%;
        padding-top: 10px;
        padding-left: 1%;
    }

    .play-button { width: 18px; }
    div.home .play-button-anchor, .features-header .play-button-anchor { font-size: 13px; }

    section li:before {
        height: 12px;
        width: 12px;
    }

    .features-header .contents { padding: 20px 0px; }

    div.features section { padding: 5px 5px 20px 5px; }

    div.features section .container-text, div.features section .container-image   {
        width: 100%;
        padding: 5px 5px 5px 5px;
    }

    div.features section .container-image           img.expandable:hover { box-shadow: none; }
    div.features section .container-image           img.expandable { cursor: unset; }
    div.features section .container-image.fullwidth img.expandable { cursor: unset; }

    div.features section .expandshrinklarge { display: none; }
    div.features section .expandshrinksmall { display: none; }

    div.subscribe { padding-top: 25px; }
    
    div.subscribe section.subscribe button {
        height: 30px;
        font-size: 12px;
        padding-left: 2px;
        padding-right: 2px;
    }

    div.subscribe section.subscribe .container-e { margin-bottom: 10px; }
    div.subscribe section.subscribe .container-f { padding: 10px 0px 8px 0px; }

    section.documentation .button-container button { margin: 5px 10px; }
    
    .modal-content #input-price-calculator { width: 50px; }
    
    .modal-content .header { font-size: 16px; }
    .modal-content .header .close-button { font-size: 20px; }

    .modal-content .body { padding: 8px 12.5px; }

    .modal-content .body, #trial-dialog .modal-content input, .modal-content #input-price-calculator  { font-size: 15px; }
    
    .modal-content .text-container { padding: 5px 0px 5px 0px; }

    #trial-dialog .terms-container {
        padding: 15px 0px 10px 0px;
        font-size: 12px;
    }

    table.volume-discount    { margin-bottom: 10px; }    
    table.volume-discount th { padding: 5px 40px 5px 5px; }
    table.volume-discount td { padding: 5px 0px 5px 10px; }

    table.table-calculator td { padding-right: 5px; }
    
    div.price-calculator {
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px;
    }

    section button, .modal button, .learn-more button, .view-documentation button {
        font-size: 16px;
        height: 40px;
    }
    .modal button.smallbutton, nav button.download.smallbutton { font-size: 11px; }

    button {
        padding-left: 5px;
        padding-right: 5px;
    }

    h1 { font-size: 30px; }
    h2 { font-size: 25px; }
    h3 { font-size: 19px; }
    h4, div.features li { font-size: 16px; }
    h5 { font-size: 13px; }
    h6 { font-size: 12px; }

    li { font-size: 14px; padding-bottom: 0px; }
}

/****************************** Landing Page + Confirmation Page ******************************/

#landing-page *, #confirmation-page * {
    box-sizing: border-box;
}

#landing-page .slogan-wrapper { padding-top: 20px; }
#confirmation-page .slogan-wrapper { padding-top: 120px; }
.landing-and-confirmation .slogan-wrapper {
    padding-left: 15%;
    padding-right: 15%;
    padding-bottom: 40px;
}

#landing-page .content-wrapper {
    padding-left: 3%;
    padding-right: 3%;
    padding-bottom: 50px;
}

.landing-and-confirmation .margins {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

#landing-page .content-left-wrapper {
    width: 60%;
    display: inline-block;
    padding-left: 2%;
    padding-right: 2%;
}

#landing-page .content-right-wrapper {
    width: 40%;
    float: right;
}

#landing-page .content-right {
    background: #cccccc;

    -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,0.57);
    -moz-box-shadow:    0px 0px 0px 10px rgba(0,0,0,0.57);
    box-shadow:         0px 0px 10px rgba(0,0,0,0.57);
    transition: all 0.2s ease 0s;
}

#landing-page .tab {
    overflow: hidden;
    background-color: grey;
}

#landing-page .tab button {
    background-color: inherit;
    color: white;
    float: left;
    outline: none;
    cursor: pointer;
    padding: 15px 5px;
    transition: 0.3s;
}

#landing-page .tab button:hover {
    background-color: white;
    color: black;
}

#landing-page .tab button.active {
    background-color: #cccccc;
    color: black;
    border: 2px solid grey;
    border-bottom: none;
    
}

#landing-page .tab-content {
    display: none;

    border: 2px solid grey;
    border-top: none;

    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 2.5%;
    padding-right: 2.5%;

    overflow: auto;
}

#landing-page .tab-links {
    width: 50%;
    border: none;
    border-bottom: 2px solid grey;
    font-size: 20px;
    border-radius: 0px;
}

#confirmation-page .wrapper {
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 40px;
    padding-bottom: 40px;
}

textarea {
    padding-top: 5px;
    resize: vertical;
    height: 200px;
    min-height: 40px;
}

#terms-container {
    font-size: 12px;
}
#terms-container input {
    margin-top: 10px;
}

.input-container {
    margin-top: 20px;
    font-size: 18px;
}

.input-container .small-text {
    font-size: 14px;
}

.landing-and-confirmation .learn-more, .view-documentation button {
    margin-top: 40px;
    margin-bottom: 40px;
}

.landing-and-confirmation input,
.landing-and-confirmation textarea {
    width: 100%;
    padding-left: 10px;
    font-weight: bold;
    font-size: 18px;
}

.landing-and-confirmation input {
    height: 40px;
}

form input:valid, form textarea:valid {
  border: 2px solid #207245;
}

.landing-and-confirmation .form-submit {
    width: 100%;
}

.landing-and-confirmation .landing-requirements { margin-top: 20px; }
.landing-and-confirmation .landing-requirements ul, .landing-ul {
    margin: 0px;
    list-style-type: none;
    padding-left: 10px;
}
.landing-and-confirmation .landing-requirements li { font-size: 18px; }

.landing-and-confirmation p { font-size: 22px;  margin-top: 15px; margin-bottom: 15px; }
.landing-and-confirmation li { font-size: 22px; }
.landing-and-confirmation h1.xlfont { font-size: 50px; }
.landing-and-confirmation h1 { font-size: 40px; }
.landing-and-confirmation h2 { font-size: 35px; }
.landing-and-confirmation h3 { font-size: 30px; }
.landing-and-confirmation h4 { font-size: 25px; }
.landing-and-confirmation h5 { font-size: 20px; }
.landing-and-confirmation h6 { font-size: 15px; }

@media only screen and (max-width: 750px) {
    header { font-size: 12px; }
    header .play-button { width: 15px; }

    #landing-page .slogan-wrapper { padding-top: 10px; }
    #confirmation-page .slogan-wrapper { padding-top: 80px; }
    .landing-and-confirmation .slogan-wrapper {
        padding-bottom: 20px;
    }

    #confirmation-page .wrapper {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #landing-page .content-left-wrapper {
        width: 100%;
    }
    
    #landing-page .content-right-wrapper {
        width: 100%;
        max-width: 500px;
        margin: auto;
        float: none;
    }

    #landing-page .form-submit {
        height: 40px;
        font-size: 20px;
    }

    .landing-and-confirmation .learn-more, .view-documentation button {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .landing-and-confirmation p { font-size: 18px; margin-top: 11px; margin-bottom: 11px; }
    .landing-and-confirmation li { font-size: 16px; }

    .landing-and-confirmation h1.xlfont { font-size: 40px; }
    .landing-and-confirmation h1 { font-size: 30px; }
    .landing-and-confirmation h2 { font-size: 25px; }
    .landing-and-confirmation h3 { font-size: 20px; }
    .landing-and-confirmation h4 { font-size: 18px; }
    .landing-and-confirmation h5 { font-size: 16px; }
    .landing-and-confirmation h6 { font-size: 14px; }
}

/********************** GOOGLE FONTS **********************/

/* latin-ext
@font-face {
  font-family: 'Farro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Farro Regular'), local('Farro-Regular'), url(https://fonts.gstatic.com/s/farro/v1/i7dEIFl3byGNHaVEFruGcQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*/
/* latin */
@font-face {
  font-family: 'Farro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Farro Regular'), local('Farro-Regular'), url(https://fonts.gstatic.com/s/farro/v1/i7dEIFl3byGNHaVKFrs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxFIzIFKw.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
*/
/* cyrillic
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxMIzIFKw.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
*/
/* greek-ext
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxEIzIFKw.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
*/
/* greek
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxLIzIFKw.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
*/
/* vietnamese
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxHIzIFKw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
*/
/* latin-ext
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxGIzIFKw.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*/
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}