/**** Social Aggregator setup  ****/


#wrapper, #sa_visual_container{
	margin: 0 auto;
}  

.sa_full_container{ /* this is left in as a legacy, should be ID, and will be updated on all pages removed before next QA round */
	height:	790px;
	margin: 0 auto;
	padding: 0 20px;
	min-width: 984px; /* 1024 minus padding to not break the mobile and small screen! */
	max-width: 1600px;
	background-color: #FFF;
}

#sa_full_container{
	height:	790px;
	margin: 0 auto;
	padding: 0 20px;
	min-width: 984px; /* 1024 minus padding to not break the mobile and small screen! */
	max-width: 1600px;
	background-color: #FFF;
}

#sa_container{

	overflow: hidden;
	font-family:  Arial, sans-serif;
	font-size: 16px;
	line-height: 1.1em;
	background: #fff;
	color: #000;
}

#sa_container a, #sa_container a code {
	color: #000;
	text-decoration: none;
}

#sa_container a:hover,
#sa_container a:hover code { 
	color: #000; 
}

#sa_container a:active,
#sa_container a:active code {
	color: #1FB;
	background: black;
}

#sa_visual_container{
	position: relative;
	overflow: hidden;
	background-color: #FFF;
	height: 790px;
}

#sa_visual_container .leftshadow{
	position: absolute;
	z-index: 5;
	background: url(/content/img/images/global/aggregatormodule/sa-left-shadow.png) no-repeat 0px 0px;
	height: 740px;
	left:0;
	top:-23px;
	width: 20px;
	background-size: 20px 740px;
}
#sa_visual_container .rightshadow{
	position: absolute;
	z-index: 5;
	background: url(/content/img/images/global/aggregatormodule/sa-right-shadow.png) no-repeat 0px 0px;
	height: 740px;
	right:0;
	top:-23px;
	width: 20px;
	background-size: 20px 740px;
}
#sa_visual_container .leftnav, #sa_visual_container .rightnav{
	cursor: pointer;
}
 
#sa_visual_container h2{
	font-family: Lato, Arial;
	font-weight: normal;
	text-transform: uppercase;
	color: #000;
}

#sa_header{
	min-width: 984px;
	display: block;
	font-size: 16px;
	font-family: 'Lato', sans-serif;
	color: #898989;
	margin: 0 auto;

}
	#sa_header form {
		display: inline-block;
		position: relative;
		top: 10px;
		margin-left: 15px;
	}
	
	#sa_header h2{
		margin-left: 70px;
		letter-spacing: 1px;
		font-size: 30px;
		font-weight: 300;
	}
	
	#sa_header form label{
		font-weight: 900;
		color: #000;
		top:0px;
	}
	
	#sa_header ul{
		float: right;
		height: 35px;
		list-style: none;
		position: relative;
		top: -3px;
		margin-right: 0px;
		z-index: 10;
	}
	
	#sa_header ul li{
		float: left;
		font-size: 17px;
		margin-right: 20px;
		height: 35px;
		line-height: 35px;
		padding-top: 10px;
	}
		#sa_header ul li:last-child {
			/*margin-right: 0px;*/
		}

	
	#sa_header ul li.tw_id{
	
		width: 145px;
		padding-top: 5px;
		background: url(/content/img/images/global/aggregatormodule/social-divider.png) no-repeat right 8px;
	}

	#sa_header input[type="radio"] {
		float: none;
		height: auto;
		margin: 0 3px 0 8px;
		width: auto;
	}


#wrapper{
	border: none;
	height: auto;
	margin: 50px auto;
}

#wrapper h1, #wrapper form{margin-left: 10px;}

	#sa_wrapper{
		height: 625px;
		width: 1860px;
		overflow: hidden;
		margin-left: -9px;
	}

