ul{
	padding:0;
	margin-left: 20px;
	list-style-type: disc;
}
ol{
	padding:0;
	margin-left: 20px;
	list-style: decimal;
}
a{
	color: #333;
}
a:hover,a:focus,a:active{
	text-decoration: none;
	color: #333;
}
.clear{
	clear: both;
}
.tdi_label{
	text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 12px;
    color: #333;
    margin-bottom: 8px;
    -moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}
.tdi_input{
	border-radius: 0px;
    border-color: #eee;
    box-shadow: none;
    outline: none;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    height: 32px;
    margin-bottom: 10px;
}
.tdi_input:focus,.tdi_textarea:focus,.custom-select:focus{
	border-color:#333;
	outline: none;
}
.tdi_select{

}
.page-blank{
	margin-bottom: 100px!important;
}
textarea.tdi_textarea{
	border-radius: 0px;
    border-color: #eee;
    box-shadow: none;
    outline: none;
    font-size: 12px;
    color: #333;
    font-weight: 400;
    height: 150px;
    margin-bottom: 10px;
}
.tdi_button{

}
.input-group {
    position: relative;
    display: flex;
    width: 100%;
    border: 1px solid #eee;
}
.input-group-prepend {
    display: flex;
    padding: 0 .75rem;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 32px;
}
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 8px;
    float: right;
    margin-top: 5px;
    margin-right: 5px;
}
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f6f6f6;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: -2px;
  top: -5px;
  background-color: #e5e5e5;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #666;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
.editor-view{
	width: 100%;
	margin:0 auto;
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}
.switch-btn span {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 12px;
    color: #333;
}
.custom-select {
    display: block;
    vertical-align: middle;
    background: #e4e4e4 url(../image/select-arrow.svg) no-repeat right 1.25rem center;
    background-size: 8px 10px;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 45px;
	line-height: 45px;
	color: #666;
	border:0;
	padding:0 12px;
	width: 100%;
	font-size: 14px!important;
	box-shadow:none;
	cursor: pointer;
}

			
/*blank*/
.page-blank{
	background: #fff;
	min-height: 500px;
}
	.blank{
		border: 2px dashed #eee;
		height: 300px; 
		margin-bottom: 20px;
	}
		.blank a{
			display: block;
			text-align: center;
			height: 100%;
			transition: .2s;
		}
		.blank a:hover{
			background: #f6f6f6;
			transition: .2s;
		}
			.blank a strong{
				position: absolute;
			    left: 50%;
			    top: 50%;
			    transform: translate(-50%, -50%);
			    min-width: 130px;
			    display: inline-block;
			    font-size: 16px;
			    font-weight: 400;
			    color: #999;
			}
			.column-left,.column-right{
				display: none;
			}



