/*****************************
= web@spector.pw / spector.pw
= Last update: 21.02.2026 v2.1
****************************/

/***********************
* Main 
***********************/
* {padding: 0; margin: 0;box-sizing:border-box;}
html { scroll-behavior: smooth;}
html,body {height:100%; min-height:100%!important;}
img {max-width:100%;width: auto; height: auto;}

/***********************
* Display
***********************/
.d-flex {display:flex;} .d-grid {display: grid;} .d-block {display:block;} .d-inline {display:inline;} .d-inbl {display:inline-block;} .d-none {display:none;} .d-table {display:table;}
.d-inherit { display: inherit; }

/***********************
* Colors - Default
***********************/
.clr-white {color:white;} .bg-white {background: white;} /* Частно нужны */
:root {
 --gray-1: #F9F9F9; --gray-2: #f6f6f6; --gray-3: #f0f0f0; --gray-4: #eaeaea; --gray-5: #e2e2e2; --gray-6: #CFCFCF; --gray-7: #c3c3c3; --gray-8: #888; --gray-9: #777; --gray-10: #666;
 --black-1:#080808; --black-2:#111; --black-3:#161616; --black-4:#1b1b1b; --black-5:#222; --black-6:#282828; --black-7:#333; --black-8:#363636; --black-9:#444;--black-10:#555; 
 --primary: #4361ee; --secondary: #7209b7; --success: #4cc9f0; --warning: #f8961e; --danger: #f94144; --dark: #212529; --light: #f8f9fa; 
}

/***********************
* Flex 
***********************/
.fx-wrap {flex-wrap:wrap;}
.fx-cc {justify-content: center;align-items: center;}
/* horizont | justify-content */
.fx-jc-start {justify-content: flex-start; }
.fx-jc-end {justify-content: flex-end; }
.fx-jc-center {justify-content: center;}
.fx-jc-between {justify-content: space-between;}
.fx-jc-around {justify-content: space-around;}
.fx-jc-evenly {justify-content: space-evenly;}
/* vertical | align-items */
.fx-ai-end {align-items: flex-end;}
.fx-ai-start {align-items: flex-start;}
.fx-ai-center {align-items: center;}
.fx-ai-baseline {align-items: baseline;}
/*align-self | to flex -> children | Выравнивание дочернего еэлемента */
.fx-as-start {align-self: flex-start;}
.fx-as-end {align-self: flex-end;}
.fx-as-center {align-self: center;}
.fx-as-stretch {align-self: stretch;}
/*align-content | to flex -> children rows | Выравнивание дочернего еэлемента */
.fx-ac-start {align-content : flex-start;}
.fx-ac-end {align-content : flex-end;}
.fx-ac-center {align-content : center;}
.fx-ac-stretch {align-content : stretch;}
/* nexts */
.fx-1 {flex: 1;}
.fx-column {flex-direction:column;}
.fx-auto {flex:auto;}
.no-flex {flex:unset!important;}
/* GAP | Otstup mejdu elementami flex/grid */
.gap-0 {gap: .5rem;} .gap-1 {gap: .25rem;} .gap-2 {gap: .5rem;} .gap-3 {gap: 1rem;} .gap-4 {gap: 1.5rem;} .gap-5 {gap: 3rem;}
.gap-g1 {gap: 0 .25rem;} .gap-g2 {gap: 0 .5rem;} .gap-g3 {gap: 0 1rem;} .gap-g4 {gap: 0 1.5rem;} .gap-g5 {gap: 0 3rem;}
.gap-v1 {gap: .25rem 0;} .gap-v2 {gap: .5rem 0;} .gap-v3 {gap: 1rem 0;} .gap-v4 {gap: 1.5rem 0;} .gap-v5 {gap: 3rem 0;}
/**/
.gap-w-1 {gap: clamp(0.25rem, 0.25rem + 0.42cqi, 0.88rem);} .gap-w-2 {gap: clamp(0.50rem, 0.50rem + 0.56cqi, 1.25rem);} .gap-w-3 {gap: clamp(0.75rem, 0.75rem + 0.84cqi, 1.88rem);} .gap-w-4 {gap: clamp(1.00rem, 1.00rem + 1.12cqi, 2.50rem);} .gap-w-5 {gap: clamp(1.25rem, 1.25rem + 1.40cqi, 3.13rem);} 
.gap-a-1 {gap: clamp(5px, 1%, 15px);} .gap-a-2 {gap: clamp(10px, 2%, 20px);} .gap-a-3 {gap: clamp(10px, 3%, 30px);} .gap-a-4 {gap: clamp(10px, 4%, 40px);} .gap-a-5 {gap: clamp(10px, 5%, 50px);} .gap-a-6 {gap: clamp(10px, 10%, 80px);} 

