@charset "UTF-8";

/* == Framework "Lanc 9" by German Bodunov (v 1.1 - 20.09.2017) == */

html {scroll-behavior: smooth;}
body {margin: 0; padding: 0; font: normal 12pt/12pt 'Manrope', sans-serif; background: #000305;}

/*``````````````Text``````````````````````````*/
h1 {font: normal 20pt/20pt 'Manrope', sans-serif;}
h2 {font: normal 18pt/18pt 'Manrope', sans-serif;}
h3 {font: 600 16pt/16pt 'Manrope', sans-serif;}
p {font: normal 12pt/12pt 'Manrope', sans-serif;}
a {font: normal 12pt/12pt 'Manrope', sans-serif;}
ul {font: normal 12pt/12pt 'Manrope', sans-serif;}
li {font: normal 12pt/12pt 'Manrope', sans-serif;}
span {font: normal 12pt/12pt 'Manrope', sans-serif;}
p.grayp {color: gray;}
button {font: normal 12pt/12pt 'Manrope', sans-serif;}

/*```````````Main Blocks``````````````````````*/
header {width: 100%; height: 80px; position: absolute; top: 80px; display: flex; justify-content: center;}
footer {width: 100%; height: 450px; background: #11131b;}
.screen_area {width: 100%; height: auto; display: flex; justify-content: center; align-items: center;}
.content_area {width: 1200px; min-height: 450px; height: auto;}
.clients {width: 400px; height: 100vh; position: fixed; right: 0; background: rgb(0 0 0 / 50%); transform: translateX(400px); transition: transform 0.3s ease; z-index: 10;}
.clients.pokaz {transform: translateX(0);}
button.clnt {position: absolute; left: -100px; top: 50%; transform: rotateZ(-90deg); transform-origin: bottom; width: 200px; height: 40px; background: #234b87; color: white; font-size: 12pt; font-weight: bold; letter-spacing: 4px; border: none; border-radius: 10px 10px 0px 0px; cursor: pointer;}
.clients_cont {width: 100%; display: flex; flex-direction: column; align-items: center;}
.client_block {display: flex; flex-direction: column; color: white; align-items: center; background: rgb(255 255 255 / 5%); padding: 10px 40px; margin-top: 40px;}
.client_block img {width: 240px;}
.client_block h3 {font-size: 14pt; margin: 15px 0;}
.client_block a:last-child {color: cornflowerblue; margin: 15px 0;}
.client_block img:hover {filter: saturate(1.2) contrast(1.2);}

/*```````````Modificators`````````````````````*/
.flex_row {display: flex; flex-direction: row;}
.flex_column {display: flex; flex-direction: column;}

/*````````````Graphics```````````````````````````*/
.back_img-1 {background: url(/images/img.jpg) no-repeat; background-size: cover;}

/*````````````Header``````````````````````````````*/
.head_wrap {width: 1200px; height: 80px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}
.foot_wrap {width: 1200px; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; color: white;}
.logotype img {width: 190px; filter: drop-shadow(4px 4px 0px black) drop-shadow(0px 0px 60px black) drop-shadow(0px 0px 80px slateblue);}
nav.menu {display: flex; align-items: center;}
nav.menu p {font-weight: bold; font-size: 14px; margin: 0 20px 0 0; color: lightslategray;}
nav.menu a {color: white; text-decoration: none; font-size: 18px; margin: 20px;}
nav.menu a:hover {color: #7fad05;}

/*````````````Footer``````````````````````````````*/
.foot_left img {width: 140px; margin-bottom: 50px;}
.foot_left {display: flex; flex-direction: column; align-items: center;}

/*````````````Materials```````````````````````````*/
.screen_area.first_screen {width: 100%; height: 100vh; background: url(/images/background_gerbod.jpg) no-repeat; background-size: contain; background-position: center top; center center; flex-direction: column; justify-content: space-between;}
.logotype {margin-top: 25vh;}
.promo_text {margin-bottom: 33vh;}
.promo_text p {color: deepskyblue; text-align: center; font: normal 14pt/14pt 'Manrope', sans-serif; margin: 15px 0;}
/*-------------Gallery----------------------------*/
.screen_area.screen3 {padding: 160px 0 0 0; display: flex; flex-direction: column; position: relative;}
.gallery {width: 100%; height: 850px; position: relative; display: flex; justify-content: center; overflow: hidden; perspective: 450px; padding: 60px 0; user-select: none;}
.gcard {will-change: filter; transition: all 0.5s ease; position: absolute;}
.gcard:nth-child(1) {transform: translateZ(-600px) translateX(-1950px); z-index: 4;}
.gcard:nth-child(2) {transform: translateZ(-500px) translateX(-1750px); z-index: 5;}
.gcard:nth-child(3) {transform: translateZ(-400px) translateX(-1500px); z-index: 6;}
.gcard:nth-child(4) {transform: translateZ(-300px) translateX(-1200px); z-index: 7;}
.gcard:nth-child(5) {transform: translateZ(-200px) translateX(-850px); z-index: 8;}
.gcard:nth-child(6) {transform: translateZ(-100px) translateX(-450px); z-index: 9;}
.gcard:nth-child(7) {transform: translateZ(0) translateX(0); z-index: 10;}
.gcard:nth-child(8) {transform: translateZ(-100px) translateX(450px); z-index: 9;}
.gcard:nth-child(9) {transform: translateZ(-200px) translateX(850px); z-index: 8;}
.gcard:nth-child(10) {transform: translateZ(-300px) translateX(1200px); z-index: 7;}
.gcard:nth-child(11) {transform: translateZ(-400px) translateX(1500px); z-index: 6;}
.gcard:nth-child(12) {transform: translateZ(-500px) translateX(1750px); z-index: 5;}
.gcard:nth-child(13) {transform: translateZ(-600px) translateX(1950px); z-index: 4;}
.gcard img {will-change: filter; transition: all 0.5s ease; pointer-events: none; height: 650px;}
.gcard:nth-child(1) img {filter: brightness(0);}
.gcard:nth-child(2) img {filter: brightness(0);}
.gcard:nth-child(3) img {filter: brightness(0.05);}
.gcard:nth-child(4) img {filter: brightness(0.1);}
.gcard:nth-child(5) img {filter: brightness(0.15);}
.gcard:nth-child(6) img {filter: brightness(0.2);}
.gcard:nth-child(8) img {filter: brightness(0.2);}
.gcard:nth-child(9) img {filter: brightness(0.15);}
.gcard:nth-child(10) img {filter: brightness(0.1);}
.gcard:nth-child(11) img {filter: brightness(0.05);}
.gcard:nth-child(12) img {filter: brightness(0);}
.gcard:nth-child(13) img {filter: brightness(0);}
.gallery_buttons {width: 700px; position: absolute; display: flex; justify-content: space-between;}
.gallery_buttons button {font-size: 30pt; font-weight: 900; line-height: 30pt; background: none; border: none; padding: 20px 15px; outline: none; transition: background 0.1s ease; color: white;}
.gallery_buttons button:hover {background: #1863d3;}

/*```````````Responsive`````````````````````````*/
@media only screen and (min-width : 320px) and (max-width : 1200px) and (orientation: portrait) {
  .screen_area.first_screen {background-size: cover;}
  .screen_area.screen3 {padding: 40px 0 80px 0;}
  footer {padding: 60px 30px; width: calc(100% - 60px);}
  .foot_wrap {width: 100%; flex-direction: column;}
  foot_center p {text-align: center; font: normal 12pt/16pt 'Manrope', sans-serif;}
  .gallery {height: 140vw; padding: 20px 0;}
  .gallery_buttons {width: calc(100% - 40px); padding: 0 20px; bottom: 30px;}
  .gallery_buttons button {width: 45%; font-size: 25pt; line-height: 25pt; padding: 0; background: none; border: 2px solid deepskyblue; border-radius: 5px;}
  .gcard:nth-child(1) {transform: translateZ(-400px) translateX(-500px); z-index: 4;}
  .gcard:nth-child(2) {transform: translateZ(-400px) translateX(-500px); z-index: 5;}
  .gcard:nth-child(3) {transform: translateZ(-400px) translateX(-500px); z-index: 6;}
  .gcard:nth-child(4) {transform: translateZ(-300px) translateX(-400px); z-index: 7;}
  .gcard:nth-child(5) {transform: translateZ(-200px) translateX(-350px); z-index: 8;}
  .gcard:nth-child(6) {transform: translateZ(-100px) translateX(-250px); z-index: 9;}
  .gcard:nth-child(7) {transform: translateZ(0) translateX(0); z-index: 10;}
  .gcard:nth-child(8) {transform: translateZ(-100px) translateX(250px); z-index: 9;}
  .gcard:nth-child(9) {transform: translateZ(-200px) translateX(350px); z-index: 8;}
  .gcard:nth-child(10) {transform: translateZ(-300px) translateX(400px); z-index: 7;}
  .gcard:nth-child(11) {transform: translateZ(-400px) translateX(500px); z-index: 6;}
  .gcard:nth-child(12) {transform: translateZ(-400px) translateX(500px); z-index: 5;}
  .gcard:nth-child(13) {transform: translateZ(-400px) translateX(500px); z-index: 4;}
  .gallery_buttons button:hover {background: none;}
  .gallery_buttons button:active {background: deepskyblue;}
  .gcard img {height: 65vh;}
  .clients {width: 75vw; transform: translateX(75vw);}
  .client_block {background: black; width: calc(80% - 20px); padding: 20px;}
  .client_block img {width: 50vw;}
}

@media only screen and (min-width : 480px) and (max-width : 860px) and (orientation: landscape) {
/* стили */
}

@media only screen and (min-width : 861px) and (max-width : 1340px) and (orientation: landscape) {
/* стили */
}

@media only screen and (min-width : 1341px) and (max-width : 1600px) and (orientation: landscape) {

}