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



.container > header {margin: 0 auto; padding: 0px; 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: 500;}





.grid {list-style: none; margin: 0px auto; padding: 20px 20px 40px 30px; text-align: center;}

.grid li {width: 460px; height: 170px; margin: 0px; padding: 0px; text-align: left; display: inline-block; position: relative;}

.grid figure {margin: 0px; position: relative;}

.grid figure img {display: block; position: relative; max-width: 500px; border-radius: 10px;}

.grid figcaption {background: rgb(44, 63, 82); padding: 8px; left: 0px; top: 0px; color: rgb(163, 172, 178); font-size: 11px; position: absolute;}

.grid figcaption h3 {margin: 0px; padding: 0px; color: rgb(255, 255, 255); font-size: 11px;}

.grid figcaption span::before {content: "   ";}

.grid figcaption a {background: rgb(237, 78, 110); padding: 2px; border-radius: 5px; left: 20px; text-align: center; color: rgb(255, 255, 255); font-size: 11px; display: inline-block;}



















.cs-style-4 li {perspective-origin: 0% 50%; perspective: 1500px; -webkit-perspective: 1500px; -moz-perspective: 1500px; -webkit-perspective-origin: 0 50%; -moz-perspective-origin: 0 50%;}

.cs-style-4 figure {-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;}

.cs-style-4 figure > div {overflow: hidden;}

.cs-style-4 figure img {transition:transform 0.4s; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s;}

.no-touch .cs-style-4 figure:hover img {transform: translateX(200px); -webkit-transform: translateX(200px); -moz-transform: translateX(200px);}

.cs-style-4 figure.cs-hover img {transform: translateX(200px); -webkit-transform: translateX(200px); -moz-transform: translateX(200px);}

.cs-style-4 figure p {transition:transform 0.4s; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s;}

.no-touch .cs-style-4 figure:hover p {transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%);}

.cs-style-4 figure.cs-hover p {transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%);}

.cs-style-4 figcaption {width: 40%; height: 144px; transform-origin: 0% 0%; transition:transform 0.4s, opacity 0.1s 0.3s; opacity: 0; transform: rotateY(-90deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0;}

.no-touch .cs-style-4 figure:hover figcaption {transition:transform 0.4s, opacity 0.1s; opacity: 1; transform: rotateY(0deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg);}

.cs-style-4 figure.cs-hover figcaption {transition:transform 0.4s, opacity 0.1s; opacity: 1; transform: rotateY(0deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg);}

.cs-style-4 figcaption a {right: 28px; bottom: 

px; position: absolute;}



@media screen and (max-width: 31.5em) {.grid {padding: 10px 10px 10px 10px;} .grid li {width: 100%; min-width: 500px;} }