/*==============================================================================================*/
html, body{margin: 0;padding: 0;width: 100%;height: 100%;}
form,p{margin: 0;padding: 0;}
.h{content: "";display: block;height: 0;clear: both;visibility: hidden;}
input:focus,select:focus,textarea:focus{outline: none;}
*|*:-moz-any-link:focus{outline: none;}
img{border: 0;max-width: 100%;}
a{cursor: pointer;}
table img{max-width: none;}
/*==============================================================================================*/
@font-face {
  font-family: 'icomoon';
  src:  url('font/icomoon.eot?al4li7');
  src:  url('font/icomoon.eot?al4li7#iefix') format('embedded-opentype'),
    url('font/icomoon.ttf?al4li7') format('truetype'),
    url('font/icomoon.woff?al4li7') format('woff'),
    url('font/icomoon.svg?al4li7#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face{
  font-family:cmzp;
  src: url('font/pragmatica-webfont.eot');
  src: url('font/pragmatica-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/pragmatica-webfont.woff2') format('woff2'),
       url('font/pragmatica-webfont.woff') format('woff'),
       url('font/pragmatica-webfont.svg#helveticaneuecyrbold') format('svg');
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:cmzp;
  src: url('font/pragmatica-bold-webfont.eot');
  src: url('font/pragmatica-bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/pragmatica-bold-webfont.woff2') format('woff2'),
       url('font/pragmatica-bold-webfont.woff') format('woff'),
       url('font/pragmatica-bold-webfont.svg#helveticaneuecyrbold') format('svg');
  font-weight:700;
  font-style:normal;
}
@font-face{
  font-family:cmzp;
  src: url('font/pragmatica-bold-italic-webfont.eot');
  src: url('font/pragmatica-bold-italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/pragmatica-bold-italic-webfont.woff2') format('woff2'),
       url('font/pragmatica-bold-italic-webfont.woff') format('woff'),
       url('font/pragmatica-bold-italic-webfont.svg#helveticaneuecyrbold') format('svg');
  font-weight:700;
  font-style:italic;
}
@font-face{
  font-family:cmzp;
  src: url('font/pragmatica-italic-webfont.eot');
  src: url('font/pragmatica-italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('font/pragmatica-italic-webfont.woff2') format('woff2'),
       url('font/pragmatica-italic-webfont.woff') format('woff'),
       url('font/pragmatica-italic-webfont.svg#helveticaneuecyrbold') format('svg');
  font-weight:400;
  font-style:italic;
}

body{background: #fff;min-width: 640px;position: relative;padding: 0;-webkit-overflow-scrolling: auto;height: auto;}
body,td{color: #000;font-family: "cmzp",Tahoma,Arial;font-size: 1.2vw;line-height: 1.2vw;word-wrap:break-word;overflow-x: hidden;}
a{font-family: "cmzp",Tahoma,Arial;font-size: 1.2vw;line-height: 1.2vw;color: #000;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
a:hover{text-decoration: none;}
p{margin-top: 20px;}
p:first-child{margin-top: 0;}
ul,ol{margin: 0 0 0 29px;padding: 0;}
li{margin: 0 0 0 13px;padding: 0;}
input,select,textarea{display: block;padding: 0 1.3vw;height: 3.56vw;line-height: normal;margin: 25px 0 0;background: transparent;font-size: 1.2vw;color: #000;font-family: "cmzp",Tahoma,Arial,Verdana,sans-serif;border: none;position: relative;box-sizing: border-box;border: 0.06vw solid #000;-webkit-appearance: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
input:first-child,select:first-child,textarea:first-child{margin-top: 0;}
select{padding: 5px 0 4px 5px;height: auto;}
textarea{resize:none;padding-top: 14px;display: block;overflow-y:auto;height: 16.43vw;overflow: hidden !important;-ms-overflow-style:none}
img[align="left"]{margin: 0 16px 30px 0;}
img[align="right"]{margin: 0 0 30px 16px;}
img[align="center"]{margin: 0 0 30px 0;}
h1,h2,h3,h4,h5,h6{margin: 64px 0 0 0;color: #000;line-height: 98%;font-weight: normal;font-family: "cmzp",Tahoma,Arial,Verdana,sans-serif;}
h1,h2,h3{font-size: 59px;}
h4{font-size: 26px;}
h5,h6{font-size: 1.2vw;line-height: 1.2vw;}
h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top: 0;}
.table_border{width: 100%;border-collapse: separate;}
/*==========================================================================================================*/

#ytplayer1,
#ytplayer2{
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#ytplayer2{
  position: absolute;
  top: 0;
  left: 0;
}

#brief{
  padding-top: 3.5vw;
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 100%;
  left: 0;
  overflow: auto;
  box-sizing: border-box;
  border-bottom: 3.76vw solid transparent;
  transition: transform 0.5s ease;
  /* cursor: url(img/close.png) 27 27,pointer; */
}
#brief .center{
  width: 31.56vw;
  margin: 0 auto;
  cursor: default;
}
#brief input,
#brief textarea{
  margin: 1.1vw 0 0 0;
  width: 100%;
}
#brief input.err,
#brief textarea.err{
  border-color: #f92900;
}

#brief input.submit{
  cursor: pointer;
}
#brief input.submit.na{
  border-color: #b7b7b7;
  color: #b7b7b7;
}
#brief .thanks{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: bold;
  font-style: normal;
  font-size: 2.6vw;
  line-height: 2.6vw;
  color: #fff;
  cursor: default;
  display: none;
}
#brief .thanks .ct{
  width: 31.84vw;
}
#brief .thanks .text{
  display: block;
  text-align: center;
}
#brief .thanks .bt{
  display: inline-block;
  box-sizing: border-box;
  border: 0.06vw solid #fff;
  margin-top: 13.14vw;
  width: 100%;
  height: 4.78vw;
  line-height: 4.50vw;
  text-align: center;
  color: #fff;
  transition: color 0.5s ease, background 0.5s ease;
}
#brief .thanks .bt:hover{
  background: #fff;
  color: #000;
}

