@import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700);
@font-face { font-weight: normal; font-style: normal; font-family: 'codropsicons'; src: url('../fonts/codropsicons/codropsicons.eot'); src: url('../fonts/codropsicons/codropsiconsd41d.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; box-sizing: border-box; }
.clearfix:before,
.clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
.support { display: none; color: #ef5189; text-align: left; font-size: 1.5em; max-width: 1200px; margin: 1em auto 0; padding: 0; }
.no-flexbox .support { display: block; }
.hidden { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; }
.container > section { padding: 5em 0; font-size: 1.25em; min-height: 100%; }
p { /*text-align: center;
	padding: 1em;*/
}
/* Header */
.codrops-header { padding: 7em 0 3em; letter-spacing: -1px; }
.codrops-header h1 { max-width: 1200px; margin: 0 auto; font-weight: 800; font-size: 5em; line-height: 1; }
.codrops-header h1 span { display: block; font-size: 50%; font-weight: 400; padding-top: 0.325em; color: #bdc2c9; }
/* To Navigation Style */
.codrops-top { width: 100%; text-transform: uppercase; font-weight: 700; font-size: 0.69em; line-height: 2.2; }
.codrops-top a { display: inline-block; padding: 1em 2em; text-decoration: none; letter-spacing: 1px; }
.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"; }
/* Related demos */
.related { text-align: center; }
.related > a { width: calc(100% - 20px); max-width: 340px; border: 1px solid black; border-color: initial; display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; }
.related a img { max-width: 100%; opacity: 0.8; }
.related a:hover img,
.related a:active img { opacity: 1; }
.related a h3 { margin: 0; padding: 0.5em 0 0.3em; max-width: 300px; text-align: left; }
 @media screen and (max-width: 1280px) {
.codrops-header h1 { padding: 0 0.5em; }
.support { padding: 0 1.5em; }
}
 @media screen and (max-width: 30em) {
.container > section { padding: 3em 0; }
.codrops-header { padding: 2em 0 1em; }
.codrops-header h1 { font-size: 3.5em; }
}
 @media screen and (max-width: 25em) {
.codrops-icon { font-size: 1.5em; }
.codrops-icon span { display: none; }
}