@charset "utf-8";
h1{color:#2e2c29;font-size:38px;text-align:center;padding:15px 0 7px 0;border-bottom:1px solid #fff3d6;}

#calc_cov{
	width:100%;margin:0 auto;
    display:grid;
    grid-gap:2%;/*Отступ между ячейками*/
    grid-template-columns:repeat(14,1fr); /*задаёт количество столбцов "колонок"*/
    grid-template-areas:"f f f i i i i i i i i r r r";
	
	font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;
}

#div_1{grid-area:i;}
#div_2{grid-area:f;background:#f9e8d7;padding:0 17px;}
#div_3{grid-area:r;}

.tf_1{display:table;color:#2e2c29;font-size:18px;font-weight:bold;margin:18px 0 15px 0;}
.tf_1>div{width:16px;height:16px;color:#fff;font-size:11px;font-weight:bold;text-align:center;background:#e4b43f;border-radius:50%;margin:4px 0 0 7px;float:right;position:relative;cursor:pointer;}
.tf_1>div div,.tf_1>div div:after{position:absolute;z-index:2;left:50%;transform:translateX(-50%);}
.tf_1>div div{width:204px;color:#fff;font-size:13px;padding:4px;background:#2e2c29;border-radius:7px;bottom:calc(100% + 9px);display:none;}
.tf_1>div div:after{content:'';display:block;border:12px solid transparent;border-top:12px solid #2e2c29;}

.tf_1>div:hover div{display:block;}

/*img Lst*/
#div_1 .tf_1{margin:18px auto;}

#cvet{display:flex;}
#cvet div{width:10%;height:23px;cursor:pointer;position:relative;}
#cvet div:nth-child(1){background:#e5f0f2;border-radius:30px 0 0 30px;}
#cvet div:nth-child(2){background:#e0f3f7;}
#cvet div:nth-child(3){background:#d7f2f7;}
#cvet div:nth-child(4),#cvet div:nth-child(5){background:#d4f4fa;}
#cvet div:nth-child(5)~div{background:#efeeed;}
#cvet div:last-child{border-radius:0 30px 30px 0;}
.cvet_a{background:#53bed3!important;}

#cvet p{width:100%;color:#ab9f9e;font-size:13px;text-align:center;margin:0;position:absolute;top:calc(100% + 3px);left:0;}

.cv_1{filter:saturate(50%);}
.cv_2{filter:saturate(75%);}
.cv_3{}
.cv_4{filter:saturate(125%);}
.cv_5{filter:saturate(150%);}
.cv_6{filter:grayscale(100%);}
.cv_7{filter:grayscale(100%) sepia(10%);}
.cv_8{filter:grayscale(100%) sepia(50%) hue-rotate(340deg);}
.cv_9{filter:grayscale(100%) sepia(65%) hue-rotate(320deg);}
.cv_10{filter:grayscale(100%) sepia(60%) hue-rotate(330deg);}


#Grosimg{border:1px solid #eee;margin-top:55px;position:relative;overflow:hidden;}
#Grosimg>img{width:100%;display:block;}
#gros{position:relative;z-index:2;}
#Grosimg>img+img{position:absolute;z-index:1;left:0;bottom:0;}
.visible{visibility:hidden;}
.none{display:none;}

#crop_bg{position:absolute;top:0;bottom:0;left:0;right:0;margin:0 auto;overflow:hidden;}
#crop_bg img{display:block;transform-origin:50% 50%;}

#txr{width:100%;height:100%;position:absolute;top:0;left:0;}

#wth,#hdt{color:#998b8a;font-size:14px;}
#wth{float:left;}
#hdt{float:right;}

#oper{display:flex;position:absolute;z-index:3;top:30px;right:0;}
#oper>div{width:50px;height:50px;background:rgba(255,255,255,.9);box-shadow:0 0 3px #d2ccbb;border-radius:50%;margin:0 17px;position:relative;cursor:pointer;user-select:none;}
#oper>div img{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
#oper>div+div img{transform:rotate(90deg);}
#oper>div div{width:100px;color:#fff;font-size:12px;font-weight:bold;text-align:center;line-height:1;text-shadow:0 0 10px #000;position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);display:none;}
#oper>div:hover div{display:block;}
.opr_a{background:#fff5dc!important;}

#bg_fres,#sz_cov{width:100%;height:100%;position:absolute;z-index:2;top:0;left:0;}
#sz_cov{background:rgba(0,0,0,.5);}

/*razm*/
#razm{overflow:hidden;cursor:move;user-select:none;-webkit-user-select:none;-moz-user-select:none;}
#razm:after{content:'+';display:block;color:#fff;font-size:17px;font-weight:bold;position:absolute;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
#razm img{display:block;pointer-events:none;}

/*line*/
#razm div{background:#f1ddad;position:absolute;}
#razm img+div{width:100%;height:4px;top:0;left:0;cursor:ns-resize;}
#razm img+div+div{width:4px;height:100%;top:0;right:0;cursor:ew-resize;}
#razm img+div+div+div{width:100%;height:4px;left:0;bottom:0;cursor:ns-resize;}
#razm img+div+div+div+div{width:4px;height:100%;left:0;top:0;cursor:ew-resize;}

/*dot*/
#razm div:nth-child(5)~div{width:11px;height:11px;background:#ecd190;}
#razm div:nth-child(6){top:0;left:0;cursor:nwse-resize;}
#razm div:nth-child(7){top:0;right:0;cursor:nesw-resize;}
#razm div:nth-child(8){bottom:0;right:0;cursor:nwse-resize;}
#razm div:nth-child(9){bottom:0;left:0;cursor:nesw-resize;}
/**/

.tf_2{color:#171414;font-size:17px;font-weight:bold;text-align:center;margin-top:40px;}

#list_img{display:flex;justify-content:space-between;}
#list_img img{width:14%;display:block;outline:2px solid #fbf9f3;cursor:pointer;}
.crp_a{outline-color:#e4b43f!important;}
/**/

/*fltr*/
.swich{display:flex;padding:3px;border:1px solid #ddd;border-radius:6px;}
.swich div{width:50%;color:#333;font-size:16px;text-align:center;border-radius:4px;padding:9px 0;cursor:pointer;}
.sw_a{color:#fff!important;background:#e4b43f;}

#size{width:100%;height:35px;padding:0 9px;border:1px solid #ddd;border-radius:6px;cursor:pointer;}
#sz_inp{display:flex;justify-content:space-between;margin-top:25px;display:none;}
#sz_inp div{width:44%;}
#sz_inp p{color:#736e6e;font-size:13px;margin:0 0 4px 0;}
#sz_inp input{width:100%;height:38px;color:#736e6e;font-size:14px;text-align:center;border:1px solid #ddd;border-radius:6px;outline:none;}

#in_size{display:table;color:#e4b43f;font-size:14px;border-bottom:1px dashed #e4b43f;margin:0;}
#in_size:hover{border-color:#fbf9f3;cursor:pointer;}

.materi div{width:22%;height:97px;margin:0 11% 13px 0;float:left;cursor:pointer;}
.materi img{width:100%;border:2px solid #e2dede;border-radius:50%;}
.materi p{color:#151513;font-size:13px;line-height:11px;text-align:center;margin:4px 0 0 0;}
.mater_a img{border-color:#e4b43f;}

.materi+.materi{display:none;}
/**/

/*result*/
#div_3>p:first-child{color:#201f1c;font-size:32px;font-weight:bold;}
#result p{color:#6f6e7d;font-size:15px;margin:8px 0;}

#itog{color:#2e2c29;font-size:27px;font-weight:bold;}
#itog b{color:#e4b43f;}

#by,#save{display:block;font-size:17px;font-weight:bold;text-align:center;padding:9px;border-radius:5px;margin:7px 0;transition:.3s ease;}
#by{color:#1b1e35;background:#fae3aa;}
#save{color:#bc922a;border:2px solid #fae3aa;text-decoration:none;}

#by:hover,#save:hover{background:#fff2d1;cursor:pointer;}

@media screen and (max-width:1135px){
#calc_cov{grid-template-areas:"f f f f i i i i i i i i i i"
"r r r r r r r r r r r r r r";}

#result,#itog_kn{width:50%;float:left;}
}

@media screen and (max-width:890px){
#calc_cov{display:block;}

.materi{display:flex;flex-wrap:wrap;justify-content:space-between;}
.materi div{width:45px;height:auto;margin:0 9px 9px 0;float:none;}

#itog_kn{top:unset;bottom:0;transform:none;}
}
@media screen and (max-width:575px){
#oper{display:flex;position:absolute;top:5px;right:unset;left:50%;transform:translateX(-50%);}
#oper>div{width:40px;height:40px;}

#cvet{flex-wrap:wrap;justify-content:center;}
#cvet div{width:45px;height:45px;border-radius:50%!important;margin:0 25px 40px 25px;}

#Grosimg{margin-top:20px;}

#result p{font-size:14px;margin:4px 0;}
#result,#itog_kn{width:100%;float:none;}
}
@media screen and (max-width:490px){
#cvet{flex-wrap:wrap;justify-content:center;}
#cvet div{border-radius:50%!important;margin:0 17px 40px 17px;}

#list_img{overflow:auto;}
#list_img img{width:110px;margin-right:9px;}

#div_3>p:first-child{font-size:27px;margin:20px 0 0 0;}
#itog{font-size:22px;}
}