body.showBrief{
  height: 100%;
  height: 100vh;
  overflow: hidden;
}
body.showBrief #brief{
  transform: translateY(100%);
}

#body{
  box-shadow: 0 -0.06vw #000;
  position: relative;
  transition: transform 0.5s ease;
  width: 100%;
}
body.showBrief #body{
  transform: translateY(calc(100vh - 3.76vw));
}
body.showBrief #body header{
  overflow: hidden !important;
}

#body .head{
  width: 100%;
  height: 3.76vw;
  text-align: right;
  box-sizing: border-box;
  padding: 1.2vw 0.8vw;
  border-top: 0.06vw solid #000;
  transition: bottom 0.5s ease, height 0.2s ease;
  cursor: pointer;
}
#body .head.hover{
  height: 4.76vw;
}
#body h3{
  display: inline-block;
}
#body h3,
#body h3 a{
  font-size: 1.2vw;
  line-height: 1.2vw;
  vertical-align: top;
}
header{
  width: 100%;
  height: 3.6vw;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  line-height: 3.6vw;
  z-index: 2;
  overflow: hidden;
  z-index: 51;
}
header>span{
  /* overflow: hidden; */
  height: 3.6vw;
}
header .head{
  display: none;
  grid-column: 1/4;
  position: relative;
  z-index: 1;
  background: #fff;
}
header.works,
header.about,
header.contacts{
  overflow: visible;
}
header.works>.head:nth-child(4){
  display: block;
}
header.about>.head:nth-child(4),
header.about>.head:nth-child(5){
  display: block;
}
header.contacts>.head:nth-child(4),
header.contacts>.head:nth-child(5),
header.contacts>.head:nth-child(6){
  display: block;
}
body.showBrief header:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
header > span{
  padding: 0 13px;
}
header > span:nth-child(1){
  padding-left: 0.8vw;
}
header > span:nth-child(2){
  text-align: center;
}
header > span:nth-child(3){
  text-align: right;
}
header .jami span{
  display: none;
}
body.showBrief header .jami{
  position: relative;
  z-index: 11;
}

header .logo{
  background: url(img/logo.svg) no-repeat;
  background-position: 50%;
  background-size: contain;
  position: absolute;
  top: 0vw;
  left: 0vw;
  width: 9vw;
  height: 3.6vw;
  z-index: 1;
  cursor: pointer;
}
header .logo.hidden{
  opacity: 0;
}

header .header_grid{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  position: absolute;
  top: -1vw;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: block;
  width: 9vw;
  height: 3.6vw;
  top: 0vw;
  left: 0vw;
  line-height: normal;
}

