/**
 * 9.0 - Main file
 * 	9.2 - shortcode
 */

 // Counter
 .noo-counter-holder { 
 	> span.noo-counter {
 		font-weight:@headings-font-weight;
 	}
 	.counter-text {
 		h3 {
 			margin-top: 0;
 		}
 		p {
 			text-align: center;
 		}
 	}
 }

 .noo-block-grid {
 	display: block;
 	overflow: hidden;
 	padding: 0;
 	list-style: disc;
 	> li {
 		display: block;
 		height: auto;
 		float: left;
 		> img.noo-img-thumbnail {
 			padding: 5px;
 			border: 1px solid rgba(0,0,0,0.15);
 			background-color: #fff;
 			border-radius: 2px;
 			-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			box-shadow: 0 1px 3px rgba(0,0,0,0.1);
			-webkit-transition: border 0.3s ease,box-shadow 0.3s ease;
			transition: border 0.3s ease,box-shadow 0.3s ease;
 		}
 	}
 }
 .noo-block-grid.two-col {
 	margin: 1.313em -1.25%;
 	> li {
 		width: 50%;
 		padding: 1.25%;
 		&:nth-child(2n+1) {
 			clear: both;
 		}
 	}
 }
 .noo-block-grid.three-col {
 	margin: 1.313em -1%;
 	> li {
 		width: 33.33333%;
 		padding: 1%;
 		&:nth-child(3n+1) {
 			clear: both;
 		}
 	}
 }
 .noo-block-grid.four-col {
 	margin: 1.313em -0.9%;
 	> li {
 		width: 25%;
		padding: 0.9%;
 		&:nth-child(4n+1) {
 			clear: both;
 		}
 	}
 }
 .noo-block-grid.five-col {
 	margin: 1.313em -0.85%;
 	> li {
 		width: 20%;
		padding: 0.85%;
 		&:nth-child(5n+1) {
 			clear: both;
 		}
 	}
 }
 .noo-block-grid.six-col {
 	margin: 1.313em -0.8%;
 	> li {
 		width: 16.66666%;
		padding: 0.8%;
 		&:nth-child(6n+1) {
 			clear: both;
 		}
 	}
 }


/*
 *		Typography Shortcode  
 */
	// Dropcap
 .noo-dropcap {
 	float: left;
 	margin: 0 10px 0 0;
 	font-size: 42px;
 	line-height: 35px;
 	text-shadow: 0 1px 3px rgba(0,0,0,0.15);
 }
 .noo-dropcap.dropcap-square,
 .noo-dropcap.dropcap-circle {
	padding: 7px 13px 11px;
 }
 .noo-dropcap.dropcap-circle {
 	border-radius: 100%;
 }
	// Quotes
	.noo-quote {
		border-left-color: #21c2f8;
		font-style: italic;
		font-weight: 400;
		font-size: @font-size-base;
		color: #75747b;
		margin: 10px;
		cite:before {
			content: "– ";
		}
		&.text-right {
			border-left-width: 0;
			border-right: 5px solid #21c2f8;
			cite {
				font-weight: 300;
			}
		}
		&.pullquote {
			width: 40%;
			font-size: 16px;

			border: none;
			h1 {
				font-size: 16px !important;
				line-height: 1.3 !important;
			}
			&.pullquote-left {
				float: left;
			}
			&.pullquote-right {
				float: right;
			}
			&.text-left {
				margin-left: 0;
				padding-left: 0;
			}
			&.text-right {
				margin-right: 0;
				padding-right: 0;
			}
		}
	}

/*
 *		Lightbox Shortcode  
 */
 .noo-lightbox-item {
	 	> img {
	 		display: block;
	 		margin: 0 auto;
	 	}
 	.rounded {
 		border-radius: @border-radius-base;
 	}
 	.circle {
 		border-radius: 50%;
 	}
 }

