/* ==================================================================================
Кастомные стили сайта + перекрытие bootstrap 4.
================================================================================== */

/* ==================================================================================
Общие стили сайта.
================================================================================== */
html {height:100%;}
body {
	overflow:visible !important;
	margin:0px !important;
	background-color:#002860 !important;
	background-size: cover !important;
	background-attachment: fixed !important;
	height: 100vh;
	font-family:Arial, Helvetica, sans-serif;
}
.container-fluid{
	 flex: 1 0 auto;
}

/* Фоновое изображение и отступы для контента на разных размерах. */
/* xsmall */
@media (max-width: 575px) {
	body {
		background:#fff url('images/bg-mini.jpg') center top no-repeat;
	}
}

/* sm */
@media (max-width: 575px) {
	body {
		background:#fff url('images/bg-small.jpg') center top no-repeat;
	}
}

/* md */
@media (min-width: 576px) {
	body {
		background:#fff url('images/bg-medium.jpg') center top no-repeat;
	}
}

/* lg */
@media (min-width: 916px) {
	body {
		background:#fff url('images/bg-large.jpg') center top no-repeat;
	}
}

/* xl */
@media (min-width: 1420px) {
	body {
		background:url('images/bg-xl.jpg') center top no-repeat;
	}
}

/* Корректировка отступов. */
@media (min-width:1660px) {
    .index_space{height: 31rem;}
}
@media (max-width: 1659px) {
    .index_space{height: 24rem;}
}
@media (max-width: 1500px) {
    .index_space{height: 21rem;}
}
@media (max-width: 1250px) {
    .index_space{height: 19rem;}
}
@media (max-width: 915px) {
    .index_space{height: 13rem;}
}

/* Светло-голубая подложка. */
.content{background-color: aliceblue;}

/* Стили мобильного меню. */
.main_menu_small{
	background-color:#162E4B !important;
	width:100%;
}
.main_menu_small form div div input{
	background-color:#1E4061;
	border: #214769 solid .13rem;
	color:#3D789F;
	font-weight:bold;
}

.main_menu_small form div div input:hover{
	background-color:#1E4061;
	border: #214769 solid .13rem;
    color:#3D789F;
}

.main_menu_small form div div input::placeholder{
	color:#3D789F;
	font-weight:normal;
}

.main_menu_small ul li a{
	background-color:#0F1D37;
}

.main_menu_small form div div button{
	border: #214769 solid .13rem;
    color:#3D789F;
}

/* Стили большого меню. */
.main_menu_big li{
	text-align:center;
}

.main_menu_big li{
	background-color:#0F1D37;
	opacity: 0.8;
}

.main_menu_big li a{
	opacity: 1;
	color:#30C3F8;
}

.main_menu_big li a span:hover{
	text-shadow: 0px 0px 1rem #30c3f8;
}

.main_menu_big li a:hover{
	background-color:#0F1D37;
}

