/* ==========================================================================
   DESIGN ELEMENTS
   ========================================================================== */

/* Photo Gallery
   ========================================================================== */
	#container .rt-gallery{

		.col{
			margin-bottom: floor(($grid-gutter-width));
		}

		.row:last-child .col{
			margin-bottom: 0;
		}
		
		//nogaps
		&.nogaps{

			&.row, > .row{
				margin-left: 0;
				margin-right: 0;
			}

			.col{
				padding: 0;
				margin: 0;
			}
		}

		.gallery-item-holder{
			max-width: 100%;
			margin: auto;

			img{
				max-width: 100%; 
				display: block;
				margin: auto;
			}
		}  



		//metro gallery
		&.metro-gallery{
			.gallery-item-holder img{
				width: 100%;
			}
		}
	}

	.single-post, .single-portfolio{
		.rt-gallery{
			.col-sm-12{
				padding: 0;
			}		
		}
	}

/* Grid Borders
   ========================================================================== */
	.border_grid{

		> .row, .content_row, .elementor-row{
			border-width: 1px 0 0 0;
			border-style: solid;
			margin: 0;

			&:first-child{
				border-width: 0;

				> div:after {
					top: 0;
				}	
			}

			&:last-child > div:after {
				bottom: 0; 
			}
		} 

		> .row > div, .rt-column-container, .col, .elementor-column{		

			&:first-child:after{
				border-width: 0;
			}

			&:after{
				content: "";
				position: absolute;
				left: -1px;
				top: 0;
				bottom: 0;
				width: 1px;
				z-index: 1;			 
				border-width: 0 0 0 1px;
				border-style: solid;						
			}	
		}

		> .row > div, .content_row .rt-column-container, .elementor-column{		
			padding-top: 15px;
			padding-bottom: 25px;

			&:after{
				top: 15px;
				bottom: 15px; 					
			}			
		}

		.content_row:first-child .rt-column-container{
			padding-top: 0px;
		}
		
		.wpb_row, .row{
			margin-left: -20px;
			margin-right: -20px;
		}
	}

