@media screen and (max-width:768px) {
	

	.site_header {
		z-index: 2;
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
		background: #4a76a8;
		height: 11vmax;
	}

	.toggleMenu {
		margin: 2vmax 0 0 2vmax;
		font-size: 7vmax;
		color: #fff;
		position: relative;
		display: block;
	}
	.active {
		display: block;
	}
	.nav > li {
		float: none;
	}
	li:active {    }
	.nav li li .parent {
		background-image: url("images/downArrow.png");
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}
	.nav ul {
		display: block;
		width: 100%;
	}
	.nav {
		display: grid;
		grid-template-columns:1fr;
		justify-items:center;
        display: none;
		height: auto;
	}
	.nav a {
		font-size:3vmax;
	}  
	.nav > li:hover > ul {
        left: 0;
    }
    .nav li li:hover ul {
        left: 0;
        top: 0;
    }
/* jQuery input search block -----------------------------------------*/

#wrapper-search {
  position: absolute;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  display: none;
  margin-top: 11vmax;
  z-index: 999;
}
#wrapper-search:target {
  display: block;
}
#search {
  width: 80%;
  height: 5vmax;
  float: left;
}

.button-search {
  width: 10vmax;
  height: 5vmax;
  background: #0057ff;
  display: -ms-grid;
  display: grid;
  justify-items:center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.button-search p{
  color: #fff;
  font-size: 2vmax;
}

#wrapper-search a{
  display: block;
}

	/*-------------------------------------------*/
	.section0 {
		height: auto;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		display: -ms-grid;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	.wrapper-play {
		display: -ms-grid;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		padding: 3vmax 0 3vmax 0;
		margin-top: 5vmax;
		position: relative;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	.cover-music{
		width: 40vmax;
		-webkit-box-shadow: 0px 22px 28px 0px rgba(0,0,0,0.75);
		        box-shadow: 0px 22px 28px 0px rgba(0,0,0,0.75);
	}

	.play-now{
		float: left;
		margin-top:5vmax;
	}

	.play-now h1{
		font-size: 5vmax;
	}

	.play-now p{
		font-size: 4vmax;
		color: #000;
	}

	.player {
		display: -ms-grid;
		display: grid;
		padding-top: 2vmax;
		-ms-grid-columns: 2vmax 2vmax 2vmax;
		    grid-template-columns: 2vmax 2vmax 2vmax;
		grid-column-gap: 7vmax;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	} 

	.player a{

		color: #000;
	}
	
	.play{
		margin-left:1vmax;
		font-size:6vmax;
		text-align: center;

	}

	.backward, .forward{
		font-size:7vmax;
	}

	.timeline{
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr;
		    grid-template-columns: 1fr;
		-ms-grid-rows: .4fr 3vmax;
		    grid-template-rows: .4fr 3vmax;
		margin-top: 3vmax;
		justify-items:center;
	}

	.social-icon {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
		    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		padding: 0vmax 0vmax 0vmax 0vmax;
		grid-gap: 1vmax;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	.social-icon img{
		width: 5vmax;
	}

	.like{
		margin-top:-1vmax;
	}

	.dislike{
		margin-top:-.1vmax;
	}

	.social-icon img:hover {
		zoom:1.1;
	}

	.timeline p{
		margin-top:7.3vmax;
		display: block;
		font-size: 2vmax;
	}

	.timeline a{
		color: #000;
		display: block;
		display: -ms-grid;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		font-size: 2vmax;
	}
	.status-music {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: .1fr .1fr .1fr;
		    grid-template-columns: .1fr .1fr .1fr;
		grid-column-gap: .1vmax;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
	}

	.player_line{
		background: #000;
		height:.2vmax;
		display: block;
		display: -ms-grid;
		display: grid;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;

	}

	.players {
		margin-top: 10vmax;
	}

	.players h2{
		font-size: 3vmax;
		margin: 0 0 2vmax;
	}

	.icon-players img:hover {
		zoom:1.1;
	}

	.icon-players {
		margin-top: 1vmax;
		display: -ms-grid;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		-ms-grid-rows: auto;
		    grid-template-rows: auto;
		display: block;
	}
	/*section1 ------------------------------------------*/
	.section1 {
		background: #2f2f37;
		height: auto;
		display: -ms-grid;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-ms-grid-columns: 1fr;
		    grid-template-columns: 1fr;
		-ms-grid-rows: .3fr 1fr;
		    grid-template-rows: .3fr 1fr;
		z-index: 0;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		
	}

	.section1 h1{
		font-size: 3vmax;
		color:#fff;
		font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
	}

	.navigation-posts {
		display: -ms-grid;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		-ms-grid-rows: 1fr;
		    grid-template-rows: 1fr;
		grid-gap: 1vmax;
		padding: 1vmax;
	}

	.section1 h2{
		margin-left: -5vmax;
		margin-bottom: 1.5vmax;
		text-transform: uppercase;
	}

	.center-post{
		line-height:3vmax;
		font-size: 2vmax;
	}

	.center-post a{
		line-height:1.2vmax;
		font-size: 2vmax;
		color: #4a76a8;
	}

	.wrapper-post {
		margin-top: 0vmax;
		background: #fff;
		width: auto;
		height: auto;
		border-radius: 1vmax;
		padding: 2vmax;
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr;
		    grid-template-columns: 1fr;
		-ms-grid-rows: .1fr auto .1fr;
		    grid-template-rows: .1fr auto .1fr;
		-webkit-box-shadow:  0px 22px 28px 0px rgba(0,0,0,0.75);
		        box-shadow:  0px 22px 28px 0px rgba(0,0,0,0.75);
		
	}
	.header-post {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 2fr;
		    grid-template-columns: 1fr 2fr;
		-ms-grid-rows: 6vmax;
		    grid-template-rows: 6vmax;
	}

	.header-post h2{
		display: -ms-grid;
		display: grid;
		justify-items:start;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		font-size: 1vmax;
		line-height:3vmax;
		font-size: 2.1vmax;
	}

	.avatar {
		background: #dddee0 url(img/background.jpg) center left/cover;
		width: 5vmax;
		height: 5vmax;
		border-radius: 1000px;
	}

	.footer-post {
		margin: 2vmax 0 0 0;
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr;
		    grid-template-columns: 1fr;
		-ms-grid-rows: .1fr;
		    grid-template-rows: .1fr;
	}

	.comments-eye {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1fr ;
		    grid-template-columns: 1fr 1fr ;
		-ms-grid-rows: .1fr;
		    grid-template-rows: .1fr;
		grid-column-gap: 13vmax;
	}

	.comments-grid {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1fr;
		    grid-template-columns: 1fr 1fr;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		grid-column-gap: 1vmax;
	}

	.footer-post span{
		font-size: 2vmax;
		color: #909399;

	}

	.footer-post img{  
		height:auto;
		width:3.5vmax;
		max-width: 100%;
	}

	.views{
		margin-left:9vmax;
	}

	.angle_left{
		width: 3vmax;
		height: 3vmax;
		opacity: .5;
		margin: -3.5vmax 0;
		display: none;
	}

	.angle_right{
		width: 3vmax;
		height: 3vmax;
		opacity: .5;
		margin: -3.5vmax 0;
		display: none;
	}
	/*section2 ------------------------------------------*/
	.section2{
		background: #2f2f37 url(img/1.png) no-repeat center/cover fixed;
		padding:5vmax .5vmax;
		display: -ms-grid;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-gap:1vmax;
		height: auto;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.section2-angle_left {
		width: 1vmax;
	}


	.wrapper-section2-angle_left {
		display: -ms-grid;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		display: none;
	}


	.wrapper-section2-angle_right {
		display: -ms-grid;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		display: none;
	}

	.section2-angle_right {
		width: 1vmax;

	}

	.section2-post{
		background:#4d4f5c;
		display: -ms-grid;
		display: grid;
		-ms-grid-rows: .2fr 1fr;
		    grid-template-rows: .2fr 1fr;
		height: 40vmax;
		max-width: 1fr;
		padding: 0 2vmax 2vmax 2vmax;
	}

	.section2-post label{
		font-size: 2vmax;
	}

	.section2 h1{
		text-align: center;
		padding-top: .9vmax;
		text-transform: uppercase;
		color:#FFF;
		font-size: 3vmax;
	}

	.section2-wrapper-title {
		display: -ms-grid;
		display: grid;
		justify-items:center;
		padding: 1vmax 3vmax 1vmax 3vmax;
		border:1px solid #4a76a8;
		position: relative;
		-webkit-box-shadow: 0px 22px 28px 0px rgba(0,0,0,0.75);
		        box-shadow: 0px 22px 28px 0px rgba(0,0,0,0.75);

	}

	@-webkit-keyframes swing {
		15% {
			-webkit-transform: translateX(9px);
			transform: translateX(9px);
		}
		30% {
			-webkit-transform: translateX(-9px);
			transform: translateX(-9px);
		}
		40% {
			-webkit-transform: translateX(6px);
			transform: translateX(6px);
		}
		50% {
			-webkit-transform: translateX(-6px);
			transform: translateX(-6px);
		}
		65% {
			-webkit-transform: translateX(3px);
			transform: translateX(3px);
		}
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}
	
	@keyframes swing {
		15% {
			-webkit-transform: translateX(9px);
			transform: translateX(9px);
		}
		30% {
			-webkit-transform: translateX(-9px);
			transform: translateX(-9px);
		}
		40% {
			-webkit-transform: translateX(6px);
			transform: translateX(6px);
		}
		50% {
			-webkit-transform: translateX(-6px);
			transform: translateX(-6px);
		}
		65% {
			-webkit-transform: translateX(3px);
			transform: translateX(3px);
		}
		100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
		}
	}
	
	.section2-wrapper-title:hover {
		-webkit-animation: swing 0.6s ease;
		animation: swing 0.6s ease;
		-webkit-animation-iteration-count: 1;
		animation-iteration-count: 1;
	}
	/*----------------------------------------------------- */
	.section2 p {
		font-size: 2vmax;
		color: #fff;
	}

	.vote label{
		color: #fff;
	}

	.vote-button {
		width: 15vmax;
		height: 5vmax;
		background: #4a76a8;
		border: none;
		color: #fff;
		font-size: 2vmax;
	}

	.vote-button:hover {
		background: #0057ff;
		-webkit-box-shadow: 0px 8px 21px -6px rgba(0,0,0,0.75);
		        box-shadow: 0px 8px 21px -6px rgba(0,0,0,0.75);
	}

	.sec2-button-style {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr 1fr;
		    grid-template-columns: 1fr 1fr;
		grid-column-gap: 1vmax;
	}
	/*section3 ------------------------------------------*/

	.section3{
		padding:3vmax;
		height:auto;
		line-height:2.5vmax;
		background: #2f2f37;
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: 1fr;
		    grid-template-columns: 1fr;
		-ms-grid-rows: 1fr 1fr 1fr;
		    grid-template-rows: 1fr 1fr 1fr;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.section3 h1{
		color:#fff;
		text-transform: uppercase;
		text-align: center;
		font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 5vmax;
		line-height: 6vmax;
	}

	.section3 p{
		margin-top: 3vmax;
		margin-bottom: 3vmax;
		color:#fff;
		font-size: 2vmax;
	}


	.button-download-more {
		background: #4a76a8;
		display: -ms-grid;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		width: 25vmax;
		height: 6vmax;
	}

	.button-download-more a{
		color: #fff;
		font-size: 2vmax;
	}

	.button-download-more:hover {
		background: #0057ff;
		-webkit-box-shadow: 0px 8px 21px -6px rgba(0,0,0,0.75);
		        box-shadow: 0px 8px 21px -6px rgba(0,0,0,0.75);
	}

	/*section4 ------------------------------------------*/
	.section4{
		display: -ms-grid;
		display: grid;
		color:#fff;
		-ms-grid-rows: auto auto;
		    grid-template-rows: auto auto;
		padding:2vmax 2vmax 2vmax 2vmax;
		background:#4a76a8;
		text-transform: uppercase;
		text-align: center;
		font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 1vmax;
		justify-items:center;
		height: 30vmax;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.section4 h1{
		font-size: 3vmax;
	}

	.section4 p{
		font-size: 2vmax;
	}

	.section4-div1 {
		display: -ms-grid;
		display: grid;
		-ms-grid-columns: auto auto;
		    grid-template-columns: auto auto;
		grid-gap: 1vmax;
		padding-bottom:4vmax;
	}

	.section4-div2 {
		background: #fff;
		color: #000;
		min-height:1vmax; 
		min-width:1vmax;

	}

	.section4-div3 {
		background: #000;  
		color: #4c93c7;
		min-height:1vmax; 
		min-width:1vmax;
	}

	.section4-div4 {
		background: #fff;
		color: #000;
		min-height:1vmax; 
		min-width:1vmax;
	}

	.section4-div5 { 
		background: #000;
		color: #4c93c7;
		min-height:1vmax; 
		min-width:1vmax;
	}

	.item-glob {
		padding: 1vmax;
		width: auto;
		-webkit-transform: skewX(-15deg);
		    -ms-transform: skewX(-15deg);
		        transform: skewX(-15deg); 
		-webkit-box-shadow:  0px 22px 28px 0px rgba(0,0,0,0.75); 
		        box-shadow:  0px 22px 28px 0px rgba(0,0,0,0.75);
	}

	.item-glob:hover {
		zoom:1.3;
	}  
	/*footer ------------------------------------------*/
	footer{
		padding:1.5vmax 2vmax 2vmax 2vmax; 
		line-height: 1vmax;
		color:#fff;
		display: -ms-grid;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		background: #474747;
		height: 40vmax;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}

	.vk-logo{
		border-radius: 1000px;
		text-align: center;
		display: -ms-grid;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		width:6vmax;
		height: 6vmax;
		background:#fff;
		color:#474747;
		font-size:3vmax;
	}

	.ok-logo {
		border-radius: 1000px;
		text-align: center;
		display: -ms-grid;
		display: grid;
		justify-items:center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		width:6vmax;
		height: 6vmax;
		background:#fff;
		color:#474747;
		font-size:3vmax;
		margin-left: 15vmax;
	}

	.vk-logo,.ok-logo, a{
		color:#474747;
	}

	footer span{
		font-size:2.5vmax ;
		line-height: 2.5vmax;
	}

	footer p{
		font-size:2vmax ;
	}

	footer span a{
		color: #fff;
	}

	.social_networks{
		display: -ms-grid;
		display: grid;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		grid-gap: 6vmax;
		grid-template-columns: repeat(auto-fit, minmax(1vmax, 1fr));
	}

	/* modal window -----------------------------------------*/


	#modal-block {
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		position: absolute;
		top: auto;
		left: 0;
		display: none;
		z-index: 9999;
		padding: 5vmax;
	}
	#okno {
		width:90%;
		height: 70%;
		text-align: center;
		padding: 1vmax;
		color: #0000;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}
	#modal-block:target {
		display: block;
	}

	.close {
		position: relative;
		display: -ms-grid;
		display: grid;
		justify-items:end;
		color:#000;
	}


.post-modal-block{
  background:#fff;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: .2fr 1fr;
      grid-template-rows: .2fr 1fr;
  padding: 2vmax;
  border-radius: 10px;
}

.post-modal-block label{
  font-size: 1vmax;
}

.post-modal-block h1{
  text-align: center;
  padding-top: .9vmax;
  color:#000;
  font-size: 3vmax;
  margin-bottom: 3vmax;
  z-index: 5;
}

.post-modal-block p{
  text-align: center;
  padding-top: .9vmax;
  color:#000;
  font-size: 2vmax;
}

.section-wrapper-title-modal-block {
  display: -ms-grid;
  display: grid;
  justify-items:center;
  padding: 1vmax 3vmax 1vmax 3vmax;
  position: relative;

}
.wrapper-input-modal{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  grid-gap: 1vmax;
}
.section-wrapper-title-modal-block input{
  width: 100%;
  height: 6vmax;
  border-top: none;
  border-right: none;
  border-left: none;
}

.button {
  width: 10vmax;
  height: 3vmax;
  background: #0057ff;
  color: #fff;
  display: -ms-grid;
  display: grid;
  justify-items:center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.button a{
  color: #fff;
}
/* modal window -register-user -----------------------------------------*/
#modal-block-register-user:target {
  display: block;
}

.wrapper-input-modal{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  grid-gap: 1vmax;
}
.section-wrapper-title-modal-block-register-user input{
  width: 100%;
  height: 6vmax;
  border-top: none;
  border-right: none;
  border-left: none;
}

.button-register-user {
  width: 10vmax;
  height: 3vmax;
  background: #0057ff;
  color: #fff;
  display: -ms-grid;
  display: grid;
  justify-items:center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.button-register-user a{
  color: #fff;
}
/* modal window -restoring -----------------------------------------*/


#modal-block-restoring:target {
  display: block;
}

.wrapper-input-modal{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  grid-gap: 1vmax;
}
.section-wrapper-title-modal-block-restoring input{
  width: 100%;
  height: 6vmax;
  border-top: none;
  border-right: none;
  border-left: none;
}

.button-register-user {
  width: 100%;
  height: 6vmax;
  background: #0057ff;
  color: #fff;
  display: -ms-grid;
  display: grid;
  justify-items:center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.button-register-user a{
  color: #fff;
}

/* modal window -comments -----------------------------------------*/

#modal-block-comments:target {
  display: block;
}

/* modal window -read-next -----------------------------------------*/

#modal-block-read-next:target {
  display: block;
}

.section-wrapper-title-modal-block-read-next {
  display: -ms-grid;
  display: grid;
  justify-items:center;
  padding: 1vmax 3vmax 1vmax 3vmax;
  position: relative;
  margin-top: 20vmax;

}

.close-read-next{
  position: absolute;
  color: #fff;
  margin: 5vmax 0 0 65vmax;

}
}