@charset "UTF-8";
/* CSS Document */

html, body {
	width:100%;
	margin:0px;
	padding:0px;
	font-size:18px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	background: #fff;
}
a {
	color:#323232;
}
hr {
	width:80%;
}
#main {
	width:100%;
	margin:0;
	padding:0;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#323232;
}
#header-full {
	width:100%;
	background:#fff;
	float:left;
}
#header-center {
	width: 1000px;
	background: #990000;
	position:relative;
	left: calc(50% - 500px);
	z-index:20;
}
#header-left {
	width:45%;
	float:left;
	padding-top:4px;
}
#header-left img {
	max-width:380px;
}
#header-right {
	width:40%;
	float:left;
	color: #fff;
	font-size: 14px;
	line-height: 114px;
}
#nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#nav li {
	display:inline;
	margin-right:3px;
	padding: 10px;
	background: #990000;
}
#mobile-nav {
	display:none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width:100%;
	margin-bottom:-2px;
	background:#202020;
}
#mobile-nav li {
	width:96%;
	margin-bottom:1px;
	background:#323232;
	color:#fff;
	padding:4% 2%;
}
#nav-button {
	width:30%;
	float:right;
	margin:50px 18px 0 0;
	display:none;
	cursor:pointer;
}
.hamburger {
	width:100%;
	height:3px;
	background:#fff;
	margin-bottom: 4px;
}
#nav a, #mobile-nav a {
	color:#fff;
	text-decoration:none;
}

#page-container {
	width: 90%; 
	margin: auto; 
	max-width: 1025px;
	background: #222434;
}

.full-width {
	width: 100%;
	background:#222434;
}
.full-width img {
	width: 100%;
}

.full-width p {
	line-height: 22px;
}
.full-width-text {
	padding: 10px;
	color: #fff;
	background:#990000;
}
.full-width-text h2 {
	text-align: center;
	font-size: 1.6em;
}

.benefits {
	color: #fff;
}
.benefits .column h3 {
	margin-top: 0;
	padding-top: 0;
}

.column h3 {
	margin: 30px;
	padding-bottom: 0;
	margin-bottom: 0;
	font-size: 1.7em;
}
.column p {
	margin: 30px;
	margin-top: 0;
	padding-top: 0;
	line-height: 1.2;
}

.column img {
	width: 400px;
}
.benefits {
	padding: 20px;
	font-size: .9em;
}
.benefits p {
}
.benefits .column {
	width: 50%;
	float: left;
}
.benefits .column1{
	width: 50%;
	float: left;
}
.benefits .column2{
	width: 50%;
	float: left;
}
.benefits ul {
	margin-top: 0;
	padding-top: 0;
}
.presidentMessage {
	color: #fff;
	background: #222434;
	padding: 10px 30px;
}

.presidentMessage img {
	float: left;
	width: 25%;
	margin-right: 20px;
	
}

.socialProbJournal {
	color: #fff;
	background: #222434;
	padding: 10px 30px;
}
.socProbTxt {
	width: 80%;
}
#pre-footer {
	clear: both;
	width:100%;
	height:40px;
	background: #990000 url('https://www.sssp1.org/layoutData/55/28/images/footer_back_gradient.png') repeat-x;
}
#footer-full {
	width:100%;
	background:#990000;
	float:left;
}
#footer-content {
	width: 1000px;
	float:left;
	color: #ffffff;
	position:relative;
	left: calc(50% - 500px);
	font-size: 15px;
	line-height: normal;
}
#footer-content a {
	color: #ffffff;
}
#footer-links {
	padding:0;
}
#footer-links li {
	display:inline;
	margin:0 10px;
}
#footer-left {
	float: left;
	width: 45%;
	margin-left: 20px;
}
#footer-left span {
	font-size: 1.2em;
}
#footer-right {
	float: left;
	width: 50%;
	margin-right: 20px;
	text-align: right;
}
#footer-content .copyright {
	clear: both;
	font-size: .8em;
	text-align: right;
	margin-right: 20px;
}
#footer p {
	padding-bottom:0;
}
 @media (max-width: 600px) {
 html, body {
width:100%;
}
 #main {
width:100%;
}
 #header {
width:100%;
}
 #header-center {
width:100%;
margin:0;
left: 0;
}
 #header-left {
width:65%;
float:left;
padding: 0;
}
 #header-right {
width:30%;
height:100%;
float:right;
padding:0;
}
 #nav {
display:none;
}
 #nav-button {
display:inline;
}
 #main-center {
width:100%;
left:0;
}
 #full-width {
width: 100%;
left: 0;
}
 #full-width img {
width:100%;
}
 #footer-content {
width:90%;
padding:0;
margin: auto;
font-size: .8em;
left: 0;
}
 #footer-left {
width:96%;
min-height:0;
padding:2%;
}
 #footer-right {
width:96%;
min-height:0;
padding:2%;
border-left:none;
text-align: left;
}
#footer-content .copyright {
 font-size: .7em;
}
}


        /* Media Queries */
        @media screen and (max-width: 700px) {
        
        #header-right {
        display: none;
        }
        #header-left {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
				text-align: left !important
        
        }

            .page-container {
                width: 100% !important;
                margin: auto !important;
            }
.stack-column-center .social-prob-cover {
	display: none;
			}
            /* What it does: Forces table cells into full-width rows. */
            .stack-column,
            .stack-column-center {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                direction: ltr !important;
				text-align: left !important
            }
            /* And center justify these ones. */
            .stack-column-center {
                text-align: center !important;
            }
            .stack-column-center .stack-graph {
                margin: 0 0 10px 0;
            }
			
			.stack-column-center .socProbTxt {
				width: 100%;
			}

            /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
            .center-on-narrow {
                text-align: center !important;
                display: block !important;
                margin-left: auto !important;
                margin-right: auto !important;
                float: none !important;
            }
            table.center-on-narrow {
                display: inline-block !important;
            }

            /* What it does: Adjust typography on small screens to improve readability */
            .page-container p {
                font-size: 17px !important;
            }
            
#mobile-nav {
	display:block;
}
        }