demo.css

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700|Montserrat);
@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; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
body {
       background: #f9f9f9;
       color: #62706c;
       font-size: 100%;
       line-height: 1.25;
       padding: 25px 0;
       border-right: 25px solid #fff;
       border-left: 25px solid #fff;
       font-family: 'Lato', Arial, sans-serif;
}
body::before,
body::after {
       content: '';
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
       height: 25px;
       background: #fff;
       z-index: 99;
}
body::after {
       top: auto;
       bottom: 0;
}
a {
       color: rgba(0,0,0,0.3);
       text-decoration: none;
       outline: none;
}
a:hover, a:focus {
       color: rgba(0,0,0,0.6);
}
.codrops-header {
       margin: 0 auto;
       padding: 4em 1em;
       text-align: center;
}
.codrops-header h1 {
       margin: 0;
       font-weight: 300;
       font-size: 2.5em;
       position: relative;
}
.codrops-header h1 span {
       display: block;
       padding: 0 0 0.6em 0.1em;
       font-size: 0.6em;
       color: #aaa;
}
.codrops-header a {
       color: #1ECD97;
}
.codrops-header a:hover {
       color: #44524e;
}
/* To Navigation Style */
.codrops-top {
       width: 100%;
       top: 0;
       left: 0;
       text-transform: uppercase;
       font-weight: 700;
       font-size: 0.69em;
       line-height: 2.2;
       z-index: 1000;
       padding-top: 3px;
}
.codrops-top a {
       display: inline-block;
       padding: 0 1em;
       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";
}
section {
       text-align: center;
       position: relative;
}
section h2 {
       color: #ccc;
       font-weight: 400;
       margin: 2em 0 0;
       font-size: 1.15em;
       padding: 0 1em;
}
.box {
       width: 100%;
       max-width: 720px;
       display: inline-block;
       padding: 3em 1em;
}
.box h3 {
       color: #aaa;
       font-size: 1em;
       text-transform: uppercase;
       letter-spacing: 1px;
       font-weight: 400;
       padding: 2em 0;
}
.related {
       padding: 10em 0;
}
.related p {
       font-size: 1.5em;
}
.related > a {
       border: 2px solid rgba(0,0,0,0.3);
       display: inline-block;
       text-align: center;
       margin: 20px 10px;
       padding: 25px;
       -webkit-transition: color 0.3s, border-color 0.3s;
       transition: color 0.3s, border-color 0.3s;
}
.related a:hover {
       border-color: rgba(0,0,0,0.6);
}
.related a img {
       max-width: 100%;
       opacity: 0.8;
       -webkit-transition: opacity 0.3s;
       transition: opacity 0.3s;
}
.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: 26em) {
       .codrops-icon span {
               display: none;
       }
}