html, body {height: 100%;width:100%;overflow:hidden;}
body {
background: linear-gradient(to bottom, #8dd2d9 , #194862);
margin: 0;
height: 100%;
}
#wrapper {display:table;width:100%;height:100%;max-width:100%;max-height:100%;}
#cell {display:table-cell; vertical-align:middle;width:100%;height:100%;max-width:100%;max-height:100%;}

h1.title {
text-align: center;
font-size: 40px;
line-height: 1;
padding: 150px 0 0 0;
}

p.description {
text-align: center;
font-size: 30px;
line-height: 1;
}

.thumb {
display: block;
}
.thumb.social {
display: block;
}
.tej.thumb {
position:relative;
width: 500px;
max-height: 500px;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
}

.thumb.social {
position:absolute;
max-width: 200px;
max-height: 200px;
width: 25%;
margin: 0;
}

.thumb.social.facebook {
top: 25px;
left: 25px;
}

.thumb.social.github {
top: 25px;
right: 25px;
}

.thumb.social.twitter {
bottom: 25px;
left: 25px;
}

.thumb.social.instagram {
bottom: 25px;
right: 25px;
}

.thumb-wrapper {
display: block;
max-width: 500px;
max-height: 500px;
width: 75%;
height: 100%;
margin: 0 auto;
}

.thumb .img-wrap {
position: relative;	
}

.thumb img {
width:100%;
height:auto;
display:block;			

}

.thumb .thumb-detail {
display:block;
/* width: 100%; */
/* height: 100%; */
position: absolute;
font-family:arial;
font-weight:bold;
font-size:16px;	
max-width: 500px;
max-height: 500px;
width: 100%;
height: 100%;
line-height: 157px;
border-radius: 250px;		
}

.thumb .thumb-detail a {
display:block;
width:100%;
height:100%;
text-transform:uppercase;
font-weight:bold;	
color:#333;
text-decoration:none;		
font-family: 'Open Sans', sans-serif;
letter-spacing:-1px;
padding:10px;	
font-size:18px;
}		

/*
* Without CSS3
*/
.thumb.scroll {
overflow: hidden;
}	

.thumb.scroll .thumb-detail {
bottom:-280px;
}


/*
* CSS3 Flip
*/	
.thumb.flip {
-webkit-perspective:800px;		
-moz-perspective:800px;
-ms-perspective:800px;		   		
-o-perspective:800px;
perspective:800px;
}

.thumb.flip .thumb-wrapper {
-webkit-transition: transform 1s;
-moz-transition: transform 1s;
-ms-transition: transform 1s;
-o-transition: transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;			
-ms-transform-style: preserve-3d;			
-o-transform-style: preserve-3d;			
transform-style: preserve-3d;			
}

.thumb.flip .thumb-detail {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);			   			
}

.thumb.flip img,
.thumb.flip .thumb-detail {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
-o-backface-visibility: visible;
backface-visibility: visible;
}

.thumb.flip .flipIt {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);			
-ms-transform: rotateY(-180deg);			
-o-transform: rotateY(-180deg);			
transform: rotateY(-180deg);			
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) {
	.thumb-wrapper {
	max-width: 200px;
	max-height: 200px;
	}
	.thumb.social {
	width: 20%;
	}
}