header .header_grid.hide{
  opacity: 0;
}

header .header_grid > span{
  vertical-align: middle;
  text-align: center;
  color: #000;
  font-size: 2vw;
  line-height: 2vw;
  font-weight: 700;
  font-family: 'icomoon';
  background: #fff;
  letter-spacing: 0.6vw;
  transition: text-shadow 0.1s ease, transform 0.1s ease;
  display: block;
  line-height: 5.6vw;
  margin: 0 auto;
  width: 6.09vw;
  height: 2.26vw;
  position: relative;
}
header .header_grid > span > span{
  display: inline-block;
  transition: opacity 0.5s ease;
}

header .header_grid > span > .isto{
  display: block;
  background: url(img/isto.svg) no-repeat;
  background-position: 50%;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0.67vw;
  left: 50%;
  margin-left: -3.045vw;
  transition: transform 0.2s ease;
}

header .header_grid > span.hidden > span{
  opacity: 0;
}

header .logo_block{
  position: relative;
}

header .logo_block .logo{
  background: url('img/logo.svg') no-repeat;
  background-size: contain;
  background-position: 50%;
  width: 6.44vw;
  height: 2.39vw;
  position: absolute;
  top: 0.6vw;
  left: 1.54vw;
  cursor: pointer;
}

header.animate .logo_block .header_grid{
  opacity: 1;
}

header .send_brief{
  transition: opacity 0.5s ease;
}
body.showBrief header .send_brief{
  opacity: 0;
  cursor: default;
}

#body.error header{
  background: transparent;
}

#body.error header span:nth-child(2){
  text-align: right;
  grid-column-start: 3;
  grid-column-end: 4;
}

#body.error header span:nth-child(2) a{
  color: #fff;
}

#body.error header .logo{
  background: url(img/logo_w.svg) no-repeat;
  z-index: 999;
}

#body.error header .jami{
  z-index: 999;
}

#main{
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100vh;
  border-top: 3.6vw solid transparent;
  border-bottom: 11.28vw solid transparent;
  position: relative;
  box-sizing: border-box;
  user-select: none;
  overflow: hidden;
  transition: height 0.5s ease,opacity 0.5s ease,border-width 0.5s ease,margin 0.5s ease,min-height 0.5s ease;
}
#main.hide{
  height: 0;
  opacity: 0;
  border-width: 0;
  margin: 0;
}
#main .mobileWrapper{
  width: 100%;
  height: 100%;
}
#main .text{
  position: absolute;
  pointer-events:none;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 21vw;
  display: table;
}
#main .text p{
  margin-top: 0;
}
#main .text span{
  display: table-cell;
  padding: 0px 0 0;
  width: 100%;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 0.6px;
  font-weight: normal;
  font-style: normal;
  font-size: 2.6vw;
  line-height: 2.6vw;
}
#main .logo{
  width: 100%;
  height: 100%;
  /* background: url(img/1.jpg); */
  position: relative;
}
#main .logo .grid{
  display: table;
  width: 100%;
  height: 100.5%;
  pointer-events:none;
  position: absolute;
  top: 0;
  left: 0;
}
#main .logo .grid > span{
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  text-align: center;
  color: #000;
  font-size: 20vw;
  line-height: 20vw;
  font-family: 'icomoon';
  background: #fff;
  mix-blend-mode: lighten;
  letter-spacing: 2vw;
  transition: text-shadow 0.1s ease, transform 0.1s ease;
  /*--*/
}
#main .logo .grid > span > span{
  display: inline-block;
  transition: opacity 0.5s ease;
}
#main .logo .grid > span > span:first-child{
  margin-right: 5.78vw;
}
#main .logo .grid > span > span:last-child{
  margin-left: -2.63vw;
}
#main .logo .grid > span.hidden > span{
  opacity: 0;
}

#main .logo .v{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
#main .logo .v video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

#main .logo .image{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('bg_error.png');
}

#body.error #main{
  border: none;
}

#body.error #main .logo .grid > span{
  color: #fff;
  background: #000;
  mix-blend-mode: difference;
}

#body.error #main .text span{
  color: #fff;
}

#body.error #main .logo .grid > span > span:first-child{
  margin-right: 0;
}
#body.error #main .logo .grid > span > span:last-child{
  margin-left: 0;
}


