@import url("css/2.2-icons-boxicons.css");
/*
@import url("style-icons-zond.css");
@import url("style-icons-fa-r.css");
@import url("style-icons-fa-s.css");
@import url("style-icons-fa-sr.css");
@import url("style-icons-fa-ss.css"); */

:root {
/*** COLOR ***/	
--clr-m:#0057A6;							/*clr - color; m - main*/ 
--clr-s:#E40014;							/*s - second*/ 
--clr-t:#3DA3FF;							/*s - second*/ 
--clr-f:#F4FAFF;							/*t - third*/ 
--clr-w:#ffffff;							/*w - third*/
--clr-g:#E1F1FF;							/*g - grey*/
--clr-d:#8A97A5;							/*d - dark grey*/
--clr-b:#00294E;							/*b - black*/
--clr-i:#ffffff;							/*i - color in main color*/
--clr-o:0.4;								/*o - opacity*/
--clr-m-o:rgba(0,87,166, var(--clr-o));		/*m - main opacity*/
--clr-s-o:rgba(228,0,20, var(--clr-o));		/*s - second*/
--clr-t-o:rgba(255,145,0, var(--clr-o));	/*t - third*/
--clr-w-o:rgba(255,255,255, var(--clr-o));	/*w - third*/ 
--clr-g-o:rgba(255,241,255, var(--clr-o));	/*g - grey*/ 
--clr-d-o:rgba(113,112,109, var(--clr-o));	/*d - dark grey*/
--clr-b-o:rgba(0,0,0, var(--clr-o));		/*t - black*/ 
--clr-bg-gr:rgba(255, 200, 4, 0) 0%, rgba(255, 200, 4, var(--clr-o)) 100%; /* bg gradient */
--bg-gradient-s:rgba(255, 200, 4, 0) 0%; --bg-gradient-e:rgba(255, 200, 4, var(--clr-o)) 100%; /*** COLOR change ***/
/*** COLOR END ***/	

/*** MAIN ***/	
--wrap:90;
--mrg-f:1em;
--mrg-c:calc(var(--mrg-f)/2);
--pad-f:1em;
--pad-c:calc(var(--pad-f)/2);
--icon-s:3em;
--icon-w:var(--icon-s);
--icon-h:var(--icon-s);
--shadow-n:;
--shadow-o:;

/*** GAP ***/
--min-div-w:120px;
--col-gap-px:18; /* 1 = 1px*/
--col-gap-vw:0; /* 1 = 1vw*/
--col-gap:calc(1vw*var(--col-gap-vw) + 1px*var(--col-gap-px));	

/*** border & radius ***/
--brd-s:2px;
--brd-rad-f:250px;
--brd-rad-s:1em;
--block-pad:0%; /*block-pading*/
--block-brd-s:var(--brd-s); /*block-border*/
--block-brd-rad:var(--brd-rad-s); /*block-border-radius*/

/*** buttons & forms ***/	

--btn-position:left;	 /* justify-content: left	*/
--btn-font-s:1em;
--btn-mrg:1em;
--btn-pad:1em;
--btn-clr:var(--clr-w);
--btn-bg:var(--clr-m);
--btn-brd-c:var(--clr-s);
--btn-brd-s:1px;
--btn-brd-rad:var(--block-brd-rad);
--btn-h:;
--btn-w:;
--btn-ba-pad:1em;
--btn-ba-bg:var(--clr-w);

--btn-clr-o:var(--clr-m);;
--btn-ba-bg-o:var(--clr-m);
--btn-bg-o:var(--clr-w);
--btn-brd-c-o:;


/* input & textform NOT select & button */
--form-font-s:1em;
--form-mrg:1em;
--form-pad:1em;
--form-clr:var(--clr-m);
--form-bg:var(--clr-w);
--form-dis:var(--clr-d);
--form-brd-c:var(--clr-m-o);
--form-brd-s:0.05em;
--form-brd-s:1px;
--form-brd-rad:0.15em;
--form-brd-rad:var(--brd-rad-s);	
--form-w:calc(var(--form-font-s) + var(--form-brd-s) + 0.1em);
--form-h:calc(var(--form-font-s) + var(--form-brd-s) + 0.1em);
	





/*** Structure ***/
--head-h:140px; /* HEADER height */
--head-logo-w:80px; /* LOGO W */
--head-logo-h:80px; /* LOGO H */
--head-mrg:3em; /* for breadcrumbs & footer logo */
--head-pad:0em;

--top-page-h:calc(90vh - 107px - 1em);
--top-page-h:calc(90vh - var(--head-h) - 1em);

--aside-w:250px; /* for aside */
--asidel-w:var(--aside-w);
--asider-w:var(--aside-w);
	
--contact-block-w:calc(100% - var(--icon-w) - 1em);
	
	
/*radio-btn
--lbl-radio:1.5em;
--lbl-radio-in:1.5;
--radius-lbl-radio:2px;
--half-lbl-radio:calc(var(--lbl-radio) / 2);
--quat-lbl-radio:calc(var(--lbl-radio) / 4); */
/*------------------------------*/
	
}
.has-aside h2 {margin-top: 0}
	grid-3 column-first
	block box-block
	box
