/*top level container styles */
	
	body {
		font-family: 'PT Sans', sans-serif;
		color: #444;
		font-size: calc(12px + 0.5vw);
		overflow-x:hidden;
		margin:0;
		overflow-y:scroll;
		max-width: 100%;
	}
	
	#content {
		width: 80%;
		max-width: min(100%, 1600px);
		margin: auto auto;
		padding-top: 80px;
	}	
	
	#about,#pricing,#contact {
		display: none;
	}
	
	#home,#pricing,#contact {
		padding-bottom: 40px;
	}
	
	/*navigation */
	
	#header {
		height: 80px;
		background: #555;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 5;
		right:0;
	}
	
	#headerLogo {
        width: calc(110px + 4vw);
        height: auto;
        position: absolute;
        left: 3%;
        top: 50%;
        transform: translateY(-50%);
	}
	
	#header a {
    	display: inline-block;
        padding: 10px;
        border-radius: 8px;
    }
	
	#headerPageLinks, #login-or-reg {
        position: absolute;
        top: 50%;
        color: #fff;
        font-size: calc(13px + 0.3vw);
        transform: translateY(-50%);
    }
	
	#header a:hover, #header a:link, #header a:visited, #header a:active {
		text-decoration: none !important;
		outline: none !important;
		color: #fff;
	}
	
	#header a:focus, #header a:hover {
        background: #FF8736 !important;
        color: #444 !important;
    }
	
	.headerLink {
		display: inline-block;
	}
	
	.headerLink:not(:last-child) {
		margin-right: calc(5px + 2vw);
	}
	
	#headerPageLinks {
		right: calc(33vw);
	}
	
	/* global elements */
	
	.pageTitle {
		transform: scale(1,0.85);
		font-size: 1.8em !important;
		margin-left: 50px;
	}
	
	.textHighlight {
		color: #FF8736 !important;
	}
	
	#login-or-reg .textHighlight {
        display: inline-block;
        background: #fff;
        padding: 10px;
        color: #e96e1b !important;
        font-weight: 600;
        border-radius: 10px;
        margin-bottom: 8px;
    }
    
	.midText {
		font-size: calc(12px + 1vw);
		font-weight: 700;
	}
	
	.button {
        text-align: center;
        display: block;
        padding: calc(2px + 0.3vw) calc(6px + 0.6vw);
        color: #fff;
        border-radius: calc(10px + 0.4vw);
    }
	
	.button:hover, .button:link, .button:active, .button:visited {
		color: #fff !important;
		text-decoration: none !important;
		outline: none !important;
	}	
	
	.shadeBannerOuter {
		position: relative;
		width: 100%;
		height: calc(65px + 6vw);
		overflow-x: visible;
		margin: calc(50px + 7vw) 0 calc(70px + 12vw) 0
	}
	
	/* shaded areas must exceed borders of main content container
	width/left below is just a guide - javascript ensures it is always flush with edges of screen */
	.shadeBanner {
		width: 150%;
		position: absolute;
		left: -25%;
		background: #E3D1EE;
		height: 100%;
		top: 0;
	}
	
	#homeMobGrid,#homeMainGrid {
		margin-bottom: calc(30px + 3vw);
	}
	
	.halfGridRow,.thirdGridRow {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}
	
	.halfGridRow {
		margin-left: 5px;
		margin-right: 5px;
	}
	
	/* image/text grid styles */
	.halfGridRow:not(:last-child), .thirdGridRow:not(:last-child) {
		margin-bottom: 10px;
	}
	
	.gridPanel {
		display: block;
		box-sizing: border-box;
		padding: calc(10px + 0.3vw);
		background-color: #eee;
		color: #666;
		border-radius: calc(6px + 0.2vw);
		text-align: center;
	}
	
	.gridImg {
		width: calc(80px + 4vw);
		height: calc(80px + 4vw);
	}
	
	.thirdGridRow .gridPanel {
		width: calc(33% - 4px);
	}
	
	.thirdGridRow .gridPanel:nth-child(2) {
		margin-left: 6px;
		margin-right: 6px;
	}
	
	.halfGridRow .gridPanel {
		width: calc(50% - 3px);
	}
	
	.halfGridRow .gridPanel:first-child {
		margin-right: 6px;
	}
	
	.gridTextHead {
		font-weight: 900;
		font-size: 1.1em;
		margin-bottom: calc(4px + 0.2vw);
	}
	
	.gridTextBody {
		margin-top: 0;
		font-size: calc(12px + 0.5vw);
	}	

	.mainStep {
		position: absolute;
		font-weight: 300;
		box-sizing: border-box;
		padding: calc(2.5vw);
		line-height: calc(9px + 1.1vw);
	}
	
	/*applying same style rules to homepage-specific diagram as needed, because why not */
	#threeStepsMain > div:nth-child(1) {
		width: 33.3%;
		left: 0;
	} 
	
	#threeStepsMain > div:nth-child(2) {
		width: 33.4%;
		left: 33.3%;
	}
	
	#threeStepsMain > div:nth-child(3) {
		width: 33.3%;
		right: 0;
	}
	
	/*home page content */
	
	#homeTop {
		background: url(images/home-img-main.png);
		background-size: 90% 100%;
		background-position: 100% 0%;
		width: 80%;
		position: relative;
		margin: 20px 10% 0 10%;
		background-repeat: no-repeat;
	}
	
	/* 'spacer' pseudo element to apply correct dimensions */
	#homeTop:after {
		content: '';
		width: 100%;
		padding-bottom: 80%;
		display: block;
		margin-bottom: calc(50px + 5vw);
	}
	
	#mainLogo {
        position: absolute;
        left: 15%;
        top: 0;
        width: 70%;
        height: auto;
    }
	
	#homeTopBlurb {
		position: absolute;
		left: 0;
		bottom: calc(10vw - 30px);
		padding: calc(10px + 0.5vw);
		box-shadow: 4px 6px 8px rgb(150 150 150 / 60%);
		border-radius: 12px;
		font-size: calc(12px + 1.2vw);
		font-weight: bold;
		line-height: 1;
		background: #fff;
		width: calc(100px + 9vw);
		text-align: center;
		color: #000;
	}
	
	#topBlurb p {
		margin: 0;
	}
	
	/*rounded rectangles with icons (on home and about pages) */
	
	.iconCircle {
		width: calc(50px + 4vw);
		height: calc(50px + 4vw);
		border-radius: 50%;
		box-sizing: border-box;
		border: calc(3px + 0.3vw) solid;
		background-size: 70% 70%;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		top: 0;
		left: calc(50% - (25px + 2vw));
		position: absolute;
		z-index: 2;
		background-color: #fff;
	}
	
	.iconRectRowMain {
		width: 100%;
		padding: 0;
		margin: calc(40px + 4vw) 0 calc(20px + 2vw) 0;
	}
	
	.iconRectRowMain:after {
		content: '';
		height: 0px;
		clear: both;
		display: block;
	}

	.iconRectBox {
		width: calc(33.3% - max(15px,1vw));
		position: relative;
		float: left;
		box-sizing: border-box;
		z-index: 2;
	}
	
	.iconRectRowMob {
		position: relative;
		margin: calc(90px + 7vw) 0 calc(20px + 2vw) 0;
	}
	
	.iconRectRowMob .iconRectBox {
		width: unset;
		float: none;
		overflow: visible;
		margin-bottom: calc(8px + 0.5vw);
		margin-left: 1%;
		margin-right: 1%;
	}
	
	.iconRectRowMob .iconRectBox:nth-child(1) .iconRect, .iconRectRowMob .iconRectBox:nth-child(3) .iconRect {
		margin-right: 10%;
		padding-right: 40px;
	}
	
	.iconRectRowMob .iconRectBox:nth-child(1) .iconCircle, .iconRectRowMob .iconRectBox:nth-child(3) .iconCircle {
		right: 0;
		left: unset;
		transform: translateX(-20%);
	}
	
	.iconRectRowMob .iconRectBox:nth-child(2) .iconRect {
		margin-left: 9%;
		padding-left: 40px;
	}
	
	.iconRectRowMob .iconRectBox:nth-child(2) .iconCircle {
		left: 0;
		transform: translateX(20%);
	}
	
	/* the middle box applies even spacing with its siblings */
	.iconRectBox:nth-child(2) {
		margin-left: max(15px,1.5vw);
		margin-right: max(15px,1.5vw);
	}
	
	.iconRect {
		position: relative;
		z-index: 1;
		margin-top: calc(35px + 3vw);
		width: 100%;
		border-radius: 20px;
		color: #fff;
		padding: calc(10px + 1vw);
		box-sizing: border-box;
		max-height: 28vw;
	}
	
	.iconRectRowMob .iconRect {
		margin-top: 0;
		width: 91%;
	}
	
	.iconRect p {
		text-align: center;
	}
	
	/* 'home' page content */
	#rectRow1 .iconRect {
		max-height: 28vw;
	}
	
	#rectRow1 {
	    padding: calc(25px + 5vw) 0 calc(40px + 10vw) 0;
        margin-bottom: 0;
        position: relative;
        margin-top: 0;
	}
	
	#rectRowMob1 {
		padding: calc(40px + 5vw) 0 calc(30px + 9vw) 0;
        margin-bottom: 0;
        position: relative;
        margin-top: 0;
	}
	
	#rectRow1 .shadeBanner, #rectRowMob1 .shadeBanner {
		height: 100%;
		position: absolute;
		z-index: 1;
		width: 150%;
		left: -25%;
		display: block;
		top: 0;
		background: #F2F2F2;
	} 
	
	#plannerRect .iconRect, #subRect .iconRect {
		background-color: #FF8736;
		color: #000;
		font-weight: 700;
	}
	
	#plannerRect .iconCircle {
		border-color: #FF8736;
		background-image: url(images/home-3A-1-icn.svg);
	}
	
	#subRect .iconCircle {
		border-color: #FF8736;
		background-image: url(images/about-3A-1-icn.svg);
	}
	
	#mappingRect .iconRect, #lockRect .iconRect {
		background-color: #696969;
	}
	
	#mappingRect .iconCircle {
		border-color: #696969;
		background-image: url(images/home-3A-2-icn.svg);
	}
	
	/* for about page version */
	#lockRect .iconCircle {
		border-color: #696969;
		background-image: url(images/about-3A-2-icn.svg);
	}
	
	#marketRect .iconRect, #spamRect .iconRect {
		background-color: #8D48BA;
	}
	
	#marketRect .iconCircle {
		border-color: #8D48BA;
		background-image: url(images/home-3A-3-icn.svg);
	}
	
	#spamRect .iconCircle {
		border-color: #8D48BA;
		background-image: url(images/about-3A-3-icn.svg);
	}
	
	#rectRow2 .iconRect {
		max-height: 52vw;
	}

	/* home page content continued */
	#homeMidPic {
		position: absolute;
		width: 35%;
		left: 10%;
		top: calc(20px - 55%);
		height: auto;
		z-index: 2;
	}
	
	#midBannerText {
		font-weight: bold;
		position: absolute;
		left: 50%;
		width: calc(30% + 60px);
		top: -5px;
		z-index: 2;
		color: #000;
		font-size: calc(12px + 1vw);
		line-height: 1.1;
	}
	
	#midBannerText2 {
		font-weight: bold;
		width: 100%;
		text-align: center;
		position: relative;
		z-index: 2;
		color: #000;
		font-size: calc(12px + 1vw);
		padding-top: calc(20px + 2vw);
	}
	
	/* specific color banner styles */
	
	.orangeBanner {
		height: auto;
		padding: calc(10px + 2vw) 0 calc(10px + 1vw) 0;
		margin-bottom: calc(40px + 4vw);
		margin-top: 0;
	}
	
	#greyBanner {
		height: auto; 
		padding: calc(10px + 1vw) 0 calc(10px + 1vw) 0;
		margin: calc(40px + 4vw) 0 calc(20px + 2vw) 0;
	}	
	
	#greyBanner2 {
		height: auto;
		padding: calc(10px + 1vw) 0 calc(20px + 3vw) 0;
		margin-top: calc(30px + 3vw);
		margin-bottom: 0;
	}

	.orangeBanner .shadeBanner {
		background: #FFDBC9; 
		z-index: -1;
	} 
	
	#greyBanner .shadeBanner, #greyBanner2 .shadeBanner {
		background: #F2F2F2; 
		z-index: -1;
	}
	
	/* three steps diagram */
	#threeStepsHead {
		width: 80%; 
		margin: auto auto; 
		text-align: center; 
		font-weight: bold; 
		position: relative; 
		z-index: 1;
	}
	
	#threeStepsMain {
		background-image: url(images/3-step.svg);
		width: 98%;
		padding-bottom: 40%;
		position: relative;
		background-repeat: no-repeat;
		margin: calc(20px + 3vw) 1% 0 1%;
		z-index: 3;
		padding-top: 5%;	
	}
	
	#threeStepsMob {
		background-image: url(images/3-step-vertical.svg);
		background-position: 7% 0;
		position: relative;
		background-repeat: no-repeat;
		margin-top: calc(20px + 3vw);
		z-index: 3;
		background-size: 44%;	
	}
	
	#threeStepsMain .homeGridText {
		background: none;
	}
	
	.inCircle > p {
		text-align: center;
		font-weight: bold;
	}
	
	.inCircle {
		height: calc(50px + 15vw);
	}
	
	.mobStep {
		position: relative;
		height: 49vw;
	}
	.mobStep .inCircle {
		width: 35.6%;
		margin-left: 8%;
		padding-top: calc(5px + 1vw);
	}

	.mobStep .stepNum {
		margin-bottom: 0;
	}

	.inCircle .circleText {
		line-height: 1;
		margin-left: 16%;
		margin-right: 16%;
		font-size: calc(12px + 0.7vw);
	}
	
	.inCircle + p {
        text-align: center;
    }

	.stepText {
		position: absolute;
		left: 52%;
		width: 45%;
		top: calc(20px + 2vw);
	}
	
	.stepNum {
        font-size: calc(20px + 2.7vw);
        font-weight: bold;
        height: calc(20px + 2.7vw);
    }
	
	#threeStepsMain .stepNum {
		margin: 0;
	}
	
	/* 'about' page content */
	
	#aboutTopImg {
		float: left;
		width: calc(38% + 12vw);
		max-width: 700px;
		margin-left: 2px;
	}
	
	#aboutTopText {
		float: right;
		margin-left: calc(10px + 2vw);
		width: 38%;
		margin-right: calc(5px + 1vw);
		margin-top: calc(15px + 5vw);
	}
	
	#aboutTop:after {
		content: '';
		display: block;
		clear: both;
		height: 0;
	}
	
	#byAuEd,#forAuEd {
		position: relative;
		display: inline-block;
	}
	
	#asTeachersPara {
		position: relative;
		z-index: 2;
		width: 60%;
		margin: auto auto;
		text-align: center;
		min-width: 360px;
	}
	
	#aboutRows {
		margin-top: calc(20px + 1.5vw);
		margin-bottom: calc(40px + 2.5vw);
	}
	
	.aboutRow {
		background-color: #FFDBC9;
		padding: calc(15px + 0.8vw);
		border-radius: calc(8px + 0.3vw);
		box-sizing: border-box;
	}
	
	.aboutRow:not(:last-child) {
		margin-bottom: 10px;
	}
	
	.aboutRowImg {
		width: calc(80px + 5%);
		height: auto;
		float: left;
		margin-right: calc(8px + 1%);
	}
	
	.aboutRowText {
		float: right;
		line-height: 1.6;
		width: calc(95% - 114px);
		margin-top: 0;
	}
	
	.aboutRow:after {
		display: block;
		height: 0;
		content:'';
		clear: both;
	}
	
	#finalLogo {
		width: 40%;
		min-width: 300px;
		margin: 0 auto calc(20px + 1vw) auto;
		height: auto;
		display: block;
		position: relative;
	}
	
	/* 'contact' page content */
	
	#contactBlock {
		text-align: center;  
		font-weight: bold;
		width: 40%;
		min-width: 300px;
		margin: auto auto;
	}
	
	#queryForm {
		width: 50%;
		min-width: min(460px, 90%);
		max-width: 700px;
		box-sizing: border-box;
		background: #eee;
		padding: 20px;
	}

	#queryIntro {
		width: 80%;
		max-width: 1000px;
		min-width: min(460px, 90%);
	}

	#contactSubHead {
		font-size: 1.6em;
		margin-bottom: calc(15px + 1vw);
	}

	textarea::placeholder, input[type="text"]::placeholder {
		color: #b4b4b4;
	}
	
	#queryForm textarea, #queryForm input[type="text"] {
		width: 100%;
		border: 0;
		font-weight: 500;
		font-size: calc(10px + 0.6vw);
		padding: 0.4vw;
		box-sizing: border-box;
	}
	
	#queryForm input[type="checkbox"] {
		transform: scale(1.35,1.35);
		filter: grayscale(1) contrast(3);
		position: relative;
		margin-right: 8px;
		cursor: pointer;
	}
	
	#submit {
		background: #000;
		border: none;
		padding: 9px 15px;
		font-weight: bold;
		color: white;
		font-size: calc(9px + 0.3vw);
		cursor: pointer;
	}
	
	#submit[disabled] {
		opacity: 0.3;
		cursor: default;
	}
	
	.g-recaptcha {
		margin-bottom: 20px;
	}
	
	/* mobile/responsive styles */

	#homeMobGrid,#threeStepsMob {
		display: none;
	}
	
	#lastCaptionMob {
		display: none;
	}
	
	.iconRectRowMob {
		display: none;
	}
	
	.video-container {
	  position: relative;
	  width: 100%;
	  padding: 0;
	  margin: 0;
	}
	
	.video-container:after {
		display: block;
		content: '';
		width: 100%;
		padding-bottom: 56.25%;
	}

	.video-container iframe {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	
	.modal__content {
		overflow-y: hidden !important;
		margin-top: 10px !important;
		margin-bottom: 10px !important;
	}
	
	.modal__container {
		padding: calc(8px + 0.5vw) !important;
		max-width: min(1000px,80%) !important;
		min-width: min(500px,90%) !important;
		width: 60%;
		box-sizing: border-box;
	}
	
	.modal__content, .modal__container {
		max-height: unset;
	}
	
	
	.modal__close {
		transform: scale(1.5,1.5);
	}
	
	#login-or-reg .textHighlight {
        display: inline-block;
        background: #fff;
        padding: 5px;
        color: #e96e1b !important;
        font-weight: 600;
        border-radius: 10px;
        margin-bottom: 4px;
    }
    
    #login-or-reg {
        top: 42px;
    }
    
    #pricingTable {
    border-collapse: collapse;
    font-size: calc(10px + 0.6vw);
}

