

.blind-container{ position:fixed; top:0; left:0; width:100%; height:70px;   background:#eee; font-size:14px;  z-index:5000}
.blind-panel-wrapper { max-width:900px; margin:auto; position:relative;  }

.blind-slide-panel-wrap{ display:none; font-size:14px;position:absolute; width:100%; box-sizing:border-box; background:#f6f6f6; padding:15px;
	top:70px; max-height: calc(100vh - 70px); padding-top: 35px; overflow: auto}

.blind-container .blind-title{ color:#000 !important; padding-bottom: 5px;     font-weight: bold;}
.blind-container .blind-panel {
	padding:10px 15px;
	 
	display:-webkit-flex;  -webkit-align-items:center; -webkit-justify-content:space-between; -webkit-flex-direction:row;
	display: flex; align-items:center; justify-content:space-between; flex-direction:row;
	}

.blind-panel .blind-button	{ line-height:32px; padding:0 10px; height:32px;   background:#000 !important; color:#fff !important; cursor:pointer}
.blind-panel .blind-item.color{ display:none}

.blind-container .blind-select{ display: -webkit-box;  -webkit-box-align: center; -webkit-box-pack:justify;  -webkit-box-orient: horizontal; 
	display:-webkit-flex;  -webkit-align-items:center; -webkit-justify-content:space-between; -webkit-flex-direction:row;
	display: flex; align-items:center; justify-content:space-between; flex-direction:row;}
.blind-container .blind-set{ display: inline-block; background:#fff ; margin-right:5px; border:1px solid #000 ;
	min-width:30px; height:30px; line-height:30px; text-align:center; cursor:pointer; color:#000; margin-bottom:15px; position:relative}
.blind-container .blind-set.is-active{ background: #000; color: #fff;}

.blind-container .fontsize-set.small{ font-size:1em;}
.blind-container .fontsize-set.medium{ font-size:1.3em}
.blind-container .fontsize-set.large{ font-size:1.6em;}

.blind-slide-panel .blind-item{ padding:5px 0; border: 1px solid #000; padding: 10px;margin-bottom: 10px;}
.blind-slide-panel .blind-set{ padding:5px 10px; height:auto}
.blind-slide-panel .blind-select{ 
	-webkit-box-align: start; -webkit-align-items:flex-start;  align-items:flex-start; 
	-webkit-box-pack:start; -webkit-justify-content:flex-start; justify-content:flex-start;}
.blind-slide-panel .blind-item.color .blind-select,
.blind-slide-panel .blind-item.kerning .blind-select
	{ -webkit-box-orient: vertical; -webkit-flex-direction:column; flex-direction:column;}
.blind-slide-panel .blind-set{  margin-bottom:10px}


.blind-container .color-set { font-size:16px; font-weight:bold}
.blind-container .color-set.BW{ background:#fff; color: #000;}
.blind-container .color-set.WB{ background:#000  ; color:#fff  }
.blind-container .color-set.BB{ background: #9dd1ff  ; color: #063462  ;}
.blind-container .color-set.GB{ background: #3b2716 ; color: #a9dd38  ;}
.blind-container .color-set.is-active{}

.blind-container .kerning-set.small{ letter-spacing:normal}
.blind-container .kerning-set.medium{ letter-spacing:2px}
.blind-container .kerning-set.large{ letter-spacing:5px}

.blind-container .blind-slide-close{ height:22px; width:22px; position:absolute; top:5px; right:15px;}

.blind-container .blind-slide-close:before,
.blind-container .blind-slide-close:after{ content:""; display:block; position:absolute; height:2px; background:red; !important; width:100%;top: 50%; cursor:pointer}

.blind-container .blind-slide-close:after{ width:100%; -webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.blind-container .blind-slide-close:before{ width:100%; -webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
	



/*320 FOR LIBRARY ↓↓↓*/

.blind-container{}





@media only screen and (min-width: 480px){
	.blind-container .blind-item.color{ display:block}
	.blind-slide-panel .blind-item.kerning .blind-select
		{ -webkit-box-orient: horizontal; -webkit-flex-direction:row; flex-direction:row;}
		
}

@media only screen and (min-width: 768px){
	.blind-slide-panel-wrap{ display:none; font-size:16px;}
	
	.blind-slide-panel .blind-item.color .blind-select
		{ -webkit-box-orient: horizontal; -webkit-flex-direction:row; flex-direction:row;}
	.blind-slide-panel .blind-item.color .blind-select{}	
	
}



/*1024 FOR LIBRARY ↓↓↓*/

@media only screen and (min-width: 1024px){

}


@media only screen and (min-width: 1240px){
	

}

@media only screen and (min-width: 1320px){

}

@media only screen and (min-width: 1540px){
	
}








