/* CSS3 */

/* Webfont definitions - must be at top */
@font-face {
  font-family: 'Gilroy';
  src: url('webfonts/gilroy-extrabold.eot'); /* IE9 Compat Modes */
  src: url('webfonts/gilroy-extrabold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfonts/gilroy-extrabold.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfonts/gilroy-extrabold.svg#svgFontName') format('svg'); /* Legacy iOS */
	font-weight: bold;
	font-style: normal;
}

/* Bad fonts - Super Modern Browsers:
       url('webfonts/gilroy-extrabold.woff2') format('woff2'), 
       url('webfonts/gilroy-extrabold.woff') format('woff'),
       url('webfonts/gilroy-light.woff2') format('woff2'),
       url('webfonts/gilroy-light.woff') format('woff'), 
*/

@font-face {
  font-family: 'Gilroy';
  src: url('webfonts/gilroy-light.eot'); /* IE9 Compat Modes */
  src: url('webfonts/gilroy-light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfonts/gilroy-light.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfonts/gilroy-light.svg#svgFontName') format('svg'); /* Legacy iOS */
	font-weight: normal;
	font-style: normal;
}

/* Primary/wildcard styles */
html, body {
	height: 100%;
}

* {
	margin: 0;
  padding: 0;
	outline: none;
	border: none;
	line-height: 100%;
	box-sizing: border-box;
}

/* Flex styles */
#navigationContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	
	min-height: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom: solid 2px #D0D0D0;
}

#navigationLogo {
	flex: 1 0 auto;
	padding-right: 30px;
}

#navigationOptionsContainer {
	flex: 1 0 auto;
	
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;	
}

#navigationOptionsContainer a {
	flex: 0 0 auto;
	white-space: nowrap;
	font-weight: bold;
	font-size: 70%;
	letter-spacing: 3px;
	margin-left: 20px;
	color: #32373C;
}

#navigationOptionsContainer a:first-of-type {
	margin-left: 0;
}

#navigationOptionsContainer a:hover {
	transform: scale(1.05,1.05);
	color: BLACK;
}

.edgeToEdgeMiddleContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.edgeToEdgeMiddleContainer div {
	flex: 0 0 auto;
}

.rightMiddleContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: center;
}

.rightMiddleContainer div {
	text-align: right;
}

.wrappedTopContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.centredTopContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.singleCentredColumnContainer {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
}

.singleJustifiedColumnContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

/* Standard element styles */
body {
	font-family: 'Gilroy';
	font-weight: normal;
	font-style: normal;
	color: #32373C;
	font-size: 16px;
}

header, footer {
}

nav {
}

section {
	margin-top: 30px;
}

p, li {
	line-height: 140%;
	margin-top: 20px;
}

h1 {
	font-size: 200%;
	font-weight: bold;
	line-height: 120%;
	color: #3c5267;
	text-align: center;
}

h2 {
	font-size: 150%;
	font-weight: bold;
	line-height: 120%;
	color: #3c5267;
	text-align: center;
}

p + h2,
h1 + h2 {
	margin-top: 30px;
}

h3 {
	font-size: 130%;
	font-weight: bold;
	line-height: 120%;
	color: #3c5267;
	text-align: left;
}

p + h3,
ul + h3 {
	margin-top: 30px;
}

li {
	margin-left: 20px;
}

a {
	color: BLACK;
	outline: none;
	text-decoration:none;
	font-weight: normal;
}

a:hover {
	text-decoration:none;
	font-weight: bold;
	cursor: pointer;
}


/* Styles by class */
.sectionContainer {
	width: 100vw;
	min-width: 400px;
	background-color: WHITE;
	padding: 20px;
	margin-top: 20px;
}