/*
 *		Callout Shortcode  
 */

 .noo-cta-btn {
 	background-color: #fff;
 	// border: 1px solid #bcbcbc;
	border-radius: 0;
	// box-shadow: 1px 1px 9px rgba(0,0,0,0.15);
	width: 50%;
	margin: 0 auto;
	text-align: center;
	.cta-title {
		font-size: 18px;
		margin-top: 0;
		margin-bottom: @grid-gutter-width / 2;
	}
	.btn {
		// font-size: @font-size-large;
	    // font-weight: @font-weight-bold;
	    text-transform: uppercase;
	}
	@media (max-width: @screen-xs-max) { 
		width: 90%;
		.btn {
			max-width: 200px;
			padding-right: 15px!important;
			padding-left: 15px!important;
		}
	}
 }


 .noo-icon {
 	&.icon-style-custom {
 		&.icon-circle {
 			> i {
	 			border: 1px solid transparent;
	 			border-radius: 50%;
	 			text-align: center;
	 			.transition(all 0.2s ease-in-out);
 			}
 		}
 		&.icon-square {
 			> i {
	 			border: 1px solid transparent;
	 			text-align: center;
	 			.transition(all 0.2s ease-in-out);
 			}
 		}
 	}
	 &.noo-icon-position-center {
		 width: 100%;
		 display: inline-block;
		 text-align: center;
	 }
 }

 
@import "animations.less";


//Separator
.noo-separator{
	display: table;
	h4{
		display: table-cell;
		font-size: 100%;
		line-height: 1em;
		white-space: pre;  
	}
	.noo-sep-line{
		border-top: 1px solid @border-color-base;
	    display: block;
	    position: relative;
	    top: 0px;
	    width: 100%;
	}
 	&.line-with-text.separator-align-center{
		h4{
			padding-left: 0.8em;
			padding-right: 0.8em;
			@media (max-width: @screen-xs-max) {
				padding-left: @grid-gutter-width / 2;
				padding-right: @grid-gutter-width / 2;
			}
		}
		
	}
	&.line-with-text.separator-align-left{
		h4{
			padding-right: 0.8em;
		}
		.noo-sep-holder-l{
			display: none;
		}
		.noo-sep-holder-r{
			width: 100%;
		}
	}
	&.line-with-text.separator-align-right{
		h4{
			padding-left: 0.8em;
		}
		.noo-sep-holder-l{
			width: 100%;
		}
		.noo-sep-holder-r{
			display: none;
		}
	}
	
	.noo-sep-holder-l{
		display: table-cell;
	    position: relative;
	    vertical-align: middle;
	    width: 50%;
		.noo-sep-line{

		}
	}
	.noo-sep-holder-r{
		display: table-cell;
	    position: relative;
	    vertical-align: middle;
	    width: 50%;
		.noo-sep-line{

		}
	}
}

//Gap
.noo-gap{
	margin-left: 0;
	margin-bottom: 0;
	border-color: rgba(0, 0, 0, 0);
}

//Clear
.noo-clear{
	margin: 0;
	border: 0;
	clear: both;
}
//Pie

// Buttons
// -------------------------
.noo-pie-chart {
    z-index: 0;
    text-align: center;
    .noo-pie-chart-wrapper {
        position: relative;
        margin: 0 auto;
        .border-radius(50%);
    }
    .noo-pie-chart-heading {
    	margin-top: 30px !important;
    }
    &.noo-pie-chart-filled{
    	
    }
    canvas {
        position: relative;
        z-index: 1;
    }
    .noo-pie-chart-value {
        font-size: 200%;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
    }
	.noo-pie-chart-back {
	    display: block;
	    position: absolute;
	    width: 100%;
	    height: 100%;
	    top: 4px;
	    left: 4px;
	    border: 6px solid #f7f7f7;
	    border-radius: 999px;
	    border-radius: 50%;
	    .opacity(0.3);
	    .box-sizing(border-box);
	}

}

