/* Font */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Roboto:wght@300;400;700&display=block');

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

html, body {
    font-family: 'Roboto', 'Helvetica', sans-serif;
    color: #ffffff;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

.wrapper {
    margin: 0 auto;
    padding: 0 50px;
    width: 100%;
    max-width: 1440px;
    box-sizing: border-box;
}

.bg {
    position: relative;
    background: rgb(0,125,149);
    background: linear-gradient(30deg, rgba(0,70,94,1) 0%, rgba(0,125,149,1) 60%, rgba(0,157,180,1) 100%);
}

.bg:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 37%;
    height: 100%;
    background-image: url(../images/website-planning-guide-bg.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
}

.header {
    padding: 25px 0 0;
    position: relative;
    z-index: 1;
}

.header:after {
    content: "";
    display: table;
    clear: both;
}

.social {
    position: relative;
    float: right;
    font-size: 30px;
}

.social a {
    display: inline-block;
    color: #fff;
    margin: 0 5px;
}

.social a:hover {
    color: #ddd;
}

.logo {
    position: relative;
    float: left;
    width: 208px;
}

.logo img {
    max-width: 100%;
    height: auto;
}

.title {
    position: relative;
    padding: 50px 0 25px;
    clear: both;
}

.title h1 {
    font-family: 'Anton', 'Helvetica', sans-serif;
    color: #fff;
    font-weight: 400;
    font-size: 90px;
    line-height: 90px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.thanks .title {
    padding: 200px 0;
    max-width: 990px;
}

.thanks .title h1 strong {
    display: block;
    font-weight: bold;
    font-size: 55px;
    line-height: 55px;
}

.thanks .title p {
    font-weight: 300;
    font-size: 25px;
    line-height: 1.3;
    color: #fff;
    max-width: 900px;
}

.thanks .title p a {
    color: #fff;
}

.thanks .title p a strong {
    font-weight: bold;
}

.content {
    position: relative;
    padding: 0 0 50px;
    z-index: 1;
}

.content:after {
    content: "";
    display: table;
    clear: both;
}

.content .right-col {
    position: relative;
    float: right;
    width: 40%;    
}

.content .right-col img {
    width: 100%;
    height: auto;
}

.content .left-col {
    position: relative;
    float: left;
    width: 60%;
    padding-right: 50px;
    box-sizing: border-box;
}

.content .left-col p {
    font-weight: 300;
    line-height: 1.5;
}

.content .left-col h2 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
    margin: 25px 0 10px;
}

.content .form-row {
    margin-bottom: 25px;
}

.content p.label {
    display: none;
}

.content input[type="text"],
.content input[type="email"] {
    width: 100%;
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 2px solid #7EA8B4;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #7EA8B4;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7EA8B4;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #7EA8B4;
}

.content .checkbox {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

.content .checkbox input {
    position: absolute;
    top: 2px;
    left: 7px;
    cursor: pointer;
}

.content .checkbox span {
    font-size: 14px;
    line-height: 1.3;
}

.content .checkbox span a {
    color: #fff;
    text-decoration: underline;
}

.content .checkbox span a:hover {
    text-decoration: none;
}

.content .submit {
    width: 100%;
    text-align: right;
}

.content .submitbtn {
    display: inline-block;
    border: 2px solid #559FAF;
    border-radius: 35px;
    padding: 5px;
}

.content .submitbtn input {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #559FAF;
    border: 2px solid #559FAF;
    text-align: center;
    padding: 10px 25px;
    border-radius: 25px;
    cursor: pointer;
}

.btn {
    display: inline-block;
    border: 2px solid #559FAF;
    border-radius: 35px;
    padding: 5px;
}

.btn:hover {
    text-decoration: none;
}

.btn span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #559FAF;
    border: 2px solid #559FAF;
    text-align: center;
    padding: 10px 25px;
    border-radius: 25px;
    cursor: pointer;
}

.footer {
    background: #F7F7F7;
    color: #141D1E;
    padding: 20px 0;
}

.footer .signup-btn {
    float: right;
    width: 320px;
    padding-left: 30px;
    margin-top: 30px;
}

.footer .signup-btn a {
    display: block;
    border: 2px solid #00A6BC;
    border-radius: 35px;
    padding: 5px;
}

.footer .signup-btn a:hover {
    text-decoration: none;
}

.footer .signup-btn a span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #00A6BC;
    background-color: #BCE4EA;
    border: 2px solid #00A6BC;
    text-align: center;
    padding: 10px;
    border-radius: 25px;
}

.footer .footer-logo {
    margin-bottom: 10px;
}

.footer p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

.footer p span {
    white-space: nowrap;
}

.footer p a {
    color: #141D1E;
    white-space: nowrap;
}

.errorrmsg {
    padding: 20px 0;
    background: #cc0000;
}

.errorrmsg p {
    color: #fff;
    margin: 0;
    padding: 0;
}

@media (max-width: 1249px) {
    .title h1 {
        font-size: 70px;
        line-height: 70px;
    }
}
@media (max-width: 999px) {
    .bg:after {
        width: 30%;
    }
    .title h1 {
        font-size: 55px;
        line-height: 55px;
    }
    .content .right-col {
        width: 30%;
    }
    .content .left-col {
        width: 70%;
    }
}
@media (max-width: 889px) {
    .wrapper {
        padding: 0px 25px;
    }
}
@media (max-width: 839px) {
    .footer .signup-btn {
        width: 200px;
    }
    .footer .signup-btn a {
        border-radius: 40px;
    }
    .footer .signup-btn a span {
        font-size: 16px;
        border-radius: 30px;
    }
}
@media (max-width: 767px) {
    .bg:after {
        width: 40%;
    }
    .title {
        padding: 50px 0 10px;
    }
    .title h1 {
        max-width: 500px;
    }
    .content .right-col {
        width: 50%;
        padding: 0 0 25px 25px;
        box-sizing: border-box;
    }
    .content .left-col {
        float: none;
        width: 100%;
        padding-right: 0;
    }
}
@media (max-width: 599px) {
    .logo {
        width: 150px;
    }
    .thanks .title p {
        font-size: 20px;
    }
}
@media (max-width: 549px) {
    .footer .signup-btn {
        float: none;
        padding-left: 0;
        margin-top: 0;
        margin-bottom: 20px;
        width: 270px;
    }
}
@media (max-width: 469px) {
    .bg:after {
        width: 50%;
    }
}
@media (max-width: 419px) {
    .title {
        padding: 50px 0 0;
    }
    .title h1 {
        font-size: 45px;
        line-height: 45px;
    }
}
@media (max-width: 399px) {
    .social {
        font-size: 20px;
        margin-right: -10px;
        padding: 12px 0 0;
    }
    .social a {
        margin: 0 2px;
    }
    .content .right-col {
        padding: 0 0 10px 10px;
    }
}
@media (max-width: 369px) {
    .title h1 {
        font-size: 40px;
        line-height: 40px;
    }
}