/*******************/

.section1-col1 { margin-left: 2em }

@media screen and (min-width: 1091px) {
	.section1-text				{ float: left; width: 50%; }
}

@media screen and (max-width: 1090px) {
	.section1-col1				{ margin-left: 0; width: 100% }
	.section1-text				{ text-align: center; width: 100%; padding-left: 20px; padding-right: 20px; }
	#s1-img						{ display: none }

	.section2					{ height: auto !important }
	.section2 .section-title	{ text-align: center }
	.section2 .span1-4			{ position: absolute; width: 100%; z-index: 1; }
	.section2 .span1-4 img 		{ text-align: center; opacity: 0.5 }
	#s2-img						{ float: none !important }
	.section2 .span3-4			{ position: relative; width: 100%; z-index: 2 }

	.section3					{ height: auto !important }
	.section3 .section-title	{ text-align: center }
	.section3 .span1-4			{ position: absolute; width: 100%; z-index: 1; }
	.section3 .span1-4 img 		{ text-align: center; opacity: 0.5 }
	.section3 .span3-4			{ position: relative; width: 100%; z-index: 2 }
	
	.section4					{ height: auto !important }
	.section4 .section-title	{ text-align: center }
	.section4 p 				{ text-align: left }
	.section4 .span1-4			{ position: absolute; width: 100%; z-index: 1 }
	.s-img					{ display: block; margin: auto; opacity: 0.5; }
	#s4-img { float: none !important; padding-left: 0 !important; }
	.section4 .span3-4			{ position: relative; width: 100%; z-index: 2 }

	.section5-status			{ height: 50% !important}
	.section5-links				{ height: 50% !important }
	.section-green .span1-4			{ width: 100% }
	.section-green .span3-4 			{ width: 100% }

	.section-content 			{ font-size: 14px }
}

@media screen and (max-width: 830px) {
	.content-container			{ width: 100% !important }
	
	.section1-text				{ margin-left: 0 !important }
	.section1-links				{ text-align: center; margin: 0 !important }

	.section-title				{ margin: 35px auto; }
}

@media screen and (max-width: 480px) {
	.section1 					{ height: auto !important; padding-bottom: 30px }
	.section1 h1				{ font-size: 33px !important }
	.section1-col1				{ width: 100%; margin-left: 3.7em }
	.section1-links p 			{ margin-bottom: 0 }
	
	.section-title				{ font-size: 35px !important }

	.section2					{ min-height: 425px !important }

	.section3					{ min-height: 425px !important }

	.section5					{ min-height: 350px !important }

	.button-big					{ margin-top: 20px }
}

/*****************************************************************/

.section1 {
	height: auto;
	padding-bottom: 2em;
	background-image: linear-gradient(to bottom, #226a8d, #295985);
	background-size: 100% 100%;
	overflow: hidden;
}

.section1 h1 {
	font-size: 48px;
}

.section1 p {
	font-size: 18px;
}

.section1-text {
	margin: 3em 0 auto auto;
	
	color: white;
	text-shadow: 2px 2px 2px black;
}

.section1-links {
	text-overflow: clip;
}

#s1-h {
	font-size: 40px;
}

#s1-p {
	font-size: 21px;
}

.getstarted-btn {
	display: inline-block;
	min-width: 117px;
	height: auto;
	background-image: url("/static/btn.gif");
	background-size: 100% 100%;
	text-align: center;
	border-radius: 3px;
}
.getstarted-btn:hover {
	background-image: url("/static/btn-hover.gif");
}
.getstarted-btn:active {
	background-image: url("/static/btn-down.gif");
}

#getstarted-txt {
	position: relative;
	text-decoration: none;
	color: white;
	font-size: 23px;
	text-shadow: 1px 1px 1px black;
	line-height: 1.75em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

#getstarted-or-txt {
	position: relative;
	color: white;
	font-size: 28px;
	top: 1.5px;
	text-shadow: 3px 3px 3px black;
}

#s1-img {
	float: right;
	width: 30%;
	vertical-align: top;
}

.section1-links strong {
	color: #c2dff2;
	text-decoration: underline;
}

.section1-links p {
	display: inline-block;
	position: relative;
	top: -5px;
	font-size: 16px;
}

.section2 {
	height: auto;
	background: #426fb7;
	color: white;
}

#s2-img {
	float: right;
}

.section3 {
	height: auto;
	background: #47879a;
	color:white;
}

#s3-p {
	float: right;
}

#s3-img {
	height: 95%;
	width: 95%;
}

.circle {
	position: relative;
	width: 200px;
	height: 200px;
	/*border-radius: 50%;
	border: 15px solid #a6cae1;*/
	margin: 25px auto;
	vertical-align: middle;
}

.section-content {
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	margin: auto 0 auto 1.6%;
	vertical-align: middle;
}

::selection {
	text-shadow: none;
	background-color: rgba(0,0,255,0.20); /* firefox selection (on WINDOWS) looks weird, so this has to do */
}

.section-title {
	font-size: 40px;
	margin-left: -5px;
}

.section4 {
	height: auto;
	background: #5d91c7;
	color: white;
}

#s4-img {
	float: right;
	margin-right: 40px;
}

.section-content a {
	color: #0d2dd0;
	text-shadow: 2px 2px 2px rgb(255,255,255,0.25);
}

.s-img {
	position: relative;
}

.section-green {
	height: 505px;
}

.section-green .col {
	margin: 0 0 0 0;
}

.section5-links {
	height: 100%;
	width: 100%;
	color:white;
}

.button-big {
	width: 100%;
	height: 165px;
	background-color: #88e690;
	border-radius: 2px;
	border: 2px solid #7bba7f;
}

.section4-status .status-content {
	position: relative;
	top: 15%;
}

.section5-status h2 {
	font-weight: 500;
}

.status-alt {
	height: 350px;
	display: none;
	background-color: #e3fbe6;
}

.status-alt .sidenotes {
	width: 40%;
	font-size: 13px;
	vertical-align: middle;
}

.status-cont-alt {
	width: 245px;
	line-height: 18px;
}

.status-cont-alt .section {
	margin-top: 0px;
	margin-bottom: 0px;
}

.status-cont-alt .section:before {
	display: none;
}

.status-cont-alt .section:after {
	display: none;
}

.bg--red {
	background: linear-gradient(150deg, #ff7979, #eb4d4b);
}

.bg--green {
	background: linear-gradient(150deg, #26de81, #20bf6b);
}

.bg--off-white {
	background: linear-gradient(150deg, #c8d6e5, #89a1b3);
}

.measure {
	margin-left: 2em;
	margin-bottom: 1em;
}

.section5-links > h1 {
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}