:root {
	--main-1: #9932cc;
	--main-2: #5c1f7a;
	--main-3: #ffa921;
	--gradient-1: linear-gradient(10deg,#9932cc,#5c1f7a);
	--gradient-2: linear-gradient(10deg,#9932cc, #ffa921);
	--gradient-3: linear-gradient(10deg,#ffa921, #5c1f7a);
}
body {background: white;font-family: 'Ubuntu Condensed', sans-serif; color: var(--text);font-size: 14px; line-height: 1.4rem; }
a {text-decoration: none; color:black;}
a:hover {text-decoration: none;color: var(--main-2); }
.btn.focus, .btn:focus, input:focus {outline: 0;box-shadow: none;}

.horizon {overflow-x: auto; overflow-y: hidden; white-space: nowrap; display: block; }
.horizon>div { display: inline-block; white-space: initial; vertical-align: top; width: 90%;}
/*.horizontal-scroller {overflow-x: hidden;}*/

.rounded-main{border-radius: 2rem;}
.select {box-shadow: 0 33px 79px 10px #0396ff; z-index: 9999;}

/*Основные цвета*/
	.main-1{color: var(--main-1);}
	.main-2{color: var(--main-2);}
	.main-3{color: var(--main-3);}
	.main-bg-1{background-color: var(--main-1) !important; color: white;}
	.main-bg-2{background-color: var(--main-2) !important; color: white;}
	.main-bg-3{background-color: var(--main-3) !important; color: white;}
	.main-gradient-1{background:var(--gradient-1);}
	.main-gradient-2{background:var(--gradient-2);}
	.main-gradient-3{background:var(--gradient-3);}

	.main-btn-1{border-radius:.25rem; color: var(--main-1); background-color: white; transition: all 0.5s 0s;}
	.main-btn-1:hover{color: white; background-color: var(--main-1);transition: all 0.5s 0s;}
	.main-btn-1:hover *{color: white;}

	.main-btn-2{border-radius:.25rem; color: var(--main-2); background-color: white; transition: all 0.5s 0s;}
	.main-btn-2:hover{color: white; background-color: var(--main-2);transition: all 0.5s 0s;}
	.main-btn-2:hover *{color: white;}

	.main-btn-3{border-radius:.25rem; color: white; background-color: var(--main-2); transition: all 0.5s 0s;}
	.main-btn-3:hover{color: white; background-color: var(--main-1);transition: all 0.5s 0s;}
	.main-btn-3:hover *{color: white;}

/* ШАПКА */
	header{ background-color: #effeff;z-index: 999;position: relative;}
	header .time-work {padding-left: 40px;position: relative;}
	header .time-work:before { background-repeat: no-repeat; content: ""; height: 100%; width: 30px; background-size: contain; position: absolute; left: 0; top: 0; background-image: url('img/time.png') }
	header .bg-head{background-image: url(res/img/bg-header.jpg);background-size: cover;}
	
	/*Меню*/
	header .menu-item a {padding: 15px 10px;display: inline-block;font-weight: bold; font-size: 16px;}
	header .menu-item { margin-right: 20px; transition: all 0.8s 0s;padding: 5px 0;}
	header .menu-item:hover {background-color: white;}
	
	header .sub-menu .menu-item {margin-right: 0;}
	header .sub-menu .menu-item:hover {box-shadow: 0 10px 17px rgba(0, 0, 0, 0.15);}
	header .sub-menu .menu-item:hover a img {opacity: 1}
	
	header .menu-item .sub-menu a {color: black;}
	header .menu-item .sub-menu a img {opacity: 0.8}
	header .menu-item-has-children>ul { border-top: 2px solid var(--main-2); pointer-events: none; transition:all 0.6s 0s; z-index: 999; opacity: 0; position: absolute; background-color: white; box-shadow: 0 12px 12px #0000001f; list-style: none; padding: 0; left: -50px; top: 100%; width: 300px; min-width: 100%; }
	header .menu-item-has-children:hover>ul {pointer-events: unset;transition:all 0.3s 0s; opacity: 1; display: inline-block;left:0}
	header .menu-item-has-children{position: relative;}
	header .menu-item-has-children>ul a { width: 100%; font-weight: normal; padding: 10px 20px; }
	header .menu-item-has-children>a:after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-weight: 900; font-size: 12px; color: grey; padding: 0 10px 0 10px; }
	
	header #menu-mobilnoe-menyu .menu-item { border-top: 1px solid #d8d8d8; }
	header #menu-mobilnoe-menyu .menu-item a {font-weight: 600; color: black;}

/*ФотоГрид*/
.foto-grid-block a.popup:before { opacity: 0; content: "\f002"; font-family: "Font Awesome 5 Free" !important; font-weight: 900; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.52); position: absolute; top: 0; left: 0; text-align: center; line-height: 100%; padding-top: 45%; font-size: 30px; color: rgba(0, 0, 0, 0.46); }
.foto-grid-block a.popup:hover:before{opacity: 1;}


/*ПОСТЫ*/
.card-columns.card-1 {column-count: 1;}
.card-columns.card-2 {column-count: 2;}
.card-columns.card-3 {column-count: 3;}

/*Каткгории поста*/
.post-categories {list-style: none; padding: 0;}
.post-categories li {display: inline-block;}
.post-categories a {background-color: white; display: inline-block;margin:2px; padding: 3px 10px;}
.post-categories a:before { content: "#";}

/*Закладки*/
#tabs .btn.collapsed { background-color: var(--main-1);}
#tabs .btn:hover { background-color: var(--main-2);}

/*Всплывахи*/
#image-modal button.img.next { position: absolute; right: -100px; top: 20px; bottom: 20px; border: 0; width: 100px; background-color: #0000002b; color: white; font-size: 21px; border-radius: 0 10px 10px 0; }
#image-modal button.close { position: absolute; right: 10px; top: 10px; color: black; }


/*Комментарии*/
	#reply-title { margin: 0;}
	.comment ul.children {list-style: none;padding-left: 0px;}
	.comments-list .comment.depth-1:nth-child(2n) {background-color: #fafafa;}
	.comment ul.children li > div { padding: 10px 0px 10px 40px !important; }
	.comment div {position: relative;}
	.vk-comments{overflow: hidden;}
	.vk-comments>div{margin-top: -40px;}
	#cancel-comment-reply-link {font-size: 14px;padding: 5px 20px;background-color: whitesmoke; }
	.comment-reply-link {opacity: 0}
	.nav-tabs button.nav-link:not(.collapsed) {border: 1px solid #e1e1e1; background-color: #fff;border-bottom: solid 1px white;}
	input#author, input#email { border-bottom: 1px solid #e5e5e5 !important;}
	.show-comment-wrap { background: linear-gradient(0deg, white, transparent); padding: 30px 0 0 0; margin-top: -40px;}
	.show-comment-wrap:before { content: ""; position: absolute; bottom: 13px; width: 100%; background-color: #d8d8d8; height: 1px; left: 0; z-index: 1; }
	.show-comment{z-index: 2;position: relative;}

	@media screen and (min-width: 1024px){
		.comment > div .comment_button,.comment > div time,.comment > div .description-text,.comment > div .comment-action {opacity: 0; transition: all 0.2s 0s;}
		.comment > div:hover .comment-reply-link, .comment > div:hover .comment_button,.comment > div:hover time,.comment > div:hover .description-text,.comment > div:hover .comment-action {opacity: 1; transition: all 0.2s 0s;}
		
	}
	@media screen and (max-width: 768px){
		.comment-action {display: block;float: unset !important;}
		.comment time {display: block;}
	}
	textarea#comment {min-height: 30px;transition: min-height 0.5s 0s;}
	textarea#comment:focus {min-height: 100px !important;transition: min-height 0.5s 0s;}









/*Кнопка наверх*/
	@media (min-width: 1371px){	
		a.scroll.top { transition: background-color 1s 0s; display: none; position: fixed; left: 0; height: 100%; padding-top: 25%; width: 70px; font-size: 30px; bottom: 0; text-align: center; background-color: rgba(0, 0, 0, 0.15); color: #808080 !important; }
		a.scroll.top:hover { background-color: rgba(0, 0, 0, 0.25); transition: background-color 1s 0s; color: #716e9d !important; }
	}
	@media (max-width: 1370px){
		a.scroll.top { border-radius: 100px; z-index: 9999;display: none; position: fixed;right: 10px; height: 50px;width: 50px;bottom: 10px;line-height: 50px; text-align: center;background-color: var(--main-1);color: white !important; }
	}

@media (max-width: 900px){
	.display-4 {font-size: 2rem;}	
	.display-3 {font-size: 2.5rem;}
	.display-2 {font-size: 3rem;}
	.display-1 {font-size: 3.5rem;}
}

@media print {
  .noprint {
    display: none !important;
  }
  .page-break {
     page-break-after: always;
   } 
}