/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face{
	font-family:'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),		url('../fonts/codropsicons/codropsicons.woff') format('woff'),		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
	font-weight:normal;
	font-style:normal;
}

*, *:after, *:before{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

body, html{
	font-size:100%;
	padding:0;
	margin:0;
	height:100%;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after{
	content:" ";
	display:table;
}

.clearfix:after{
	clear:both;
}

body{
	font-family:'Lato', Calibri, Arial, sans-serif;
	color:#777;
	background:#f6f6f6;
}

a{
	color:#555;
	text-decoration:none;
	outline:none;
}

a:hover, a:active{
	color:#777;
}

a img{
	border:none;
}

/* Header Style */
.main, .container > header{
	margin:0 auto;
	padding:2em;
}

.container{
	height:100%;
	margin-top:2%;
}

.container > header{
	text-align:center;
	background:rgba(0,0,0,0.01);
}

.container > header h1{
	font-size:2.625em;
	line-height:1.3;
	margin:0;
	font-weight:300;
}

.container > header span{
	display:block;
	font-size:60%;
	opacity:0.3;
	padding:0 0 0.6em 0.1em;
}

/* Main Content */
.main{
	max-width:69em;
}

.column{
	float:left;
	width:50%;
	padding:0 2em;
	min-height:300px;
	position:relative;
}

.column:nth-child(2){
	/*box-shadow*/
	-webkit-box-shadow:-1px 0 0 rgba(0,0,0,0.1);
	   -moz-box-shadow:-1px 0 0 rgba(0,0,0,0.1);
	        box-shadow:-1px 0 0 rgba(0,0,0,0.1);
}

.column p{
	font-weight:300;
	font-size:2em;
	padding:0;
	margin:0;
	text-align:right;
	line-height:1.5;
}

/* To Navigation Style */
.codrops-top{
	background:#fff;
	background:rgba(255, 255, 255, 0.6);
	text-transform:uppercase;
	width:100%;
	font-size:0.69em;
	line-height:2.2;
}

.codrops-top a{
	padding:0 1em;
	letter-spacing:0.1em;
	color:#888;
	display:inline-block;
}

.codrops-top a:hover{
	background:rgba(255,255,255,0.95);
	color:#333;
}

.codrops-top span.right{
	float:right;
}

.codrops-top span.right a{
	float:left;
	display:block;
}

.codrops-icon:before{
	font-family:'codropsicons';
	margin:0 4px;
	speak:none;
	font-style:normal;
	font-weight:normal;
	font-variant:normal;
	text-transform:none;
	line-height:1;
	-webkit-font-smoothing:antialiased;
}

.codrops-icon-drop:before{
	content:"\e001";
}

.codrops-icon-prev:before{
	content:"\e004";
}

.codrops-icon-archive:before{
	content:"\e002";
}

.codrops-icon-next:before{
	content:"\e000";
}

.codrops-icon-about:before{
	content:"\e003";
}

/* Demo Buttons Style */
.codrops-demos{
	padding-top:1em;
	font-size:0.9em;
}

.codrops-demos a{
	display:inline-block;
	margin:0.2em;
	padding:0.45em 1em;
	background:#999;
	color:#fff;
	font-weight:700;
/*border-radius*/
-webkit-border-radius:2px;
   -moz-border-radius:2px;
        border-radius:2px;
}

.codrops-demos a:hover, .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover{
	opacity:0.6;
}

.codrops-nav{
	text-align:center;
}

.codrops-nav a{
	display:inline-block;
	margin:20px auto;
	padding:0.3em;
}

/* Demo Styles */
.demo-1 body{
	color:#87968e;
	background:#fff;
}

.demo-1 a{
	color:#72b890;
}

.demo-1 .codrops-demos a{
	background:#72b890;
	color:#fff;
}

.demo-2 body{
	color:#fff;
	background:#c05d8e;
}

.demo-2 a{
	color:#d38daf;
}

.demo-2 a:hover, .demo-2 a:active{
	color:#fff;
}

.demo-2 .codrops-demos a{
	background:#883b61;
	color:#fff;
}

.demo-2 .codrops-top a:hover{
	background:rgba(255,255,255,0.3);
	color:#333;
}

.demo-3 body{
	color:#87968e;
	background:#fff;
}

.demo-3 a{
	color:#ea5381;
}

.demo-3 .codrops-demos a{
	background:#ea5381;
	color:#fff;
}

.demo-4 body{
	color:#999;
	background:#fff;
	overflow:hidden;
}
.demo-4 a{
	color:#1baede;
}

.demo-4 a:hover, .demo-4 a:active{
	opacity:0.6;
}

.demo-4 .codrops-demos a{
	background:#1baede;
	color:#fff;
}

.demo-5 body{
	background:#fffbd6;
}

@media screen and (max-width: 46.0625em){
	.column{
		width:100%;
		min-width:auto;
		min-height:auto;
		padding:1em;
	}

	.column p{
		text-align:left;
		font-size:1.5em;
	}

	.column:nth-child(2){
		/*box-shadow*/
		-webkit-box-shadow:0 -1px 0 rgba(0,0,0,0.1);
		   -moz-box-shadow:0 -1px 0 rgba(0,0,0,0.1);
		        box-shadow:0 -1px 0 rgba(0,0,0,0.1);
	}
}

@media screen and (max-width: 25em){
	.codrops-icon span{
		display:none;
	}
}