.tight {
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.noPadding {
	padding-top: 0px;
	padding-bottom: 0px;
}

.smallType {
	font-size: 70%;
}

.linkButtons a {
	font-size: 60%;
	font-weight: bold;
	letter-spacing: 2px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 15px;
	padding-right: 15px;
	margin-left: 10px;
}

.linkButtons:first-of-type {
	margin-left: 0px;
}

.linkButtonGreen {
	color: #3c5267;
	background-color: #78BE50;
	border: solid 2px #78BE50;
	border-radius: 8px;
}

.linkButtonGreen:hover {
	background-color: #A8EE80;
}

.linkButtonWhite {
	color: #3c5267;
	background-color: WHITE;
	border: solid 2px #3c5267;
	border-radius: 8px;
}

.linkButtonWhite:hover {
	background-color: #E0E0E0;
}

.linkButtonInvisibleGreen {
	color: #78BE50;
	background: none;
	border: none;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.linkButtonInvisibleGreen:hover {
	color: #A8EE80;
}

p + .smallBulletParagraphs {
	margin-top: 30px;
}

.mediumBulletParagraphs {
	font-size: 80%;
	color: #303030;
}

.mediumBulletParagraphs li {
	/* Hack to get custom bullet image positioned correctly */
	background: url(images/q_18px.png) no-repeat left top;
	padding-left: 40px;
	min-height: 18px;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 20px;
	list-style-type: none;
	list-style-position: outside;
}

.smallBulletParagraphs {
	font-size: 60%;
	color: #303030;
}

.smallBulletParagraphs li {
	/* Hack to get custom bullet image positioned correctly */
	background: url(images/q_18px.png) no-repeat left top;
	padding-left: 40px;
	min-height: 18px;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 20px;
	list-style-type: none;
	list-style-position: outside;
}

.tinyBulletParagraphs {
	font-size: 60%;
	color: #303030;
	min-height: 12px;
}

.tinyBulletParagraphs li {
	/* Hack to get custom bullet image positioned correctly */
	background: url(images/q_12px.png) no-repeat left top;
	padding-left: 25px;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 10px;
	list-style-type: none;
	list-style-position: outside;
}

.mediumBulletParagraphs li:last-of-type,
.smallBulletParagraphs li:last-of-type,
.tinyBulletParagraphs li:last-of-type {
	margin-bottom: 0px;
}


.threeColumns {
	width: 32%; /* Leaves 4% gutters */
}

.twoColumns {
	width: 48%; /* Leaves 4% gutters */
}

.easySteps {
	counter-reset: myCounter;
}

.easySteps dt {
	position: relative;
	line-height: 130%;
	margin-top: 20px;
}

.easySteps dt:before {
	content: counter(myCounter) ".";
	counter-increment: myCounter;
	font-size: 200%;
	font-weight: bold;
	color: #3c5267;
	
	position: absolute;
	left: 0;
	padding-top: 5px;
}

.easySteps dt {
	padding-left: 40px;
}

.darkGradient, .planButton, .mostPopular {
	background: #3c5267; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #1c3247, #3c5267, #6c8297);
	background: -o-linear-gradient(left, #1c3247, #3c5267, #6c8297);
	background: linear-gradient(to right, #1c3247, #3c5267, #6c8297);
}

.planContainer {
	border: solid 1px #e6e7e8;
	background: WHITE;
	text-align: center;
	padding: 20px;
	padding-bottom: 30px;
	width: 200px;
	height: 100%;
	box-shadow: 6px 6px 6px LIGHTGRAY;
}

.planContainer:hover {
	background: #d6d7d8;
}

.highlighted {
	transform: scale(1.05,1.05);
	background: #e6e7e8;
}

.highlighted .planTitle,
.highlighted h1,
.highlighted .planButton {
	transform: scale(1.2,1.2);
}

.mostPopular {
	position: relative;
	top: -22px;
	left: -20px;
	font-size: 60%;
	font-weight: bold;
	letter-spacing: 3px;
	color: WHITE;
	width: calc(100% + 40px);
	text-align: center;
	
	padding-top: 8px;
	padding-bottom: 8px;
}

.planPriceSection {
	height: 100px;
}

.planTitle {
	font-size: 150%;
	font-weight: bold;
	color: slategray;
	margin-top: 0;
}

.planGST {
	color: #e6e7e8;
	margin-top: 0;
	color: slategray;
}

.planFeaturesSection {
	height: 280px;
}

.planUsers {
	font-size: 80%;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #3c5267;
	margin-top: 0;
	margin-bottom: 10px;
}

.planFeaturesSection .tinyBulletParagraphs {
	text-align: left;
}

.planButton {	
	font-size: 70%;
	font-weight: bold;
	letter-spacing: 1px;
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 20px;
	padding-right: 20px;

	color: WHITE;
	border: solid 1px #1c3247;
	border-radius: 8px;
}

.planButton:hover {
	background: #6c8297;
}

.disclaimer {
	font-size: x-small;
	text-align: justify;
	padding-top: 20px;
	margin-left: 10%;
	margin-right: 10%;
}

.description {
	text-align: justify;
	padding-top: 20px;
	margin-left: 10%;
	margin-right: 10%;
}

.description img {
	vertical-align:text-bottom;
}

.footnoteLinkButtons a {
	font-size: 80%;
	font-weight: bold;
	letter-spacing: 1px;
	color: WHITE;
	white-space: nowrap;
	
	background-image: url(images/arrow_circle_15px_white_padding.png);
	background-repeat: no-repeat;
	background-position: right;
	background-color:  #32373C;
	
	padding-left: 15px;
	padding-right: 40px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.footnoteLinkButtons a:hover {
	background-color: #52575C;
}

.quoteKicker {
	background-image:url(images/quote_18px.png);
	background-repeat: no-repeat;
	background-position: calc(10% - 14px) 10px;
	background-origin:content-box;
}

.quote, .quoteAuthor, .quotePlace {
	font-size: 80%;
	margin-left: 10%;
	margin-right: 10%;
	color: #32373C;
}

.testimonial {
	font-size: 200%;
	font-weight: bold;
	letter-spacing: 2px;
	color: #3c5267;
}

.quoteAuthor {
	font-weight: bold;
	font-size: 70%;
	letter-spacing: 1px;
	text-align: right;
	text-transform: uppercase;
	width: 80%;
}

.quotePlace {
	font-size: 70%;
	font-weight: normal;
	text-align: right;
	margin-top: 0;
	text-transform: none;
	width: 80%;
}

.FAQsContainer {
	padding: 30px;
}

.FAQ {
	font-size: 120%;
	font-weight: bold;
	color: #3c5267;
	margin-top: 20px;
}

.FAQ:first-of-type {
	margin-top: 0;
}

.FAQAnswer {
	font-size: 80%;
	line-height: 150%;
	margin-top: 10px;
}

.caseStudyContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.caseStudyImageContainer {
	flex: 0 0 0;
	width: 260px;
	padding-left: 30px;
	padding-top: 30px;
}

.caseStudyImageContainer img {
	box-shadow: 6px 6px 6px LIGHTGRAY;
}

.caseStudyDescriptionContainer {
	flex: 1 1 0;
	padding-left: 30px;
	padding-right: 30px;
}

.caseStudyDescriptionContainer p:first-of-type {
	font-weight: bold;
	font-size: 120%;
	margin-top: 30px;
}

.caseStudyDescriptionContainer p:last-of-type {
	margin-bottom: 30px;
}

.planListRow {
	padding: 10px;
	border-bottom: solid 1px #D0D0D0;
}

.screenshotsContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.screenshotsContainer img {
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 40px;
	border: solid 1px #D0D0D0;
	box-shadow: 6px 6px 6px LIGHTGRAY;
}

.planListRow:hover {
	background: #e6e7e8;
}

.planListItem {
	float: left;
	font-size: 150%;
	font-weight: bold;
	color: slategray;
}

.planListPrice {
	font-size: 150%;
	font-weight: bold;
	color: #3c5267;
	text-align: right;
}

.boxedFeature {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	
	border: solid 1px #32373C;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	margin-top: 30px;
}

.boxedFeatureTitle {
 	flex: 1 1 0;
	font-size: 200%;
	font-weight: bold;
	/* white-space: nowrap; */
	color: WHITE;
	text-align: center;
	
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 20px;
	padding-bottom: 20px;
	
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	background: #32373C;
}

.boxedFeatureText {
 	flex: 2 2 0;
	font-size: small;
	line-height: 150%;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
}

.smallTextLink {
	white-space: nowrap;
	font-weight: bold;
	font-size: 80%;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #32373C;
}

.smallTextLink:hover {
	cursor: pointer;
}

.footerMenu {
	align-self: flex-start;
}

.footerMenu a {
	display: block;
	font-size: 50%;
	color: WHITE;
}

.footerMenu a {
	letter-spacing: 1px;
}

.footerMenu a:first-of-type {
	font-weight: bold;
}

.footerMenu a:nth-of-type(n+1) {
	margin-top: 10px;
}

.contactDetail {
	font-size: 130%;
}

.contactDetail img {
	padding-right: 10px;
	padding-top: 3px;
	vertical-align: text-top;
}

.footnote {
	font-weight: bold;
	font-size: 60%;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.legal h2 {
	text-align: left;
	margin-bottom: 40px;
}

.legal h3,
.legal p {
	text-align: left;
	text-indent: -40px;
	margin-left: 40px;
}

.legal span {
	display: inline-block;
	text-indent: 0;
	margin: 0;
	width: 40px;
}

.legal div {
	margin-left: 40px;
}

.legal tr {
	vertical-align: top;
}

.legal td {
	padding-top: 20px;
	padding-right: 30px;
}

.legal td p {
	margin: 0;
	text-indent: 0;
}

.legalBullet {
	margin-top: 20px !important;
	margin-left: 10px !important;
	text-indent: -10px !important;
}

td .legalBullet:first-child {
	margin-top: 0 !important;
}

.customerLogos {
	width: 100%;
}

.customerLogos img {
	flex: 0 0 0;
	margin: 10px;
}


/* Styles by id */
#banner {
	background: #32373C;
	height: 66px;
}

#bannerContainer {
	justify-content: flex-end;
	height: 100%;
}

#bannerLogo {
	display: none;
}

#imageSectionNarrow {
	display: none;
	text-align: center;
	padding-bottom: 20px;
}

#imageSectionNarrow h2 {
	margin-top: 20px;
}

#oneColumnFeatureList {
	display: none;
}
	
