@charset "UTF-8";
body {
  margin: 0%;
  padding: 0%;
  font-family: 'Roboto', sans-serif;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr; 

}

* {
  text-decoration:none;
  list-style: none;
  white-space: normal;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1em;
}

img { 
  max-width: 100%;
}

/*Централизация любых объектов начало*/
.center-a-lot-of { /*по вертикали и горизонтали*/
  display: -ms-grid;
  display: grid;
  justify-items:center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.center-one { /*по вертикали*/
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
/*Централизация любых объектов начало*/

/*header ------------------------------------------*/

.site_header {
  z-index: 2;
}

.toggleMenu {
  display:  none;
}
.nav {
  list-style: none;
  *zoom: 1;
  background-color: #313030;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

}
.nav:before,
.nav:after {
  content: " "; 
  display: table; 
  right: 150vmax;
}
.nav:after {
  clear: both;
}
.nav ul {
  list-style: none;
  width: auto;
  height: auto;
}
.nav a {
 display: block;
 padding: 1.5vmax 3vmax 1.5vmax 4vmax;
 font-size: 1vmax;
 color: #fff;
 text-decoration: none;
 text-transform:uppercase;
 -webkit-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}    
.nav li {
  position: relative;
}
.nav li:hover {
  background: #0057ff;
}
.nav > li {
  float: left;
}
.nav > li > .parent {
  background-image: url("images/downArrow.png");
  background-repeat: no-repeat;
  background-position: right;
}
.nav > li > a {
 -webkit-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}
.nav li  ul {
  position: absolute;
  left: -9999px;
  min-width: 15vmax;

}
.nav > li:hover > ul {
  left: 0;
}
.nav li li:hover ul {
  left: 100%;
  top: 0;
}
.nav li li a {
  display: block;
  position: relative;
  z-index:100;
  padding: 1vmax;
  text-transform: none;
  background-color: #313030;
}

.nav li li a:hover {
  background:#0057ff;
  cursor: pointer;
  color: #ffffff;
  -webkit-box-shadow: 1px 5px 10px -5px black;
          box-shadow: 1px 5px 10px -5px black;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.nav li li li a {
  background:#313030;
  z-index:200;
}

.nav li li li a:hover {
 background: #0057ff;
}

/* jQuery input search block -----------------------------------------*/

#wrapper-search {
  position: absolute;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: .8fr .2fr;
      grid-template-columns: .8fr .2fr;
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  display: none;
  width: 100%;
  margin-top: 5vmax;
  
  padding: 0 10% 0 10%;
}
#wrapper-search:target {
  display: block;
}

#search {
  position: relative;
  width: 80%;
  height: 3vmax;
  float: left;
}

.button-search {
  position: relative;
  width: 10vmax;
  height: 3vmax;
  background: #0057ff;
  display: -ms-grid;
  display: grid;
  justify-items:center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -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);
}

.button-search:hover {
  zoom:1.1;
}

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

#wrapper-search a{
  display: block;
}

/*section0 ------------------------------------------*/
.section0 {
  background-color:#f3f3f3;
  padding: 2vmax 3vmax 2vmax 7vmax;
  height: 25vmax;
  position: relative;
  overflow:hidden;
  z-index: 0;
}

.sec0-background {
  -webkit-filter:blur(10px);
          filter:blur(10px);
  position: absolute;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  background: url(img/cover.jpg) no-repeat top/cover fixed;
}
/*MUSIC PLAYER ------------------------------------------*/
.wrapper-play {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: .8fr 1fr 2fr 1fr  ;
      grid-template-columns: .8fr 1fr 2fr 1fr  ;
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  padding: 3vmax 0 3vmax 0;
  margin-top: 5vmax;
  position: relative;
}

