/* Header Style */
.container > header { margin: 0 auto; padding: 2em; 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; }
/* 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.5em; padding: 0.7em 1.1em; border: 3px solid #b3b9bf; color: #b3b9bf; font-weight: 700; }
.codrops-demos a:hover, .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover { border-color: #2c3f52; color: #2c3f52; }
 @media screen and (max-width: 25em) {
.codrops-icon span { display: none; }
}


.grid { padding: 20px 20px 0 20px;margin: 0 auto; list-style: none; text-align: center; }
.grid li { display: inline-block; width: 440px; margin: 0; padding: 20px; text-align: left; position: relative; }
.grid figure { margin: 0; position: relative; }
.grid figure img { max-width: 100%; display: block; position: relative;border-radius:15px;}
.grid figcaption { position: absolute; top: 0; left: 0;background-color:rgba(14,129,60,0.6);border-radius:15px;}
.grid figcaption h3 {padding: 0; color: #fff;font-size:24px;font-weight:lighter;}
.grid figcaption a{width:150px;height:30px;line-height:30px; text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; background: #fff;text-decoration:none;border-radius:9px;transition:all 500ms;border:1px solid #0e813c;}
.grid figcaption a:hover{background:transparent;color:#0e813c;border:1px solid #fff;color:#fff;transition:all 500ms;}

/* Caption Style 1 */
.cs-style-1 figcaption { height: 100%; width: 100%; opacity: 0; text-align: center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; }
.no-touch .cs-style-1 figure:hover figcaption, .cs-style-1 figure.cs-hover figcaption { opacity: 1; -webkit-transform: translate(15px, 15px); -moz-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); transform: translate(15px, 15px); }
.cs-style-1 figcaption h3 { margin-top: 70px; }
.cs-style-1 figcaption span { display: block; }
.cs-style-1 figcaption a { margin-top: 30px; }