#main-header
	{
	font-weight: 300;
	margin: 90px 0 150px;
	font-size: 1.75rem;
	color: rgba(142,32,76,1);
	}

#main-header [data-jscolor]
	{
	cursor: pointer;
	padding: .15em;
	border: 2px solid rgba(142,32,76,1);
	border-radius: 8px;

	color: rgba(142,32,76,1);
	}

#main-header [data-jscolor].is-dark
	{
	color: #FFF;
	}

/* this will allow to select the text as part of bigger selection, but will prevent selecting it by double-clicking on element itself */
#main-header [data-jscolor]:hover
	{
	user-select: none;
	}


/* Intro */

#intro-strip {
	padding: 140px 0 60px 0;
	margin-top: -60px; /* so that the gradient continues behind the nav */
	background: linear-gradient(to bottom, #f1f7de 0%,#cfd9b0 100%);
}
#intro-content {
	color: #505244;
}
#intro-content #main-header span[data-jscolor] {
	white-space: nowrap;
}

.cursor-image-wrap {
	/*
	if cursor-image-wrap's position will be re-adjusted after full page load (because button might slightly move),
	let's make the movement smooth by putting transition on 'left' and 'top' property
	*/
	transition: opacity 1s, left .5s, top .5s;
}

.cursor-image-wrap:not(.visible) {
	opacity: 0;
}

.cursor-image-wrap.visible .cursor-image {
	animation-name: moveToOrigin;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.3, 0, 0.4, 1);
}

.cursor-image-wrap.fade-out {
	animation-name: fadeOutAndHide;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

.cursor-image-wrap .cursor-image.click:after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	left: -150px;
	top: -150px;
	width: 300px;
	height: 300px;
	border-radius: 300px;
	background-color: rgba(255, 255, 255, 1);
	overflow: hidden;
	pointer-events: none;
	animation-name: animateClick;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}

@keyframes moveToOrigin {
	from { left: 200px; top: 200px; }
	to { left: 0px; top: 0px; }
}

@keyframes animateClick {
	0% {
		visibility: visible;
		opacity: 1;
		transform: scale(0);
	}
	99% {
		visibility: visible;
		opacity: 0;
	}
	100% {
		visibility: hidden;
		opacity: 0;
		transform: scale(1);
	}
}

@keyframes fadeOutAndHide {
	0% {
		opacity: 1;
		visibility: visible;
	}
	99% {
		opacity: 0;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}


/* Installation */

#installation-strip {
	padding: 60px 0;
	background: #FFF;
	border: 1px solid rgb(178,181,165);
	border-style: solid none solid none;
	background: linear-gradient(to bottom, rgba(242,247,230,1) 0%,#ffffff 100%);
	box-shadow: 0px 0px 40px 0px rgba(171,178,151,0.85);
}

.installation-example
	{ position: relative; padding: 0 10px; }

.installation-example h2
	{ margin-bottom: 30px; font-size: 1.6rem; color: rgba(121,140,72,1); font-weight: 300; }

.installation-example .sandbox
	{
	margin-top: -30px;
	}

.installation-example .sandbox .btnHidePreview,
.installation-example .sandbox .lblAutoUpdate
	{
	display: none;
	}

#installation-content .footlinks { clear: both; margin: 30px 20px 20px; font-size: 1.1rem; }
#installation-content .footlinks .release-name { font-weight: 400; }
#installation-content .footlinks .release-info { font-style: italic; }
#installation-content .footlinks .sep { margin: 0 .2em; opacity: .5; font-size: 1.6rem; }


/* Examples */

#examples-strip { padding: 80px 0; background: #404040; color: #CCC; box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.85) inset; }
#examples-content h2 { margin-bottom: 30px; color: #DFDFDF; }
#examples-content a { color: #FFF; }

#examples-content .example { float: left; width: calc(33.3% - 1px); text-align: left; }
#examples-content .example-inner { margin: 10px; padding: 25px 20px; background-color: rgba(255,255,255,0.1); border-radius: 8px; }
#examples-content .example code { display: block; font-size: 0.8rem; min-height: 11em; }
#examples-content .example .surround { display: block; color: rgba(255,255,255,0.5); }
#examples-content .example .opts { display: block; color: rgba(255,255,255,0.95); margin-left: 2em; }
#examples-content .example .opt { display: block; }
#examples-content .example .preview { font-size: 0.8rem; color: rgba(255,255,255,0.95); }
#examples-content .example input { font-size: 100%; width: 220px; margin-left: 3px; }
#examples-content .more { margin-top: 1.5em; font-size: 1.1rem; }


/* Demo app */

#demo-strip { padding: 80px 0; background: #404040; color: #CCC; box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.85) inset; }
#demo-content h2 { margin-bottom: 30px; color: #DFDFDF; }
#demo-content a { color: #FFF; }

#demo-app { position: relative; }
#demo-app table { width: 100%; font-size: 0.9rem; }
#demo-app th { font-weight: normal; padding: 0 5px; }
#demo-app table input { width: 140px; color: #FFF; border: 1px solid #999; background: #262626; padding: 5px 5px; font-size: 100%; }
#demo-app table input:focus { border-color: #FFF !important; color: #FFF !important; }
#demo-app table input.short { width: 60px; text-align: center !important; }
#demo-app button { width: 185px; height: 50px; margin: 10px 0; font-size: 0.9rem; }

#demo-app .panels { position: absolute; top: -75px; width: 100%; }
#demo-app .panels:after { content: ""; display: table; clear: both; }

#demo-app .panel { width: 220px; }
#demo-app .panel .red { color: #F99; }
#demo-app .panel .red input { border-color: #F99; color: #F99; }
#demo-app .panel .grn { color: #9F9; }
#demo-app .panel .grn input { border-color: #9F9; color: #9F9; }
#demo-app .panel .blu { color: #9CF; }
#demo-app .panel .blu input { border-color: #9CF; color: #9CF; }

#demo-app .panel.bgcolor { float: left; }
#demo-app .panel.bgcolor th { text-align: right; }
#demo-app .panel.bgcolor td { text-align: left; }
#demo-app .panel.bgcolor table input { text-align: left; }

#demo-app .panel.fgcolor { float: right; }
#demo-app .panel.fgcolor th { text-align: left; }
#demo-app .panel.fgcolor td { text-align: right; }
#demo-app .panel.fgcolor table input { text-align: right; }

#demo-app #demo-preview {
	margin: 0 auto;
	padding: 35px 0 20px;
	width: 440px;
	border: 4px solid #000;
	text-align: center;
	font-size: 1.35rem;
	font-weight: 300;
	border-radius: 15px;
}
#demo-app #demo-preview strong {
	font-weight: normal;
	font-size: 2.5rem;
}
#demo-app #demo-links { margin: 40px auto; position: relative; z-index: 1; font-size: 1.1rem; }


