/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: 
       url('/fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('/fonts/roboto-v30-latin-300italic.eot'); /* IE9 Compat Modes */
  src: 
       url('/fonts/roboto-v30-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: 
       url('/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/roboto-v30-latin-italic.eot'); /* IE9 Compat Modes */
  src: 
       url('/fonts/roboto-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: 
       url('/fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */
  src: 
       url('/fonts/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('/fonts/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
  src: 
       url('/fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-900italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/roboto-v30-latin-900italic.eot'); /* IE9 Compat Modes */
  src: 
       url('/fonts/roboto-v30-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v30-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v30-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v30-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v30-latin-900italic.svg#Roboto') format('svg'); /* Legacy iOS */
}



html,
body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  background-image: url('../images/background.png');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: cover;
  height: 100vh;
  width: 100vw;
}

header {
  position: absolute;
  left: 16px;
  top: 4px;
}

header h1 {
  color: rgba(0, 0, 0, .87);
  font-size: 120px;
  font-weight: 900;
  left: -8px;
  letter-spacing: .04em;
  line-height: 1em;
  margin: 0;
  position: absolute;
  text-align: right;
  top: 486px;
  transform-origin: top left;
  transform: rotate(270deg);
  width: 400px;
}

header h2 {
  color: rgba(0, 0, 0, .3);
  font-size: 86px;
  font-weight: 400;
  letter-spacing: .04em;
  left: 0;
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
}

main {
  text-align: center;
  min-height: 100%;
}

main h1 {
  color: white;
  font-weight: 300;
  font-style: italic;
  font-size: 92px;
  margin: 24px 124px;
}

main img {
  height: 30vw;
  width: 30vw;
}


footer {
  background: rgba(0, 0, 0, .6);
  color: rgba(255, 255, 255, .37);
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  padding: 12px 32px;
  text-align: right;
  font-size: .86rem;
  font-weight: 400;
  letter-spacing: .011em;
  line-height: 1.67em;
}

.flex {
  -ms-flex: 1;
  -webkit-box-flex: 1;
  flex: 1;
  -ms-flex: 1 1 0.000000001px;
  -ms-flex-preferred-size: 0.000000001px;
  flex-basis: 0.000000001px;
}

.self-align-end {
  -ms-align-self: end;
  -webkit-align-self: end;
  align-self: end;
}

.align-end {
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.layout-vertical {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
}

@media screen and (max-width : 600px) {
  header h1 {
    font-size: 60px;
    left: -11px;
    top: 442px;
  }

  header h2 {
    font-size: 42px;
  }

  main h1 {
    font-size: 58px;
  margin: 24px 80px;

  }
}