/* 
 * Core custom CSS for ML 'rebrand'
 * 
 */


/* Typography */

html, input {
	font-family: Avenir, Lato, Helvetica, sans-serif;
	font-size: 100%;
}

body {
	margin: 0px;
}

	/* Global typography */

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #000000;
}

p, ul, ol, .section-article-content table {
	margin-top: 0;
	margin-bottom: 1rem;
	font-weight: 400;
	font-size: 20px;
	color: #4A4A4A;
	line-height: 28px;
}

p a, ul a, ol a {
	font-weight: 500;
	font-size: 20px;
	color: #01CCDF;
	line-height: 28px;
	text-decoration: underline;
}

a {
	transition: opacity 0.25s ease;
}

a:hover {
	opacity: 0.8;
}


li {
	margin-bottom: 28px;
}

blockquote {
	margin: 0;
	font-family: Avenir-BookOblique, Avenir;
	font-size: 18px;
	font-style: italic;
	color: #4A4A4A;
	line-height: 26px;
}

p.quote-source {
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.08px;
	line-height: 24px;
	text-align: right;
}


	/* Specific typography */
	/* Mapping:
		Avenir-Heavy = font-weight: bold;
		Avenir-Light = font-weight: 300;
		Avenir-Book = font-weight: 400;
		Avenir-Medium = font-weight: 500;
	*/
	
	
h1 {
	font-weight: bold;
	font-size: 42px;
	line-height: 48px;
	margin-bottom: 40px;
}

h2 {
	font-weight: bold;
	font-size: 32px;
	line-height: 38px;
	margin-bottom: 24px;
}

h3 {
	font-weight: bold;
	font-size: 24px;
	line-height: 30px;
}

h4, input[type=submit] {
	font-weight: 500;
	font-size: 18px;
	line-height: 26px;
}

h4 a, h4.read-more {
	font-weight: 500;
	font-size: 18px;
	color: #01CCDF;
	line-height: 26px;
	text-decoration: underline;
}

h5, input[type=email] {
	font-weight: 400;
	font-size: 18px;
	color: #4A4A4A;
	line-height: 26px;
}

h6, h6 a {
	font-weight: 200;
	font-size: 16px;
	line-height: 20px;
	text-decoration: none;
	color: #000000;
}

h6.current {
	font-weight: 1000;
	font-size: 16px;
	color: #01CCDF;
	line-height: 20px;
	text-decoration: underline;
}

	/* Specific typography */

	/* Article content specific typography */
.section-article-content h1, .section-article-content h2, .section-article-content h3, .section-article-content h4, .section-article-content h5, .section-article-content h6 {
	padding-top: 24px;
	margin-bottom: 16px;
}

.section-article-content h1 {
	text-align: center;
	padding-top: 56px;
}

.section-article-content blockquote {
	padding-left: 36px;
}

.section-article-content img {
	max-width: 100%;
	height: auto;
}

	/* Homepage and nav specific typography */
	
h6.download-prompt {
	/*font-weight: bold;*/
	font-weight: 500;
	font-size: 14px;
	color: #01CCDF;
	line-height: 35px;
}
	
	/* Medium size class variants */
	
@media (min-width: 768px) {
	h1 {
		font-size: 64px;
		line-height: 71px;
	}
}

/* Container specific styling */

@media (min-width: 1200px) {
	.container-ml {
		/* Expands the ML maximum container width from 1140px (Bootstrap default) to 1280px for a more cinematic experience on desktop XL size class */
		max-width: 1280px;	
	}
}

.container-bg {
	/* Full-width div which can be used to add a full-width background image around a container */
	width: 100%;
	padding: 0px;
	margin: 0px;
}

.container-header {
	background-color: white;
	margin-top: -65px;
	margin-bottom: 56px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.container-header-border {
	height: 81px;
	background-color: white;
	box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px;
}


/* Section specific styling */

	/* Section-Header */
	
.section-header {
	margin-top: 0px;
	height: 60px;
	background-color: white;
}

.section-header img {
	height: 50px;
	width: 100px;
}

.section-header h6 {
	margin-top: 16px;
	margin-left: 28px;
	position: relative;
}

.section-header .download-button {
	float:right;
}

.section-header h6::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 3px;
  background-color: #01CCDF;
  transform-origin: bottom right;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}

