body, html {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Verdana',sans-serif;
  overflow: hidden;
  background: #030000; }

.yan-band, footer {
  float: left;
  position: relative;
  width: 300px;
  height: 100vh;
  background: #030000; }
  .yan-band .logo, footer .logo {
    height: 30%;
    margin: 30px auto 0;
    position: relative;
    display: block; }
    .yan-band .logo img, footer .logo img {
      height: 100%;
      display: block;
      position: relative;
      margin: 0 auto; }
  .yan-band .detail, footer .detail {
    position: absolute;
    bottom: 50px;
    width: 90%;
    height: 79%;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
    transform: -webkit-translateX(-50%);
    transform: -moz-translateX(-50%);
    transform: -o-translateX(-50%); }
    .yan-band .detail .detail-wrapper, footer .detail .detail-wrapper {
      position: relative;
      width: 100%;
      align-self: flex-end; }
      .yan-band .detail .detail-wrapper h1, footer .detail .detail-wrapper h1 {
        color: #fff;
        font-size: .9rem;
        font-weight: 800;
        margin-top: 50px; }
      .yan-band .detail .detail-wrapper p, .yan-band .detail .detail-wrapper a, .yan-band .detail .detail-wrapper span, footer .detail .detail-wrapper p, footer .detail .detail-wrapper a, footer .detail .detail-wrapper span {
        text-decoration: none;
        display: block;
        color: #fdfdfd;
        font-size: .8rem;
        font-weight: 200;
        opacity: .7;
        margin: 10px 0; }
        .yan-band .detail .detail-wrapper p:hover, .yan-band .detail .detail-wrapper a:hover, .yan-band .detail .detail-wrapper span:hover, footer .detail .detail-wrapper p:hover, footer .detail .detail-wrapper a:hover, footer .detail .detail-wrapper span:hover {
          opacity: .9; }
      .yan-band .detail .detail-wrapper .adres, footer .detail .detail-wrapper .adres {
        margin: 25px 0; }
      .yan-band .detail .detail-wrapper #copyright, footer .detail .detail-wrapper #copyright {
        margin: 70px 0 0 0;
        font-size: .7rem; }
        .yan-band .detail .detail-wrapper #copyright:hover, footer .detail .detail-wrapper #copyright:hover {
          opacity: .7; }

footer {
  display: none; }

.content {
  position: relative;
  display: inline-block;
  width: calc(100% - 300px);
  height: 100vh;
  background: #232323; }
  .content .project-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: none; }
    .content .project-back img {
      min-width: 100%;
      min-height: 100%; }
    .content .project-back:first-child {
      display: block; }
  .content .projects {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: 0-translate -50%, -50%;
    width: 75%; }
    .content .projects .wrapper {
      position: relative;
      width: 100%;
      height: 100%; }
      .content .projects .wrapper .item {
        width: 40%;
        float: left;
        height: 300px;
        position: relative; }
        .content .projects .wrapper .item:hover .logo {
          transform: translate(-50%, -50%) scale(1.2); }
          .content .projects .wrapper .item:hover .logo span {
            opacity: 1;
            visibility: visible; }
        .content .projects .wrapper .item .item-back {
          display: none; }
        .content .projects .wrapper .item .logo {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transform: -webkit-translate(-50%, -50%);
          transform: -moz-translate(-50%, -50%);
          transform: 0-translate -50%, -50%;
          transition: .3s all; }
          .content .projects .wrapper .item .logo img {
            width: 85%;
            margin: 0 auto 25px;
            display: block; }
          .content .projects .wrapper .item .logo #m-logo {
            width: 100%; }
          .content .projects .wrapper .item .logo #d-logo {
            width: 75%; }
          .content .projects .wrapper .item .logo #ca-logo {
            width: 105%; }
          .content .projects .wrapper .item .logo #co-logo {
            width: 80%;
            transform: translateY(-10px); }
          .content .projects .wrapper .item .logo span {
            font-size: .85rem;
            color: #fff;
            text-align: center;
            display: block;
            width: 100%;
            opacity: 0;
            visibility: hidden;
            transition: .3s all;
            font-weight: 100; }

@media screen and (max-width: 768px) {
  body, html {
    overflow-y: auto;
    overflow-x: hidden; }
  .yan-band {
    width: 100% !important;
    height: auto; }
    .yan-band .logo {
      width: 50% !important;
      margin: 50px auto; }
      .yan-band .logo img {
        height: auto !important;
        width: 95% !important; }
    .yan-band .detail {
      display: none !important; }
  footer {
    width: 100%;
    height: auto;
    display: block; }
    footer .detail {
      position: relative;
      margin: 50px auto;
      bottom: 0;
      left: 0;
      transform: translate(0, 0); }
  .content {
    width: 100%;
    height: auto; }
    .content .project-back {
      display: none !important; }
    .content .projects {
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
      transform: translate(0, 0); }
      .content .projects .item {
        width: 100% !important; }
        .content .projects .item:hover .logo {
          transform: translate(-50%, -50%) scale(1) !important; }
          .content .projects .item:hover .logo span {
            opacity: 0 !important;
            visibility: hidden !important; }
        .content .projects .item .item-back {
          display: block !important;
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          z-index: -1; }
          .content .projects .item .item-back img {
            width: 115%;
            height: 100%; }
  .content .projects .wrapper .item .logo {
    width: auto !important; }
  #co-logo {
    transform: translateY(0px) !important; } }

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .yan-band {
    width: 250px !important; }
  .content {
    width: calc(100% - 250px); }
  .content .projects .wrapper .item .logo {
    width: 80%; } }

@media screen and (max-width: 1367px) {
  .yan-band .detail {
    bottom: 10px !important; }
  .yan-band .detail .detail-wrapper #copyright {
    margin: 30px 0 0 !important; }
  .yan-band .detail .detail-wrapper h1 {
    margin-top: 30px !important; } }