//Pricing Table
.noo-pricing-table{
	&:extend(.row all);
	&.pricing-1-col .noo-pricing-column,
	&.one-col .noo-pricing-column{
		.make-sm-column(12);
	}
	&.pricing-2-col .noo-pricing-column,
	&.two-col .noo-pricing-column{
		.make-sm-column(6);
		&:nth-child(2n+1) {
			clear: both;
		}
	}
	&.pricing-3-col .noo-pricing-column,
	&.three-col .noo-pricing-column{
		.make-sm-column(4);
		&:nth-child(3n+1) {
			clear: both;
		}
	}
	&.pricing-4-col .noo-pricing-column,
	&.four-col .noo-pricing-column{
		.make-sm-column(3);
		&:nth-child(4n+1) {
			clear: both;
		}
	}
	&.five-col .noo-pricing-column{
		
	}
	&.pricing-6-col .noo-pricing-column,
	&.six-col .noo-pricing-column{
		.make-xs-column(6);
		&:nth-child(6n+1) {
			clear: both;
		}
	}

	.noo-pricing-column{
		// @media (min-width: @screen-xs-min) {
		// 	float: left;
		// 	width: 25%;
		// }

		// width: 100%;
		&.col-sm-noo-5{
			width: 20%;
		}
		margin-bottom: 20px;
		.pricing-content{
			background: @pricing-color-bg;
			border-radius: @border-radius-base;
			.pricing-header{
				padding: @padding-base-vertical @padding-base-horizontal;
				.pricing-title{
					text-align: center;
				}
				.pricing-value{
				    text-align: center;
				    .noo-price{
				    	position: relative;
					    display: inline-block;
				    	font-size: @font-size-large;
				    	font-weight: @font-weight-base;
				    	background: @headings-color;
					    .border-radius(50%);
					    color:#fff;
					    height: 150px;
					    line-height: 140px;
					    width: 150px;
					    border:5px solid @brand-primary;
					    del {
						    position: absolute;
						    display: table;
						    width: 140px;
						    top: -30px;
						    width: 140px;
					        font-size: 18px;
						    text-align: center;
					    }
				    }
				}
			}
			.pricing-info{
				padding: 1em 0;
			    max-width: 300px;
			    margin-left: auto;
			    margin-right: auto;
			    display: block;
				ul{
					list-style: none;
					margin: 0;
					padding: 0;
					li{
						padding: 5px @padding-base-horizontal;
						font-weight: @font-weight-base;
						font-size: @font-size-base;
					}
				}
				i{
					font-size: 1.2em;
					color: @brand-primary;
					margin-right: 5px;
					body.rtl & {
						margin-right: 0px;
						margin-left: 5px;
					}
					&.not-good {
						color: @brand-danger;
					}
				}

				.short-desc {
					padding: 15px @padding-base-horizontal 5px;
				}

				.readmore {
					margin: 5px @padding-base-horizontal;
					color: @brand-primary;
					&:hover {
						border-bottom: dotted 1px @brand-primary;
					}
				}
			}
			.pricing-footer{
				border-top:none;
				padding: @padding-base-vertical @padding-base-horizontal @grid-gutter-width @padding-base-horizontal;
				text-align: center;
			}
		}
		.modal-content {
			.pricing-header{
				.pricing-value{
				    .noo-price{
				    	del {
						    top: -20px;
						}
					}
				}
			}
		}
		&.featured{
			.pricing-content{
				background: @headings-color;
				color: #fff;
				.pricing-title{
					color: #fff;
				}
			}
		}

	}

	&.noo-col-6 .noo-pricing-column:nth-child(6n+1) {
		clear: both;
	}
	&.noo-col-5 .noo-pricing-column:nth-child(5n+1) {
		clear: both;
	}
	&.noo-col-4 .noo-pricing-column:nth-child(4n+1) {
		clear: both;
	}
	&.noo-col-3 .noo-pricing-column:nth-child(3n+1) {
		clear: both;
	}
	&.noo-col-2 .noo-pricing-column:nth-child(2n+1) {
		clear: both;
	}

	&.ascending{
		margin: 0;
		padding: 0;
		.noo-pricing-column{
			padding: 0;
			.pricing-content {
				border-left: 1px solid @pricing-border-color-base;
				border-top: 1px solid @pricing-border-color-base;
				border-bottom: 1px solid @pricing-border-color-base;
				border-right: none;
				.pricing-header{
					border: none;
					background:none;
					padding: 0;
					.pricing-title{
						padding: @padding-base-vertical @padding-base-horizontal;
						text-transform: uppercase;
						margin: 0;
						color: @pricing-color-1;
						font-size: @font-size-base;
					}
					.pricing-value{
						padding: @padding-base-vertical @padding-base-horizontal;
						background-color: #F2F2F2;
						margin: 0;
						color: @text-color;
						.noo-price{
							font-size: 45px;
						}
					}
				}
				.pricing-info{
					border: none;
					ul{
						li{
							font-size: @font-size-base;
							background: #fff !important;
							text-align: inherit;
							border-bottom: 1px solid @pricing-border-color-base;
						}
					}
				}
				.pricing-footer{
					border: none;
				}
			}

			&:last-child{
				.pricing-content {
					border-right: 1px solid @pricing-border-color-base;;
				}
			}

			&.featured{
				position: relative;
				background: none repeat scroll 0 0 #fff;
			    .box-shadow(0 0 10px rgba(0, 0, 0, 0.1));
			    margin: -20px -1px 0;
			    z-index: 100;

				.pricing-content {
					.pricing-value{
						background-color: @pricing-color-1;
						color: #fff;
						.noo-price{
							color: #fff;
						}
					}
					border-right: 1px solid @pricing-border-color-base;

					.pricing-header{
						.pricing-title{
							margin: 10px 0;
						}
					}
					.pricing-info{
					}
					.pricing-footer{
						.btn{
							margin: 15px 0;
							border-color: @brand-primary !important;
							color: @brand-primary !important;
						}
					}
					
				}
			}
		}
	}
}

