/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin:0;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TEN  */
.sf-10-10 {
	width: 10%;
}

.sf-9-10 {
  	width: 11.11111111111111%;
}

.sf-8-10 {
  	width: 12.5%;
}

.sf-7-10 {
  	width: 14.28571428571429%;
}

.sf-6-10 {
  	width: 16.66666666666667%;
}

.sf-5-10 {
  	width: 20%;
}

.sf-4-10 {
  	width: 25%;
}

.sf-3-10 {
  	width: 33.33333333333333%;
}

.sf-2-10 {
  	width: 50%;
}

.sf-1-10 {
  	width: 100%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	
.sf-xs-10-10 {
	width: 10%;
}

.sf-xs-9-10 {
  	width: 11.11111111111111%;
}

.sf-xs-8-10 {
  	width: 12.5%;
}

.sf-xs-7-10 {
  	width: 14.28571428571429%;
}

.sf-xs-6-10 {
  	width: 16.66666666666667%;
}

.sf-xs-5-10 {
  	width: 20%;
}

.sf-xs-4-10 {
  	width: 25%;
}

.sf-xs-3-10 {
  	width: 33.33333333333333%;
}

.sf-xs-2-10 {
  	width: 50%;
}

.sf-xs-1-10 {
  	width: 100%;
}

}

@media only screen and (min-width: 481px) and (max-width: 768px) {
	
.sf-sm-10-10 {
	width: 10%;
}

.sf-sm-9-10 {
  	width: 11.11111111111111%;
}

.sf-sm-8-10 {
  	width: 12.5%;
}

.sf-sm-7-10 {
  	width: 14.28571428571429%;
}

.sf-sm-6-10 {
  	width: 16.66666666666667%;
}

.sf-sm-5-10 {
  	width: 20%;
}

.sf-sm-4-10 {
  	width: 25%;
}

.sf-sm-3-10 {
  	width: 33.33333333333333%;
}

.sf-sm-2-10 {
  	width: 50%;
}

.sf-sm-1-10 {
  	width: 100%;
}

}



.sf-text-primary, .sf-text-blue {
	color: #5092b3;
}
.sf-text-secondary, .sf-text-pink {
	color: #b68fc1;
}
.sf-header-title {
	padding: 0px;
	font-size: 36px;
	color: #b16889;
	font-weight: 100;
}
.sf-header-subtitle {
	padding: 0px;
	font-size: 27px;
	font-weight: 100;
}
.sf-header-subtitle-small {
	padding: 0px;
	font-size: 21px;
	font-weight: 100;
}
.sf-item-wrapper {
	text-align: center;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

.sf-item {
	width: 100%;
	padding:0;
	margin: 0;
	background-color: #ffffff;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,.1);
	text-align: left;
	transition: all .2s;
	-webkit-transition: all .2s;
	overflow: hidden;
}
.sf-item-blank {
	background: none;
	box-shadow: none;
}
.sf-item-noshadow {
	box-shadow: none;
}
.sf-focus {
	display: inline-block;
	float: left;
	padding: 6.08%;
	width: 40%;
	cursor: pointer;
	box-sizing: border-box;
	position: relative
}

.sf-thumbnail, .sf-header, .sf-content {
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
}
.sf-thumbnail-youtube {
	line-height: 0;
	position: relative
}

.sf-thumbnail {
	background-color: #acc7d4;
}

.sf-header {
	background-color: #acc7d4;
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
	opacity: 1;

  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%); 
  -o-filter: grayscale(0%); 
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
}

.sf-item:hover .sf-header {
	opacity: 0.75;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
} 

.sf-thumbnail-youtube .sf-header {
	height: 100%;
	box-shadow: inset 0 0 0 5px #ffffff;
}

.sf-thumbnail img {
	width: 100%;
	border: 0
}

.sf-avatar {
	position: absolute;
	display: block;
	top: 0;
	right:0;
	bottom:0;
	left: 0;
	transform: translate(0%,0%);
}

.sf-play-icon {
	position: absolute;
	left: 50%;
	top: 95%;
	transform: translate(-50%,-50%);
	color: #fff;
	background-color: rgba(0,0,0,.5);
	width: 64px;
	height: 64px;
	border-radius: 100%;
	border: 3px solid;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}
.sf-youtube-icon {
	top: 50%;
	background-color: rgba(204, 24, 30,.5);
	width: 30px;
	height: 30px;
}
.sf-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 100%;
}

.sf-play-icon i {
	position: absolute;
	left: 52%;
	top: 50%;
	transform: translate(-50%,-50%);
	font-size: 1.3em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
}

.sf-avatar .sf-content, .sf-avatar .sf-status {
	position: absolute;
	transform: translate(0%,0%);
	color: #fff;
	background-color: rgba(152, 78, 111, 0.7);
}

.sf-avatar .sf-play-text {
	bottom: 5px;
}

.sf-play-text span {
	margin-right: 2px;
}

.sf-content {
	padding-bottom: 20px;
	line-height:1.4;
	overflow: hidden;
}

.sf-text {
	margin: 0px;
	font-size: 13px;
}


.sf-title {
margin: 0px;
	font-size: 16px;
	max-height: 43px;
	line-height: 19px;
	overflow: hidden;
}

.sf-title a {
	text-decoration: none
}

.sf-description {
	overflow: hidden;
	color: #686868;
	height: auto;
}

.sf-title-description-wrapper {
	font-size: 13px;
	overflow: hidden;
}

.sf-status {
	position: absolute;
	border-top: 1px solid rgba(0,0,0,.1);
	padding-top: 5px;
	bottom: 0%;
	width: 100%;
}
.sf-view i {
	font-size: 9px;
}

.sf-view, .sf-count, .sf-date {
	display: inline-block;
	float: left;
	font-size: .689em;
	color: #fff;
	padding: 1px 2px;
	border-radius: 2px;
}
.sf-title-description-wrapper .sf-view {
	color: rgba(0, 0, 0, 0.7);;
}

.sf-date {
	float: right;
	margin-right: 0px;
	background-color: #eae5f3;
	color: #423d4a;
	box-shadow: none;
	background-color: transparent
}


.sf-item {
	position: relative
}

.sf-focus {
	width: 100%;
	padding: 8%;
	padding-bottom: 0;
	padding: 0
}


.sf-separator {
	border-top: 1px solid rgba(0,0,0,.1);
	margin: 5px 0;
}

.sf-facebook {
	background-color: #3b5998;
}
.sf-twitter {
	background-color: #00aced;
}
.sf-google {
	background-color: #dd4b39;
}
.sf-youtube {
	background-color: #cc181e;
}
.sf-instagram {
	background-color: #517fa4;
}
.sf-linkedin {
	background-color: #007bb6;
}
.sf-rss {
	background-color: #FF9600;
}

.sf-instagram {
	bottom: 10px;
	position: absolute;
	left: 10px;
	margin: 0;
}

.sf-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sf-invisible {
	visibility: hidden!important;
}
.sf-hidden {
	display: none !important;
}
.sf-responsive {
	display: inline-block;
	max-width: 100%;
	height: auto;
}