/*Определяем основные цвета сайта*/
:root{
    --c1:#2249CA;
    --c1-1:#20285B;
    --c2:#49C236;
    --c2-2: #309421;
    --ct:#262626;
    --cl:#DFEAF9;
    --gr:linear-gradient(270.08deg, #20285B 0.15%, #2249CA 108.49%);;
    --shadow:-3px 3px 15px 3px rgba(211, 217, 232, 0.8);;
}
/*Цвета*/
.c1{color:var(--c1)}
.c1-1{color:var(--c1-1)}
.cl{color:var(--cl)}
.cw{color:white!important}
.bg1{background-color:var(--c1)!important;color:white}
.bg1-1{background-color:var(--c1-1)!important;color:white}
.bgw{background-color:white!important}
.bgl{background-color:var(--cl)!important}

/*Общие*/
img{max-width:100%}
.hide{display:none!important}

/*Кнопки*/
.btn{padding:0.5rem 1.25rem;white-space:nowrap;justify-content:center;color:white;font-size:15px;display:inline-flex;transition:all 0.5s 0s;gap:0.5rem;border-radius:3px;border:none;user-select:none;font-weight:700;background-color:var(--c1)}
.btn:hover{background-color:var(--c1-1)!important;color:white !important;}
.btn .icon {background-color: white}
.btn.lg{padding:0.75rem 2rem;font-size:1rem}
.btn.sm{padding:0.25rem 0.5rem;font-size:0.8rem}

.btn2{color:white;background-color:var(--c2)}
.btn2:hover{background-color:var(--c2-2)!important}

.btn3{color:var(--c1);border:1px solid var(--c1);background-color:transparent}
.btn3:hover{color:var(--c1-1)!important;background-color:white!important;}
.btn3 .icon {background-color: var(--c1)}

.btn_link{padding:0;border:none;color:var(--c1);background-color:transparent;display:inline-flex;gap:0.5rem;font-weight:700}
.btn_link:hover{color:var(--c1-1)}

/*Иконки*/
.rating-page .icon{width:1.5rem;height:1.5rem;-webkit-mask:url(../img/arrow.svg) no-repeat center/contain;background-color:var(--c1);display:inline-block;margin:auto 0}
.rating-page  .icon.sm{width:1rem;height:1rem}

.icon.search{-webkit-mask-image:url(../img/search.svg)}
.icon.heart{-webkit-mask-image:url(../img/heart.svg)}
.icon.compare{-webkit-mask-image:url(../img/compare.svg)}
.icon.services{-webkit-mask-image:url(../img/services.svg)}
.icon.cart{-webkit-mask-image:url(../img/cart.svg)}
.icon.thumb{-webkit-mask-image:url(../img/thumb.svg)}

.icon.time{-webkit-mask-image:url(../img/time.svg)}
.icon.calendar{-webkit-mask-image:url(../img/calendar.svg)}
.icon.views{-webkit-mask-image:url(../img/views.svg)}
.icon.man{-webkit-mask-image:url(../img/man.svg)}

.icon.price{-webkit-mask-image:url(../img/price.svg)}
.icon.plan{-webkit-mask-image:url(../img/plan.svg)}


/*.stars*/
.stars { display: block; height: 17px; width: 100px; -webkit-mask: url(../img/star_fill.svg) space left/17px 17px; background-color: gold; margin: auto 0; }
/*.stars*/

.rating-page .block {background-color: white; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); border-radius: 10px; margin-bottom: 1.5rem}

.rating-page .autor {background-color:whitesmoke; padding: 1rem;border-radius: 5px; text-align: center }
.rating-page .autor img {display: block; margin: -2.5rem auto 1.5rem auto;border-radius: 200px;}
.rating-page .autor .name {font-weight: 700;margin-bottom: 0.75rem;font-size: 18px;}
.rating-page .autor .description {font-size: 14px;}