center {
border:var(--block-brd-s) solid var(--clr-s); 
border-radius:var(--brd-r) var(--brd-r) var(--brd-r) var(--brd-r);
border-radius:var(--brd-r);
}

.clr-inverse {}
.clr-inverse h1, .clr-inverse strong, .clr-inverse p, .clr-inverse li, .clr-inverse .breadcrumbs a span {color:var(--clr-w)}
.clr-inverse a {color:var(--clr-g)}
.clr-inverse .main-body-content p, .clr-inverse .main-body-cat-content p {color:var(--clr-g)}
.clr-inverse .breadcrumbs a span {color:var(--clr-f);}
.clr-inverse strong {}




/*-------------------------------------------------------------------------*/
/*	3.4 Fancybox Pop Up C-517
/*-------------------------------------------------------------------------*/
.sl-carousel .sl-nav button.sl-next, .sl-carousel .sl-nav button.sl-prev {top:50%;}



/*--------------------------------------------------------------------------*/
*{font-family: "Ubuntu Sans", sans-serif; font-weight:400; line-height:1.5em;}
html, body {min-height:100vh; font-size:18px;}
body {background:var(--clr-w); background-size:auto;}
b, strong, em {font-weight:500;}


.temp-02 {background:none; padding-top:1em; padding-bottom:1em; /*background:var(--clr-b); padding-top:1em; padding-bottom:0em;*/}
#menudrop {/*border-bottom:2px solid var(--clr-g); padding:0 0 1em 0;*/}
#menudrop > nav > ul > li > a {text-transform:none; /*color:var(--clr-w); font-size:1em*/}
#menudrop ul ul li a {color:var(--clr-w); background:var(--clr-m);}
.temp-02 #menudrop ul {padding:0; justify-content:space-between;}



/*--------------------------------------------------------------------------*/
/* Constant'S */
.cc-banner .cc-message {color: var(--clr-w);}
.cc-banner .cc-message a {color:var(--clr-g);}


.box-tag-btn .btn {background:var(--clr-f); color:var(--clr-m)}
.button-blue p {background:var(--clr-m);}
.button-red p {background:var(--clr-s);}

/*
.box-1, .box-2, .box-3 {box-shadow:10px 40px 50px rgba(229, 233, 246, 0.4);}
*/
.box-title::after {/*content:''; display:block; margin-left:1em; padding:0.5em; background:var(--clr-b); -webkit-mask:var(--svg-icon-arrow) no-repeat center; mask:var(--svg-icon-arrow)no-repeat center; -webkit-mask-size:100% !important; mask-size:100% !important;*/}

???????????????????????
.box-1 > div:last-child {padding-bottom:0;}

.box-1 a:hover .box-more:after, .box-2 a:hover .box-more:after {margin-left:20px;}
.box-1 a:hover .box-more:after {margin-left:20px;}
.box-1:hover .box-button:after {content:''; margin-left: 10px;}
.box-2:hover .box-button:after {content:''; margin-left: 10px;}
.chess .box-2:nth-child(2n) .box-block {flex-direction: row-reverse;}



