:root {
  --color1: #D7B56D;
  --color2: #1E1E1C;
  --color3: #FAF0EB;
  --color4: #787878;
  --color5: #E3E3E3;
  --color6: #7D993F;
  --color7: #f7fcea;  
}

body {
  margin:0; 
  padding:0;
  background:#1E1E1C;
  font-family: "Fira Sans", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight:400;
  color:#FFF;
}


.color1 {
   color: var(--color1);
   }
.color2 {
   color: var(--color2);
   }  
.color3 {
   color: var(--color3);
   } 
.color4 {
   color: var(--color4);
   } 
.color5 {
   color: var(--color5);
   }   
.color6 {
   color: var(--color6);
   }    
.color7 {
   color: var(--color7);
   }      
   
.bg-color1 {
    background-color:var(--color1);
   }
.bg-color2 {
    background-color:var(--color2);
   }  
.bg-color3 {
    background-color:var(--color3);
   } 
.bg-color4 {
    background-color:var(--color4);
   } 
.bg-color5 {
    background-color:var(--color5);
   } 
.bg-color6 {
    background-color:var(--color6);
   } 
.bg-color7 {
    background-color:var(--color7);
   }  

/* xs (<=543px) */
@media (max-width: 575px) { 
    .tb  {
        padding-top:30px;
        }
    .hd1 {  
        font-size:36px;
        margin-bottom:1rem;
        }
    .hd2 {  
        font-size:18px;
        margin-bottom:0.5rem;
        }  
    .hd-top {  
        font-size:40px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 25px;
        }
    .block {
        padding-top:2rem;
        padding-bottom:2rem;
    }
    .hdline {
        padding-bottom:1rem;
    }
   
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:35px;
        line-height:32px;
    }    
    .tl5 {
        font-size:18px;
    }  
    .tl6 {
        font-size:22px;
    }  
    .but1 {
        width:70%;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    }
.head1-1 {
    font-size:1.3rem;
    margin-bottom:1.5rem;
    }    
}
 
/* sm (>=576 и <=767) */
@media (min-width: 576px) and (max-width: 767px) { 
    .tb  {
        padding-top:30px;
        }    
    .hd1 {  
        font-size:40px;
        margin-bottom:1rem;
        } 
    .hd2 {  
        font-size:18px;
        margin-bottom:0.5rem;
        } 
    .hd-top {  
        font-size:40px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 36px;
        } 
    .block {
        padding-top:2rem;
        padding-bottom:2rem;
    }    
    .tl1 {
        font-size:32px;
    }
    .tl2 {
        font-size:26px;
    } 
    .tl3 {
        font-size:22px;
    } 
    .tl4 {
        font-size:40px;
        line-height:40px;
    }    
    .tl5 {
        font-size:22px;
    }  
    .tl6 {
        font-size:24px;
    }  
    .but1 {
        width:70%;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    }  
.head1-1 {
    font-size:1.3rem;
    margin-bottom:1.5rem;    
    }     
}
 
/* md (>=768 и <=991) */
@media (min-width: 768px) and (max-width: 991px) {
    .tb  {
        padding-top:30px;
    }   
    .hd1 {  
        font-size:42px;
        margin-bottom:1rem;
    }  
    .hd2 {  
        font-size:18px;
        margin-bottom:0.5rem;
        } 
    .hd-top {  
        font-size:50px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 30px;
        }    
    .block {
        padding-top:2rem;
        padding-bottom:2rem;
    } 
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:55px;
        line-height:80px;
    }    
    .tl5 {
        font-size:24px;
    }  
    .tl6 {
        font-size:22px;
    }  
    .but1 {
        width:70%;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    } 
.head1-1 {
    font-size:1.5rem;
    margin-bottom:1.5rem;    
    }    
}
 
/* lg (>=992 и <=1199) */
@media (min-width: 992px) and (max-width: 1199px) {
    .tb  {
        padding-top:70px;
    }    
    .hd1 {  
        font-size:42px;
        margin-bottom:1.5rem;
        } 
    .hd2 {  
        font-size:22px;
        margin-bottom:0.5rem;
        } 
    .hd-top {  
        font-size:128px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 35px;
        }   
    .block {
        padding-top:3rem;
        padding-bottom:3rem;
    }  
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:35px;
        line-height:32px;
    }    
    .tl5 {
        font-size:18px;
    }  
    .tl6 {
        font-size:22px;
    }  
    .but1 {
        width:70%;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    } 
.head1-1 {
    font-size:1.6rem;
    margin-bottom:1.5rem;    
    }    
}
 
