/*
Theme Name: Music-dark
Author: Alexander E
Author URI: https://playclip.ru/
Description: Первая тема
Version: 1.0
*/

*, *:after, *:before {
box-sizing: border-box;
padding: 0;
margin: 0;
}

P:first-letter {
font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */
    font-size: 120%;
    font-weight: bold; /*цвет первой буквы */
}
input, textarea {
transition: .3s ease-in-out;/* добавим плавность переходов для всех элементов страницы*/
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #959595;
}
a:hover{
color:#4caeff;
}
img {
display: block;
max-width: 100%;
height:auto;
}

.post-title {
	text-align: center;
    font-size: 1.5em;
    margin-bottom:1em;
}
.post-title a {
color: #F0FFFF;	
}
.post-title a:hover {
color: #4ca6ff;
}

h2 {
    font-size: 1.2em;
    font-weight: bold;
}

h3 {
    font-size: 1.1em;
    font-weight: bold;
}
h4 {
    font-size: 1em;
    font-weight: bold;
}
 h2, h3, h4, h5, h6 {
color:#F0FFFF;
letter-spacing: 1px;
text-align: center;	 
}

.container {
padding: 0 15px;
} 

body {
font-family:Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.3;
color: #b4b9be;
background: #1F3544;
background-image: url(https://f63a41.claudeassets.com/20220815163743im_/https://skritikoi.net/wp-content/themes/Music-dark/images/clipart.png);
background-repeat:  no-repeat;
background-position: top;
background-attachment:fixed;
background-size:cover;
}
/* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */
header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after {
content: "";
display: table;
clear: both;
} 
/* Цвет бэкграунда и отмена цвета */
header {
	background:#1F3544;
}
#.header{
background-image: url(https://a667da.claudeassets.com/20220815163743im_/https://skritikoi.net/wp-content/themes/Music-dark/images/header-img.png);	
}
   
/* стилевой класс, который управляет шириной контейнера сетки*/
.container {
margin: 0 auto;
width: 100%;
max-width: 1200px;
} 
                        /* Alignments */

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
blockquote.alignleft,
img.alignleft,
.wp-caption.alignleft {
	margin: auto;
    padding: 0 0.2rem
}

blockquote.alignright,
img.alignright,
.wp-caption.alignright {
	margin: 0.5rem;
}

blockquote.alignleft {
	margin: 0 1.5em 0.9375em 0;
}

blockquote.alignright {
	margin: 0 0 0.9375em 1.5em;
}
      /*********************** Стили для шапки и её содержимого *****************************/
header {
width: 100%;
position: relative;
}
header {
padding:0;
}
.header{
	overflow:hidden;
}
.header-wrap{
    background-color: #172630;
    background-size: 100%;
    #border-bottom: 5px solid #192b38;
    border-top: 5px solid #192b38;
}
/* логотип */
.site-branding {
    display: inline-block;
    max-width: 300px;
    line-height: 0;
}
.logo{
	display:block; 
	float:left; 
}
.logo img {
	max-width: 300px;
}
/* меню */
	.menu{
		overflow:hidden;
	}
	.menu ul{
		list-style:none; 
		overflow:hidden; 
		float:left; 
		margin-left:15px;
	}
	.menu ul li{
		float:left; 
		font-size:16px;
	}
.menu ul li a {
    color: #fff;
    font-weight: bold;
    font-family: PT Sans, Helvetica;
    text-decoration: none;
    display: inline-block;
    vertical-align: bottom;
    padding:30px 10px;
}

	/*.menu ul li a:hover{

	}*/
.menu ul li:hover{
	background-color: #0D1C27;
    transform: translateY(5px); /* сдвигаем  */
}
	div.menu #pull{
		display:none;
	}
	#primary-menu {
		float:right;
	}

/* конец меню */

/* форма поиска */