/*section*/
.section{
	padding:10px 0;
	border:1px solid #fff;
	margin: 20px 0;
	margin-bottom: 40px;
}
.section-list{
	
}
	.section-contrl-buttons{
		margin-top:-37px;
		margin-bottom: 10px;
		font-size: 0;
		margin-left: 1px;
	}
	.button-block{
		min-height: 13px;
	}
	.add-end{
		margin-bottom: 20px;
		display: none;
		margin-top: -20px;
	}
		.section-contrl-buttons a,.section-edit a.edit-button-section,.section-edit a.edit-blog-section,.section-edit a.edit-text-section,.section-edit a.edit-image-section,.section-edit a.edit-video-section,.section-edit a.hide-button,.add-to-end a,.add-end-btn,.section-edit a.edit-menu-section,.section-edit a.add-new-item,.section-edit a.remove-menu-item{
			background: #333;
			color: #ccc;
			border: 0;
			text-transform: uppercase;
	    	letter-spacing: 1px;
	    	font-weight: 500;
	    	font-size: 18px;
	    	margin:0;
	    	padding:0px 14px;
	    	transition: .2s;
	    	cursor: pointer;
	    	height: 45px;
	    	line-height: 45px;
	    	display: inline-block;
		}
		.section-contrl-buttons a:hover,.section-edit a.edit-button-section:hover,.section-edit a.edit-button-section:hover,.section-edit a.edit-text-section:hover,.section-edit a.edit-video-section:hover,.section-edit a.edit-image-section:hover,.section-edit a.hide-button:hover,.add-end-btn:hover,.section-edit a.edit-menu-section:hover,.section-edit a.add-new-item:hover,.section-edit a.remove-menu-item:hover{
			color: #fff;
			background: #666;
			transition: .2s;
		}
		.section-block{
			position: relative;
			border:1px solid transparent;
			cursor: pointer;
		}
		.section-block:hover{
			border:1px solid #eee;
		}
		.section-image{
			margin-bottom: 10px;
		}

			.section-image img{
				width: 100%;
			}
			.section-edit{
				position: absolute;
				z-index: 100;
				left: 0;
				top: 0;
				display: none;
				font-size: 0;
			}
			.section-text:hover .section-edit,.section-blog:hover .section-edit,.section-menu:hover .section-edit,.image-block:hover .section-edit{
				display: block;
			}
		.section-text{			
			padding:10px 10px 0 10px;
		}
		.text-overlay .section-text{
			padding-left: 40px;
			padding-right: 40px;
		}
		.section-text h1{
			font-size: 28px;
			line-height: 1.2;
			font-weight: 400;
			margin:0;
			margin-bottom: 10px;
			margin-top: 10px;
			word-wrap:break-word;
		}
		.column-left .section-text,.column-right .section-text{
			padding-top: 5px;
		}
		.column-left .text-overlay .section-text,.column-right .text-overlay .section-text{
			padding-left: 20px;
			padding-right: 20px;
		}
		.column-left .section-text h1,.column-right .section-text h1{
			font-size: 24px;
			word-wrap:break-word;
			margin-bottom: 5px;
		}
		.section-blog{
			padding: 10px;
		}
		.section-text h4{
			margin: 0;
		    margin-bottom: 50px;
		    text-align: center;
		    font-size: 14px;
		    line-height: 24px;
		    word-wrap: break-word;
		    font-weight: 400;
		}
		.section-text h6,.section-blog h6 {
		    font-size: 16px;
		    font-weight: 400;
		    line-height: 1.2em;
		    margin: 0;
		    margin-bottom: 10px;
		    word-wrap: break-word;
		}
		.catelog-title {
		    font-weight: 400;
		    font-size: 16px;
		    margin-bottom: 0px;
		    line-height: 1.2;
		    margin-top: 0;
		    text-align: center;
		}
		.section-blog h6{
			height: 56px;
			overflow: hidden;
			margin-top: 20px;
		}
		.section-blog-btn{
			margin-bottom: 20px;
		}
		.section-text h5{
		    font-size: 16px;
		    font-weight: 400;
		    line-height: 1.2em;
		    margin: 0;
		    margin-bottom: 10px;
		    word-wrap: break-word;
		}
		.section-blog h5 {
			font-size: 14px;
		    font-weight: 400;
		    line-height: 1.2em;
		    margin: 0;
		    margin-bottom: 10px;
		    word-wrap: break-word;
		}
		.column-left .col-sm-4,.column-right .col-sm-4{
			width: 100%;
		}
		.column-left .section-text h4,.column-right .section-text h4{
			font-size: 16px;
			font-weight: 400;
			word-wrap:break-word;
			margin-bottom: 5px;
		}
		.column-left .section-text h6,.column-right .section-text h6{
			font-size: 16px;
			font-weight: 400;
			word-wrap:break-word;
			margin-bottom: 5px;
		}
		.section-text h3,.section-blog p{
			font-size:14px;
			font-weight: 300;
			line-height: 24px;
			margin-top: 0;
		}
		.section-blog p{
			margin-bottom:20px;
		}
		.column-left .section-text h3.edit-content,.column-right .section-text h3.edit-content{
			font-size: 14px;
			word-wrap:break-word;
		}
		.column-left .col-sm-6,.column-right .col-sm-6{
			width: 100%;
			float: none;
		}
		.section-button{			
			padding:10px;
		}
		.menu-text{
			padding:10px;
			display: block;
			font-size: 16px;
		}
		.text-overlay .section-button{
			padding: 20px 40px;
		}
		.column-left .section-button,.column-right .section-button{
			padding:5px 10px;
		}
		.column-left .text-overlay .section-button,.column-right .text-overlay .section-button{
			padding:5px 20px;
		}
		.column-left .section-button a.button-text,.column-right .section-button a.button-text{
			padding:5px 10px;
			font-size: 12px;
		}
			.section-button a,.section-blog-btn{
				color: #333;
			    font-size: 12px;
			    text-align: center;
			    padding: 9px 22px;
			    display: inline-block;
    			background: #acd8d9;
    			color: #333333;
    			font-weight: 500;
			}
			.section-button:hover .section-edit{
				display: block;
			}
			.blog-thumb-img{
				position: relative;
			    width: 100%;
			    height: 0;
			    overflow: hidden;
			    padding-bottom: 57%;
			    display: block;
			}
			.section-blog a img{
				width: 100%;
			    object-fit: cover;
			    position: absolute;
			    height: 100%;
			}
			.section-blog .row>div.col-sm-6 p,.section-blog .row>div.col-sm-4 p{
				height: 72px;
				overflow: hidden;
			}
			.section-blog .row>div.col-sm-12 p{
				height: 48px;
				overflow: hidden;
			}
			.section-blog .row>div{
				margin-bottom: 20px;
			}
		.popup-setting{
			background: #f6f6f6;
			border-radius: 8px;
			width: 280px;
			box-shadow: 0 0px 60px rgba(0,0,0,.3);
			display: none;
			z-index: 99;
		}
			.text-editor{
				background: #fff;
				border:1px solid #333;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 999;
				display: none;
				box-shadow: 0 0px 60px rgba(0,0,0,.3);
			}
				.text-editor>p{
					position: absolute;
				    background: #333;
				    width: 100%;
				    left: -1px;
				    margin-bottom: 0;
				}

					.text-editor strong{
						position: absolute;
						width: 2px;
						height: 45px;
						display: block;
						right: -2px;
						top: 0;
						background: #333;
					}
					.text-editor.active>p{
						height: 45px!important;
						top: -45px!important;
					}
					.text-editor.active>p>strong{
						height: 45px!important;
					}
					.text-editor p a{
						color: #ccc;
						padding:0px 15px;
						line-height: 45px;
						height: 45px;
						display: inline-block;
						font-size: 18px;
					}
					.text-editor p a:hover,.text-editor p a:focus,.text-editor p a:active{
						background: #797979;
					}
					.addlink-box{
						position: fixed;
						left: 50%;
						top: 40%;
						background: #f6f6f6;
						box-shadow: 0 0px 60px rgba(0,0,0,.3);
						width: 480px;
						font-style: normal;
						transform: translate(-50%,-50%);
						border-radius: 8px;
						display: none;
					}
						.addlink-box h4,.column-left .section-text .addlink-box h4,.column-right .section-text .addlink-box h4{
							color: #333;
						    font-size: 14px;
						    border-radius: 0;
						    text-transform: uppercase;
						    letter-spacing: 1px;
						    text-align: center;
						    margin: 15px 0;
						    font-weight: 500;
						    margin-bottom: 20px;
						}
						.creatlink{
							font-size: 12px;
							padding-left: 10px;
							outline: none;
							width: 420px;
							height: 45px;
							line-height: 45px;
	                        border: 0;
							background: #fff;
							box-shadow: none;
							margin-bottom: 30px;
							margin-left: 30px;
							margin-right: 30px;
						}
						.addlink-butons{
							border-top: 1px solid #eee;
						}
							.addlink-button-cancel{
								display: block;
								width: 50%;
							    height: 48px;
							    float: left;
							    cursor: pointer;
							    text-align: center;
							    line-height: 48px;
							    border-bottom-left-radius: 10px;
							    border-bottom-right-radius: 10px;
							    text-transform: uppercase;
							    letter-spacing: 1px;
							    font-size: 12px;
							    font-weight: 600;
							    outline: none;
							    transition: .2s;
							}

							.insertlink{
								display: block;
								width: 50%;
							    height: 48px;
							    float: left;
							    cursor: pointer;
							    text-align: center;
							    line-height: 48px;
							    border-left: 1px solid #eee;
							    border-bottom-right-radius: 10px;
							    text-transform: uppercase;
							    letter-spacing: 1px;
							    font-size: 12px;
							    font-weight: 600;
							    outline: none;
							    transition: .2s;
							}
					.text-editor p a.text-editor-apply,.text-editor p a.text-editor-cancel{
						text-transform: uppercase;
					    letter-spacing: 1px;
					    font-weight: 500;
					    font-size: 12px;
					}
					.text-editor p a.text-editor-cancel{
						font-size: 18px;
					}
					.text-editor p a.text-editor-apply{
						display: none;
					}
				.text-editor iframe{
					border:0;
					width: 100%;
				}
			.popup-header h4{
				color: #333;
			    font-size: 14px;
			    border-radius: 0;
			    text-transform: uppercase;
			    letter-spacing: 1px;
			    text-align: center;
			    margin:15px 0;
			    cursor: move;
			    user-select: none;

			}
			.popup-body{
				padding:0 20px;
			}
			.change-image{
				margin-bottom: 20px;
				position: relative;
			}
				.change-image a.img-thumbnail{
					display: block;
					position: relative;
					user-select: none;
					padding:0;
					border:0;
					width: 240px;
					height: 240px;
					text-align: center;
				}
				.change-image a img{
					height: 100%;
					user-select: none;
					width: 100%;
					object-fit: contain;
				}
				.edit-wrap{
					background: rgba(0,0,0,.8);
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}
					.edit-wrap strong{
						position: absolute;
					    left: 50%;
					    top: 50%;
					    transform: translate(-50%, -50%);
					    width: 100%;
					    height: 30px;
					    color: #fff;
					    text-align: center;
					    text-transform: uppercase;
					    letter-spacing: 1px;
					    font-weight: 500;
					    user-select: none;
					}
			.form-check{
				position: relative;
				margin-bottom: 20px;
				cursor: pointer;
			}
				.check-btn{
					display: inline-block;
					width: 18px;
					height: 18px;
					padding:2px;
					border:1px solid #e0e0e0;
					position: absolute;
					left: 0;
					top: 0;
				}
				.check-btn.active{
					border-color: #333;
				}
					.check-btn b{
						display: none;
						width: 12px;
						height: 12px;
						background: #333;
					}
					.check-btn.active b{
						display: block;
					}
				.check-label{
					text-transform: uppercase;
				    letter-spacing: 1px;
				    font-weight: 500;
				    font-size: 12px;
				    color: #333;
				    margin-bottom: 8px;
				    user-select: none;
				    font-style: normal;
				    margin-left: 15px;
				}

			.popup-tab{
				margin:0 -20px;
				height: 38px;
			}
				.popup-tab span{
					display: block;
					width: 50%;
					height: 38px;
					line-height: 38px;
					border-bottom: 1px solid #eee;
					text-align: center;
					float: left;
					text-transform: uppercase;
				    letter-spacing: 1px;
				    font-weight: 500;
				    font-size: 12px;
				    color: #333;
				    cursor: pointer;
				    transition: .2s;
				}
				.popup-tab span:hover,.popup-tab span.active{
					border-color: #333;
					transition: .2s;
				}
			.popup-tab-content{
				padding:20px 0;
				font-size: 13px;
			}
				.popup-tab-content ul{
					margin-bottom: 0;
				}
				.popup-tab-content label{
					margin:0;
					cursor: pointer;
				}
				.popup-tab-content ul>li {
					line-height: 30px;
					position: relative;
					padding-left: 30px;
				}
				.popup-tab-content ul>li i{
					font-style: normal;
					margin-left: 5px;
				}
				.popup-tab-content ul>li>ol>li,.popup-tab-content ul>li>ol>li>ol>li{
					line-height: 22px;
				}
				.popup-tab-content ul li span{
					display: inline-block;
					width: 18px;
					height: 18px;
					padding:2px;
					border:1px solid #e0e0e0;
					position: absolute;
					left: 0;
					top: 4px;
					cursor: pointer;
				}
				.popup-tab-content ul li span.active{
					border-color:#333;
				}
					.popup-tab-content ul li span b{
						display: none;
						width: 12px;
						height: 12px;
						background: #333;
					}
					.popup-tab-content ul li span.active b{
						display: block;
					}
				.popup-tab-content ul li>ol{
					margin-left: 20px;
					display: none;
				}
					.popup-tab-content ul li>ol>li>ol{
						margin-left: 20px;
					}

				.footer-menu-content{
					display: none;
				}

			.popup-setting select{
			    border-radius: 0px;
			    border-color: #eee;
			    box-shadow: none;
			    outline: none;
			    font-size: 12px!important;
			    color: #333;
			    font-weight: 400;
			    height: 32px;
			    line-height: 32px;
			}
			.popup-footer{
				border-top: 1px solid #eee;
				height: 49px;
			}
				.cancel-block,.apply-block,.done-block,.button-popup-block,.apply-blog-block,.menu-popup-block,.apply-video-block{
					width: 50%;
					height: 48px;
					float: left;
				}
					.cancel-block a,.apply-block a,.done-block a,.button-popup-block a,.apply-blog-block a,.menu-popup-block a,.apply-video-block a{
						display: block;
						text-align: center;
						line-height: 48px;
						border-bottom-left-radius: 10px;
						border-bottom-right-radius: 10px;
					    text-transform: uppercase;
					    letter-spacing: 1px;
					    font-size: 12px;
					    font-weight: 500;
					    outline: none;
					    transition: .2s;
					    user-select: none;
					}
					.cancel-block a{
						border-bottom-right-radius:0;
					}
					.apply-block a,.done-block a,.button-popup-block a,.apply-blog-block a,.menu-popup-block a,.apply-video-block a{
						border-left:1px solid #eee;
						border-bottom-left-radius:0;
					}
					.popup-footer a:hover{
						background: #eee;
						transition: .2s;
					}
					.popup-wrap{
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						display: none;
					}
