body, html { font-family: 'Montserrat'; height: 100%; margin: 0px; min-width: 320px; scroll-behavior: smooth !important; }
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.white { color: #ffffff; }
.black { color: #333333; }
.orange { color: #ff9333; }
.blue { color: #0b00f0; }
.width-100 { width: 100%; }
.width-50 { width: 50%; }
.nowrap { white-space: nowrap; }
.pointer { cursor: pointer; }
.section { background-color: #001f5f; padding: 25px 0px 25px 0px; text-align: center; }
.nodecoration { text-decoration: none; }
h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 64px; font-weight: 600; color: #333333; position: absolute; top: 480px; right: 9%; margin: 0px; width: 680px; text-align: left; line-height: 1.4; }
h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 38px; font-weight: 600; color: #333333; position: absolute; top: 580px; right: 9%; margin: 0px; width: 680px; text-align: left; line-height: 1.2; }
h3 { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 28px; font-weight: bold; color: #ffffff; text-align: center; margin: 25px 10px 25px 10px; line-height: 1.4; }
h4 { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 26px; font-weight: bold; color: #333333; text-align: center; margin: 80px 10px 25px 10px; line-height: 1.4; }
h6 { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #333333; text-align: center; margin: 10px auto 10px auto; line-height: 1.4; }
p { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 18px; font-weight: normal; color: #333333; text-align: left; margin: 0px 5px 0px 5px; line-height: 1.4; }
p a { color: #3366cc; }
/* LISTSERV SPLASH SECTION */
.bg-listserv { background-image: url("/images/listserv40_splash_1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 1280px; }
.ct-listserv { position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; text-align: right; }
.listserv-button { font-size: 16px; color: #FFFFFF; font-style: normal; font-weight: bold; text-align: center; text-decoration: none; background-color: #F2950A; padding: 10px 30px 10px 30px; border: 1px solid #F2950A; border-radius: 20px; white-space: nowrap; text-transform: uppercase; cursor: pointer; }
.listserv-button:hover { background-color: #FCAB32; transition: all 0.30s ease-in-out; }
.listserv-button-margin { width: 680px; position: absolute; top: 740px; right: 9%; text-align: center; }
/* LISTSERV MOMENT SECTION */
.bg-moment { background-image: url("/images/listserv40_moment_1.jpg"); background-size: cover; background-position: top; background-repeat: no-repeat; position: relative; min-height: 1180px; }
.ct-moment { position: absolute; left: 0px; top: 70px; width: 100%; }
.moment-form { width: 800px; background-color: #ffffff; padding: 20px; border: 1px solid #eaeaea; border-radius: 20px; float: left; margin-left: 150px; }
.moment-quotes { width: 800px; margin: 0px; padding: 0px; float: right; margin-right: 150px; }
div.user-quotes { width: 100%; height: 600px; }
ul.user-quotes { width: 100%; list-style-position: inside; padding: 0px 0px 0px 0px; }
li.user-quote { height: 600px; }
.user-quote-text { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 26px; font-weight: bold; font-style: italic; color: #333333; text-align: center; margin-top: 40px; line-height: 1.4; }
.user-quote-by { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #333333; text-align: center; margin-top: 40px; line-height: 1.4; }
.quote-prev { position: relative; top: -505px; left: -30px; cursor: pointer; }
.quote-next { position: relative; top: -505px; left: 790px; cursor: pointer; }
/* WHY LISTSERV MATTERS SECTION */
.bg-why { background-image: url("/images/listserv40_why_1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; background-attachment: fixed; min-height: 820px; }
.ct-why { position: absolute; left: 0px; top: 20px; width: 100%; }
.why-content { width: 1200px; height: 296px; margin: 80px 0px 40px 0px; padding: 0px; margin-left: auto; margin-right: auto; }
.why-1 { width: 360px; height: 296px; float: left; display: flex; justify-content: center; align-items: center; background-color: rgba(0,31,95,0.75); border-radius: 20px; margin: 20px; }
.why-2 { width: 360px; height: 296px; float: left; display: flex; justify-content: center; align-items: center; background-color: rgba(0,31,95,0.75); border-radius: 20px; margin: 20px; }
.why-3 { width: 360px; height: 296px; float: left; display: flex; justify-content: center; align-items: center; background-color: rgba(0,31,95,0.75); border-radius: 20px; margin: 20px; }
.why-box { width: 360px; height: 296px; padding: 20px; }
.why-icon { padding: 20px 20px 20px 20px; }
.why-title { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #FFFFFF; text-align: center; line-height: 1.4; }
.why-text { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #FFFFFF; text-align: left; margin: 30px 10px 20px 10px; line-height: 1.4; }
.why-button { font-size: 16px; color: #FFFFFF; font-style: normal; font-weight: bold; text-align: center; text-decoration: none; background-color: #F2950A; padding: 10px 30px 10px 30px; border: 1px solid #F2950A; border-radius: 20px; white-space: nowrap; text-transform: uppercase; cursor: pointer; }
.why-button:hover { background-color: #FCAB32; transition: all 0.30s ease-in-out; }
.why-button-margin { margin-top: 125px; text-align: center; }
/* LISTSERV TIMELINE SECTION */
.bg-timeline { background-color: #f3f3f3; position: relative; min-height: 900px; }
.ct-timeline { position: absolute; left: 0px; top: 20px; width: 100%; }
.timeline-dots { width: 1280px; height: 18px; background-image: url("/images/listserv40_timeline_0.png"); background-repeat: no-repeat; margin-left: auto; margin-right: auto; margin-top: 80px; margin-bottom: 80px; }
.timeline-content { width: 1280px; height: 296px; margin: 40px 0px 40px 0px; padding: 0px; margin-left: auto; margin-right: auto; }
.timeline-1 { width: 320px; height: 296px; background-image: url("/images/listserv40_timeline_1.png"); background-repeat: no-repeat; background-position: center; float: left; display: flex; justify-content: center; align-items: center; }
.timeline-2 { width: 320px; height: 296px; background-image: url("/images/listserv40_timeline_2.png"); background-repeat: no-repeat; background-position: center; float: left; display: flex; justify-content: center; align-items: center; }
.timeline-3 { width: 320px; height: 296px; background-image: url("/images/listserv40_timeline_3.png"); background-repeat: no-repeat; background-position: center; float: left; display: flex; justify-content: center; align-items: center; }
.timeline-4 { width: 320px; height: 296px; background-image: url("/images/listserv40_timeline_4.png"); background-repeat: no-repeat; background-position: center; float: left; display: flex; justify-content: center; align-items: center; }
.timeline-box { width: 320px; height: 296px; }
.timeline-title { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 20px; font-weight: bold; color: #FFFFFF; text-align: center; position: relative; top: 36px; left: 13px; }
.timeline-subhead-1 { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #fda702; text-align: left; text-transform: uppercase; width: 220px; position: relative; top: 76px; left: 46px; }
.timeline-subhead-2 { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #5db05c; text-align: left; text-transform: uppercase; width: 220px; position: relative; top: 76px; left: 46px; }
.timeline-subhead-3 { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #e4300e; text-align: left; text-transform: uppercase; width: 220px; position: relative; top: 76px; left: 46px; }
.timeline-subhead-4 { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #0957e1; text-align: left; text-transform: uppercase; width: 220px; position: relative; top: 76px; left: 46px; }
.timeline-text { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 14px; font-weight: normal; color: #333333; text-align: left; width: 240px; position: relative; top: 90px; left: 25px; }
.timeline-button { font-size: 16px; color: #FFFFFF; font-style: normal; font-weight: bold; text-align: center; text-decoration: none; background-color: #F2950A; padding: 10px 30px 10px 30px; border: 1px solid #F2950A; border-radius: 20px; white-space: nowrap; text-transform: uppercase; cursor: pointer; }
.timeline-button:hover { background-color: #FCAB32; transition: all 0.30s ease-in-out; }
.timeline-button-margin { margin-top: 105px; text-align: center; }
/* INNOVATION SECTION */
.bg-innovation { background-image: url("/images/listserv40_innovation_1.jpg"); background-size: cover; background-position: top; background-repeat: no-repeat; position: relative; min-height: 1200px; }
.ct-innovation { position: absolute; right: 6%; top: 70px; }
.innovation-form { width: 800px; background-color: #ffffff; padding: 40px; border: 1px solid #eaeaea; border-radius: 20px; }
.innovation-quote-text { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 18px; font-weight: normal; font-style: italic; color: #378ACC; text-align: center; margin-top: 10px; line-height: 1.4; }
.innovation-quote-by { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 18px; font-weight: normal; color: #333333; text-align: center; margin-top: 20px; line-height: 1.4; }
.innovation-button { font-size: 16px; color: #FFFFFF; font-style: normal; font-weight: bold; text-align: center; text-decoration: none; background-color: #F2950A; padding: 10px 30px 10px 30px; border: 1px solid #F2950A; border-radius: 20px; white-space: nowrap; text-transform: uppercase; cursor: pointer; }
.innovation-button:hover { background-color: #FCAB32; transition: all 0.30s ease-in-out; }
.innovation-button-margin { margin-top: 40px; text-align: center; }
/* CONTACT FORM */
input, textarea { font-family: 'Montserrat', sans-serif; font-size: 18px; color: #333333; }
input[type="text"] { width: 100%; margin: 1px; padding: 8px; background-color: #FFFFFF; border: 1px solid #DEDEDE; transition: all 0.30s ease-in-out; outline: none; box-sizing: border-box; }
input[type="text"]:focus { box-shadow: 0px 0px 2px 0px #FFB240; border: 1px solid #F2950A; }
textarea { width: 100%; margin: 1px; padding: 8px; background-color: #FFFFFF; border: 1px solid #DEDEDE; transition: all 0.30s ease-in-out; outline: none; box-sizing: border-box; }
textarea:focus { box-shadow: 0px 0px 2px 0px #FFB240; border: 1px solid #F2950A; }
input[type="submit"] { font-size: 16px; color: #FFFFFF; font-style: normal; font-weight: bold; text-align: center; background-color: #F2950A; margin: 1px; padding: 10px 30px 10px 30px; border: 1px solid #F2950A; border-radius: 20px; white-space: nowrap; text-transform: uppercase; cursor: pointer; }
input[type="submit"]:hover { background-color: #FCAB32; transition: all 0.30s ease-in-out; }
input[type="submit"]:disabled { background-color: #FCAB32; cursor: not-allowed; }
/* COMMUNITY STORIES SECTION */
.bg-community { background-image: url("/images/listserv40_community_1.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; background-attachment: fixed; min-height: 1000px; }
.ct-community { position: absolute; left: 0px; top: 20px; width: 100%; }
.community-content { width: 1280px; height: 420px; margin: 80px 0px 40px 0px; padding: 0px; margin-left: auto; margin-right: auto; }
.community-1 { width: 258px; height: 420px; float: left; display: flex; justify-content: center; align-items: center; margin: 30px; }
.community-2 { width: 258px; height: 420px; float: left; display: flex; justify-content: center; align-items: center; margin: 30px; }
.community-3 { width: 258px; height: 420px; float: left; display: flex; justify-content: center; align-items: center; margin: 30px; }
.community-4 { width: 258px; height: 420px; float: left; display: flex; justify-content: center; align-items: center; margin: 30px; }
.community-box { width: 240px; height: 420px; background-color: #ffffff; border: 1px solid #eaeaea; border-radius: 20px; padding: 20px; }
.community-category { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #888888; text-align: left; text-transform: uppercase; line-height: 1.4; padding: 10px 0px 10px 0px; }
.community-subhead { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #333333; text-align: left; text-transform: uppercase; line-height: 1.4; padding: 10px 0px 15px 0px; }
.community-text { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 14px; font-weight: normal; color: #333333; text-align: left; line-height: 1.4; }
.community-more { font-family: 'Montserrat', Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #333333; text-align: right; text-transform: uppercase; padding-top: 20px; line-height: 1.4; }
.community-more a { color: #F2950A; text-decoration: none; }
.community-button { font-size: 16px; color: #FFFFFF; font-style: normal; font-weight: bold; text-align: center; text-decoration: none; background-color: #F2950A; padding: 10px 30px 10px 30px; border: 1px solid #F2950A; border-radius: 20px; white-space: nowrap; text-transform: uppercase; cursor: pointer; }
.community-button:hover { background-color: #FCAB32; transition: all 0.30s ease-in-out; }
.community-button-margin { margin-top: 160px; text-align: center; }
@media (max-width: 1979px) {
/* LISTSERV MOMENT SECTION */
.moment-form { margin-left: 100px; }
.moment-quotes { width: 600px; margin-right: 100px; }
div.user-quotes { width: 600px; }
ul.user-quotes { width: 600px; }
.quote-prev { position: relative; top: -500px; left: -30px; cursor: pointer; }
.quote-next { position: relative; top: -500px; left: 590px; cursor: pointer; }
}
@media (max-width: 1650px) {
/* LISTSERV MOMENT SECTION */
.bg-moment { min-height: 1450px; }
.moment-image { display: none; }
.moment-form { margin-left: auto; margin-right: auto; float: none; }
.moment-quotes { width: 800px !important; margin-left: auto; margin-right: auto; float: none; }
.user-quote-text { font-size: 21px; padding-left: 20px; padding-right: 20px; }
div.user-quotes { width: 100%; }
ul.user-quotes { width: 100%; }
.quote-prev { position: relative; top: -500px; left: -30px; cursor: pointer; }
.quote-next { position: relative; top: -500px; left: 790px; cursor: pointer; }
}
@media (max-width: 1279px) {
/* LISTSERV SPLASH SECTION */
.bg-listserv { background-image: url("/images/listserv40_splash_1m.jpg"); min-height: 1232px; }
h1 { font-size: 60px; width: 100%; position: absolute; top: 50px; left: 0px; text-align: center; }
h2 { font-size: 34px; width: 100%; position: absolute; top: 730px; left: 0px; text-align: center; }
.listserv-button-margin { width: 100%; position: absolute; top: 910px; left: 0px; }
/* WHY LISTSERV MATTERS SECTION */
.bg-why { min-height: 1440px; }
.why-content { width: 100%; }
.why-1 { margin-left: auto; margin-right: auto; float: none; }
.why-2 { margin-left: auto; margin-right: auto; float: none; }
.why-3 { margin-left: auto; margin-right: auto; float: none; }
.why-button-margin { margin-top: 740px; }
/* LISTSERV TIMELINE SECTION */
.bg-timeline { min-height: 1050px; }
.timeline-dots { display: none; }
.timeline-content { width: 100%; }
.timeline-1 { width: 50%; }
.timeline-2 { width: 50%; }
.timeline-3 { width: 50%; }
.timeline-4 { width: 50%; }
.timeline-button-margin { margin-top: 380px; }
/* COMMUNITY STORIES SECTION */
.bg-community { min-height: 1490px; }
.community-content { width: 100%; }
.community-1 { width: 50%; margin-left: auto; margin-right: auto; }
.community-2 { width: 50%; margin-left: auto; margin-right: auto; }
.community-3 { width: 50%; margin-left: auto; margin-right: auto; }
.community-4 { width: 50%; margin-left: auto; margin-right: auto; }
.community-button-margin { margin-top: 640px; }
.break-l { display: block; }
.hide-l { display: none; }
}
@media (max-width: 991px) {
/* LISTSERV MOMENT SECTION */
.bg-moment { min-height: 1620px; }
.moment-form { width: 80% !important; margin-left: auto; margin-right: auto; }
.moment-quotes { width: 90% !important; margin-left: auto; margin-right: auto; }
div.user-quotes { width: 90% !important; margin-left: auto; margin-right: auto; }
ul.user-quotes { width: 90% !important; }
.quote-prev { position: relative; top: -500px; left: -6%; cursor: pointer; }
.quote-next { position: relative; top: -500px; left: 99%; cursor: pointer; }
/* INNOVATION SECTION */
.bg-innovation { min-height: 1400px; }
.ct-innovation { position: absolute; left: 0px; top: 70px; width: 100%; }
.innovation-form { width: 80% !important; margin-left: auto; margin-right: auto; }
}
@media (max-width: 800px) {
/* INNOVATION SECTION */
.bg-innovation { min-height: 1600px; }
.innovation-caption { width: 320px; margin: 0px auto 0px auto !important; float: none !important; display: block !important; padding-bottom: 40px !important; }
}
@media (max-width: 639px) {
/* LISTSERV SPLASH SECTION */
.bg-listserv { min-height: 1020px; }
h1 { font-size: 48px; line-height: 1.2; }
h2 { font-size: 28px; line-height: 1.2; }
.break-l { display: inline; }
/* LISTSERV MOMENT SECTION */
.bg-moment { min-height: 1820px; }
.moment-form { padding: 20px; }
.user-quote-text { font-size: 20px; }
/* WHY LISTSERV MATTERS SECTION */
.bg-why { min-height: 1460px; }
/* LISTSERV TIMELINE SECTION */
.bg-timeline { min-height: 1650px; }
.timeline-1 { width: 100%; clear: both; }
.timeline-2 { width: 100%; clear: both; }
.timeline-3 { width: 100%; clear: both; }
.timeline-4 { width: 100%; clear: both; }
.timeline-button-margin { margin-top: 980px; }
/* COMMUNITY STORIES SECTION */
.bg-community { min-height: 2440px; }
.community-1 { width: 100%; clear: both; }
.community-2 { width: 100%; clear: both; }
.community-3 { width: 100%; clear: both; }
.community-4 { width: 100%; clear: both; }
.community-button-margin { margin-top: 1600px; }
/* INNOVATION SECTION */
h3 { font-size: 26px; }
h4 { font-size: 24px; }
h6 { font-size: 16px; }
p { font-size: 16px; }
.bg-innovation { min-height: 1800px; }
.innovation-quote-text { font-size: 16px; }
.innovation-quote-by { font-size: 16px; }
.innovation-caption { width: 240px !important; }
.innovation-image { width: 240px !important; }
input, textarea { font-size: 16px; }
input[type="submit"] { font-size: 14px; }
.break-l { display: inline; }
.break-s { display: block; }
.hide-s { display: none; }
}