#works{
  -webkit-overflow-scrolling: touch;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 100vh;
  position: relative;
  height: auto;
}
#works.inside{
  padding: 3.6vw 0;
}
#works.white{
  z-index: 50;
}
#works .head{
  position: fixed;
  bottom: 7.52vw;
  z-index: 1;
  z-index: 48;
}
#works.inside .head{
  cursor: default;
}
#works.float .head{
  position: absolute;
  top: 0;
  background: transparent;
}
#works.inside .head,
#works.static .head{
  position: fixed;
  top: 3.6vw;
  top: 0;
  transform: translateY(3.6vw);
  box-shadow: 0 -1vw #fff;
}
#works.white .head{
  background: #fff;
}
#works .content{
  opacity: 0;
  transition: opacity 0.5s ease;
}
#works.inside .content,
#works.float .content,
#works.static .content{
  opacity: 1;
}
#works .list{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#works .list:after{
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
#works .list li{
  margin: 0;
  padding: 0;
}
#works .list li:after{
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
#works .list li .text{
  float: left;
  width: 15vw;
  padding: 1.4vw 0 0 0.8vw;
  line-height: 1.4vw;
  position: relative;
  z-index: 1;
}
#works .list li .text .descript{
  font-style: italic;
}
#works .list li .img{
  display: block;
  float: right;
  width: 81vw;
  height: 43vw;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
#works .bt{
  display: inline-block;
  box-sizing: border-box;
  border: 0.06vw solid #000;
  width: 31.45vw;
  /* height: 4.78vw; */
  /* line-height: 4.50vw; */
  /* margin: 9.27vw 49.54vw 11.96vw 0; */
  text-align: center;
  float: right;
  margin: 6vw 49.54vw 6vw 0;
  height: 3.76vw;
  line-height: 3.64vw;
}
#works .bt:hover{
  background: #000;
  color: #fff;
}
#works.hide{
  height: 0;
  position: static;
}

#works .content .list_inside{
  list-style: none;
  margin: 4.5vw 0.8vw 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5.3vw 0.8vw;
}
#works .content .list_inside li{
  margin: 0;
  padding: 0;
}
#works .content .list_inside li a{
  line-height: 1.4vw;
}
#works .content .list_inside li a .img{
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
}
#works .content .list_inside li a .img:before{
  content: "";
	display: block;
	padding-top: 61.3%;
}
#works .content .list_inside li a .img span{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 101%;
  height: 101%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.5s ease;
}
#works .content .list_inside li a .img:hover span{
  opacity: 0;
}
#works .content .list_inside li a .img + span{
  display: inline-block;
  margin-top: 1.4vw;
}
#works .content .list_inside li a .descript{
  font-style: italic;
}

#works .work .bigImg{
  width: 100%;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
#works .work .bigImg:before{
  content: "";
  display: block;
	padding-top: 46.92%;
}
#works .work .workDescription{
  width: 65vw;
  margin: 0 auto;
  font-size: 2.6vw;
  line-height: 4vw;
  font-weight: 400;
  padding-top: 4.6vw;
}
#works .work .name,
#works .work .descript{
  font-size: 1vw;
  line-height: 1.4vw;
  font-weight: normal;
}
#works .work .txt{
  margin-top: 3.3vw;
}
#works .work .txt .more{
  font-size: 1vw;
  line-height: 1.4vw;
  font-weight: normal;
  display: table;
  cursor: pointer;
  user-select: none;
  padding: 1vw 0;
}
#works .work .txt .more span{
  display: none;
}
#works .work .txt .more span:first-child{
  display: block;
}
#works .work .txt .more.show span{
  display: block;
}
#works .work .txt .more.show span:first-child{
  display: none;
}
#works .work .txt .rest{
  max-height: 0;
  transition: max-height 0.2s ease-out;
  overflow: hidden;
}
#works .work .txt .more.show + .rest{
  max-height: 99999px
}
#works .work p{
  margin-top: 1.3vw;
  text-align: center;
}
#works .work .txt + p{
  margin-top: 6vw;
}
#works .work img{
  max-width: 100%;
  width: 100%;
  height: auto;
  vertical-align: top;
}
#works .work .vertical{
  width: 100%;
  display: inline-block;
  text-align: center;
}
#works .work .vertical img{
  width: auto;
  max-height: 86vh;
}
#works .work p.mobile{
  display: none;
}