/***********************
* position
***********************/
.pos-absolute {position:absolute;}
.pos-fixed {position:fixed;}
.pos-relative {position:relative;}
.pos-sticky {position: sticky;}
.pos-center {top: 50%; left: 50%; transform: translate(-50%, -50%);}
/**/
.pos-inset {inset: 0;} .pos-top {top:0;} .pos-left {left:0;} .pos-right {right:0;} .pos-bottom {bottom:0;}

/***********************
* Width size
***********************/
.w-auto {width: auto;flex: 1 0 auto;}
.w-100 {width: 100%; }
.w-98 {width: 98%;}
.w-90 {width: 90%;}
.w-80 {width: 80%;flex: 1 0 80%;}
.w-75 {width: 75%;flex: 1 0 75%;}
.w-70 {width: 70%; flex: 1 0 70%;}
.w-60 {width: 60%;flex: 1 0 60%;}
.w-50 {width: 50%;flex: 1 0 50%;}
.w-40 {width: 40%;flex: 1 0 40%;}
.w-35 {width: 35%;flex: 1 0 35%;}
.w-33 {width: 33.3%;flex: 1 0 33.3%;}
.w-30 {width: 30%;flex: 1 0 30%;}
.w-25 {width: 25%;flex: 1 0 25%;}
.w-20 {width: 20%;flex: 1 0 20%;}
.w-15 {width: 15%;}
.w-10 {width: 10%;}
/**/
.w-max-300 {max-width:300px;} .w-max-400 {max-width:400px;} .w-max-500 {max-width:500px;} .w-max-1250 {max-width: 1250px;} .w-max-1440 {max-width: 1440px;} .w-max-1600 {max-width: 1600px;} .w-max-1800 {max-width: 1800px;}
/**/
.w-min-0 {min-width:0;} .w-min-100 {min-width:100px;} .w-min-160 {min-width:160px;} .w-min-200 {min-width:200px;} .w-min-250 {min-width:250px;} .w-min-300 {min-width:300px;} .w-min-350 {min-width:350px;} 

/***********************
* Height size
***********************/
.h-100 {height: 100%;} .h-100vh {height: 100vh;}

/***********************
* Оverflow
***********************/
.overflow-hidden {overflow: hidden;}
.overflow-auto {overflow:auto;}
.overflow-y-hidden {overflow-y: hidden;} /*top-bottom*/
.overflow-x-hidden {overflow-x: hidden;} /*left-right*/
.overflow-y-auto {overflow-y: auto;} /*vertical*/
.overflow-x-auto {overflow-x: auto;} /*gorizong*/

/***********************
* ICO - FontAwesome
***********************/
.ico:before { margin-right:5px; text-decoration: inherit;  font-family: FontAwesome;}

/***********************
* Padding
***********************/
.p-0 {padding: 0!important;} .p-1 {padding: .25rem;} .p-2 {padding: .5rem;} .p-3 {padding: 1rem;} .p-4 {padding: 1.5rem;} .p-5 {padding: 3rem;}
.pv-1 {padding: .25rem 0;} .pv-2 {padding: .5rem 0;} .pv-3 {padding: 1rem 0;} .pv-4 {padding: 1.5rem 0;} .pv-5 {padding: 3rem 0;} 
.pg-1 {padding: 0 .25rem;} .pg-2 {padding: 0 .5rem;} .pg-3 {padding: 0  1rem;} .pg-4 {padding: 0 1.5rem;} .pg-5 {padding: 0 3rem;}
/**/
.p-a-1 {padding: clamp(5px, 1%, 15px);} .p-a-2 {padding: clamp(10px, 2%, 20px);}  .p-a-3 {padding: clamp(10px, 3%, 30px);}  .p-a-4 {padding: clamp(10px, 4%, 40px);}  .p-a-5 {padding: clamp(10px, 5%, 50px);} .p-a-6 {padding: clamp(10px, 10%, 80px);} 
.p-w-1 {padding: clamp(0.25rem, 0.25rem + 0.42cqi, 0.88rem);} .p-w-2 {padding: clamp(0.50rem, 0.50rem + 0.56cqi, 1.25rem);} .p-w-3 {padding: clamp(0.75rem, 0.75rem + 0.84cqi, 1.88rem);} .p-w-4 {padding: clamp(1.00rem, 1.00rem + 1.12cqi, 2.50rem);} .p-w-5 {padding: clamp(1.25rem, 1.25rem + 1.40cqi, 3.13rem);}