.autor_tovar .item {text-align: center}
.autor_tovar .item .name {color: var(--c1);font-size: 18px;font-weight: 500; margin-bottom: 1rem;height: 27px;overflow: hidden;}
.autor_tovar .item .img {height: 350px; margin-bottom:1rem; background: #FFFFFF;box-shadow: 0 0 20px rgba(10, 16, 35, 0.2);border-radius: 5px;}
.autor_tovar .item .img img {width: 100%; height: 100%; object-position: center; object-fit: contain; padding: 1.5rem}
.autor_tovar .item .text { border-radius: 5px; width: 100%; font-size: 14px; background-color: var(--c2); color: white; text-align: center; line-height: 1; padding: 0.5rem; }



/*tovar-item*/
.tovar-item {text-align: center;margin-top: 20px;}
.tovar-item .name {color: var(--c1);font-size: 28px;font-weight: 500;margin-bottom: 1rem}
.tovar-item img {max-height: 250px; width: auto; margin-bottom: 1rem}
.tovar-item .price {font-weight: 500;margin: 1rem 0}
.tovar-item .rating {display: flex; column-gap: 1rem;font-weight: 300;font-size: 16px}
.tovar-item .rating .line {width:100px; height: 10px; background-color: var(--cl);border-radius: 2px;margin: auto 0 auto auto}
.tovar-item .rating .line span {display: block; height: 100%; background-color: var(--c1);border-radius: 2px;}
.tovar-item .rating small {font-size: 14px;color: #C0C3C5;}
.tovar-item .btns {display: flex; column-gap: 1rem; justify-content: center}
/*End tovar-item*/

/*tovar-big-item*/
.tovar-big-item h2 { color: var(--c1);font-size: 22px; border-bottom: 1px solid var(--cl); margin-bottom: 1.5rem; font-weight: 500; text-transform: uppercase;display: flex; column-gap: 1rem; line-height: 50px; }
.tovar-big-item h2 span { width: 50px; height: 50px; line-height: 50px; text-align: center; min-width: 50px; background-color: var(--c1); color: white; display: block; border-radius: 3px; }
.tovar-big-item .rating {padding: 1rem; width: 100%; border-radius: 3px;border: 1px solid var(--cl);display: flex; justify-content: space-between;margin-bottom: 1.5rem}
.tovar-big-item .rating .value {width: 80px; min-width: 80px;height: 80px; background-color: var(--c1); line-height: 80px; text-align: center;border-radius: 100px; color: white; margin-top: -1.5rem; margin-bottom: -1.5rem;}
.tovar-big-item .stars {margin-left: auto;margin-right: 2rem}
.tovar-big-item .param {display: flex; padding: 0 1rem; margin-bottom: 0.5rem; column-gap: 1rem;font-weight: 300;white-space: nowrap}
.tovar-big-item .param .line {width:50%; height: 10px; background-color: var(--cl);border-radius: 2px;margin: auto 0 auto auto}
.tovar-big-item .param .line span {display: block; height: 100%; background-color: var(--c2);border-radius: 2px;}
.tovar-big-item .like {margin-top: 1rem; font-weight: 500; padding: 1rem; border-radius: 3px; border: 1px solid var(--cl)}
.tovar-big-item .like .btn {display: inline-flex;}
.tovar-big-item .like [data-like] .icon {background-color: white}
.tovar-big-item .like [data-dislike] .icon {transform: rotate(180deg)}
.tovar-big-item .right {display: flex; flex-direction: column; justify-content: space-between}
.tovar-big-item .owl-carousel {box-shadow: 0 0 20px rgba(10, 16, 35, 0.2);border-radius: 5px; background-color: white }
.tovar-big-item .owl-carousel img {padding: 1.5rem}
.tovar-big-item .tabs {margin-top: 1.5rem;}
.tovar-big-item .tab {margin-top: 1rem;}
.tovar-big-item .tabs .btns {display: flex;border-bottom:1px solid #d1d1d1; justify-content: space-between;column-gap: 0.5rem}
.tovar-big-item .tabs .btns .btn {width: 100%;border-radius:5px 5px 0 0;   padding: 0.75rem 1rem; background-color: var(--cl); border: none;text-transform: uppercase;color: var(--ct);font-weight: 400}
.tovar-big-item .tabs .btns .btn.show {background-color: var(--c2); color: white}
.tovar-big-item .tab_params .btn {display: flex;border: none;color: var(--ct);padding: 0;margin-top: 1.5rem}
.tovar-big-item .tab_params .btn i {background-color: var(--ct);width: 12px;transform: rotate(90deg)}
.tovar-big-item .tab_params .btn.show i{transform: rotate(-90deg)}
.tovar-big-item .tab_params table {border: none}
.tovar-big-item .tab_params td {border: none;}
.tovar-big-item .tab_params td:first-child {min-width: 300px}

.tovar-big-item .main_param {min-width: 250px}

.tovar-big-item .tab_plus h3 {font-size: 18px;line-height: 30px; color: var(--c2);border-bottom: 1px solid var(--c2);display: flex; column-gap: 1rem; padding: 0.5rem 0}
.tovar-big-item .tab_plus h3:before {content: ""; width: 30px; height: 30px; -webkit-mask: url('../img/plus.svg') no-repeat center/contain; background-color: var(--c2);}

.tovar-big-item .tab_plus .minus h3  {color: #C0C3C5;border-bottom-color: #C0C3C5 }
.tovar-big-item .tab_plus .minus h3:before {background-color:#C0C3C5}
.tovar-big-item .video {border-radius: 5px;min-height: 460px}

@media (max-width:768px){
    .tovar-big-item .like {display: flex; flex-wrap: wrap;justify-content: space-between}
    .tovar-big-item .like>div {width: 100%}
    .tovar-big-item .like .btn {display: flex;width: 48%;font-size: 0}
    .tovar-big-item .tabs .btns  {flex-wrap: wrap;column-gap: 0}
    .tovar-big-item .tabs .btns .btn {width: 50%; border-radius: 0;font-size: 12px;}
    .tovar-big-item .rating {font-size: 12px;}
    .tovar-big-item .rating .value {font-size: 18px;}
    .tovar-big-item h2 {line-height: 25px}
    .tovar-big-item .tab_params td {display: block;padding: 0!important;}
    .tovar-big-item .tab_params td:first-child {padding:  0!important;font-weight: 900}
    .tovar-big-item .owl-carousel {height: auto}
}

/*End tovar-big-item*/

/*post-big-item*/
.post-big-item{min-height: 500px;z-index: 1; transition: all 0.5s 0s; overflow: hidden; padding: 1rem 1.5rem ; position: relative; background-size: 105%; border-radius: 10px;display: flex; flex-direction: column; justify-content: space-between}
.post-big-item:before {content: ""; z-index: -1; width: 100%; height: 100%; top: 0;left: 0; background-color: black;opacity: 0.3;position: absolute}
.post-big-item:hover {background-size: 100%}
.post-big-item .name {font-size: 30px;line-height: 1.2; font-weight: 500;color: white;text-align: center;padding: 0 2rem}
.post-big-item .cats {display: flex; justify-content: center}
.post-big-item .cat {color: white;border-radius: 3px; display: inline-block; background-color: rgba(0, 0, 0, 0.4); padding: 0 1rem; line-height:25px; text-align: center;font-size: 12px; text-transform: uppercase; }
.post-big-item .bottom {display: flex; column-gap: 2rem;color: white;row-gap: 0.5rem;font-size: 14px;font-weight: 300;}
.post-big-item .bottom>*{display: flex;}
.post-big-item .bottom .icon {background-color: white;margin: auto 1rem auto 0;}
@media (max-width:768px){
    .post-big-item{min-height: 300px}
    .post-big-item .name {font-size: 20px;}
    .post-big-item .bottom {column-gap: 0.75rem;font-size: 12px}
    .post-big-item .bottom .icon {margin-right: 0.25rem}
}
/*End post-big-item*/

/*FAQ*/
.faq-b h2, .faq-b h2+p{margin-bottom: 1rem}
.faq-b .faq-items {display: flex;flex-direction: column; justify-content: start}
.faq-b .faq-item {margin-bottom: 0.5rem;border-bottom: 1px solid var(--cl);}
.faq-b .faq-item.hide{display: none}
.faq-b .faq-item .name {font-weight: bold;cursor: pointer; padding: 0 1rem; background-color: white;  font-size: 1.1rem; display: flex; justify-content: space-between}
.faq-b .faq-item .name span {margin: auto 0;}
.faq-b .faq-item .name:after{content: "+";opacity: 0.9; font-size: 30px;color: var(--c1)}
.faq-b .faq-item .name:not(.show):after{content: "-"}
.faq-b .faq-item .text {padding: 1rem;background-color: white;}
.faq-b .faq-item .text.hide{display: none}
.faq-b .faq-form {text-align: center}


/*Таблица*/
.content table{border-radius:0.3rem; width: 100%; display:inline-block; border: 1px solid var(--cl); border-collapse:collapse;max-width:100%;overflow:auto;font-size:12px;line-height:1}
.content thead{font-weight: 500;text-align:center}
.content table tr{padding:0.5rem!important;}
.content table th{padding:1rem;border: 1px solid var(--cl);font-weight: 500}
.content tbody td{padding:0.5rem 1rem!important;border: 1px solid var(--cl);}
.content tbody tr:hover{background-color:#f9f9f9}

/*Списки*/
.content ul{list-style:none}
.content ul li,.content ol li{position:relative;padding-left:20px;padding-bottom:15px}
.content ul li:before { content: ""; width: 7px; height: 7px; position: absolute; left: 0; top: 8px; background-color: var(--c1); border-radius: 10px; }
.content ol{margin:30px 0;counter-reset:list;list-style:none}
.content ol li:before { width: 25px; height: 25px; position: absolute; left: -14px; top: -2px; border-radius: 20px; z-index: 2; color: var(--c1); font-weight: 700; counter-reset: none; counter-increment: list; content: counter(list); text-align: center; line-height: 17px; border: 5px solid #e8e8e8; font-size: 12px; }


.rating-page * {box-sizing: border-box;}

@media (max-width:768px){
    .content iframe{height:240px}
    .content table {font-size: 12px;}
    .content table th {padding: 0.5rem !important;}
    .content tbody td {padding: 0.5rem !important;}
}

/*End Контент*/