@charset "utf-8";
/* CSS Document */
/* allow wider width */
.sus-members .container, .sus-members #footerwrapper, .sus-members .classes{max-width:1200px; height:100%;
margin: 0 auto;}
.sus-members header, .sus-members .main-nav, .intro-banner   {max-width:1400px } /* EXTRA wide header */
/* Wide width containers  80em */
strong {font-family: 'Montserrat', Helvetica, sans-serif;
	font-weight: 700 !important;
}

.hero-intro {
	padding: 20px 2%;
	font-family: Montserrat;
	color: #455560;
	font-size: 20px;
	line-height: 1.3em;
	font-weight: 300;
}
.hero-intro h1 { font-family: "Montserrat"; 
	font-size: 32px;
	text-transform: uppercase;
	color: #0064a8;
	line-height: 1.1em;
}
a .ShareButton {
	font-family: Montserrat;
	color: #ffffff;
	background-color: #0064a8;
	padding: 5px 20px;
	text-transform: uppercase;
	font-size: 16px;
	margin-top: 30px;
	width: 210px;
	text-align: center;
	font-weight: 600;
}

.sus-members .landing {
    background-color: #ffffff;
	padding:36px 2% 25px 2%;	}
.sus-members .thirds a {font-family: "Montserrat"; color: #455560; font-weight:600 }
.sus-members h2 {
	color: #0064a8;
	text-transform: uppercase;
	font-family: 'Montserrat', Helvetica, sans-serif;
	font-size: 34px;
	font-weight: 500;
	line-height: 1.3em;
}
.thirds { /* this should be full width */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
	font-family: 'Montserrat', Helvetica,  sans-serif;
	overflow:hidden;
}
.thirds-text {Max-width:65%; margin-right:3%;
	color: #455560;	
	font-size: 18px;
	line-height:1.4em;
	font-weight:300;
	 }

/*////////////////////////**********INDIVIDUAL   pages **************************|||||||||||||||||||||| */
.sus-header img {margin-top: 20px; margin-bottom: 20px; max-width:100% }
.sus-header h1 {
	font: 32px 'Montserrat', Helvetica, sans-serif;
	text-transform: uppercase;
	font-weight:500;
	color: #0064a8;
	margin: 0;
}
.sus-date, .sus-cat {
	font-family: Montserrat;
	color: #455560;
	font-size: 16px;
	text-transform: uppercase;
	margin: 0px;
	font-weight: 600;
}

.sus-pages thirds-text {max-width:55% }
.thirds-sidebar {
 display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction:column;
  color: #455560;
  
}
.thirds-sidebar img {max-width:100%}
.thirds-sidebar .sus-logo {border-top: solid 2px #0064a8; border-bottom: solid 2px #0064a8; margin-bottom:50px }
.thirds-sidebar .sus-logo  img {margin:8px 0px}
.thirds-sidebar .sus-side  img {margin-bottom: 25px;}
.sus-side, .thirds-sidebar .more {font: 18px  'Montserrat', Helvetica, sans-serif; font-weight:300; line-height: 1.4em; }
.thirds-sidebar .more {margin-top: auto; border-top: solid 2px #0064a8; border-bottom: solid 2px #0064a8; padding:20px 0px; min-height:125px;line-height: 1.4em; }

.thirds-sidebar .request {font: 18px  'Montserrat', Helvetica, sans-serif; font-weight:300; line-height: 1.4em;  border-bottom: solid 2px #0064a8; padding-bottom: 30px;}

a.button h4 {font-family: 'Montserrat', Helvetica, sans-serif; font-size: 22px; background-color: #b3d044; color:#ffffff; padding:14px; text-align:center; width: 100%; margin-top:38px; margin-bottom:20px; text-transform:uppercase; font-weight:500;}
a.button:hover {text-decoration:none;}
a.button:hover h4 {
	background: #A6C431;
}
.gray
{background-color:#e3e5e7; }
.gray h2 { font-family: 'Montserrat', Helvetica, sans-serif;
text-transform:uppercase;
font: 32px;
color: #0064a8;
text-align:center; margin:0; padding-top:26px}
.gray h3 { font-family: 'Montserrat', Helvetica, sans-serif;
font-weight:400; font-size:20px;
color:#455560;text-align:center; margin:10px auto 30px}

.related {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-family: 'Montserrat', Helvetica,  sans-serif;
	overflow: hidden;
	flex-wrap: wrap;
	margin: 20px 20px 0 20px;
	}
.related a {
	width: 48%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-family: 'Montserrat', Helvetica,  sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: #455560;
	margin-bottom: 20px;
	border-top: solid 2px #0064a8;
	padding-top:20px;
	margin-top:-2px;
  }
  .story  {border-left: solid 2px #0064a8;
padding-left: 19px;
margin-right: 20px;
margin-left: -2px;} 

ul.dashlist {padding-left:20px; }
.dashlist li {margin-bottom:1em }
.dashlist li:before  {content: "– "; margin-left: -13px;}
/*.related a:nth-of-type(2n) {width: 50%;
border-left: solid 2px #0064a8;
padding-left: 19px;
margin-left: 20px;}

*/
.cat-links {float:right; padding-top: 10px; }
.cat-links a {font-size: 14px;
font-weight: 700; color: #455560; }
.cat-links a:hover {text-decoration: underline }
.sus-cat a {font-size: 16px;
font-weight: 700; color: #455560; }

.gray a:hover {text-decoration:none; background: #d6d7d5; opacity: .8;}

.gray h4 {
	margin : 0px auto 7px;
	font-family: 'Montserrat', Helvetica,  sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
}
.gray p {margin: 2px 0;  color: #455560;}
.story {  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;}
.story .story-img {
padding: 4px;
flex: 1 0 183px;
margin-right: 20px;
margin-top: 0px;}
.story .story-img img {max-width:100% }


.quotes {text-align:center; font-family: 'Montserrat', Helvetica, sans-serif;
font-size:16px; }
.quotes h3 { 
text-transform:uppercase;
font-size: 32px;
	color: #0064a8;
	line-height:1.4em;
}
.quotes img {max-width:55px; margin:22px; }
.quotes em {
	font-size: 24px;
	color: #0064a8;
 	font-style: italic;
	line-height:2em;
}

.sus-members #footerwrapper {padding-top:0px }


.pagequote {Position:relative; align-self:center }
.pagequote p, .pagequote .indent {margin-left:13.5%; padding-left:9%; border-left:  solid 2px #0064a8;
line-height:1.7em; align-self: center; }
.pagequote p::before, .pagequote .indent::before {
    display: block;
    content: ' ';
    background-image: url('../svg/quote-cropped-2.svg');
    background-size: 50px 50px;
    height: 50px;
    width: 50px;
    background-repeat: no-repeat;
    position: absolute;
    top: 25%;
    left: 6.8%;
}
.pagequote span,  .gray .thirds-solution .quote, .pagequote .indent .quoteby {font-weight:400; font-size:16px;   padding-left: 13px; line-height: 1.5em; margin-top: 10px; }
.pagequote .indent .quoteby::before { content: "– "; margin-left: -13px;}

.footnotes { font-size:.75em; border-top:solid 1px #455560;  margin-top: 40px;
  padding-top: 40px;
}
.footnotes ol {list-style-type: decimal;
margin-left: 19px;}
.footnotes ol li {line-height: 1.4em;}

.bluetab {    background-color: #0064a8;
    color: white;
  font-family: 'Montserrat', Helvetica, sans-serif;  
    text-transform: uppercase;
    padding: 10px 0px 10px 20px;
    font-size: 20px;
    font-weight: 500;
	margin:0px;
	width:100%}
.bluetab  a .share {float:right; background-color: #455560; color:white; padding: 10px 20px;  margin-top:-10px}
.bluetab a {color:#ffffff}
.gray .thirds {padding:20px 6% 50px }
.gray .thirds-problem {
	border-right: solid 3px #0064a8;
	padding-top: 30px;
	text-align: right;
	padding-right: 5%;
	font-size: 18px;
	line-height: 1.7em;
	font-weight: 400;
	width:32%;
}
.gray .thirds-solution {
	
	padding-left: 5%;
	width: 68%;
	font-size: 16px;
	line-height: 1.5em;

}

.gray .thirds-solution h3 {
	
	text-transform: uppercase;
	font: 30px 'Montserrat', Helvetica, sans-serif;
	color: #0064a8;
	font-weight:500;
	text-align:left;
	margin-top:0;
	margin-bottom:10px;
}
.gray .thirds-solution span {font-size: 20px; display:block; margin-bottom:30px }
.gray .coda {
    border-top: solid 2px #0064a8; padding:20px 40px; margin-top:20px;color: #455560;     font-family: 'Montserrat', Helvetica, sans-serif;
    font-weight: 400;
    font-size: 14px;}


@media (max-width: 980px) {  

.intro-banner {	background-color:#004f8a; max-height:1000px }

.thirds-sidebar h3 {padding: 8px 10px;
font-size: 15px;}

}


@media (max-width: 810px) {  
.story {display:block }
.story .story-img {flex: none; float:left; width:33% }


.sus-members .container, .sus-members #footerwrapper,  {max-width:100%; width: 100%}

.sus-members .landing  {    padding: 5px 20px 10px;
    background-color: #ffffff;
    margin-top: -3px;}
.gray-cols {padding:10px 2% }
.gray-cols a {width:49%}


.pagequote p { margin-left:6%; padding-left:4%}
.pagequote p::before {background-size: 20px 20px;
height: 20px;
width: 20px;
top: 25%;
left: 0.8%;}


.gray .thirds-solution h3 {font-size:22px }
.arrow {background-size:contain; height:46px; width:63px }
}

@media (max-width:600px) { 
.related {margin:5px }
.related a, .related a:nth-of-type(2) {width:44% }
.bluetab {font-size:13px; font-weight:700; padding-left:10px}



.webimg img {margin-top:0}  /* allows a larger logo image */
.intro-banner{
	min-height: 150px
}

.intro-banner h1, .intro-banner h1.indalearning { font-size: 1.5em; padding-left: 5%;
}
.title {padding: 5px }
.sus-members h2 {font-size: 30px;
margin: 10px 20px; }
.thirds {flex-wrap: wrap-reverse; }
.thirds-text {width:100%; max-width:100%; padding-top:20px}
.gray-cols a {width:100% }
.quotes h3 {font-size: 17px; font-weight:600}
.quotes img {max-width:27px; margin:1px }
.quotes em {font-size:17px }
.sus-members .landing.quotes {padding-bottom:20px }
.sus-pages .thirds {flex-wrap: wrap; }
.thirds-sidebar {width:100%}
.interlinks {margin-right:0px }
.gray .thirds-problem, .gray .thirds-solution {width:100%; padding:20px 3px; text-align:left; border:none}
.gray .thirds-solution h4 {font-size:24px }
.banner {margin-bottom:10px }
.sus-pages h1 {font-size:24px }

}

@media (max-width:400px) { 
.related {margin:5px }
.related a, .related a:nth-of-type(2) {width:100%;  padding-top: 20px; }
.bluetab {font-size:13px; font-weight:700; padding-left:10px}
.related a:nth-of-type(2){border-left:none; border-top: solid 2px #0064a8;
padding-left:0px; margin-left:0px }
.bluetab a .share{font-size:10px}

.sus-members .landing { padding: 2px}
.gray .thirds {padding:0px 1% }
}