#wrapper h2{font-weight: normal;
font-family: Lato}

	#sa_container{
		min-width: 1240px;
		height:630px;
		margin: 10px 0 0 0;
		padding-right: 312px;
		/* border: 1px solid green; */
	} 

	#sa_container div{
		float: left;
	}
	/**** boxes ****/	
	#sa_container .box{
		display: block;
		height:298px;
		width: 298px;
		padding: 0;
		float: left;
		margin-left: 10px;
		margin-bottom: 10px;
		border: 1px solid #000;
		overflow: hidden;
		position: relative;

		background-size: 100% 100%;
	}
	
	#sa_container .wide{
		width: 610px;

	}

	#sa_container p{
		padding: 0 10px 10px 10px;
	}
	#sa_container .tall{
		height: 610px;
	}	

	#sa_container .big{
		height: 610px;
		width: 610px;
	}

	
	#sa_container .youtube{
		background: black;
	}


	#sa_container .facebook.text{
		background-image: none;
		background-color: #fff;
	}

	#sa_container img{
		width: 300px;
		overflow: hidden;
		background-size: 100% 170px;
	}
	
	#sa_container .tall img{
		width: 300px;
	}

	#sa_container .wide img{
		overflow: hidden;
	}


	#sa_container .big img{
		width: 610px;
		overflow: hidden;
		
	}
	
	#sa_container .small.ad img{
		width: 300px;
		height: 250px;
		overflow: hidden;
		
	}
	
	#sa_container .small.ad .social_footer{
		background: url(/content/img/images/global/aggregatormodule/ad-footer.jpg) center 0  no-repeat;
		color: #ffdb14;
		height:50px;
	}
	
	#sa_container .instagram img, #sa_container .youtube img, #sa_container .promo img{
		width: 100%;
	}

	#sa_container .promo .social_brand, #sa_container .promo .social_footer, #sa_container .promo .social_user, #sa_container .promo .social_content{
					display: none;
				}


	#sa_container .social_brand{
		position: absolute;
		
		left: 15px;
		top: 0px;
		width: 30px;
		height: 35px;

	}

	#sa_container .small.facebook, #sa_container .small.pinterest  {
		background-size: 100% 170px;
	}

	#sa_container .twitter {
		background: #fff;
	}
		#twitter-widget-0 {
			margin-right: 10px;
		}




	/* Social Brands */
	#sa_container .facebook .social_brand{
		background: url(/content/img/images/global/aggregatormodule/brand-facebook.jpg) center 0  no-repeat;
	}

	#sa_container .twitter .social_brand{
		background: url(/content/img/images/global/aggregatormodule/brand-twitter.jpg) center 0  no-repeat;
	}

	#sa_container .pinterest .social_brand{
		background: url(/content/img/images/global/aggregatormodule/brand-pinterest.jpg) center 0  no-repeat;
	}

	#sa_container .youtube .social_brand{
		background: url(/content/img/images/global/aggregatormodule/brand-youtube.jpg) center 0  no-repeat;
	}

	#sa_container .instagram .social_brand{
		background: url(/content/img/images/global/aggregatormodule/brand-instagram.jpg) center 0  no-repeat;
	}

	#sa_container .big .social_brand{
		height: 60px;
		width: 50px;
	}

	#sa_container .big.facebook .social_brand{
		background: url(/content/img/images/global/aggregatormodule/brand-facebook-big.jpg) center 0  no-repeat;

	}

	#sa_container .big.pinterest .social_brand{
		background: url(/content/img/images/global/aggregatormodule/brand-pinterest-big.jpg) center 0  no-repeat;
	}

	#sa_container .big.youtube .social_brand{
		background: url(/content/img/images/global/aggregatormodule/brand-youtube-big.jpg) center 0  no-repeat;
	}

	#sa_container .big.instagram .social_brand{
		background: url(/content/img/images/global/aggregatormodule/brand-instagram-big.jpg) center 0  no-repeat;
	}



	#sa_container .social_content{
		padding: 3px;
		padding: 3px;
		background-color: #fff;
		position: absolute;
		bottom: 80px;
		font-size: 15px;
		height: 60px;
		width: 100%;
	}

	#sa_container .sa_text .social_content{
		/*position: relative;*/
		clear: both;
		margin-top: 80px;
		font-size: 20px;
		line-height: 22px;
		padding: 10px;
		width: 280px;
	}

	#sa_container .big .social_content {
		width: 600px;

	}

	#sa_container .box .small{
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	#sa_container .wide.facebook{
		background-size:320px 265px;
		background-repeat: no-repeat;
	}
	
	#sa_container .wide .social_content{
		right: 0;
		top: 0;
		width: 280px;
		height: 215px;
		margin-top: 0;
		float: right;
	}

	#sa_container .wide.twitter .social_content{
		width: 100%;
	}

	.wide.facebook .social_content p{
		padding: 10px;
	}

	#sa_container .wide.facebook .social_user{
		right: 0;
		width: 246px;

	}

	#sa_container .box.promo{
		font-size: 30px;
		line-height: 30px;
		text-align: center;
		color: #fff;
		
	} 

	#sa_container .social_user{
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 44px;
		margin-bottom: 35px;
		background: url(/content/img/images/global/aggregatormodule/wof-user-logo.png) no-repeat #fff 10px center;
		padding-left: 45px;
		border-top: 1px solid #ababab;
		line-height: 60px;
		font-size: 12pt;
		font-weight: 700;
	}

	#sa_container .social_user .pinterest {
		color: gray;
	}
	.social_user h4 {
		color: gray;
		margin-top: 7px;
	}
	#sa_container .social_user a {
		color: #000;
	}

	#sa_container .social_footer{
		height: 35px;
		position: absolute;
		bottom: 0;
		width: 100%;

	}

	#sa_container .promo .social_footer{	
	background-color: #000;	
	}

	#sa_container .promo .social_footer .ad{
		background: url(/content/img/images/global/aggregatormodule/wof-ad-icon.png) no-repeat center center;
		width: 22px;
		height: 100%;
		float: right;
		margin-right: 5px;
	}

	#sa_container .facebook .social_footer{
		background-color: #36579c;
	}

	#sa_container .pinterest .social_footer{
		background-color: gray;
	}

	#sa_container .social_footer .share{
		background: url(/content/img/images/global/aggregatormodule/social-fb-tw-share.png) no-repeat 100% 100%;
		display: inline-block;
		margin: 9px 5px;
		width: 40px;
		height: 20px;
		float: right;
	}
	
	#sa_container .social_footer ul{
		list-style: none;
		margin-top: 7px;
		float: right;
	}
	
	#sa_container .social_footer ul li{
		float: left;
		margin-right: 5px;
	}

	#sa_container .social_footer a{
		display: block;
		width: 20px;
		height:20px;
	}

	#sa_container .social_footer a.fb_share{
		background: url(/content/img/images/global/aggregatormodule/social-fb-share.png) no-repeat 0 0;
	}
	#sa_container .social_footer a.tw_share{
		background: url(/content/img/images/global/aggregatormodule/social-tw-share.png) no-repeat 0 0;

	}

	#sa_container .youtube .social_footer {
		color: #FFF;
		line-height: 20px;
		font-size: 18px;
		font-weight: 700;
		/*background: url(/content/img/images/global/aggregatormodule/playbutton-small.png) no-repeat 260px center #333;*/
		background-color:#333;
		height: 70px;
	}