//Post list
.noo-post-list{
	.title{
		.sub-title{
			margin-top: (@line-height-computed / 2);
		}
	}
}


//Member
.noo-member{

	.member-avatar{
		position: relative;
		img{
			max-width: 100%;
			width: 100%;
		}

		.member-social{
			background: #000;
		    height: 100%;
		    left: 0;
		    position: absolute;
		    top: 0;
		    width: 100%;
		    text-align: center;
		    .opacity(0);
		    .transition(all 0.3s);
		    a{
		    	display: inline-block;
		    	color: #fff;
			    display: inline-block;
			    font-size: @font-size-large;
			    padding: @padding-base-vertical @padding-base-horizontal;
			    position: relative;
			    top: 50%;
			    .translate(0,-50%);
			    &:hover{
			    	color: @link-hover-color;
			    }

		    }
		}
		&:hover{
			.member-social{
				.opacity(0.8);
			}
		}

	}
	.member-info{
		.team-meta{
			&:extend(.clearfix all);
			font-size: @font-size-large;
		    font-weight: @font-weight-base;
		    text-transform: uppercase;
		    small{ 
		    	float: right;
		    	font-size: @font-size-base;
			    font-weight: @font-weight-base;
			    text-transform: none;
		    }
		}
	}
}
//Google Map
.noo-gmaps{
    position: relative;
    .map-overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 100;
    }
	iframe{
		max-width: 100%;
		border: medium none;
	    display: block;
	    margin: 0;
	    padding: 0;
	    width: 100%;
	    position: relative;
	}
	&.no-map-responsive{
		iframe{
			height: 100%;
		    left: 0;
		    position: absolute;
		    top: 0;
		}
	} 
}


#cta_buy_theme {
	.noo-text-block {
		p {
			font-size: 18px;
    	line-height: 36px;
    	text-align: center;
		}
	}
	@media (max-width: @screen-md-min) { 
		.noo-text-block {
			p {
				text-align: center;
			}
			.btn {
				display: table;
				margin: 0 auto;
			}
		}
	}
}