/***********************
* Margin
***********************/
.m-center {margin:0 auto;}
.m-0 {margin:0!important;} .m-1 {margin: .25rem;} .m-2 {margin: .5rem;} .m-3 {margin: 1rem;} .m-4 {margin: 1.5rem;} .m-5 {margin: 3rem;}
.mv-1 {margin: .25rem 0;} .mv-2 {margin: .5rem 0;} .mv-3 {margin: 1rem 0;} .mv-4 {margin: 1.5rem 0;} .mv-5 {margin: 3rem 0;}
.mg-1 {margin: 0 .25rem;} .mg-2 {margin: 0 .5rem;} .mg-3 {margin: 0  1rem;} .mg-4 {margin: 0 1.5rem;} .mg-5 {margin: 0 3rem;}


/***********************
* Width for size NGS
***********************/
@media (max-width:480px)  {/*xxs*/
	.view-xxs {display:block;} .hidden-xxs {display:none;} /* Hidden & view @media */
	/**/
	.w-xxs-100 {width: 100%;}	.w-xxs-98 {width: 98%;}	.w-xxs-90 {width: 90%;}	.w-xxs-80 {width: 80%;flex: 1 0 80%;}	.w-xxs-75 {width: 75%;flex: 1 0 75%;}	.w-xxs-70 {width: 70%; flex: 1 0 70%;}
	.w-xxs-60 {width: 60%;flex: 1 0 60%;}	.w-xxs-50 {width: 50%;flex: 1 0 50%;}	.w-xxs-40 {width: 40%;flex: 1 0 40%;}	.w-xxs-33 {width: 33.3%;flex: 1 0 33.3%;}
	.w-xxs-30 {width: 30%;flex: 1 0 30%;}	.w-xxs-25 {width: 25%;flex: 1 0 25%;}	.w-xxs-20 {width: 20%;flex: 1 0 20%;}
} 
@media (min-width:480px) and (max-width:600px)  {/*xs*/
	.view-xs {display:block;} .hidden-xs {display:none;} /* Hidden & view @media */
	/**/
	.w-xs-100 {width: 100%;}	.w-xs-98 {width: 98%;}	.w-xs-90 {width: 90%;}	.w-xs-80 {width: 80%;flex: 1 0 80%;}	.w-xs-75 {width: 75%;flex: 1 0 75%;}	.w-xs-70 {width: 70%; flex: 1 0 70%;}
	.w-xs-60 {width: 60%;flex: 1 0 60%;}	.w-xs-50 {width: 50%;flex: 1 0 50%;}	.w-xs-40 {width: 40%;flex: 1 0 40%;}	.w-xs-33 {width: 33.3%;flex: 1 0 33.3%;}
	.w-xs-30 {width: 30%;flex: 1 0 30%;}	.w-xs-25 {width: 25%;flex: 1 0 25%;}	.w-xs-20 {width: 20%;flex: 1 0 20%;}
} 
@media (min-width:600px) and (max-width:800px)  {/*sm*/
	.view-sm {display:block;} .hidden-sm {display:none;} /* Hidden & view @media */
	/**/
	.w-sm-100 {width: 100%;}	.w-sm-98 {width: 98%;}	.w-sm-90 {width: 90%;}	.w-sm-80 {width: 80%;flex: 1 0 80%;}	.w-sm-75 {width: 75%;flex: 1 0 75%;}	.w-sm-70 {width: 70%; flex: 1 0 70%;}
	.w-sm-60 {width: 60%;flex: 1 0 60%;}	.w-sm-50 {width: 50%;flex: 1 0 50%;}	.w-sm-40 {width: 40%;flex: 1 0 40%;}	.w-sm-33 {width: 33.3%;flex: 1 0 33.3%;}
	.w-sm-30 {width: 30%;flex: 1 0 30%;}	.w-sm-25 {width: 25%;flex: 1 0 25%;}	.w-sm-20 {width: 20%;flex: 1 0 20%;}
} 
@media (min-width:800px) and (max-width:1024px)  {/*md*/ 
	.view-md {display:block;} .hidden-md {display:none;} /* Hidden & view @media */
	/**/
	.w-md-100 {width: 100%;}	.w-md-98 {width: 98%;}	.w-md-90 {width: 90%;}	.w-md-80 {width: 80%;flex: 1 0 80%;}	.w-md-75 {width: 75%;flex: 1 0 75%;}	.w-md-70 {width: 70%; flex: 1 0 70%;}
	.w-md-60 {width: 60%;flex: 1 0 60%;}	.w-md-50 {width: 50%;flex: 1 0 50%;}	.w-md-40 {width: 40%;flex: 1 0 40%;}	.w-md-33 {width: 33.3%;flex: 1 0 33.3%;}
	.w-md-30 {width: 30%;flex: 1 0 30%;}	.w-md-25 {width: 25%;flex: 1 0 25%;}	.w-md-20 {width: 20%;flex: 1 0 20%;}
} 
@media (min-width:1024px) and (max-width:1280px)  {/*lg*/
	.view-lg {display:block;} .hidden-lg {display:none;} /* Hidden & view @media */
	/**/
	.w-lg-100 {width: 100%;}	.w-lg-98 {width: 98%;}	.w-lg-90 {width: 90%;}	.w-lg-80 {width: 80%;flex: 1 0 80%;}	.w-lg-75 {width: 75%;flex: 1 0 75%;}	.w-lg-70 {width: 70%; flex: 1 0 70%;}
	.w-lg-60 {width: 60%;flex: 1 0 60%;}	.w-lg-50 {width: 50%;flex: 1 0 50%;}	.w-lg-40 {width: 40%;flex: 1 0 40%;}	.w-lg-33 {width: 33.3%;flex: 1 0 33.3%;}
	.w-lg-30 {width: 30%;flex: 1 0 30%;}	.w-lg-25 {width: 25%;flex: 1 0 25%;}	.w-lg-20 {width: 20%;flex: 1 0 20%;}
} 
@media (min-width:1280px) and (max-width:1536px)  {/*xl*/
	.view-xl {display:block;} .hidden-xl {display:none;} /* Hidden & view @media */
	/**/
	.w-xl-100 {width: 100%;}	.w-xl-98 {width: 98%;}	.w-xl-90 {width: 90%;}	.w-xl-80 {width: 80%;flex: 1 0 80%;}	.w-xl-75 {width: 75%;flex: 1 0 75%;}	.w-xl-70 {width: 70%; flex: 1 0 70%;}
	.w-xl-60 {width: 60%;flex: 1 0 60%;}	.w-xl-50 {width: 50%;flex: 1 0 50%;}	.w-xl-40 {width: 40%;flex: 1 0 40%;}	.w-xl-33 {width: 33.3%;flex: 1 0 33.3%;}
	.w-xl-30 {width: 30%;flex: 1 0 30%;}	.w-xl-25 {width: 25%;flex: 1 0 25%;}	.w-xl-20 {width: 20%;flex: 1 0 20%;}
} 
@media (min-width:1536px)  { /*xxl*/
	.view-xxl {display:block;} .hidden-xxl {display:none;} /* Hidden & view @media */
	/**/
	.w-xxl-100 {width: 100%;}	.w-xxl-98 {width: 98%;}	.w-xxl-90 {width: 90%;}	.w-xxl-80 {width: 80%;flex: 1 0 80%;}	.w-xxl-75 {width: 75%;flex: 1 0 75%;}	.w-xxl-70 {width: 70%; flex: 1 0 70%;}
	.w-xxl-60 {width: 60%;flex: 1 0 60%;}	.w-xxl-50 {width: 50%;flex: 1 0 50%;}	.w-xxl-40 {width: 40%;flex: 1 0 40%;}	.w-xxl-33 {width: 33.3%;flex: 1 0 33.3%;}
	.w-xxl-30 {width: 30%;flex: 1 0 30%;}	.w-xxl-25 {width: 25%;flex: 1 0 25%;}	.w-xxl-20 {width: 20%;flex: 1 0 20%;}
} 

