/* GLOBAL */

.container-fluid{
	width: 90%;
	margin: 0 auto;

}

.heading-about{
	padding: 20px 0px 20px 0px;
	background: #E44C4C;
	color: white;
	margin-bottom: 20px;

}

.heading-tutorial{
	padding: 20px 0px 20px 0px;
	background: #3DA0B3;
	color: white;
	margin-bottom: 20px;

}

.heading-showcase{
	padding: 20px 0px 20px 0px;
	background: #673DB3;
	color: white;
	margin-bottom: 20px;

}

.heading-getting-started{
	padding: 20px 0px 20px 0px;
	background: #3DB363;;
	color: white;
	margin-bottom: 20px;

}

.heading-index{
	padding: 20px 0px 20px 0px;
	background: #FFC54A/*#3DB363*/;
	color: #444;
	margin-bottom: 20px;
	text-align: center;

}

.heading-index P{
	font-size: 24px;
	line-height: 50px;
	font-weight: 300;
}

.section-break{
	padding: 50px 0px 50px 0px;
	border-bottom: 1px solid #efefef;
}

.feedback{
	min-width: 100px;
	float: right;
	padding: 15px 20px 15px 20px;
	color: #FFF;
}

.feedback:hover{
	background: #FF5454;
}

textarea{
	font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
	font-size: 12px;
}


/* HOMEPAGE */

.column-well{
		    border-radius: 10px;
	   -moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color: white;
	text-align: center;
	display: block;
	float: left;

	

}

.container-create{
	width: 600px;
	margin: 0 auto;
}

.column-well img{
	width: 25%;
	height: auto;
}

.waves{
	background: url("../img/wave.png") repeat-x;
	position: absolute;
	height: 50px;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-animation: move .2s infinite; /* IE 10+ */
	
}


.sky{
	background: #96D1FF;
}

@media (max-width: 767px){
	.column-well{
		padding: 5px!important;
	}
	.column-well h2{
		font-size: 14px!important;
	}
	.feedback{
		display: none;
	}
	.heading-index{
		padding: 10px 0px 10px 0px!important;
		color: #444;
		margin: -20px -20px 0px -20px!important;
		font-weight: 400;
	}
	.heading-index p{
		font-size: 12px!important;
		line-height: 15px!important;
	}
	.heading-index h1{
		font-size: 16px;
		padding: 0!important;
		margin: 0!important;
	}
	.column-well p{
		display: none!important;
	}
	.column-well img{
		width: 50%;
		height: auto;
	}
	.affix{
		position: relative!important;
	}
	
}

/*=========================== 

SCROLLBAR (WEBKIT ONLY) CSS 

============================*/
::-webkit-scrollbar{
	background: white;
	width: 10px;
}
::-webkit-scrollbar-button{
	/*background: #202020;*/
}
::-webkit-scrollbar-track{
	background: white;
}
::-webkit-scrollbar-track-piece{
}
::-webkit-scrollbar-thumb{
	background: #3DA0B3;
}
::-webkit-scrollbar-corner{
}
::-webkit-resizer{
}


/* TUTORIAL */

.input{
	height: 200px;
}

#outputframe{
	height: 200px;
}

.nav-button a{
	padding: 10px 0px 10px 10px!important;
}

iframe{
	border: 1px solid #ccc;
	padding: 6px;
	background: white;
}
.interaction{
	width: 300px;
	display: block;
	float: left;
}

.content-scroller{
	overflow: hidden;
	overflow-y: scroll;
}
/*
.tutorial-content{
	overflow:hidden;
	overflow-y: scroll;
}*/


/* FOOTER */

.footer-container{
	width: 100%;
	color: white;
	float: left;
	min-height: 250px;
	background: #2a2a2a;
	margin-top: 100px;
	padding-top: 50px;
	clear: both;
}

.footer-content{
	color: white;
	padding: 50px;
}