/*

	1 - SHORTCODES

		1.1 - Columns
		1.2 - Lists
		1.3 - Button
		1.4 - Alerts & Messages
		1.5 - Highlight
		1.6 - Dropcap
		1.7 - Pull Quotes
		1.8 - Toggle
		1.9 - Accordion
		1.10 - Tabs
		1.11 - Tooltip
		1.12 - Google maps
		1.13 - Pricing Table
		1.14 - Sidebar
		1.15 - Notice
		1.16 - Skill
		1.17 - Icon Box
		1.18 - Separator OR
		1.19 - ST Gallery

*/

/*===============================================

	S H O R T C O D E S
	Shortcode styles

===============================================*/

	/*-------------------------------------------
		1.1 - Columns
	-------------------------------------------*/

	.column {
		position: relative;
		float: left;
		line-height: inherit;
	}

		.column > div {
			margin-right: 25px;
		}


	.column-1-2 { width: 50%; }
	
	.column-1-3 { width: 33.333333%; }
	.column-2-3 { width: 66.666666%; }
	
	.column-1-4 { width: 25%; }
	.column-2-4 { width: 50%; }
	.column-3-4 { width: 75%; }
	
	.column-1-5 { width: 20%; }
	.column-2-5 { width: 40%; }
	.column-3-5 { width: 60%; }
	.column-4-5 { width: 80%; }
	
	.column-1-6 { width: 16.666666%; }
	.column-2-6 { width: 33.333333%; }
	.column-3-6 { width: 50%; }
	.column-4-6 { width: 66.666666%; }
	.column-5-6 { width: 83.333333%; }
	
	.column-1-7 { width: 14.285714%; }
	.column-2-7 { width: 28.571428%; }
	.column-3-7 { width: 42.857142%; }
	.column-4-7 { width: 57.142857%; }
	.column-5-7 { width: 71.428571%; }
	.column-6-7 { width: 85.714285%; }
	
	.column-1-8 { width: 12.5%; }
	.column-2-8 { width: 25%; }
	.column-3-8 { width: 37.5%; }
	.column-4-8 { width: 50%; }
	.column-5-8 { width: 62.5%; }
	.column-6-8 { width: 75%; }
	.column-7-8 { width: 87.5%; }


	/*-------------------------------------------
		1.2 - Lists
	-------------------------------------------*/

	.list {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

		.list > li {
			padding: 0.5em 0 0.5em 26px;
			border-bottom: 1px solid rgba(0,0,0,0.1);
		}

			ul.list > li:before { /* ul needed */
				float: left;
				font-size: 16px;
				margin: 0.25em 10px 0 -26px;
			}


	/*-------------------------------------------
		1.3 - Button
	-------------------------------------------*/

	.button-st {
		position: relative;
		display: inline-block !important;
		line-height: 1em !important;
		color: #FFF;
		text-decoration: none !important;
		text-transform: uppercase;
		white-space: nowrap;
		letter-spacing: 0.1em;
		margin-bottom: 5px;
		padding: 0.8em 1.2em;
		background-color: #ff9160;
	}
	
		.button-st:hover {
			color: #FFF !important;
			cursor: pointer;
		}

			.button-custom-color:hover {
			}

			.button-with-icon {
				font-weight: bold;
				box-shadow: 40px 0 0 rgba(0,0,0,0.25) inset;
				overflow: hidden;
			}

				.button-with-icon:before {
					position: relative;
					color: #FFF;
					z-index: 1;
				}

				.button-with-icon:after {
					position: absolute;
					content: '';
					top: 50%;
					left: 40px;
					margin-top: -50px;
					border-style: solid;
					border-width: 50px 0 50px 10px;
					border-color: transparent transparent transparent rgba(0,0,0,0.25);
				}

					.ie8 .button-with-icon:after {
						display: none;
					}

			.button-with-icon-16 {
				font-size: 16px;
				padding: 1em 1.5em 1em 1em;
			}

				.button-with-icon-16:before {
					font-size: 16px;
					margin: -0.05em 30px 0 0;
				}

			.button-with-icon-32 {
				font-size: 32px;
				padding: 1em 1.5em 1em 1.2em;
			}

				.button-with-icon-32:before {
					font-size: 32px;
					margin: -0.05em 10px 0 0;
				}

	/*-------------------------------------------
		1.4 - Alerts & Messages
	-------------------------------------------*/

	.alert {
		position: relative;
		margin: 0 0 1em;
	}

		.alert-before {
			position: absolute;
			display: block;
			top: 0.5em;
			width: 35px;
			height:	100%;
			box-shadow: -35px 0 rgba(0,0,0,0.25) inset;
			z-index: 1;
			overflow: hidden;
		}
	
			.alert-before:before,
			.alert-before:after {
				position: absolute;
				content: '';
			}
	
			.alert-before:before {
				top: 50%;
				left: 0;
				margin-top: -50px;
				border-style: solid;
				border-width: 50px 0 50px 10px;
				border-color: transparent transparent transparent #FFF;
			}

			.alert-before:after {
				top: calc( 100% - 0.5em );
				right: 0;
				border-style: solid;
				border-width: 0 10px 0.5em 0;
				border-color: transparent rgba(0,0,0,0.33) transparent transparent;
			}

		.alert-after {
			position: absolute;
			display: block;
			top: 0.5em;
			right: 0;
			width: 35px;
			height:	100%;
			box-shadow: -35px 0 rgba(0,0,0,0.25) inset;
			z-index: 1;
			overflow: hidden;
		}
	
			.alert-after:before,
			.alert-after:after {
				position: absolute;
				content: '';
			}
	
			.alert-after:before {
				top: 50%;
				right: 0;
				margin-top: -50px;
				border-style: solid;
				border-width: 50px 10px 50px 0;
				border-color: transparent #FFF transparent transparent;
			}

			.alert-after:after {
				top: calc( 100% - 0.5em );
				left: 0;
				border-style: solid;
				border-width: 0.5em 10px 0 0;
				border-color: rgba(0,0,0,0.33) transparent transparent transparent;
			}

		.alert-wrapper {
			position: relative;
			display: block;
			color: #FFF;
			text-align: center;
			line-height: 1.352em;
			margin: 0 25px;
			padding: 1em 4em;
			z-index: 2;
		}
	
			/*-- Alerts --*/
			.alert-notice .alert-wrapper {
				background: #583f48;
				box-shadow: 0 200px rgba(255,255,255,0.4) inset;
			}

				.alert-notice .alert-before,
				.alert-notice .alert-after {
					background: #583f48;
					box-shadow: 0 200px rgba(255,255,255,0.2) inset;
				}

			.alert-warning .alert-wrapper,
			.alert-warning .alert-before,
			.alert-warning .alert-after {
				background: #dbb369;
			}
	
			.alert-success .alert-wrapper,
			.alert-success .alert-before,
			.alert-success .alert-after {
				background: #86b372;
			}
	
			.alert-error .alert-wrapper,
			.alert-error .alert-before,
			.alert-error .alert-after {
				background: #d46868;
			}
	
			.alert-info .alert-wrapper,
			.alert-info .alert-before,
			.alert-info .alert-after {
				background: #70b4d6;
			}
	
			.alert-close {
				position: absolute;
				display: none;
				top: 1.1em;
				right: 1em;
				width: 22px;
				height: 22px;
			}

				.alert-close:hover {
					cursor: pointer;
					opacity: 1;
				}
	
				.alert-close:before {
					content: '\e650';
					font-size: 16px;
					color: #FFF;
					color: rgba(255,255,255,0.5);
				}
	
					.alert-close:hover:before {
						color: rgba(255,255,255,1);
					}
	

	/*-------------------------------------------
		1.5 - Highlight
	-------------------------------------------*/

	.highlight {
		color: #474733;
		padding: 0.15em;
		background: #efedac;
	}


	/*-------------------------------------------
		1.6 - Dropcap
	-------------------------------------------*/

	.dropcap {
		position: relative;
		display: table;
		float: left;
		color: #ff9160;
		font-size: 6.66em;
		line-height: 0.66em;
		font-weight: 300;
		margin: 0 10px 0 0;
	}


	/*-------------------------------------------
		1.7 - Pull Quotes
	-------------------------------------------*/

	.pullquote {
		position: relative;
		width: 33%;
		color: #FFF;
		line-height: 1.5em;
		margin: 0.5em 0 1em 0;
		padding: 25px;
		background: #583f48;
		box-shadow: 0 300px rgba(255,255,255,0.3) inset;
	}

		.pullquote-left {
			float: left;
			margin-left: -60px;
			margin-right: 25px;
		}

			.pullquote-left:after {
				position: absolute;
				content: '';
				left: 0;
				bottom: -10px;
				border-style: solid;
				border-width: 0 10px 10px 0;
				border-color: transparent #583f48 transparent transparent;
			}

		.pullquote-right {
			float: right;
			margin-right: -60px;
			margin-left: 25px;
		}

			.sidebar-position-left .pullquote-right {
				margin-right: 0;
			}

			.pullquote-right:after {
				position: absolute;
				content: '';
				right: 0;
				bottom: -10px;
				border-style: solid;
				border-width: 10px 10px 0 0;
				border-color: #583f48 transparent transparent transparent;
			}

	/*-------------------------------------------
		1.8 - Toggle
	-------------------------------------------*/

	.toggle {
		position: relative;
		text-align: left; /* needed */
		margin-bottom: 1em;
	}

		.toggle-title {
			line-height: 1.352em;
			font-weight: bold;
			padding: 15px 75px 15px 25px;
			cursor: pointer;
			background: #EEE;
			background: rgba(0,0,0,0.07);
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			-webkit-transition: all 150ms linear;
			transition: all 150ms linear;
		}

			.toggle-title:hover {
			}

				.toggle-title span {
					position: absolute;
					top: 17px;
					right: 17px;
					line-height: 0;
				}
	
					.toggle-title span:before {
						font-size: 16px;
						font-weight: normal;
					}

		.toggle-holder {
			overflow: hidden;
			height: 0;
		}

			.toggle-box {
				padding: 15px 24px 20px;
				border: 1px solid #EEE;
				border: 1px solid rgba(0,0,0,0.1);
			}


	/*--- Toggle closed -----------------------------*/

	.toggle-closed {
	}

		.toggle-closed .toggle-title {
		}

			.toggle-closed .toggle-title span {
			}

				.toggle-closed .toggle-title span:before {
					content: '\e60d';
				}


	/*--- Toggle opened -----------------------------*/

	.toggle-opened {
	}

		.toggle-opened .toggle-title {
			color: #FFF;
			background: #583f48;
			box-shadow: 0 200px rgba(255,255,255,0.4) inset;
		}

			.toggle-opened .toggle-title span {
			}

				.toggle-opened .toggle-title span:before {
					content: '\e60c';
				}

	/*-------------------------------------------
		1.9 - Accordion
	-------------------------------------------*/

	.accordion {
		margin-bottom: 1em;
	}

		.accordion .toggle {
			margin-bottom: 0;
			border: none;
			border-bottom: 1px solid rgba(0,0,0,0.1);
		}

			.accordion .toggle-title {
			}

				.accordion .toggle-opened .toggle-title {
				}

					.accordion .toggle-opened .toggle-title span {
					}
		
						.accordion .toggle-opened .toggle-title span:before {
						}

				.accordion .toggle-holder {
				}
					.accordion .toggle-box {
					}


	/*-------------------------------------------
		1.10 - Tabs
	-------------------------------------------*/

	.st-tabs-holder {
		display: block;
		margin: 0 0 1em;
	}


		/*--- Labels -----------------------------*/

		.st-ul {
			list-style: none;
			display: table;
			width: 100%;
			max-width: 100%;
			margin: 0 0 -1px;
			padding: 0;
			border-left: 1px solid #DDD;
		}
		
			.st-ul li {
				float: left;
				font-size: 0.85em;
				text-transform: uppercase;
				letter-spacing: 0.1em;
				margin: 0;
				padding: 10px 25px;
				border-top: 1px solid #DDD;
				border-right: 1px solid #DDD;
				cursor: pointer;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

				.st-ul li:hover {
					background-image: url('../images/bg-black-05.png');
				}

				.st-ul li.st-current,
				.st-ul li.st-current:hover {
					color: #ff9160;
					font-weight: bold;
					border-top: 1px solid #ff9160;
					background: #FFF;
				}

				
		/*--- Tabs -----------------------------*/

		.st-tabs {
			clear: both;
			text-align: left; /* needed */
			padding: 25px;
			background: #FFF;
			border: 1px solid #DDD;
		}
		
			.st-tabs > div {
				position: absolute;
				visibility: hidden;
				top: -9999px;
			}

			.st-tabs .block {
				position: relative;
				visibility: visible;
				top: 0;
			}


	/*-------------------------------------------
		1.11 - Tooltip
	-------------------------------------------*/

	#tooltip-holder {
		position: absolute;
		z-index: 1000;
	}
	
		.tooltip-holder {
			font-size: 0.85em;
			line-height: 1.352em;
			color: #FFF;
			max-width: 150px;
			padding: 5px 10px;
			background: #222;
			box-shadow: 0 2px 2px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.04);
		}

			.tooltip-holder:before {
				position: absolute;
				content: "";
				top: -7px;
				left: 7px;
				border-style: solid;
				border-width: 7px 0 0 7px;
				border-color: transparent transparent transparent #222;
			}

	span.tooltip {
		border-bottom: 1px dashed;
		cursor: help;
	}


	/*-------------------------------------------
		1.12 - Google maps
	-------------------------------------------*/

	#googlemaps {
		margin: 0 0 1em;
	}


	/*-------------------------------------------
		1.13 - Pricing Table
	-------------------------------------------*/

	.pricing-table {
		text-align: center;
		margin: 0 0 1em -1px;
		background: #FFF;
		border: 1px solid #DDD;
	}

		.pricing-table-title {
			color: #FFF;
			font-size: 1.2em;
			line-height: 1.2em;
			margin: -1px -1px 0 -1px;
			padding: 15px 5px;
		}

		.pricing-table-price {
			color: #FFF;
			font-size: 2em;
			line-height: 1em;
			margin: 0 -1px;
			padding: 15px 5px;
			background-image: url('../images/bg-black-20.png');
		}

		.pricing-table-comment {
			font-size: 0.5em;
			opacity: 0.65;
		}

		.pricing-table-content {
			padding: 1em;
			color: #56646F;
		}

			.pricing-table-content ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

				.pricing-table-content ul li {
					padding: 4px 0;
				}

		.pricing-table-button {
			padding: 15px 5px;
			background: #F9F9F9;
			border-top: 1px solid #DDD;
		}


	/*--- Gray -----------------------------*/

	.pricing-table-gray .pricing-table-title,
	.pricing-table-gray .pricing-table-price,
	.pricing-table-gray .button {
		background-color: #583f48;
	}

	.pricing-table-gray .pricing-table-title {
		background-image: url('../images/bg-white-40.png');
	}

	.pricing-table-gray .pricing-table-price,
	.pricing-table-gray .button {
		background-image: url('../images/bg-white-20.png');
	}

		.pricing-table-gray .button:hover {
			background-image: none;
		}


	/*--- Dark -----------------------------*/

	.pricing-table-dark .pricing-table-title,
	.pricing-table-dark .pricing-table-price,
	.pricing-table-dark .button {
		background-color: #583f48;
	}

	.pricing-table-dark .pricing-table-title {
		background-image: url('../images/bg-white-20.png');
	}

	.pricing-table-dark .pricing-table-price,
	.pricing-table-dark .button {
		background-image: url('../images/bg-white-10.png');
	}

		.pricing-table-dark .button:hover {
			background-image: none;
		}


	/*--- Featured -----------------------------*/

	.pricing-table-featured {
		position: relative;
		box-shadow: 0 0px 5px rgba(0,0,0,0.07), 0 10px 30px rgba(0,0,0,0.04);
	    z-index: 1;
	}

		.pricing-table-featured .pricing-table-title,
		.pricing-table-featured .pricing-table-price,
		.pricing-table-featured .button {
			background-color: #ff9160;
		}
	
		.pricing-table-featured .pricing-table-title {
			margin-top: -11px;
			padding: 20px 5px;
		}
	
		.pricing-table-featured .pricing-table-button {
			padding: 20px 5px;
		}


	/*-------------------------------------------
		1.14 - Sidebar
	-------------------------------------------*/

	.sidebar-shortcode {
		margin: 0 !important;
	}


	/*-------------------------------------------
		1.15 - Notice
	-------------------------------------------*/

	.notice {
		position: relative;
		text-align: center;
		color: rgba(255,255,255,0.7);
		padding: 40px 50px 40px;
		margin-bottom: 1em;
		background: #583f48;
	}

		.ie8 .notice {
			color: #DDD;
		}

		.notice:before {
			position: absolute;
			display: block;
			content: '';
			top: 10px;
			left: 10px;
			width: calc( 100% - 20px );
			height: calc( 100% - 20px );
			box-shadow: 0 0 0 2px rgba(255,255,255,0.3) inset;
		}

			.sidebar .notice {
				padding: 2em;
			}
	
			.notice h1,
			.notice h2,
			.notice h3,
			.notice h4,
			.notice h5,
			.notice h6 {
				color: #FFF !important;
				padding-top: 0;
			}

				/* Button */
				.notice .button-st:not(.button-with-icon) {
					padding: 0;
					-webkit-transition: all 150ms cubic-bezier(0.5, 0.9, 0.3, 1); /* safari */
					-webkit-transition: all 150ms cubic-bezier(0.5, 0.9, 0.3, 1.3);
					-moz-transition: all 150ms cubic-bezier(0.5, 0.9, 0.3, 1.3);
					-o-transition: all 150ms cubic-bezier(0.5, 0.9, 0.3, 1.3);
					transition: all 150ms cubic-bezier(0.5, 0.9, 0.3, 1.3);
				}

					.notice .button-st:not(.button-with-icon):hover {
						letter-spacing: 0.2em;
					}
	
						.notice .button-st:not(.button-with-icon) span {
							display: block;
							margin: 11px 15px;
						}

							.notice .button-st:not(.button-with-icon):hover span {
								margin: 11px 25px;
							}

								.notice .button-st:not(.button-with-icon):before,
								.notice .button-st:not(.button-with-icon):after,
								.notice .button-st:not(.button-with-icon) span:before,
								.notice .button-st:not(.button-with-icon) span:after {
									position: absolute;
									content: '';
									border-style: solid;
								}
				
									.notice .button-st:not(.button-with-icon):before {
										top: 0;
										left: -5px;
										border-width: 0 5px 25px 0;
										border-color: transparent #ff9160 transparent transparent;
									}
		
									.notice .button-st:not(.button-with-icon):after {
										top: 0;
										right: -5px;
										border-width: 25px 5px 0 0;
										border-color: #ff9160 transparent transparent transparent;
									}
		
									.notice .button-st:not(.button-with-icon) span:before {
										bottom: 0;
										left: -5px;
										border-width: 0 0 25px 5px;
										border-color: transparent transparent #ff9160 transparent;
									}
		
									.notice .button-st:not(.button-with-icon) span:after {
										bottom: 0;
										right: -5px;
										border-width: 25px 0 0 5px;
										border-color: transparent transparent transparent #ff9160;
									}


	/*-------------------------------------------
		1.16 - Skill
	-------------------------------------------*/

	.skill {
		position: relative;
		font-size: 14px;
		text-align: left; /* needed */
		margin-bottom: 1em;
		overflow: hidden;
	}

		.skill-bar {
			position: absolute;
			top: 37px;
			width: 5px;
			height: 100px;
			background: #ff9160;
		}

		.skill-label {
			position: relative;
			font-weight: normal;
			line-height: 1em;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			padding: 1em 0;
			z-index: 1;
			box-shadow: 0 -1px 0 rgba(0,0,0,0.1) inset;
		}

			.textwidget > .skill:first-child {
				margin-top: -1em;
			}

			.skill-label span {
				float: right;
				font-size: 0.85em;
				font-weight: normal;
				opacity: 0.8;
			}


	/*-------------------------------------------
		1.17 - Icon Box
	-------------------------------------------*/

	.st_icon_box {
	}

		.st_icon_box:before {
			position: absolute;
			left: 0;
			color: #ff9160;
		}

	.st_icon_box_16 {
		text-align: left; /* needed */
		padding: 0 15px 0 32px;
	}

		.st_icon_box_16:before {
			top: 0.75em;
			font-size: 16px;
		}

	.st_icon_box_32 {
		text-align: left; /* needed */
		padding: 0 15px 0 50px;
	}

		.st_icon_box_32:before {
			top: 0.3em;
			font-size: 32px;
		}


	/*-------------------------------------------
		1.18 - Separator OR
	-------------------------------------------*/

	.separator-or {
		display: block;
		font-size: 1.15em;
		text-align: center;
		margin: 0 0 50px;
	}

		.separator-or span {
			display: table;
			color: #583f48;
			line-height: 1em;
			letter-spacing: 0.1em;
			white-space: nowrap;
			text-transform: uppercase;
		}

			.separator-or span:before,
			.separator-or span:after {
				content: '';
				display: table-cell;
				width: 50%;
				background: url('../images/line.png') center center repeat-x;
				background-size: 5px;
			}


	/*-------------------------------------------
		1.19 - ST Gallery
	-------------------------------------------*/

	.st-gallery {
		position: relative;
		display: block;
		max-width: 1200px;
		background: #FFF;
	}

		.st-gallery div {
			position: relative;
			overflow: hidden;
			cursor: pointer;
			z-index: 1;
		}

			.st-gallery div img {
				margin: 0;
			}

		.st-gallery-pending {
			position: absolute;
			visibility: hidden;
		}

		.st-gallery-current {
			display: block;
			position: relative;
			visibility: visible;
		}

		.st-gallery-flushed {
			position: absolute;
			top: 0;
			z-index: 2;
		}

		.st-gallery ol {
			position: absolute;
			list-style-type: none;
			line-height: 0;
			margin: -51px 0 0 20px;
			padding: 0;
			z-index: 2
		}

			.st-gallery ol li {
				display: inline-block;
				width: 20px;
				height: 20px;
				margin: 0 5px 10px 5px;
				background: transparent;
				cursor: pointer;
				border: 3px solid rgba(255,255,255,0.5);
			}

				.st-gallery ol li.st-gallery-tab-current {
					background: rgba(255,255,255,0.5);
					border: 3px solid rgba(255,255,255,1);
				}