/***********************
* Font-Family 
***********************/
.ff-roboto-slab {font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;}
.ff-roboto {font-family: 'Roboto', Arial, Helvetica, sans-serif;}
.ff-lora {font-family: 'Lora', 'Times New Roman', Times, serif;}
.ff-open-sans {font-family: 'Open Sans', Verdana, Geneva, sans-serif;}
.ff-montserrat {font-family: 'Montserrat', Impact, 'Arial Black', Gadget, sans-serif; /*letter-spacing: -0.5px;*/}
.ff-inter {font-family: 'Inter', Arial, Helvetica, sans-serif;}
.ff-georgia {font-family: Georgia, 'Times New Roman', Times, serif;}
.ff-poppins {font-family: 'Poppins', Arial, Helvetica, sans-serif;}
.ff-raleway {font-family: 'Raleway', Arial, Helvetica, sans-serif;}
.ff-merriweather {font-family: 'Merriweather', Georgia, 'Times New Roman', serif;}
.ff-source-sans {font-family: 'Source Sans Pro', Arial, Helvetica, sans-serif;}

/***********************
* line-height 
***********************/
.lh-100 {line-height: 1;} .lh-125 {line-height: 1.25;} .lh-140 {line-height: 1.4;} .lh-150 {line-height: 1.5;} .lh-160 {line-height: 1.6;} .lh-180 {line-height: 1.8;}