#pricing p, #pricingTable {
    margin-left: calc(10px + 1vw);
    margin-right: calc(10px + 1vw);
}

#pricingTable td, #pricingTable th {
    border: 1px solid #666;
    padding: calc(3px + 0.1vw);
    text-align: center;
}

#pricingTable td:not(:first-child), #pricingTable th:not(:first-child) {
    width: 12.5%;
}

#pricingTable td.pos {
    background-color: #006a00;
    color: #fff;
}

#pricingTable td.neg {
    background-color: #b71111;
    color: #fff;
}

#pricingTable td.greyout:before, #pricingTable th.greyout:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(0,0,0,0.3);
    top: 0;
    left: 0;
    pointer-events: none;
}

#pricingTable td.greyout, #pricingTable th.greyout {
    position: relative;
    color: #888;
}

#pricingTable .button {
	background: #8D48BA;
	text-decoration: none;
	display: inline-block;
}

.planPrice {
    font-size: smaller;
}

.infinity {
    font-size: 1.5em;
    display: none;
}

.spacedwords {
    display: none;
}
	
	@media only screen and (max-width: 1000px) {
	
		#content {
			width: 100%;
			max-width: 100%;
		}
		
		.thirdGridRow, .aboutRow {
			margin-left: 5px;
			margin-right: 5px;
		}
		
		#aboutTitle {
			margin-left: 50px;
		}
		
		.inCircle {
			height: calc(30px + 20vw);
		}
		
		#queryForm, #queryIntro {
			margin: auto auto;
		}
		
		#greyBanner2 {
			margin-top: 0;
			padding-top: calc(30px + 4vw);
		}
		
		#circleSection {
			margin-top: 0;
			padding-top: calc(40px + 6vw);
		}
		
	}
	
	@media only screen and (max-width: 800px) {
	    
	    #headerLogo {
	        display: none;
	    }
	    
		#homeMobGrid,#threeStepsMob {
			display: block;
		}
		
		#homeMainGrid,#threeStepsMain {
			display: none;
		}
		
		#lastCaptionMain {
			display: none;
		}
		
		#lastCaptionMob {
			display: block;
		}
		
		.iconRectRowMain {
			display: none;
		}
		
		.iconRectRowMob {
			display: block;
		}
		
		.planPrice {
		    font-size: inherit;
		}
	}	
	
	
	@media only screen and (max-width: 499px) {
		body {
			overflow-x:auto;
		}
		
		#header a {
            padding: 6px;
            }
            
        .headerLink:not(:last-child) {
            margin-right: 2vw;
        }
        
        .infinity {
            display: inline;
        }
        
        .unlimited {
            display: none;
        }
        
        #pricingTable {
            margin: 0 2px;
        }

        #pricingTable td, #pricingTable th {
            padding: 2px 0;
        }
        
        .wholewords {
            display: none;
        }
        
        .spacedwords {
            display: inline;
        }
	}
	
	@media only screen and (max-width: 600px) {
		.mobStep {
			height: 47.5vw;
		}
				
	}