/* xl (>=1200) */
@media (min-width: 1140px) { 
    .tb  {
        padding-top:100px;
    }    
    .hd1 {  
        font-size:42px;
        margin-bottom:1.5rem;
        } 
    .hd2 {  
        font-size:22px;
        margin-bottom:0.5rem;
        }  
    .hd-top {  
        font-size:128px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 35px;
        } 
    .block {
        padding-top:3rem;
        padding-bottom:3rem;
    }    
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:75px;
        line-height:70px;
    }    
    .tl5 {
        font-size:30px;
    }  
    .tl6 {
        font-size:32px;
    }  
    .but1 {
        width:50%;
        font-size:25px;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:80%;
        margin-top:20px;
    }    
    .info1 {
        padding-bottom:30px;
    }
.head1-1 {
    font-size:1.6rem;
    margin-bottom:1.5rem;    
    }    
}
/* xxl (>=1400) */
@media (min-width: 1320px) { 
    .tb  {
        padding-top:110px;
    }    
    .hd1 {  
        font-size:42px;
        margin-bottom:1.5rem;
        } 
    .hd2 {  
        font-size:22px;
        margin-bottom:0.5rem;
        }  
    .hd-top {  
        font-size:128px;
        margin-bottom:0.5rem;
        }         
    .ttl {
        font-size: 35px;
        } 
    .block {
        padding-top:3rem;
        padding-bottom:3rem;
    }    
    .tl1 {
        font-size:25px;
    }
    .tl2 {
        font-size:22px;
    } 
    .tl3 {
        font-size:18px;
    } 
    .tl4 {
        font-size:70px;
        line-height:70px;
    }    
    .tl5 {
        font-size:32px;
    }  
    .tl6 {
        font-size:36px;
    }  
    .but1 {
        width:40%;
        font-size:24px;
        margin-top:50px;
        margin-bottom:50px;
    }
    .but2 {
        width:40%;
        margin-top:20px;
        font-size:24px;
    }    
    .info1 {
        padding-bottom:30px;
    } 
.head1-1 {
    font-size:1.6rem;
    margin-bottom:1.5rem;    
    }    
}

.tl1 {
    font-weight:bold;
}
.tl4 {
    font-weight:bold;
}

.head1-1  {
	font-family: 'Montserrat', sans-serif;
	color:#666;
	font-weight:600;
	text-transform:uppercase;
}
.bord {
    border:1px solid #d7b56d;
    border-radius:6px;
}

.but1 {
    background:#F2AF1F;
    padding:1rem 2rem;
    border-radius:1rem;
    font-weight:600;
    display:inline-block;
}
.but2 {
    background:#F2AF1F;
    padding:1rem 2rem;
    border-radius:1rem;
    font-weight:600;
    display:inline-block;
}

.bg-line {
    position: absolute;
    height: 100%;
    background: #222;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0);
}
   
.circle {
	width: 44px;
    height: 44px;
    background: #222;
    border-radius: 100%;
    border: 2px solid #fff;
	}

.digit {	
	position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #fff;
}   
   
   
.hd1 {
    font-weight:400;
    font-family: "Playfair Display", serif;
    color: var(--color1);
}

.hd2 {
    font-weight:500;
    
}

.hd-top {
    font-weight:400;
    font-family: "Playfair Display", serif;
    color: #FFF;
    line-height: 1.0;
}

.ankor {
    display:block;
    margin-top:-120px;
    padding-top:120px
}

    
.hdline {
    border-top:5px solid #EF7F1A;
    width:25%;
}  

div.but {
    padding:12px;
}

div.but a, .but a:link, .but a:visited  { 
    font-family: 'Montserrat', sans-serif;
	text-decoration:none;
	color:#333;
	font-size:20px;
	font-weight:500;
	text-transform:uppercase
	
	border-radius:6px;
	background:#FFF;
	transition: 0.5s;
	}	
div.but a:hover  { 
	color:#FFF;
	background:#EF7F1A;
	transition: 0.5s;
	}

/*---------------------------Top Menu------------------------------------*/

a.topmenu, a.topmenu:link, a.topmenu:visited, a.topmenu:active  { 
	text-decoration:none;
	color:var(--color1);
	}	
a.topmenu:hover  { 
	color:#FFF;
	}

.main {
    padding-top:3rem;
    padding-bottom:1rem;
}

.main a, a:link, a:visited, a:active, a:hover {
    color: var(--color1);
    font-weight:600;
}