#twoColumnFeatureList {
	display: none;
}

#footerStrip {
	background: #32373C;
	height: 20px;
}

#socialIcons a:nth-of-type(n+1),
#socialIconsFreeTrial a:nth-of-type(n+1) {
	margin-left: 10px;
}

#socialIconsFreeTrial {
	display: none;
	text-align: center;
}

#socialIconsFreeTrial .linkButtons {
	margin-top: 20px;
}

#storeIcons a {
	display: block;
}

#storeIcons a:nth-of-type(n+1) {
	margin-top: 10px;
}

#contactDetails {
	background: #32373C;
	padding: 30px;
	width: 50%;
}

#contactDetails * {
	color: WHITE;
}

#contactFormContainer {
	width: 50%;
	padding-left: 30px;
}

/* Dynamic, reactive design */
@media screen and (min-width: 860px) {
	/* Modify section padding @ left & right when screen is too wide */
	.sectionContainer {
		padding-left: calc((100% - 860px) / 2 + 20px);
		padding-right: calc((100% - 860px) / 2 + 20px);
	}
}

@media screen and (max-width: 580px) {
	/* Modify logo to display in banner instead of navigation bar */
	#bannerLogo {
		display: block;
	}
	
	#navigationLogo {
		display: none;
	}
	
	#bannerContainer {
	 justify-content: space-between;
	}
	
	#navigationOptionsContainer {
		justify-content: space-around;
	}
}