.cover-music{
  width: 13vmax;
  -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 h1{
  font-size: 3vmax;
}

.play-now p{
  font-size: 2vmax;
  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: 2vmax;
  margin-top: 2.8vmax;
} 

.player a{
  color: #000;
}

.play{

  font-size:1.8vmax;
  text-align: center;
}

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

.timeline{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: 3vmax 3vmax;
      grid-template-rows: 3vmax 3vmax;
}

.social-icon {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: .2fr .2fr .2fr .2fr .2fr;
      grid-template-columns: .2fr .2fr .2fr .2fr .2fr;
  padding: 0vmax 10vmax 0vmax 3vmax;
}

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

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

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

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


.status-music {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: .1fr 2fr 2.6fr;
      grid-template-columns: .1fr 2fr 2.6fr;
  grid-column-gap: .5vmax;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
}

.timeline p{
  margin-top:7.3vmax;
}

.timeline a{
 color: #000;
}

.player_line{
  margin-left:.5vmax;
  margin-top:7.7vmax;
  background: #000;
  height:.2vmax;
  width:20vmax;
}

.players {
  margin-top: 1vmax;
}

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

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

.icon-players {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: .2fr .2fr .2fr .2fr;
      grid-template-columns: .2fr .2fr .2fr .2fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
}
/*section1 ------------------------------------------*/
.section1 {
  background: #000071;
  height: 2vmax;
  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: .5fr 1fr;
      grid-template-rows: .5fr 1fr;
  z-index: 0;

}

.section1 h1{
  font-size: 2vmax;
  text-align: center;
  color:#fff;
  font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  margin-bottom: 8vmax;
}

.navigation-posts {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr .8fr .8fr .8fr 1fr;
      grid-template-columns: 1fr .8fr .8fr .8fr 1fr;
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  grid-column-gap: 1vmax;
  padding: 1vmax;
}

.sec1-h2{
  margin-bottom: 1.5vmax;
  text-transform: uppercase;
}

.center-post{
  line-height:1.2vmax;
  font-size: 1vmax;
}

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

.wrapper-post {
  margin-top:-14vmax;
  background: #fff;
  width: 30vmax;
  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: .6fr 2fr;
      grid-template-columns: .6fr 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: 1.3vmax;
  margin-bottom: 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: 1vmax;
  color: #909399;

}

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

.views{
 margin-left:9vmax;
}

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

.angle_right{
  width: 3vmax;
  height: 3vmax;
  opacity: .5;
  margin: -3.5vmax 0;
}
/*section2 ------------------------------------------*/
.section2{
 background: #2f2f37 url(img/1.png) no-repeat center/cover fixed;
 padding:1.5vmax .5vmax;
 display: -ms-grid;
 display: grid;
 -ms-grid-columns: .1fr 1fr 1fr 1fr .1fr;
     grid-template-columns: .1fr 1fr 1fr 1fr .1fr;
 grid-gap:1vmax;
 -ms-grid-rows: auto;
     grid-template-rows: auto;
}

.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;
}


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

.section2-angle_right {
  width: 1vmax;

}

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

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

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

.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: 1vmax;
  color: #fff;
}

.vote label{
  color: #fff;
}

.vote-button {
  width: 10vmax;
  height: 3vmax;
  background: #4a76a8;
  border: none;
  color: #fff;
  font-size: 1vmax;
}

.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;
  line-height:2.5vmax;
  background: #2f2f37;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
}

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

.section3 p{
  color:#fff;
  font-size: 1vmax;
}


.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: 10vmax;
  height: 3vmax;
}

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

.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;
  -ms-grid-rows: 5vmax 3vmax 2vmax;
      grid-template-rows: 5vmax 3vmax 2vmax;
  color:#fff;
  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: 20vmax;
}

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

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

.section4-div2 {
  background: #fff;
  color: #000;

}

.section4-div3 {
  background: #000;  
  color: #4c93c7;
}

.section4-div4 {
  background: #fff;
  color: #000;
}

.section4-div5 { 
  background: #000;
  color: #4c93c7;
}

.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;
 -ms-grid-columns: 1fr 1fr 1fr;
     grid-template-columns: 1fr 1fr 1fr;
 background: #474747;
 height: 105%;
}

.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:3vmax;
  height: 3vmax;
  background:#fff;
  color:#474747;
  font-size:2vmax;
}

.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:3vmax;
  height: 3vmax;
  background:#fff;
  color:#474747;
  font-size:2vmax;
  margin-left: 15vmax;
}

.vk-logo,.ok-logo, a1{
  color:#000000;
}
a{
  color:#001aff;
}


footer span{
 font-size:.9vmax ;
}

footer span a{
 color: #fff;
}

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

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


.modal-window-stile {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: auto;
  left: 0;
  display: none;
  z-index: 9999;
}
#okno {
  width: 30vmax;
  height: auto;
  text-align: center;
  padding: 1vmax;
  color: #0000;
  position: relative;
  top: 20%;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  -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);
}
#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: 1.2vmax;
  margin-bottom: 3vmax;
  z-index: 5;
}

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

.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: 20vmax;
  height: 3vmax;
  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: 20vmax;
  height: 3vmax;
  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: 20vmax;
  height: 3vmax;
  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 -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;

}