@import "assets/fonts/AABebasNeue/stylesheet.css";
@import "assets/fonts/opensans/stylesheet.css";

html{
  font-size:4.75px;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

body {
  background: url('assets/mainphoto.png') 90% top no-repeat #1c1c1c;
  /*background: url('assets/bg_temp.png') top left no-repeat #1c1c1c;*/
}

body * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.viewport {
  width: 100%;
  height: 100%;
  position: absolute;
  width: 47.3%;
  right: 52.7%;
  display: table;
}
.cell {
  display: table-cell;
  vertical-align: middle;
}
.htmlNoPages .htmlNoPages_title {
  font: 170px/1 'AA Bebas Neue';
  color: rgba(255, 255, 255, .1);
  padding: 0 40px 0 0;
  margin: 0;
  text-transform: uppercase;
  text-align: right;
}
.htmlNoPages .htmlNoPages_contacts {
  text-align: right;
  background: rgba(0,0,0,.3);
  padding: 40px 68px 40px 0;
  width: 49.2vw;
  margin: 0;
}
.htmlNoPages .htmlNoPages_contacts > div {
  display: inline-block;
  vertical-align: middle;
}
.htmlNoPages .htmlNoPages_contacts .contacts_icons {
  margin-right: 18px;
}
.htmlNoPages .htmlNoPages_contacts .contacts_icons a {
  transition: .5s ease-out;
  -moz-transition: .5s ease-out;
  -webkit-transition: .5s ease-out;
}
.htmlNoPages .htmlNoPages_contacts .contacts_icons > a {
  width: 99px;
  height: 99px;
  display: inline-block;
  vertical-align: middle;
  opacity: .3;
  margin: 0 20px;
}
.htmlNoPages .htmlNoPages_contacts .contacts_icons .be {
  background: url('assets/icon_behance.png') no-repeat;
  background-size: contain;
}
.htmlNoPages .htmlNoPages_contacts .contacts_icons .infinite {
  background: url('assets/icon_500px.png') no-repeat;
  background-size: contain;
}
.htmlNoPages .htmlNoPages_contacts .contacts_links {
  text-align: left;
}
.htmlNoPages .htmlNoPages_contacts .contacts_links > a {
  font: 18px OpenSans_Regular;
  color: rgba(255,255,255,.3);
  padding-left: 40px;
  display: inline-block;
  margin: 10px 0;
}
.htmlNoPages .htmlNoPages_contacts .contacts_links > a.email_link {
  background: url('assets/icon_mail.png') left center no-repeat;
}
.htmlNoPages .htmlNoPages_contacts .contacts_links > a.skype_link {
  background: url('assets/icon_skype.png') left center no-repeat;
  text-decoration: none;
}
.htmlNoPages .htmlNoPages_contacts a:active,
.htmlNoPages .htmlNoPages_contacts a:hover {
  opacity: .9;
  color: rgba(255,255,255,.9);
}
.htmlNoPages .name {
  text-align: right;
  font: 18px OpenSans_Regular;
  color: rgba(255,255,255,.2);
  padding: 14px 434px 20px 0;
  height: 170px;
}
.htmlNoPages .social {
  background: #161616;
  width: 116px;
  height: 100%;
  position: absolute;
  text-align: center;
  padding: 0;
  margin: 0 auto;
  right: 0;
  top: 0;
  display: table;
}
.htmlNoPages .social a {
  width: 65px;
  height: 65px;
  display: inline-block;
  vertical-align: middle;
  margin: 13px 0;
  opacity: 0.1;
  transition: .5s ease-out;
  -moz-transition: .5s ease-out;
  -webkit-transition: .5s ease-out;
}
.htmlNoPages .social a:hover ,
.htmlNoPages .social a:active {
  opacity: 0.5;
}
.htmlNoPages .social a.vk {
  background: url('assets/icon_vk.png') no-repeat;
  background-size: contain;
}
.htmlNoPages .social a.instagram {
  background: url('assets/icon_ig.png') no-repeat;
  background-size: contain;
}
@media only screen and (max-width: 1024px){
  html{
    font-size: 1vw;
  }
  html, body {
    height: auto;
  }
  body {
    background: url('assets/m/mobilemainphoto.png') top center no-repeat #292929;
    background-size: contain;
  }
  .viewport {
    width: 100rem;
    height: auto;
    margin: 0 auto;
    position: relative;
    right: auto;
  }
  .htmlNoPages {
    position: relative;
  }
  .htmlNoPages .htmlNoPages_title {
    font: 25rem 'AA Bebas Neue';
    width: 100%;
    margin: 55rem 0 0 0;
    text-align: center;
    padding: 0;
    position: inherit;
  }
  .htmlNoPages .htmlNoPages_contacts {
    text-align: center;
    background: #1d1d1d;
    padding: 10rem 4rem;
    width: 85rem;
    margin: 10rem auto 0 auto;
  }
  .htmlNoPages .htmlNoPages_contacts .contacts_icons {
    margin: 0;
  }
  .htmlNoPages .htmlNoPages_contacts .contacts_icons a {
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
  }
  .htmlNoPages .htmlNoPages_contacts .contacts_icons > a {
    width: 26rem;
    height: 26rem;
    display: inline-block;
    vertical-align: middle;
    opacity: .3;
    margin: 0 6rem;
  }
  .htmlNoPages .htmlNoPages_contacts .contacts_icons .be {
    background: url('assets/m/m_icon_behance.png') no-repeat;
    background-size: contain;
  }
  .htmlNoPages .htmlNoPages_contacts .contacts_icons .infinite {
    background: url('assets/m/m_icon_500px.png') no-repeat;
    background-size: contain;
  }
  .htmlNoPages .htmlNoPages_contacts .contacts_links {
    text-align: center;
  }
  .htmlNoPages .htmlNoPages_contacts .contacts_links > a {
    font: 4rem OpenSans_Regular;
    color: rgba(255,255,255,.3);
    padding-left: 7rem;
    display: inline-block;
    margin: 10rem 0 0 0;
  }
  .htmlNoPages .htmlNoPages_contacts .contacts_links > a.email_link {
    background: url('assets/m/icon_mail.png') left center no-repeat;
    background-size: 5rem;
  }
  .htmlNoPages .htmlNoPages_contacts .contacts_links > a.skype_link {
    background: url('assets/m/icon_skype.png') left center no-repeat;
    background-size: 5rem;
    text-decoration: none;
  }
  .htmlNoPages .htmlNoPages_contacts a:active,
  .htmlNoPages .htmlNoPages_contacts a:hover {
    opacity: .9;
    color: rgba(255,255,255,.9);
  }
  .htmlNoPages .name {
    text-align: center;
    font: 5rem OpenSans_Regular;
    color: rgba(255,255,255,.2);
    margin: 10rem 0;
    padding-right: 0;
    height: auto;
  }
  .htmlNoPages .social {
    background: #212121;
    width: 100%;
    height: 35rem;
    text-align: center;
    padding: 8rem 0;
    margin: 0 auto;
    position: relative;
  }
  .htmlNoPages .social a {
    width: 19rem;
    height: 19rem;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5rem;
    opacity: 0.1;
    transition: .5s ease-out;
    -moz-transition: .5s ease-out;
    -webkit-transition: .5s ease-out;
  }
  .htmlNoPages .social a:hover ,
  .htmlNoPages .social a:active {
    opacity: 0.5;
  }
  .htmlNoPages .social a.vk {
    background: url('assets/m/m_icon_vk.png') no-repeat;
    background-size: contain;
    margin-top: 0;
  }
  .htmlNoPages .social a.instagram {
    background: url('assets/m/m_icon_ig.png') no-repeat;
    background-size: contain;
  }
}


@media only screen and (max-width: 1240px) and (min-width: 1025px){
  .viewport {
    width: 55%;
    right: 45%;
  }
  .htmlNoPages_contacts {
    width: 60vw !important;
  }
}