#searchform {
margin-left: 46px;
display: block;
border: 1px solid #1f3544;
overflow: hidden;
position: relative;
margin:0 auto;
}
#searchform input {
float: left;
padding-left: 10px;
height: 42px;
overflow: hidden;
border: none;
background-color: #1f3544;
color: #9E9C9C;
font-style: italic;
font-size: 1.2em;
}
#searchform button {
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 10px;
color: #4ca6ff;
cursor: pointer;
font-size: 1.5em;
}
#searchform input:focus {
/*outline: 2px solid #EBEBE3;*/
}
                        /* ОСНОВНОЙ КОНТЕНТ*/
.posts-list,aside{
    margin: 1em 0 1.5em;
}
/* левый контейнер */
.posts-list {
    margin-bottom: 30px;
    width: 65%;
    float: left;
    background: #172630;
    padding: 20px;
}
/* блок для статьи */
.post {
margin-bottom: 35px;
}
.post-content p {
line-height: 1.5;
padding: 0.5em;
}
.post-image {
max-width: 100%;
margin-bottom: 30px;
}
.post-image img{
display:block;
margin:auto;
}
.category {
margin-bottom: 15px;
}
.category a {
color: #4ca6ff;
text-transform: uppercase;
}

/* блок с кнопкой "продолжить чтение" и кнопками социальных сетей */
.post-footer {
    border-top: 1px solid #1f3544;
    border-bottom: 1px solid #1f3544;
    position: relative;
    margin-top: 15px;
}
.more-link {
position: relative;
display: inline-block;
font-size: 16px;
text-transform: uppercase;
color: white;
line-height: 44px;
padding: 0 22px;
background: #1f3544;
letter-spacing: 0.1em;
white-space: nowrap;
}
.more-link:after {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
top: 0;
right: 0;
border: solid transparent;
border-width: 22px 18px;
border-left-color: #1f3544;
transform: translateX(100%);
}
.post-social {
position: absolute;
left: auto;
top: 50%;
right: 0;
text-align: right;
transform: translateY(-50%);
padding: 0;
font-size: 12px;
}
button,.page-numbers,.button{ 
  display:inline-block;
  color:#f4f8fb;
  background-color: #0c1b26;;
  font-size: 16px;
  font-weight: 700;
  border: 3px solid #2A3C49;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.42857143;
  vertical-align: middle;
	padding: 6px 12px;}
button,.button:hover{
	color:#132029;
	background-color:#F7F7F7;
	font-weight: 700;
}

blockquote {
	background-color:#EEEEEE;
   
    font-family: Georgia,serif;
    font-size: 1em;
    color: #3C3D41;
    font-style: italic;
    border-left: 4px solid #3C3D41;
    padding: 0.5em;
	margin-bottom:2em;
}
 object, embed {
    margin:0 auto;
    width:100%;
}
               /* Пагинация */
.navigation {
	text-align:center;
}
.pagination a:hover{
color:#fff;
background: #4CA6FF; /* Pagination background on hover */
}
.pagination .current{
background: #1F3544; /* Current page background */
}
#.page-numbers {
	font-size:1.5em;
	border: solid 1px #2A3C49;
	border-radius:3px;
	padding:2px 8px;
}
.nav-links{
	margin: 1em auto;
}
	/*************** САЙТ БАР *******************/

aside {
    width: 33%;
    float: right;
    background: #172630;
}
aside {
padding: 0 10px;
}
                                   /* блок для виджетов */
.widget {
padding: 15px 0.3em;
}
.widget:first-child {
    padding-bottom:0;
}

.widget-title {
font-size: 20px;
padding: 10px;
margin-bottom: 20px;
text-align: center;
background: linear-gradient(90deg, #0c1b26,#172630 10%,#192B38 90%, #0c1b26 );;
box-shadow: 3px 3px 0 0 #1F3544;
}
.widget li {
border-bottom: 1px solid #1f3544;;
padding: 0;
}
.widget li:last-child {
border-bottom: none;
}
.widget li a {	
color: #b4b9be;
margin-right: 6px;
font-style: normal;
}
.flex-list ul li a:hover,  
.widget li a:hover {
display:block;
	color:#fff;
    transform: translate(5px); /* Сдвиг в право */	
margin-right: 6px;
font-style: normal;
}
.widget li a:before {
content: "\2605";
display: inline-block;
font-family: 'FontAwesome';
margin-right: 10px;
color: #4ca6ff;
}
.widget-posts-list li {
border-top: 1px solid #EBEBE3;
padding: 15px 0;
}
.widget-posts-list li:nth-child(1){
border-top: none;
}
.post-image-small {
/*width: 30%;*/
float: left;
margin-right: 15px;
}
.widget-post-title {
float: left;
}
/* форма подписки */
#subscribe {
position: relative;
width: 100%;
padding: 15px 0;
}