.block-wrap{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 88;
	top: 0;
	left: 0;
	display: none;
	overflow: hidden;
}
#div-image-url,#div-button-url,#div-menu-url{
	width: 208px;
	float: left;
	height: 32px;
	line-height: 32px;
	background: #e4e4e4;
	padding:0 10px;
	color: #666;
	font-size: 12px;
	cursor: pointer;
	overflow: hidden;
}
.clear-input-url,.clear-input-button-url{
	display: block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	background: #e4e4e4;
	cursor: pointer;
	float: left;
}
.popup-link-wrap{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 101;
	top: 0;
	left: 0;
	display: none;
	overflow: hidden;
}
.popup-link-div{
	background: #f6f6f6;
    border-radius: 8px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 0px 60px rgba(0,0,0,.3);
    z-index: 120;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    display: none;
}
.popup-tabs>ul {
	text-align: center;
	padding: 10px 0;
	margin-left: 0;
	margin-bottom: 0;
}
	.popup-tabs>ul>li{
		list-style: none;
		display: inline-block;
		padding:0 10px;
		color: #ccc;
		cursor: pointer;
		transition: .2s;
	}
	.popup-tabs>ul>li:hover{
		color: #333;
		transition: .2s;
	}
		.popup-tabs>ul>li.active{
			color:#333;
		}
		.popup-tabs-content{
			width: 100%;
		}
		.popup-tabs-cell{
			padding:10px;
			display: none;
			width: 100%;
			position: relative;
		}
		.popup-tabs-cell.active{
			display: block;
		}
		.input-wrap{
			width: 420px;
			height: 45px;
			position: absolute;
			left: 10px;
			top: 10px;
			text-align: right;
		}
		.input-wrap span{
			display: inline-block;
			width: 45px;
			height: 45px;
			text-align: center;
			line-height: 45px;
			cursor: pointer;
		}
		.popup-input-form{
			display: inline-block;
			height: 45px;
			line-height: 45px;
			color: #666;
			padding:0 12px;
			border:0;
			width: 100%;
			font-size: 14px;
			margin-bottom: 0px;
			border-radius: 0;
		}
		.popup-tabs-cell ul.dropdown-menu{
			border:0;
			background: #fff;
			border-radius: 0;
			box-shadow: 0 6px 15px rgba(0,0,0,.1);
			padding:0;
			width: 520px;
			max-height: 190px;
    		overflow-x: hidden;
    		overflow-y: auto;
		}
			.popup-tabs-cell ul.dropdown-menu>li>a{
				padding:10px 12px;
				font-size: 13px;
				transition: .2s;
			}
			.popup-tabs-cell ul.dropdown-menu>li>a:hover{
				background: #f6f6f6;
				transition: .2s;
				color: #333;
			}