/* Overlay Texts
   ========================================================================== */
   .has-overlay{
		overflow: hidden;
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
		position: relative;

		.image-thumbnail img{
			opacity: 1;
			@include transition( all 0.2s ease-out 0.1s );	
		}

		.overlay-text { 			

			&:after{
				content: "";
				background: linear-gradient(180deg, #000000 2%, rgba(0, 0, 0, 0) 100%);
				mix-blend-mode: multiply;
				-webkit-mix-blend-mode: multiply;
				@include transition( all 0.2s ease-out 0.1s );	
				overflow: hidden;
				position: absolute;
				top: -100%;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0.4;				
				z-index: 1;
				backface-visibility: hidden;
			}


			top: 0;
			width: 100%;
			height: 100%;
			position: absolute;
			padding: 20px;			
			transform: translate3d(0,0,0);

			> p{
				margin: 5px 0 0;
				font-size: .85em;
			}

			*{
				opacity: 0;
				color:#fff !important;
				position: relative;
				z-index: 2;
				@include transition( all 0.2s linear 0.3s );	
			}
		}

		&:hover{ 
			.overlay-text{
				opacity: 1;

				*{
					opacity: 1;
				}
			}
			.overlay-text:after{
				top: 0;	
			}
		}

   }

/* Featured Images
   ========================================================================== */
	.featured_image img, .featured_image div{
		width: 100%;
	}

	.featured_image{
		position: relative;
		overflow: hidden;
	}

	/* image effect */
	.imgeffect{
		position: relative;
		overflow: hidden;
		display: block;
		max-width: 100%; 
		z-index: 1;		

		img{
			opacity: 1;
			@include transition( all 0.2s ease-out 0.1s );	
		}

		.overlay-mask{
			background: linear-gradient(180deg, #000000 2%, rgba(0, 0, 0, 0) 100%);
			mix-blend-mode: multiply;
			-webkit-mix-blend-mode: multiply;
			@include transition( all 0.2s ease-out 0.1s );	
			overflow: hidden;
			position: absolute;
			top: -100%;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0.4;
		}

		.action-button {
			top: 20px;
			right: 20px;
			line-height: 1.6em;
			width: 1.6em;
			height: 1.6em;
			position: absolute;
			text-align: center;		
			position: absolute;
			text-align: center; 
			opacity: 0;
			@include scale(0);			
			@include transition(all 0.4s ease-out 0.1s);	
			z-index: 20;
		}
 

		&:hover{ 
			.action-button {
				opacity: 1;
				@include scale(1);	
			}	

			> .overlay-mask{
				top: 0;				
			}		

		}

		> .action-button:before{
			font-family: 'rtui';
			color: #fff;
			font-size: 16px;
		}

		&.zoom > .action-button:before{
			content: "\e800";
		}

		&.gallery > .action-button:before{
			content: "\e803";
		}
		
		&.video > .action-button:before{
			content: "\6a";
		}

		&.audio > .action-button:before{
			content: "\e805";
		}

		&.extlink > .action-button:before{
			content: "\f08e";
		}

		&.link > .action-button:before{
			content: "\e806";
		}			

		> div > img{
			display: inline-block;
		}

		&.aligncenter{
			display: block;
		}
	} 

	.featured-image-nav{
		opacity: 0;
		bottom: -50px;
		margin: 0;
		padding: 10px 0 5px;
		position: absolute;
		text-align: center;
		width: 100%;
		background-color: rgba(0,0,0,0.3);

		> li{
			display: inline-block;
			cursor: pointer;
			width: 15px;
			height: 15px;
			border: 1px solid rgba(255, 255, 255, 0.30);
		}

		> li:hover, > li.active{
			background: rgba(255, 255, 255, 0.15);
		}		
	}

	.featured_image:hover .featured-image-nav{
		@include transition(all 0.3s ease 0s);
		opacity: 1;
		bottom: 0;
	}

/* Custom Select Box
   ========================================================================== */
	.hasCustomSelect{
		z-index: 2;
		padding-right: 20px;
	}

	.customselect {
		//use color border-color;
		border-width: 1px;
		border-style: solid;
		padding: 4px 20px 4px 10px;
		position: relative;
		z-index: 1;
	}

	.customselect .customselectInner:before{
		content: "\2a";
		font-family: "rtui";
		position: absolute;
		right: 10px;
	}

/* Special Backgrounds
   ========================================================================== */
	.rt-parallax-background{ 
		background-attachment: scroll;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 0;
		backface-visibility: hidden;
		display: none;
		width: 100%;
		height: 100%;
		-webkit-transform: translateZ(0);
		-webkit-backface-visibility: hidden; 		
	}

	.rt-sa-background{ 
		width: 100%;
		position: absolute;
		left: 0;
		overflow: hidden;
		z-index: 0;
	}

	.rt-svg-background{ 
		width: 100%;
		position: absolute;
		left: 0;
		overflow: hidden;
		z-index: 0;
		height: auto;

		&.top{
			top:-1px;
		}

		&.bottom{
			bottom:-1px;
		}		
	}

/* Animated Backgrounds
   ========================================================================== */
	.rt-background-slider{ 
		width: 100%;
		height: 100%;
		background-attachment: scroll;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: 0;
		-webkit-transform: translate3d(0);
		backface-visibility: hidden;
	}
 
 	.rt-background-slider > *{
		opacity: 1;
 		@include transform(scale(1)); 
		@include transition( opacity 0s, transform 0s ) ;		
 	}

/* Read More Links
   ========================================================================== */
	.read_more{
		display: block;
		margin-top: 10px;
		text-decoration: none;
	}

	.read_more:after {
		content: "\006D";
		display: inline-block;
		font-family: "rtui";
		padding-left: 10px;
	}

	a.read_more:hover {
		text-decoration: none;
		@include transition( color 0.3s ) ;	
	}

	.read_more:hover:after {
		opacity: 0.6;
		padding-left: 13px;
		text-decoration: none;
		transition: padding 0.4s ease 0s;
	}

/* Lists
   ========================================================================== */
	ul,
	ol {
		padding-left: 20px;
		margin-bottom: 20px;
	}   

/* blockquote
   ========================================================================== */

	blockquote{
		margin: 40px 0;
		font-style: italic; 
		font-size: 1.25em;
		border-width: 3px 0;
		border-style: solid;
		padding: 40px 0; 

		&:before{
			content: "\201c";
			float: left;
			font-size: 3em;
			line-height: 1em;
		}

		&.text-center:before{
			float: none;
		}

		p{
			margin-left: 3em;
		}

		cite{
			margin-top: .75em;
			font-size: .75em; 
			display: inline-block;
			width: 100%;
			font-style: normal;
			margin-left: 3.75em;
		}

		cite:before {
			content: '\2014 \00A0';
		}

		&.style-2{
			border-width: 0;

			p,cite{
				margin-left: 0;
				padding-left: 0;
			}
		}
	}

/* image loading effect
   ========================================================================== */
	.rt_preloading:after{
		content: "";
		opacity: 0;
		position: absolute;
		width: 40px;
		height: 40px;
		background-color: rgba(0,0,0,0.5);
		border-radius: 100%;  
		//border-width: 1px;
		//border-style: solid;
		top:calc(50% - 20px);
		left:calc(50% - 20px);
		@include animation(scaleout 1.0s infinite ease-in-out);
		z-index: 1;
	}

/* Featured Image
   ========================================================================== */
	.rt-featured-image{
		@include box-shadow(2px 2px 2px rgba(0, 0, 0, 0.08));
		border-width: 1px;
		border-style: solid;
		padding: 20px;	 
	}

/* Featured Video
   ========================================================================== */
	.rt-featured-video{
		@include box-shadow(2px 2px 2px rgba(0, 0, 0, 0.08));
		border-width: 1px;
		border-style: solid;
		padding: 20px;	 
	}

/* Featured Map
   ========================================================================== */
	.rt-featured-map{
		@include box-shadow(2px 2px 2px rgba(0, 0, 0, 0.08));
		border-width: 1px;
		border-style: solid;
		padding: 20px;	 
	}

/* Frame
   ========================================================================== */
	.rt-frame{
		border-width: 1px;
		border-style: solid;
		padding: 10px;	 
	}

/* Shadows
	========================================================================== */	
	.shadow{
		@include box-shadow(2px 2px 2px rgba(0, 0, 0, 0.04));	
	}

	.rt-column-gaps > div > .shadow > .vc_column-inner{
		@include box-shadow(2px 2px 2px rgba(0, 0, 0, 0.04));		
	}


	.shadow-2{
		box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.25);
	}

	.shadow-3{
		box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.1);
	}

	.hover-shadow:hover{
		box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.25);
		transition: box-shadow 0.3s ease;	
	}

	//hover opacity
	.hover-opacity:hover{
		opacity: 0.3;
		transition: opacity 0.3s ease;	
	}		