/*--------------------------------------------------------------------------*/
div.main-content {--top-page-h:calc(100vh - 107px - 1em); background:no-repeat bottom; background-size:100% auto}
.main-content > section, .main-content {margin-top:0}

/* #article-body-main {padding-top:4em; width:100%}
article {width:calc(100% - 350px); overflow: hidden}
aside {width: 300px; float: right; flex: 2;}*/

.main-header-2 {background-size:cover;}
/*.main-header-2 .main-header-title { height:auto; align-content:center;}*/
.main-header-title {width:100%; align-content:flex-start;  /*margin-top:4em; width:50%; margin:10em auto 1em; background-color:var(--clr-b-o); border-radius:2.5em; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);*/}
.main-header-title h1 {font-weight:400; text-transform:none;/*color:var(--clr-g); text-align:center; margin-bottom:0.5em; justify-content:center*/}
.main-header-gr-but {position:absolute; z-index:1; align-content:center; justify-content:center; bottom:0; background:var(--clr-b); color:var(--clr-g); width:calc(var(--wrap) * 1%); padding:2em; border-radius:1em;}
.main-header-gr-top {background:linear-gradient(180deg, #05071D 0%, rgba(5, 7, 29, 0.45) 25.82%, rgba(23, 32, 131, 0.3) 100%);}
/*
.main-header-title h1:before {display:none}
.main-header-title h1:before {content: ''; height: 1px; width:40px; background:#fff; display:block; margin-right:10px;}
.main-header-gr-but {position:absolute; z-index:0; height:20vh; background:var(--clr-w-o); width:90%; padding-top:1em; border-top:1px solid; align-content:center; justify-content:center; bottom:0}
*/
/*.breadcrumbs {position: absolute; bottom: -4em;} */


@media screen and (max-width:980px) {
.main-header-2 .main-header-title {height:calc(60vh - 107px - 1em);}
}
@media screen and (max-width:680px) {
div.main-content {--top-page-h:calc(90vh - 107px - 1em);}
.main-header-2 {height:var(--top-page-h);}
.main-header-bg-img {height:100%;}
.main-header-2 .main-header-title {height:calc(var(--top-page-h) - 10em);}
}


/*--------------------------------------------------------------------------*/
.main-body-desc {justify-content:center;}

.main-body-content a {color:var(--clr-t);}
.main-body-content ul, .main-body-cat-content ul, .main-body-content ol, .main-body-cat-content ol {margin:var(--mrg-c) 0;}
.main-body-content h2 {font-size:1.25em; margin:var(--mrg-f) 0 var(--mrg-c); color:var(--clr-b)}
.main-body-content h3 {font-size:1.125em}
.main-body-content ol li {list-style:decimal}	
.main-body-content li > ul, .main-body-content  li > ol, .main-body-content  ul > ul, .main-body-content  ol > ol{margin-top:0px}
.main-body-content ul li {list-style: disc;}
.main-body-content ul li::marker {color:var(--clr-m); content:'⬤'; content:'●'; content: '\00A0\25CF\00A0\00A0'; font-size:0.8em;}




article > footer {}
.aside-bottom {clear:both; margin-top:0; margin-bottom:1em; /*background:#f0f */ }
aside[class*="aside-"] > h1 {margin-top:var(--mrg-f); /*font-size:1.5em; margin-bottom:0.5em; color:var(--clr-f); font-weight:400; border-top:2px solid var(--clr-m); padding-top:1em;*/}
.aside-bottom .section-btn-top {position:relative; margin-top:var(--mrg-f)}



/*--------------------------------------------------------------------------*/
/* INDEX */
.index-ban, .index-slider {height:80vh; background: url("main/img/index-ban-bg.jpg"); background-size: cover;}
.index-ban h1 {color:var(--clr-w); font-size:3.5em; width:62%; margin-top:0.25em; text-transform:none; font-weight:400}
.index-ban p {color:var(--clr-w); border:2px solid var(--clr-g); width:fit-content; padding:1em 2em; border-radius: 1em;}
.index-ban .button {z-index:1; position:relative; cursor:pointer}
.index-ban img {width:60%; position:absolute; z-index:0; bottom:0; right:0}
@media screen and (max-width:680px) {
.index-ban h1 {font-size:2.5em; width:100%; margin-bottom:0}
.index-ban img {width:100%; bottom:-3em}
}



/*
.section-header {border-top:2px solid var(--clr-g); padding:1em 0 0;}
.section-header h2 {font-weight:400; font-size:2.5em; color:var(--clr-m); margin:0; width:50%;}
.section-header p {color:#8E90A5; max-width:40%; font-weight:300; margin:var(--mrg-b) 0;}
.section-sub-title {--svg-icon-heart: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24"><path d="M0 5.82826C0 2.6094 2.6094 0 5.82826 0H30.168C33.3889 0 36 2.61107 36 5.83198C36 7.35521 35.404 8.81799 34.3396 9.90754L22.3684 22.1607C21.2193 23.3369 19.6444 24 18 24C16.3858 24 14.8395 23.3503 13.7097 22.1975L1.66565 9.90764C0.598 8.8182 0 7.35363 0 5.82826Z"/></svg>');}


.index-page .about-uss {margin-top:0}
.about-uss-top {align-items:center; flex-direction:row-reverse;}
.about-history > div:nth-child(2n) {flex-direction: row-reverse;}

.ind-products {}
.about-partner {}
@media screen and (max-width:780px) {
.section-header h2, .section-header p {width:100%; max-width:100%}
}
@media screen and (max-width:680px) {
.section-header h2 {font-size:2em; margin:0.5em 0; width:100%;}
.section-header p {width:100%;}
}
*/
/* FOOTER */
footer.wrap {/* margin-top: var(--mrg-f); */}
.foot-names p {font-size:11em; line-height:1; text-align:center; font-weight:600; background:linear-gradient(90deg, rgba(174, 210, 255, 0.8) 0%, rgba(52, 76, 183, 0.8) 90.87%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* background:linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), linear-gradient(90deg, rgba(174, 210, 255, 0.8) 0%, rgba(52, 76, 183, 0.8) 90.87%); */}
.footer-mobile-phone-btn {margin-top: 0;}
/* FOOTER */

/*-----------------------------------------------------------------------*/

/* Page about us */
/* Service single*/
/* Product single */
/* Portfolio single */
/* Gallery single */

/* Service category */
.loop-serv .box-more::after {/*content:none*/}
.loop-serv .box-2:hover .box-text {/*background:var(--clr-m);*/}
@media screen and (max-width:680px) {
.loop-serv.grid-2 {--col-n:1;}
}
@media screen and (max-width:620px) {
.loop-serv.grid-3 {--col-n:1;}
}

/* Product category */

/* Portfolio category */
.loop-port .box-3 {border:1px solid var(--clr-m); box-shadow:none; border-radius:2em; background:var(--clr-b);}
.loop-port .box-3 .box-block {background:var(--clr-b);}
.loop-port .box-3 .box-text {background:none; padding:1em}
.loop-port .box-3 .box-img {width:100%; display:flex; flex-wrap:wrap; right:0; overflow:visible; align-content:center; justify-content:flex-end;}
.loop-port .box-3 .box-img img {height:auto; object-fit:cover}
.loop-port .box-3 .box-img img.gal-no {height:100%; overflow:visible; align-content:flex-end}
.loop-port .box-3 .box-img-bg {height:100%; width:100%; position:absolute; background:var(--clr-b);; opacity:0.5;}
.loop-port .box-3 .box-title {display:block; font-weight:400; text-align:left; font-size:1.125em;}
.loop-port .box-more {left:1em}
.loop-port .box-more::after {display:block; padding:0.75em; background:var(--clr-w);}

/* FAQ category */

/* Blog category */
.loop-blog .box-1 {background:var(--clr-c)}
.loop-blog .box-tag {position:absolute; right:1em; top:1em; z-index:9;}
.loop-blog .box-tag p {backdrop-filter:blur(14px); padding:0.5em 1em; border-radius:1em; background:rgba(255, 255, 255, 0.6);}
.loop-blog .box-tag p a {color:var(--clr-m);}
.loop-blog .box-img .box-date {bottom:1em; padding: var(--btn-pad) calc(var(--btn-pad) * 2); width:fit-content; border-radius:var(--btn-brd-rad); color:var(--btn-clr); border:var(--btn-brd-s) solid var(--btn-brd-c); background:var(--clr-m);}
.loop-blog .box-img a + .box-date {color:var(--clr-w); bottom:1em; background:var(--clr-m); padding:0.5em 1em; border-radius:2em; border:1px solid var(--clr-w);}
.loop-blog .box-text {display:block; margin-bottom:1em;}
.loop-blog .box-more {width:100%; justify-content:flex-end; position:inherit; color:var(--clr-m);}

/* Price category */	
.loop-price .block-price {width:20em; text-align:right; margin:0; flex-direction:row-reverse;}
.loop-price-block {width:100%; clear:both; align-items:center; border-radius:2em; background:var(--clr-g); margin-bottom:1em; padding:1em 2em;}
.loop-price .price-name {font-size:1.25em; color:var(--clr-m); margin-bottom:0; font-weight:400; max-width:calc(100% - 22em)}
.clr-inverse .price-name {color:var(--clr-s);}	

@media screen and (max-width:680px) {
.loop-price-block {justify-content:flex-end}
.loop-price .price-name, .loop-price .block-price {width:100%; max-width:100%; align-items:flex-end;}
}
@media screen and (max-width:480px) {
.block-price .price-main, .block-price ins bdi, .price ins bdi {font-size:1.25em}
}















@media screen and (max-width: 1086px) {
#menudrop > nav > ul > li {float:none; padding:0;}
@media (max-width:820px) {
.grid-3, .column-3, .grid-4, .column-4, .grid-5, .column-5, .grid-6, .column-6, .grid-7, .column-7 {--col-n:2;}
}

/* DEL!!!!!!!!!!!!!!!!!!!!!!!! */
@media screen and (max-width:1120px) {
.foot-names p {font-size:9em;}
}
@media screen and (max-width:900px) {
.foot-names p {font-size:7em;}
}
@media screen and (max-width:780px) {
.index-block-how .column-2 > .w50, .index-block-form!!!!!!!!!!!!!!!! .w40 {width:100%;}
.foot-smm {width:80%}
.foot-dark .w30 {width:45%}
}
@media screen and (max-width:720px) {
.foot-names p {font-size:6em;}
}
@media screen and (max-width:680px) {
body > footer > *:last-child {margin-bottom:1em;}
.foot-names p {font-size:4em;}
}
@media screen and (max-width:640px) {
.grid-3, .service-block.grid-3, .why-us-block.grid-3 {--col-n: 1;}
	
.foot-dark .w30, .foot-dark .w40 {width:100%}
}
@media screen and (max-width:620px) {
.foot-smm {width:40%}
.foot-smm a {width:100%; padding-bottom:1em;}
}
@media screen and (max-width:550px) {
.foot-names p {font-size:3em;}
}
/* DEL!!!!!!!!!!!!!!!!!!!!!!!! */






@media screen and (max-width: 1366px) {
html, body {min-height:100vh; font-size:14px;}
}
@media screen and (max-width:960px) {
html, body {font-size:14px;}
}
@media screen and (max-width:720px) {
html, body {font-size:14px;}
}
@media screen and (max-width:680px) {
html, body {font-size:18px;}
}
@media screen and (max-width:1620px) {   
}
@media screen and (max-width:1199px) { 
}
@media screen and (max-width:1020px) {
}
@media screen and (max-width:980px) {
}
@media screen and (max-width:820px) {
}
@media screen and (max-width:790px) {
}
@media screen and (max-width:720px) {
}
@media screen and (max-width:680px) {
}
@media screen and (max-width:580px) {
.article-shares {flex-wrap: wrap;}
}
@media screen and (max-width:540px) {
}
@media screen and (max-width:520px) {
}
@media screen and (max-width:480px) {
.box-2 .box-img, .box-2 .box-img + .box-text {width:100%}
.box-2 .box-img {height:auto; border-radius:0;}
}