/* CSS Document supporting responsive web design */
#banner, #footer {}
html, body { font-family: Verdana !important;}
h1, .title {color:#80379B !important; font-size:20.5px !important; font-family:'Libre Franklin' !important;font-weight:700 !important}
h2{ color:#007AC9}
#banner { border-top:15px solid #0039a5; min-height:70px; margin:-10px;  }
li { margin-top:.5em; }
div.bannerBlueLine { background-color:#007ac9;  width:100%; height:60px; padding-top:20px; padding-right:30px }
div.bannerSM { float:right; padding-right:30px}
div.bannerBeforeTranslator {float:left;padding-right:50px}
div.bannerEachSM {float:left; padding-right:20px}
div.extraInfo { padding:.5em 1em; background:#fff; border:2px solid #007ac9; margin:.5em 0 1em; overflow:hidden; }
li.half, li.third, li.fourth, li.twoThirds, li.threeFourths { list-style:none; padding-left:0; margin-left:0; margin-bottom:1em; }
.half  { float:left; width:47.45%; margin-right:2.5%; }
.third { float:left; width:30.8%; margin-right:2.5%; }
.fourth { float:left; width:22.475%; margin-right:2.5%; }
.twoThirds { float:left; width:64.1%; margin-right:2.5%; }
.threeFourths { float:left; width:72.425%; margin-right:2.5%; }
#simpleMain {background:#fff; color:#232323; padding:.5em 2em 2em; margin-top:20px;}
#appQuestions { margin-left:auto; margin-right:auto; margin-bottom:2.25em; background:#fff; color:#232323; padding:.5em 2em 2em }
#footer { background:#ffffff;padding-top:1.5em; clear:both; overflow:hidden; color:#363639; font-size:12px }
#footer a:link, #footer a:visited { color:#363639; text-decoration:none; }
#footer a:hover, #footer a:active { color:#005dab;text-decoration:underline; }
#footer h2 {  font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 700;
    color: rgb(0, 57, 166);
    font-size: 1.5em; margin-bottom:.8em; border-bottom: 2px solid #80379B; padding:.5em }

.fancyButtons {
	width: 100%;
}
.fancyButtonsWrapper {
	background-color: #007ac9;
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	flex-wrap: nowrap;
	flex: 1 0 auto;
	width: 100%;
}

.fancyButtonOutside {
	background-color: transparent;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	min-width: 250px;
	margin: 0px;
}

.fancyButtonIconDiv {
	height: 200px;
	border-radius: 0px 125px 125px 0px;
	border: 3px solid springgreen;
	border-left: none;
	align-content: center;
	box-shadow: 5px 0 6px rgba(0,0,0.3,0.3);
	margin-right: 1em;
	font-size: 1.1em;
	font-weight: 700;
}

.fancyButtonOutside:hover .fancyButtonIcon {
	transform: scale(1.1);
}

.fancyButtonIcon {
	border: 2px solid rgba(0,0,0,0);
	color: #fff;
	padding: 1em;
	align-self: center;
	justify-self: center;
	position: relative;
	text-align: start;
	transition: transform 0.2s ease-in-out, 
				background-color 0.2s ease-in-out, 
				border 0.2s ease-in-out;
}

.fancyButtonIcon img {
	margin-bottom: 1em;
}

.fancyButtonIcon p::after {
	content: '';
	height: 3px;
	width: 100%;
	max-width: 2em;
	background: white;
	position: absolute;
	left: 1em;
	bottom: 10px;
	border-radius: 2px;
}

.fancyButtonOutside:hover .fancyButtonIcon p::after {
	max-width: 85%;
}
.blue {
	background-color: #0039A6;
	border-color: #007ac9;
}

.purple {
	background-color: #80379B;
	border-color: #a258be;
}

.green {
	background-color: #468512;
	border-color: #4e7927;
}

.orange {
	background-color: #a95e00;
	border-color: #e98300;
}

.orange:hover {}

/*.fancyButtonOutside:hover .orange {
	background-color: #e98300;
	border-color: #e98300;
}*/

ul.footerLinks { list-style:none; padding-left:0; margin-left:auto; margin-right:auto; font-size:14px; font-family:Arial}
ul.footerLinks li { float:left; width:20%; padding-right:4.4%; padding-left:.5%; }
ul.footerLinks li ul.linkList{ list-style:none; padding-left:0; margin-left:0; }
ul.footerLinks li ul.linkList li { float:none; width:99%; padding-right:0; }
h2.footerLinksSubtitle {max-width:11em; margin-left:auto; margin-right:auto}

#btnSubmit { background-color:#468513; color:#fff; font-weight:bold; text-transform:uppercase; padding:.5em 2em; border-width:2px; border-style:solid; border-color:#64bd1b #2a4f0b #2a4f0b #64bd1b; }
div.responsive, fieldset.responsive { overflow:hidden; }
div.responsive p, fieldset.responsive p { clear:both; }
div.responsive p label, fieldset.responsive p label { float:left; width:12em; padding-right:.25em; }
div.responsive.wideCol p label, fieldset.responsive.wideCol p label, div.responsive p label.wideCol { width:15em; } 
div.responsive.narrow p label, fieldset.responsive.narrow p label, div.responsive p label.narrow { width:7em; }
div.responsive p label.secondary { text-align:right; }
div.responsive p, fieldset.responsive p { clear:left; }
div.responsive p label.noFloat, fieldset.responsive p label.noFloat { float:none; width:auto; }

@media screen and (max-width: 1068px) {
	#footer { padding-left:2em; padding-right:2em; }
	img.WCCLS-logo {width:200px}
	.fancyButtonsWrapper {
		flex-direction: row;
		flex-wrap: wrap;
	}
	.fancyButtonOutside {
		flex-direction: column;
		width: 45%;
	}
	.fancyButtonOutside > div {
		width: 100%;
		background-color: transparent;
	}
	.fancyButtonIcon {
		text-align: center;
	}
}

@media screen and (max-width: 950px) {
	body { background:none; padding-left:0; }
	#banner h1 { margin-bottom:.25em; margin-left:-5%; margin-right:-5%; }
	#simpleMain { margin:0; padding:.5em 2% 1em; min-height:auto; }
	#footer { padding-left:2em; }
	.fancyButtons { 
		width:100%;
	}

	img.WCCLS-logo {width:150px}
}
@media screen and (max-width:760px) {
	ul.footerLinks li { float:none; width:100%; padding-right:0; }
	img.WCCLS-logo {width:150px}
}
/*  MOBILE NAVIGATION STYLES:  https://toddmotto.com/building-an-html5-responsive-menu-with-media-queries-javascript */
@media screen and (max-width: 550px) { 
	body { font-size:1.1em; }/* TSE 5/5/2015 */
	#simpleMain, #appQuestions { margin:0;  min-height:auto; }
	#simpleMain h1 { margin-top:0; }
	#banner h1 { clear:right; }
	div.bannerBlueLine { padding-right:5px }
	div.bannerSM { float:right; padding-right:10px}	
	div.bannerBeforeTranslator {float:left;padding-right:10px}
	div.bannerEachSM {padding-right:10px}
	img.WCCLS-logo {width:250px}
}

@media screen and (max-width: 580px) {
	.fancyButtonsWrapper {
		background-color: transparent;
		flex-direction: column;
	}
	
	.fancyButtonIconDiv { width: 100%; }
	.fancyButtonIcon { 
		align-self: start; 
		justify-self: start; 
		text-align: start;
		margin: 0 1em;
	}

	.fancyButtonOutside, .fancyButtonOutside > div {
		width: 100%;
		background-color: transparent;
	}
}

/*  =print styles */
@media print {
@page { margin: .5cm 1cm; }
html, body { margin:0; padding:0; background:none; font-family:"Century Gothic", Arial, Helvetica, sans-serif; }
#simpleMain, #appQuestions, #footerContainer, #footer { margin:0; padding:0; background:transparent; color:#333; width:100%; }
#appQuestions { padding-top:1em; }
#footer { text-align:center; }
#footerContainer, #footer { padding-bottom:0; margin-bottom:0; }
#banner, p.appQuestionsNav, .footerLinks, #feature_col, div.nav { display:none; }

#simpleMain{ min-height:50px; }
h1 { margin-top:0; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }

.noPrint { display:none; }
/* Hide McAfee Secure icon when printing */ .trustedsite-floating-element { position:absolute; left:0px; top:-999px; width:1px; height:1px; border:none; overflow:hidden; }
}