/* _-_-_- base/BASE -_-_-_ */
body {
	margin: 0;
	will-change : contents;
	
	button{
		margin: 0;
		padding: 0;
		line-height: .8em;
	}

	iframe {
		border: 2px solid rgba(68, 83, 99, 0.22);
		height: calc( 100vh - 49px );
		width: 100%;
		transition: .4s;
		will-change : contents;

	}
	//have issue in top padding gizmo position in some theme
	div.karma-element-content {
		font-size: initial;
	}


	font-family: $builder-normal-font;
	.karma-full-separator {
		@include box( 100%, 1px );
		@include element_direction( $bottom: 0, $left: 0 );
		color: $builder-main-color-3;
		position: absolute;
		margin : 20px 0 0;
	}

	.karma-container-separator {
		@include box( calc( 100% - 40px ), 1px );
		@include element_direction( $bottom: 0, $left: 20px );
		color: $builder-main-color-3;
		margin: 0;
		position: absolute;
	}

}

.karma-builder-element{

	&.karma-element-alignment-left{

		display: flex;
		justify-content: flex-start;
	}
	&.karma-element-alignment-center{

		display: flex;
		justify-content: center;
	}
	&.karma-element-alignment-right{

		display: flex;
		justify-content: flex-end;
	}
}

.ui-draggable-dragging {
	pointer-events: none !important;
}

#karma-builder-layout{
	h1,h2,h3,h4,h5,h6,p,a{
		margin: 0;
		word-wrap: break-word;
		word-break: break-word;
	}

}



@media screen and (max-width: 768px) {

	.karma-builder-element[data-name="karma_image_box"] .karma-image-text-box{
		padding: 35px !important;

		.karma-image-text-box-text-container{
			min-width: 80%;
		}
	}
	.karma-builder-element[data-name="karma_video_box"] .karma-video-box{
		padding: 35px !important;
	}
	#karma-builder-layout {
		h1 {
			font-size: 42px;
			line-height: 54px;
		}
		h2 {
			font-size: 35px;
			line-height: 45px;
		}
		h3 {
			font-size: 24px;
			line-height: 34px;
		}
		h4 {
			font-size: 20px;
			line-height: 30px;
		}
		h5 {
			font-size: 18px;
			line-height: 28px;
		}
		h6 {
			font-size: 16px;
			line-height: 26px;
		}
		p {
			font-size: 14px;
			line-height: 24px;
		}
	}

	.karma-builder-element[data-name="karma_image"] .karma-image-container{
		.karma-image-resize{
			max-width: 100%;
			width: auto !important;
			.karma-image-resize-crop{
				max-width: 100%;
				width: auto !important;
			}
		}
	}

}

@media screen and (max-width: 575px) {

	.karma-builder-element[data-name="karma_image_box"] .karma-image-text-box{
		padding: 29px !important;
		
		.karma-image-text-box-text-container{
			min-width: 80%;
		}
	}
	.karma-builder-element[data-name="karma_video_box"] .karma-image-text-box{
		padding: 29px !important;
	}

	#karma-builder-layout {
		h1 {
			font-size: 30px;
			line-height: 40px;
		}
		h2 {
			font-size: 28px;
			line-height: 38px;
		}
		h3 {
			font-size: 24px;
			line-height: 34px;
		}
		h4 {
			font-size: 20px;
			line-height: 30px;
		}
		h5 {
			font-size: 18px;
			line-height: 28px;
		}
		h6 {
			font-size: 15px;
			line-height: 25px;
		}
		p {
			font-size: 14px;
			line-height: 24px;
		}
	}
	.karma-builder-element[data-name="karma_image"] .karma-image-container{
		.karma-image-resize{
			max-width: 100%;
			width: auto !important;
			.karma-image-resize-crop{
				max-width: 100%;
				width: auto !important;
			}
		}
	}

}