/* Boxed
	========================================================================== */	
	.boxed, .boxed-column > * > *{
		@include box-shadow(2px 2px 2px rgba(0, 0, 0, 0.04));	
		padding: floor(($rt-grid-gutter-width / 2));	
	}

	.boxed-column > * > *{
		height: 100%;
	}

	.boxed{
		height: 100%;
	}

/* Go to top
   ========================================================================== */
   .go-to-top{
		cursor: pointer;
		text-align: center;
		width: 46px;
		line-height: 42px;
		border-width: 2px;
		border-style: solid;
		border-color: initial !important;
		font-size: 2em;
		position: absolute;
		right: 20px;
		transform: translateY(calc( -50% + 0.5em - 4px ));
		margin-top: 200px;
		opacity: 0;

		&.visible{
			opacity: 1;
			margin-top: 0;
			transition: margin 1s ease;
		}
    
		&:before{
			vertical-align: middle;
		}

		&:hover{
			opacity: 0.7;
		}
   }

/* Borders & Shadows
   ========================================================================== */

	/* shadows */ 
	.shadow-top{
		@include box-shadow( 0 4px 2px -2px rgba(0, 0, 0, 0.04) inset);
	}

	.shadow-bottom{
		@include box-shadow(0 -4px 2px -2px rgba(0, 0, 0, 0.04) inset );
	}
	.shadow-top.shadow-bottom{
		@include box-shadow(0 -4px 2px -2px rgba(0, 0, 0, 0.04) inset, 0 4px 2px -2px rgba(0, 0, 0, 0.04) inset );
	}

	/* shadows fix for bg overlays */
	.content-row-video-overlay:before {
		content: "";
		position: absolute;
		height: 100%;
		width: 100%;
	}

	.shadow-top .content-row-video-overlay:before{
		@include box-shadow( 0 4px 2px -2px rgba(0, 0, 0, 0.04) inset);
	}

	.shadow-bottom .content-row-video-overlay:before{
		@include box-shadow(0 -4px 2px -2px rgba(0, 0, 0, 0.04) inset );
	}
	
	.shadow-top.shadow-bottom .content-row-video-overlay:before{
		@include box-shadow(0 -4px 2px -2px rgba(0, 0, 0, 0.04) inset, 0 4px 2px -2px rgba(0, 0, 0, 0.04) inset );
	}

	/* borders */	 
	.border-top{
		border-top-width: 1px;
		border-top-style: solid;
	}

	.border-bottom{
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}

	.border-left{
		border-left-width: 1px;
		border-left-style: solid;
	}

	.border-right{
		border-right-width: 1px;
		border-right-style: solid;
	}								


/* Content Overlay
   ========================================================================== */
	#content-overlay {
		background: rgba(0, 0, 0, 0.65);
		bottom: 0;
		left: 0;
		position: fixed;
		right: 0;
			z-index: 490;
		height: 0;
		opacity: 0;
		@include transition(opacity 0.4s ease 0.8s, height 0s ease 1.2s);
	}

	.rt-menu-over, .side-panel-on{
		#content-overlay {
			top: 0;
			opacity: 1;
		}   
	}

	.side-panel-on{
		#content-overlay { 
			@include transition(height 0s ease 0s, opacity .4s ease 0s);
			height: 100%;
		}
	}	

	//only for webkit
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		.side-panel-on #main_content{
			filter: grayscale(1);
		}
	}

