/*
Theme Name: Большая Балашиха
Description: Обновленный дизайн, 2018
*/

@font-face {
	font-family: 'AvenirNext';
	src: url('fonts/AvenirNextCyr-Regular.eot');
	src: local('Avenir Next Cyr Regular'), local('AvenirNextCyr-Regular'),
		url('fonts/AvenirNextCyr-Regular.eot?#iefix') format('embedded-opentype'),
		url('fonts/AvenirNextCyr-Regular.woff') format('woff'),
		url('fonts/AvenirNextCyr-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
font-family: 'AvenirNext';
src: url('AvenirNextCyr-Medium.eot');
src: local('Avenir Next Cyr Medium'), local('AvenirNextCyr-Medium'),
	url('fonts/AvenirNextCyr-Medium.eot?#iefix') format('embedded-opentype'),
	url('fonts/AvenirNextCyr-Medium.woff') format('woff'),
	url('fonts/AvenirNextCyr-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'AvenirNext';
src: url('AvenirNextCyr-Bold.eot');
src: local('Avenir Next Cyr Bold'), local('AvenirNextCyr-Bold'),
	url('fonts/AvenirNextCyr-Bold.eot?#iefix') format('embedded-opentype'),
	url('fonts/AvenirNextCyr-Bold.woff') format('woff'),
	url('fonts/AvenirNextCyr-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}


@font-face {
font-family: 'AvenirNext';
src: url('fonts/AvenirNextCyr-Demi.eot');
src: local('Avenir Next Cyr Demi'), local('AvenirNextCyr-Demi'),
	url('fonts/AvenirNextCyr-Demi.eot?#iefix') format('embedded-opentype'),
	url('fonts/AvenirNextCyr-Demi.woff') format('woff'),
	url('fonts/AvenirNextCyr-Demi.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'AnselmSans';
src: url('fonts/AnselmSans-MediumBold.eot');
src: local('Anselm Sans Medium Bold'), local('AnselmSans-MediumBold'),
	url('fonts/AnselmSans-MediumBold.eot?#iefix') format('embedded-opentype'),
	url('fonts/AnselmSans-MediumBold.woff') format('woff'),
	url('fonts/AnselmSans-MediumBold.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'AnselmSans';
src: url('fonts/AnselmSans.eot');
src: local('Anselm Regular'), local('AnselmSans'),
	url('fonts/AnselmSans.eot?#iefix') format('embedded-opentype'),
	url('fonts/AnselmSans.woff') format('woff'),
	url('fonts/AnselmSans.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

* {margin: 0px; padding: 0px; box-sizing: border-box; outline: none}
body {font-family: 'AvenirNext'; color: #000; line-height: 1.25; background: #f5f3f0; font-size: 16px; padding-top: 60px}
html, body {width: 100%; height: 100%}
.max {max-width: 1160px; margin: 0px auto}
.float {margin: 0px -10px}
.clear {clear: both}
.flex-wrap {display: flex; display:-webkit-flex; -webkit-justify-content:space-between; justify-content:space-between; flex-wrap: wrap; -webkit-flex-wrap: wrap}
.flex-nowrap {display: flex; display:-webkit-flex; -webkit-justify-content:space-between; justify-content:space-between; flex-wrap: nowrap; -webkit-flex-wrap: nowrap}
.flex-center {align-items: center; -webkit-align-items:center; height: 100%}
.ds {-webkit-user-select: none; -moz-user-select: none; user-select:none}
.half-50 {width: calc(50% - 10px)}

h1 {margin: 0px 0px 20px 0px; font-family: 'AnselmSans'; color: #824e99; text-align: left; text-transform: uppercase; font-size: 28px; font-weight: 500}
h1 span {color: #B584BF; font-weight: 400}
h2 {margin: 10px 0px 20px 0px; font-family: 'AnselmSans'; color: #824e99; text-align: left; text-transform: uppercase; font-size: 28px; font-weight: 500}
a {cursor: pointer; text-decoration: none; color: inherit}
p {margin-bottom: 10px}
img {max-height: 100%; max-width: 100%}

.blur.on {filter: blur(3px)}


/* INPUTS */
input[type=radio] {-webkit-appearance: none; background: #fff; border-radius: 50%; width: 15px; height: 15px; display: inline-block; vertical-align: middle; margin-right: 5px; border:2px solid #fff; box-shadow: 0px 0px 0px 1px #aaa; margin-top: -1px}
input[type=radio]:checked {background: #824e99; box-shadow: 0px 0px 0px 1px #824e99}
/* INPUTS */


/* HEADER */
.beta {position: fixed; top:0; left: 0; width: 100%; background: #ffc77d; font-size: 14px; text-align: center; line-height: 30px; height: 30px; z-index: 1000}
header {background: #824e99; height: 60px; color: #fff; position: fixed; top:0px; left: 0px; width: 100%; z-index: 1000; padding: 0px 20px}
header .logo-block {width: 235px; background: url(images/logo-main.svg) 0% 50% no-repeat; background-size: contain; height: 36px}

header .menu li {display: inline-block; margin: 0px 8px; position: relative; cursor: pointer}
header .menu li a {border-bottom: 2px solid rgba(255,255,255,0.4); transition: 300ms}
header .menu li a:hover {border-bottom: 2px solid rgba(255,255,255,1)}
header .menu li.menu-item-has-children:after {content: ''; display: inline-block; vertical-align: middle; background:url(images/sub.svg) 50% 50% no-repeat; background-size: contain; width: 16px; height: 16px}
header .menu li .sub-menu {position: absolute; width: 200px; background: #824e99; border-radius: 15px; top:30px; left: 50%; margin-left: -100px; overflow: hidden; max-height: 0px; transition: ease-in 300ms; opacity: 0}
header .menu li.menu-item-has-children.show > a, header .menu li.current-menu-ancestor > a, header .menu li.current-menu-item > a {color:#ffc77d}
header .menu li.menu-item-has-children.show .sub-menu {max-height: 500px; transition: ease-out 300ms; top: 50px; opacity: 1}
header .menu li.menu-item-has-children:before {border: 10px solid transparent; border-bottom: 10px solid #824e99; content: ''; top:10px; left: 50%; margin-left: -15px; display: block; opacity: 0; position: absolute; transition: ease-in 300ms}
header .menu li.menu-item-has-children.show:before {opacity: 1; top:30px; transition: ease-out 300ms}
header .menu li .sub-menu li {display: block; text-align: center; margin: 15px 0px}

header .radio, .mobile-menu .radio {background: url(images/logo-radio-small.svg) 0% 50% no-repeat; height: 32px; background-size: 32px; padding-left: 30px}
header .radio .text, .mobile-menu .radio .text {font-size: 14px; line-height: 1.2}
header .radio b, .mobile-menu .radio b {color: #ffc77d; display: block; font-weight: 400}
#radio {display: none}
.control div.btn {height: 32px; width: 32px; background-position: 50% 50%; background-repeat: no-repeat; margin-left: 7px}
.control div.btnPlay {background-image: url(images/play.svg)}
.control div.paused {background-image: url(images/stop.svg)}
.control div.btn + div {margin-left: 5px; width: 80px; line-height: 1}
.mobile-menu .radio {background-color: #824e99; padding: 25px 30px; color: #fff; margin-top: 15px}

.volume {position:relative; cursor:pointer; height:3px; opacity: 0; transition: 300ms; background: rgba(255,255,255,0.4)}
.volume.show {opacity: 1}
.volumeBar {display:block; height:100%; position:absolute; top:0; left:0; background-color:#ffc77d; z-index:10}
.track {font-size: 10px; width: 100%; margin-bottom: 6px; line-height: 10px; height: 10px; opacity: 0; transition: 300ms}
.track.show {opacity: 1}

header .logo-block b {font-weight: 500; color: #fff}
header .social a {display: inline-block; vertical-align: middle; height: 27px; width: 27px; background-color: rgba(255,255,255,0.4); border-radius: 50%; margin: 0px 5px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; transition: 300ms}
header .social a:hover {background-color: rgba(255,255,255,1)}
header .social a.vk {background-image: url(images/vk-h.svg)}
header .social a.fb {background-image: url(images/fb-h.svg)}
header .social a.in {background-image: url(images/in-h.svg)}
header .social a.you {background-image: url(images/you-h.svg)}

header .show-modal-search {width: 30px; height: 30px; cursor: pointer; background: url(images/search.svg) 50% 50% no-repeat; background-size: contain; opacity: 0.7; transition: 300ms}
header .show-modal-search:hover {opacity: 1}
header .mobile-menu-icon {position: relative; height: 30px; width: 26px; cursor: pointer; display: none}
header .mobile-menu-icon span {position: absolute; height: 2px; background: rgba(255,255,255,0.4); width: 100%; transition: 400ms}
header .mobile-menu-icon span:nth-of-type(1) {top:8px; translateY(-3px)}
header .mobile-menu-icon span:nth-of-type(2) {top:20px}
header .mobile-menu-icon.active span {background: #fff}
header .mobile-menu-icon.active span:nth-of-type(1) {transform: rotateZ(-135deg); top:13px}
header .mobile-menu-icon.active span:nth-of-type(2) {transform: rotateZ(-225deg); top:13px}

.mobile-menu {position: fixed; top:90px; left: 0px; width: 100%; background: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); color: #824e99; z-index: 900; max-height: 0px; overflow: hidden; transition: 400ms ease-in}
.mobile-menu.active {max-height: 500px; transition: 400ms ease-out}
.mobile-menu .max {padding: 20px 5px}
.mobile-menu .menu {margin-bottom: 10px}
.mobile-menu li .sub-menu {display: inline}
.mobile-menu li {display: inline}
.mobile-menu li a {padding: 10px 5px; display: inline-block}
.mobile-menu .social a {display: inline-block; vertical-align: middle; height: 27px; width: 27px; background-color: #824e99; border-radius: 50%; margin: 0px 5px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; transition: 300ms}
.mobile-menu .social a.vk {background-image: url(images/vk-f.svg)}
.mobile-menu .social a.fb {background-image: url(images/fb-f.svg)}
.mobile-menu .social a.in {background-image: url(images/in-f.svg)}
.mobile-menu .social a.you {background-image: url(images/you-f.svg)}
.mobile-menu .search-block {width:calc(100% - 150px)}
.mobile-menu input[type=search] {-webkit-appearance: none; line-height: 32px; height: 34px; border: 1px solid #e1e1e1; border-radius: 5px; padding: 0px 10px; width: 100%; font-size: 12px}

/* HEADER */

section {padding: 40px 0px 20px 0px}
section.white {background: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.1)}

/* ARTICLES */
.article {position: relative; background-color: #fff; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%}
.article .cats a {text-transform: uppercase; border-bottom: 2px solid rgba(255,255,255,0.4); font-size: 11px; margin-right: 10px; font-weight: 400; padding-bottom: 2px; letter-spacing: 1px; display: inline-block; margin-bottom: 5px}
.article .date {font-size: 14px; line-height: 1}
.article .best {color: #fff; position: absolute; top:-15px; height: 30px; line-height: 30px; left: 30px; background: #824e99; font-size: 11px; width: 125px; text-align: center}


.article.type-1-3 {margin: 20px 0px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); width: calc(100% / 3 - 20px)}
.article.type-1-3 .img {height: 250px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; display: block}
.article.type-1-3 .text {padding: 15px 30px 30px 30px; background: #fff}
.article.type-1-3 .cats a {color: #824e99; border-bottom: 2px solid #824e99}
.article.type-1-3 h3 {margin: 30px 0px; font-size: 22px; font-weight: 500}
.article.type-1-3 .date {font-size: 14px}
.article.type-1-3 .date i {background: url(images/date-v.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
.article.type-1-3 h3:hover {text-decoration: underline}
.article.type-1-3 .cats a:hover {border-bottom: 2px solid #5e3073}

.article.type-1-2 {width: calc(50% - 20px); height: 180px; margin: 20px 0px; height: 350px; display: block; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); color: #fff}
.article.type-1-2 .inner {background: linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.9) 100%); width: 100%; height: 100%; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; transition: 300ms}
.article.type-1-2 h3 {font-weight: 400; font-size: 22px; margin: 30px 0px}
.article.type-1-2 .date i {background: url(images/date-w.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
.article.type-1-2:hover .inner {background: linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%)}
.article.type-1-2 .cats a:hover {border-bottom: 2px solid #fff}
.article.type-1-2 h3:hover {text-decoration: underline}

.article.type-2-3 {width: calc(200% / 3 - 20px); margin: 20px 0px; display: block; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); color: #fff}
.article.type-2-3 .cats {margin-bottom: 30px}
.article.type-2-3 .inner {background: linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.9) 100%); width: 100%; height: 100%; padding: 30px; display: flex; flex-direction: column; justify-content: flex-end; transition: 300ms}
.article.type-2-3 h3 {font-weight: 400; font-size: 22px; margin-bottom: 30px}
.article.type-2-3 .date i {background: url(images/date-w.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
.article.type-2-3:hover .inner {background: linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%)}
.article.type-2-3 .cats a:hover {border-bottom: 2px solid #fff}
.article.type-2-3 h3:hover {text-decoration: underline}

.article.type-3-3 {margin: 20px 0px; width: 100%; box-shadow: 0px 0px 10px rgba(0,0,0,0.1)}
.article.type-3-3 .img {width: calc(200% / 3 + 20px); height: 500px; background-size: cover; background-position: 50% 50% ; background-repeat: no-repeat; display: block}
.article.type-3-3 .text {width: calc(100% / 3 - 20px); padding: 30px; display: flex; flex-direction: column; justify-content: space-between; background-color: #fff}
.article.type-3-3 .cats a {color: #824e99; border-bottom: 2px solid #824e99}
.article.type-3-3 h3 {margin: 30px 0px 15px 0px; font-size: 22px; font-weight: 500}
.article.type-3-3 .date i {background: url(images/date-v.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
.article.type-3-3 h3:hover {text-decoration: underline}
.article.type-3-3 .cats a:hover {border-bottom: 2px solid #5e3073}
/* ARTICLES */


.views {position: absolute; top:20px; color: #fff; right: 20px; font-size: 14px; padding-left: 25px; background: url(images/view.svg) 0% 50% no-repeat; background-size: 20px}
.news .article .views {top:55px; right: 10px}

/* FIRST */
.main {background: #e6e4e1}
.main .article {width: calc(50% - 10px); height: 180px; display: block; color: #fff; margin-bottom: 20px}
.main .article .date {display: none}
.main .article .inner {background: linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.9) 100%); width: 100%; height: 100%; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; transition: 300ms}
.main .article h3 {font-weight: 400; font-size: 16px; margin-bottom: 5px}
.main .article:hover .inner {background: linear-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%)}
.main .article h3:hover {text-decoration: underline}
.main .article .cats a:hover {border-bottom: 2px solid rgba(255,255,255,1)}
.main .big-article .article {width: 100%; height: 380px}
.main .big-article .article .inner {display: flex; flex-direction: column; justify-content: flex-end; padding: 30px}
.main .big-article .article h3 {font-size: 22px; margin: 20px 0px}
.main .big-article .article .date {display: block}
.main .article .date i {background: url(images/date-w.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
/* FIRST */


/* NEWS */
.widgets {margin-bottom: 30px}
.widgets .video {width: calc(50% - 10px); height: 330px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); color: #20bdbe; position: relative}
.widgets .video .inner {background: rgba(0,0,0,0.4); transition: 300ms; height: 100%; width: 100%; border-top: 10px solid #20bdbe; display: block}
.widgets .video .play {background: url(images/logo-video.svg) 50% 50% no-repeat; background-size: contain; transition: 300ms; height: 46px; width: 100%; display: block; position: absolute; top:0; bottom: 0; right: 0; left: 0; margin: auto}
.widgets .video:hover .inner {background-color: rgba(0,0,0,0.2)}
.widgets .video b {color: #fff; display: block; font-weight: 400}
.widgets .video .text {position: absolute; top:0; right: 0; left: 0; bottom: 0; margin: auto; height: 50px; width: 200px}

.widgets .radio-map {width: calc(25% - 10px)}
.widgets .map {margin-bottom: 20px; display: block; width: 100%}
.widgets .radio {display: block; padding: 0px 20px; width: 100%}
.widgets .radio svg {margin-bottom: 5px}
.widgets .radio i {display: inline-block; vertical-align: middle; margin-right: 5px; background: url(images/headphones.svg) 50% 50% no-repeat; background-size: contain; height: 28px; width: 28px}

.news {background: #f5f3f0}
.news .inner {background: #fff; border-top: 10px solid #824e99; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); margin-bottom: 20px; padding: 10px 20px}
.news .article {width: calc(25% - 40px); margin-bottom: 20px}
.news .article .img {width: 100%; height: 150px; background-size: cover; display: block; background-repeat: no-repeat; background-position: 50% 50%; margin: 15px 0px}
.news .article h3 {font-weight: 500; font-size: 16px}
.news .article .date {color: #aaa; margin: 15px 0px}
.news .article .date i {background: url(images/date-v.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
.news .article h3:hover {text-decoration: underline}
.news .more {color: #824e99; text-transform: uppercase; font-size: 11px; font-weight: 600; margin: 10px 0px 20px 20px; letter-spacing: 1px}
.news .more:hover {text-decoration: underline}
.news .left-part {width: calc(100% - 300px)}

.news .sponsor {display: block}
.news .sponsor .img {background-size: contain; background-position: 50% 0%; margin-top: 2px; background-repeat: no-repeat; display: block; height: calc(100% - 20px)}
.news .sponsor-clear .img {background: #fafafa}
.news .sponsor b, .news .sponsor-clear b {color: #aaa; font-weight: 400; font-size: 14px; display: block; text-transform: uppercase}
.news .sponsor.a-0 {margin-top: -27px; width: calc(25% - 15px)}
.news .sponsor.a-0 b {margin-bottom: 10px}
.news .sponsor.a-1 {margin-top: 15px}
.news .sponsor.a-1 b {margin-bottom: 12px}
/* NEWS */


/* MEDIA */
.media {background: #e6e4e1; overflow-x: hidden}
.media .type {color: #824e99; margin: 10px 0px 20px 0px}
.media .type label {margin-left: 10px}
.media .article {margin: 5px 20px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); width: calc((100% - 120px) / 3)}
.media .article .img {height: 250px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; display: block}
.media .article h3:hover {text-decoration: underline}
.media .article .text {padding: 15px 30px 30px 30px; background: #fff; height: 220px}
.media .article .cats a {color: #824e99; border-bottom: 2px solid #824e99}
.media .article h3 {margin: 30px 0px; font-size: 22px; font-weight: 500}
.media .article .date {font-size: 14px}
.media .article .date i {background: url(images/date-v.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
.media .article .inner {height: 100%; width: 100%; background-color: rgba(0,0,0,0.4); background-position: 50% 50%; background-repeat: no-repeat; background-size: 32px; transition: 300ms; display: block}
.media .article .inner.photo {background-image: url(images/photo.svg)}
.media .article .inner.video {background-image: url(images/video.svg)}
.media .article:hover .inner {background-color: rgba(0,0,0,0.2)}
.media .slick-arrow {position: absolute; top:50%; margin-top: -25px; height: 50px; width: 50px; z-index: 10; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; cursor: pointer}
.media .slick-prev {left:calc((100vw - 1300px) / 2); background-image: url(images/prev.svg)} .media .slick-next {right:calc((100vw - 1300px) / 2); background-image: url(images/next.svg)}
.media .slick-slide {opacity: 0.4}
.media .slick-active {opacity: 1}
.media .media-slider:after {content: ''; display: block; position:absolute; top:50%; margin-top: -50px; left: 50%; margin-left: -25px; width: 50px; height: 50px; opacity: 0; background: url(images/loader.svg) 50% 50% no-repeat; animation: roll 2s infinite ease; -webkit-animation: roll 2s infinite ease}
.media .media-slider.loading:after {opacity: 1}
.media .article .cats a:hover {border-bottom: 2px solid #5e3073}
/* MEDIA */

@-webkit-keyframes roll{
0%{-webkit-transform: rotateY(0deg)}
5%{-webkit-transform: rotateY(18deg)}
10%{-webkit-transform: rotateY(36deg)}
15%{-webkit-transform: rotateY(54deg)}
20%{-webkit-transform: rotateY(72deg)}
25%{-webkit-transform: rotateY(90deg)}
30%{-webkit-transform: rotateY(108deg)}
35%{-webkit-transform: rotateY(126deg)}
40%{-webkit-transform: rotateY(144deg)}
45%{-webkit-transform: rotateY(162deg)}
50%{-webkit-transform: rotateY(180deg)}
55%{-webkit-transform: rotateY(198deg)}
60%{-webkit-transform: rotateY(216deg)}
65%{-webkit-transform: rotateY(234deg)}
70%{-webkit-transform: rotateY(252deg)}
75%{-webkit-transform: rotateY(270deg)}
80%{-webkit-transform: rotateY(288deg)}
85%{-webkit-transform: rotateY(306deg)}
90%{-webkit-transform: rotateY(324deg)}
95%{-webkit-transform: rotateY(342deg)}
100%{-webkit-transform: rotateY(360deg)}
}

/* mix */
.mix {background: #f5f3f0}
/* mix */


/* POPULAR */
.popular .article {margin: 5px 20px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); width: calc((100% - 120px) / 3)}
.popular .article .img {height: 180px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; display: block}
.popular .article h3:hover {text-decoration: underline}
.popular .article .text {padding: 15px; background: #fff; height: 200px}
.popular .article .cats a {color: #824e99; border-bottom: 2px solid #824e99}
.popular .article h3 {margin: 15px 0px 30px 0px; font-size: 18px; font-weight: 500; height: 80px}
.popular .article .date {font-size: 14px}
.popular .article .date i {background: url(images/date-v.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
.popular {background: #e6e4e1; overflow-x: hidden}
.popular h2 {text-align: center}
.popular .popular-slider {margin: 0px -20px}
.popular .slick-arrow {position: absolute; top:50%; margin-top: -25px; height: 50px; width: 50px; z-index: 10; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; cursor: pointer}
.popular .slick-prev {left:-50px; background-image: url(images/prev.svg)} .popular .slick-next {right:-50px; background-image: url(images/next.svg)}
.popular .slick-slide {opacity: 0.4}
.popular .slick-active {opacity: 1}
.popular .article .cats a:hover {border-bottom: 2px solid #5e3073}
/* POPULAR */


/* STORIES */
.stories {margin: 30px 0px; color: #fff; background: url(http://gsnrf.ru/wp-content/uploads/2011/04/p000001512.jpg) 50% 50% no-repeat; background-size: cover}
.stories > .inner {height: 100%; width: 100%; background: rgba(0,0,0,0.6); padding: 30px 40px}
.stories .column-one {width: calc(100% / 3); float: left; display: flex; flex-direction: column; justify-content: space-between; height: 400px; padding-right: 30px}
.stories .column-two {width: calc(200% / 3); float: left}
.stories h3 {font-weight: 400; margin: 15px 0px}
.stories .article {border-bottom: 1px solid rgba(255,255,255,0.4); padding: 15px 0px; width: 50%; background: transparent}
.stories .article h3:hover {text-decoration: underline}
.stories .column-two .article:nth-last-of-type(1), .stories .column-two .article:nth-last-of-type(2) {border-bottom: 0px}
.stories .column-two .article:nth-of-type(odd) .inner {border-right: 1px solid rgba(255,255,255,0.4); padding-right: 30px; height: 100%}
.stories .column-two .article:nth-of-type(even) .inner {padding-left: 30px}
.stories .title {font-size: 30px; margin-top: 30px}
.stories .column:nth-of-type(1) .cats a {text-transform: uppercase; border-bottom: 2px solid rgba(255,255,255,0.4); font-size: 11px; margin-right: 10px; font-weight: 400; padding-bottom: 2px; letter-spacing: 1px} 
.stories .more {text-transform: uppercase; font-size: 11px; font-weight: 400; letter-spacing: 1px}
.stories .more:hover {text-decoration: underline}
.stories .cats a:hover, .stories .column:nth-of-type(1) .cats a:hover {border-bottom: 2px solid rgba(255,255,255,1)}
/* STORIES */

.loadmore {cursor: pointer; border: 1px solid #824e99; color: #824e99; text-align: center; height: 80px; line-height: 78px; font-size: 24px; font-weight: 500; transition: 300ms}
.loadmore i {display: inline-block; vertical-align: middle; margin-right: 10px; background: url(images/loadmore.svg) 50% 50% no-repeat #824e99; background-size: 20px; width: 30px; height: 30px}
.loadmore:hover {background: #824e99; color: #fff}


/* INSTAGRAM */
.instagram {padding-bottom: 0px; background: #e6e4e1}
.instagram h2 {text-align: center}
#instafeed a {width: 16.666%; display: block; float: left; position: relative; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; height: 200px}
#instafeed a .inner {background: url(images/in-f.svg) 98% 98% no-repeat; position: absolute; top:0; left: 0; width: 100%; height: 100%; background-size: 30px}
/* INSTAGRAM */


/* PROMO */
.promo {margin: 10px 0px}
.promo .article {width: 25%; border-right: 1px solid #e1e1e1; padding: 10px; background: transparent; height: 80px}
.promo .article:last-of-type {border: none}
.promo .article h3 {font-size: 14px; font-weight: 400}
.promo .cats a {text-transform: none; border: none; font-weight: 600; font-size: 14px; letter-spacing: 0px}
/* PROMO */


/* SINGLE */
.single-page {padding: 50px 150px 50px 50px; font-size: 18px; line-height: 1.5; overflow: hidden}
.single-page img, .single-page .wp-caption {margin: 10px -50px; width: calc(100% + 100px); max-width: none; height: auto; font-size: 14px}
.single-page .wp-caption.alignleft {width: 300px; float: left; margin: 10px 50px 10px -50px}
.single-page .wp-caption img {width: 100%; margin: 0px}
.single-page iframe {margin: 10px -50px; width: calc(100% + 100px)}
.single-page h1 {color: #000; font-size: 34px; margin: 0px 0px 20px 0px; max-width: 600px; text-transform: none; font-family: 'AvenirNext'; font-weight: 700}
.single-page h2 {color: #000; font-size: 22px; margin: 40px 0px 20px 0px}
.single-page h3 {float: right; margin: 20px -50px 20px 50px; width: 300px}
.single-page b, .single-page strong {font-weight: 600}
.single-page p {margin-bottom: 25px}
.single-page .left-part {width: 200px}
.single-page .center-part {width: calc(100% - 300px)}
.single-page p a {color: #824e99; text-decoration: underline}
.single-page .center-part li {margin-left: 18px}
.single-page .cats a {color: #824e99; border-bottom: 2px solid #824e99; text-transform: uppercase; font-size: 11px; margin-right: 10px; font-weight: 400; padding-bottom: 2px; letter-spacing: 1px; display: inline-block; margin-bottom: 5px; vertical-align: middle}
.single-page .cats a:hover {border-bottom: 2px solid #5e3073}
.single-page .date {font-size: 14px; margin-top: 15px; line-height: 14px; color: #777}
.single-page .date i {background: url(images/date-v.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
.single-page .tags {line-height: 1.2}
.single-page .tags a {color: #824e99; margin-right: 5px; display: inline-block; text-transform: uppercase; font-size: 12px}
.single-page .tags a:hover {color: #5e3073}
.single-page .share {margin: 50px 0px}
.single-page .share a {display: block; height: 40px; width: 60px; border: 1px solid #824e99; border-bottom: 0px; text-align: center}
.single-page .share a svg {height: 24px; margin: 8px 0}
.single-page .share a:hover {background-color: #824e99}
.single-page .share a:hover svg * {fill:#fff}
.single-page .share a:last-of-type {border-bottom: 1px solid #824e99}
.single-page blockquote {background: rgba(130, 78, 153, 0.8) url(images/quote-w.svg) 300px 50px no-repeat; background-size: 25px; color: #fff; margin: 50px -150px 50px -350px; width: calc(100% + 500px); padding: 50px 150px 50px 350px; font-size: 27px}
.single-page blockquote p {margin-bottom: 0px}
.single-page .galery-slider {margin: 10px -50px; width: calc(100% + 100px)}
.single-page .galery-slider .slick-slide {height: 450px; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; margin-bottom: 25px}
.single-page .galery-slider .slick-arrow {background: rgba(130, 78, 153, 0.8); height: 70px; top:50%; margin-top: -35px; width: 44px; position: absolute; z-index: 1; background-size: 16px; background-repeat: no-repeat; background-position: 50% 50%}
.single-page .galery-slider .slick-prev {left: 0px; background-image: url(images/arrow-left.svg)}
.single-page .galery-slider .slick-next {right: 0px; background-image: url(images/arrow-right.svg)}
.single-page .galery-slider .caption {position: absolute; top:calc(100% - 25px); font-size: 14px}
.single-page .quote {border-right: 1px solid #e1e1e1; position: relative; padding-right: 25px; margin: 25px 0px 25px -50px; background: url(images/quote-b.svg) 0px 10px no-repeat; background-size: 25px; width: calc(100% + 50px); padding-left: 50px}
.single-page .quote .author {position: absolute; left: 100%; top:50%; margin-top: -100px; width: 150px; padding: 0px 25px; text-align: center; font-size: 12px}
.single-page .quote .author i {display: block; border-radius: 50%; width: 100px; height: 100px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; margin-bottom: 10px}
.single-page .quote .author b {font-size: 12px; font-weight: 500; margin: 0px 5px}
.single-page .quote .author div {width: 100%}

.related .article {margin-bottom: 30px; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); width: calc(25% - 30px)}
.related .article .img {height: 180px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; display: block}
.related .article h3:hover {text-decoration: underline}
.related .article .text {padding: 15px; background: #fff}
.related .article .cats a {color: #824e99; border-bottom: 2px solid #824e99}
.related .article h3 {margin: 15px 0px 30px 0px; font-size: 18px; font-weight: 500}
.related .article .date {font-size: 14px}
.related .article .date i {background: url(images/date-v.svg) 0% 50% no-repeat; background-size: contain; margin-right: 8px; width: 18px; height: 18px; display: inline-block; vertical-align: top; margin-top: -2px}
.related .article .cats a:hover {border-bottom: 2px solid #5e3073}


/* SINGLE */



/* SEARCH-RESULTS */
.search-results {padding: 40px 0px}
.search-results h2 {color: #000; display: inline-block; vertical-align: middle; margin: 0px; font-size: 24px; text-transform: none}
.search-results .result .date {width: 70px; color: #824e99; font-size: 12px; font-weight: 600; line-height: 27px}
.search-results .result .title {font-size: 22px; margin-right: 10px}
.search-results .result .date + div {width: calc(100% - 80px)}
.search-results hr {display: block; height: 1px; background: #e1e1e1; border: none; width: 360px; margin: 10px 0px 10px 80px}
.search-results .results {max-width: 800px}
.search-results .result:last-of-type + hr {display: none}
.search-results .show-modal-search {color: #824e99; text-decoration: underline; font-size: 18px; margin-left: 10px; cursor: pointer}
.search-results .cats a {color: #824e99; border-bottom: 2px solid #824e99; text-transform: uppercase; font-size: 11px; margin-right: 10px; font-weight: 400; padding-bottom: 2px; letter-spacing: 1px; display: inline-block; margin-bottom: 5px; vertical-align: middle}
.search-results .cats a:hover {border-bottom: 2px solid #5e3073}
.search-results .tabs {margin: 15px 0px 45px 0px}
.search-results .tabs span {line-height: 24px; color: #824e99; font-weight: 600; padding: 0px 10px; font-size: 13px; display: inline-block; cursor: pointer}
.search-results .tabs span i {color: #ffc77d; font-style: normal; margin-left: 5px}
.search-results .tabs span.active {background: #824e99; color: #fff; font-weight: 500}
.search-results .tabs span.active i {color: #fff; opacity: 0.5}
/* SEARCH-RESULTS */


/* MODAL */
.layer {display: none; position: fixed; background: rgba(255, 255, 255, 0.85); color: #fff; top:0; left: 0; width: 100%; height: 100%; z-index: 8000}
.modal {display: none; height: 150px; width: 500px; position: fixed; top:0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 9000}
.modal input[type=search] {border:3px solid #824e99; border-radius: 2px; -webkit-appearance: none; line-height: 60px; height: 64px; width: 100%; display: block; background: transparent; color: #824e99; padding: 0px 20px; font-size: 18px}
/* MODAL */


/* FOOTER */
footer {background: #292826; padding: 60px 0px; color: #888; font-size: 14px}
footer .copyright {font-size: 12px}
footer p {margin-bottom: 20px}
footer hr {height: 1px; border: 0px; background: #454442; margin: 20px 0px}
footer .column b {font-weight: 400; font-size: 12px}
footer .column hr {margin: 15px 0px}
footer .column li {float: left; display: block; width: 50%; font-size: 16px; margin-bottom: 10px}
footer .column li a:hover {text-decoration: underline}
footer .column:nth-of-type(3) li {width: 100%}
footer .column:nth-of-type(1), footer .column:nth-of-type(2) {width: calc(35% - 30px)}
footer .column:nth-of-type(3), footer .column:nth-of-type(4) {width: calc(15% - 30px)}
footer .column:nth-of-type(2), footer .column:nth-of-type(3), footer .column:nth-of-type(4) {color: #ccc}
footer .social a {display: inline-block; vertical-align: middle; height: 27px; width: 27px; background-color: #824e99; border-radius: 50%; margin-right: 10px; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; transition: 300ms}
footer .social a:last-of-type {margin-right: 0px}
footer .social a:hover {box-shadow: 0px 0px 0px 1px #fff}
footer .social a.vk {background-image: url(images/vk-f.svg)}
footer .social a.fb {background-image: url(images/fb-f.svg)}
footer .social a.in {background-image: url(images/in-f.svg)}
footer .social a.you {background-image: url(images/you-f.svg)}
/* FOOTER */


/* SLIDER */
.slick-slider {position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent} .slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0} .slick-list:focus {outline: none} .slick-list.dragging {cursor: pointer; cursor: hand} .slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)} .slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto} .slick-track:before, .slick-track:after {display: table; content: ''} .slick-track:after {clear: both} .slick-loading .slick-track {visibility: hidden} .slick-slide {display: none; float: left; height: 100%; min-height: 1px} [dir='rtl'] .slick-slide {float: right} .slick-slide img {display: block} .slick-slide.slick-loading img {display: none} .slick-slide.dragging img {pointer-events: none} .slick-initialized .slick-slide {display: block} .slick-loading .slick-slide {visibility: hidden} .slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent} .slick-arrow.slick-hidden {display: none} 
/* SLIDER */


.spinner {margin: auto; width: 70px; text-align: center; position: fixed; display: none; height: 70px; top:0; left: 0; right: 0; bottom: 0}
.spinner > div {width: 18px; height: 18px; background-color: #824e99; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both}
.spinner .bounce1 {-webkit-animation-delay: -0.32s; animation-delay: -0.32s}
.spinner .bounce2 {-webkit-animation-delay: -0.16s; animation-delay: -0.16s}
@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% {-webkit-transform: scale(0)}
	40% { -webkit-transform: scale(1.0)}
}
@keyframes sk-bouncedelay {
	0%, 80%, 100% {-webkit-transform: scale(0); transform: scale(0)}
	40% {-webkit-transform: scale(1.0); transform: scale(1.0)}
}





@media screen and (max-width:1180px) {
.single-page .quote .author {position: static; margin: 0px; width: 100%; align-items: center; -webkit-align-items:center}
.single-page .quote .author i {width: 80px; height: 80px}
.single-page .quote .author div {width: calc(100% - 90px); text-align: left}
.single-page .quote {padding-right: 0px; border: none}
header {padding: 0px 10px}
section {padding: 20px 0px}
.widgets {padding: 0px 10px}
.news .inner {padding: 10px}
.max {padding: 0px 10px}
.media-slider .slick-prev {left: 10px}
.media-slider .slick-next {right: 10px}
.popular-slider .slick-prev {left: 20px}
.popular-slider .slick-next {right: 20px}
.news .more {margin: 0px}
.media-slider {margin: 0px -10px}
header .menu {display: none}
header .mobile-menu-icon {display: block}
.media .article .text, .popular .article .text, .related .article .text {height: auto}
section.white {margin: 0px 10px; padding: 40px}
.single-page img, .single-page .wp-caption, .single-page iframe, .single-page .galery-slider {width: 100%; margin: 10px 0px; font-size: 12px}
.single-page .galery-slider .caption {font-size: 12px}
.single-page b, .single-page strong {margin: 25px 0px}
section.main {padding: 20px 0px 0px 0px} 
.news .sponsor.a-0 b {margin-top: 27px}
}


@media screen and (max-width:1023px) {
.widgets .video {height: 280px}
.article.type-1-3, .article.type-1-2, .article.type-2-3, .article.type-3-3, .related .article {margin: 10px 0px}
.article.type-1-3, .article.type-1-2, .article.type-2-3, .news .article, .related .article {width: calc(50% - 10px)}
.media .article {margin: 5px 10px}
.article .best {top:15px; right: 15px; left: auto}
.article.type-3-3 .img, .article.type-3-3 .text {width: 50%}
.popular-slider {margin: 0px -10px}
#instafeed a {width: calc(100% / 4); height: 150px}
.media-slider {margin: 0px}
}


@media screen and (max-width:767px) {
.control div.btn + div {width: calc(100% - 120px)}
.volume {height: 6px; opacity: 1; display: none}
.track {margin-bottom: 0px; font-size: 12px; opacity: 1}
.mobile-menu .radio {padding: 25px 8px 25px 30px}

.news {margin-top: 10px}
.single-page h3 {float: none; width: 100%; margin: 20px 0px}
.single-page .wp-caption.alignleft {width: 100%; margin: 10px 0px; font-size: 12px}

.widgets .video {width: 100%; margin-bottom: 30px}
.widgets .radio {padding: 0px 10px; font-size: 12px}
.widgets .radio-map, .news .sponsor.a-0 {width: calc(50% - 5px)}
.promo .article {width: 50%; height: auto; border: none}
.single-page h1 {font-size: 24px; margin: 20px 0px}
.single-page b, .single-page strong {font-size: 16px}
.beta {font-size: 10px}
section.white {padding: 10px; margin: 0px 5px}
.single-page {font-size: 14px}
.single-page blockquote {font-size: 20px; padding: 45px 15px; margin: 15px -10px; width: calc(100% + 20px); background-position: 10px 10px}
.single-page .share {margin: 15px 0px}
.single-page .share a {display: inline-block; border-bottom: 1px solid #824e99; width: 50px; height: 30px}
.single-page .share a svg {height: 20px; margin: 5px 0px}
.single-page h2 {font-size: 16px; margin: 20px 0px 10px 0px}
.single-page .left-part, .single-page .center-part {width: 100%}

.article.type-1-3, .article.type-1-2, .article.type-2-3, .article.type-3-3, .main .article, .related .article {margin: 5px 0px}
.article.type-1-3, .article.type-1-2, .article.type-2-3, .news .article, .main .article, .related .article {width: calc(50% - 5px)}
.article.type-3-3 .img, .article.type-3-3 .text {width: 100%}
.article.type-1-2 .half-50, .article.type-2-3 .half-50 {width: 100%}
.article.type-1-2 .excerpt, .article.type-2-3 .excerpt {display: none}

.media-slider, .popular-slider {margin: 0px -5px}
.main .half-50 {width: 100%} 
.main .article h3 {font-size: 14px; margin-bottom: 15px}
.news .inner {padding: 5px}
.news .article {width: calc(50% - 5px)}
.mobile-hide {display: none !important}
.main .article {height: auto !important}
.max {padding: 0px 5px}

.popular .article h3 {height: auto}

.article.type-1-3 .text, .article.type-3-3 .text, .stories > .inner, .article.type-2-3 .inner, .article.type-1-2 .inner, .media .article .text, .popular .article .text, .related .article .text {padding: 15px}
.article.type-1-3 h3, .article.type-3-3 h3, .related .article h3 {margin: 15px 0px}

.article.type-1-3 h3, .article.type-1-2 h3, .article.type-2-3 h3, .article.type-3-3 h3, .related .article h3 {font-size: 16px}
.article.type-1-3 .img, .article.type-3-3 .img, .related .article .img {height: 200px}

body {font-size: 14px}
.stories h3, .news .article h3 {font-size: 14px}
.stories {margin: 10px 0px}
.stories .column-one {width: 100%; height: auto; margin-bottom: 20px; padding: 0px}
.stories .column-two {width: 100%}
.stories .column-two .article:nth-of-type(odd) .inner {padding-right: 5px}
.stories .column-two .article:nth-of-type(even) .inner {padding-left: 5px}
.stories .title {margin-bottom: 5px}
h2 {font-size: 24px}
section {padding: 10px 0px}
#instafeed a {width: calc(100% / 3); height: 120px}
footer .column li {font-size: 14px}
footer .column:nth-of-type(1), footer .column:nth-of-type(2) {width: 100%}
footer .column:nth-of-type(3), footer .column:nth-of-type(4) {width: 50%; margin-top: 20px}
}