.theme-text-inner {

	.theme-text-title,
	.theme-text-text,
	.theme-text-button {
	  position: relative;
	}

	&.title0 {
		.theme-text-title {
			display: none;
		}
	}

	&.rounded1 {
		@include mb2_border_radius(5px);

		/* This will fix problem in safari web browser */
	    -webkit-backface-visibility: hidden;
	    -moz-backface-visibility: hidden;
	    -webkit-transform: translate3d(0, 0, 0);
	    -moz-transform: translate3d(0, 0, 0);
	    z-index: 1;
	}

	&.button0 {
		.theme-text-button {
			display: none;
		}
	}


	&.gradient1 {
		position: relative;
  	  	overflow: hidden;

		&:before {
			content: '';
		  	display: block;
		  	position: absolute;
		  	top: 0;
		  	left: 0;
		  	width: 100%;
		  	height: 100%;
			@include gradient-x( rgba(0,0,0,.07), rgba(0,0,0,0) );
		}

		&.dark {
			&:before {
				@include gradient-x( rgba(255,255,255,.3), rgba(255,255,255,0) );
			}
		}
	}


}


.text-sm {
	font-size: $fssmall;
}

.text-lg {
	font-size: $fsbig;
}

.text-xlg {
	font-size: $fxsbig;
}


.text-lighten {
	color: $textcolor_lighten;
}

.align-center {
	text-align: center;
}

.align-left {
	text-align: left;
}

.align-right {
	text-align: right;
}


@media only screen and (max-width: $wmediumdevice){

	.mb2-pb-column.text-right {
		text-align: inherit !important;
	}
}


.theme-color {

	&.color-default {
		color: $accent1;
	}

	&.color-success {
		color: $color_success;
	}

	&.color-warning {
		color: $color_warning;
	}

	&.color-danger {
		color: $color_danger;
	}

	&.color-info {
		color: $color_info;
	}

	&.color-inverse {
		color: $accent2;
	}
}


@media only screen and (max-width: $wmediumdevice){

	.theme-text-text {

		&.textsize-6 {
			font-size: 5.2rem !important;
		}

		&.textsize-5 {
			font-size: 4.2rem !important;
		}

		&.textsize-4 {
			font-size: 3.5rem !important;
		}

		&.textsize-3 {
			font-size: 3rem !important;
		}

	}

}


@media only screen and (max-width: $wsmalldevice){

	.theme-text-text {

		&.textsize-6 {
			font-size: 4.5rem !important;
		}

		&.textsize-5 {
			font-size: 3.5rem !important;
		}

		&.textsize-4 {
			font-size: 3rem !important;
		}

		&.textsize-3,
		&.textsize-2 {
			font-size: 2rem !important;
		}

	}

}



/* Toggle content */

.toggle-content {

	.content {
		height: 84px;
		overflow: hidden;
		position: relative;

		&:before {
			content: '';
			display: block;
			position: absolute;
			width: 100%;
			height: 42px;
			bottom: 0;
			left: 0;
			z-index: 1;
			@include gradient-y( rgba(255,255,255,0), #fff );
		}
	}

	.toggle-content-button {
		cursor: pointer;
		display: inline-block;
		font-weight: $fwmedium;
		color: $textcolor_lighten;
		font-size: $fssmall;

		&:after {
			content: '\0002b';
			margin-left: .3rem;
			display: inline-block;
			width: 14px;
			height: 14px;
			line-height: 14px;
			text-align: center;
			background-color: rgba(0,0,0,.65);
			color: #fff;
			@include mb2_border_radius(999px);
		}
	}


	&.open {

		.content {
			height: auto !important;

			&:before {
				display: none;
			}
		}

		.toggle-content-button {
			&:after {
				content: '\0002d';
			}
		}
	}

}


/* Table of content style */

.theme-toc {
  	display: inline-block;
  	background-color: lighten($color_gray2, 3%);
  	border: solid 1px $color_box_border;
  	padding: 1rem;
	padding-bottom: 0;
  	@include mb2_border_radius(.15rem);
	width: 300px;
	max-width: 100%;
}