.section-header h6:hover::before {
  transform-origin: bottom left;
  transform: scaleX(1);
}

	/* Section-Header-Download */
	
.section-header-download {
	padding-top: 10px;
	/*margin-top: -70px;*/
}

.section-header-download-parent {
	pointer-events: none;
}

	/* Section-Hero */
	
	
.section-hero-sm img {
	margin-top: -102px;
	margin-bottom: 28px;
	width: 100% !important;
	height: auto;
}

.section-hero {
	margin-bottom: -30px;
}

@media (min-width: 768px) {
	/* => md size class */
	.section-hero {
		margin-bottom: 100px;
	}
}

.section-hero p {
	margin-bottom: 32px;
}

.section-hero #hero-wand {
	width: 100%;
}

.section-hero .hero-wand-container {
	padding-left: 0px;
	padding-right: 0px;
}

@media (min-width: 768px) {
	/* => md size class */
	
	.section-hero h1 {
		margin-top: 44px;
	}
	
	.section-hero .hero-wand-container {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.section-hero-installed p {
	color: #01CCDF;
}

#magic-lasso-installed {
	width: 95%;
	height: 100px;
	background-color: white;
	position: absolute;
}

	/* Section-Why-Benefits */
.section-why-benefits {
	margin-bottom: -92px;
}

@media (min-width: 768px) {
	/* On size classes => md the bottom margin is changed to make the gap between why-benefits and why-community pleasant */

	.section-why-benefits {
		margin-bottom: 24px;
	}
	
}

.section-why-benefits img {
	width: 126px;
	height: 60px;
	margin-bottom: 18px;
}

.section-why-benefits div, .section-insights div, .section-features div {
	margin-bottom: 48px;
}

	/* Section-Why-Community */
	
.section-why-community {
	background-image: URL("../img/bg/why-community-trapezoid.svg");
	background-size: auto 100%;
	background-position: center center;
	background-repeat: no-repeat;
	padding-top: 220px;
	padding-bottom: 220px;
	margin-bottom: 0px;
}

@media (min-width: 768px) {

	.section-why-community {
		margin-bottom: 76px;
	}
	
}

@media (min-width: 992px) {
	/* On size classes => lg the padding is reduced to make the background shape frame the content better */

	.section-why-community {
		padding-top: 160px;
		padding-bottom: 160px;
	}
}

.section-why-community .logo-grid-small div {
	width: 100%;
	height: 237px;			/* 70% of actual height */
	max-width: 362px; 		/* 70% of actual width */
	background-image: URL("../img/logo-grid.png");
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
	margin-bottom: 40px;
}

.section-why-community .logo-grid div {
	width: 100%;
	height: 338px;
	max-width: 517px;
	background-image: URL("../img/logo-grid.png");
	background-size: 100% auto;
	background-position: center center;
	background-repeat: no-repeat;
}


	/* Section-Features */
.section-features {
	margin-bottom: -80px;
}

.section-features .sm-devices {
	background-image: URL("../img/bg/device-iphone.png");
	background-size: 341px 549px;
	background-position: left top 38px;
	background-repeat: no-repeat;
	height: 652px;
	position: absolute;
	min-width: 60%;
	left:40%;
}

.section-features .sm-devices-spacer {
	height: 494px;
}

.section-features .md-devices {
	background-image: URL("../img/bg/device-iphone.png"), URL("../img/bg/device-mac.png");
	background-size: 341px 549px, 1144px 760px;
	background-position: right 30px top 154px, right 80px top;
	background-repeat: no-repeat;
	width:50%;
	height: 716px;
	position: absolute;
	left:0px;
}

.section-features .md-devices-spacer {
	height: 716px;
}

@media (min-width: 768px) {

	.section-features {
		margin-bottom: 0px;
	}

	.section-features h3 {
		margin-top: 38px;
	}
	
}

.section-features .feature-header {
	border-bottom: 1px solid #F4F4F4;
	cursor: pointer;
}

.section-features .feature-header img {
	filter: saturate(0%);
	opacity: 0.25;
	transition: 0.3s;
}

.section-features .feature-header:hover {
	filter: saturate(100%);
	opacity: 0.75;
}

.section-features .feature-header h4 {
	padding-bottom: 12px;
	margin-bottom: 0px;
	margin-top: 18px;
}

.section-features .selected-feature h4 {
	border-bottom: 4px solid #01CCDF;
	padding-bottom: 8px;
}

.section-features .selected-feature img {
	filter: saturate(100%);
	opacity: 1.0;
}

.section-features .feature-content {
	margin-bottom: 68px;
}
	/* Section-Article */

.section-article-title {
	text-align: center !important;
}

.section-article-image img {
	margin-bottom: 64px;
	max-width: 1200px;
	width: 100% !important;
	height: auto;
}

.section-article-content table {
	width: 100%;
	margin-bottom: 36px;
	margin-top: 24px;
	padding: 12px;
	background: #F4F4F4;
	border-radius: 12px;
	font-size: 18px;
}

@media (max-width: 768px) {
	.section-article-content table {
		/* Table overflow on mobile size */
		display: block;
		overflow-x: auto;
	}
}

.section-article-content table.lastRowTable tr:last-of-type td, .section-article-content table.firstColumnTable td:first-of-type {
	/* Render the last row or column of article tables in a yellow color */
	background-color: #F8E71C;
	font-weight: bold;
}

.section-article-content th, .section-article-content td {
	padding: 14px;
}

.section-article-content th {
	color: #0199A7;
}

.section-article-content td {
	background-color: #EBEBEB;
	text-align: center;
}

	/* Section-Insights */
.section-insights {
	background-image: URL("../img/bg/insights-tangram.svg");
	background-size: 1280px 920px;
	background-position: center top;
	background-repeat: no-repeat;
	padding-top: 168px;
	padding-bottom: 68px;
	text-align: center;
}

.section-insights .previous-insight {
	background-image: URL("../img/ui/previous-arrow.svg");	
}

.section-insights .previous-insight:hover {
	background-image: URL("../img/ui/previous-arrow-hover.svg");	
}

.section-insights .next-insight {
	background-image: URL("../img/ui/next-arrow.svg");	
}

.section-insights .next-insight:hover {
	background-image: URL("../img/ui/next-arrow-hover.svg");	
}

.section-insights .previous-insight, .section-insights .next-insight {
	background-size: auto;
	background-position: center 30%;
	background-repeat: no-repeat;
	cursor: pointer;
}

.section-insights .disabled-insight {
	background-image: none;
	cursor: auto;
}

.section-insights .disabled-insight:hover {
	background-image: none;
}

	/* Section-Insights-Index */
.section-insights-index {
	background-image: URL("../img/bg/insights-tangram.svg"), URL("../img/bg/insights-tangram.svg"), URL("../img/bg/insights-tangram.svg"), URL("../img/bg/insights-tangram.svg"), URL("../img/bg/insights-tangram.svg"), URL("../img/bg/insights-tangram.svg"), URL("../img/bg/insights-tangram.svg"), URL("../img/bg/insights-tangram.svg"), URL("../img/bg/insights-tangram.svg");
	background-size: 1280px 920px;
	background-position: center top, center bottom, center 12%, center 25%, center 37%, center 50%, center 62%, center 75%, center 87%;
	background-repeat: no-repeat;
	padding-bottom: 108px;
	text-align: center;
	padding-top: 88px;
	margin-top: -44px;
	margin-bottom: 80px;
}

	/* Section-Sign-Up */
.section-sign-up {
	padding-top: 0px;
	padding-bottom: 108px;
}

.section-sign-up input {
	height: 50px;
	padding: 12px;
	margin: 12px;
}

.section-sign-up input[type=Email] {
	border: 0.5px solid #4A4A4A;
	border-radius: 5px;
}

.section-sign-up input[type=submit] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border:none;
	width: 190px;
	color: black !important;
	background: #F8E71C;
	border-radius: 5px;
	
	transition-duration: 0.42s;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.section-sign-up input[type=submit]:hover {
	transform: scale(1.04);
	box-shadow: 0 0 8px 0 rgba(0,0,0,0.05);
}

.section-sign-up hr {
	margin: 60px 0px 0px 0px;
	border: 0.5px solid #F4F4F4;
}

	/* Section-Footer */
.section-footer {
	margin-bottom: 32px;
}

.section-footer img {
	width: 230px;
	height: 84px;
}

.section-footer div {
	margin-bottom: 40px;
}

.section-footer h6, .section-footer-end h6 a {
	font-weight: bold;
	font-size: 14px;
	color: #4A4A4A;
	line-height: 35px;
}

.section-footer H6 A, .insight-card H6 {
	font-weight: 400;
	font-size: 14px;
	color: #4A4A4A;
	line-height: 35px;
}

	/* Section-Footer-End */
.section-footer-end {
	height: 94px;
	text-align: center;
}	

.container-footer-end {
	background: #F4F4F4;
}

	/* Section-Offer */
.section-offer {
	background: #F4F4F4;
	padding-top: 20px;
	padding-bottom: 16px;
	margin-top: -56px;
	margin-bottom: 102px;	/* xs size classes only */
	animation: offer-fade 3s;
}

@keyframes offer-fade {
	from { background-color: #F8E71C;
		margin-top: -160px;
	}
	to { background-color:#F4F4F4;
		margin-top: -56px;
	}
}

@media (min-width: 576px) {
	/* => sm size class */
	
	.section-offer {
		margin-bottom: 30px;
	}
}


/* Element specific styling */


	/* Homepage main download button */
.download-button {
	width: 230px;
	height: 60px;
	background: #F8E71C;
	border-radius: 5px;
	transition-duration: 0.42s;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.download-button:hover {
	transform: scale(1.04);
	
	box-shadow: 0 0 8px 0 rgba(0,0,0,0.05);
}

.section-header .download-button {
	width:168px;
}

.download-button h4 {
	margin: 0px;
}

.download-button a, .section-hero-download a {
	text-decoration: none;
	color: #000000;
}

.section-hero-download a:hover {
	opacity: 1.0;
}

body.isios .download-mac {
	display:none !important;	/* Hide the download Mac button if on iOS */
}

body:not(.isios) .download-ios { 
	display: none !important; /* Hide the download iOS button if its not on iOS */
}

/*
body.isios .download-ios {
	display: block !important;
}*/

	/* Insight cards */
	
.insight-card {
	background: #FFFFFF;
	padding: 20px;
	text-align: left;
	transition-duration: 0.42s;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

.section-insights .insight-card {
	max-width: 280px;
	height: 400px;
	box-shadow: 0 0 16px 0 rgba(0,0,0,0.23);
}

.section-insights-index .insight-card {
	margin-bottom: 30px;
	position: relative;
	box-shadow: 0 0 16px 0 rgba(0,0,0,0.1);
}

.section-insights-index .insight-card h4 {
	margin-bottom: 28px;
	position: absolute;
	bottom: 0;
}

.insight-card-secondary {
	height: 440px;
}

.insight-card-featured {
	margin-left: 0px;
	margin-right: 0px;
}

.insight-card-featured div {
	padding-left: 0px;
	margin-bottom: -6px;
}

.insight-card:hover {
	transform: scale(1.05);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 32px 0px;
}

.insight-card .read-more {
	text-decoration: none;
}

.insight-card a {
	text-decoration: none;
	color: #000000;
}

.insight-card a:hover {
	opacity: 1.0;
}

.insight-card img {
	width: 100%;
	height: auto;
}

	/* [Pro] copy label */

.pro-label {
	font-weight: 500;
	font-size: 14px;
	color: #01CCDF;
	line-height: 28px;
	border: 1px solid #01CCDF;
	border-radius: 4px;
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-left: 4px;
}

	/* Anchor destinations */
	
.anchor-destination {
	position: relative;
	width: 0px;
	height: 0px;
	top: -140px;
}

#insights.anchor-destination {
	top: 28px;
}