/* Фоновые картинки для большого меню. */
.big_menu_main{
	height:4.5rem;
	width:6rem;
	background:#0F1D37 url('images/main_menu/main.png') center top no-repeat;
}
.big_menu_main:hover{background:#0F1D37 url('images/main_menu/main_hover.png') center top no-repeat;}

.big_menu_wiki{
	height:4.5rem;
	width:6rem;
	background:#0F1D37 url('images/main_menu/wiki.png') center top no-repeat;
}
.big_menu_wiki:hover{background:#0F1D37 url('images/main_menu/wiki_hover.png') center top no-repeat;}

.big_menu_stories{
	height:4.5rem;
	width:6rem;
	background:#0F1D37 url('images/main_menu/stories.png') center top no-repeat;
}
.big_menu_stories:hover{background:#0F1D37 url('images/main_menu/stories_hover.png') center top no-repeat;}

.big_menu_gallery{
	height:4.5rem;
	width:6rem;
	background:#0F1D37 url('images/main_menu/gallery.png') center top no-repeat;
}
.big_menu_gallery:hover{background:#0F1D37 url('images/main_menu/gallery_hover.png') center top no-repeat;}

.big_menu_kisomyx{
	height:4.5rem;
	width:6rem;
	background:#0F1D37 url('images/main_menu/kisomyx.png') center top no-repeat;
}
.big_menu_kisomyx:hover{background:#0F1D37 url('images/main_menu/kisomyx_hover.png') center top no-repeat;}

.big_menu_info{
	height:4.5rem;
	width:6rem;
	background:#0F1D37 url('images/main_menu/info.png') center top no-repeat;
}
.big_menu_info:hover{background:#0F1D37 url('images/main_menu/info_hover.png') center top no-repeat;}

.big_menu_talking{
	height:4.5rem;
	width:6rem;
	background:#0F1D37 url('images/main_menu/talking.png') center top no-repeat;
}
.big_menu_talking:hover{background:#0F1D37 url('images/main_menu/talking_hover.png') center top no-repeat;}

/* Тэги */
.tags .header{
    background-color:#162E4B;
    border-radius: 0.25rem 0.25rem 0rem 0rem;
    color:#24B3E5;
    padding: 12px 16px;
}
.tags .body{
    color:#80ACD8;
    background-color:#1E4061;
}

.tags .body a{
    color:#80ACD8;
}

/* Разные размеры для тэгов */
.tags .body .tag_1{
    font-size:.7rem;
}
.tags .body .tag_2{
    font-size:.9rem;
    font-weight: bold;
}
.tags .body .tag_3{
    font-size:1.1rem;
}
.tags .body .tag_4{
    font-size:1.3rem;
    font-weight: bold;
}

/* Форма поиска. */
.tags .body .tag_search div input{
    background-color:#214769;
    border: #51789F solid .13rem;
    color:#80ACD8;
    font-weight:bold;
}

.tags .body .tag_search div input::placeholder{
    color:#51789F;
    font-weight:normal;
}


.tags .body .tag_search div button{
    background-color:#214769;
    border: #51789F solid .13rem;
    color:#51789F;
    padding: .1rem .5rem 0.1rem .5rem;  
}

.tags .body hr{
    border-top: 1px solid #3D789F;
}

.tags_item span:hover{
	background-color:#ccc;
}

/* Цвета для разных тэгов */
.yellow {color:#ffc107 !important;}
.yellow:hover {color:#f5af00 !important;}

.red {color:#ff6452 !important;}
.red:hover {color:#d14d3f !important;}

.orange {color:#f78400 !important;}
.orange:hover {color:#db6a00 !important;}

.light-blue {color:#379eff !important;}
.light-blue:hover {color:#1a80df !important;}

.blue {color:#1d61ff !important;}
.blue:hover {color:#0139bd !important;}

.dark-blue {color:#7790ff !important}
.dark-blue:hover {color:#5b76ee !important;}

.grey {color:#a5a1b6 !important}
.grey:hover {color:#736d8f !important;}

.black {color:#ffffff !important}
.black:hover {color:#e2e2e2 !important;}

.pink {color:#ffadec !important;}
.pink:hover {color:#f573d7 !important;}

.green {color:#49e372 !important;}
.green:hover {color:#28bd4f !important;}

.purple {color:#b984fa !important;}
.purple:hover {color:#9868d4 !important;}

.cream {color:#ffdeb0 !important;}
.cream:hover {color:#ffcd87 !important;}

/* Тэг кис :3 :) */
.multi{
    
    /* Create a conic gradient. */
    /* Double percentages to avoid blur (#000 10%, #fff 10%, #fff 20%, ...). */
    background: #ff6452;
    background-color: #ff6452;
    background: conic-gradient(
      #ff6452 16.666%, 
      #f78400 16.666%, 
      #f78400 33.333%, 
      #ffc107 33.333%, 
      #ffc107 50%, 
      #49e372 50%, 
      #49e372 66.666%, 
      #47acff 66.666%, 
      #47acff 83.333%, 
      #f573d7 83.333%);
    
    /* Set thee background size and repeat properties. */
    background-size: 57%;
    background-repeat: repeat;
    
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text color rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    
    /* Animate the text when loading the element. */
    /* This animates it on page load and when hovering out. */
    animation: rainbow-text-animation-rev 0.5s ease forwards;
  
    cursor: pointer;
}
  
 /* Add animation on hover. */
.multi:hover {
    animation: rainbow-text-animation 0.5s ease forwards;
}
  
/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-animation {
    0% {
      background-size: 57%;
      background-position: 0 0;
    }
    20% {
      background-size: 57%;
      background-position: 0 1em;
    }
    100% {
      background-size: 300%;
      background-position: -9em 1em;
    }
}
  
/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-animation-rev {
    0% {
      background-size: 300%;
      background-position: -9em 1em;
    }
    20% {
      background-size: 57%;
      background-position: 0 1em;
    }
    100% {
      background-size: 57%;
      background-position: 0 0;
    }
}

/* Корректировка рулера. */
@media (min-width:768px){
	.ruler_middle{display:none !important;}
}

@media (max-width:767px){
	.ruler_big{display:none !important;}
}

/* Футер. */
footer{
	flex-shrink: none;
	background-color:#000;
	opacity:0.7;
	text-align:center;
	font-size:1.5rem;
}

footer span{
	font-size:1rem;
}

/* Хлебчики. */
.breadcrumb{
	color:#24B3E5;
	background-color:#162E4B;
	border-radius: 0.25rem 0.25rem 0rem 0rem;
}

.breadcrumb-item{color:#24B3E5 !important;}

.breadcrumb-item a{
	color:#24B3E5;
	text-decoration:underline;
}
.breadcrumb-item a:hover{
	text-shadow: 0px 0px 1rem #30c3f8;
}

/* Выравниватели для контента. */
.center{
	text-align:center;
}

.right{
	float:right;
	margin-top:-3rem;
}

.left{
	float:left;
	margin-top:-3rem;
}

/* Стили audio. */
@media (max-width: 400px){
	audio{
		margin-left:-.5rem;
	}
}

@media (max-width: 380px){
	audio{
		margin-left:-1rem;
	}
}

@media (max-width: 360px){
	audio{
		margin-left:-2rem;
	}
}

@media (max-width: 350px){
	audio{
		margin-left:-2.5rem;
	}
}

/* Стили iframe. */
iframe{
    margin-bottom:1rem;
}
@media(max-width:400px){
    iframe{
        max-width:10rem;
        max-height:8rem;
    }
}
@media(max-width:470px){
    iframe{
        max-width:15rem;
        max-height:12rem;
    }
}
@media(max-width:700px){
    iframe{
        max-width:20rem;
        max-height:15rem;
    }
}
@media(min-width:768px){
    iframe{
        max-width:23rem;
        max-height:16rem;
    }
}
@media(min-width:992px){
    iframe{
        max-width:38rem;
        max-height:21rem;
    }
}

/* Картинки контента. */
@media (max-width: 990px){
	.news_picture a img, .news_picture img{
		max-width:20rem;
	}
	
	.stories_picture a img, .stories_picture img{
		max-width:20rem;
	}
}

@media (max-width: 770px){
	.news_picture a img, .news_picture img{
		max-height:15rem;
		max-width:17rem;
	}
	
	.stories_picture a img, .stories_picture img{
		max-height:15rem;
	}
}

@media (max-width: 400px){
	.news_picture a img, .news_picture img{
		max-height:15rem;
		max-width:13rem;
	}
	
	.stories_picture a img, .stories_picture img{
		max-height:13rem;
	}
}

@media (max-width: 370px){
	.stories_picture a img, .stories_picture img{
		max-height:10rem;
	}
}

/* ==================================================================================
Новости.
================================================================================== */
/* Размер изображений.*/
.news_block div div div a img{
    max-width: 46rem;
}
@media (max-width: 1199px) {
    .news_block div div div a img{
        max-width: 37rem;
    }
}
@media (max-width: 991px) {
    .news_block div div div a img{
        max-width: 22rem;
    }
}
@media (max-width: 500px) {
    .news_block div div div a img{
        max-width: 9rem;
    }
}

/* Новостной блок. */
.news_block {
	margin-bottom:1rem;
}

.news_header{
	color:#999;
	font-size:0.9rem;
}

.news_picture_desc{
	font-size:0.7rem;
	color:#999;
	margin-top:1rem;
}

/* ==================================================================================
Вики.
================================================================================== */
.wiki_picture{
	border:0.05rem solid #ccc;
	padding:.25rem;
	border-radius:.25rem;
	font-size: .8125rem;
	color: #777;
	text-align:center;
	max-width:15rem;
	white-space:normal;
    margin:0 auto;
}

.wiki_desc{
	font-style:italic;
	color: #777;
}

/* Основное изображение */
@media (max-width:768px) {
	.wiki_picture{
		float:none;
		margin:0 auto;
	}
}

/* ==================================================================================
Рассказы.
================================================================================== */
.story_page img{
	max-width:100%;
}

.stories_picture{
	margin:0rem 0rem 0rem 2rem !important;
}

/* Рейтинги. */
.rating_16{background-color:darkorange; color:#fff; font-weight: bold; padding: 0.5rem 0.2rem; border-radius: 2rem;}
.rating_18{background-color: crimson; color:#fff; font-weight: bold; padding: 0.5rem 0.2rem; border-radius: 2rem;}

/* ==================================================================================
Галерея.
================================================================================== */
.gallery_preview{
    border: .05rem solid #ccc;
    background-color: #fff;
    width:152px;
	height:152px;
    margin:0 auto;
}

.gallery_desc{
	font-size:.7rem;
}

/* Корректировка большого изображения. */
@media (min-width:1200px){
    .gallery_big_art {max-width:44.8rem;}
}
@media (max-width:1199px){
    .gallery_big_art {max-width:36.4rem;}
}
@media (max-width:994px) {
    .gallery_big_art {max-width: 21.4rem;}
}
@media (max-width:767px) {
    .gallery_big_art {max-width: 25.2rem;}
}
@media (max-width:575px) {
    .gallery_big_art {max-width: 20rem;}
}
@media (max-width:490px) {
    .gallery_big_art {max-width: 14rem;}
}
@media (max-width:400px) {
    .gallery_big_art {max-width: 9rem;}
}

/* ==================================================================================
Мыхня и Кысня.
================================================================================== */
.kisomyx{
	padding:1.2rem;
}

.menu_kisomyx{
	font-size:.9rem;
}

/* ==================================================================================
Инфо.
================================================================================== */

/* Картинка для разных размером экрана. */
@media (max-width: 339px){
    .about_us{width:11rem;}
}
@media (min-width: 340px){
    .about_us{width:14rem;}
}
@media (min-width: 440px){
    .about_us{width:19rem;}
}
@media (min-width: 992px){
    .about_us{width:37rem;}
}

/* ==================================================================================
Общение.
================================================================================== */

/* Стили модерки. */
.comment_moderate {
    background-color:#F4EFFF;
    border-radius:0.2rem;
    color:#B3AAD1;
    font-weight:bold;
    width:100%;
    display: block;
    padding: 0rem .5rem 0rem .5rem;
}
  
.comment_approve{
    background-color:#afe9c8;
    border-radius:0.2rem;
    color:#61ac7a;
    font-weight:bold;
    display: block;
    padding: 0rem .5rem 0rem .5rem;
}

.comment_approve:hover{
    text-decoration: none;
    background-color:#87caa4;
    color:#2d7545;
}

.comment_delete {
    background-color:#f5a597;
    border-radius:0.2rem;
    color:#b65151;
    font-weight:bold;
    display: block;
    padding: 0rem .5rem 0rem .5rem;
}

.comment_delete:hover{
    text-decoration: none;
    background-color:#d37a6b;
    color:#922626;
}

/* ==================================================================================
Поиск.
================================================================================== */
.search_body{
	height:12rem;
	overflow:hidden;
}

.search_body .hider{
	height:2rem;
	background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.8), rgba(255,255,255,0));
	position:relative;
	top:10rem;
	margin-bottom:-2rem;
}

.search_show{
    margin-top:-1rem;
    background-color: #e4e3e3;
    color:#777;
    border-radius: 0rem 0rem .3rem .3rem;
    border:.1rem solid #cecdcd;
}

.search_show a{
    width: 100%;
    display: block;
    color:#777;
}

.search_show a:hover{
    color:#777;
    text-decoration: none;
}

@media(max-width:991px){
    .search_body div img, .search_body div a img{
        max-width: 100% !important;
    }
}
@media(min-width:991px){
    .search_body div img, .search_body div a img{
        max-width: 50% !important;
    }
}

/* Хз */
.gallery .wiki_picture{
	float:left;
	width:102px !important;
	height:102px !important;
	padding:0px;
	border-radius:0px;
	margin:0rem 1rem 1rem 0rem;
}

.gallery {
	margin:2.3rem;
}