/*

	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 {
		display: inline-block !important;
		line-height: 1em !important;
		color: #FFF;
		font-weight: bold;
		text-decoration: none !important;
		text-transform: uppercase;
		white-space: nowrap;
		margin-bottom: 5px;
		padding: 0.7em 1em 0.7em 1em;
		background-color: #fb9351;
		box-shadow: 0 0 0 0 rgba(0,0,0,0) inset;
	}
	
		.button-st:hover {
			color: #FFF !important;
			box-shadow: 0 -70px 0 rgba(0,0,0,0.15) inset;
			cursor: pointer;
		}

			.button-custom-color:hover {
			}

			.button-with-icon {
			}

				.button-with-icon:before {
					/*float: left;*/
					color: #FFF;
				}

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

				.button-with-icon-16:before {
					font-size: 16px;
					margin: -0.05em 10px 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;
		text-align: center;
		line-height: 1.352em;
		margin: 0 0 1em;
		padding: 1em 4em;
		box-shadow: 0 0 1px rgba(0,0,0,0.35) inset;
	}

		.alert-notice {
			color: #777;
			background: #FFF;
		}

		.alert-warning {
			color: #AD8643;
			background: #FBEED5;
		}

		.alert-success {
			color: #468847;
			background: #DFF0D8;
		}

		.alert-error {
			color: #B94A48;
			background: #F2DEDE;
		}

		.alert-info {
			color: #3A87AD;
			background: #D9EDF7;
		}

		.alert-close {
			position: absolute;
			display: inline-block;
			top: 1.1em;
			right: 1em;
			width: 22px;
			height: 22px;
		}

			.alert-close:before {
				content: '\e64f';
				font-size: 16px;
			}

			.alert-close:hover {
				cursor: pointer;
				opacity: 1;
			}


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

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


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

	.dropcap {
		position: relative;
		display: table;
		float: left;
		color: #FFF;
		font-size: 4.2em;
		line-height: 0.66em;
		margin: 0 10px 0 0;
		padding: 0.2em;
		background: #FB9351;
	}


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

	.pullquote {
		width: 40%;
		font-size: 1.2em;
		margin: 0.25em 0 15px 0;
		padding: 20px 25px 25px;
		border: 1px solid rgba(0,0,0,0.1);
	}

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

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


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

	.toggle {
		text-align: left; /* needed */
		margin-bottom: 1em;
		border: 1px solid rgba(0,0,0,0.1);
	}

		.toggle-title {
			line-height: 20px;
			padding: 15px 25px;
			cursor: pointer;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

			.toggle-title:hover {
				background: rgba(0,0,0,0.03);
			}

				.toggle-title span {
					position: relative;
					display: inline-block;
					float: left;
					text-align: center;
					width: 20px;
					height: 20px;
					margin-right: 10px;
					border-radius: 50px;
				}
	
					.toggle-title span:before {
						color: #FFF;
						font-size: 12px;
					}

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

			.toggle-box {
				padding: 15px 25px 25px;
				border-top: 1px dashed #DDD;
			}


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

	.toggle-closed {
	}

		.toggle-closed .toggle-title {
		}

			.toggle-closed .toggle-title span {
				background: #CCC;
			}

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


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

	.toggle-opened {
	}

		.toggle-opened .toggle-title {
			background: rgba(0,0,0,0.1);
		}

			.toggle-opened .toggle-title span {
				background: #5B4141;
			}

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

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

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

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

			.accordion .toggle-title {
				padding: 15px 0;
			}

				.accordion .toggle-opened .toggle-title {
					color: #5B4141;
					background: none;
				}

					.accordion .toggle-opened .toggle-title span {
						background: #5B4141;
					}
		
						.accordion .toggle-opened .toggle-title span:before {
							color: #FFF;
						}

				.accordion .toggle-holder {
				}
					.accordion .toggle-box {
						padding: 0 0 25px;
						border: none;
					}


	/*-------------------------------------------
		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;
				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: #fb9351;
					border-top: 1px solid #fb9351;
					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: #5b4141;
	}

	.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: #5b4141;
	}

	.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: #fb9351;
		}
	
		.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 {
		color: rgba(255,255,255,0.6);
		padding: 40px 50px 40px;
		margin-bottom: 1em;
		background: #5b4141;
	}

		.ie8 .notice {
			color: #DDD;
		}

			.sidebar .notice {
				padding: 2em;
			}
	
			.notice h1,
			.notice h2,
			.notice h3,
			.notice h4,
			.notice h5,
			.notice h6 {
				color: #FFF !important;
				padding-top: 0;
			}
	
			/*-- Notice Special -------------------*/
	
			.notice-frontpage {
				font-size: 1.2em;
				text-align: center;
				padding: 50px 150px;
				background-image: url('http://img-fotki.yandex.ru/get/9810/231740777.1/0_105dd6_f09aa4d9_orig');
				background-position:  center center;
				background-repeat: no-repeat;
			}
	
				.notice-frontpage .button-with-icon:before {
					margin-top: 0.05em;
				}

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

	.skill {
		position: relative;
		text-align: left; /* needed */
		margin-bottom: 1em;
		background: #EEE;
		overflow: hidden;
	}

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

		.skill-label {
			position: relative;
			color: #FFF;
			line-height: 1.352em;
			margin-left: 1em;
			padding: 1em 0;
			z-index: 1;
		}

		.skill-label span {
			font-size: 0.85em;
			opacity: 0.65;
		}


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

	.st_icon_box {
	}

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

	.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;
		text-align: center;
		margin: 0 0 50px;
	}

		.separator-or span {
			display: table;
			color: #5B4141;
			line-height: 1em;
			font-weight: bold;
			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;
			}


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

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

		.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);
				border-radius: 50px;
			}

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