/**
* Author: Edwin Vásquez
**/

@font-face {
  font-family: 'Avenir-Book';
  src: url('fonts/Avenir-Book.eot?#iefix') format('embedded-opentype'),  url('fonts/Avenir-Book.otf')  format('opentype'),
	     url('fonts/Avenir-Book.woff') format('woff'), url('fonts/Avenir-Book.ttf')  format('truetype'), url('fonts/Avenir-Book.svg#Avenir-Book') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Avenir-Book';
  src: url('fonts/AvenirLTStd-Medium.eot?#iefix') format('embedded-opentype'),  url('fonts/AvenirLTStd-Medium.otf')  format('opentype'),
	     url('fonts/AvenirLTStd-Medium.woff') format('woff'), url('fonts/AvenirLTStd-Medium.ttf')  format('truetype'), url('fonts/AvenirLTStd-Medium.svg#AvenirLTStd-Medium') format('svg');
  font-weight: bold;
  font-style: bold;
}

body {
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.logo{
    width: 500px;
}

@media (max-width: 575px) {
  body{
    margin: 3px !important;
    padding: 0px !important;
  }

  .logo {
    width: calc(300px - 120px) !important;
  }

  .text {
    width: 120px !important;
    font-size: 11px !important;
  }

  .andy-block{
    margin-top: auto !important;
    font-size: 22px;
  }

  .main-letter{
    width: 48px !important;
  }

  .uppercase{
    font-size: 20px !important;
  }

  .p-block{
    min-height: 373px;
    text-align: left;
  }
  
  .andy-block{
    min-height: 111px;
  }

  .second-block{
    width: 80% !important;
  }

  .andy-warhol{
    text-align: center !important;
  }
}

html, body {
  height: 100%;
  font-family: 'Avenir-Book';
  color: #fff;
  font-size: 19px;
  line-height: 26px;
  overflow: hidden;
}


.text {
  width: 170px;
  margin-left: 10px;
  display: inline-block;
  font-weight: bold;
}

.second-block{
  display: none;
  width: 668px;
  margin: 0 auto;
  position: inherit;
  font-weight: 300;
  color: #a7a8a9;
  animation: 5s;
}

.second-block svg {
  height: 14px;
}

.andy-warhol{
  display: none;
  color: #fff;
  font-variant: all-petite-caps;
  text-align: right;
}

.andy-warhol span{
  font-variant: none;
}

.uppercase{
  font-size: 25px;
}

.main-letter{
  display: none;
  position: absolute;
  right: 25px;
  bottom: 0;
  width: 107px;
}

.andy-block{
  margin-top: 200px;
  height: 67px;
  font-size: 22px;
  text-align: justify;
}

.logo-letters{
  display: none;
}

.p-block{
  height: 115px;
}

p{
  text-align: justify;
}

.letter {
  display: inline-block;
  transform: scale(0);
  animation: 3s;
}

.andy-phrase{
  font-variant: all-petite-caps;
}

.andy-phrase.letters span:nth-child(2) {
  font-variant: none;
}