#subscribe button {
padding: 0 15px;
background: transparent;
height: 40px;
border: none;
position: absolute;
right: 0;
color: #4ca6ff;
cursor: pointer;
font-size: 18px;
}
#subscribe input:focus + button {
background: #4ca6ff;
color: white;
}
        /*****************  ФУТЕР **********************/
footer {
padding: 30px 0;
background: #172630;;
color: white;
border-top: 3px solid #1f3544;	
}
.footer-col {
width: 33.3333333333%;
float: left;
}
.footer-col a {
color: white;
}
.footer-col:last-child {
text-align: right;
}
.social-bar-wrap {
text-align: center;
}
.social-bar-wrap a {
padding: 0 7px;
font-size: 18px;
}
        /*flex gallery*/

.video-gallery{
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
 
.video-gallery ul {
    text-align:center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
	padding: 0;
}

.video-gallery ul li {
    border: 2px solid #1f3544; 	
    flex: 0 1 23%;  
    list-style:none;
    font-size: 0.9em;
    line-height: 18px;
    padding: 3px;
    margin: 0.5em 1% ; 
}

.video-gallery ul li a{
color: #b4b9be;
}  

.flex-list  ul li a:hover, 
.video-gallery ul li a:hover {
color: #b4b9be; 
}

.video-gallery ul li img {
border: 2px solid #fff; 
}

.video-gallery ul li img:hover {
opacity:0.5;
}

.video-gallery ul li a img {
    max-width: 100%;
    min-width: 150px;
    margin: 0 auto 0.5rem;
}

.flex-list  ul {
    text-align:left;
    display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    align-items: baseline;
	margin: 0.5em 0;
}

.flex-list  ul li {
    flex-grow: 1;
    flex-basis: 192px;
    list-style:none; 
    margin-bottom: 2%;
}

.flex-list  ul li a {
	color: #b4b9be;
	padding:0 1em;
}

.flex-list h2 {
color: #4ca6ff;
}

.box {
    color: #f0ffff;
	background: linear-gradient(90deg, #0c1b26,#172630 10%,#192B38 90%, #0c1b26 );
	box-shadow: inset 2px 2px 5px rgb(4 10 14), 1px 1px 5px rgb(48 83 107);
    padding: 0.5em;
    margin-bottom: 1em;
	overflow: auto;
}

         /* Базовый контейнер табов */
        
        .tabs {
            width: 100%;
            padding: 0px;
            margin: 0 auto;
        }
        /* Стили секций табов с содержанием */
        
        .tabs > section {
            display: none;
            padding: 15px;
            background: #fff;
            border: 1px solid #ddd;
        }
        
        .tabs > section > p  {
            margin: 0;
            line-height: 1.5;
            color: #383838;
               /* прикрутим анимацию */
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-name: fadeIn;
            animation-name: fadeIn;
        }
        /* Описываем анимацию свойства opacity */
        
        @-webkit-keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
             
        
        /* Прячем чекбоксы */
        
        .tabs > input {
            display: none;
            position: absolute;
        }

        /* Стили переключателей вкладок (табов) */
        
        .tabs > label {
            display: inline-block;
            margin: 0 0 -1px;
            padding: 10px 15px;
			font-size: 18px;
            font-weight: 700;
            text-align: center;
            color: #555;
            border: 0px solid #ddd;
            border-width: 1px 1px 1px 1px;
            background: #f1f1f1;
            border-radius: 3px 3px 0 0;
        }

		/* Шрифт-иконки от Font Awesome в формате Unicode */
        
        .tabs > label:before {
           /* font-family: fontawesome; */
            font-weight: normal;
            margin-right: 10px;
			color:#4ca6ff;
        }
        
        .tabs > label[for*="1"]:before {
            content: "\266b";
        }
        
        .tabs > label[for*="2"]:before {
            content: "\266b";
        }
        
        .tabs > label[for*="3"]:before {
            content: "\266b";
        }
        
        .tabs > label[for*="4"]:before {
            content: "\266b";
        }
        /* Изменения стиля переключателей вкладок при наведении */
        
        .tabs > label:hover {
            color: #4ca6ff;
            cursor: pointer;
        }
        /* Стили для активной вкладки */
        
        .tabs > input:checked + label {
            color: #555;
            border-top: 1px solid #4ca6ff;
            border-bottom: 1px solid #fff;
            background: #fff;
        }
        /* Активация секций с помощью псевдокласса :checked */
        
        #tab1:checked ~ #content-tab1,
        #tab2:checked ~ #content-tab2,
        #tab3:checked ~ #content-tab3,
        #tab4:checked ~ #content-tab4 {
            display: block;
        }
        /* Убираем текст с переключателей 
* и оставляем иконки на малых экранах*/

        
        @media screen and (max-width: 680px) {
            .tabs > label {
               /* font-size: 0;*/
            }
            .tabs > label:before {
                margin: 0;
                font-size: 18px;
            }
        }
		
        /* Изменяем внутренние отступы 
*  переключателей для малых экранов
*/
        
        @media screen and (max-width: 400px) {
            .tabs > label {
                padding: 15px;
            }
        }
                                                 /****************************** МЕДИАЗАПРОСЫ *******************************/
@media (max-width: 768px) {
/* Логотип по центру*/	
		.logo{
		float:none; display:block; margin:0 auto; text-align:center; width:240px; padding:0 0 5px 0;
	}
 	 div .menu{
	    float:none;
	
	}

	div .menu ul li{
		color:#73ffff;
		width:100%;
		border-bottom:1px solid #fff;
	}
	div .menu ul li.active{
		background:url(https://7ccd92.claudeassets.com/20220815163743im_/https://skritikoi.net/wp-content/themes/Music-dark/images/icon-check.png) no-repeat 15px center; padding-left:20px;
	}
	div .menu ul{
		display:none; width:94%;
	}
	div .menu a#pull{
		display:inline-block;
		font-size:14px;
		color:#fff;
		font-weight:bold;
		padding:10px 3%;
		text-decoration:none;
		width:100%;
		position:relative;
	}
	div .menu a#pull:after{
		content:"";
		background:url(https://fb30ff.claudeassets.com/20220815163743im_/https://skritikoi.net/wp-content/themes/Music-dark/images/icon-menu.png) no-repeat;
		width:16px;
		height:18px;
		display:inline-block;
		position:absolute;
		top:12px; 
		right:3%;
	}
	/* отменяем обтекание левой и правой колонок, устанавливаем им ширину 100%*/
	.posts-list, aside {
	width: 100%;
	float: none;
	}
	.widget-post-title {
	font-size: 1.5em;
	}

}
@media (max-width: 480px) {
	/* выравниванием логотип по центру */
	div {
	text-align: center;
	}
	/* отменяем обтекание для логотипа */
	.logo {
	float: none;
	margin-bottom: 15px;
	}
	/* позиционируем меню на увеличившуюся высоту шапки */
	#menu {
	top: 118px;
	}
	/* позиционируем форму поиска по левому краю */
	/*#searchform {
	float: left;
	margin-left: 0;
	}*/
	#searchform {
	margin-left: 46px;
	display: block;
	border: 1px solid #4ca6ff;
	overflow: hidden;
	position: relative;
	margin:0 auto;
	}
		.video-gallery ul li { 
    flex: 0 0 30%; } 
	/* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */
	.post-footer {	
	border-top: none;
	border-bottom: none;
	text-align: center;
	margin-top:20px;
	}
	/* отменяем позиционирование кнопок соцсетей */
	.post-social {
	position: static;
	float:right;
	text-align: center;
	transform: none;
	margin-top: 20px;
	}
	.widget-post-title {
	font-size: 1.2em;
	}
	/* отменяем обтекание для столбцов подвала страницы */
	.footer-col {
	float: none;
	margin-bottom: 20px;
	width: 100%;
	text-align: center;
	}
	.footer-col:last-child {
	text-align: center;
	margin-bottom: 0;
	}
	.posts-list {
    padding: 0;
    }
}

