@charset "utf-8";
/* CSS Document */
.social_page{
	height:auto;	
}
#social-cnt{
	width:1000px;
}
.cnt-sm, .cnt-lg{
	width:230px;
	height:230px;
	margin:0 10px;	
	margin-bottom:20px;
	background-color:#000;
	float:left;
	clear:none;
	display:block;
	color:#fff;
	position:relative;
	font-size:13px;
	text-transform:uppercase;
	overflow:hidden;
}

.cnt-lg .phader, .cnt-sm .phader{
	background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.51) 51%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0)), color-stop(51%,rgba(0,0,0,0.51)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.51) 51%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.51) 51%,rgba(0,0,0,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.51) 51%,rgba(0,0,0,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.51) 51%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:130%;
	z-index:5;
	opacity:0;
}

.cnt-sm.twitter, .cnt-lg.twitter{
	background-color:#232323;
}
.cnt-lg{
	width:480px;
	height:480px;
}

.cnt-sm a, .cnt-lg a{
	color:#ccac67;
}
.cnt-sm img, .cnt-lg img{
	/*height:100%;*/
	opacity:0;
}
.cnt-sm img.off.show, .cnt-lg img.off.show{
	/*height:100%;*/
	opacity:1;
}
.cnt-sm img.off.show, .cnt-lg img.off.show{
	transition:opacity .4s;
	-webkit-transition:opacity .4s;
}
.cnt-sm .txt-sm, .cnt-lg .txt-lg{
	padding:15px;
	line-height:19px;
}
.cnt-lg .txt-lg{
	padding-left:60px;
}
.cnt-sm.twitter{
	height:480px;	
}
.cnt-sm.twitter .cta-txt, .cnt-lg.twitter .cta-txt{
	line-height:13px;
	position:absolute;
	bottom:20px;
	left:60px;
	z-index:10;
	font-size:9px;
	
}
.cnt-sm.twitter .txt-tw, .cnt-lg.twitter .txt-tw{
	position:absolute;
	top:50%;
	left:0;
	z-index:10;
	display:inline-block;
	height:auto;
	padding:15px;
	line-height:19px;
}

.cnt-sm .opacity-bg, .cnt-lg .opacity-bg{
	background:url(../images/opacity-bg.png) 0 0 repeat;
	width:100%;
	height:145px;
	position:absolute;
	bottom:-145px;
	left:0;
	z-index:10;
}
.cnt-lg .opacity-bg{
	height:68px;
	bottom:-68px;
}
.icons{
	background:url(../images/social-icons.png) 0 0 no-repeat;
	width:60px;
	height:60px;
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	z-index:11;
}
.facebook .icons{
	background-position: 0 0;
}
.instagram .icons{
	background-position: 0 -60px;
}
.twitter .icons{
	background-position: 0 -120px;
}

.cnt-lg:hover .opacity-bg, .cnt-sm:hover .opacity-bg{
	bottom:0px;
}

.cnt-lg .opacity-bg{
	transition:bottom .2s ease-in-out .1s;
	-webkit-transition:bottom .3s ease-out .1s;
}
.cnt-sm .opacity-bg{
	transition:bottom .3s ease-in-out .1s;
	-webkit-transition:bottom .3s ease-out .1s;
}

.cnt-lg:hover > .phader, .cnt-sm:hover > .phader{
	opacity:1;
}
.cnt-lg > .phader, .cnt-sm > .phader{
	transition:opacity .4s;
	-webkit-transition:opacity .4s;
}


/*.cnt-lg:hover img.off.show, .cnt-sm:hover img.off.show{
	opacity:.3;
}
.cnt-sm img, .cnt-lg img{
	transition:opacity .4s;
	-webkit-transition:opacity .4s;
}*/

