/*
 * Toggle Elements Shortcodes Styles
 * Styled used for the toggle elements (displayed on the front end as a toggle container and elements)
 */

/*holds toggle elements*/
.toggle-container{
	float: left;
	width: 100%;
}
/*each toggle item*/
.toggle-container .toggle-element{
	float: left;
	width: 100%;
	background: #eee;
	padding: 15px;
}
/*title (trigger to toggle)*/
.toggle-element .toggle-title{
	cursor: pointer;
}
.toggle-element .toggle-title .icon{
	margin-left: 10px;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear;
}
.toggle-element.active .toggle-title .icon{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}
/*content to display when triggered*/
.toggle-element .toggle-content{
	display: none;
}