* {
	font-family: Ubuntu, sans-serif;
	margin:0;
	padding:0;
	box-sizing: border-box;
}

.row::after {
	content: "";
  	clear: both;
  	display: table;
}
/*Spinner Added By Rabeesh*/
.sk-fading-circle {
	margin-top: 15%;
	left: 50%;

	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 50;
}

.sk-fading-circle .sk-circle {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.sk-fading-circle .sk-circle:before {
	content: '';
	display: block;
	margin: 0 auto;
	width: 20%;
	height: 20%;
	background-color: #87CEFA;
	border-radius: 100%;
	-webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
	animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}

.sk-fading-circle .sk-circle2 {
	-webkit-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}

.sk-fading-circle .sk-circle3 {
	-webkit-transform: rotate(60deg);
	-ms-transform: rotate(60deg);
	transform: rotate(60deg);
}

.sk-fading-circle .sk-circle4 {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.sk-fading-circle .sk-circle5 {
	-webkit-transform: rotate(120deg);
	-ms-transform: rotate(120deg);
	transform: rotate(120deg);
}

.sk-fading-circle .sk-circle6 {
	-webkit-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	transform: rotate(150deg);
}

.sk-fading-circle .sk-circle7 {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.sk-fading-circle .sk-circle8 {
	-webkit-transform: rotate(210deg);
	-ms-transform: rotate(210deg);
	transform: rotate(210deg);
}

.sk-fading-circle .sk-circle9 {
	-webkit-transform: rotate(240deg);
	-ms-transform: rotate(240deg);
	transform: rotate(240deg);
}

.sk-fading-circle .sk-circle10 {
	-webkit-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	transform: rotate(270deg);
}

.sk-fading-circle .sk-circle11 {
	-webkit-transform: rotate(300deg);
	-ms-transform: rotate(300deg);
	transform: rotate(300deg);
}

.sk-fading-circle .sk-circle12 {
	-webkit-transform: rotate(330deg);
	-ms-transform: rotate(330deg);
	transform: rotate(330deg);
}

.sk-fading-circle .sk-circle2:before {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.sk-fading-circle .sk-circle3:before {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

.sk-fading-circle .sk-circle4:before {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.sk-fading-circle .sk-circle5:before {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

.sk-fading-circle .sk-circle6:before {
	-webkit-animation-delay: -0.7s;
	animation-delay: -0.7s;
}

.sk-fading-circle .sk-circle7:before {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}

.sk-fading-circle .sk-circle8:before {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
}

.sk-fading-circle .sk-circle9:before {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
}

.sk-fading-circle .sk-circle10:before {
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
}

.sk-fading-circle .sk-circle11:before {
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;
}

.sk-fading-circle .sk-circle12:before {
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
	0%, 39%, 100% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
}

@keyframes sk-circleFadeDelay {
	0%, 39%, 100% {
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
}
/* Misc formatting */
	.topLogo {margin-left: 40%;}
	.col-left {float:left; padding-top: 30px;}
	.col-right {float:right; padding-top: 30px;}
	#footer {background-color: black; color: white;}
	.socialIcons {color: white; font-size: xx-large;}
	.greenIcon {display:block; margin-left:auto; margin-right:auto; padding-bottom:10px;}
	.card {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: black; color: white; font-size: 4.3vw;}
	
	.homeSlides {display:none;}
	.fade {animation:fading 7s infinite; -webkit-animation-name:fading; -webkit-animation-duration:8s; -webkit-animation-iteration-count:infinite;}
	
	@keyframes fading{0%{opacity:0}
					 1%{opacity:0.05}3%{opacity:0.1}5%{opacity:0.2}7%{opacity:0.3}9%{opacity:0.4}11%{opacity:0.5}13%{opacity:0.6}15%{opacity:0.7}17%{opacity:0.8}19%{opacity:0.9}
					 20%{opacity:1}30%{opacity:1}40%{opacity:1}50%{opacity:1}60%{opacity:1}70%{opacity:1}80%{opacity:1}
					 81%{opacity:0.9}83%{opacity:0.8}85%{opacity:0.7}87%{opacity:0.6}89%{opacity:0.5}91%{opacity:0.4}93%{opacity:0.3}95%{opacity:0.2}97%{opacity:0.1}99%{opacity:0.05}
					 100%{opacity:0}}
	@-webkit-keyframes fading{0%{opacity:0}
					 1%{opacity:0.05}3%{opacity:0.1}5%{opacity:0.2}7%{opacity:0.3}9%{opacity:0.4}11%{opacity:0.5}13%{opacity:0.6}15%{opacity:0.7}17%{opacity:0.8}19%{opacity:0.9}
					 20%{opacity:1}30%{opacity:1}40%{opacity:1}50%{opacity:1}60%{opacity:1}70%{opacity:1}80%{opacity:1}
					 81%{opacity:0.9}83%{opacity:0.8}85%{opacity:0.7}87%{opacity:0.6}89%{opacity:0.5}91%{opacity:0.4}93%{opacity:0.3}95%{opacity:0.2}97%{opacity:0.1}99%{opacity:0.05}
					 100%{opacity:0}}
	.slides {text-align: center; display: flex; justify-content: center; align-items: center; padding-top: 15px; padding-bottom: 30px;}
	.slideshow-container {text-align:center;display: flex; justify-content: center; align-items: center;}
	.demoContainer {text-align:center;}
	.regFrame {width: 100%; height: 800px!important; border: none;}
	
			
/* For mobile phones: */
[class*="col-"] {
  	width: 100%;
}

	/* Navigation Small */
		.smallnav {overflow: hidden; background-color: black; position: fixed; top: 0; width: 100%; z-index: 100; visibility: visible;}
		.slidenav {display: none;}
		#smallBar {height: 60px; text-align:center; font-size: 24px;}
				
		/* Hide the links inside the navigation menu (except for logo/home) */
		.smallnav #myLinks2 {display: none;}
		
		/* Style navigation menu links */
		.smallnav a {color: white; padding: 14px 16px; text-decoration: none; display: block;}
		
		/* Style the hamburger menu */
		.smallnav a.icon {background: black; display: block; position: absolute; left: 0; top: 0; padding: 22px 22px;}
		
		/* Style the active link (or home/logo) */
		.active {background-color: #18A580; color: white;}
		.smallnav a:hover {background-color: #384ea1;}
		#smallBar:hover {background-color: orange;}
	
	/* Login button small*/
		.btn2 {background-color: #384ea1; border: none; color: white; padding: 10px 30px; font-size: 18px; cursor: pointer; border-radius: 5px; 
				margin: 0; position: absolute; top: 46%; -ms-transform: translateY(-46%); transform: translateY(-46%);}
		.btn2:hover {background-color: orange; border-style: solid; border-width: thin; border-color: white;}

	.smallLogoTop {visibility: visible; display: block; margin-left: auto; margin-right: auto; width: 100%; padding: 80px 40px 0 40px;}
	.firstRow {padding-bottom: 30px;}
	.phonePrint {font-size: 12.5vw; padding: 50px; font-weight: bolder; margin-top: -40px; text-align: center;}
	
	.footer-small {width:100%;}
	.footerFontSmall {font-size: 4vw; padding-top: 45px; padding-bottom: 45px; text-align: center;}
	.footerLogoSmall {display: block; margin-left: auto; margin-right: auto; padding-top: 20px;}
	
	.leadingText {font-size: 6vw; display: block; width: 100%; text-align: center; padding-bottom: 30px; padding-top:100px;}
	.leadingTextWhite {font-size: 6vw; display: block; width: 100%; text-align: center; padding-bottom: 30px; color: white;}
	.cardColumnSmall {width: 100%; display: block; margin-bottom: 20px; padding-left: 15px; padding-right: 15px; font-size: 3.5vw;}
	.solutions {width : 100%; margin-bottom: 40px; margin-top: 0px; }
	.differ {width: 92%; display:block; margin-left:auto; margin-right:auto; margin-bottom:15px; padding-left: 30px; padding-right: 30px; padding-top: 20px; 
			padding-bottom: 20px; border-radius: 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3); font-size: 4.2vw;}
					
	.ourStory {background:url('../assets/our-story-small.png') no-repeat center center; padding-top: 60px;}
	.ourStoryText {font-size: 3.9vw; padding: 15px 15px 15px 15px; background-color: rgba(0,0,0,0.4); color: rgba(255,255,255,1);}
	
	.member {background:url('../assets/our-story-small.png') no-repeat center center; padding-top: 60px;}
	.memberText {font-size: 3.9vw; padding: 15px 15px 15px 15px; background-color: rgba(0,0,0,0.4); color: rgba(255,255,255,1);}

	
	.appCardColumn {width: 100%; display: block; padding-left: 15px; padding-right: 15px; font-size: 3.5vw; background-color: #F2F2F2;}
	.appCard {box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.2); text-align: center; background-color: white;}
	.appCardLeft {padding-top: 15px; padding-bottom: 10px;}
	.appCardRight {padding-bottom: 15px; padding-top: 30px;}
	.cardTitles {padding-top: 20px; padding-bottom: 20px;}
	.appCardText {margin-bottom:40px; font-size: 5vw;}
	.homeAppPic {max-width:100%; /*margin-top:25px;*/}
	
	.infoButton {background-color: #384ea1; border: none; color: white; padding: 15px 25px 15px 25px; font-size: 16px; cursor: pointer; border-radius: 5px; 
				text-decoration: none; font-size: 22px;}
	.infoButton:hover {background-color: #18A580;}
	
	.newsRow {margin: 30px 0px -30px 0px; position: relative; text-align: center; color: white;}
	.newsPic {padding-left: 15px; padding-right: 15px; width: 100%;}
	.newsText1 {visibility: hidden;}
	.newsText2 {visibility: hidden;}
	.newsText5 {visibility: visible; position:absolute; top: 11%; left: 42%; font-size: 6vw; text-align: left;}
	.newsButton {background-color: #384ea1; color: white; padding: 15px 15px 15px 15px; font-size: 12px; cursor: pointer; border-radius: 5px; 
				text-decoration: none; font-size: 22px; position: absolute; top: 40%; left: 42%;}
	.newsButton:hover {background-color: #18A580; border-style:solid; border-width: 2px; border-color: white;}
	
	.eqaoButton {background-color: #384ea1; color: white; padding: 15px 15px 15px 15px; cursor: pointer; border-radius: 5px; text-decoration: none; font-size: 22px;}
	
	.copyright {font-size: 3vw; display: block; width: 100%; text-align: center; padding-bottom: 80px; background-color: black; color: white;}
	
	.homeHeader {margin-top: 60px;}
	.homeHeaderInner {display: flex; justify-content: center; align-items: center; min-height: 275px; background:url('../assets/home-banner2-sm.jpg'); background-size: cover;}
	.homeHeaderText{font-size: 7.5vw; font-weight: bolder; display: flex; justify-content: center; color: white;}
	.homeHeaderSubText {font-size: 5vw; font-weight: bolder; display: flex; justify-content: center; line-height: 1.5; color: white;}
	
	.breakout {margin-top: 30px; margin-bottom: 30px;}
	.generalText {font-size: 5vw; padding-bottom: 50px; width: 85%; line-height: 1.4; display: block; margin-left: auto; margin-right: auto;}
	
	.cardWhite {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: /*white*/ darkgrey; color: black; font-size: 4.3vw; 
				-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 1.8s background;
				-moz-transition: 1.8s background; transition: 1.8s background;}
		.cardWhite.entered {background-color: white;}
	
	.homeSlide1 {visibility: visible;}
	.homeSlideWide {display: none;}
	.homeText {font-size: 6vw; display: block; width: 100%; text-align: center; padding-bottom: 30px; padding-left: 10px; padding-right: 10px;}
	.homeTextSubSmall {font-size: 5vw;}
	
	.dot {cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #7cbbff; border-radius: 50%; display: inline-block; 
		  transition: background-color 0.6s ease; border: thin white solid;}
		.activeDot, .dot:hover {background-color: #d80027; border: white solid thin;}
	.sliderSmall {z-index: 5; position: absolute; padding-top: 270px; height: 300px;}
	
	.cardRow {width: 100%;}
	.col6SmallLeft {margin-bottom: 30px;}
	.col6SmallRight {margin-bottom: 30px;}
	.col4SmallLeft {margin-bottom: 30px;}
	.col4SmallMiddle {margin-bottom: 30px;}
	.col4SmallRight {margin-bottom: 30px;}
	.backImage1 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 15px 20px 15px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/homeBox1.jpg') no-repeat center center; background-size: cover;}
	.backImage2 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 15px 20px 15px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/homeBox2.jpg') no-repeat center center; background-size: cover;}
	.backImage3 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/bg-blue.png') no-repeat center center; background-size: cover;}
	.backImage4 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/bg-purple.png') no-repeat center center; background-size: cover;}
	.backImage5 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/bg-slate.png') no-repeat center center; background-size: cover;}
	.backImage6 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/bg-darkblue.png') no-repeat center center; background-size: cover;}
	.backImage7 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/bg-neonblue.png') no-repeat center center; background-size: cover;}
	.backImage8 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/bg-green.png') no-repeat center center; background-size: cover;}
	.backImage9 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/homeBox9.jpg') no-repeat center center; background-size: cover;}
	.backImage10 {display: flex; justify-content: center; align-items: center; min-height: 260px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 5.5vw;
					 background:url('../assets/homeBox10.jpg') no-repeat center center; background-size: cover;}
					 
	.stepRow {margin: 0px 0px 50px 0px;}
	.stepCard {width: auto; padding: 0 0 0 0; text-align: center; font-size: 5.6vw; box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.2); 
				background-color: white; margin: 15px 15px 15px 15px;}
	.homeSubText {font-size: 4vw;}
	.stepPic {max-width:100%;}
	
	.planRow {background-color:#F2F2F2; padding-top:50px;}
	.planCardColumn {width: 100%; display: block; padding-left: 15px; padding-right: 15px; font-size: 3.5vw; background-color: #F2F2F2;}
	.planCard {border: thick darkgray solid; border-radius: 15px; text-align: center; background-color: white;}
	.planCardLeft {}
	.planCardRight {padding-bottom: 15px; padding-top: 30px;}
	.planPopular {border-color: #18A580; border-width: 10px;}
	.planTitles {padding-top: 0px; padding-bottom: 0px; font-weight: bolder; font-size: 10vw;}
	.planCardText {margin-top: 15px; font-size: 6vw;}
	.planSubText {font-size: 5vw;}
	.planCardText2 {font-size: 3vw; margin: 10px 0 15px 0; color: gray;}
	
	.rowPlanButton {background-color: #F2F2F2; padding: 10px 0 30px 0; display: flex; justify-content: center; align-items: center;}
	.planButton {background-color: #384ea1; border: none; color: white; padding: 15px 25px 15px 25px; font-size: 16px; cursor: pointer; border-radius: 5px; 
				text-decoration: none; font-size: 22px; font-weight: bold; margin-bottom: 20px;}
	.planButton:hover {background-color: #18A580;}
	
	.schoolHeaderWide {display: none;}
	.schoolHeader {display: block; visibility: visible; margin-top: 60px; text-align: center;}
	.schoolHeaderInner {display: flex; justify-content: center; align-items: center; min-height: 275px; background:url('../assets/school-banner-sm.jpg'); background-size: cover;}
	.schoolSubHeader {height: 200px; background-color: #384ea1;  display: flex; justify-content: center; align-items: center; font-size: 4.5vw; color: white;
					line-height: 1.5; text-align: center; padding: 0 15px 0 15px;}
	.schoolSubHeaderWide2 {display: none;}
	.schoolSubHeader2 {height: auto; display: flex; justify-content: center; align-items: center; font-size: 4.3vw; line-height: 1.5; text-align: center; padding: 0 15px 30px 15px;}
	
	.schoolHighlightRowWide{display: none;}
	.schoolHighlightRow {width: 100%; margin-bottom: 30px;}
	.schoolHighlightImage1 {display: flex; justify-content: center; align-items: center; padding: 20px 50px 20px 50px;
					 		text-align: center; color: white; font-size: 5.5vw;
					 		background:url('../assets/bg-blue-solid.png') no-repeat center center; background-size: cover;}
	.schoolHighlightImage2 {display: flex; justify-content: center; align-items: center; padding: 20px 50px 20px 50px;
					 		text-align: center; color: white; font-size: 5.5vw;
					 		background:url('../assets/bg-slate-solid.png') no-repeat center center; background-size: cover;}
	.schoolHighlightImage3 {display: flex; justify-content: center; align-items: center; padding: 20px 50px 20px 50px;
					 		text-align: center; color: white; font-size: 5.5vw;
					 		background:url('../assets/bg-pink-solid.png') no-repeat center center; background-size: cover;}
	.schoolHighlightImage4 {display: flex; justify-content: center; align-items: center; padding: 20px 50px 20px 50px;
					 		text-align: center; color: white; font-size: 5.5vw;
					 		background:url('../assets/bg-purple-solid.png') no-repeat center center; background-size: cover;}
	.schoolHighlightList li {margin-bottom: 15px;}
	
	.videoWide {display: none;}
	.videoSmall {display: block; width: 100%; height: auto; margin: 0 0 20px 0; padding: 0 0 0 0; text-align: center;}
	
	.placeHolderText {font-size: 3vw;}
	.homeTextSubSmall {font-size: 5vw;}
	.homeText {font-size: 6.5vw;}
	.infoText {text-align: center; font-size: 4vw; width: 100%; margin-left: auto; margin-right: auto; line-height: 1.5; font-weight: bold; padding-left: 10px; padding-right: 10px;}
	.infoTextWhite {text-align: center; font-size: 4vw; width: 100%; margin-left: auto; margin-right: auto; line-height: 1.5; font-weight: bold; padding-left: 10px; padding-right: 10px; color: white;}
	input[type=text], select, textarea {width: 80%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px;
										margin-bottom: 16px; resize: vertical;}
	input[type=submit] {background-color: #384ea1; color: white; padding: 12px 75px; border: none; border-radius: 4px; cursor: pointer; font-size:1.3em;
	    				margin-top:15px;}
		input[type=submit]:hover {background-color: #18A580; color: white;}
	
	.privacyContainer {width: 100%; margin-top: 100px; margin-bottom: 50px; padding-left: 15px; padding-right: 15px; line-height: 1.5;}
	.privacyLargeText {padding: 15px 0 15px 0;}
	.bullets {padding-left:30px;}
	.smallTitleBump {padding-top: 10px;}
	
	.newsRow {width: 100%; color: black; margin: 0; margin-top: 20px;}
	.newsViewImage {display: flex; justify-content: center; align-items: center;}
	.newsLink {text-decoration: none; display: flex; justify-content: center; align-items: center;}
	.newsImageBox {display: flex; justify-content: center; align-items: center; width:50%; padding-top: 10px; padding-bottom: 10px;}
	.newsLinkText {font-size: 3.8vw; font-weight: bold; padding: 10px 10px 10px 0;}
	.newsBoxPaddingLeft {width: 100%; padding-left: 10px; padding-right: 10px; padding-bottom: 10px;}
	.newsBoxPaddingRight {width: 100%; padding-left: 10px; padding-right: 10px; padding-bottom: 10px;}
	.borderSmall {border: medium darkgray solid;}
	
	.registrationSmall {margin-top: 75px; margin-bottom: 30px; width: 100%; display: block; margin-left: auto; margin-right: auto;}
	
	.eqaoRow {width: 100%; text-align: center; margin-bottom: 50px; font-size: 4vw;}
	.eqaoText {line-height: 1.5; margin-bottom: 20px;}
	
	.couponImage {display: none;}
	.couponText {font-size: 4.5vw; text-align: center; font-weight: normal; background-color: #008DCE; padding: 10px 10px 10px 10px; margin: 10px 15px 10px 15px; color: white;}

	.btnMobile {background-color: #384ea1; border: none; color: white; padding: 10px 30px; font-size: 20px; cursor: pointer; border-radius: 5px; 
			margin: 0; float: right;}
	.btnMobile:hover {background-color: orange; border-style: solid; border-width: thin; border-color: white;}


/* For desktop: */
@media only screen and (min-width: 768px) {
	[class*="col-"] {
		float: left;
	}

/* For desktop: */
	/* Navigation Wide */
		.smallnav {display: none;}
		.slidenav {display: block; position: fixed; top: 0; width: 100%; z-index: 100;}
		
	/* Login button wide */
		.btn {background-color: #384ea1; border: none; color: white; padding: 10px 30px; font-size: 20px; cursor: pointer; border-radius: 5px; 
				margin: 0; float: right;}
		.btn:hover {background-color: orange; border-style: solid; border-width: thin; border-color: white;}

  	.col-1 {width: 8.33%;}
  	.col-2 {width: 16.66%;}
  	.col-3 {width: 25%;}
  	.col-4 {width: 33.33%;}
  	.col-5 {width: 41.66%;}
  	.col-6 {width: 50%;}
  	.col-7 {width: 58.33%;}
  	.col-8 {width: 66.66%;}
  	.col-9 {width: 75%;}
  	.col-10 {width: 83.33%;}
  	.col-11 {width: 91.66%;}
  	.col-12 {width: 100%;}
	
	.smallLogoTop {display:none;}
	.firstRowWide {padding-top: 95px; padding-bottom: 40px;}
	.vertical-centre {margin: 0; position: absolute; top: 45%; -ms-transform: translateY(-45%); transform: translateY(-45%);}
	.bigPrint {font-size: 4vw; padding: 50px; text-align: left;}
	
	.footerLogoWide {float: right; margin-top: 20px; padding-right: 30px;}
	.footerFontWide {font-size: 1.3vw !important; padding-top: 45px; padding-bottom: 20px; text-align: left !important;}
	
	.cardWide {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: black !important; height: 210px; 
				color: white !important; font-size: 1.2vw;}
	.cardWide:hover {box-shadow: 0 4px 8px 0 rgba(255, 0, 0, 0.5);}
	.cardColumnWide {float: left; width: 33.3% !important; font-size: 1.2vw !important; padding: 0px 60px 0px 60px !important;}
	.cardLeft {padding: 0px 0px 0px 120px !important;}
	.cardMiddle {padding: 0px 60px 0px 60px !important;}
	.cardRight {padding: 0px 120px 0px 0px !important;}
			
	.cardHomeWide {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: black !important; height: 240px; 
					color: white !important; font-size: 1.2vw;}
	.cardHomeWideWhite {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); padding: 16px; text-align: center; background-color: /*white*/ darkgrey; height: 240px; 
						color: black; font-size: 1.2vw;
						-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: 1.8s background;
						-moz-transition: 1.8s background; transition: 1.8s background;}
	.cardHomeWideWhite.entered {background-color: white;}

	.leadingTextWide {font-size: 2.3vw; display: block; width: 100%; text-align: center; padding-bottom: 30px; padding-top:100px;}
	.solutionsWide {background:url('../assets/solutions.png') no-repeat center center !important; height:800px; width: 100%; margin-bottom: 30px;}
	.differWide {width: 400px !important; text-align:left !important; font-size: 1vw; padding: 10px 10px 10px 15px; border-radius: 5px; 
					background-image:url('../assets/green-fade.png'); margin: 5px 5px 5px 5px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);}
	.point1Wide {padding-left:30%; padding-top:50px;}
	.point2Wide {padding-left:11%; padding-top:20px;}
	.point3Wide {padding-left:11%; padding-top:35px;}
	.point4Wide {padding-left:18%; padding-top:55px;}
	.point5Wide {padding-left:14%; padding-top:60px;}
	.point6Wide {padding-left:16%; padding-top:60px;}
	.point7Wide {padding-left:26%; padding-top:40px;}
	.point8Wide {padding-left:7%; padding-top:40px;}
		
	.ourStoryWide {background:url('../assets/our-story-large.jpg') no-repeat center center !important; width: 100%; height: auto; color: white; padding-top: 100px;}
	.ourStoryTextWide {margin: 25px 25px 25px 56% !important; padding: 15px 15px 15px 15px !important; width: 43%; background-color: rgba(0,0,0,0.5) !important; 
						border-radius: 5px; color: rgba(255,255,255,1); line-height: 1.5; font-size: 1.1vw !important}

	.memberWide {background:url('../assets/ad-support.png') no-repeat center center !important; width: 100%; height: auto; color: white; padding-top: 100px;}
	.memberTextWide {margin: 25px 25px 25px 56% !important; padding: 15px 15px 15px 15px !important; width: 43%; background-color: rgba(0,0,0,0.5) !important; 
						border-radius: 5px; color: white; line-height: 1.5; font-size: 1.5vw !important}
		
	.appCardRowWide {}
	.appCardColumnWide {float: left; width: 50%;}
	.appCardLeftWide {padding: 0px 50px 50px 160px;}
	.appCardRightWide {padding: 0px 160px 50px 50px;}
	.appCardWide {font-size: 1.2vw;}
	
	.cardTitlesWide {padding-top: 20px; padding-bottom: 20px;}
	.appCardTextWide {margin-bottom: 40px; font-size: 1.5vw;}
	.infoButtonWide {background-color: #384ea1; border: none; color: white; padding: 15px 25px 15px 25px; font-size: 16px; cursor: pointer; border-radius: 5px; 
						text-decoration: none; font-size: 22px;}
	.infoButtonWide:hover {background-color: #18A580;}
	.homeAppPicWide {max-width:100%;}
	
	.newsRowWide {width:75%; display:block; margin-left:auto; margin-right:auto; position: relative; text-align: center; color: white; margin-bottom: 40px;}
	.newsColumnWide {margin-top: 50px; margin-bottom: 50px;}
	.newsPicWide {background-color: white;}
	.newsText1Wide {visibility: visible; position: absolute; top: 25%; left: 45%; font-size: 2.5vw; text-align: left;}
	.newsText2Wide {visibility: visible; position: absolute; top: 40%; left: 45%; font-size: 1.5vw; text-align: left; margin-right: 90px; line-height: 1.3;}
	.newsText5Wide {visibility: hidden;}
	.newsButtonWide {background-color: #384ea1; color: white; padding: 15px 25px 15px 25px; font-size: 16px; cursor: pointer; border-radius: 5px; 
						text-decoration: none; font-size: 22px; position: absolute; top: 65%; left: 60%;}
	.newsButtonWide:hover {background-color: #18A580; border-style:solid; border-width: 2px; border-color: white;}
	
	.copyrightWide {font-size: 0.7vw; display: block; width: 100%; text-align: center; padding-bottom: 50px; background-color: black; color: white;}

	.sidenav {height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; 
				padding-top: 60px; line-height: 3;}
	.sidenav a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 22px; color: #818181; display: block; transition: 0.3s;}
	.sidenav a:hover {color: cornflowerblue; font-weight: bolder;}
	.sidenav .closebtn {position: absolute; top: 0; right: 25px; font-size: 32px; margin-left: 50px;}
	#main {transition: margin-left .5s; padding: 16px;}
	.navMenu {font-size: 30px; cursor: pointer; background-color: #18A580; width: 100%; padding: 15px; color: white;}
	.navMenu:hover {color: #384ea1;}
	@media screen and (max-height: 450px) {.sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;}}
	
	.homeHeaderWide {margin-top: 75px;}
	.homeHeaderWideInner {display: flex; justify-content: center; align-items: center; min-height: 350px;
							background:url('../assets/home-app-banner2.jpg') no-repeat; }
	.homeHeaderTextWide {font-size: 4.2vw; font-weight:bolder; display: flex; justify-content: center; color: white;}
	.homeHeaderSubTextWide {font-size: 1.9vw; font-weight:bolder; display: flex; justify-content: center; color: white;}
	
	.breakoutWide {margin-top: 30px; margin-bottom: 35px;}
	.generalTextWide {font-size: 1.5vw; padding-bottom: 50px; width: 85%; line-height: 1.4; display: block; margin-left: auto; margin-right: auto;}
	
	.homeSlideWide {visibility: visible;}
	.homeSlide {display:none;}
	.homeTextWide {font-size: 2.0vw; display: block; width: 65%; margin-right: auto; margin-left: auto; text-align: center; padding-bottom: 30px; line-height: 1.5;}
	.homeTextSubWide {font-size:1.5vw}
	.dotWide {cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #7cbbff; border-radius: 50%; display: inline-block; 
		  		transition: background-color 0.6s ease; border: thin white solid;}
		.activeDot, .dotWide:hover {background-color: #d80027; border: white solid thin;}
	.sliderWide {z-index: 5; position: absolute; padding-top: 318px; height: 350px;}
	
	.publishSliderWide {z-index: 5; position: absolute; padding-top: 530px; height: 0px;}
	
	.cardRowWide {padding-left: 120px; padding-right: 120px; margin-bottom: 30px;}
	.col6WideLeft {padding-right: 25px;}
	.col6WideRight {padding-left: 25px;}
	.col4WideLeft {padding-right: 25px;}
	.col4WideMiddle {}
	.col4WideRight {padding-left:25px;}
	.backImageWide1 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/homeBox1.jpg') no-repeat center center; background-size: cover;}
	.backImageWide2 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/homeBox2.jpg') no-repeat center center; background-size: cover;}
	.backImageWide3 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/bg-blue.png') no-repeat center center; background-size: cover;}
	.backImageWide4 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/bg-purple.png') no-repeat center center; background-size: cover;}
	.backImageWide5 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/bg-slate.png') no-repeat center center; background-size: cover;}
	.backImageWide6 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/bg-darkblue.png') no-repeat center center; background-size: cover;}
	.backImageWide7 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/bg-neonblue.png') no-repeat center center; background-size: cover;}
	.backImageWide8 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/bg-green.png') no-repeat center center; background-size: cover;}
	.backImageWide9 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/homeBox9.jpg') no-repeat center center; background-size: cover;}
	.backImageWide10 {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: 20px 50px 20px 50px;
					 text-align: center; color: white; font-size: 1.6vw;
					 background:url('../assets/homeBox10.jpg') no-repeat center center; background-size: cover;}
	
	.stepRowWide {display: flex; justify-content: center; align-items: center; margin: 0px 20px 80px 20px;}
	.stepCardsWide {width: 25%; min-height: 450px; padding: 0 0 0 0; text-align: center; font-size: 1.6vw; 
					box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.2); background-color: white;}
	.homeSubTextWide {font-size:1vw;}
	.cardMarginRight {margin-right:20px;}
	.stepPicWide1 {max-width:100%; height: 250px;}
	.stepPicWide2 {max-width:100%; height: 278px;}
	.stepPicWide3 {max-width:100%; height: 278px;}
	.stepPicWide4 {max-width:100%; height: 232px;}
	
	.planRowWide {background-color: #F2F2F2; padding-top: 50px; padding-bottom: 20px;}
	.planCardColumnWide {float: left; width: 50%;}
	.planCardLeftWide {padding: 0px 50px 50px 160px;}
	.planCardRightWide {padding: 0px 160px 50px 50px;}
	.planCardWide {font-size: 1.2vw; height: 520px; padding: 50px 50px 50px 50px;}
	.planPopularWide {border-color: #18A580; border-width: 10px; padding: 10px 50px 50px 50px !important;}
	.planTitlesWide {padding-top: 20px; padding-bottom: 20px; font-weight: bolder; font-size: 3vw;}
	.planCardTextWide {margin-bottom: 0px; font-size: 1.8vw;}
	.planSubTextWide {font-size: 1.3vw;}
	.planCardTextWide2 {font-size: 0.9vw; margin-top: 20px; color: gray;}
	
	.rowPlanButtonWide {background-color: #F2F2F2; padding: 0 0 50px 0; display: flex; justify-content: center; align-items: center;}	
	.planButtonWide {background-color: #384ea1; border: none; color: white; padding: 20px 40px 20px 40px; cursor: pointer; border-radius: 5px; 
						text-decoration: none; font-size: 22px; font-weight: bold;}
	.planButtonWide:hover {background-color: #18A580;}
	.homeCouponRowWide {display: block; padding-left: 250px; padding-right: 250px;}
	.homeCouponImage1Wide {display: flex; justify-content: center; align-items: center; padding: 20px 50px 0px 50px; text-align: center; color: white; font-size: 1.6vw;
					 			background:url('../assets/bg-blue-solid.png') no-repeat center center; background-size: cover;}
	.couponImageWide {display: block; padding-bottom: 20px;}
	.couponTextWide {font-size:1.3vw; text-align:center; background-color: transparent;}
	
	.schoolHeaderWide {display: block; visibility: visible; margin-top: 75px;}
	.schoolHeaderWideInner {display: flex; justify-content: center; align-items: center; min-height: 350px;
							background:url('../assets/school-banner2.jpg') no-repeat; }
	.schoolHeader {display: none;}
	.schoolSubHeaderWide {height: 200px; background-color: #384ea1;  display: flex; justify-content: center; align-items: center; font-size: 1.8vw; color: white;
						line-height: 1.5; text-align: center;}
	.schoolSubHeader2 {display: none;}
	.schoolSubHeaderWide2 {height: 300px; display: flex; justify-content: center; align-items: center; font-size: 1.5vw; line-height: 1.6; text-align: center;}
	
	.schoolHighlightRow {display: none;}
	.schoolHighlightRowWide {display: block; padding-left: 120px; padding-right: 120px;}
	.schoolHighlightImage1Wide {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: auto 50px auto 50px; text-align: center; color: white; font-size: 1.6vw;
					 			background:url('../assets/bg-blue-solid.png') no-repeat center center; background-size: cover;}
	.schoolHighlightImage2Wide {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: auto 50px auto 50px; text-align: center; color: white; font-size: 1.6vw;
					 			background:url('../assets/bg-slate-solid.png') no-repeat center center; background-size: cover;}
	.schoolHighlightImage3Wide {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: auto 50px auto 50px; text-align: center; color: white; font-size: 1.6vw;
					 			background:url('../assets/bg-pink-solid.png') no-repeat center center; background-size: cover;}
	.schoolHighlightImage4Wide {display: flex; justify-content: center; align-items: center; min-height: 350px; padding: auto 50px auto 50px; text-align: center; color: white; font-size: 1.6vw;
					 			background:url('../assets/bg-purple-solid.png') no-repeat center center; background-size: cover;}
	.schoolHighlightPointsWide {margin-bottom:30px;}
	
	.videoSmall {display: none;}
	.videoWide {display: block; margin-top: 50px; margin-bottom: 50px;}
	.player {display: block; width: 960px; height: 540px; margin: 0 auto;}
	.videoControls {text-align:center; padding: 5px; opacity: 0; transition: opacity .3s; background-color: white; margin-top: 10px;}
	#videoContainer:hover #videoControls {opacity: .9;}
	/*button {background: #0056B9; border: thin; border-color: white; border-style: solid; border-radius: 3px; color: white; font-size: 1.2em; width: 125px;
			height: 40px; margin:0 15px 0 15px;}
	button:hover {cursor: pointer; background: white; color: #0056B9;}*/
	#play-pause {background: #384ea1; border: none; color: white; padding: 15px 25px 15px 25px; font-size: 22px; border-radius: 5px; width: 190px; margin:0 15px 0 15px;}
	#play-pause:hover {cursor: pointer; background: #18A580; color: white;}
	#mute {background: #384ea1; border: none; color: white; padding: 15px 25px 15px 25px; font-size: 22px; border-radius: 5px; width: 190px; margin:0 15px 0 15px;}
	#mute:hover {cursor: pointer; background: #18A580; color: white;}
	#fullScreen {background: #384ea1; border: none; color: white; padding: 15px 25px 15px 25px; font-size: 22px; border-radius: 5px; width: 190px; margin:0 15px 0 15px;}
	#fullScreen:hover {cursor: pointer; background: #18A580; color: white;}
	#seekBar {width: 360px; background-color: red;}
	#volumeIcon {padding: 0 15px 0 15px;}
	#volumeBar {width: 60px;}
	
	.infoTextWide {text-align: center; font-size: 1.4vw; width: 65%; margin-left: auto; margin-right: auto; line-height: 1.5; font-weight: bold;}
	
	.placeHolderTextWide {font-size: 1vw;}
	input[type=text], select, textarea {width: 50%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px;
										margin-bottom: 16px; resize: vertical;}
	input[type=submit] {background-color: #384ea1; color: white; padding: 12px 75px; border: none; border-radius: 4px; cursor: pointer; font-size:1.3em;
	    				margin-top:15px;}
		input[type=submit]:hover {background-color: #18A580; color: white;}
		
	.privacyContainerWide {width: 80%; position: relative; margin-left: auto; margin-right: auto; margin-top: 100px; margin-bottom: 50px; line-height: 1.5;}
	.privacyLargeTextWide {padding: 15px 0 15px 0;}
	.bulletsWide {padding-left: 30px;}
	.smallTitleBumpWide {padding-top: 10px;}
	
	.newsRowWide {color: black; width: 100%; margin-top: 0; margin-bottom: 0; display: flex; justify-content: center; align-items: center;}
	.newsViewImageWide {padding-top: 20px; padding-bottom: 20px; display: flex; justify-content: center; align-items: center;}
	.newsLinkWide {text-decoration: none; display: flex; justify-content: center; align-items: center;}
	.newImageBoxWide {display: flex; justify-content: center; align-items: center;}
	.newsLinkTextWide {font-size: 1.5vw; margin-right:20px;}
	.newsBoxPaddingLeftWide {float: left; width: 50%; padding: 0px 15px 15px 120px;}
	.newsBoxPaddingRightWide {float: right; width: 50%; padding: 0px 120px 15px 15px;}
	.borderWide {border: thick darkgray solid;}
	
	.registrationWide {margin-top: 95px; margin-bottom: 50px; max-width: 80%; display: block; margin-left: auto; margin-right: auto;}
	
	.eqaoRowWide {text-align: center; margin-bottom: 50px; font-size: 1.1vw;}
	.eqaoButtonWide {background-color: #384ea1; color: white; padding: 15px 25px 15px 25px; cursor: pointer; border-radius: 5px; text-decoration: none; font-size: 22px;}
	.eqaoTextWide {line-height: 1.5; margin-bottom: 20px;}
	
	#cf img { -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;}
	@keyframes cf3FadeInOut {0% {opacity:1;} 45% {opacity:1;} 55% {opacity:0;} 100% {opacity:0;}}
	#cf img.top {animation-name: cf3FadeInOut; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-duration: 1.5s; animation-direction: alternate;}
}