/* Features */

#features-strip
	{
	padding: 60px 0 40px 0; background: linear-gradient(to bottom, #cfd9b0 0%, #f1f7de 8%,#cfd9b0 100%);
	}
#features-content,
#features-content h3 { color: #303616; }
#features-containers { width: 100%; position: relative; }
#features-content .feature-container { width: 33.3%; float: left; }
#features-content .feature-box {
	width: 220px;
	height: 220px;
	margin: 0 auto;
	background-position: center center;
	background-repeat: no-repeat;
	border-width: 1px;
	border-style: solid;
	border-radius: 15px;
}
#features-content h3 { font-size: 1.6rem; min-height: 45px; margin: 25px 0px 10px 0px; padding: 0; }
#features-content abbr { border-bottom: 1px dotted #333; }
#features-content .feature-text { margin: 0 10px; }
#features-content .feature-text .descr { font-size: 1rem; }

#feature1 .feature-box { background-image: url('icon-no-dependencies.png'); background-color: #AB2567; border-color: #871D4C; }
#feature1 h3 { color: #8A1E53; }

#feature2 .feature-box { background-image: url('icon-cross-browser.png'); background-color: #3399CC; border-color: #297CA6; }
#feature2 h3 { color: #267196; }

#feature3 .feature-box { background-image: url('icon-customizable.png'); background-color: #83AF2C; border-color: #678A23; }
#feature3 h3 { color: #698C23; }


/* Compatibility */

#compat-strip {
	overflow: hidden;
	box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.85) inset;
	background-color: #404040;
	background-image: url('touch-devices.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: calc(50% - 50px) 120px;
}
#compat-bg { position: absolute; width: 100%; height: 400px; }
#compat-body { position: relative; width: 100%; }
#compat-text,
#compat-text h2,
#compat-text strong { color: #FFF; }
#compat-text h2 { margin: 60px 0 40px 0; font-size: 160%; color: rgba(255,255,255,0.85); }
#compat-text strong { font-weight: bold; }
#compat-text { position: absolute; right: 0; top: 0; width: 360px; font-size: 110%; }
#compat-text .inner { padding: 20px; }
#compat-body,
#compat-text,
#compat-text .bg,
#compat-text .fg { height: 420px; }
#compat-text .bg,
#compat-text .fg { position: absolute; left: 0; top: 0; width: 100%; }
#compat-text .bg {
	background: #000;

	opacity: 0.5;
	filter: alpha(opacity=50); /* IE */
}


/* Assistance */

#assistance-strip { padding: 60px 0 40px 0; background: linear-gradient(to bottom, #f1f7de 0%,#cfd9b0 100%); }
#assistance-content { color: #303616; }
#assistance-content strong { color: #8E204C; }
#assistance-content h2 { margin-bottom: .8em; }
#assistance-content h3 { font: inherit; font-size: 1.2rem; font-weight: 400; margin:10px 0 20px; }
#assistance-content .text-body { }
#assistance-content .scenarios { background-color:rgba(255,255,255,.4); margin: 25px auto; max-width:1000px; padding:20px; border:1px solid rgba(170,187,153,.5); font-size: 0.95rem; }
#assistance-content .scenarios ul { text-align: left; }
#assistance-content .scenarios li { margin: 8px 0; }


/* Testimonials */

#testimonials-strip { padding: 50px 0 60px 0; background: #8C3857; }
#testimonials-content,
#testimonials-content h2,
#testimonials-content a { color: #FFF; }
#testimonials-content h2 {
	margin-bottom: 30px;
	color: rgba(255,255,255,0.85);
}
#testimonials-list { }
#testimonials-list .testimonial { width: 33.3%; float: left; text-align: left; }
#testimonials-list .testimonial-inner { padding: 0 15px; }
#testimonials-list q { font-style: italic; }
#testimonials-list .author { text-align: right; }


@media only screen and (max-width: 480px) {

	#features-content .feature-container { width: 100%; float: none; }
	#testimonials-list .testimonial { width: 100%; float: none; margin-bottom: 2em; }

	#compat-text { width: 100%; }

	#demo-app .panels { position: relative; top: 0px; margin-bottom: 35px; }

	#examples-content .example { width: 100%; }

}