/*

	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;
		text-align: left;
		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 */
				/*font-size: 16px;*/
				margin: 0 0.5em 0 -26px;
				opacity: 0.6;
			}


	/*-------------------------------------------
		1.3 - Button
	-------------------------------------------*/

	.button-st {
		position: relative;
		display: inline-block !important;
		line-height: 1em !important;
		color: #FFF;
		font-size: 80%;
		font-weight: bold;
		letter-spacing: 1px;
		text-decoration: none !important;
		text-transform: uppercase;
		white-space: nowrap;
		margin-bottom: 5px;
		padding: 0.7em 2em;
		background-color: #56646f;
		border-radius: 2px;
		overflow: hidden;
	}
	
		a.button-st:hover {
			color: #FFF;
			cursor: pointer;
		}

		.button-st:after {
			position: absolute;
			display: block;
			content: '';
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border: none;
			background: #FFF;
			border-radius: 200px;
			opacity: 0.4;
			-webkit-transition: none;
			transition: none;
		}

			.button-st:hover:after {
				top: calc( 50% - 100px );
				left: calc( 50% - 100px );
				width: 200px;
				height: 200px;
				border: none;
				opacity: 0;
				-webkit-transition: all 300ms cubic-bezier(0.5, 0, 0.5, 1);
				transition: all 300ms cubic-bezier(0.5, 0, 0.5, 1);
			}

			a.button-with-icon,
			a.button-with-icon:hover {
				color: inherit;
				background: none;
				border: 2px solid rgba(0,0,0,0.15);
			}

				.button-with-icon:before {
				}

				.button-with-icon:after {
				}

					.button-with-icon:hover:after {
					}

			.button-with-icon-16 {
				font-size: 100%;
				padding: 1em 2em;
			}

				.button-with-icon-16:before {
					float: left;
					font-size: 100%;
					margin: -0.05em 0.5em 0 0;
				}

			.button-with-icon-32 {
				font-size: 150%;
				padding: 1em 1.5em 1em 1.2em;
			}

				.button-with-icon-32:before {
					font-size: 150%;
					margin: -0.05em 10px 0 0;
				}

			a.button-custom-color,
			a.button-custom-color:hover {
				color: #FFF;
			}

	/*-------------------------------------------
		1.4 - Alerts & Messages
	-------------------------------------------*/

	.alert {
		position: relative;
		text-align: center;
		line-height: 1.3em;
		margin: 0 0 1em;
		border: 1px solid;
	}

		.alert > div {
			padding: 0.5em 50px;
		}

		.alert-notice {
			color: #777;
			/*background: #EEE;*/
		}

		.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: 0;
			right: 0;
			width: 40px;
			height: 40px;
		}

			.alert-close:before {
				position: absolute;
				top: 10px;
				right: 10px;
				content: '\e650';
				font-size: 10px;
			}

			.alert-close:hover {
				cursor: pointer;
				opacity: 1;
			}


	/*-------------------------------------------
		1.5 - Highlight
	-------------------------------------------*/

	.highlight {
		color: #474733;
		padding: 0.15em;
		background: #efedac;
	}


	/*-------------------------------------------
		1.6 - Dropcap
	-------------------------------------------*/

	.dropcap {
		position: relative;
		z-index: 1;
	}

		.dropcap:before {
			position: absolute;
			width: 1.5em;
			content: attr(data-dropcap);
			font-size: 9em;
			font-style: italic;
			font-weight: 300;
			line-height: 1em;
			margin: -0.3em 0 0 -0.3em;
			opacity: 0.07;
			z-index: -1;
		}

	/*-------------------------------------------
		1.7 - Pull Quotes
	-------------------------------------------*/

	.pullquote {
		width: 33%;
		font-size: inherit;
		font-weight: normal;
		font-style: italic;
		line-height: 1.5em;
		color: #999;
		margin: 0.5em 25px;
		padding: 15px;
	}

		.pullquote:before {
			position: absolute;
			content: '\201C';
			color: #56646f;
			font-size: 10em;
			line-height: 1em;
			font-weight: normal;
			margin: -0.2em 0 0 -0.2em;
			opacity: 0.15;
			
		}
			.pullquote-left {
				float: left;
				margin-left: 0;
			}
	
			.pullquote-right {
				float: right;
				margin-right: 0;
			}


	/*-------------------------------------------
		1.8 - Toggle
	-------------------------------------------*/

	.toggle {
		text-align: left; /* needed */
		margin-bottom: 1em;
	}

		.toggle-title {
			line-height: 1.3em;
			font-size: 80%;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 1px;
			padding: 0.7em 2px;
			cursor: pointer;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}

			.toggle-title:hover {
			}

				.toggle-title span {
					position: relative;
					display: inline;
					margin-right: 0.5em;
				}
	
					.toggle-title span:before {
					}

		.toggle-holder {
			overflow: hidden;
			height: 0;
		}

			.toggle-box {
			}


	/*--- Toggle closed -----------------------------*/

	.toggle-closed {
	}

		.toggle-closed .toggle-title {
		}

			.toggle-closed .toggle-title span {
			}

				.toggle-closed .toggle-title span:before {
					content: '\e688';
					opacity: 0.5;
				}


	/*--- Toggle opened -----------------------------*/

	.toggle-opened {
	}

		.toggle-opened .toggle-title {
		}

			.toggle-opened .toggle-title span {
			}

				.toggle-opened .toggle-title span:before {
					content: '\e60c';
				}

	/*-------------------------------------------
		1.9 - Accordion
	-------------------------------------------*/

	.accordion {
		margin-bottom: 1em;
		border-top: 1px solid rgba(0,0,0,0.15);
	}

		.accordion .toggle {
			margin-bottom: 0;
			border: none;
			border-bottom: 1px solid rgba(0,0,0,0.15);
		}

			.accordion .toggle-title {
				padding: 10px 0;
			}

				.accordion .toggle-opened .toggle-title {
					color: #56646f;
				}

					.accordion .toggle-opened .toggle-title span {
					}
		
						.accordion .toggle-opened .toggle-title span:before {
						}

				.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 {
			position: relative;
			display: table;
			list-style: none;
			width: 100%;
			max-width: 100%;
			margin: 0 0 1em;
			padding: 0;
			box-shadow: 0 -1px rgba(0,0,0,0.15) inset;
			z-index: 1;
		}
		
			.st-ul li {
				display: table-cell;
				text-transform: uppercase;
				font-size: 80%;
				text-align: center;
				font-weight: bold;
				line-height: 1.3em;
				letter-spacing: 1px;
				margin: 0;
				padding: 0.7em;
				cursor: pointer;
				-webkit-user-select: none;
				-khtml-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				border-bottom: 1px solid transparent;
			}

				.st-ul li:first-child {
					box-shadow: none;
				}

				.st-ul li:hover {
					color: #56646f;
				}

				.st-ul li.st-current {
					color: #56646f;
					border-bottom: 1px solid;
				}

				
		/*--- Tabs -----------------------------*/

		.st-tabs {
			clear: both;
			text-align: left; /* needed */
		}
		
			.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;
	}

	/*--- CSS Tooltips ------------------------*/

	.tooltip-css {
		position: relative;
	}

		.tooltip-css:hover {
			position: relative;
		}

		.tooltip-css span {
			position: absolute !important;
			left: 0 !important;
			top: 100%;
			width: 160px !important;
			color: #444 !important;
			font-size: 13px !important;
			line-height: 1.2em !important;
			font-weight: normal;
			text-align: left;
			padding: 0 10px 20px;
			background: #FFF;
			box-shadow: 0 5px 15px rgba(0,0,0,0.1);
			border-radius: 3px;
			opacity: 0;
			-webkit-transition: all 350ms cubic-bezier(0.5, 0.5, 0.5, 1);
			transition: all 350ms cubic-bezier(0.5, 0.5, 0.5, 1);
			transform: translate(0,10px) scale(0);
			will-change: transform, opacity;
		}
	
			.tooltip-css:hover span {
				-webkit-transition: all 350ms cubic-bezier(0, 0.8, 0.4, 1);
				transition: all 350ms cubic-bezier(0, 0.8, 0.4, 1);
				transform: translate(0,10px) scale(1);
				opacity: 1;
				z-index: 99;
			}
	
			.tooltip-css span:before {
				display: block;
				clear: both;
				margin: -9px 0 10px;
				left: 15px;
				width: 0;
				height: 0;
				content: '';
				border-style: solid;
				border-width: 10px 0 0 10px;
				border-color: transparent transparent transparent #FFF;
			}

	/*-------------------------------------------
		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: #1e2225;
	}

	.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: #1e2225;
	}

	.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: #56646f;
		}
	
		.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 {
		text-align: center;
		padding: 25px;
		margin-bottom: 1em;
		border: 1px solid rgba(0,0,0,0.15);
		border-width: 1px 1px 2px;
	}

		.notice h1,
		.notice h2,
		.notice h3,
		.notice h4,
		.notice h5,
		.notice h6 {
			padding-top: 0;
		}


	/*-------------------------------------------
		1.16 - Skill
	-------------------------------------------*/

	.skill {
		position: relative;
		text-align: left; /* needed */
		margin-bottom: 1em;
		overflow: hidden;
	}

		.skill-bar {
			position: absolute;
			top: 40px;
			width: 5px;
			height: 100px;
			background: #56646f;
		}

		.skill-label {
			position: relative;
			line-height: 1em;
			padding: 1em 0;
			z-index: 1;
			box-shadow: 0 -1px 0 rgba(0,0,0,0.15) inset;
		}

			.textwidget > .skill:first-child {
				margin-top: -1em;
			}

			.skill-label span {
				float: right;
				font-size: 80%;
				font-style: italic;
			}


	/*-------------------------------------------
		1.17 - Icon Box
	-------------------------------------------*/

	.st_icon_box {
		text-align: center;
		margin-bottom: 25px;
		padding: 0 7%;
	}

		.st_icon_box:before {
			display: table;
			clear: both;
			line-height: 1em;
			margin: 0 auto 0.25em;
		}

	.st_icon_box_16 {
	}

		.st_icon_box_16:before {
			font-size: 16px;
		}

	.st_icon_box_32 {
	}

		.st_icon_box_32:before {
			top: 0.3em;
			font-size: 32px;
		}


	/*-------------------------------------------
		1.18 - Separator OR
	-------------------------------------------*/

	.separator-or {
		display: table;
		margin: 0 0 50px;
	}

		.separator-or:before,
		.separator-or:after {
			content: '';


			display: table-cell;
			width: 50%;
			border-top: 2px solid #444;
		}

			.separator-or span {
				display: table;
				font-size: 1.15em;
				font-weight: bold;
				text-transform: uppercase;
				line-height: 0;
				white-space: nowrap;
				margin: 0;
				padding: 0;
			}


	/*-------------------------------------------
		1.19 - ST Gallery
	-------------------------------------------*/

	.st-gallery {
		position: relative;
		display: block;
		max-width: 1200px;
	}

		.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: 5px;
			}

				.st-gallery ol li.st-gallery-tab-current {
					background: rgba(255,255,255,0.5);
					border: 3px solid rgba(255,255,255,1);
				}

