@charset "UTF-8";

/* Colors
Dark purple: #203573;
Lighter purple: #3257A3;
Light grey: #F1F3F7
Dark grey: #818AA1;
*/

.clearfix::after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

a, a:visited {text-decoration: none; color: #0080d6}

h1, h2, h3, h4, h5, h6, p, ul, li {padding: 0; margin: 0; color: #203573;}

body {background: white; font-family: 'Outfit', sans-serif; margin: 0; padding: 0}

.float-left {float: left;}
.float-right {float: right;}
.center {text-align: center;}
p, li {color: black;}

.text-content p.text-lg, #landing-splash p {font-size: 23px; font-weight: 300}

p.smaller {font-size: 18px; weight: 300;}

h2 {font-weight: 500; font-size: 40px;}
h2.white-big {font-weight: 700; font-size: 55px; color: white;}
h3 {font-size: 22px;}

hr {background: linear-gradient(90deg,rgba(89, 164, 151, 1) 0%, rgba(108, 175, 82, 1) 100%); border: none; height: 9px; width: 60px; margin-left: 0; margin-right: auto; margin: 30px 0;}

/**** Buttons ****/
a.blue-green, .submit-button {color: white; background: linear-gradient(90deg,rgba(89, 164, 151, 1) 0%, rgba(108, 175, 82, 1) 100%);}
a.blue-green:hover, .submit-button:hover {color: white; background: linear-gradient(90deg,rgba(99, 165, 150, 1) 0%, rgba(132, 188, 99, 1) 100%);}

a.button, .submit-button {display: inline-block; padding: 15px 25px; text-transform: uppercase; font-size: 15px; letter-spacing: 0.05em; font-weight: 600;}


/* Styles for items on blue-gradient background blocks */
.landing-splash-wrapper h3 {font-size: 24px; font-weight: 500; margin: 0 0 20px 0;}
.landing-splash-wrapper h3, .landing-splash-wrapper p, .landing-splash-wrapper h4, .landing-splash-wrapper li, .landing-splash-wrapper h5 {color: white;}
#landing-splash h1 {color: white; font-size: 48px; font-weight: 500; margin: 0 0 20px 0;}
.landing-splash-wrapper p {margin-bottom: 20px;}

/*** Wrappers ****/
#big-wrapper {}

.landing-splash-wrapper {
    background: linear-gradient(180deg,rgba(32, 53, 115, 1) 0%, rgba(50, 87, 163, 1) 100%);
    display: block;
    border: 1px solid #25356f;
}

.inner-w {width: 75%; margin: 0 auto;}


/*** header and nav ***/
#header-nav-wrapper {background: #203573; padding: 30px 0 0 0;}
#header-nav {width: 90%; margin: 0 auto;}
#header-nav a#logo {
    background: url("/static/landing/images/match-synergy-logo.a77b2aed278e.svg") no-repeat;
    display: block;
    width: 370px;
    height: 60px;
    text-indent: -3333px;
    margin-bottom: 20px;
    float: left;
}

#header-nav ul#nav {text-transform: uppercase; font-size: 14px; letter-spacing: .04em; font-weight: 600; float: right; width: 50%; text-align: right;}
ul#nav li {display: inline; margin-right: 10px;}
ul#nav li a {display: inline-block; text-align: center; color: #fff; padding: 7px 15px;}
ul#nav li a:visited {color: #FFF;}
ul#nav li.white-border-link a {color: white; border: 3px solid white;}
ul#nav li.white-bg-link a {background: white; border: 3px solid white; color: #203573;}


/**** Contact Page ****/
.white-panel {margin-bottom: 150px; background: white; border-radius: 20px; position: top; padding: 50px;}
#contact-page {padding: 60px;}
#contact-page h2 {padding: 0;}
#contact-page h3 {color: #203573; font-size: 35px; text-align: center; font-weight: 600;}
#contact-page .contact-page-header {text-align: center; width: 90%; margin: 0 auto; padding: 30px 0 0 0;}
#contact-page .contact-page-header p {font-size: 20px; margin: 20px 0 40px; line-height: 1.4em; font-weight: 300;}
#contact-page .contact-page-header hr {margin: 0 auto;}
#contact-page .submit-button {border: none; display: block; cursor: pointer; margin-top: 40px;}
#contact-page .form-field {
    width: 90%;
    font-family: 'Outfit', sans-serif;
    margin: 0;
    padding: 12px 12px;
    font-size: 18px;
    color: #444649;
    border: 1px solid #afb0b2;
    border-radius: 3px;
    background-color: white;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08);
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

#contact-page label, #contact-page .question {color: #203573; margin: 45px 0 3px 0; font-size: 17px; font-weight: 600; display: block;}

.required {color: #B91C1C;}

#contact-page .checkbox-group label {color: #444649; margin: 15px 0 3px 0; font-weight: 400;}

/* Success message */
.success-message {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin: 20px 0;
}
.success-message h3 {color: #15803d; font-size: 28px; margin-bottom: 15px;}
.success-message p {color: #166534; font-size: 18px; font-weight: 300;}

/* Error styles */
.field-error {color: #B91C1C; font-size: 14px; margin-top: 4px; display: block;}
#contact-page .form-field.error {border-color: #B91C1C;}


/**** Footer ****/
#footer {background: #F1F3F7;}
#footer .inner-w p.bolder {font-weight: 400;}
#footer .inner-w p {font-weight: 300; font-size: 16px;}
#footer .inner-w {padding: 60px 0;}
#footer .col-1 img {width: 275px;}
#footer .col-1, #footer .col-2 {width: 35%; float: left; padding-right: 25px;}
#footer .col-3 {width: 20%; float: right;}
#footer .col-3 {float: right;}
#footer .col-3 a {display: block;}
#footer .col-3 ul {float: right;}
#footer .col-3 li {display: inline-block;}
#footer a.icon-linkedin {width: 24px; height: 24px; background: url("/static/landing/images/icon-linkedin.3936b6674800.svg") no-repeat; margin-right: 20px;}
#footer a.icon-youtube {width: 31px; height: 21px; background: url("/static/landing/images/icon-youtube.06ca27870519.svg") no-repeat;}


/* Media Queries */
@media only screen and (max-width: 1200px) {
    .messaging {float: none; width: 100%;}
    #splash-image img {display: none;}
    #section-1 img {float: none;}
    #section-2 .text-content {padding: 60px 0; width: 100%; float: none;}
    #section-2 img {position: relative; bottom: 0; right: 0; margin-top: 30px; width: 100%;}
    #section-1 .text-content {width: 100%; margin-left: 0px; float: none;}
    #section-3 .icon-wrapper li {width: 80%;}
    #section-5 .text-content {width: 95%;}
    #section-5 .col-1, #section-5 .col-2 {display: block; padding-left: 35px;}
    #section-6 .col-1 {width: 100%; float: none; margin-bottom: 35px;}
    #section-6 .col-2 {width: 100%; float: none;}
    #section-8 .text-content {width: 100%;}

    #contact-page {padding-left: 40px; padding-right: 20px;}
    #contact-page h2 {font-size: 40px;}
    #contact-page .inner-w {width: 90%;}
    #contact-page .contact-page-header {width: 100%;}
    #contact-page h3 {color: #203573; font-size: 40px; text-align: center; font-weight: 500;}
    .white-panel {padding: 30px;}

    #footer .inner-w {padding: 35px 0;}
    #footer .col-1, #footer .col-2 {width: 100%; float: none; padding: 0 0 20px 0;}
    #footer .col-3 {width: 100%; float: none;}
    #footer .col-3 ul {float: none;}
}