@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-weight: normal;
font-style: normal;
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');
}

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

body {
background: #fff;
color: #5a5350;
font-weight: 300;
font-family: 'Lato', Calibri, Arial, sans-serif;
overflow-y: scroll;
overflow-x: hidden;
}


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

a:hover, a:focus {
color: #e86a32;
outline: none;
}

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

.clearfix:after {
clear: both;
}

.codrops-header,
.codrops-top {
font-family: 'Lato', Arial, sans-serif;
}

.codrops-header {
margin: 0 auto 3em;
padding: 3em;
text-align: center;
}

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

.codrops-header span {
display: block;
padding: 0 0 0.6em 0.1em;
font-size: 60%;
color: #aca89a;
}

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

.codrops-top a {
display: inline-block;
padding: 0 1em;
text-decoration: none;
letter-spacing: 0.1em;
}

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

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

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

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

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

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

.main {
max-width: 69em;
margin: 0 auto;
}

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

.column:nth-child(2) {
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
text-align: left;
}

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

.codrops-demos a,
button {
border: none;
padding: 0.6em 1.2em;
background: #a9a9a9;
color: #fff;
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 1em;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
margin: 10px;
border-radius: 2px;
font-weight: 400;
outline: none;
}

.codrops-demos a:hover,
.codrops-demos a:active,
.codrops-demos a.current-demo {
background: #777;
}

button {
font-size: 100%;
background: #ed8151;
}

button:hover,
button:active {
background: #e86a32;
}

.related {
text-align: center;
font-size: 1.5em;
margin-top: 3em;
clear: both;
padding: 3em 0;
}

.related a {
font-weight: 700;
font-size: 0.9em;
}

@media screen and (max-width: 46.0625em) {

.codrops-header {
margin-bottom: 0;
padding-bottom: 1em;
}

.column {
width: 100%;
min-width: auto;
min-height: 0;
padding: 2em;
text-align: center;
}

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

.column:nth-child(2) {
text-align: center;
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
}
}

@media screen and (max-width: 25em) {

.codrops-header {
font-size: 80%;
}

.codrops-top {
font-size: 120%;
}

.codrops-icon span {
display: none;
}

}