:root {--cscblue:#1d2c48; --cscred:#d41217; --cscwhite:#f3f3f3; --cscdark:#202121;}
body, p {  font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 75; font-size: 16px; font-weight: 200; font-weight: var(--body_text_weight,400); line-height: 1.4; }
body { background-color: #fafafa; }
@media only screen and (min-width: 1224px) { body, p { font-size:19px;} }
@media only screen and (min-width: 1024px) and (max-width: 1223px) { body, p { font-size:17px;} }

.text-tagline-small {font-size:14px; line-height:24px;}
.brand-2-btn, .styled-title {text-transform:uppercase;}
a, a:hover {text-decoration:none;}
#main, .hero, .main-timeline-2, .navbar li, .timeline-2 {position:relative;}
.about .icon-box .title a:hover, .blog .blog-comments .comment h5 a:hover, .blog .entry .entry-footer a:hover, .blog .entry .entry-title a:hover, .blog .sidebar .categories ul a:hover, .blog .sidebar .recent-posts h4 a:hover, .faq .faq-list a.collapsed:hover, .services .icon-box:hover .icon i, .services .icon-box:hover .title a, .text-cscblue, .text-dark, a {color:var(--cscblue);}
a:hover {color:#152137 !important;}
.text-shadow {text-shadow:4px 4px #000;}
.container-custom {width:80%;}
.slimeline {width:60%;}
.bg-sfgdark { background-color: #2A3430; color: white; }
.bg-sfgdark a, .bg-sfgdark a:hover, .bg-sfgdark a:visited { color: white; }

.h6, h6 {font-size:23px; line-height:29px; font-weight: 300;}
.gm {font-size:21px; line-height:31px; font-weight: 300;}
.h5, h5 {font-size:27px; line-height:33px; font-weight: 300;}
.h4, h4 {font-size:33px; line-height:37px; font-weight: 300;}
.h3, h3 {font-size:39px; line-height:57px; font-weight: 300;}
.h2, h2 {font-size:47px; line-height:67px; font-weight: 300;}
.h1, h1 {font-size:68px; line-height:78px; font-weight: 300;}
.h1-l {font-size:99px; line-height:67px; font-weight: 300;}
.h1-xl {font-size:68px; line-height:78px; font-weight: 300;}
.fs-7 { font-size: 12px; line-height:16px; font-weight: 300;}

@media only screen and (max-width: 920px) {
.h1-xl {font-size:30px; ine-height:40px;}
.h1-l {font-size:27px; line-height:37px;}
.h1, h1 {font-size:27px; line-height:37px;}
.h2, h2 {font-size:25px; line-height:35px;}
.h3, h4 {font-size:23px; line-height:33px;}
.h4, h4 {font-size:22px; line-height:32px;}
.h5, h5 {font-size:21px; line-height:31px;}
.gm {font-size:19px; line-height:25px;}
.h6, h6 {font-size:18px; line-height:24px;}
}

.p-10 {padding:100px;}
.p-9 {padding:90px;}
.p-8 {padding:80px;}
.p-7 {padding:70px;}
.p-6 {padding:60px;}
.p-5 {padding:50px;}
.p-20 {padding:20px;}
.pt-10 {padding-top:100px;}
.pt-9 {padding-top:90px;}
.pt-8 {padding-top:80px;}
.pt-7 {padding-top:70px;}
.pt-6 {padding-top:60px;}
.pt-5 {padding-top:50px;}
.pb-10 {padding-bottom:100px;}
.pb-9 {padding-bottom:90px;}
.pb-8 {padding-bottom:80px;}
.pb-7 {padding-bottom:70px;}
.pb-6 {padding-bottom:60px;}
.pb-5 {padding-bottom:50px;}
.pe-10 {padding-right:100px;}
.pe-9 {padding-right:90px;}
.pe-8 {padding-right:80px;}
.pe-7 {padding-right:70px;}
.pe-6 {padding-right:60px;}
.pe-5 {padding-right:50px;}
.ps-10 {padding-left:100px;}
.ps-9 {padding-left:90px;}
.ps-8 {padding-left:80px;}
.ps-7 {padding-left:70px;}
.ps-6 {padding-left:60px;}
.ps-5 {padding-left:50px;}
.hero, .topbar {padding:0;}
.ms {margin-left:40px;}
.ms-40 {margin-right:40px !important;}
.ms-30 {margin-right:30px !important;}
.ms-20 {margin-right:20px !important;}
.me {margin-right:40px;}
.me-40 {margin-left:40px !important;}
.me-30 {margin-left:30px !important;}
.me-20 {margin-left:20px !important;}
.mb-80 {margin-bottom:80px !important;}
.mb-70 {margin-bottom:70px !important;}
.mb-60 {margin-bottom:60px !important;}
.mb-50 {margin-bottom:50px !important;}
.mb-40 {margin-bottom:40px !important;}
.mb-30 {margin-bottom:30px !important;}
.mb-20 {margin-bottom:20px !important;}

.dropshadow {-webkit-box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.5); box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.5);}

.section-container {padding:3.75em;}
@media only screen and (max-width: 720px) { .section-container { width: 97%; padding:2em; } }
@media only screen and (min-width:721px) and  (max-width: 990px) { .section-container { width: 95%; padding:2em; }}
@media only screen and (min-width:991px) and (max-width: 1090px) { .section-container { width: 90%; padding:2em; }}

.mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
	background-color: rgba(0, 0, 0, 0.5);
}