/* i@spector.pw * 06.25 v.3 */
/****************************/
/***********************
* Main 
***********************/
*{padding: 0; margin: 0;box-sizing:border-box;}
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;}

/***********************
* 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;}
/* 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;}
.gapg-1 {gap: 0 .25rem;} .gapg-2 {gap: 0 .5rem;} .gapg-3 {gap: 0 1rem;} .gapg-4 {gap: 0 1.5rem;} .gapg-5 {gap: 0 3rem;}
.gapv-1 {gap: .25rem 0;} .gapv-2 {gap: .5rem 0;} .gapv-3 {gap: 1rem 0;} .gapv-4 {gap: 1.5rem 0;} .gapv-5 {gap: 3rem 0;}


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

/***********************
* 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-1250 {max-width: 1250px;}
.w-max-1440 {max-width: 1440px;}
.w-max-1600 {max-width: 1600px;}
.w-max-1800 {max-width: 1800px;}
/**/
.w-min-100 {min-width:100px;}
.w-min-200 {min-width:200px;}
.w-min-300 {min-width:300px;}
.w-min-0 {min-width:0;}

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

/***********************
* О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-scroll {overflow-y: scroll;} /*vertical*/
.overflow-x-scroll {overflow-x: scroll;} /*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;}
/*vertical*/
.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;} 
/*horizontal*/
.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;}

/***********************
* 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;}
/*vertical*/
.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;}
/*horizontal*/
.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;}

/***********************
* Hidden & view @media
***********************/
@media (max-width:576px)  {.view-xs {display:block;} .hidden-xs {display:none;}}
@media (min-width:576px) and (max-width:768px)  {.view-sm {display:block;} .hidden-sm {display:none;}}
@media (min-width:768px) and (max-width:992px)  {.view-md {display:block;} .hidden-md {display:none;}}
@media (min-width:992px) and (max-width:1200px)  {.view-lg {display:block;} .hidden-lg {display:none;}}
@media (min-width:1200px) and (max-width:1400px)  {.view-xl {display:block;} .hidden-xl {display:none;}}
@media (min-width:1400px)  {.view-xxl {display:block;} .hidden-xxl {display:none;}}

/***********************
* Width for size
***********************/
@media (max-width:576px)  {
	.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:576px) and (max-width:768px)  {
	.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:768px) and (max-width:992px)  {
	.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:992px) and (max-width:1200px)  {
	.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:1200px) and (max-width:1400px)  {
	.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:1400px)  {
	.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-Montserrat {font-family: "Montserrat", sans-serif;}
#ff-Mulish {font-family: "Mulish",sans-serif;}
#ff-Raleway {font-family: 'Raleway',sans-serif;}
#ff-OpenSans {font-family: 'Open Sans',sans-serif;}
#ff-Roboto {font-family: 'Roboto', sans-serif;} 

/***********************
*  Font-size
***********************/
.fs-06 {font-size:.6rem!important;}
.fs-08 {font-size:.8rem!important;}
.fs-1 {font-size:1rem!important;}
.fs-1x2 {font-size:1.2rem!important;}
.fs-1x5 {font-size:1.5rem!important;}
.fs-2 {font-size:2rem!important;}
/* Font-weight */
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}

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

/***********************
* ul/ol
***********************/
.list-unstyled {list-style:none;}

/***********************
* text: decoration
***********************/
.text-decoration-none {text-decoration:none;}
.text-decoration-dotted {text-decoration: underline dotted;}
.text-decoration-underline {text-decoration: underline;}

/***********************
* Transition / Animations
***********************/
.transition-0x2 {transition: 0.2s;}
.transition-0x5 {transition: 0.5s;}
.transition-1 {transition: 1s;}

/***********************
* text: transform
***********************/
.text-transform-uppercase {text-transform: uppercase;}

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

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

/***********************
* Aspect-ratio
***********************/
.aspect-16x9 {width: 100%; aspect-ratio: 16/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;}

/***********************
* Experemental
***********************/
.view-row-1 {display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 1;  overflow: hidden;}
.view-row-2 {display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;  overflow: hidden;}
.view-row-3 {display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  overflow: hidden;}
.view-row-5 {display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 5;  overflow: hidden;}
.bg-scroll-fix { background-attachment: fixed;  background-size: cover; /*background-image: url('background.jpg');*/}

/***********************
* box-shadow
***********************/
.bs-1 {box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.1);}
.bs-2 {box-shadow: 0px 0px 6px rgba(0,0,0,.02),0px 2px 4px rgba(0,0,0,.08);}
.bs-3 {box-shadow: 0px 0px 6px -1px gray;}
.bs-4 {box-shadow: 1px 0px 6px -2px rgba(34, 60, 80, 0.2);}
.bs-5 {}

/***********************
* 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;}

/***********************
* Content 
***********************/
.content {}
.content p + p {padding:5px 0;}

/***********************
* 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);}

/***********************
* href & btn
***********************/
.btn {display: inline-block;text-align: center;  text-decoration: none;  vertical-align: middle;border: 1px solid transparent;padding: .375rem .75rem;  font-size: 1rem;border-radius: .25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