.vertical-center{
	display: flex;
    flex-direction: row;
}
.vertical-center > [class^="col-"],
.vertical-center > [class*=" col-"] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.align-left > [class^="col-"],
.align-left > [class*=" col-"] {
  display: flex;
  align-items: center;
  justify-content: left;
}

.column-left .vertical-center,.column-right .vertical-center{
	display: block;
}
.column-left .vertical-center > [class^="col-"],.column-left .vertical-center > [class*=" col-"],.column-right .vertical-center > [class^="col-"],.column-right .vertical-center > [class*=" col-"] {
  display: block;
}
.menu-text {
    padding: 0px;
    display: block;
    font-size: 14px;
    line-height: 33px;
}
.menu-style{
	padding:5px 10px;
	transition: .2s;
}
.menu-style:hover{
	background: #e0e0e0;
	transition: .2s;
}
.menu-style{
	background: #f0f0f0;
}
.menu-style2{
	padding:5px 10px;
	transition: .2s;
	border-bottom: 1px solid #eee;
}
.menu-style2:hover{
	border-bottom: 1px solid #ccc;
	transition: .2s;
}
.video-wrap{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,.8);
	z-index: 999;
	display: none;
}
.video-box{
	width: 900px;
	margin:0 auto;
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/*section image with text overlay*/
.image-block{
	position: relative;
}
	.text-overlay{
		position: absolute;
		left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);
	    width: 100%;
	    z-index: 99;
	}
	.image-wrap{
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(0,0,0,.3);
		top: 0;
		left: 0;
	}
