@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght@100;300;500;700;800;900&display=swap');

/* NEW CSS */
body { font-family:'Commissioner', "Arial", "serif"; color:#000; font-size:16px; font-weight:300; background-color:#ffffff; position:relative;}
a { font-family:'Commissioner', "Arial", "serif"; color:#000; font-size:16px; font-weight:300; text-decoration:none; }
a:hover { font-family:'Commissioner', "Arial", "serif"; color:#000; font-size:16px; font-weight:300; text-decoration:none; }

a, img, input, button, textarea, select { outline:none; }
strong { font-weight:700}

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
.clearfix:after { clear:both; content:""; display:block; font-size:0; height:0; visibility:hidden;}

a, .trans { -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; }

#wrapper { position:relative; overflow:hidden;}
.wrapper { width:1254px; margin:auto; position:relative; z-index:3}

.no-scroll {  overflow:hidden; }

.btn { 
	-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; 
	display:inline-block; width: auto; height:54px; padding:0 20px;
	border:2px solid #7226FF; background:#fff; border-radius:20px; 
	text-align:center; font-size:16px; font-weight:500; line-height:54px; color:#7226FF; text-transform:uppercase; cursor:pointer; 
}
button.btn { display:block; width: 100%; line-height: inherit }
.btn:hover, .btn.filled { background:#7226FF; font-size:16px; font-weight:500; color:#fff; }

.btn.small { display:flex; width: auto; height:34px; padding:0 10px; border-radius:10px; align-items: center; text-transform: inherit}

.btn.blue { border:2px solid #0000FF; color:#0000FF;}
.btn.blue:hover,.btn.blue.filled { background: #0000FF; color: #fff}

.btn span { display:block; margin-left: 5px}

.btn span.icon-star { background: url("../images/icon-star.svg"); width: 26px; height: 24px;}
.btn span.icon-cart { background: url("../images/icon-cart.svg"); width: 36px; height: 26px;}



.sidebar { float:left; width:32%; }
.common { float:right; width:66%; }

.sidebar.reverse { float:right; }
.common.reverse { float:left; }

.row { display:flex; flex-direction:row; position:relative; z-index:1; margin:0 -10px}
.row .col { flex-grow:1; position:relative; min-height:1px; padding:0 10px; }

.row .col-12 { width:100%; }
.row .col-11 { width:91.666%; }
.row .col-10 { width:83.333%; }
.row .col-9 { width:75%; }
.row .col-8 { width:66.666%; }
.row .col-7 { width:58.333%; }
.row .col-6 { width:50%; }
.row .col-5 { width:41.333%; }
.row .col-4 { width:33.333%; }
.row .col-3 { width:25%; }
.row .col-2 { width:16.666%; }
.row .col-1 { width:8.333%; }

.scrollbar::-webkit-scrollbar-track {} 
.scrollbar::-webkit-scrollbar { width:10px; } 
.scrollbar::-webkit-scrollbar-thumb { border-radius:10px; box-shadow:inset 0 0 6px rgba(0,0,0,.3); background-color:#d7dfe3; }

.center { text-align:center}

/* HEADER */
.header { position:absolute; top:0; left:0; width:100%; z-index:5; padding:10px 0; box-shadow:0 0 10px rgba(114, 38, 255, 0.5); background:rgba(255,255,255,0.8)}
.header .logo { display:block; float:left; position:relative}
.header .logo a, .header .logo a img { display:block}

.header .menu { position:absolute; left:220px; top:-10px}

.header .menu li { float:left; display:block; list-style-type:none; margin:0 10px; position:relative; }
.header .menu li a { display:flex; height:100px; justify-content:center; align-items:center; font-weight:500; font-size:18px; color:#000 }
.header .menu li a span { padding:5px 15px; display:block; border-radius:15px; border:1px solid transparent;}
.header .menu li a:hover span { border:1px solid #7226FF;}
.header .menu li a.active span { font-size:18px; background:#7226FF; color:#fff }

.header .menu li ul { background:rgba(35, 35, 35, 1); width:220px; position:absolute; top:100%; display:none; }
.header .menu li ul li { float:none; padding:0; margin:0}
.header .menu li ul li a { padding:10px 15px; font-size:15px; color:#fff; display:block; height:auto }
.header .menu li ul li a:hover { background:rgba(255,255,255, .09); font-size:15px;}
.header .menu li ul li a i { float:right; margin-top:7px}

.header .menu li:hover > ul{ display:block}

.header .menu li ul li ul { top:0; left:100%; overflow-y:scroll; max-height:70vh; }
.header .menu li ul li ul::-webkit-scrollbar-track {} 
.header .menu li ul li ul::-webkit-scrollbar { width:8px; } 
.header .menu li ul li ul::-webkit-scrollbar-thumb { box-shadow:inset 0 0 8px #FF6800; background-color:#FF6800; opacity:1 }
.header .menu li ul li ul:hover::-webkit-scrollbar-thumb:hover { opacity:1} 


.header .user, .header .cart { float:right; padding-left:20px; padding-top:25px}


.header .toggle-nav { display:none; float:right; position:relative; z-index:10; width:40px; height:40px; top:0;  }
.header .toggle-nav i { position:absolute; display:block; height:2px; background:#000; width:30px; right:5px; }

.header .toggle-nav i:nth-child(1) { top:10px; }
.header .toggle-nav i:nth-child(2) { top:19px; }
.header .toggle-nav i:nth-child(3) { top:28px; }

.header .toggle-nav.active { border-radius:40px; }
.header .toggle-nav.active i:nth-child(1) { top:19px; -webkit-transform:rotateZ(45deg); -moz-transform:rotateZ(45deg); -o-transform:rotateZ(45deg); transform:rotateZ(45deg); }
.header .toggle-nav.active i:nth-child(2) { background:transparent; }
.header .toggle-nav.active i:nth-child(3) { top:19px; -webkit-transform:rotateZ(-45deg); -moz-transform:rotateZ(-45deg); -o-transform:rotateZ(-45deg); transform:rotateZ(-45deg); }




.menu-mobile { position:fixed; right:-290px; top:0; bottom:0; background:#F8F8F8; z-index:22; width:290px; padding:20px; overflow-y:scroll; visibility:hidden;}
.menu-mobile.active { visibility:visible; right:0;}

.menu-mobile .menu li { border-top:1px solid #ccc; position:relative; list-style-type:none}
.menu-mobile .menu li a { display:inline-block; font-size:18px; padding:5px 36px 5px 0; min-height:36px; position:relative}
.menu-mobile .menu li a:hover, .menu-mobile .menu li a.active { color:#BE0027}
.menu-mobile .menu li .trigger { height:36px; width:36px; display:block; position:absolute; right:0; top:0; background:url("../images/icon-triangle.svg") no-repeat 50% 50%; cursor:pointer}
.menu-mobile .menu li .trigger.active { transform:rotate(180deg); }
.menu-mobile .menu li a.active+ul { display:block}

.menu-mobile .menu li ul { display:none}
.menu-mobile .menu li ul li { padding-left:18px;}
.menu-mobile .menu li ul li:before { position:absolute; left:4px; top:17px; width:3px; height:3px; background:#000; border-radius:5px; content:'' }

.menu-mobile .menu li i { display:none}

.menu-mobile .social { border-top:1px solid #ccc; padding:20px 0; text-align:center}
.menu-mobile .social li { list-style-type:none; display:inline-block; margin:0 10px}

.web-page { left:0; position:relative;}
.web-page.move-left { position:relative; left:-290px}
.web-page.move-right { position:relative; left:290px}
.web-page.move-right:before, .web-page.move-left:before {  content:''; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.3); z-index:10}










.main { position:relative; z-index:4; padding-top:100px }

.first-screen { position:relative; padding-top:240px; background:#f2f2f2}

.first-screen .slogan { padding-bottom:120px; color:#7226FF}
.first-screen .slogan h2 { font-size:48px; font-weight:700; line-height:1; z-index:3; color:#160078}
.first-screen .slogan .grad { padding-bottom:10px; background:-webkit- linear-gradient(0deg, #160078 0%, #7226FF 100%); background:linear-gradient(0deg, #160078 0%, #7226FF 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}

.first-screen .slogan p { font-size:36px; line-height:1; font-weight:700; }
.first-screen .slogan p span { color:#160078}

.first-screen .slogan ul { font-size:24px; line-height:1; font-weight:500; padding:40px 20px }
.first-screen .slogan ul li {}

.first-screen .video { position:absolute; right:0; margin-top:-100px; top:0; padding-right:60px; width:450px; }
.first-screen .video a { display:block}
.first-screen .video img { position:relative; z-index:1}
.first-screen .video video { position:relative; z-index:1; width:100%; height:100%; border-radius:390px; overflow:hidden}
.first-screen .video span { position:absolute; background-repeat:no-repeat; background-position:50% 50%; display:block; top:-10%; opacity:0.5; left:-25%}
.first-screen .video span:nth-child(1) { background-image:url("../images/circle-video.svg"); height:648px; width:671px; top:calc(-10% - 65px) }

.first-screen .solution { position:relative; z-index:5; padding-bottom:40px}
.first-screen .solution h3 { color:#7226FF; font-size:20px;}

.first-screen .solution-list .solution-item { float:left; width:32%; margin:2% 2% 2% 0; background:rgba(255,255,255,0.8); border-radius:15px;}
.first-screen .solution-list .solution-item:nth-child(3n) { margin-right:0}
.first-screen .solution-list .solution-item .logo { height:90px; width:100%; display:flex; justify-content:center; align-items:center}


.advantage-list { display:flex; flex-wrap:wrap; column-gap:2%;}
.advantage-list .advantage-item { width:32%; font-size:28px; padding:0 30px; text-align:center; color:#000; font-weight:500; border-right:1px solid #DDE0E4} 
.advantage-list .advantage-item:last-child { border:none}
.advantage-list .advantage-item .num { font-size:82px; font-weight:500; background:-webkit- linear-gradient(0deg, #160078 0%, #7226FF 100%); background:linear-gradient(0deg, #160078 0%, #7226FF 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2 }











.block { }
.block .block-header { position:relative; font-size:64px; text-align:center; color:#7226FF; padding:60px 0; font-weight:500; }
.block .block-header img { z-index:1; position:relative;}
.block .block-header .sub { font-size:22px; color:#000 }
.block .block-header .name { position:relative; z-index:5; }

.block .block-header .left-circle span { position:absolute; background-repeat:no-repeat; background-position:50% 50%; display:block; right:30%; bottom:55%; opacity:0.3; z-index:-1;}
.block .block-header .left-circle span:nth-child(1) { background-image:url("../images/circle-left-1.svg"); height:231px; width:682px; bottom:calc(55% - 25px) }
.block .block-header .left-circle span:nth-child(2) { background-image:url("../images/circle-left-2.svg"); height:211px; width:636px; bottom:calc(55% - 15px) }
.block .block-header .left-circle span:nth-child(3) { background-image:url("../images/circle-left-3.svg"); height:185px; width:593px}

.block .block-header .right-circle span { position:absolute; background-repeat:no-repeat; background-position:50% 50%; display:block; left:30%; top:55%; opacity:0.3}
.block .block-header .right-circle span:nth-child(1) { background-image:url("../images/circle-right-1.svg"); height:231px; width:682px; top:calc(55% - 25px) }
.block .block-header .right-circle span:nth-child(2) { background-image:url("../images/circle-right-2.svg"); height:211px; width:636px; top:calc(55% - 15px) }
.block .block-header .right-circle span:nth-child(3) { background-image:url("../images/circle-right-3.svg"); height:185px; width:593px}

.block .block-content { position:relative; padding-bottom:20px}


#block-contact .block-content { background:#DDE0E4; border-radius:20px; overflow:hidden; padding:0 }
#block-contact .block-content .left-part { padding:32px; float:left; width:40%}
#block-contact .block-content .right-part { float:right; width:60%}



#block-about .block-content { background:#f2f2f2; border-radius:30px; position:relative; padding:20px 0; margin-bottom:40px}
#block-about .block-content:before {content:"";position:absolute; top:-1px;bottom:-1px;left:-1px;right:-1px;background:linear-gradient(90deg, #C819AE 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, #C819AE 100%);;border-radius:30px;z-index:-1;}
#block-about .block-content .bg { background:linear-gradient(175deg, rgba(25, 23, 34, 0.1) 77.95%, #C641D7 97.22%);content:'';width:100%;height:600px;left:0;bottom:0;position:absolute;border-radius:0 0 30px 30px;}




.about-list { display:flex; flex-direction:row; border-bottom:1px solid #000}

.about-list:last-child { border:none}
.about-list .about-item { flex-grow:1; position:relative; width:33.333%; padding:30px 30px 35px 30px; border-right:1px solid #000}
.about-list .about-item:last-child { border:none}
.about-list .about-item .icon { text-align:center; padding-bottom:25px; }
.about-list .about-item .name { text-align:center; font-size:22px; padding:10px 0; font-weight:500; }
.about-list .about-item .resume { font-size:16px;}
.about-list .about-item .signature { float:right; padding-top:80px}

.about-list .about-item .resume .ebay-feedback { display:block; width:214px; height:175px; background-color:#222222; background-image:url(../images/eBay-icon.png); background-repeat:no-repeat; background-position:50% 94%; border-radius:10px; text-align:center; position:relative; margin:auto; color:#fff;}
.about-list .about-item .resume .ebay-feedback span { font-size:64px; font-weight:500; color:#fff; position:relative; line-height:1.3; background-image:url(../images/eBay-star.png); background-repeat:no-repeat; background-position:47% 94%;}
.about-list .about-item .resume .ebay-feedback:hover { background-color:rgba(217, 217, 217, 0.17) }

.about-list .about-item .resume.feedback { border:1px solid #DDE0E4; border-radius:10px; position:relative; margin:0 20px; overflow:hidden; padding:10px 20px 10px 50px; background:#222222; color:#fff}
.about-list .about-item .resume.feedback:before { content:''; display:block; position:absolute; left:0; width:36px; top:0; height:100%; background-image:url("../images/eBay90-icon.svg"); background-position:50% 50%; background-repeat:no-repeat; }
.about-list .about-item .resume.feedback li { list-style-type:none; padding:5px 0}
.about-list .about-item .resume.feedback li span { float:right}


.about-list:last-child .about-item:last-child .icon { padding-top:50px }
.about-list:last-child .about-item:last-child .icon img { width:70%}


#google_map { height:460px; width:100%; display:block; border-radius:20px; overflow:hidden; border:1px solid #DDE0E4}

.box { position:relative; border:1px solid #DDE0E4; border-radius:20px; padding:20px; margin-bottom:20px}
.box .box-header { padding-bottom:10px; overflow:hidden;text-overflow:ellipsis; white-space:nowrap; font-weight:500; text-transform:uppercase; }
.box .preview { border-radius:5px; padding:5px; margin-bottom:20px}
.box .thumb {  background-repeat:no-repeat; background-position:50% 50%; background-size:contain; width:100%; padding-bottom:100%;  }

/* CONTENT */
.content { font-size:16px}
.content a { font-size:16px; }
.content a:hover { font-size:16px}
.content ul, .content ol { padding-left:20px;list-style-type:none;}
.content ul li { list-style-type:circle; padding-block:5px;}
.content ol li { list-style-type:decimal; padding-block:5px;}
.content p { padding-bottom:20px}
.content p + div { padding-bottom:20px }
.content blockquote { padding:0 20px; margin-bottom:20px; border-left:4px solid #DDE0E4; font-style:italic}
.content blockquote p:last-child  { padding-bottom:0}

.content table { width:100%; border-collapse:collapse; margin-bottom:12px}
.content table tr {}
.content table tr td, .content table tr th { font-size:16px; border:1px solid #424141; padding:5px; color:#000; background:none}
.content table tr td:nth-child(1) { width:40%}
/* END CONTENT */


.breadcrumbs { padding:40px 0}
.breadcrumbs li { list-style-type:none; display:block; float:left; padding-right:20px; position:relative}
.breadcrumbs li a { }
.breadcrumbs li:after { content:""; border-radius:10px; width:4px; height:4px; display:block; background:#7226FF; position:absolute; right:8px; top:10px}
.breadcrumbs li:last-child:after { display:none}
.breadcrumbs li:last-child a { color:#7226FF}




.filter { padding:10px 20px; background:#F9F9F9; margin-bottom:40px; border:1px solid #DDE0E4; border-radius:20px; position:relative; z-index:4;}
.filter .field, .filter .select { padding:10px 0; position:relative}
.filter .field label, .filter .select label { display:block; padding-bottom:10px}

.filter .field input[type="text"] { width:100%; border:1px solid #aaa; border-radius:4px; background:#fff; height:40px; -webkit-appearance:none; padding:0 10px}
.filter .field select { width:100%; border:1px solid #000; height:40px; -webkit-appearance:none; padding:0 10px }

.filter .field .range { height:40px; text-align:center}
.filter .field .range .range-wrap { padding:0 10px; margin-bottom:10px}

.filter .field .min-val { float:left; width:40%; text-align:left}
.filter .field .max-val { float:right; width:40%; text-align:right}

.filter .field .min-val input, .filter .field .max-val input { display:block; border:none; width:100%; font-size:18px; background:none}
.filter .field .max-val input { text-align:right}

.filter .field .min-val span, .filter .field .max-val span { display:block; border:none; width:100%; font-size:18px; background:none; padding-top:5px}

.filter .field .range .ui-slider-horizontal { height:2px; background:#ccc; border:none; top:5px; }

.filter .field .range .ui-slider .ui-slider-range { background:#000; }

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { background:#7226FF; border-radius:12px; top:-10px;}

.filter .field select.multiple-select { display:none;}
.filter .ms-choice { height:40px; align-items:center; display:flex}
.filter .ms-choice>span { position:relative}
.filter .ms-drop ul>li { padding:0 8px;}
.filter .ms-drop ul>li label { display:flex; float:none; height:36px; align-items:center;}
.ms-drop ul>li.group~li.option-level-1:not(.hide-radio)>label { padding-left:30px}
.filter .ms-drop input[type=checkbox], .filter .ms-drop input[type=radio] { margin-top:-2px}
.filter .ms-parent { width:100% !important; }

.filter .button { padding:44px 0 10px 0; display:flex; align-items:flex-end }
.filter .button button { border:2px solid #7226FF; border-radius:15px; color:#7226FF; background:#fff; height:40px; display:block; width:100%; font-size:18px; font-weight:500; cursor:pointer;}
.filter .button button:hover {color:#fff; background:#7226FF;}


/* BUNDLE */
.bundle-list { display:flex; flex-wrap:wrap; column-gap:2%;}

.bundle-list .bundle-item { width:32%; margin-bottom:40px; position:relative; cursor:pointer}

.bundle-list .bundle-item .info { border:1px solid #DDE0E4; border-radius:15px; overflow:hidden }
.bundle-list .bundle-item:hover .info{ border-color:#7226FF}

.bundle-list .bundle-item .thumb { height:260px; position:relative; background-color:#fff; padding:10px}
.bundle-list .bundle-item .thumb img { position:relative; z-index:1; margin:auto; display:block; }

.bundle-list .bundle-item .meta {  border-top:1px solid #DDE0E4; padding:5px 20px; background:#F9F9F9; color:#000; font-size:16px}
.bundle-list .bundle-item .meta li { list-style-type:none; padding:10px 0 10px 40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background-position:0 50%; background-repeat:no-repeat; background-size:30px auto}

.bundle-list .bundle-item .name { color:#7226FF; font-size:24px; font-weight:500; line-height:1.3; padding:20px 0 10px 0; min-height: 95px}

.bundle-list .bundle-item .price { float:left; color:#000; font-size:24px; }

.bundle-list .bundle-item .button { float:right}
.bundle-list .bundle-item .button a { display:block; height:34px; line-height:34px; padding:0 10px; color:#fff; background:#0000FF; border-radius:10px; font-weight: 500 }
/* END BUNDLE */



.type-list { display:flex; flex-wrap:wrap; column-gap:2%;}
.type-list .type-item { width:32%; margin-bottom:20px; border-radius:20px; background:#fff; position:relative; border:1px solid #DDE0E4; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; cursor:pointer}


.type-list .type-item:hover { border:1px solid #7226FF;  }
.type-list .type-item a { display:block}

.type-list .type-item .preview { padding:20px; overflow:hidden}
.type-list .type-item .thumb {  background-repeat:no-repeat; background-position:50% 50%; background-size:contain; background-image:url("../images/no-image.svg"); width:100%; padding-bottom:100%; transform:scale(1); -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; }
.type-list .type-item:hover .thumb { transform:scale(1.05);}

.type-list .type-item .qty { position: absolute; z-index: 1; right: 0; top: 0; border-radius:0 18px 0 20px; background:rgba(114,38,255,0.3); font-size: 30px; color: #7226ff; font-weight: 500; padding: 10px 15px; display: none; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; }
.type-list .type-item:hover .qty { color: #fff; background:#7226ff }

.type-list .type-item .name { text-align:center; font-weight:500; text-transform:uppercase; padding-bottom:10px; padding:0 5px 20px 5px}
.type-list .type-item .name span { display:block; font-weight:100; }



/* CONFIG */
.config-overlay { z-index:10; opacity:0; visibility:hidden; position:fixed; left:0%; top:0%; width:100vw; height:100vh; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; background:#42414140; -moz-backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px); -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate(-0%,-0%) scale(0.2) translate3d(0, 0, 0); -moz-transform:translate(-0%,-0%) scale(0.2) translate3d(0, 0, 0); transform:translate(-0%,-0%) scale(0.2) translate3d(0, 0, 0); }
.config-overlay.active { opacity:1; visibility:visible; transform:translate(0%,0%) scale(1); }
.config-overlay .close { position:absolute; right:0; top:10px; z-index:1; display:block; width:60px; height:60px; border:2px solid transparent; background:#fff; border-radius:60px}

.config-overlay .close:before, .config-overlay .close:after { content:''; display:block; position:absolute; width:40px; height:2px; background:#000; top:27px; left:8px;}
.config-overlay .close:before { -webkit-transform:rotateZ(45deg); -moz-transform:rotateZ(45deg); -o-transform:rotateZ(45deg); transform:rotateZ(45deg); }
.config-overlay .close:after { -webkit-transform:rotateZ(-45deg); -moz-transform:rotateZ(-45deg); -o-transform:rotateZ(-45deg); transform:rotateZ(-45deg); }

.config-overlay .scrollbar { overflow-y:scroll; width:100%; height:100%; position:relative; z-index:2}

.config-header { font-size:28px; padding:20px 80px 20px 0 }


.config-content { display:flex; flex-wrap:wrap; column-gap:20px;}

.config-content .left-part { width: 340px; background:#fff; position: relative; border-radius:20px; padding:20px; margin:0 0 20px 0; }
.config-content .right-part { width: calc(100% - 360px); background:#fff; position: relative; border-radius:20px; padding:20px; margin:0 0 20px 0; height:340px; overflow-y:scroll;  }

.config-content .preview {  }
.config-content .thumb { background-repeat:no-repeat; background-position:50% 50%; background-size:contain; width:100%; padding-bottom:100%; position:relative}
.config-content .thumb a { display:none}
.config-content .thumb a:first-child { display:block; width:100%; position:absolute; height:100%; left:0; top:0}




.config-content .qty { background: #fff; width:120px; height:40px; border-radius:5px; border:1px solid #260303; text-align:center; overflow:hidden; position: absolute; bottom:20px; left: 50%; margin-left: -60px }
.config-content .qty .plus, .config-content .qty .minus { float:left; width:40px; height:38px; line-height:38px; font-size:24px; cursor:pointer}

.config-content .qty .plus button, 
.config-content .qty .minus button { display:block; background:#fff; border:none;  width:100%; height:38px; cursor:pointer; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}
.config-content .qty .plus:hover button, .config-content .qty .minus:hover button { background:#fff}
.config-content .qty input { float:left; width:38px; height:38px; display:block; border:none; border-left:1px solid #260303; border-right:1px solid #260303; text-align:center; font-size:16px; background:#fff}
.config-content .qty input[type="number"]::-webkit-outer-spin-button, .config-content .qty input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }



.config-slider { padding-bottom:20px}

.config-slider .part-item { background-color:#fff; border:1px solid transparent; border-radius:20px; padding:20px 20px; margin-top:10px; position:relative; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; cursor:pointer }
.config-slider .part-item:hover, .config-slider .part-item.selected { border:1px solid #7226FF; }
.config-slider .part-item.selected:before { content: 'Selected'; color:#fff; font-size:16px; font-weight:500; text-transform:uppercase; line-height:1; position:absolute; right:40px; top:-10px; background:#7226FF; padding:4px 10px; border-radius:4px; }

.config-slider .part-item .thumb { background-repeat:no-repeat; background-position:50% 50%; background-size:contain; width:80%; padding-bottom:80%; margin: auto }
.config-slider .part-item .name { font-size:16px; margin:15px 0 15px; height:70px; overflow: hidden}
.config-slider .part-item .price { font-weight:700; float:right;}

.config-slider .part-item .select { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23000000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); background-size:auto 100%; background-repeat:no-repeat; color:#000000; background-color:rgba(255, 255, 255, 0.4); font-weight:500; text-transform:uppercase; background-position:0 50%; padding:2px 0 0 30px; float:left; font-size: 14px; }
.config-slider .part-item.selected .select { display: none}

.config-footer { display:flex; flex-wrap:wrap; column-gap:2%; }

.config-footer .action, 
.config-footer .cart { background:#fff; border-radius:20px; padding:15px; width:49%; margin-bottom:20px;}


.config-footer .action .button { display:flex; flex-wrap:wrap; column-gap:2%; height:100%; align-items:center;}
.config-footer .action .btn { width:49%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.config-footer .cart { display: flex; align-items: center}
.config-footer .cart .info { width:50%; padding-right: 10px}
.config-footer .cart .info .name strong { color:#7226FF; }

.config-footer .cart .total { width:50%; text-align:right; border-left:2px solid #DDE0E4; padding-left: 10px}
.config-footer .cart .total .price { font-size: 24px}
.config-footer .cart .total .breadpay { font-size:12px; background:url("../images/logo-BreadPay.svg") no-repeat 100% 50%; background-size:auto 20px; padding-right:55px; top: -4px; position: relative}
.config-footer .cart .total .breadpay strong { color:#7226FF; }


/* END CONFIG */




/* CART */


.cart.good { padding:20px; border:1px solid #DDE0E4; border-radius:20px; text-align:right; background: #fff}
.cart.good .price { font-size:36px; border-bottom:1px solid #DDE0E4; padding:10px 0 15px 0; margin-bottom:10px; line-height: 1}
.cart.good .info .name strong { color:#7226FF; }
.cart.good .button { padding-top:20px}
.cart.good .button form { float: right; margin-left: 10px }
.cart.good .button a { float: right; margin-left: 10px}

.cart.good .total .breadpay { font-size:12px; height:20px; padding-top:2px; background:url("../images/logo-BreadPay.svg") no-repeat 100% 50%; background-size:auto 20px; padding-right:55px}
.cart.good .total .breadpay strong { color:#7226FF; }


.cart-list {}
.cart-list .cart-item { display:flex; border:1px solid #DDE0E4; flex-wrap:wrap; column-gap:2%; border-radius:20px; padding:20px; margin-bottom: 20px }
.cart-list .cart-item .name { padding-bottom:10px; overflow:hidden;text-overflow:ellipsis; white-space:nowrap; font-weight:500; text-transform:uppercase; }
.cart-list .cart-item .name a { font-weight:500; }

.cart-list .cart-item .left-part { width: 200px; margin-bottom: 20px}
.cart-list .cart-item .right-part { width: calc(100% - 220px);}

.cart-list .cart-item  .preview { padding:10px; width:100%;}
.cart-list .cart-item  .thumb { background-repeat:no-repeat; background-position:50% 50%; background-size:contain; width:100%; padding-bottom:100%;  }

.cart-list .cart-item  .info ul { padding-left: 18px}

.cart-list .cart-item .form { padding-bottom: 10px}
.cart-list .cart-item .form .qty { width:120px; height:40px; border-radius:5px; border:1px solid #260303; padding:0; text-align:center; overflow:hidden}
.cart-list .cart-item .form .qty .plus, .cart-item .form .qty .minus { float:left; width:40px; height:38px; line-height:38px; font-size:24px; cursor:pointer}

.cart-list .cart-item .form .qty .plus button, 
.cart-list .cart-item .form .qty .minus button { display:block; background:#fff; border:none;  width:100%; height:38px; cursor:pointer; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}
.cart-list .cart-item .form .qty .plus:hover button, .cart-list .cart-item .form .qty .minus:hover button { background:#fff}
.cart-list .cart-item .form .qty input { float:left; width:38px; height:38px; display:block; border:none; border-left:1px solid #260303; border-right:1px solid #260303; text-align:center; font-size:16px; background:#fff}
.cart-list .cart-item .form input[type="number"]::-webkit-outer-spin-button, .cart-list .cart-item .form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }


.cart-list .cart-item .name { padding-bottom:5px; }

.cart-list.short .cart-item { display: block}
.cart-list.short .cart-item .left-part { width: 70px; float: left; margin: 0} 
.cart-list.short .cart-item .right-part { width: calc(100% - 90px); float: right}
.cart-list.short .cart-item .preview { padding: 0}
.cart-list.short .cart-item .info ul { display: none}

.cart-list.short .cart-item .form { padding-bottom: 0}
.cart-list.short .cart-item .form .qty { width:120px; height:40px; border-radius:5px; border:1px solid #260303; padding:0; text-align:center; overflow:hidden}
.cart-list.short .cart-item .form .qty .plus, .cart-item .form .qty .minus { float:left; width:40px; height:38px; line-height:38px; font-size:24px; cursor:pointer}
.cart-list.short .cart-item .form .qty .plus button, 
.cart-list.short .cart-item .form .qty .minus button { display:block; background:#fff; border:none; width:100%; height:38px; cursor:pointer; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}



.provider-item { display: none}

/* END CART */





.sticky {}
.sticky.fixed { position:fixed; z-index:1; top:20px }



.user-menu { padding-bottom:20px }
.user-menu ul { display:flex}
.user-menu li { }
.user-menu li { display:block; list-style-type:none; margin-right:13px; position:relative}
.user-menu li:last-child { margin-right:0}
.user-menu li a { border:2px solid #7226FF; display:block; border-radius:17px; color:#7226FF; font-size:16px; line-height:34px; padding:0 10px; text-transform:uppercase }
.user-menu li a:hover, .user-menu li a.active { background:#7226FF; color:#fff}


/* PAGER */
.pager { text-align:center; padding-top:20px}
.pager li { display:inline-block; padding:0 5px 10px 5px}
.pager li a, .pager li span { display:block; width:40px; height:40px; line-height:40px; border:1px solid #000; text-decoration:none; }
.pager li span { background:#000; color:#fff}


/* POP */
.pop-overlay { z-index:10; opacity:0; visibility:hidden; position:fixed; left:0%; top:0%; width:100vw; height:100vh; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease; background:#42414140; -moz-backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px); -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate(-0%,-0%) scale(0.2) translate3d(0, 0, 0); -moz-transform:translate(-0%,-0%) scale(0.2) translate3d(0, 0, 0); transform:translate(-0%,-0%) scale(0.2) translate3d(0, 0, 0); }
.pop-overlay.active { opacity:1; visibility:visible; transform:translate(0%,0%) scale(1); }
.pop-overlay .close { position:absolute; right:0; top:15px; opacity:0.6; z-index:1; display:block; width:60px; height:60px; border:2px solid #000; border-radius:60px}

.pop-overlay .close:before, .pop-overlay .close:after { content:''; display:block; position:absolute; width:40px; height:2px; background:#000; top:27px; left:8px;}
.pop-overlay .close:before { -webkit-transform:rotateZ(45deg); -moz-transform:rotateZ(45deg); -o-transform:rotateZ(45deg); transform:rotateZ(45deg); }
.pop-overlay .close:after { -webkit-transform:rotateZ(-45deg); -moz-transform:rotateZ(-45deg); -o-transform:rotateZ(-45deg); transform:rotateZ(-45deg); }

.pop-overlay .scrollbar { overflow-y:scroll; width:100%; height:100%; position:relative; z-index:2}

.pop-overlay .pop-header { font-size:28px; padding:20px 80px 20px 0 }

.pop-overlay .pop-content { padding-bottom:20px}
.pop-overlay .pop-content .box { background:#fff}

.braintree-method { width: 100% !important}
.braintree-placeholder { display:none !important}
.braintree-sheet__container { margin-bottom:20px !important}
.braintree-sheet { border-radius:20px !important; }
.braintree-upper-container:before { display:none}
.braintree-large-button { margin-bottom:20px !important}

.braintree-heading, .braintree-placeholder { margin-bottom: 0 !important; position: relative !important}

/* SLIDER */
.slider { position:relative;}
.slider .owl-stage-outer  { overflow:hidden}
.slider .owl-item { float:left }

.slider .owl-nav.disabled { display:none; }
.slider .owl-dots.disabled { display:none; }

.slider .owl-dots { position:absolute; width:max-content; transform:translate(-50%, 0); bottom:-20px; left:50%; }
.slider .owl-dots button { display:block; border:1px solid #fff; background:none; border-radius:10px; width:15px; height:15px; float:left; margin:0 5px;}
.slider .owl-dots button.active { background:#fff;  }
.slider .owl-dots span { display:none }

.slider .owl-nav button.disabled { opacity:0.5}
.slider .owl-nav button { position:absolute; top:50%; z-index:10; display:block; width:50px; height:50px; border-radius:4px; background:#fff; text-align:center; border:none; margin-top:-30px; cursor:pointer; color:#000; font-size:36px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}
.slider .owl-nav button:hover { background:#7226FF; color:#fff }
.slider .owl-nav button span { display:block; text-align:center; font-size:24px; margin-top:-4px; line-height:1;}
.slider .owl-nav .owl-prev { left:-80px;}
.slider .owl-nav .owl-next { right:-80px;}


table.black {}
table.black tbody tr { background-color:transparent !important}
table.black tbody tr.odd { background-color:#191722 !important}
table.black tbody tr:hover { background-color:#111111 !important; }
table.black tbody tr .sorting_1 { background-color:transparent !important }
table.black tbody tr th, table.black tbody tr td { border:none !important;  border-bottom:1px solid rgba(102, 102, 102, 0.3) !important; border-top:1px solid rgba(102, 102, 102, 0.3) !important;}

table.black thead th, table.black thead td { border:none !important; text-align:left !important; font-weight:500 !important;}


.do-list {}
.do-list .do-item { float:left; width:32%; margin:0 2% 2% 0; border:1px solid #DDE0E4; border-radius:20px; padding:12px; font-size:16px; line-height:1.2}
.do-list .do-item:nth-child(3n) { margin-right:0}
.do-list .do-item .logo { text-align:center; padding-bottom:10px}


.ebay-feedback { border:1px solid #DDE0E4; border-radius:20px; padding:12px 12px; }
.ebay-feedback .procent { font-size:56px; position:relative; background:url("../images/eBay-star.png") no-repeat 65px 52px; color:#000; font-weight:500; float:left; width:50%; line-height:1.3}
.ebay-feedback .logo { color:#000; text-align:center; float:left; width:50%; background:url("../images/eBay-icon.svg") no-repeat 50% 25px; padding-bottom:45px}


.ebay-head { width:300px}


.ask-widget { border:1px solid #DDE0E4; border-radius:20px; padding:24px 12px; font-size:16px; line-height:1.2; margin-bottom:32px;}
.ask-widget .thumb { float:left; margin:0 24px 12px 0; }
.ask-widget .button { padding-top:10px}
.ask-widget .button a { display:inline-block; border:2px solid #7226FF; border-radius:15px; color:#7226FF; padding:5px 15px; font-size:18px; font-weight:500 }
.ask-widget .button a:hover { background:#7226FF; color:#fff}

.blockquote { font-size:24px; font-weight:500; position:relative; text-indent:120px; line-height:1.2; color:#4F5157}
.blockquote:before { content:'”'; position:absolute; left:72px; color:rgba(249, 249, 249, 0.4); font-size:100px; text-indent:0; top:-55px;}

.blog-widget { border:1px solid #DDE0E4; background:rgba(217, 217, 217, 0.17); color:#F9F9F980; border-radius:20px; padding:24px 12px; font-size:16px; font-weight:100; float:right; width:32%; line-height:1.2}
.blog-widget .thumb { float:left; margin:0 24px 12px 0; }
.blog-widget .button { padding-top:10px}


.accord-content { display:none}
.accord-item.active .accord-content { display:block}

.faq-list .faq-item { border-bottom:1px solid #666;}
.faq-list .faq-item:last-child { border:none}
.faq-list .faq-item .name { font-size:24px; color:#666; padding:10px 30px 10px 0; position:relative; cursor:pointer; font-weight:500; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; }
.faq-list .faq-item .name .trigger { position:absolute; right:0; width:20px; height:20px; top:18px}

.faq-list .faq-item .name .trigger:before { content:''; position:absolute; right:8px; top:0; width:4px; height:20px; background:#666666; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; z-index:2 }
.faq-list .faq-item .name .trigger:after { content:''; position:absolute; right:0; top:8px; width:20px; height:4px; background:#666666; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; z-index:2 }
.faq-list .faq-item.active .name .trigger:before { display:none }


.faq-list .faq-item .name .trigger span { border-radius:100%; display:block; width:30px; height:30px; left:-5px; top:-5px; position:absolute; background:#666666;  -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; transform:scale(0);}
.faq-list .faq-item .name:hover .trigger span { transform:scale(1);}
.faq-list .faq-item .name:hover { color:#7226FF}
.faq-list .faq-item .name:hover .trigger:before, .faq-list .faq-item .name:hover .trigger:after { background:#fff }

.faq-list .faq-item.active .name { color:#7226FF }

.faq-list .faq-item .accord-content { color:#000; padding-bottom:15px}


.review { position:relative}

.review .circle {}

.review .circle span { position:absolute; background-repeat:no-repeat; background-position:50% 50%; display:block; left:0%; top:0%; opacity:0.3}
.review .circle span:nth-child(1) { background-image:url("../images/circle-review-1.svg"); height:453px; width:1342px; top:calc(0% - 25px) }
.review .circle span:nth-child(2) { background-image:url("../images/circle-review-2.svg"); height:414px; width:1253px; top:calc(0% - 15px); left:100px }
.review .circle span:nth-child(3) { background-image:url("../images/circle-review-3.svg"); height:364px; width:1167px; left:200px}

.review .text { max-width:530px; width:100%; margin:60px auto; font-size:24px;}

.review-total { float:left; width:25%; text-transform:uppercase}
.review-total .rating { font-size:96px; font-weight:500; background:url(../images/google_logo_map.svg) no-repeat 160px 0px; background-size:auto 112px; }



.review-list { float:right; width:70%}  
.review-list .review-item { padding:16px; width:257px; height:352px; background:url("../images/review-card.svg") no-repeat 50% 50%; color:#fff; }
.review-list .review-item .rating { font-size:22px; color:#fff; font-weight:500; padding-bottom:10px; border-bottom:1px solid rgba(217, 217, 217, 0.4)}
.review-list .review-item .rating .stars { display:inline; margin-left:5px}
.review-list .review-item .resume { font-weight:100; padding-top:10px; font-size:15px; min-height:240px}

.review-list .review-item .client { font-weight:100;  font-size:16px; vertical-align:middle}
.review-list .review-item .client img {vertical-align:inherit; margin-right:10px}

.review-slider .owl-nav button { bottom:0; margin-top:0; top:auto}
.review-slider .owl-nav .owl-prev { right:60px; left:auto}
.review-slider .owl-nav .owl-next { right:0;}

.review-slider-btn { position:relative; padding:20px 0}
.review-slider-btn a { width:36px; height:36px; border:1px solid rgba(249, 249, 249, 0.4); border-radius:36px; display:block; float:left; margin-right:15px}
.review-slider-btn a:hover { border:1px solid rgba(249, 249, 249, 1);}

.review-slider-btn a.next { background:url("../images/arrow-right.svg") no-repeat 50% 50%;}
.review-slider-btn a.prev { background:url("../images/arrow-left.svg") no-repeat 50% 50%;}



.footer { background: #000;
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(22, 0, 120, 1) 50%, rgba(114, 38, 255, 1) 100%); font-weight:100; padding-top:20px; border-top:1px solid rgba(102, 102, 102, 1); color:#fff}

.footer h3 { font-weight:100; text-transform:uppercase; padding-bottom:20px}

.footer a { font-weight:500; color:#fff; }

.footer .menu { padding-left:40px}
.footer .menu li { list-style-type:none; text-transform:uppercase; padding-bottom:10px }

.footer a { position:relative}
.footer a:hover:after {
    transform:scaleX(1);
    transform-origin:left center;
}
.footer a:after {
    transform:scaleX(0);
    transform-origin:right center;
}
.footer a:after {
    background:currentColor;
    bottom:-2px;
    content:'';
    height:1px;
    left:0;
    position:absolute;
    transition:transform 0.4s ease;
    width:100%;
}


.footer .menu-line li { display:block; float:left; margin-right:30px; margin-bottom:20px}
.footer .menu-line li a { font-size:16px; text-transform:uppercase}

.nav-list { padding:20px 0}
.nav-list .nav-item { border-bottom:1px solid rgba(200, 25, 174, 1);}
.nav-list .nav-item:last-child { border:none}
.nav-list .nav-item .name { font-size:24px; color:#fff; font-weight:500; padding:10px 20px 10px 0; position:relative; cursor:pointer}
.nav-list .nav-item .name .trigger { position:absolute; right:0; width:20px; height:20px; top:18px}

.nav-list .nav-item .name .trigger:before { content:''; position:absolute; right:8px; top:0; width:4px; height:20px; background:#fff; z-index:2; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; }
.nav-list .nav-item .name .trigger:after { content:''; position:absolute; right:0; top:8px; width:20px; height:4px; background:#fff; z-index:2; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; }

.nav-list .nav-item.active .name .trigger:before { display:none }
.nav-list .nav-item .name .trigger span { border-radius:100%; display:block; width:30px; height:30px; left:-5px; top:-5px; position:absolute; background:#fff;  -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease; transform:scale(0);}
.nav-list .nav-item .name:hover .trigger span { transform:scale(1);}

.nav-list .nav-item .name:hover .trigger:before, .nav-list .nav-item .name:hover .trigger:after { background:#000 }


.footer .copyline { border-top:1px solid #7226FF; padding:10px}
.footer .copyline .copy { float:left}
.footer .copyline .link { float:right}
.footer .copyline .link a { margin-left:20px}


.footer .social { padding-top:10px}
.footer .social h3 { float:left; padding:6px 0; margin-right:10px; }
.footer .social ul { float:left; }
.footer .social li { list-style-type:none; float:left; margin:0 5px 0 0}
.footer .social li a { display:flex; align-items:center; justify-content:center; width:37px; height:37px; border:2px solid #7226FF; border-radius:37px}
.footer .social li a:hover { background:#7226FF}
.footer .social li a:after { display:none}



/* WEB FORM */
.web-form .field { padding:0 0 20px; position:relative;}
.web-form .field label { padding-bottom:5px; display:block; }

.web-form .field input[type="text"], 
.web-form .field input[type="password"], 
.web-form .field input[type="email"], 
.web-form .field input[type="number"]
{ background:transparent; border-radius:20px; padding:0 20px; height:54px; width:100%; font-family:'Commissioner'; font-size:14px; font-weight:500; border:1px solid #DDE0E4; color:#000; }

.web-form .field select { background:transparent; border-radius:20px; padding:0 20px; height:54px; width:100%; font-family:'Commissioner'; font-size:14px; font-weight:500; color:#000; border:1px solid #DDE0E4;}
.web-form .field select option { color:#000}
.web-form .field textarea { background:transparent; border-radius:20px; padding:10px 20px; height:120px; width:100%; font-family:'Commissioner'; font-size:14px; font-weight:500; color:#000; border:1px solid #DDE0E4;}

.web-form input[type="number"]::-webkit-outer-spin-button,
.web-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.web-form .check { padding-bottom:20px}
.web-form .check label { display:block; height:100%; width:100%; padding:0 25px; position:relative}
.web-form .check span { width:20px; height:20px; border:1px solid #DDE0E4; background:#DDE0E4; border-radius:5px; display:block; position:absolute; left:0; top:1px }
.web-form .check input:checked ~ span { background-color:#DDE0E4; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23000' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); background-size:70% auto; background-repeat:no-repeat; background-position:50% 50%; }
.web-form .check input { opacity: 0; position: absolute}

.web-form .content a, .web-form .check label a { text-decoration:underline}
.web-form .content a:hover, .web-form .check label a:hover { text-decoration:none}

.web-form .field input + .switch-type { position:absolute; right:5px; top:33px; padding-top:5px; display:block; width:30px; height:30px; cursor:pointer; opacity:0.3; text-align:center}
.web-form .field input + .switch-type.active { opacity:0.9}

.web-form .button { padding-bottom: 20px}

.web-form .checkbox { padding-bottom:0; position:relative; line-height:52px;}
.web-form .checkbox input { display:none}
.web-form .checkbox span { width:88px; height:54px; border-radius:54px; background:none; border:1px solid #DDE0E4; display:block; position:relative; cursor:pointer; float:left;  margin-right:10px;}
.web-form .checkbox span:before { content:''; width:44px; height:44px; border-radius:24px; background:#DDE0E4; position:absolute; left:4px; top:4px; -webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease;}
.web-form .checkbox input:checked + span { }
.web-form .checkbox input:checked + span:before { left:auto; right:4px; background:#7226FF}


.web-form .field.warning { background:#F4511E50; padding:10px 10px 8px 10px; margin-bottom:20px; border-radius:5px }
.web-form .field.success { background:#2F8D5350; padding:10px 10px 8px 10px; margin-bottom:20px; border-radius:5px }


.web-form.subscribe .field button { display:block; width:32px; height:32px; background-image:url("../images/icon-input-mail.svg"); background-color:rgba(217, 217, 217, 1); background-position:50% 50%; background-repeat:no-repeat; border-radius:30px; position:absolute; right:10px; top:10px; border:none; cursor:pointer}
.web-form.subscribe .field input { border-radius:54px;}


.iframe {position:relative; overflow:hidden; padding-top:56.25%; margin-bottom:20px}
.iframe iframe {position:absolute; top:0; left:0; width:100%; height:100%; border:0;}

.processing { position:fixed; z-index: 11; left: 0; top: 0; bottom: 0; right: 0; background-image: url("../images/processing.png"); background-repeat: no-repeat; background-position: 50% 50%; background-color:rgba(0,0,0,0.3)}

@media (max-width:1200px) {
	.wrapper { width:100%; padding:0 10px}
	
	.header .menu { display:none;}
	.header .logo img { height:40px}

	.header .cart, .header .user { padding:3px 20px 0 0}
	
	.header .toggle-nav { display:block;}

	.first-screen .preview .slogan { font-size:30px}
	
	.type-list .type-item { width:49%; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width:768px) and (max-width:979px) { 
	.wrapper { width:100%; padding:0 10px}
	
	.advantage-list .advantage-item { font-size:24px}
	.advantage-list .advantage-item .num { font-size:60px }

    .first-screen { padding-bottom:20px; padding-top:100px;}
	.first-screen .preview .slogan { position:relative; float:none; width:100%; font-size:36px; padding-bottom:20px}
	.first-screen .preview .video { position:relative; float:none; width:450px; margin:40px auto; padding-right:0;}
    
	.advantage-list .advantage-item { width:49%; }
	.advantage-list .advantage-item:nth-child(2) { border:none}
	.advantage-list .advantage-item:nth-child(3) { width:100%}
	
    .bundle-list .bundle-item { width:49%; }
	
	.sidebar { float:left; width:49%; }
    .common { float:right; width:49%; }
	
	.cart-list .cart-item .left-part, .cart-list .cart-item .right-part { width: 100%; }
	.cart-list .cart-item .preview { max-width: 300px; margin: auto; }
}

/* Landscape phone to portrait tablet */
@media (max-width:767px) {
	.wrapper { width:100%; padding:0 10px}
	
	.header .cart, .header .user { padding:4px 20px 0 0}
	
	.first-screen { padding-bottom:20px; padding-top:100px;}
	.first-screen .preview .slogan { position:relative; float:none; width:100%; font-size:36px; padding-bottom:20px}
	.first-screen .preview .video { position:relative; float:none; width:450px; margin:40px auto; padding-right:0;}

	
	.bundle-list .bundle-item { width:100%; }
	
	.advantage-list .advantage-item { width:100%; border:none; }
	
	.do-list .do-item { float:none; width:100%; margin:0 0% 2% 0; }
	.do-list .do-item:nth-child(3n) { margin-right:0}

	.sticky.fixed { position:relative }
	
	.sidebar { float:none; width:100%; }
	.common { float:none; width:100%; margin-top:20px}

	.sidebar.reverse { float:none; }
	.common.reverse { float:none; }
	
	.block-header { font-size:36px; padding:20px 0}
	.block .block-header .name.tool:before { height:32px; width:32px; background-size:32px auto; }
	
	
	.config-overlay .close { top:8px; right: 8px; width:30px; height:30px; }
	.config-overlay .close:before, .config-overlay .close:after { width:20px; height:2px; top:12px; left:3px; }
	
	.config-header { font-size:18px; padding:10px 40px 10px 0}
	
	.config-content .left-part { float:none; width:100%; }
	.config-content .thumb { height:300px; padding:0;}
	.config-content .right-part { float:none; width:100%; height: auto }
	
	.config-slider .part-item { padding:20px 10px;}
	
	.config-footer .action, .config-footer .cart { width:100%}
	
	
	
	.type-list .type-item { width:49%; }
	
	.filter .button { padding:20px 0 10px 0; }
	
	.cart-list .cart-item .left-part, .cart-list .cart-item .right-part { width: 100%; }
	.cart-list .cart-item .preview { max-width: 300px; margin: auto; }
	
	
	
	.about-list { display:block}
	.about-list .about-item { width:100%; border-bottom:1px solid #D9D9D942; border-right:none}
	
	.pop-overlay .close { top:8px; right: 8px; width:30px; height:30px; }
	.pop-overlay .close:before, .pop-overlay .close:after { width:20px; height:2px; top:12px; left:3px; }
	
	.ask-widget { float:none; width:100%}
	.faq-list { float:none; width:100%; margin-top:20px}
	
	.blog-widget { float:none; width:100%; margin-top:20px}
	
	.review-total { float:none; width:100%}
	.review-list { float:none; width:100%}
	
	.faq-list .faq-item .name .trigger { top:50%; -webkit-transform:translate(0%, -50%); -moz-transform:translate(0%, -50%); -ms-transform:translate(0%, -50%); -o-transform:translate(0%, -50%); transform:translate(0%, -50%); }
	
	.footer .menu { padding-left:0}
	
	/* GRID */
	.row { display:block; }
	.row .col-12, .row .col-11, .row .col-10, .row .col-9, .row .col-8, .row .col-7, .row .col-6, .row .col-5, .row .col-4, .row .col-3, .row .col-2, .row .col-1 { width:100%; }
	
	.footer .copyline { text-align:center}
	.footer .copyline .copy { float:none; width:100%}
	.footer .copyline .link { float:none; width:100%}
	.footer .copyline .link a { margin:0 20px}
	
	
}

/* Landscape phones and down */
@media (max-width:480px) { 
	.wrapper { width:100%; padding:0 10px}

	.header .cart, .header .user { padding-right:10px; padding-left: none }
	.header .cart a, .header .user a { padding:0 10px; font-size: 12px }
	
	
	.first-screen .preview .slogan { font-size:28px;}
	.first-screen .preview .video { width:320px;}

	.main { padding-top:60px}
	
	.block .block-header { font-size:32px; padding:30px 0}

	.type-list .type-item { float:none; width:100%; }
	.type-list .type-item:nth-child(3n) { margin-right:0%}
	.type-list .type-item:nth-child(2n) { margin-right:0}
	
	.ask-widget .thumb, .blog-widget .thumb { text-align:center; margin:auto; float:none }
	.ask-widget .info, .blog-widget .info { float:none}
	
	.config-content .preview { width:100%; }
	.config-content .thumb { width:100%; }
	
	.config-slider .part-item .name { min-height: auto}
	
	.config-footer { padding-bottom: 155px;  }
	.config-footer .action .btn { width:100%; }
	.config-footer .action .btn:first-child { margin-bottom:15px }
	
	.config-footer .cart { display: block; width:auto; position: fixed; z-index: 10; bottom: 0; left: 10px; right: 18px; box-shadow:0 0 8px rgba(0,0,0,.3); margin: 0 0 5px 0 }
	.config-footer .cart .info { width:100%; padding:0 0 5px 0}
	.config-footer .cart .total { width:100%; border:none; padding:5px 0 0 0; border-top:2px solid #DDE0E4; text-align:left}
	.config-footer .cart .total .breadpay { display: inline-block}
	

	.slider .owl-nav .owl-prev { left:0;}
	.slider .owl-nav .owl-next { right:0;}
	
	/* GRID */
	.row { display:block; }
	.row .col-12, .row .col-11, .row .col-10, .row .col-9, .row .col-8, .row .col-7, .row .col-6, .row .col-5, .row .col-4, .row .col-3, .row .col-2, .row .col-1 { width:100%; }
	
	.pay-tab li a img { height:40px;}
}