/* ------------------------ menu-down  --------------------------- */

a.menu-down, a.menu-down:link, a.menu-down:visited {
    color:#999;
    text-decoration:none;
}
a.menu-down:hover {
    color: #666;
}

<!--  ------------       breadcrumbs  ----------------       -->
.bc {
  font-size: 0.9rem;
  color: #AAA;
  margin-bottom: 1.5rem;
  list-style: none;
  padding:0;
}
.bc > li {
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
}

.bc ul {
    margin: 0 !important; 
    padding: 0 !important; 
   }	
.bc a, a:visited { text-decoration:underline; color: #AAA;}
.bc a:hover { text-decoration:underline; color: #BA624B;}

}
div.menu a, a:link, a:visited  {
  text-decoration:underline;
  color:#0E58A6;
}
div.menu a:hover {
  text-decoration:underline;
  color:#BA624B;
}

.d1 {
fill:#999;
transition: 0.5s;
}

.d1:hover {
fill:#666;
transition: 0.5s;
}

.WY_iframe {
    

}
.WY_link {
    position: relative;
    display: inline-block;
    background: url('assets/css/play-h.png') center center no-repeat;
}
.WY_link:after {
    content: " ";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('assets/css/play.png') center center no-repeat;
}
.WY_link:hover:after {
    background-image: url('assets/css/play-h.png');
}




.menuxs div {
    border-bottom:1px dashed #626172;
    padding:0.5rem 0;
}
.nav {
    width: 60%;
    min-width: 60%;
    /* фиксируем и выставляем высоту панели на максимум */
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    margin: 0;
    /* сдвигаем (прячем) панель относительно правого края страницы */
    right: -380px;
    /* внутренние отступы */
    padding: 15px 20px;
    /* плавный переход смещения панели */
    -webkit-transition: right 0.3s;
    -moz-transition: right 0.3s;
    transition: right 0.3s;
    /* определяем цвет фона панели */
    background: #4D4C4C;
    /* поверх других элементов */
    z-index: 2000;
}


/**
 * Кнопка переключения панели
 * тег <label>
 */

.nav-toggle {
    /* абсолютно позиционируем */
    position: fixed;
    /* относительно правого края панели */
    right: 0;
    /* отступ от верхнего края панели */
    top: 1em;
    /* внутренние отступы */
    padding: 0.5em;
    /* определяем цвет фона переключателя
     * чаще вчего в соответствии с цветом фона панели
    */
    background: inherit;
    opacity:0.5;
    /* цвет текста */
    color: #AAA;
    /* вид курсора */
    cursor: pointer;
    /* размер шрифта */
    font-size: 1.2em;
    line-height: 1;
    /* всегда поверх других элементов страницы */
    z-index: 2001;
    /* анимируем цвет текста при наведении */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}


/* определяем текст кнопки 
 * символ Unicode (TRIGRAM FOR HEAVEN)
*/

.nav-toggle:after {
    content: '\2630';
    text-decoration: none;
}


/* цвет текста при наведении */

.nav-toggle:hover {
    color: #f4f4f4;
}


/**
 * Скрытый чекбокс (флажок)
 * невидим и недоступен :)
 * имя селектора атрибут флажка
 */

[id='nav-toggle'] {
    position: absolute;
    display: none;
}


/**
 * изменение положения переключателя 
 * при просмотре на мобильных устройствах
 * когда навигация раскрыта, распологаем внутри панели
*/

[id='nav-toggle']:checked ~ .nav > .nav-toggle {
    left: auto;
    right: 2px;
    top: 1em;
}


/**
 * Когда флажок установлен, открывается панель
 * используем псевдокласс:checked
 */

[id='nav-toggle']:checked ~ .nav {
    right: 0;
    box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -moz-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    -webkit-box-shadow:-4px 0px 20px 0px rgba(0,0,0, 0.5);
    overflow-y: auto;
}


/* 
 * смещение контента страницы
 * на размер ширины панели,
 * фишка необязательная, на любителя
*/

[id='nav-toggle']:checked ~ main > article {
    -webkit-transform: translateX(-320px);
    -moz-transform: translateX(-320px);
    transform: translateX(-320px);
}


/*
 * изменение символа переключателя,
 * привычный крестик (MULTIPLICATION X), 
 * вы можете испльзовать любой другой значок
*/

[id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
    content: '\2715';
}


/**
 * профиксим баг в Android <= 4.1.2
 * см: http://timpietrusky.com/advanced-checkbox-hack
 */

body {
    -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
    to {
      padding: 0;
    }
}


/**
 * позаботьтимся о средних и маленьких экранах
 * мобильных устройств
 */

@media screen and (min-width: 320px) {
    html,
    body {
      margin: 0;
/*      overflow-x: hidden;  */
    }
}

@media screen and (max-width: 320px) {
    html,
    body {
      margin: 0;
/*      overflow-x: hidden;  */
    }
    .nav {
      width: 100%;
      box-shadow: none
    }
}


/**
 * Формируем стиль заголовка (логотип) панели 
*/

.nav h2 {
    width: 90%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
    font-size: 1.3em;
    line-height: 1.3em;
    opacity: 0;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}

.nav h2 a {
    color: #EEE;
    text-decoration: none;
    text-transform: uppercase;
}


/*плавное появление заголовка (логотипа) при раскрытии панели */

[id='nav-toggle']:checked ~ .nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}


