"

From 2013.igem.org

.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; margin-left: 10px; padding-bottom: 15px; 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-right: 20px; padding-left: 20px; background: #2c3f52; color: #ed4e6e; }

.grid figcaption h3 { margin: 0; padding: 0; color: #fff; }

.grid figcaption h4 { margin-bottom: 10px; margin-left: 0px; margin-top: 10px; padding: 0; color: #fff; }

.grid figcaption span:before { content: 'Major: ';

}

.grid figcaption p:before { content: 'Intro: '; color: #B9D3EE; } .grid figcaption p { /*padding: 0px 5px;*/ /*border-radius: 2px;*/ display: inline-block; /*background: #ed4e6e;*/ color: #fff; line-height: 16px; }

/* Caption Style 4 */ .cs-style-4 li { -webkit-perspective: 1700px; -moz-perspective: 1700px; perspective: 1700px; -webkit-perspective-origin: 0 50%; -moz-perspective-origin: 0 50%; perspective-origin: 0 50%; }

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

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

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

.no-touch .cs-style-4 figure:hover img, .cs-style-4 figure.cs-hover img { -webkit-transform: translateX(25%); -moz-transform: translateX(25%); -ms-transform: translateX(25%); transform: translateX(25%); }

.cs-style-4 figcaption { height: 100%; width: 50%; opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; 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; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; }

.cs-style-4 figcaption a { position: absolute; bottom: 20px; right: 20px; }

.group{

   font-weight: bold;
   font-family: 'Finger Paint', cursive;
   font-size: 20px;
   height: 30px;
   color: #ffffff;
   padding-top: 10px;
   padding-left: 10px;

   background-color: #5bc0de;
   border-radius: .25em;
   margin-bottom: 10px;

}