@media (max-width: 1600px) {
  .page .hero {
    background: url(../images/hero_archer-mobile.png) no-repeat;
    right: 0;
    width: 773px;
  }

  .paralax .sparks_1 {
    left: 0px;
  }

  .paralax .sparks_1 {
    left: 0px;
  }

  .paralax .feathers {
    left: 900px;
  }
}
@media (max-width: 1380px) {
  .sparks {
  
  }

  .paralax .feathers {
    left: 750px;
  }
}
@media (max-width: 1170px) {
  .topPanel {
    background: url(../images/dark-fon.png);
    padding: 0px 0px;
    height: 60px;
  }
  .topPanel-top {
    /*background: url(../images/dark-fon.png);*/
    padding: 25px 0px;
    backdrop-filter: blur(5px);
  }
  nav {
    position: fixed;
    width: 100%;
    left: 0;
    top: 60px;
    background: url(../images/dark-fon.png);
    display: none;
  
  }

  header {
    height: 800px;
  }
  header .container {
    height: 800px;
  }

  .menu {
    
    height: 100%;
    padding: 20px 20px;
    margin-left: 0px;
    overflow-y: auto;
  }
  .menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-right: 0px;
  }
  .menu li a {
    font-size: 18px;
    padding-left: 0px;
  }

  .container {

  }

  .content {
    z-index: 999;
    background-color: #121212;
  }

  .socBlock:after {
    display: none;
  }

  .newsBlock {
    display: block;
    bottom: 15px;
    margin-top: -87px;
  }

  .newsBlock > div {
    width: 100%;
  }

  .newsBlockLeft {
   
  }

  .fastPlayBlock {
    bottom: auto;
    top: 340px;
  }

  .serverBlock {
    bottom: auto;
    top: 120px;
  }

  .infoSeverBlock {
    padding-top: 200px;
    padding-bottom: 20px;
    bottom: auto;
    top: -20px;
    z-index: 12;
  }

  .circle-online {
    z-index: 14;
  }

  .menuBlock-logo {
    width: calc(100% - 30px);
    position: absolute;
    text-align: center;
    top: 5px;
  }
  .menuBlock-logo img {
    height: 50px;
  }

  .langBlock {
    position: absolute;
    left: auto;
    right: 20px;
    top: 15px;
    z-index: 5;
  }

  .langBlock-content {
    left: auto;
    right: -10px;
  }
  .langBlock-content:after {
    display: none;
  }

  .news a {
    width: 80%;
  }

  .menuButton {
    position: absolute;
    display: block;
    left: 20px;
    top: 22px;
    z-index: 5;
  }
  .menuButton span {
    width: 25px;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
    display: block;
    margin: 3px 0px;
  }

  .page .logo {
    display: none;
  }
  .page .menuBlock-logo {
    display: block;
  }

  body, html {
    overflow-x: hidden;
  }

  .hero {
    z-index: -1;
  }

  .drivers {
    flex-wrap: wrap;
    justify-content: center;
  }
  .drivers img {
    margin: 15px;
  }

  .rankBlock-block {
    flex-wrap: wrap;
    justify-content: center;
  }
  .rankBlock-block .rank {
    width: 565px;
  }

  .header-shadow {
    background-image: url(../images/shadow.png);
    background-position: center bottom;
    background-repeat: repeat-x;
    height: 499px;
    animation: smoke 8s linear infinite;
    animation-fill-mode: forwards;
  }

  .paralax-sparks {
    
  }

 

  .regBlock {
    z-index: 10;
  }
}
@media (max-width: 1100px) {
  .serversBlock {
    display: block;
  }

  .playButtonSlider {
    position: absolute;
    left: 3%;
    margin-top: 63%;
    display: block;
    height: 20%;
    width: 100%;
    background: url(../images/bt.png) center no-repeat;
  
    transition: 1.5s;
  }
  .serversBlock:after {
    display: none;
  }

  .servers {
    margin: 0 auto;
    margin-bottom: 50px;
  }
}
@media (max-width: 992px) {
  .downloadBlock-flex {
    flex-wrap: wrap;
  }

  .downloadBlock, .updateBlock {
    width: 100%;
  }

  .errorGroup {
    position: relative;
    left: 0;
    margin-left: 0;
    top: auto;
    width: 100%;
    min-width: auto;
  }
  .errorGroup:before {
    display: none;
  }
}
@media (max-width: 900px) {
  .topPanel {
    height: 60px;
    padding: 0px;
  }

  .menuBlock-logo img {
    height: 50px;
  }

  .footerInfoBlock {
    display: flex;
    flex-wrap: wrap;
  }

  .copyBlock, .dkLogo {
    float: none;
    width: 50%;
    margin-bottom: 30px;
  }

  .footerMenuBlock {
    width: 100%;
  }

  .footerMenu {
    margin-bottom: 30px;
  }

  footer {
    background-size: cover;
    padding-bottom: 30px;
  }

  footer .container {
    height: 100%;
  }

  .logosBlock {
    position: relative;
    bottom: auto;
  }

  .news a {
    width: 300px;
  }

  table td {
    padding: 10px;
  }

  .page-title {
    height: auto;
    padding: 20px 30px;
    margin-top: -40px;
  }

  .page header {
    height: 300px;
  }

  .modal_div .modal_close {
    right: 0;
    top: 0;
    z-index: 999;
  }

  .scroll-tableBlock {
    position: relative;
  }
  .scroll-tableBlock:after {
    content: "";
    background: linear-gradient(to right, rgba(18, 18, 18, 0), #121212 80%);
    width: 20%;
    height: 100%;
    position: absolute;
    right: -57%;
    top: 0px;
  }

  .scroll-table {
    overflow: hidden;
    overflow-x: auto;
    position: relative;
  }
  .scroll-table table {
    min-width: 750px;
  }

  .page-title {
    justify-content: center;
    flex-wrap: wrap;
  }
  .page-title .formGroup {
    margin-left: 0px;
  }
  .page-title select {
    width: 100%;
  }
  .page-title h1 {
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
  }

  .paralax-hero {
    display: none;
  }

  select, input, .formGroup {
    max-width: 100%;
  }
}
@media (max-width: 1024px) {
  header {
    height: 1080px;
  }
  header .container {
    height: 1080px;
  }

  .fastPlayBlock {
    flex-wrap: wrap;
  }

  .fastPlayBlock {
    top: -651px;
    margin-top: -1%;
  }

  .download-button, .fastPlay, .serverBlock {
    width: 320px;
    margin: 0 auto;
  }

  .serverBlock {
    top: -651px;
    margin-top: -43%;
    left: 51%;
    margin-left: -201px;
 
  }

  .circle-online {
    margin: 0px;
  }

  .download-button {
    margin-bottom: 10px;
  }

  .fastPlay a {
    width: 160px;
  }

  .newsBlock {
    bottom: auto;
    top: 650px;
  }

  .newsBlock > div {
    flex-wrap: wrap;
  }

  .streamBlock {
    display: flex;
    width: 100%;
  }
  .streamBlock a {
    width: 33.3%;
  }

  .regBlock .container {
    padding-top: 20px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
  }

  .regButton {
    display: block;
    text-align: center;
    margin-top: 30px;
  }
  .regButton button, .regButton .button {
    margin-bottom: 20px;
  }

  .servers {
    padding: 20px 20px 0px 20px;
  }

  .agreement {
    text-align: left;
    margin-left: 0px;
  }

  .logosBlock {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
  }
  .logosBlock img {
    display: block;
    margin: 20px;
  }

  .infoSeverBlock {
    left: 0px;
    width: 160px;
  }

  .page-title h1 {
    font-size: 20px;
  }

  .modal_div {
    max-width: 100%;
    left: auto;
    margin-left: 0px;
    margin-top: -120px;
    padding: 30px 30px 30px 30px;
    z-index: 999;
  }

  .rank-info {
    padding: 10px;
  }

  .rank-info_text {
    width: 180px;
  }
}
@media (max-width: 475px) {
  body {
    overflow-x: hidden;
  }

  .copyBlock, .dkLogo {
    width: 100%;
  }

  .socBlock {
    flex-wrap: wrap;
    justify-content: center;
  }
  .socBlock > div {
    margin: 10px;
  }

  .footerMenuBlock {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .footerMenu {
    width: 50%;
  }

  .news-block {
    padding: 30px 5px;
  }

  .news a {
    width: 215px;
  }

  .servers:after {
    right: 0px;
  }

  .downloadBlock, .updateBlock {
    padding: 35px 25px 35px 25px;
    height: auto;
  }

  .servers {
    margin-bottom: 0px;
    margin-top: 30px;
    padding: 80px 20px 20px 20px;
    height: 100%;
    background-size: cover;
  }
  .servers h2 {
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
  }

  .server-title span {
    position: relative;
    z-index: 3;
  }

  .facebookButton {
    width: 100%;
    background-size: cover;
  }

  .rank {
    height: 90px;
  }

  .rank-info {
    justify-content: center;
  }

  .rank-info_ava {
    display: none;
  }

  .rankBlock-block .rank {
    width: 100%;
  }

  .page .hero {
    right: -150px;
  }

  .footerInfoBlock h3 {
    margin-bottom: 15px;
  }

  .servers.server_1:after {
    left: 50%;
    margin-left: -112px;
    top: -90px;
  }

  .servers.server_2:after {
    left: 50%;
    margin-left: -123px;
    top: -90px;
  }

  .dkLogo img {
    margin-bottom: 15px;
  }

  .server-icon {
    left: 50%;
  }

  .server-icon_1 {
    margin-left: -110px;
  }

  .server-icon_2 {
    margin-left: -120px;
  }
}
@media (max-width: 365px) {
  .container {
    padding: 0px;
  }

  .row-container .serverIn {
    padding: 20px 0px 20px 20px;
    background: none !important;
  }

  .block-title {
    padding-left: 15px;
  }

  .regBlock {
    text-align: center;
  }

  .registration {
    padding: 0px 10px 0px 10px;
  }
}
@media (max-height: 375px) {
  .menu {
    height: 250px;
  }
}




.zoom {
  overflow: hidden;
}

.zoom img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 1s;
  
}

.zoom:hover img {
  box-shadow: inset 0 0 0 10px #000000;
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.4) rotate(5deg);
  
}




  
.container_new{
display: grid;
grid-template-columns: 1fr 1fr 1fr;

grid-template-areas: "a2 a2 a3"
                      ". . ."
                      ". . ."

}

  .container_new section{
    grid-area: a2;
    
    }
    .posicionar_Ranking{
      grid-area: a3;
      
      }
  





.newblock img{
position: absolute;
width: 500px;
height: 150px;
border-radius: 10%;
}
.newblock2 img{

border-radius: 1%;
}
.title-news a{
position: absolute;
float: right;
font-size: 18px;
padding: 10px;
}
.ranking_colun{
  grid-column: 2;
  display: block;
  
}

@media (max-width: 1200px) {
  .container_new {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "a2"
    "a1";
  }
}

  @media (max-width: 1200px) {
    .newblock {
      position: absolute;
     
      max-width: 1160px;
      margin: 0 auto;
      margin-top: -300px;
      width: 100%;
      margin-bottom: -110px;
    }
  }

  @media (max-width: 1200px) {
    .grid1 {
     
     
      
      margin: 0 auto;
    
      width: 100%;
      margin-bottom: -110px;
    }
  }