#sa_container .youtube .social_footer img {
	position: absolute;
	top: 20px;
	right: 8px;
	width: auto;
	cursor:pointer;
}

	#sa_container .youtube .social_footer .small {
		position: relative;
		bottom: -7px;
	}

	#sa_container .youtube .social_footer a {
		width: 85%;
		color: #FFF;
		padding: 5px;
		display: inline-block;
		font-size: 18px;
	}

	/*#sa_container .wide.youtube .social_footer{
		background: url(/content/img/images/global/aggregatormodule/playbutton-small.png) no-repeat 570px center #333;
	}*/

	#sa_container .big.youtube .social_footer{
		/*background: url(/content/img/images/global/aggregatormodule/playbutton-small.png) no-repeat 570px center #333;*/

		height:65px;
	}
	#sa_container .big.youtube .social_footer p{
		font-size: 20px;
		font-weight: 700;
		padding: 5px;
		line-height: 60px;
	}

	#sa_container .social_footer p{
		line-height: 20px;
		font-size: 18px;
		max-width: 255px;
		padding: 5px;
		line-height: 25px;
	}

	#sa_container .big.youtube .playback_button{
		margin: -52px -52px 0 0 ;
		height: 100%;
		width: 100%;
		background: url(/content/img/images/global/aggregatormodule/playbutton-big.png) 50% 50% no-repeat;
	}

	#sa_container .small .video-button{
		display: block;
		cursor: pointer;
		width: 33px;
		height: 33px;
		/*background: url(/content/img/images/global/aggregatormodule/playbutton-small.png) no-repeat center center;*/
		right: 5px;
		position: absolute;
		top: 115px;
	}

	/* Twitter */

	#sa_container .twitter{
		border: 1px solid #2aa9f1;
	}
	
	#sa_container .twitter_name{
		background: url(/content/img/images/global/aggregatormodule/wof-user-logo-medium.png) no-repeat 0 center;
		position: absolute;
		height: 44px;
		margin-left: 55px;
		padding-left: 50px;
		top: 0;
		line-height: 65px;
		color: #2a97f1;
	}

	#sa_container .wide .twitter_name{
		position: relative;
		clear: left;
		margin: 45px 0 0 15px;
		font-size: 28px;
		line-height: 30px;
		color: #2a97f1;
	}



	#sa_container .twitter .social_user {

		border: none;
		background-image: none;
		height: 20px;
		margin: 20px 0 0 0;
		padding-left: 15px;
		color: #2a97f1;
	}

	#sa_container .twitter_date{
		position: absolute;
		bottom: 40px;
		color: blue;
		padding:10px;
	}

	#sa_container .twitter .social_content{
		position: relative;
		margin-top: 130px;
		clear: both;
		font-size: 22px;
		line-height: 26px;
		padding-top: 0;
	}

	#sa_container .twitter .social_content a{
		color: #2A97F1;
	}

	#sa_container .wide.twitter .social_content{
		font-size: 28px;
		line-height: 30px;
		margin-top: 0px;
	}

	#sa_container .twitter .social_footer{
		background: #2a97f1;
	}


	#sa_container .twitter .social_footer ul{
		list-style-type: none;
		
	}

	#sa_container .twitter .social_footer ul li{
		list-style: none;
		float: left;

		line-height: 30px;		
	}



	#sa_container .twitter ul li a{
		color: #fff;
		
	}
	#sa_container .twitter .social_footer a.tw_reply{
		background-position: 1px 1px;
		background-size: 16px 16px;
	}

		#sa_container .twitter .social_footer li a{
		width: auto;
	}
	
	 #sa_container a .twsprite{
		width: 16px;
		height: 16px;
		background: url(/content/img/images/global/aggregatormodule/twitter-spritev2.png) no-repeat 0 0;
		margin: 5px 5px 0 0;
	}

	#sa_container a.tw_reply:hover .twsprite{
		background-position: -16px 0px;
	}


	#sa_container a.tw_retweet .twsprite{
		background-position: -80px 0px;
	}

	#sa_container a.tw_retweet:hover .twsprite{
		background-position: -96px 0px;
	}

	#sa_container a.tw_favorite .twsprite{
		background-position: -32px 0px;
	}

	#sa_container a.tw_favorite:hover .twsprite{
		background-position: -48px 0px;
	}

	#sa_container .internal.tall.sa_text .social_content{
		margin-top: 85px;
	}

	#sa_container .internal  h2{
		font-family: Lato, Arial;
		font-weight: 700;
		text-transform: uppercase;
		color: #000;
		font-size: 30px;
		padding: 0 0px 5px;
	}


	#sa_container .internal.tall.sa_text .social_content p{
		padding-top: 15px;
	}
	#sa_container .internal .social_footer, #sa_container .internal .social_brand {
		display: none;
	}

	#sa_container .internal img {
		width: 300px;
		height: 300px;
		float: left;
	}

	#sa_container .internal .social_content{
		padding: 0;
		position: relative;
		bottom:0;
	}

	#sa_container .internal .social_content p {
		padding: 0;
	}


	/* Advert */


		
	
	#sa_container .ad .social_footer{
		background: url(/content/img/images/global/aggregatormodule/ad-footer.jpg) right 0  no-repeat;
		background-color: #000000;
		color: #ffdb14;
	}
	
	#sa_container .ad .social_footer a {
	    font-size: 15px;
	    width: 280px;
	    padding: 10px;
	    color: #ffdb14 !important;
	}
		
	

	/* feed fonts and typography */

	#sa_container a.sa_link, #sa_container .twitter_date a{
		color: #2a97f1;
		text-decoration: none;
	}

	#sa_container .small, #sa_container .tall, #sa_container .big {
		font-size: 15px;	
	}

	#sa_container .facebook.sa_text, #sa_container .wide .social_content,  #sa-container .sa_text .social_content {
		font-size: 20px;
		line-height: 25px;
	}

	#sa_visual_container .leftnav{
		position: absolute;
		bottom: 55px;
		background: url(/content/img/images/global/aggregatormodule/sa-nav-arrows.png) no-repeat 0 0;
		left: 30px;
		width: 22px;
		height: 44px;
		display: block;
	}

	#sa_visual_container .rightnav{
		background: url(/content/img/images/global/aggregatormodule/sa-nav-arrows.png) no-repeat -28px 0px;
		position: absolute;
		bottom: 55px;
		right: 30px;
		width: 22px;
		height: 44px;
		display: block;
	}

	#sa_visual_container .leftnav:hover{
		background-position: 0px -52px;
	}

	#sa_visual_container .rightnav:hover{
		background-position: -28px -52px;
	}