/***********************
*  Font-size
***********************/
.fs-075 {font-size: 0.75rem;} .fs-087 {font-size: 0.875rem;} .fs-100 {font-size: 1rem;} .fs-110 {font-size: 1.1rem;} .fs-125 {font-size: 1.25rem;} .fs-150 {font-size: 1.5rem;}
.fs-175 {font-size: 1.75rem;} .fs-200 {font-size: 2rem;} .fs-250 {font-size: 2.5rem;} .fs-300 {font-size: 3rem;}
/* Font-weight */
.fw-300 {font-weight: 300;} .fw-400 {font-weight: 400;} .fw-500 {font-weight: 500;} .fw-600 {font-weight: 600;} .fw-700 {font-weight: 700;}

/***********************
* img
***********************/
.img-cover {object-fit: cover;  object-position: center;}

/***********************
* list-style ul/ol
***********************/
.ls-none {list-style:none;}
.ls-square {list-style-type: square;}

/***********************
* text: decoration
***********************/
.td-none {text-decoration:none;}
.td-dotted {text-decoration: underline dotted;}
.td-underline {text-decoration: underline;}
.no-wrap {white-space: nowrap;}

/***********************
* Transition / Animations
***********************/
.tr-25 {transition: 0.25s;}
.tr-50 {transition: 0.5s;}
.tr-100 {transition: 1s;}
.tr-cb {transition: all 0.4s cubic-bezier(0.5, 2, 0.5, 1);}

/***********************
* text utils
***********************/
.tt-upper {text-transform: uppercase;} 
.tt-lower {text-transform: lowercase;}
.fst-normal {font-style: normal;} 
.fst-italic {font-style: italic;}
.no-select {user-select: none;}

/***********************
* Order
***********************/
.order-m1 {order: -1;} .order-0 {order: 0;} .order-1 {order: 1;} .order-2 {order: 2;} .order-3 {order: 3;}

/***********************
* text align
***********************/
.text-left {text-align:left;}
.text-right {text-align:right;}
.text-center {text-align:center;}

/***********************
* float
***********************/
.float-left {float:left;}
.float-right {float:right;}
.float-clear {clear: both;}

/***********************
* Aspect-ratio
***********************/
.aspect-16x9 {width: 100%; aspect-ratio: 16/9;}
.aspect-9x16 {width: 100%; aspect-ratio: 9/16;}
.aspect-6x9 {width: 100%; aspect-ratio: 6/9;}
.aspect-1x1 {width: 100%; aspect-ratio: 1/1;}
.aspect-2x1 {width: 100%; aspect-ratio: 2/1;}

/***********************
* Три точки вместо переноса
***********************/
.text-ellips {white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}

/***********************
* box-shadow
***********************/
.bs-1 {box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1);} .bs-2 {box-shadow: 0px 0px 5px -1px rgba(0,0,0,.2);} .bs-3 {box-shadow: 0px 0px 15px -5px rgba(0,0,0,.5);}
/**/
.bs-xs {box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);}
.bs-sm {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);}
.bs-md {box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);}
.bs-lg {box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);}
.bs-xl {box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);}
.bs-inner {box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);}
.bs-top {box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08);}
.bs-right {box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);}
.bs-flat {box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);}
/**/
.hvr\:bs:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
.hvr\:bs-lg:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); }
.hvr\:bs-inner:hover { box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1); }

/***********************
* box-shadow-inside
***********************/
.bsi-1 {box-shadow: 0px 0px 5px 0px rgba(34, 60, 80, 0.22) inset;}

/***********************
* border-radius 
***********************/
.br-1 {border-radius: .25rem;} .br-2 {border-radius: .5rem;} .br-3 {border-radius: 1rem;} .br-4 {border-radius: 1.5rem;} .br-5 {border-radius: 3rem;}

