/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html {
  background-color: #3a3a3a; }

body {
  font-family: 'Roboto', sans-serif;
  color: #fafafa; }

.clearfix:after {
  content: '';
  display: table;
  clear: both; }

#c8rriboo {
  width: 100%; }
  #c8rriboo .header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%); }
  #c8rriboo h1 {
    font-size: 6vw;
    line-height: 4vw;
    color: rgba(250, 250, 250, 0.8); }
    #c8rriboo h1 small {
      font-size: 2.5vw;
      font-weight: normal;
      color: rgba(250, 250, 250, 0.8);
      position: absolute;
      top: 10%;
      left: 17%; }
  #c8rriboo .desc {
    font-size: 1.5vw;
    color: rgba(250, 250, 250, 0.8);
    margin-top: 1vh;
    margin-left: .5vw; }
  #c8rriboo .social {
    font-size: 1.5vw;
    text-align: left;
    margin-top: 2vh;
    transition: opacity .5s; }
    #c8rriboo .social a {
      display: block;
      margin: 0 .5vw .5vw;
      color: rgba(250, 250, 250, 0.8);
      text-decoration: none;
      transition: color .5s; }
      #c8rriboo .social a:hover {
        color: #ff6f61; }
  #c8rriboo section {
    width: 100%; }
  #c8rriboo .block {
    position: relative;
    float: left;
    overflow: hidden;
    opacity: 0; }
    #c8rriboo .block:first-child {
      opacity: 1 !important; }
    #c8rriboo .block:last-child {
      opacity: 1 !important; }
    #c8rriboo .block.big-one {
      width: 100%;
      height: 100%;
      background-color: #3a3a3a; }
    #c8rriboo .block.medium-one {
      width: 75%;
      height: 100vh; }
    #c8rriboo .block.small-one {
      width: 25%;
      height: 50vh;
      background-color: #3a3a3a; }
    #c8rriboo .block:hover .social {
      opacity: 1; }
    #c8rriboo .block:hover .slide-info {
      width: 80%;
      height: 80%;
      opacity: 1;
      top: 10%;
      left: 10%; }
  #c8rriboo .slides-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover; }
    #c8rriboo .slides-container .slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: cover;
      opacity: 0;
      transition: opacity .5s; }
      #c8rriboo .slides-container .slide.active {
        opacity: 1; }
  #c8rriboo .slide-info {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fafafa;
    white-space: normal;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background-color: #ff6f61;
    opacity: 0;
    transition: opacity .5s, width .5s, height .5s, top .5s, left .5s; }
    #c8rriboo .slide-info.slide-info-mobile {
      display: none; }
    #c8rriboo .slide-info .v-center {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      transform: translateY(-50%) translateX(-50%); }
    #c8rriboo .slide-info h2 {
      font-size: 2vw;
      margin-top: 2vh;
      margin: 0 0 2vh; }
    #c8rriboo .slide-info hr {
      width: 80%;
      height: 1px;
      margin: 0 auto;
      border: none;
      background-color: #fafafa; }
    #c8rriboo .slide-info ul {
      margin: 2vh 0 0; }
      #c8rriboo .slide-info ul li {
        display: inline-block;
        margin: .5vh .5vw;
        position: relative;
        font-size: 1.8vw;
        text-align: center; }
        #c8rriboo .slide-info ul li .desc {
          opacity: 0;
          position: absolute;
          font-size: 1.6vw; }

#moon {
  width: 15vw;
  height: 15vw;
  background-color: #e1e1e1;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  box-shadow: 0 0 7px #fafafa;
  transform: translateX(-50%) translateY(-50%);
  opacity: .5; }
  #moon .visible {
    width: 15vw;
    height: 15vw;
    background-color: #fafafa;
    border-radius: 50%;
    position: absolute;
    top: -2vw;
    left: 3vw; }
  #moon .crats {
    width: 3vw;
    height: 3vw;
    background-color: #e1e1e1;
    border: 3px solid #fafafa;
    border-radius: 50%;
    position: absolute;
    top: 3vw;
    left: 2vw; }
    #moon .crats.crat-2 {
      width: 1.5vw;
      height: 1.5vw;
      position: absolute;
      top: 11vw;
      left: 6vw; }
    #moon .crats.crat-3 {
      width: 2.5vw;
      height: 2.5vw;
      position: absolute;
      top: 6vw;
      left: 9vw; }

@media screen and (max-width: 780px) {
  #c8rriboo h1 {
    font-size: 20vw; }
    #c8rriboo h1 small {
      font-size: 9vw;
      top: -15%;
      left: 17%; }
  #c8rriboo .desc {
    font-size: 6vw;
    margin-top: 4vh;
    margin-left: 2vw; }
  #c8rriboo .social {
    font-size: 7vw; }
  #c8rriboo .block.small-one {
    width: calc(100% - 8vw);
    height: auto;
    padding: 0 4vw 4vw 4vw; }
    #c8rriboo .block.small-one:first-child {
      height: 50vh; }
    #c8rriboo .block.small-one:last-child {
      height: 25vh; }
    #c8rriboo .block.small-one .slide-info {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      height: auto;
      opacity: 1;
      background-color: #ff6f61; }
      #c8rriboo .block.small-one .slide-info.slide-info-mobile {
        display: block; }
        #c8rriboo .block.small-one .slide-info.slide-info-mobile h2 {
          transform: rotateZ(45deg); }
      #c8rriboo .block.small-one .slide-info .v-center {
        position: static;
        width: 100%;
        transform: none; }
      #c8rriboo .block.small-one .slide-info h2 {
        margin: 0;
        font-size: 10vw;
        padding: 2vh 0; }
      #c8rriboo .block.small-one .slide-info hr {
        display: none; }
      #c8rriboo .block.small-one .slide-info ul {
        position: static;
        padding: 0 0 2vh;
        margin: 0; }
        #c8rriboo .block.small-one .slide-info ul br {
          display: none; }
        #c8rriboo .block.small-one .slide-info ul li {
          font-size: 7vw; }
    #c8rriboo .block.small-one .slides-container {
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      height: 50vh; }
  #c8rriboo .block:hover .slide-info {
    width: 100%; } }