/* Page Specific style */

#hompepage-ag-module{
	background-color: #fff;
}

	/* Start: Recommended Isotope styles */

	/**** Isotope Filtering ****/

	.isotope-item {
		z-index: 2;
	}

	.isotope-hidden.isotope-item {
		pointer-events: none;
		z-index: 1;
	}

	#sa_container .sa_text, #sa_container .sa_photo, #sa_container .sa_video{
		/* These are used for the filtering */
	}

	/**** Isotope CSS3 transitions ****/

	.isotope,
	.isotope .isotope-item {
		-webkit-transition-duration: 0.8s;
		-moz-transition-duration: 0.8s;
		-ms-transition-duration: 0.8s;
		-o-transition-duration: 0.8s;
		transition-duration: 0.8s;
	}

	.isotope {
		-webkit-transition-property: height, width;
		-moz-transition-property: height, width;
		-ms-transition-property: height, width;
		-o-transition-property: height, width;
		transition-property: height, width;
	}

	.isotope .isotope-item {
		-webkit-transition-property: -webkit-transform, opacity;
		-moz-transition-property:    -moz-transform, opacity;
		-ms-transition-property:     -ms-transform, opacity;
		-o-transition-property:      -o-transform, opacity;
		transition-property:         transform, opacity;
	}

	/**** disabling Isotope CSS3 transitions ****/

	.isotope.no-transition,
	.isotope.no-transition .isotope-item,
	.isotope .isotope-item.no-transition {
		-webkit-transition-duration: 0s;
		-moz-transition-duration: 0s;
		-ms-transition-duration: 0s;
		-o-transition-duration: 0s;
		transition-duration: 0s;
	}

	/* End: Recommended Isotope styles */



	/* disable CSS transitions for containers with infinite scrolling*/
	.isotope.infinite-scrolling {
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
	}



.mobile-scroll {
	-moz-transition: all 0.8s;
    -webkit-transition:all 0.8s;
    -o-transition:all 0.8s;
    transition:all 0.8s;

    -webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