.gallery-image{
	position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 75%;
}

.gallery-image img,.test-image img {
    width: 100%;
    object-fit: cover;
    position: absolute;
    height: 100%;
}
.video-image{
	position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}

.video-image img{
    width: 100%;
    object-fit: cover;
    position: absolute;
    height: 100%;
}
.test-image{
	position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 100%;
}
.radius-image{
	width: 60%;
	margin:0 auto;
	margin-bottom: 10px;
}
.radius-image img{
	border-radius: 500px;
}
.play-button{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border-radius: 80px;
    background: #333;
    text-align: center;
    line-height: 95px;
    cursor: pointer;
}
.play-button-small{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: #333;
    text-align: center;
    line-height: 72px;
    cursor: pointer;
}
.play-button-small i{
	font-size: 30px;
	color: #fff;
}
.play-button i{
	color: #fff;
	font-size: 36px;
}



/*modal*/
.modal-backdrop{
	background: #fff;
}
.modal-backdrop.in{
	opacity: 0;
}
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
.modal-content{
	border:0;
	border-radius:8px;
	box-shadow: 0 0px 60px rgba(0,0,0,.3);
	min-width: 355px;
	background: #f6f6f6;
}
.modal-header {
	color:#333;
	font-size:14px;
	border-radius:5px 5px 0 0;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	border:0;
	padding-bottom: 12px;
	border-radius: 0;
	border-bottom: 1px solid #eee;
}
.modal-header h4.modal-title{
	font-size: 14px;
	font-weight: 500;
}
.modal-body{
	padding:20px 30px 10px 30px;
}
.modal-footer {
    padding: 0px;
    text-align: center;
    border-top: 1px solid #eee;
    margin-top: 0px;
}
.modal-footer button {
    border: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    background: #f6f6f6;
    font-weight: 600;
    padding: 15px 30px;
    outline: none;
    cursor: pointer;
    width: 100%;
    transition: .2s;
}
.modal-footer button:hover{
	background: #eee;
	transition: .2s;
}
.image-manage-title{
	font-size: 14px;
}
.image-manage-body{
	padding:0;
}
.image-manage-head{
	border-bottom: 1px solid #eee;
	height: 40px;
}
.image-manage-head h4{
	font-size: 14px;
	font-weight: normal;
	line-height: 40px;
	margin:0;
	padding-left: 30px;
}
.image-manage-btn{
	border:0;
	border-right:1px solid #eee;
	background: #fff;
	padding:10px 0px;
	display: block;
	float: left;
	width: 36px;
	text-align: center;
	color: #333;
	transition: .3s;
}
.folder-manage{
	position: relative;
}
.folder-manage-panel,.image-manage-panel{
	padding:20px;
	padding-bottom: 0px;
}
.folder-manage-panel h6,.image-manage-panel h6{
	text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 12px;
    color: #000;
    display: inline-block;
    margin:0;
    line-height: 14px;
}
.folder-manage-panel button,.image-manage-panel a,.image-manage-panel button{
	font-size: 16px;
    float: right;
    color: #000;
    margin-left: 20px;
    background: transparent;
    border: 0;
    outline: none;
}
#button-create{
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: 600;
}
.cancel-add-folder{
	font-size: 10px;
	margin-left: 5px;
}
.folder-manage-panel a:hover,.image-manage-panel a:hover,.folder-manage-panel a:focus,.image-manage-panel a:focus.folder-manage-panel a:active,.image-manage-panel a:active.folder-manage-panel a:visited,.image-manage-panel a:visited{
	text-decoration: none;
}
.add-folder{
	display: none;
	position: absolute;
	top: -6px;
    right: 40px;
    background: #fff;
}
.add-folder .input-group input.form-control{
	height: 30px;
	font-size: 12px;
}
.add-folder .input-group span.input-group-prepend{
	height: 30px;
	font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    line-height: 30px;
    padding-top: 0px;
    color: #000;
}
.folder-manage-list{
	border-bottom: 1px solid #eee;
	padding:10px 30px;
	height: 120px;
	width: 100%;
	position: relative;
	overflow-x:auto;
	overflow-y:hidden;  
}
.folder-manage-list ul{
	margin:0;
	display: block;
	height: 89px;
}
.folder-manage-list ul li{
	display: block;
	float: left;
	margin-right: 20px;
}
.folder-manage-list ul li a{
	display: block;
	width: 80px;
	height: auto;
	text-align: center;
	font-size: 13px;
	line-height: 18px;
	color: #333;
	padding: 8px 0;
}


