/*===================================================================*/
/* COLUMN SIZES & STYLES 
/*===================================================================*/

.trend-one-half 	{ width: 48.75%; }
.trend-one-third 	{ width: 31.66%; }
.trend-two-third 	{ width: 65.83%; }
.trend-one-fourth 	{ width: 23.12%; }
.trend-three-fourth { width: 74.37%; }
.trend-one-fifth 	{ width: 18%; }
.trend-two-fifth 	{ width: 38.5%; }
.trend-three-fifth 	{ width: 59%; }
.trend-four-fifth 	{ width: 79.5%; }
.trend-one-sixth 	{ width: 14.58%; }
.trend-five-sixth 	{ width: 82.91%; }

.trend-one-half,
.trend-one-third,
.trend-two-third,
.trend-three-fourth,
.trend-one-fourth,
.trend-one-fifth,
.trend-two-fifth,
.trend-three-fifth,
.trend-four-fifth,
.trend-one-sixth,
.trend-five-sixth {
	float: left;
	position: relative;
	margin-right: 2.5%;
	margin-bottom: 40px;
}
.trend-column-last {
	clear: right;
	margin-right: 0!important;
}



/*===================================================================*/
/* BUTTON STYLES 
/*===================================================================*/

.trend-button {
	font-size: 15px!important;
	font-weight: bolder;
	padding: 16px 18px!important;

	border: 1px solid;
	border-radius: 4px!important;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
	color: #FFF!important;
	cursor: pointer;
	display: inline-block;
	margin: 0px 5px 5px 0;  
	text-align: center!important;
	text-decoration: none!important;
	-webkit-appearance: none;
}

.trend-button.small {
	font-size: 16px!important;
	font-weight: bold;
	padding: 10px 14px!important;
}
.trend-button.medium {
	font-size: 15px!important;
	font-weight: bolder;
	padding: 16px 18px!important;
}
.trend-button.large {
	font-size: 17px!important;
	font-weight: bolder;
	padding: 20px 30px!important;
}	

.trend-button.round {
	border-radius: 200px!important;
}

.trend-button:active {
	position: relative!important;
	top: 1px!important;
}


/* BUTTON COLORS */
 .trend-button.black { background: #333; border-color: #2C2C2C!important; }
.trend-button.black:hover { background-color: #3C3C3C; border-color: #3C3C3C!important; }	 

.trend-button.grey { background: #888; border-color: #818181!important; }
.trend-button.grey:hover { background: #919191; border-color: #919191!important; }

.trend-button.green { background: #38C994; border-color: #31C28D!important; }
.trend-button.green:hover { background: #40D39D; border-color: #40D39D!important; }

.trend-button.blue { background: #5DB2F0; border-color: #62ABE0!important; }
.trend-button.blue:hover { background: #6ABBF7; border-color: #6ABBF7!important; }

.trend-button.yellow { background: #FCC71F; border-color: #F5C017!important;  }
.trend-button.yellow:hover { background: #FFCF38; border-color: #FFCF38!important;  } 

.trend-button.red { background: #FC5355; border-color: #F74244!important; }
.trend-button.red:hover { background: #FF6466; border-color: #FF6466!important; }

.trend-button.purple { background: #C86CEE; border-color: #C061E7!important; }
.trend-button.purple:hover { background: #D075F7; border-color: #D075F7!important; }

.trend-button.orange { background: #FF7654; border-color: #FF6A45!important; }
.trend-button.orange:hover { background: #FF8262; border-color: #FF8262!important; }

.trend-button.pink { background: #FFADCB; border-color: #FDA5C5!important; }
.trend-button.pink:hover { background: #FFB5D0; border-color: #FFB5D0!important; }



/*===================================================================*/
/* TOGGLES
/*===================================================================*/

.trend-toggle {
	margin-bottom: 10px;
}

.trend-toggle-heading {
	background: #FFF;
	display: block;
	cursor: pointer;
	outline: none;
	position: relative;
}

.trend-toggle-heading p {
	margin: 0px!important;
	padding: 0px;
}

.trend-toggle-title > a {
	color: inherit;
	display: block;
	padding: 10px 15px!important; 
	text-decoration: none!important;
}

.trend-toggle-title > a:active {
	top: 0!important;
}

.trend-toggle-content {
	background-color: #FFF;
	padding: 15px;
}

.trend-toggle-content:before,
.trend-toggle-content:after {
	display: table;
	content: " ";
}

.trend-toggle-content:after {
	clear: both;
}

.collapse {
	display: none;
}

.collapse.open {
	display: block;
}


/*===================================================================*/
/* TABS
/*===================================================================*/

.trend-tab-headings {
	float: left;
	margin: 10px 0 0 0!important;
	width: 100%;
}

.trend-tab-headings > li {
	float: left;
	list-style: none!important;
	margin-bottom: 6px;
}

.trend-tab-headings > li > a {
	border-radius: 3px 3px 0 0;
	margin-right: 5px;
	padding: 10px 15px;
}

.trend-tab-headings > li.active > a,
.trend-tab-headings > li.active > a:hover,
.trend-tab-headings > li.active > a:focus {
	background-color: #FFF;
	cursor: default;
}

.trend-tab-body {
	float: left;
	opacity: 0;
	padding: 15px;
	-webkit-transition: opacity 0.15s linear;
	        transition: opacity 0.15s linear;
}

.trend-tab-body.open {
	opacity: 1;
}

.trend-tab-contents {
	background-color: #FFF;
	float: left;
	margin-bottom: 30px;
	width: 100%;
}

.trend-tab-contents > .trend-tab-body {
	display: none;
}

.trend-tab-contents > .open {
	display: block;
}

@media only screen 
and (max-width : 400px) {

	.trend-tab-headings > li {
		margin-bottom: 0px;
	}
	
	.trend-tab-headings > li > a {
		margin-right: 1px;
		padding: 7px 7px;
	}
	
	.trend-tab-body {
		padding: 7px;
	}
}


	
/*===================================================================*/
/* HIGHLIGHT
/*===================================================================*/

span.highlight {
	background-color: #FFF49B;
	color: #A5651A;
	padding: 0 5px;
} 
 

/*===================================================================*/
/* ALERTS
/*===================================================================*/

.trend-alert {
	background-color: #888;
	border-radius: 2px;
	color: #FFF;
	margin: 0 0 30px 0;
	padding: 20px 20px;
	position: relative;
	line-height: 25px;  
}

.trend-alert.note 	{ background: #FFFAE9; color: #956433; }	
.trend-alert.info 	{ background: #FFFFFF; color: #262626; }
.trend-alert.success { background: #B4EBD7; color: #1D6C50; }	
.trend-alert.error   { background: #FEC5C6; color: #AC0106; }	



 			  
/*===================================================================*/
/* MOBILE CSS
/*===================================================================*/

@media only screen 
and (max-width: 767px) {
	.trend-one-half,
	.trend-one-third,
	.trend-two-third,
	.trend-three-fourth,
	.trend-one-fourth,
	.trend-one-fifth,
	.trend-two-fifth,
	.trend-three-fifth,
	.trend-four-fifth,
	.trend-one-sixth,
	.trend-five-sixth {
		margin-right: 0;
		width: 100%;
	}	
}