@media screen and (min-width:320px) and (max-width:1023px) { html { font-size: 14px; } header { position: static; width: 100vw; height: auto; padding: 0 5vw; } .navbar { display: block; top: 40px; } nav, header .logo-block .line, .video-block .square, .title .line, .video-block #videoBG { display: none; } .video-block { background: url(../images/mobile.jpg) center center no-repeat; background-size: cover; } header .logo-block { height: auto; text-align: left; padding-left: 25px; } header .logo-block img.logo1 { width: auto; height: 40px; } header .logo-block img.logo2 { width: auto; height: 25px; position: relative; top: -5px; } main { margin-left: 0; } .video-block .motto { padding: 25px 10vw; } .video-block { height: 70vh; } .title, section.aboutus-block .txt { padding-left: 0; } .center { padding: 25px 10vw; } h2 { font-size: 2rem; } section.offer-block .list .item { flex-basis: 100%; } section.offer-block .list .item:nth-child(1) { order: 2; } section.offer-block .list .item:nth-child(2) { order: 1; } section.offer-block .list .item:nth-child(3) { order: 3; } section.offer-block .list .item:nth-child(4) { order: 4; } section.offer-block .list .item:nth-child(5) { order: 6; } section.offer-block .list .item:nth-child(6) { order: 5; } section.offer-block .list .item:nth-child(7) { order: 7; } section.offer-block .list .item:nth-child(8) { order: 8; } section.offer-block .list .item:nth-child(9) { order: 10; } section.offer-block .list .item:nth-child(10) { order: 9; } section.offer-block .list .item.content { padding: 25px 0; } section.offer-block .list .item.content span { padding-left: 0; } section.contact-block .txt { flex-wrap: wrap; } section.offer-block .list .item.content .txt, section.contact-block .left, section.contact-block .right { flex-basis: 100%; text-align: center; } section.certificates-block .list a { flex-basis: 48%; margin-bottom: 15px; } section.realizations-block .list a { flex-basis: 50%; height: 125px; } section.contact-block .left { border-bottom: 1px solid #202429; margin-bottom: 30px; } section.map-block .map { height: 40vh; } .copyright { text-align: center; } header .social-block { height: auto; padding: 20px 0; } } @media screen and (min-width:480px) and (max-width:1023px) { header .logo-block img.logo1 { height: 55px; } header .logo-block img.logo2 { height: 40px; } .navbar { top: 50px; right: 10vw; } } @media screen and (min-width:600px) and (max-width:1023px) { header .logo-block img.logo1 { margin-right: 20px; } section.realizations-block .list a { height: 200px; } .title { text-align: center; } } @media screen and (min-width:768px) and (max-width:1023px) {} @media screen and (min-width:1024px) and (max-width:1439px) { html { font-size: 16px; } header { padding: 0 25px; } header .logo-block img { width: 50%; } nav a { padding-top: 15px; padding-bottom: 15px; } header .social-block span { display: inline-block; position: relative; top: -10px; } .video-block .square { width: 75px; height: 75px; } .video-block .square a { width: 30px; height: 60px; } .video-block .square a img { width: 15px; } section.offer-block .list .item { min-height: 225px; } section.offer-block .list .item.content { padding: 0 20px; } .center { padding-left: 50px; padding-right: 50px; } section.realizations-block .list a { height: 200px; } } @media screen and (min-width:1280px) and (max-width:1439px) { header .logo-block img.logo1 { width: 40%; } header .logo-block .line { margin: 15px 0; } header .social-block span { top: -15px; } } @media screen and (min-width:1366px) and (max-width:1439px) { nav { height: 51vh; } header .social-block { height: 12vh; } header .social-block span { top: -8px; } header .logo-block .line { margin: 25px 0; } section.realizations-block .list a { height: 225px; } } @media screen and (min-width:1440px) and (max-width:1679px) { html { font-size: 18px; } header .logo-block img.logo1 { width: 60%; max-width: 174px; } header .logo-block img.logo2 { width: 70%; max-width: 220px; } nav a { padding-top: 20px; padding-bottom: 20px; } header .social-block span { position: relative; top: -10px; } section.realizations-block .list a { height: 250px; } } @media screen and (min-width:1600px) and (max-width:1919px) { header .logo-block .line { margin: 20px 0; } } @media screen and (min-width:1680px) and (max-width:1919px) { section.realizations-block .list a { height: 275px; } header .logo-block .line { margin: 40px 0; } } @media screen and (min-width:1800px) and (max-width:1919px) {}