@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;}
h3 {font-size: 22px;}

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

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

a.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;}


/**** splash hero *****/
#landing-splash {}
.messaging {float: left; width: 50%; padding: 60px 0 60px 0;}
.messaging a.button {margin: 30px 0 0 0;}
#splash-image {width: 48%; float: right;}
#splash-image img {width: 95%;}


/**** content ******/

/* section 1 */
.content-wrapper {margin: 60px 0;}
#section-1 .text-content {width: 54%; margin-left: 10px; margin-bottom: 60px; float: left;}
#section-1 img {float: left;}
.text-content h2 {line-height: 1.2em;}
.text-content p, .text-content li {font-weight: 300; font-size: 19px; line-height: 1.4em;}
#section-1 .text-content ul {margin-left: 25px;}
#section-1 .text-content li {margin: 15px 0 0 0;}

/* section 2 */
#section-2 {min-height: 250px;}
#section-2 .inner-w {position: relative;}
#section-2 .text-content {padding: 60px 0; width: 40%; float: left;}
#section-2 img {position: absolute; top:-30px; bottom: 0; right: 0;}
#section-2 h3 {color: white;}

/* section 3 - Features */
#section-3 .text-content h2 {text-align: center; margin-bottom: 30px;}
#section-3 .text-content hr, #section-5 .text-content hr {margin: 0 auto;}
#section-3 .icon-wrapper {}
#section-3 .icon-wrapper img {width: 138px;}
#section-3 .text-content .icon-wrapper ul {display: inline-block; text-align: center; margin: 0 auto;}
#section-3 .icon-wrapper li {text-align: center; margin: 0 auto; display: inline-block; list-style-type: none; width: 28%; padding: 0 5px 20px; vertical-align: top;}
#section-3 .text-content p {padding: 0 30px; font-size: 17px;}
#section-3 h3 {margin: 0 0 8px 0;}

/* sections 4 and 8 */
#section-4 .text-content, #section-8 .text-content {padding: 70px 0; width: 70%; margin: 0 auto;}
#section-8 h2 {color: white; margin-bottom: 30px;}

/* section 5 */
#section-5 {text-align: center;}
#section-5 h2 {margin-bottom: 35px;}
#section-5 .text-content {text-align: center; width: 65%; display: inline-block;}
#section-5 p {margin: 30px 0;}
#section-5 .col-1, #section-5 .col-2 {display: inline-block; padding: 0 35px;}
#section-5 ul, #section-5 h3 {text-align: left; margin: 15px 0 0 0;}
#section-5 ul li {list-style-position: inside;}

/* section 6 - Case studies */
#section-6 {position: relative;}
#section-6 .text-content {padding: 60px 0;}

a.arrow {display: block; width: 40px; height: 40px; visibility: hidden;}
a.arrow-left {background: url("/static/landing/images/arrow-left-circle.eda5a159aca4.svg"); position: absolute; left: 40px; top: 50%;}
a.arrow-right {background: url("/static/landing/images/arrow-right-circle.9b8e710898f6.svg"); position: absolute; right: 40px; top: 50%;}

#section-6 .col-1 {width: 50%; float: left;}
#section-6 .col-1 img {width: 85%; border: 2px solid #7080af;}
#section-6 .col-2 {width: 50%; float: right;}

#section-6 ul.stats {margin-top: 20px;}
#section-6 ul.stats li {vertical-align: top; list-style-type: none; display: inline-block; width: 30%; margin-right: 10px; font-size: 16px; line-height: 1em;}
#section-6 ul.stats p.lg {font-size: 43px; margin-bottom: 3px;}
#section-6 h4 {font-size: 24px; margin: 0 0 10px 0; font-weight: 400;}
#section-6 .text-content .col-2 p, #section-6 .text-content .col-2 li {font-size: 17px;}
#section-6 .text-content .col-2 ul {margin-left: 20px;}
#section-6 h5 {font-size: 18px; font-weight: 700; margin: 20px 0 10px 0;}

/* section 7 - FAQs */
#section-7 .text-content h2 {text-align: center; margin: 30px 0;}
#section-7 hr {margin: 0 auto;}

/**** Accordion ****/
details {margin-bottom: 10px;}

summary {
    padding: 20px 10px;
    cursor: pointer;
    font-size: 20px;
}

.accordion-group h3 {font-size: 18px; font-weight: 400; color: black;}
.accordion-group {width: 85%; margin: 0 auto;}

.content {padding: 10px; border-top: 1px solid #ccc;}

details[open] .content {
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

details:not([open]) .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}


/**** 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%;}
    #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;}
}