@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
*{
	margin:0;
	padding:0;
	outline:none;
	font-family: montserrat, sans-serif;
}
body{
	overflow-x:hidden;
}
.section-header h2{
	margin:0;
	font-size:28px;
	font-weight:bold;
}
.section-header p{
	margin-top:20px;
	line-height:1.8em;
	color:#777;
	font-size:14px;
}
.parallax{
	background-size:cover;
	background-attachment:fixed;
}
.intro-section{
	padding:100px 0;
}
.intro-text > *{
	color:#FFF;
}
.intro-text > h2{
	font-size:70px;
	margin-bottom:0;
}
.intro-text > p{
	font-size:16px;
	opacity:.8;
	margin-top:10px;
}

.features-section{
	padding:80px 0;
	padding-bottom:10px;
	border-bottom:solid 2px #F0F0F0;
}
.feature{
	max-width:290px;
	position:relative;
	text-align:center;
	margin:auto;
	margin-bottom:70px;
}
.feature > .icon{
	margin-bottom:35px;
	font-size:60px;
	line-height:1em;
	color:#e74c3c;
}
.feature > .content > h4{
	font-size:18px;
	font-weight:bold;
	margin-bottom:10px;
}
.feature > .content > p{
	color:#777;
	line-height:1.8em;
}


.demo-section{
	padding:80px 0;
}
.demo-section .section-header{
	margin-bottom:60px;
}


.demo-links{
	position:relative;
	list-style:none;
}
.demo-links:before,
.demo-links:after{
	content: ' ';
	display:table;
}
.demo-links:after{
	clear:both;
}

.demo-links > li{
	float:left;
	width:33.333%;
}
@media (max-width:768px){
	.demo-links > li{
		width:50%;
	}
}
@media (max-width:600px){
	.demo-links > li{
		width:100%;
		float:none;
		height:auto;
	}
}

.demo-links > li > .inner{
	margin:5px;
}
.demo-links > li > .inner > a{
	display:block;
	text-align:center;
	color:#333;
	text-decoration:none;
	background:#F3F3F3;
	padding:35px 20px;
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
	height:147px;
}
.demo-links > li > .inner > a:hover{
	background:#E8E8E8;
}
.demo-links > li > .inner > a > span{
	display:block;
	font-size:18px;
}
.demo-links > li > .inner > a > p{
	color:#777;
	font-size:12px;
	line-height:1.8em;
	max-width:70%;
	margin:auto;
	margin-top:10px;
}

.components-section{
	padding:100px 0;
}


.end-section{
	padding:80px 0;
	background:#FAFAFA;
}
.demo-avn-btn{
	display:inline-block;
	*display:inline;
	*zoom:1;
	font-size:14px;
	color:#FFF !important;
	padding:11px 35px;
	background:#333;
	text-decoration:none !important;
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
}
.demo-avn-btn:hover{
	background:#e74c3c;
}
.end-section .tagline{
	color:#777;
	margin-bottom:35px;
	margin-top:20px;
	font-size:16px;
}
.end-section .attribution{
	margin-top:80px;
	color:#777;
}






#content-wrapper{
	padding:0px 0;
}




.more-demo-btn{
	display:block;
	margin-bottom:100px;
	text-align:center;
}
.more-demo-btn > a{
	display:inline-block;
	*display:inline;
	*zoom:1;
	padding:10px 25px;
	border-radius:50px;
	border:solid 1px #CCC;
	text-decoration:none;
	color:#777;
}
.more-demo-btn > a > span{
	margin:0 5px;
}
.more-demo-btn > a:hover{
	color:#333;
	border-color:#AAA;
}


.features-section .section-header{
	margin-bottom:80px;
}
.features-section .section-header > h2{
	line-height:1.7em;
	font-size:32px;
}






#demo-panel{
	position:fixed;
	z-index:100;
	top:10%;
	left:0;
	max-height:80%;
}
#demo-panel > .colors{
	list-style:none;
	margin:0;
}
#demo-panel > .colors > li > a{
	overflow-y:auto;
	width:15px;
	height:40px;
	display:block;
	margin-bottom:2px;
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
}
#demo-panel > .colors > li > a:hover{
	width:25px;
}


.dcolor-turquoise{
	background:#1abc9c;
}
.dcolor-blue{
	background:#3498db;
}
.dcolor-red{
	background:#e74c3c;
}
.dcolor-green{
	background:#2ecc71;
}
.dcolor-orange{
	background:#f39c12;
}
.dcolor-purple{
	background:#9b59b6;
}
.dcolor-carrot{
	background:#e67e22;
}

.result{
	padding:10px;
	border:dotted 1px #CCC;
	border-radius:3px;
}
.result > p{
	margin:0;
}

@media(min-width:992px){
	.a-t{
		width:80%;
		margin-left:auto;
		margin-right:auto;
	}
}
.tooltip-page pre{
	background:#FFF;
	border:dotted 1px #CCC;
	margin:10px 0;
}
.tooltip-page{
	padding-bottom:50px;
}



.demo-links > .header{
	margin-top:25px;
	width:100%;
	padding-left:5px;
}
.demo-links > .header:first-of-type{
	margin-top:0;
}
.demo-links > .header > h4{
	font-size:16px;
}