#works .work .twocols,
#works .work .threecols{
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: center;
}
#works .work .twocols>span,
#works .work .threecols>span{
  line-height: 0;
  font-size: 0;
  vertical-align: top;
  padding-left: 1vw;
  padding-right: 1vw;
  box-sizing: border-box;
}
#works .work .twocols>span:first-child,
#works .work .threecols>span:first-child{
  padding-left: 0;
}
#works .work .twocols>span:last-child,
#works .work .threecols>span:last-child{
  padding-right: 0;
}
#works .work .twocols span{
  flex-basis:calc(100% / 2);
}
#works .work .threecols span{
  flex-basis:calc(100% / 3);
}

footer{
  display: grid;
  font-size: 2.6vw;
  line-height: 3.4vw;
  font-weight: 400;
  grid-template-columns: 2fr 1fr;
  padding-top: 10vw;
}
footer .descript_text{
  padding: 0 14.7vw 0 0.8vw;
}
footer .descript_text p{
  margin-top: 0;
}
footer .contacts{
  padding: 0 0.8vw 0 0;
}
footer .contacts .h3:first-child{
  margin-top: 0;
}
footer .contacts .h3,
footer .contacts p{
  margin-top: 3.7vw;
}
footer .contacts a{
  position: relative;
  font-size: 2.6vw;
  line-height: 3.4vw;
  transition: color 0.2s ease;
  display: inline-block;
  max-height: 3.4vw;
  overflow: hidden;
}
footer .contacts a:hover{
  font-style: italic;
}
footer .contacts a.adress{
  max-height: 6.8vw;
}
footer .contacts a.adress:before{
  content: "";
  position: absolute;
  top: 2.8vw;
  left: 0;
  width: 100%;
  height: 2vw;
}

#about{
  -webkit-overflow-scrolling: touch;
  width: 100%;
  background: #fff;
  z-index: 1;
  box-sizing: border-box;
  overflow: hidden;
  transition: background 0.5s ease;
  min-height: 100vh;
  position: relative;
  padding-top: 3.6vw;
  height: auto;
  padding-bottom: 5vw;
}
#about:after{
  content: "";display: block;height: 0;clear: both;visibility: hidden;
}
#about.white{
  z-index: 49;
}
#about .head{
  position: fixed;
  bottom: 3.76vw;
  background: #fff;
  z-index: 1;
  z-index: 49;
}
#about.float .head{
  position: absolute;
  top: 0;
  background: transparent;
}
#about.static .head{
  position: fixed;
  top: 7.36vw;
  top: 0;
  transform: translateY(7.36vw);
  background: transparent;
  box-shadow: 0 -1vw #fff;
}
#about.white .head{
  background: #fff;
}
#about .content{
  display: grid;
  font-size: 2.6vw;
  line-height: 3.4vw;
  font-weight: 400;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  padding-top: 5vw;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#about.show .content,
#about.float .content,
#about.static .content{
  opacity: 1;
}
#about .content .descript{
  padding: 5.2vw 15.7vw 0 0.8vw;
}
#about .content .descript p{
  margin-top: 0;
}
#about .content .descript p:first-child{
  margin-top: 0;
}
#about .content .summary{
  text-align: right;
  padding: 0 0.8vw 0 0;
  overflow: hidden;
}
#about .content .list{
  list-style: none;
  margin: 0;
  padding: 0;
}
#about .content .list li{
  margin: 0;
  padding: 0;
}
#about .content h5 + .list{
  margin-top: 4vw;
}
#about .content .list + h5{
  margin-top: 9.8vw;
}
#about.hide{
  height: 0;
  position: static;
}

#contacts{
  -webkit-overflow-scrolling: touch;
  width: 100%;
  z-index: 2;
  overflow: hidden;
  color: #fff;
  font-size: 2.6vw;
  line-height: 3.4vw;
  font-weight: 400;
  transition: background 0.5s ease;
  min-height: 85vh;
  position: relative;
  padding-top: 3.6vw;
  height: auto;
}
#contacts.white{
  z-index: 48;
}
#contacts.float,
#contacts.static{
  background: #000;
}