.folder-manage-list ul li a>span{
	font-size: 45px;
}
.folder-manage-list ul li a p{
	margin-bottom: 0;
	font-size: 13px;
	line-height: 18px;
	max-height: 36px;
	display: block;
	word-break: break-all;
}
.folder-manage-list ul li a:hover{
	background:#eee;
	text-decoration: none;
}
.folder-manage-list ul li a.folder-active{
	background:#eee;
	text-decoration: none;
}
#scroll-bar{
	width: 100%;
	height: 3px;
	background: transparent;
	position: absolute;
	bottom: 0px;
	left: 0;
}
#scrollbar-handle{
	position: absolute;
	width: 3px;
	height: 3px;
	background: #ddd;
	left: 0;
	bottom: 0;
	cursor: e-resize;
}
.image-manage-btn:hover{
	color: #333;
	background: #eee;
    transition: .3s;
}
.image-manage-head .image-manage-search{
	border:0;
}
.image-manage-head .image-manage-search .input-group-prepend{
	font-size: 18px;
	padding-top: 10px;
	color: #ccc;
}
.input-group .image-manage-searchbar{
	border:0;
	box-shadow: none;
	line-height: 39px;
	height: 39px;
}
.image-manage-panel .form-check{
	display: inline-block;
	margin-left: 15px;
	font-size: 13px;
}
.image-manage-panel .form-check label{
	margin-left: 5px;
	letter-spacing: 0;
	text-transform: capitalize;
}
#select-all{
	position: relative;

}
.image-manage-panel h6 span{
	font-size: 14px;
	margin-left: 15px;
	cursor: pointer;
}
.close-searchbar{
	display: none;
}
.image-manage-search-btn{
	font-size: 14px;
	background: #fff;
	border:0;
	color: #333;
	padding:0 15px;
}
.image-manage-panel{
	margin-bottom: 10px;
}
.search-image-div{
	position: absolute;
	top: -6px;
    right: 85px;
    background: #fff;
}
.search-image-div .input-group input.form-control{
	height: 30px;
	font-size: 12px;
	padding-left: 0;
}
.search-image-div .input-group span.input-group-prepend{
	height: 30px;
	font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    line-height: 30px;
    padding-top: 8px;
}
.search-image-div .input-group span.search-image-icon{
	color: #ccc;
	cursor: inherit;
}
.image-manage-list{
	padding:20px;
	padding-bottom: 0;
	padding-top: 5px;
	height: 280px;
	overflow: auto;
}
.image-manage-list label{
	font-size: 12px;
	line-height: 18px;
}
.image-manage-list ul{
	margin:0 -10px;
}
.image-manage-list ul li{
	display: block;
	float: left;
	font-size: 13px;
	padding:6px;
	width: 14.2%;
	text-align: center;
}
.image-manage-list ul li img{
	width: 100%;
	border:2px solid #fff;
}
.image-manage-list ul li .image-cell label{
	display: none;
}
.image-manage-list-change ul li{
	float: none;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid #eee;
	overflow: hidden;
}
.image-manage-list-change ul li img{
	width: 50px;
}
.image-cell{
	position: relative;
	margin-bottom: 5px;
	cursor: pointer;
}
.image-manage-list-change ul li .image-cell{
	margin:0;
}
.image-manage-list ul li img.image-cell-border,.image-manage-list-change ul li img.image-cell-border{
	border-color: #333;
}
.image-cell a.thumbnail{
	border-radius: 0;
	border:0;
	padding:0;
	margin-bottom: 0;
	display: inline-block;
}
.image-cover{
	width: 100%;
	position: absolute;
	top: 0;
	height: 0;
	padding-bottom: 100%;
	background: rgba(0,0,0,.6);
	display: none;
}
.image-manage-list-change ul li .image-cover{
	height: 54px;
	background: transparent;
	padding-bottom: 0;
}
.image-cover p{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.image-cover p a{
	color: #fff;
	padding:8px;
	font-size: 16px;
	line-height: 36px;
}
.image-cover p a:hover,.image-cover p a:focus,.image-cover p a:active,.image-cover p a:visited{
	text-decoration: none;
}
.image-manage-list-change ul li .image-cover p a{
	color: #333;
}
.image-manage-list-change ul li .image-cover p{
	position: relative;
	text-align: right;
}
.image-manage-list-change ul li .image-cell label{
	display: inline-block;
	margin-left: 15px;
	position: absolute;
	top: 15px;
}
.image-manage-list ul li p{
	margin:0;
	font-size: 13px;
	line-height: 18px;
	height: 36px;
	display: block;
	word-break: break-all;
}
.image-manage-list-change ul li>p{
	display: none;
}
.search-image-div .input-group span.go-search-image{
	padding-top: 1px;
}






@media (max-width: 414px){
	.section-contrl-buttons{
		display: none;
	}
	.add-end{
		display: none!important;
	}
	.section-text:hover .section-edit{
		display: none;
	}
	.image-block:hover .section-edit{
		display: none;
	}
	.section-block:hover{
		border:1px solid transparent;
	}
	.section-text h1{
		font-size: 24px;
		margin-bottom: 0;
	}
	.section-text h4{
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 0;
	}
	.section-text p{
		font-size: 14px;
	}
	.vertical-center{
		display: block;
	}
	.vertical-center > [class^="col-"],
	.vertical-center > [class*=" col-"] {
	  display: block; 
	}

}