@media (max-width: 360px) {
	/* выравниванием логотип по центру */
	div {
	text-align: center;
	}
	/* отменяем логотип */
	a.logo img {
	    display:none;
	}
/*	.logo {
	float: none;
	margin-bottom: 15px;
	} */
	header .header-wrap {
	    padding: 0;
        margin-bottom: 10px;
	}
	/* позиционируем меню на увеличившуюся высоту шапки */
	#menu {
	top: 118px;
	}
	
	#searchform {
	margin-left: 46px;
	display: block;
	border: 1px solid #4ca6ff;
	overflow: hidden;
	position: relative;
	margin:0 auto;
	}
	.video-gallery ul li { 
    flex: 0 0 100%;  
	}
	
	/* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */
	.post-footer {	
	border-top: none;
	border-bottom: none;
	text-align: center;
	margin-top:20px;
	}
	/* отменяем позиционирование кнопок соцсетей */
	.post-social {
	position: static;
	float:right;
	text-align: center;
	transform: none;
	margin-top: 20px;
	}
	.widget-post-title {
	font-size: 1.2em;
	}
	/* отменяем обтекание для столбцов подвала страницы */
	.footer-col {
	float: none;
	margin-bottom: 20px;
	width: 100%;
	text-align: center;
	}
	.footer-col:last-child {
	text-align: center;
	margin-bottom: 0;
	}
	.posts-list {
    padding: 0;
    }