/**
 * формируем непосредственно само меню
 * используем неупорядоченный список для пунктов меню
 * прикрутим трансфомации и плавные переходы
 */

.nav > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav > ul > li {
    line-height: 2.5;
    opacity: 0;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
    -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}

[id='nav-toggle']:checked ~ .nav > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}


/* определяем интервалы появления пунктов меню */

.nav > ul > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}

.nav > ul > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}

.nav > ul > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}

.nav > ul > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}

.nav > ul > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}

.nav > ul > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}


/**
 * оформление ссылок пунктов меню
 */

.nav > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    font-family: 'Montserat', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #EEE;
    width: 100%;
    text-decoration: none;
    /* плавный переход */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}


/**
 * состояние ссылок меню при наведении
 */

.nav > ul > li > a:hover,
.nav > ul > li > a:focus {
    color: white;
    padding-left: 10px;
    font-weight:500;
}


/**
 * линия подчеркивания ссылок меню
 */

.nav > ul > li > a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.nav > ul > li > a:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: #AAA;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}


/**
 * анимируем линию подчеркивания 
 * ссылок при наведении
 */

.nav > ul > li > a:hover:before {
    width: 0%;
    background: #AAA;
    -webkit-transition: width .5s ease;
    transition: width .5s ease;
}

.nav > ul > li > a:hover:after {
    width: 0%;
    background: transparent;
    -webkit-transition: width 0s ease;
    transition: width 0s ease;
}

.bg-animation2 {
	animation: bg-animation2 300s ease-in-out infinite;
	}
@keyframes bg-animation2 {
    0% {
        background-size: 100%;
        background-position: 50% 50%;
    }
    20% {
        background-size: 200%;
        background-position: 0 100%;
    }    
    40% {
        background-size: 110%;
        background-position: 20% 80%;

    }
    60% {
        background-size: 300%;
        background-position: 100% 10%;
    }
    80% {
        background-size: 120%;
        background-position: 40% 70%;

    }    
    100% {
        background-size: 100%;
        background-position: 50% 50%;
    }
}	

body.modal-open {
    overflow: auto;
    padding-right: 0px !important;
}	

.blink-1 {
  animation-name: blink;
  animation-timing-function: linear;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
.blink-2 {
  animation-name: blink;
  animation-timing-function: linear;
  animation-duration: 2s;
  animation-iteration-count: infinite;  
}
.blink-3 {
  animation-name: blink;
  animation-timing-function: linear;
  animation-duration: 3s;
  animation-iteration-count: infinite;  
}
@keyframes blink {
  50% {
    opacity: 0.2;
  }
}

.d1 {
    position: relative;
    margin-top:5px;
    height:40vh;
}
.d2 {
    min-height:40%;
    background-color:rgba(0, 0, 0, 0.4);
    position: absolute;
    bottom:0;
    text-align:center;
    padding:5px 20px;
    width:100%;
}
.d3 {
    color:#d9e021;
    font-size:30px;
}
.d4 {
    color:#FFF;
    font-size:24px;
}

.butt1 {
    border-color:#F1D4C5;
    background:#FFF;
    color:#BA624B;
    font-weight:400;
}

.song {
    border:1px solid #555;
    border-radius:8px;
    
}
.audio-player {
    background-color: #1E1E1C ;
    border:1px solid #D7B56D;
    border-radius:6px;
    padding:1em;

}

audio { width: 100%; }

audio::-webkit-media-controls-panel {
  background-color: #333;
  border:0;
}

audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel {
     background-color: #000;
     color: #000;
     }

audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button,
     audio::-webkit-media-controls-panel {
     background-color: #000;
     color: #000;
     }
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button