.noo-step-icon{
	margin-top: 40px;
	ul{
		margin: 0;
		padding: 0;
		list-style: none;
		display: table;
		margin: 0 auto;
	}
	li{
		float: left;
		text-align: center;
		@media (max-width: @screen-xs-max) { 
			width: 100%;
		}
		&:first-child{
			.noo-step-icon-item{
				&:before{
					display: none;
				}
			}
		}
		&:last-child{
			.noo-step-icon-item{
				&:after{
					display: none;
				}
			}
		}
	}
	.noo-step-icon-item{
		padding: 0 50px;
		display: block;
		position: relative;
		@media (min-width: @screen-sm-min) { 
			&:after,
			&:before{
				background: none repeat scroll 0 0 lighten(@brand-primary, 1%);
			    content: "";
			    height: 10px;
			    position: absolute;
			    right: 0;
			    text-align: center;
			    top: 47px;
			    @media (max-width: @screen-md-max){ 
			    	top: 36px;
			    }
			    width: 50%;
			}
			&:before{
				left: 0;
			}
		}
		@media (max-width: @screen-md-max){ 
			font-size: 0.9em;
		}
	}
	a{
		display: inline-block;
		color: #fff;
		width: 180px;
		@media (max-width: @screen-md-max){ 
			width: 130px;
		}

	}
	.noo-step-icon-class{
		display: inline-block;
		width: 99px;
		height: 99px;
		line-height: 99px;
		background-color: @text-color;
		color: #fff;
		text-align: center;
		font-weight: bold;
		font-size: 2em;
		z-index: 2;
		.border-radius(100%);
		position: relative;
		@media (max-width: @screen-md-max){ 
			width: 80px;
			height: 80px;
			line-height: 80px;
		}
		&:after{
			border: 10px solid lighten(@brand-primary, 1%);
		    .border-radius(100%);
		    bottom: -1px;
		    content: "";
		    display: block;
		    left: -1px;
		    position: absolute;
		    right: -1px;
		    top: -1px;
		}
		&:hover{
			color: @brand-primary;
		}
		//.box-shadow(10px 10px 10px);
	}
	.noo-step-icon-title{
		display: block;
		text-align: center;
		color: #fff;
		font-family: @headings-font-family;
		margin: (@grid-gutter-width  / 2) 0 ;
	}

	@media (max-width: @screen-sm-min) {
		li{
			a {
				margin-bottom: 15px;
				width: 100%;
				.noo-step-icon-class{
					float: left;
				}
				.noo-step-icon-title{
					float: left;
					margin-left: 15px!important;
					padding-top: 15px;
				}
			}
		}
	}
}

// VC shortcodes
// vc_single_image
.wpb_single_image.wpb_content_element {
	margin-bottom: 0px;
}

.noo-tabs.vc_tta {
	.vc_tta-tabs-list {
		border-bottom: 1px solid @nav-tabs-border-color;
		margin-bottom: (@grid-gutter-width / 2);
	}

	.vc_tta-tab {
		margin-bottom: -1px !important;
	    > a {
			// margin-right: 2px;
			line-height: @line-height-base;
			border: 1px solid transparent !important;
    		border-color: transparent !important;
			border-radius: @border-radius-base @border-radius-base 0 0 !important;
			background: @background-color-base !important;
			font-weight: bold;
			font-family: @headings-font-family;
	    	&:hover,
			&:focus {
				color: @brand-primary !important;
				text-decoration: none;
				background-color: @nav-link-hover-bg !important;
				border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color !important;
			}
	    }

	    &.vc_active > a,
	    &.vc_active > a:hover {
    		background:@headings-color !important;
    		color: #fff !important;
    		border: 1px solid #ddd !important;
    		border-bottom-color: transparent !important;
    	}
    }

    &.vc_general {
    	.vc_tta-panel-body {
    		overflow: initial;
    	}
    }
}

