/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }

/* COMMON CLASSES */
.break { clear:both; }
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }

/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }

/* CONTENT */
#content {margin-top:50px;}
#content img {border: 5px solid #777; box-shadow: 3px 3px 5px #777}

/* PROFILES */
.profiles, .info { list-style:none; cursor:pointer; }
.profiles > li { width:150px; height:200px; float:left; margin-right:50px; }
.info, .pic { position:absolute; }
.info { font-family: 'Lato', sans-serif; color:#fff; font-size:12px; padding:5px; background-color:rgba(137, 186, 17, 0.8); width:140px; height:190px; opacity:0; text-align:right; }
.info a { font-weight:bold; font-size:25px; color:#fff; text-decoration:none; }
.info a:hover { text-decoration:underline; }
.pic { width:150px; height:200px; }

/* PUSH */
#push .info { transition: all 0.3s; transition-delay:0.2s; }
#push .pic { transition: all 0.5s; }
#push li:hover .info { opacity:1; }
#push li:hover .pic { opacity:0.7; transform: scale(0.7) rotate(10deg); }

/* SLIDE */
#slide .info { transition: all 0.3s; transform: translate(-50px,0); }
#slide .pic { transition: all 0.3s; }
#slide li:hover .info { opacity:1; transform: translate(0,0); }
#slide li:hover .pic { opacity:0; transform: translate(50px,0); }

/* FLIP */
#flip { perspective: 800px; }
#flip .info { transition: all 0.8s; opacity:1; transform-style: preserve-3d; }
#flip .info li { transform: rotateY(180deg); } /* Flip the text: Will be flipped back when animated */
#flip .pic { transition: all 0.8s; backface-visibility: hidden; z-index:999; transform-style: preserve-3d; }
#flip li:hover .info { transform: rotateY(180deg); }
#flip li:hover .pic { transform: rotateY(180deg); }

/* EXPLODE */
#explode .info { transition: all 0.7s; transform: scale(0.8); }
#explode .pic { transition: all 0.7s; }
#explode li:hover .info { opacity:1; transform: scale(1); }
#explode li:hover .pic { opacity:0; transform: scale(1.4); }