/***********************
* z-index 
***********************/
.zi-m1 {z-index:-1;} .zi-0 {z-index:0;} .zi-1 {z-index:1;} .zi-2 {z-index:2;} .zi-10 {z-index:10;} .zi-100 {z-index:100;} .zi-999 {z-index:999;}

/***********************
* background blur  
***********************/
.bg_blure-1 {backdrop-filter: blur(1px);}
.bg_blure-2 {backdrop-filter: blur(2px);}
.bg_blure-3 {backdrop-filter: blur(3px);}
.bg_blure-4 {backdrop-filter: blur(5px);}
.bg_blure-5 {backdrop-filter: blur(10px);}

/***********************
* Hover  
***********************/
.hvr\:scale:hover {transform: scale(1.05);}
.hvr\:scale-m:hover {transform: scale(.95);}
.hvr\:rotate-s:hover {transform: rotate(-5deg) scale(1.02);}
.hvr\:lift:hover { transform: translateY(-5px);}
.hvr\:tilt:hover {transform: perspective(500px) rotateX(5deg) rotateY(5deg); box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);}
.hvr\:rotate-m:hover {transform-style: preserve-3d;  transform: perspective(800px) rotateY(20deg) rotateX(10deg) translateZ(20px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);}

/***********************
* Opacity  
***********************/
.op-0 {opacity: 0;} .op-100 {opacity: 1;} .op-90 {opacity: .9;} .op-75 {opacity: 0.75;} .op-50 {opacity: 0.5;} .op-25 {opacity: 0.25;}
.hvr-op-0:hover {opacity: 0;} .hvr-op-100:hover {opacity: 1;} .hvr-op-80:hover {opacity: .8;} .hvr-op-60:hover {opacity: .6;} .hvr-op-40:hover {opacity: .4;} .hvr-op-20:hover {opacity: .2;}

/***********************
* drop-down list  
***********************/
/*<div class="dd-list"><button> Выберите страну <i class="fas fa-chevron-down"></i> </button><ul> <li><a href="#"><i class="fas fa-flag"></i> Россия</a></li></ul></div> */
.dd-list>button { /*background-color: #4361ee; color: white; padding: 14px 20px; border-radius: 8px; width: 100%; text-align: left; cursor: pointer; transition: all 0.3s ease; */}
.dd-list>ul { list-style: none; position: absolute; width: 100%; opacity: 0; visibility: hidden; transform: translateY(-10px); /*transition: all 0.3s ease; background-color: white; border-radius: 8px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);*/} 
.dd-list>button:focus + .focus-list, .focus-list:focus-within { opacity: 1; visibility: visible; transform: translateY(0); } 
.dd-list>button:focus i { transform: rotate(180deg);} 

/***********************
* old - no cats  
***********************/
.cr-pointer {cursor:pointer;}

/***********************
 * Grid Utilities
 ***********************/
/* Основные grid-шаблоны */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Расположение элементов */
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-full { grid-column: 1 / -1; }
.row-span-2 { grid-row: span 2 / span 2; }
.row-span-3 { grid-row: span 3 / span 3; }
/* Grid размещение */
.place-items-center { place-items: center; }
.place-content-center { place-content: center; }
/* Auto-fit/auto-fill (очень полезно!) */
.grid-auto-fit {grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));}
.grid-auto-fill {grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));}

/***********************
* border
***********************/
.bdr-0 {border: 1px solid transparent;} .bdr-1 {border: 1px solid rgba(248,245,242,0.1);} .bdr-2 {border: 1px solid #e5e7eb;} .bdr-3 {border: 1px solid rgba(0,0,0,.1);}
.hvr-bdr-1:hover {border: 1px solid rgba(248,245,242,0.1);} .hvr-bdr-2:hover {border: 1px solid #e5e7eb;} .hvr-bdr-3:hover {border: 1px solid rgba(0,0,0,.1);}

/***********************
* Experemental
***********************/
.view_row {display: -webkit-box;  -webkit-box-orient: vertical;  overflow: hidden; }
.vr-1 {-webkit-line-clamp: 1;} .vr-2 {-webkit-line-clamp: 2;} .vr-3 {-webkit-line-clamp: 3;} .vr-4 {-webkit-line-clamp: 4;} .vr-5 {-webkit-line-clamp: 5;}
.bg-scroll-fix { background-attachment: fixed;  background-size: cover;}