#contacts .head{
  position: fixed;
  bottom: 0;
  background: #fff;
  z-index: 1;
  z-index: 50;
}
#contacts.float .head{
  background: transparent;
  position: absolute;
  top: 0;
}
#contacts.static .head{
  background: transparent;
  position: fixed;
  top: 11.12vw;
  top: 0;
  transform: translateY(11.12vw);
  box-shadow: 0 -1vw #fff;
}
#contacts .head h3{
  transition: color 0.5s ease;
}
#contacts.float .head h3,
#contacts.static .head h3{
  color: #fff;
}
#contacts .content{
  padding: 10vw 0.8vw 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: grid;
  grid-template-columns: 2fr 1fr;
}

#contacts.float .content,
#contacts.static .content{
  opacity: 1;
}

#contacts a{
  position: relative;
  color: #fff;
  font-size: 2.6vw;
  line-height: 3.4vw;
  transition: color 0.2s ease;
  display: inline-block;
  max-height: 3.4vw;
  overflow: hidden;
}
#contacts a.adress{
  max-height: 6.8vw;
}
#contacts a.adress:before{
  content: "";
  position: absolute;
  top: 2.8vw;
  left: 0;
  width: 100%;
  height: 2vw;
}
#contacts a:hover{
  font-style: italic;
}
#contacts p{
  margin-top: 2.6vw;
}

#bottomMenu{
  display: none;
}

#navigation .next,
#navigation .prev{
  margin: 1.2vw 0.8vw;
  cursor: pointer;
  display: inline-block;
}
#navigation .next{
  float: right;
}