@media (max-width: 240px) {
	/* выравниванием логотип по центру */
	div {
	text-align: center;
	}
	/* отменяем логотип */
	a.logo img {
	    display:none;
	}
/*	.logo {
	float: none;
	margin-bottom: 15px;
	} */
	header .header-wrap {
	    padding: 0;
        margin-bottom: 10px;
	}  
	/* позиционируем меню на увеличившуюся высоту шапки */
	#menu {
	top: 118px;
	}
	
	#searchform {
	margin-left: 46px;
	display: block;
	border: 1px solid #4ca6ff;
	overflow: hidden;
	position: relative;
	margin:0 auto;
	}
	.video-gallery ul li { 
    flex: 0 0 100%;  
	}
	/* убираем верхнюю и нижнюю границы и выравниваем кнопку по центру */
	.post-footer {	
	border-top: none;
	border-bottom: none;
	text-align: center;
	margin-top:20px;
	}
	/* отменяем позиционирование кнопок соцсетей */
	.post-social {
	position: static;
	float:right;
	text-align: center;
	transform: none;
	margin-top: 20px;
	}
	.widget-post-title {
	font-size: 1.2em;
	}
	/* отменяем обтекание для столбцов подвала страницы */
	.footer-col {
	float: none;
	margin-bottom: 20px;
	width: 100%;
	text-align: center;
	}
	.footer-col:last-child {
	text-align: center;
	margin-bottom: 0;
	}
	.posts-list {
    padding: 0;
    }
}
/*
     FILE ARCHIVED ON 22:37:14 Jul 08, 2022 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 09:07:27 Jul 07, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.374
  exclusion.robots: 0.038
  exclusion.robots.policy: 0.031
  esindex: 0.005
  cdx.remote: 9.214
  LoadShardBlock: 718.683 (3)
  PetaboxLoader3.datanode: 275.408 (4)
  PetaboxLoader3.resolve: 558.844 (2)
  load_resource: 171.895
*/