Difference between revisions of "Team:IIT Kharagpur/style"
Satyamag28 (Talk | contribs) |
Satyamag28 (Talk | contribs) |
||
Line 1,596: | Line 1,596: | ||
.cs-style-4 figcaption { | .cs-style-4 figcaption { | ||
height: 100%; | height: 100%; | ||
− | width: | + | width: 100%; |
opacity: 0; | opacity: 0; | ||
backface-visibility: hidden; | backface-visibility: hidden; |
Revision as of 19:53, 3 October 2015
@font-face { font-family:'Roboto-Condensed-Light'; src:url('https://static.igem.org/mediawiki/2015/0/0a/IIT_Kharagpur_roboto_condensed_light.ttf'); }
@font-face {
font-family:'Harabara';
src:url(../fonts/Harabara.otf);
}
@font-face { font-family:'Boycott'; src:url("https://static.igem.org/mediawiki/2015/4/4d/IIT_Kharagpur_Boycott.ttf"); }
@font-face { font-family:'MyriadPro'; src:url(../fonts/MYRIADPRO-SEMIBOLD.woff); }
@font-face { font-family:'Lato-Regular'; src:url(../fonts/Lato-Regular.ttf); }
@font-face { font-family:'Lato-Semibold'; src:url(../fonts/Lato-Semibold.ttf); }
@font-face { src:url("http://fonts.googleapis.com/css?family=Open+Sans" ); }
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
display:none;}
- top_menu_14 {
height: 20px; z-index: 100; top: 0; position:absolute; width: 100%; color:#fff; font-family: Quicksand; src: url(../fonts/Quicksand-Regular.ttf); letter-spacing:2px; background-color:rgba(0,0,0,0.85); }
- globalWrapper, #content {
width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px; padding: 0px; font-size: 100%; }
- top_menu_inside {
display: block; position: relative; width: 960px; height: 100%; margin: 0px auto; padding: 0 10px; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; font-family: 'arial', sans-serif; font-size: 12px; font-weight: 400; color: #ffffff;
}
html, body, .wrapper { width: 100%; height: 100%; min-height:100%; background-color: transparent; }
.navbar { margin: 0 auto; margin-top: 1em; padding: 1em; border-radius: 10px; } .tint {
background: rgba(0,0,255, 0.5);
}
.menu-show {
margin-top:-20px;
background-color:rgba(0,0,0,0.80);
}
.jumbo-home { overflow: hidden; background-blend-mode: overlay; background:#142D2D url("") center center; background-size: cover; height:100%; width:100%;
position: relative;
}
@media only screen and (min-width: 1472px) { .jumbo-home,.jumbo-team,.jumbo-project,.jumbo-notebook,.jumbo-safety,.jumbo-practices,.jumbo-blog,.jumbo-parts,.jumbo-modeling,.jumbo-attributions {
min-height: 1030px;
max-height:1200px} }
@media only screen and (min-width: 992px) { .jumbo-home,.jumbo-team,.jumbo-project,.jumbo-notebook,.jumbo-safety,.jumbo-practices,.jumbo-blog,.jumbo-parts,.jumbo-modeling,.jumbo-attributions {
min-height: 820px;}
}
h3 {font-family: 'Roboto-Condensed-Light';}
@media only screen and (max-width : 992px) {
.jumbo-home,.jumbo-team,.jumbo-project,.jumbo-notebook,.jumbo-safety,.jumbo-practices,.jumbo-blog,.jumbo-parts,.jumbo-modeling,.jumbo-attributions { min-height: 700px; width: 100%; }
}
.menu {
top:20px; height:auto; display: block; margin-left: auto; margin-right: auto; /*padding: 0px 5px 0px 5px;*/ position: fixed; width: 100%; z-index: 1000; transition:all .5s ease;
}
.team-menu { background-color:rgba(0,0,0,0.30); }
.menu > ul {
position: relative; width:auto; /*border:2px solid #fff;*/ text-align: center; margin-left: auto ; margin-right: auto;
margin-bottom:0;
list-style: none;
} .menu-li {
font: bold 12px/18px sans-serif; display: inline-block; height:35px; border:2px solid transparent; text-transform: uppercase; line-height: 13px; cursor:pointer; padding: 5px 10px 10px 10px; font-size: 1.2em; letter-spacing: .2em; color: #fff; margin-bottom: 5px; margin-left: 1px; margin-right: 1px; position: relative; font-weight:bold; transition: all 0.5s ease;
}
ul li a{
text-decoration: none; color:#fff; transition: all 0.4s ease;
}
.menu-div {
width:auto;
}
.menu-img {
float: left; height:23px; margin-right: 5px;
}
.menu-logo { display:none; text-align: center; /*display: inline-block;*/ height:auto;
/*border:2px solid transparent;*/ text-transform: uppercase; line-height: 20px; cursor:pointer; padding:3px 0 2px 0; font-size: 15px; font-weight: bold; font: sans-serif; text-align: left; letter-spacing: .15em; color: #fff; transition: all 0.5s ease; margin-left: -50px;
} .menu-logo-img { height:40px; float: left; margin-right: 10px; margin-top: 2px }
.menu-logo-text { text-align: center; float:right; margin-top: 3px; }
.menu > ul > li > a{
color:#fff;
transition: all 0.5s ease; }
.menu > ul > li:hover > a {
color:#17bcb8;
}
.menu-logo a { color:#fff; }
.menu-text { color:#fff;
float:right; margin-top: 4px;
}
.menu-li:hover {
color:#17bcb8; border:2px solid;
}
/*ul li:hover a {
color:#17bcb8;
}*/
.menu > ul > li > ul {
padding: 0; position: absolute; background-color:rgba(0,0,0,0.80); top: 28px; left: -30%; width: 250px; /*border-top:5px solid transparent;*/ height: auto; transition: all 0.5s ease; box-shadow: none; display: none; opacity: 0; visibility: hidden; border-radius: 2px; z-index: 1;
}
.menu > ul > li > ul::before {
content: ""; width: 0px; height: 0px; border: 0.8em solid transparent; position: absolute; left: 45%; top: -22px; border-bottom: 10px solid rgba(0,0,0,0.80);
}
.menu > ul > li > ul > li {
border-bottom:5px solid transparent; display: block; padding:10px; color: #fff; height:auto; transition: all 0.2s linear;
}
.menu > ul > li > ul > li:hover {
color:#17bcb8; background: #fff; border-bottom:5px solid #17bcb8;
}
.menu > ul > li > ul >li a{
color:#fff;
}
.menu > ul > li > ul >li:hover a{
color:#17bcb8;
}
.menu ul li:hover ul {
display: block; opacity: 1; visibility: visible;
}
.logo { width:650px; height:200px; position: absolute; top:45%; left:50%; margin-left: -325px; margin-top: -100px;
}
.logo-text { width:auto; margin-left: auto; margin-right: auto; font-size: 50px; color:#fff; padding:5px; text-align: center;
}
.logo-text a { color:#fff; font-family:'Harabara'; letter-spacing: .1em; text-decoration:none; font-weight:bold; transition: all 0.5s ease; }
.logo-text:hover a { color:#17bcb8; }
.team-logo-outer { position: absolute; top:40%; left:15%; margin-left: -90px; margin-top: -90px; width:180px; height: 180px;
-webkit-animation-name: spin; -webkit-animation-duration: 20000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin; -moz-animation-duration: 20000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin; -ms-animation-duration: 20000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-transition: rotate(3600deg);
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }
} @-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }
} @keyframes spin {
from {transform:rotate(0deg);} to {transform:rotate(360deg);}
}
.team-logo-inner { position: absolute; top:40%; left:15%; width:100px; height: 100px; margin-left: -50px; margin-top:-50px; }
.home-text { position: absolute; top:40%; left:55%; width:420px; height: 100px; margin-left: -150px; margin-top: -50px; }
.home-text-icon { position: absolute; top:75%; left:50%; width:400px; height:100px; margin-left: -200px; margin-top: -100px; transition:all 0.4s ease; }
.scroller1 {
width:60px; height:60px; border-radius:6px; margin-top:9%; margin-left:93%; background-color: #17bcb8 ; text-align: center; padding-top:20px; cursor:pointer; text-decoration:none; }
.color-rail {
margin-top: -30px; height: 10px; left: 0; width: 100%; }
.color-rail div { float:left; width:12.5%; height:10px; }
.white { background: #ebeef4; }
.light-gray {
background: #aab9c0;
}
.gray {
background: #2b3842;
}
.dark-gray {
background: #212835;
}
.black {
background: #0c1116;
}
.dark-teal {
background: #1c6060;
}
.teal {
background: #1e7c7a;
}
.orange {
background: #f44e04;
}
.main-mid1 { height:auto; padding-top:10px; padding-bottom:20px; overflow: hidden;
}
.project-heading { text-align:center; }
.project-description { font-size:17px; padding:20px; color:#000; /*font-family:'Lato-Regular';*/ font-family:'Roboto-Condensed-Light'; text-align: justify; display:block; margin-left: auto; margin-right: auto; background-color: #E1E3E4; line-height:2em; width:100%; opacity: .7;
}
h2 { font-size: 45px;
font-family:'Roboto-Condensed-Light'; color:#2b3842; }
.main-mid1 img { display: block; margin-left: auto; margin-right: auto; }
.main-mid2{ height:800px; padding:0; }
.carousel-caption { font-size: 40px; }
.main-mid3{
}
.details1 { margin-top: 10px; margin-bottom:10px; display:block; width: 100%; height: 400px; margin-left:2%; border:2px solid; cursor:pointer; text-align: center; font-size: 20px; font-weight: bold; padding: 80px; }
.details2 { margin-top: 10px; margin-bottom:10px; display:block; width: 100%; height: 190px; margin-left:2%; border:2px solid; cursor:pointer; text-align: center; font-size: 20px; font-weight: bold; padding: 80px; }
@media screen and (max-width: 800px) {
.details { width: 80%; margin-left:auto; margin-right: auto; }
.scroller2 { width:40px; height:40px; }
.menu { margin-top:-10px; }
.menu-items > ul >li { font-size: 20px; }
} .details:hover { background:linear-gradient(to bottom, rgba(54, 100, 139, 0.6) 0%, rgba(54, 100, 139, 0.6) 100%);
}
.main-mid4 {
}
.main-video { margin:40px 8% 0 5%; width:90%; padding:10px 10px 10px 10px; }
.scroller2 {
display:none;
float:right; margin-right: -2%; width:60px; height:60px; border-radius:6px; background-color: #17bcb8 ; text-align: center; padding-top:20px; cursor:pointer; text-decoration:none; }
.footer1 { position: absolute; display: block; height: auto; background-color:rgba(0,0,0,0.80); z-index: 1000; width:100%; }
.footer2 { background-color: rgba(0,0,0,0.90); position: absolute; width: 100%; margin-top: 120px;
}
.footer-content { display: block; margin-left: auto; margin-right: auto; padding:15px; height:120px; max-width: 1200px; }
.footer-content a { font-size: 1.4em; line-height: 1.2em; text-decoration: none; color:#fff; font-weight: 600; }
footer-content img {
width:auto;
}
.footer1 h3 {
margin-top:0px;
color:#fff; }
.footer-cr { padding: 20px float:left; color: #fff; }
.social { float:left; margin-right: 10px; width:40px; height:40px; }
.mail-button { background-color: #17bcb8 !important; -webkit-tap-highlight-color: transparent; will-change: opacity, transform; -webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; -ms-transition: all .3s ease-out; transition: all .3s ease-out; border: none; border-radius: 2px; float:left; height: 39px; line-height: 39px; outline: 0; padding: 0 2rem; text-transform: uppercase; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.mail-button a { font-size: 1.1em;
font-weight: bold; color:#fff;
}
/*Project Page*/
.project-mid1,.modeling-mid1 { padding:20px 0 20px 0; }
/* Team Page */
.jumbo-team { position: relative; background-blend-mode: overlay; overflow: hidden; /*background: #335353 url("") center center; background-size: cover;*/ height:100%; width:100%;
padding-top:0; margin-bottom:0; }
.jumbo-attributions { position: relative; background-blend-mode: overlay; overflow: hidden; background: #335353 url("") center center; background-size: cover; height:100%; width:100%;
padding-top:0; margin-bottom:0; }
.team-text-div1 { position: absolute; width:1000px;
top:50%; left: 50%; margin-left: -500px; margin-top: -100px;
}
.team-text1 { display: block; margin-right: auto; margin-left: auto; width:60%; }
.team-text-div2 { position: absolute; width:400px; top:70%; left:50%; margin-left:-200px; transition:all 0.3s ease; }
.team-text-div2:hover { width:380px; margin-left: -190px; }
.team-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;
}
.team-mid2{
}
.team-heading { text-align:center; }
.team-description { padding:20px; }
.member-div { border:3px solid #17bcb8; margin:10px 2% 10px 2%; padding: 10px; border-radius: 3%; width:29% ; height:600px; overflow: hidden; }
@media screen and (max-width: 992px) { .member-div { width:auto;
}
}
.member-photo-div { overflow: hidden; display: block; margin-right: auto; margin-left: auto; background-blend-mode: multiply; border-radius: 50%; border:5px solid #17bcb8; width:250px; height:250px; transition: all .4s linear; }
.harsheel { background: hsl(200,50%,50%) url(""); background-size: cover; }
.harsheel:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.krishna { background: #80B2B2 url(""); background-size: cover; }
.krishna:hover { background: url(""); background-size: cover; border:10px solid #17bcb8; }
.yogesh { background: #80B2B2 url(""); background-size: cover; }
.yogesh:hover { background: url(""); background-size: cover; border:10px solid #17bcb8; }
.vivek:hover { background: url(""); background-size: cover; border:10px solid #17bcb8; }
.vivek { background: #80B2B2 url(""); background-size: cover; }
.roshan:hover { background: url(""); background-size: cover; border:10px solid #17bcb8; }
.roshan { background: #80B2B2 url(""); background-size: cover; }
.sriram:hover { background: url(""); background-size: cover; border:10px solid #17bcb8; }
.sriram { background: #80B2B2 url(""); background-size: cover; }
.varshit:hover { background: url(""); background-size: cover; border:10px solid #17bcb8; }
.varshit { background: #80B2B2 url(""); background-size: cover; }
.swati { background: #80B2B2 url(""); background-size: cover; }
.swati:hover { background: url(""); background-size: cover; border:10px solid #17bcb8; }
.ashutosh { background: #80B2B2 url("../img/ashutosh.png"); background-size: cover; }
.ashutosh:hover { background: url("../img/ashutosh.png"); background-size: cover; border:10px solid #17bcb8; }
.adarsh { background: hsl(200,50%,50%) url(""); background-size: cover; }
.adarsh:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.bhavya { background: hsl(200,50%,50%) url("../img/harsheel.png"); background-size: cover; }
.bhavya:hover { background: url("../img/harsheel.png"); border:10px solid #17bcb8; background-size: cover; }
.jugal { background: hsl(200,50%,50%) url(""); background-size: cover; }
.jugal:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.rhushikesh { background: hsl(200,50%,50%) url(""); background-size: cover; }
.rhushikesh:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.pruthvi { background: hsl(200,50%,50%) url(""); background-size: cover; }
.pruthvi:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.debrishi { background: hsl(200,50%,50%) url("../img/harsheel.png"); background-size: cover; }
.debrishi:hover { background: url("../img/harsheel.png"); border:10px solid #17bcb8; background-size: cover; }
.karan { background: hsl(200,50%,50%) url(""); background-size: cover; }
.karan:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.dipasha { background: hsl(200,50%,50%) url(""); background-size: cover; }
.dipasha:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.manojna { background: hsl(200,50%,50%) url(""); background-size: cover; }
.manojna:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.sanjay { background: hsl(200,50%,50%) url(""); background-size: cover; }
.sanjay:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.satyam { background: hsl(200,50%,50%) url(""); background-size: cover; }
.satyam:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.shaurya { background: hsl(200,50%,50%) url(""); background-size: cover; }
.shaurya:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.chetan { background: hsl(200,50%,50%) url(""); background-size: cover; }
.chetan:hover { background: url(""); border:10px solid #17bcb8; background-size: cover; }
.member-desc-div { display:block; margin-right:auto; margin-left: auto; padding:15px; color:#000; text-align: left;
}
.member-desc-div h4 { text-align: center; color:#17bcb8; font-weight: bold; }
.prof-div { margin-top: 10px; margin-bottom: 10px; border:3px solid #17bcb8 ; border-radius: 4px; display:block; width:100%; padding:10px; overflow: hidden; }
.prof-pic-div { border:5px solid #17bcb8; float:left; border-radius: 50%; display:block; width:240px; height:240px; margin-left: 20px; margin-top:10px; background-blend-mode: multiply; transition: all .4s linear; }
.prof-desc-div { padding:10px; display:block; float:right; width:70%; margin:20px 50px 0 20px; }
.prof-desc-div h4 { color:#17bcb8; font-weight: bold; } .prof-desc-div h5 { color:#17bcb8; font-weight: bold; }
.agneyo { background: #80B2B2 url(""); background-size: cover; }
.agneyo:hover { background: url(""); background-size: cover; border:10px solid #17bcb8; }
.maiti { background: #80B2B2 url(""); background-size: cover; }
.maiti:hover { background: url(""); background-size: cover; border:10px solid #17bcb8; }
.team-mid3 { padding:10px; }
.team-mid3 h2 { text-align: center; font-weight: bold; }
.team-mid3 h3 { text-align: center; font-weight: bold; }
.sponsor1 { display: block; border-radius: 4px; width:100%; height:180px; background-color: #80B2B2; padding:30px; margin-top: 10px; margin-bottom: 10px; }
.sponsor1 img { display: block; margin-left: auto; margin-right: auto; }
.sponsor2 { padding:30px; border-radius: 4px; display:block; height:180px; color:#fff; background-color: #80B2B2; margin-top: 10px; margin-bottom: 10px; }
/* Project Page */
.jumbo-project { position: relative; overflow: hidden; background: #163747 url("") center center; background-size: cover; height:100%; width:100%; }
.project-text-div1 { position: absolute; width:1100px;
top:50%; left: 50%; margin-left: -550px; margin-top: -100px;
}
.project-text1 { display: block; margin-right: auto; margin-left: auto; width:60%; }
.project-text-div2 { position: absolute; width:500px;
top:70%; left: 50%; margin-left: -250px; margin-top: -50px; transition:all 0.3s ease;
}
.project-text-div2:hover { width:480px; margin-left: -240px; }
.project-text2 { display: block; margin-right: auto; margin-left: auto; width:100%; transition:all 0.3s ease; }
.jumbo-achievements { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }
.achievements-text-div1 { position: absolute; width:1100px;
top:50%; left: 50%; margin-left: -550px; margin-top: -100px;
}
.achievements-text1 { display: block; margin-right: auto; margin-left: auto; width:60%; }
.achievements-text-div2 { position: absolute; width:500px;
top:70%; left: 50%; margin-left: -250px; margin-top: -20px; transition:all 0.3s ease;
}
.achievements-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;
}
.achievements-text-div2:hover { width:480px; margin-left: -240px; }
.jumbo-safety { position: relative; overflow: hidden; background: #335353 url("../img/background1.jpg") center center; background-size: cover; height:80%; width:100%; }
.safety-text-div1 { position: absolute; width:600px;
top:40%; left: 35%; margin-left: -300px; margin-top: -100px; color: #fff;
line-height:1.7em;
font-size: 3em; font-family: "Boycott"; word-spacing: 1px;
}
h2 { text-align: center; }
.safety-text1 { display: block; margin-right: auto; margin-left: auto; width:100%; }
.safety-text-div2 { position: absolute; width:600px;
top:55%; left: 50%; margin-left: -300px; margin-top: -50px;
}
.safety-text2 {
display: block;
margin-right: auto;
margin-left: auto;
width:100%;
transition:all 0.3s ease;
}
.safety-text2:hover { /*width:95%;*/
}
.safety-mid1 { padding:20px 0 20px 0; }
.safety-desc { width:auto; font-size: 1.3em; margin-top: 5px; margin-bottom: 5px; font-family: 'Lato-Semibold'; }
.safety-desc-img { margin-top: 5px; width:100%; height:400px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transition: opacity .4s;
-moz-transition: opacity .4s; -o-transition: opacity .4s; -ms-transition: opacity .4s;
transition: opacity .4s; }
.lab-training { margin-top: 10px; padding: 10px 10px 10px 10px; width:auto; height:auto; background-color: #FCFCFC; font-size: 1.2em; font-family: 'Lato-Semibold'; line-height: 2em; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
.lab-training-img { width:100%; height:auto; }
.lab-training-img-div { margin-top: 10px; width:auto; height:auto; background-color: #FCFCFC; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }
.jumbo-modeling { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }
.modeling-text-div1 { position: absolute; width:600px;
top:50%; left: 50%; margin-left: -300px; margin-top: -100px;
}
.modeling-text1 { display: block; margin-right: auto; margin-left: auto; width:100%; }
.modeling-text-div2 { position: absolute; width:500px;
top:70%; left: 50%; margin-left: -250px; margin-top: -50px; transition:all 0.3s ease;
}
.modeling-text2 {
display: block;
margin-right: auto;
margin-left: auto;
width:100%;
}
.modeling-text-div2:hover { width:480px; margin-left: -240px; }
.jumbo-notebook { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }
.notebook-text-div1 { position: absolute; width:600px;
top:50%; left: 50%; margin-left: -300px; margin-top: -100px;
}
.notebook-text1 { display: block; margin-right: auto; margin-left: auto; width:100%; }
.notebook-text-div2 { position: absolute; width:500px; height:100px;
top:70%; left: 50%; margin-left: -250px; margin-top: -50px; transition:all 0.3s ease;
}
.notebook-text2 {
display: block;
margin-right: auto;
margin-left: auto;
width:100%;
}
.notebook-text-div2:hover { width:480px; margin-left: :-240px; }
.survey-div {
height:300px; margin:10px 10px 10px 10px;
}
.grid { padding: 20px 20px 100px 20px; max-width: 1300px; 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; }
.grid figcaption { position: absolute; top: 0; left: 0; padding: 20px; background: #2c3f52; color: #ed4e6e; }
.grid figcaption h3 { margin: 0; padding: 0; color: #fff; }
.grid figcaption a { text-align: center; padding: 5px 10px; border-radius: 2px; display: inline-block; background: #ed4e6e; color: #fff; }
.grid span {
font-size:16px;
}
.cs-style-4 li { perspective: 1700px; perspective-origin: 0 50%; }
.cs-style-4 figure { transform-style: preserve-3d; }
.cs-style-4 figure > div { overflow: hidden; }
.cs-style-4 figure img { transition: transform 0.4s; }
.no-touch .cs-style-4 figure:hover img, .cs-style-4 figure.cs-hover img { transform: translateX(25%); }
.cs-style-4 figcaption { height: 100%; width: 100%; opacity: 0; backface-visibility: hidden; transform-origin: 0 0; transform: rotateY(-90deg); transition: transform 0.4s, opacity 0.1s 0.3s; }
.no-touch .cs-style-4 figure:hover figcaption, .cs-style-4 figure.cs-hover figcaption { opacity: 1; transform: rotateY(0deg); transition: transform 0.4s, opacity 0.1s; }
.cs-style-4 figcaption a { position: absolute; bottom: 20px; right: 20px; }