@media screen and (max-width: 1024px) {
  input,select,textarea{padding: 0 3.2vw;height: 12.8vw;font-size: 4vw;border: 0.25vw solid #000;}
  textarea{height: 52.5vw;padding-top: 3vw;}
  h5{
    font-size: 4vw;
    line-height: 4vw;
  }

  #brief{
    /* padding: 22.4vw 0; */
    padding: 5vw 0 18.6vw;
    overflow: auto;
    border-bottom: none;
  }
  #brief .center{
    width: auto;
    /* margin: 0 1.5vw 22.4vw; */
    margin: 0 1.5vw;
  }
  #brief input,
  #brief textarea{
    margin: 1.86vw 0 0 0;
  }
  #brief input.submit{
    width: 36vw;
    margin: 12vw auto 0;
  }
  #brief .thanks{
    font-size: 6vw;
    line-height: 6vw;
    padding: 22.4vw 0;
  }
  #brief .thanks .ct{
    width: 46.4vw;
  }
  #brief .thanks .bt{
    height: 10.4vw;
    border: 0.25vw solid #fff;
    font-size: 5vw;
    line-height: 9.4vw;
    margin-top: 13.14vw;
  }

  #main{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    height: auto;
    /* border-top-width: 13.6vw; */
    border-top-width: 0;
    border-bottom-width: 31.5vw;
  }
  #main.hide{
    min-height: 0;
  }
  #main .mobileWrapper{
    width: auto;
    height: auto;
  }
  #main .logo{
    height: 56.25vw;
  }
  #main .logo:before,
  #main .logo:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2vw;
    margin-top: -1vw;
    background: #fff;
    z-index: 1;
  }
  #main .logo:after{
    top: 100%;
  }
  #main .logo .grid{
    box-shadow: 0 0.1vw #fff, 0 -0.1vw #fff, inset 0 1vw #fff, inset 0 -1vw #fff;
  }
  #main .logo .grid > span{
    font-size: 28vw;
    line-height: 28vw;
  }
  #main .text{
    position: relative;
    left: auto;
    top: auto;
    z-index: 1;
    height: auto;
    display: block;
    min-height: 0;
  }
  #main .text span{
    display: block;
    padding: 0 10vw 0 3vw;
    text-align: left;
    font-size: 6vw;
    line-height: 7vw;
    box-sizing: border-box;
  }
  #main .text span br{
    display: none;
  }

  #body.error #main{
    display: block;
    min-height: 0;
    height: 100vh;
  }

  #body.error #main .logo{
    height: 100vh;
  }

  #body.error #main .logo:before,
  #body.error #main .logo:after{
    display: none;
  }

  #body.error #main .mobileWrapper{
    width: 100%;
    height: 100%;
  }

  #body.error #main .text{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: table;
    min-height: 21vw;
  }

  #body.error #main .text span{
    display: table-cell;
    padding: 0;
    text-align: center;
    /* font-size: 2.6vw;
    line-height: 2.6vw; */
    color: #fff;
    font-size: 4vw;
    line-height: 5vw;
  }

  #body.error #main .logo .grid{
    box-shadow: none;
  }

  #body.error #main .text span br{
    display: block;
  }

  header{
    height: 13.6vw;
    line-height: 13.6vw;
    /* overflow: visible; */
    grid-template-columns: 1fr 1fr auto;
    opacity: 0;
    /* transition: opacity 0.1s ease; */
  }
  header:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
  }
  header.animate:after{
    display: none;
  }
  header.animate{
    opacity: 1;
  }

  header > span{
    height: 13.6vw;
  }

  header .header_grid{
    width: 100%;
    height: 100%;
    transition: none;
  }
  header .header_grid > span{
    /* font-size: 8.3vw; */
    /* line-height: 8.3vw; */
    /* line-height: 23.24vw; */
    /* font-weight: 600; */
    width: 26vw;
    height: 13.6vw;
    margin: 0 0 0 3vw;
  }
  header .header_grid > span > .isto{
    top: 0;
    margin-left: 0;
    left: 0;
  }

  header .logo_block .logo{
    width: 26.11vw;
    height: 9.69vw;
    top: 2.22vw;
    left: 2.82vw;
  }

  header.animate .logo_block .header_grid{
    opacity: 1;
  }

  header .header_grid > span:before{
    content: "";
    position: absolute;
    top: 0;
    left: 99%;
    width: 2%;
    height: 100%;
    background: #fff;
  }
  header .header_grid > span:after{
    content: "";
    position: absolute;
    top: 99%;
    left: 0;
    width: 100%;
    height: 2%;
    background: #fff;
  }

  header > span:nth-child(2){
    grid-column: 3;
    grid-row: 1;
  }
  header > span:nth-child(3){
    grid-column: 2;
    grid-row: 1;
  }
  header .jami{
    display: inline-block;
    font-size: 3vw;
    line-height: 4vw;
    vertical-align: middle;
    position: relative;
  }
  header .jami span{
    display: block;
  }
  header > span:nth-child(3){
    text-align: left;
  }

  header .head{
    grid-column: 1/4;
    background: #fff;
    z-index: 1;
  }

  header .logo{
    top: 1vw;
    left: 2.6vw;
    width: 26.04vw;
    height: 13.1vw;
  }

  #body.error header{
    opacity: 1;
  }

  body.showBrief #body{
    transform: translateY(calc(100vh - 13.6vw));
  }
  #body{
    box-shadow: 0 -0.3vw #000;
  }

  #body h3{
    display: block;
    padding: 0 3vw;
  }
  #body h3,
  #body h3 a{
    font-size: 6vw;
    line-height: 10vw;
    font-weight: 400;
  }

  #body .head{
    height: 10.5vw;
    padding: 0;
    text-align: left;
    border-top: 0.25vw solid #000;
    background: #fff;
  }
  #body .head.hover{
    height: 10.5vw;
  }

  #body header .send_brief{
    display: inline-block;
    vertical-align: middle;
    width: 36vw;
    height: 10.4vw;
    box-sizing: border-box;
    border: 0.25vw solid #000;
    font-size: 5vw;
    line-height: 9.9vw;
    padding: 0 2vw;
  }

  #works{
    z-index: 1;
  }
  #works.white{
    z-index: auto;
  }
  #works .head{
    bottom: 21vw;
  }
  #works.inside{
    padding: 24.1vw 0;
  }
  #works.inside .head,
  #works.static .head{
    top: 13.6vw;
    top: 0;
    transform: translateY(13.6vw);
  }
  #works .list li .text{
    display: none;
  }
  #works .list li .img{
    width: 100%;
    height: 62.4vw;
  }
  #works .bt{
    display: block;
    border-width: 0.25vw;
    margin: 10vw auto;
    width: 45.6vw;
    font-size: 4vw;
    float: none;
    height: 10.5vw;
    line-height: 10vw;
  }

  #works .content .list_inside{
    list-style: none;
    margin: 0;
    grid-template-columns: 1fr;
    grid-gap: 12vw 0;
  }
  #works .content .list_inside li a{
    font-size: 4vw;
    line-height: 5vw;
  }
  #works .content .list_inside li a .img:before{
  	padding-top: 61.3%;
  }
  #works .content .list_inside li a .img + span{
    margin-top: 4vw;
  }
  #works .content .list_inside li a .name,
  #works .content .list_inside li a .descript{
    padding: 0 3vw;
  }

  #works .work .bigImg:before{
  	padding-top: 60%;
  }
  #works .work .workDescription{
    width: auto;
    margin: 0 3vw;
    font-size: 6vw;
    line-height: 7vw;
    padding-top: 18vw;
  }
  #works .work .name,
  #works .work .descript{
    font-size: 4vw;
    line-height: 5vw;
  }
  #works .work .txt{
    margin-top: 8vw;
  }
  #works .work .txt .more{
    font-size: 3vw;
    line-height: 4vw;
    padding: 3vw 0;
  }
  #works .work p{
    margin-top: 4.8vw;
  }
  #works .work .vertical img{
    max-height: 70vh;
  }
  #works .work .txt + p{
    margin-top: 6vw;
  }
  #works .work p.desktop{
    display: none;
  }
  #works .work p.mobile{
    display: block;
  }
  #works .work .twocols>span,
  #works .work .threecols>span{
    flex-basis:100%;
    padding: 4.8vw 0 0;
  }
  #works .work .twocols>span:first-child,
  #works .work .threecols>span:first-child{
    padding: 0;
  }
  #works .work .twocols>span:last-child,
  #works .work .threecols>span:last-child{
    padding-left: 0;
    padding-right: 0;
  }

  footer{
    grid-template-columns: 1fr;
    padding-top: 14vw;
    font-size: 6vw;
    line-height: 7vw;
  }
  footer .descript_text{
    padding: 0 14.7vw 0 1.5vw;
  }
  footer .contacts{
    padding: 0 1.5vw 0 1.5vw;
  }
  footer .contacts .h3:first-child,
  footer .contacts .h3{
    margin-top: 10vw;
  }
  footer .contacts a{
    font-size: 6vw;
    line-height: 7vw;
  }
  footer .contacts a,
  footer .contacts a.adress{
    max-height: none
  }
  footer .contacts a.adress:before{
    display: none;
  }

  #about{
    padding-bottom: 10.5vw;
  }
  #about{
    z-index: 2;
  }
  #about.white{
    z-index: auto;
  }
  #about .head{
    bottom: 10.5vw;
    z-index: 1;
  }
  #about.static .head{
    top: 24.1vw;
    top: 0;
    transform: translateY(24.1vw);
  }
  #about .content{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    font-size: 6vw;
    line-height: 7vw;
    padding-top: 14vw;
  }
  #about .content .descript{
    padding: 0 21vw 0 3vw;
  }
  #about .content .summary{
    text-align: left;
    padding: 0 3vw 0;
  }
  #about .content .summary h5{
    margin-top: 14vw;
  }
  #about .content h5 + .list{
    margin-top: 8vw;
  }

  #contacts{
    z-index: 3;
    padding-top: 10.5vw;
    min-height: calc(100vh - 34.6vw);
  }
  #contacts.float,
  #contacts.static{
    z-index: auto;
  }
  #contacts.show{
    padding-top: 45.1vw;
    border-bottom: none;
  }
  #contacts.static .head{
    top: 34.6vw;
    top: 0;
    transform: translateY(34.6vw);
  }
  #contacts .content{
    font-size: 6vw;
    line-height: 7vw;
    padding: 10vw 3vw;
    grid-template-columns: 1fr;
  }
  #contacts .content a{
    font-size: 6vw;
    line-height: 7vw;
  }
  #contacts p{
    margin-top: 5vw;
  }
  #contacts a,
  #contacts a.adress{
    max-height: none;
  }
  #contacts a.adress:before{
    display: none;
  }

  #bottomMenu{
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
  }
  #bottomMenu .head{
    background: #fff;
  }
  #bottomMenu.works>.head:nth-child(1){
    display: none;
  }
  #bottomMenu.about>.head:nth-child(1),
  #bottomMenu.about>.head:nth-child(2){
    display: none;
  }
  #bottomMenu.contacts>.head:nth-child(1),
  #bottomMenu.contacts>.head:nth-child(2),
  #bottomMenu.contacts>.head:nth-child(3){
    display: none;
  }

  #navigation .next,
  #navigation .prev{
    margin: 0 3vw;
    font-size: 6vw;
    line-height: 10vw;
    font-weight: 400;
  }
}