@media screen and (max-width: 630px) {
	/* Modify image section to display top/bottom instead of left/right */
	#imageSectionNarrow {
		display: block;
	}
	
	#imageSectionNormal {
		display: none;
	}

	/* Modify Contact details and contact form to display top/bottom */
	#contactDetails {
		width: 100%;
	}

	#contactFormContainer {
		width: 100%;
		padding-left: 0;
		padding-top: 30px;
	}
}

@media screen and (max-width: 840px) {
	/* Modify plan sections to 2x2 */
	.planContainer {
		/* Already wrapping with Flexbox */
		width: 300px;
	}
	.planFeaturesSection {
		height: 240px;
	}

	/* Modify footer navigation bar for narrow width */
	#socialIconsFreeTrial {
		display: block;
	}
	
	#socialIcons,
	#freeTrial {
		display: none;
	}
}

@media screen and (max-width: 640px) {
	/* Modify plan sections to 1x4 */
	.planContainer {
		/* Already wrapping with Flexbox */
		width: 400px;
	}
	.planFeaturesSection {
		height: 225px;
	}
	
	/* Modify feature list to display 2 columns */
	#oneColumnFeatureList {
		display: none;
	}

	#twoColumnFeatureList {
		display: block;
	}
	
	#threeColumnFeatureList {
		display: none;
	}

	/* Modify customPlans section to wrap title for narrow width */
	#customPlansTitle {
		white-space: inherit;
	}	
}

@media screen and (max-width: 480px) {
	/* Modify feature list to display 1 column */
	#oneColumnFeatureList {
		display: block;
	}

	#twoColumnFeatureList {
		display: none;
	}
	
	#threeColumnFeatureList {
		display: none;
	}	
	
	/* Hide SocialIcons etc for narrow devices */
	#socialIconsFreeTrial {
		display: none;
	}	
}

@media screen and (max-width: 440px) {
	/* Modify navigation options to take less space */
	#navigationOptionsContainer a {
		letter-spacing: 2px;
	}

	#navigationOptionsContainer a:nth-of-type(n+1) {
		margin-left: 0px;
	}
	
	#smallLogo {
		width: 120px;
	}

	.linkButtons a {
		padding-left: 10px;
		padding-right: 10px;
	}
}