/* Post Navigation
   ========================================================================== */
   .businesslounge-post-navigation{
   		
	border-width: 1px 0 0 0;
	border-style: solid;
	padding-top: 25px;
	padding-bottom: 25px;
	text-transform: uppercase;
	font-size: 0.875em;

   	a{
		text-decoration: none;
		transition: color 0.2s ease-in;

		&:before{
			font-family: "rtui"; 		
			vertical-align: middle;
		}
   	}

		> div > *:first-child{
			text-align: left;
			
			a:before{
				content: "\22"; 
				float: left;
				margin-right: 20px;
			}			
		}

		> div > *:nth-child(2){
			text-align: center;
		}

		> div > *:last-child{
			text-align: right;
			
			a:before{
				content: "\28"; 
				float: right;
				margin-left: 20px;
			}

		}		

		.post-nav-img {
			position: absolute;
 			bottom: calc(24px + 1em);	
			width: 100px;
			height: 100px;
			overflow: hidden;
			display: block;
			padding: 10px;
			background: #fff;
			@include transform-origin(50%); 
			@include backface-visibility(hidden);
			@include transform(scale(0));
			@include transition( all .4s ease); 

			border-radius: 50%;				
			box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);

			img{
				width: 100%;
				height: auto;
				border-radius: 50%;	
			}
		}		

		.rt-prev-post:hover,
		.rt-next-post:hover{
			.post-nav-img{ 
				
				@include transition( all .4s cubic-bezier(1, -0.02, 0.39, 1.92)); 
				@include transform(scale(1));

				z-index: 999;
			}
		}

		.rt-prev-post .post-nav-img{
			left: 0;
		}

		.rt-next-post .post-nav-img{
			right: 0;
		}		

   }


/* Icons
   ========================================================================== */
	#container .businesslounge-icon{
		border-style: solid;
		border-color: transparent;
		line-height: 1em;
		
		&:before{
			display: block !important;
			margin: 0 !important;
		}

		&:not(.aligncenter):not(.alignleft):not(.alignright){
			display: inline-block;	
		}
	}

	.elementor-icon .rt-elementor-icon:before{
		margin: 0 !important;
		display: block !important;
	}

	.elementor-widget-icon-list .rt-elementor-icon{
		line-height: 1;
		&:before{
			margin: 0;
		}
	}

/* popups
   ========================================================================== */
	.rt-popup{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		pointer-events: none;
		background-color: rgba(0, 0, 0, 0.9);
		display: block;
		opacity: 0; 
		@include backface-visibility(hidden); 
		transition: all 0.3s ease;

		&.active{
			transition: all 0.3s ease;
			z-index: 999999;
			opacity: 1; 
			pointer-events: auto;
		}
	}	 
	
	.rt-popup-close{
		position: absolute;
		top: 40px;
		right: 40px;
		color: #fff;
		background: transparent;
		outline: none;
		border: none;
		cursor: pointer;
		z-index: 99;
	}

	.rt-popup-content-wrapper{
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		position: absolute;
		overflow: hidden;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center; 
	}

	.rt-popup-content{
		display: block; 
		position: relative;
		padding: 10%;
		max-height: 100%;
		width: 100%;
	}

	.ps-scrollbar-y-rail {
		display: none;
	}	
/* popups search
   ========================================================================== */
	.rt-popup-search .wp-search-form{
		font-size: 1.4em;
		color: #fff;

		input[type="text"]{
			border-radius: 100px;
			border-width: 2px !important;
			border-color: rgba(255,255,255,0.6);
			padding: 0.6em 1.5em !important;

			&:focus{
				border-color: #fff;			
			}
		}

		span{
			right: 0.75em;
		}			
	}

/* popup langugaes
   ========================================================================== */
	.rt-popup-languages{

		.rt-popup-content{
			text-align: center;
		}
		
		h5{			
			margin-bottom: 2em;
		}

		h5, a, a:hover{
			color: #fff;
		}

		a:hover{
			opacity: 0.7;
			text-decoration: none;
		}
		
		.rt-flags{	
			list-style: none;
			margin: 0;
			padding: 0;

			> li{
				display: inline-block;
				padding: 15px;

				a{
					padding: 10px 0;
					text-decoration: none;
					vertical-align: middle;
				}				
			}
		}	

		.rt-flag{
			width: 40px;
			height: 40px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
			border-radius: 50%;
		}

		span{
			display: inline-block;
			vertical-align: middle;
			line-height: 1em;
			padding: 10px;
		}
	}