/****************************  
         µðÆúÆ® Ä®¶ó
***************************/
.df-color {color: #00b8d4; }
.df-bgcolor {background: #00b8d4; }

.df-bordercolor {border-color:#00b8d4;}
.df-bordercolor1 {border: 1px solid ; border-color:#00b8d4;}
.df-bordercolor2 {border: 2px solid ; border-color:#00b8d4;}
.df-bordercolor3 {border: 3px solid; border-color:#00b8d4;}
.df-bordercolor4 {border: 4px solid; border-color:#00b8d4;}

.arrow-warp .arrow.bottom.df-top-bordercolor {border-top-color: #00b8d4;}
.df-bottom-bordercolor {border-bottom-color: #00b8d4;}






.blast-box{position:fixed;width:220px;;top: 120px;right:-220px;color:#3C8137;z-index: 80;transition:0.5s ;}
.blast-box{margin:0 auto;text-align:center; padding:20px 5px; }
.blast-box{border: 1px solid #eeeeee;background-color:rgba(255,255,255, 1);}


.blast-icon {position:absolute;width: 40px;height: 40px;line-height:40px;left:-40px;top:0px;background-color:rgba(0,0,0,.75);;
text-align:center; cursor:pointer;border-top-left-radius: 4px;border-bottom-left-radius: 4px;z-index:90}
.blast-icon i {line-height:40px; font-size:22px;}
text-align:center;font-size:22px;cursor:pointer;border-top-left-radius: 4px;border-bottom-left-radius: 4px;z-index:90}



.blast-box .blast-colors {margin:0 auto;text-align:center;padding:0 10px;  }

.blast-box ul { width:100%; padding:0 ; list-style: none; }
.blast-box ul li { display:inline-block; }
.blast-box ul li { width: 36px; height: 36px;  float: left;  margin: 5px;  margin-bottom: 4px;  cursor: pointer;  transition: .3s; }
.blast-box .blast-color {color:transparent;overflow:hidden;cursor:pointer;}



.blast-box .color {width:100%;overflow:hidden;margin:0 auto; text-align: center;padding:0 0px 0 25px;}

.blast-box h3{margin-top: 0;margin-bottom: 10px; font-size:18px;}


.blast-box .language h3 {margin-top: 0;margin-bottom: 0px; font-size:18px;}
.blast-box .language span.flag1 {padding:0 8px 0 0}
.blast-box .language span.flag2 {padding:0 8px 0 20px}
.blast-box .language img {width:20px;}
.blast-box .language a:hover {color:#ffffff}

.blast-box .blast-custom-colors{clear:both;padding-top:40px}

.blast-box input[name="blastCustomColor"]{margin-top:20px;cursor:pointer;height:30px;width:100px;border:none;
outline:none;background:transparent;padding:0}

.appear-it{right:0}
.flip-it{transform:rotateY(180deg);border-left:none}





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


.blast-box{position:fixed;width:250px;;top: 0px;right:-250px;color:#3C8137;z-index: 80;transition:0.5s }
.blast-box{margin:0 auto;text-align:center; padding:20px 5px;  border: 0px solid #eeeeee;background-color:rgba(0,0,0,.75);}

.blast-icon {position:absolute;width: 35px;height: 35px;line-height:35px;left:-35px;top:0px;background-color:rgba(0,0,0,.75);;
text-align:center;font-size:20px;cursor:pointer;border-top-left-radius: 4px;border-bottom-left-radius: 4px;z-index:90}


.blast-box .blast-frame{position:absolute;z-index: 1000;width:calc(80% - 40px); height:100%; top:0;left:0;
background: #ffffff;text-align:center; text-transform:uppercase;color:#3C8137;padding:50px 5px;  border: 1px solid #eeeeee;}

.blast-box .blast-colors{margin:10px;padding:20px 0 0px 0;}

.blast-box .blast-color {margin:2px;height:35px;width:35px;max-height:35px;max-width:35px;
color:transparent;overflow:hidden;cursor:pointer;border:2px solid white}

.blast-box p {font-size:22px; font-weight:400 ;}


.blast-box .blast-custom-colors{clear:both;padding-top:40px}

.blast-box input[name="blastCustomColor"]{margin-top:20px;cursor:pointer;height:30px;width:100px;border:none;
outline:none;background:transparent;padding:0}

.appear-it{left:0}
.flip-it{transform:rotateY(180deg);border-left:none}

	}