.noo-tabs {
    @media (min-width: @screen-sm-min) { 
		.posts-loop-title{
			display: inline-block;
		    margin-bottom: 0;
		    position: absolute;
		    top: 10px;
		}
	}
    @media (max-width: @screen-sm-max) {
		.posts-loop-title h3 {
    		font-size: 16px;
    	}
    }
	&.vc_tta {
    	@media (min-width: @screen-sm-min) {
		    .posts-loop-title {
		    	position: relative;
		    	top: 0;
				margin-bottom: @grid-gutter-width;
		    }

		    &.vc_tta-controls-align-left,
		    &.vc_tta-controls-align-right {
		    	.posts-loop-title {
			    	top: -50px;
					margin-bottom: 0;
			    }
		    }
		    &.vc_tta-controls-align-left {
		    	.posts-loop-title {
			    	float: right;
			    }
		    }
		}
	}
}

.noo-counter-icon{
	.noo-counter-item{
		font-family:@font-family-base;
		color: @text-color;
		padding: 20px 0;
		margin-left:25%;
		&:after{
			content: "";
			display: table;
			clear: both;
		}
		.noo-counter-font-icon{
			padding-top: 10px;
		}
		.fa{
			font-size:((36px  / @font-size-root) + @font-unit);
			color: @brand-primary;
		}
		.noo-counter{
			font-size:((40px  / @font-size-root) + @font-unit);
			line-height: 100%;
			font-weight:bold;
		}
		.noo-counter-icon-content{
			margin-left: 20px;
		}
		.noo-counter-text{
			text-transform: uppercase;
		}
	}
}
.noo-step-icon-advanced {
	background-size: cover!important;
	padding: 100px 0;
	margin-bottom: 150px;
	margin-top:0;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;

	&:before {
		content: '';
		width: 100%;
		display: block;
		height: 100%;
		content: '';
		position: absolute;
		background: rgba(68, 73, 75, 0.8);
		top: 0;
		left: 0;
	}
	.container-boxed {
		position: relative;
	}
	.noo-step-icon-content{
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		text-align: center;
	}
	.noo-step-icon-button {
		text-align: center;
		margin-top: 50px;
		margin-bottom: 80px;
		.noo-step-icon-btn {
			display: inline-block;
			a{
				width: auto;
			}
		}
	}
	.noo-step-icon-advanced-list{
		ul{
			position: absolute;
			transform: translate(-50%, 150px);
			left: 50%;
			bottom:0;
			display: flex;
			@media (max-width: @screen-xs-max) {
				left: 0;
				transform: translate(0);
				position: relative;
				display: table;
			}

			background: #fff;
			border-radius: @border-radius-base;
			padding:50px 0!important;

			-webkit-box-shadow: 0 1px 20px 0 rgba(0,0,0,.15);
			-moz-box-shadow: 0 1px 20px 0 rgba(0,0,0,.15);
			-ms-box-shadow: 0 1px 20px 0 rgba(0,0,0,.15);
			-o-box-shadow: 0 1px 20px 0 rgba(0,0,0,.15);
			box-shadow: 0 1px 20px 0 rgba(0,0,0,.15);

			.noo-step-icon-title{
				color: @text-color;
			}
		}
	}

}
.noo-quote{
	&.noo-quote-comma {
		border: none;
		margin: 35px;
		font-weight: bold;
		color: @text-color;
		font-style: normal;
		position: relative;
		&:before{
			content: "\f10d";
			position: absolute;
			color: @brand-primary;
			font: normal normal normal 20px/1 FontAwesome;
			left: 0;
		}
	}

}
.border-radius{
	border-radius: @border-radius-base;
}
.noo-vc-col .container-boxed.max {
	width: 100%;
}
.wpb_gallery_slides.wpb_flexslider{
	.flex-control-nav{
		display: none;
	}
}
