@font-face {
  font-family: futura-bold;
  src: url("reception-assets/fonts/FuturaStd-Bold.otf");
}

@font-face {
  font-family: hiragino;
  src: url("reception-assets/fonts/HiraginoKakuGothicStd-W8.otf");
}

body {
  background-color: rgba(220,220,220,1);
  /*background-color: rgba(25,25,25,1);*/
  margin: 0;
  padding: 0;
}

.mirage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

.mirage {
  animation: mirage 60s infinite;
  -o-animation: mirage 60s infinite;
  -ms-transition: mirage 60s infinite;
  -moz-animation: mirage 60s infinite;
  -webkit-animation: mirage 60s infinite;
}
@keyframes mirage {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}
@-o-keyframes mirage {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}
@-ms-keyframes mirage {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}
@-moz-keyframes mirage {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}
@-webkit-keyframes mirage {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}

.landing {
  width: 900px;
  margin: auto;
}

.reception_logo {
  float: left;
  width: 100%;
  margin-top: 100px;
  margin-bottom: 20px;
}

.reception {
  float: left;
  width: 80px;
  margin-left: 410px;
  cursor: pointer;
}

.welcome {
  float: left;
  width: 100%;
  font-family: futura-bold;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(65,64,66,1);
  /*color: rgba(200,200,200,1);*/
  /*background: pink;*/
}

.welcome_underline {
  float: left;
  width: 70%;
  height: 3px;
  margin-left: 15%;
  margin-top: 20px;
  background-color: rgba(240,240,240,.8);
}

.about {
  float: left;
  width: 70%;
  margin-left: 15%;
  margin-top: 20px;
  font-family: futura-bold;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: justify;
  color: rgba(65,64,66,1);
  /*color: rgba(200,200,200,1);*/
  /*background: pink;*/
}

.door {
  float: left;
  width: 100%;
  margin-top: 40px;
}

.currently {
  float: left;
  width: 100%;
  margin-top: 100px;
  font-family: futura-bold;
  font-size: 16px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(65,64,66,1);
  /*color: rgba(200,200,200,1);*/
  /*background: red;*/
}

.motelmixtape_logo {
  float: left;
  width: 100%;
  margin-top: 40px;
}

.circle {
  float: left;
  width: 200px;
  margin-left: 350px;
  cursor: pointer; 
}

.motelmixtape {
  float: left;
  width: 200px;
  margin-left: 350px;
  /*background-color: rgba(240,240,240,1);*/
  cursor: pointer;
}

.motelmixtape {
  background: rgba(203,75,86,.5);
  animation: motelmixtape 30s infinite;
  -o-animation: motelmixtape 30s infinite;
  -ms-transition: motelmixtape 30s infinite;
  -moz-animation: motelmixtape 30s infinite;
  -webkit-animation: motelmixtape 30s infinite;
}
@keyframes motelmixtape {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}
@-o-keyframes motelmixtape {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}
@-ms-keyframes motelmixtape {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}
@-moz-keyframes motelmixtape {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}
@-webkit-keyframes motelmixtape {
  0%   {background:rgba(250,250,240,.5);}
  14%  {background:rgba(203,75,86,.5);}
  28%  {background:rgba(241,131,83,.5);}
  42%  {background:rgba(254,229,68,.5);}
  56%  {background:rgba(53,169,105,.5);}
  70%  {background:rgba(73,145,201,.5);}
  84%  {background:rgba(157,121,185,.5);}
  100% {background:rgba(250,250,240,.5);}
}

.divider {
  float: left;
  width: 20px;
  height: 20px;
  margin-left: 630px;
  margin-top: 0px;
  margin-bottom: 50px;
  border-radius: 100%;
  /*background-color: rgba(150,150,150,1);*/
}

.contact_button {
  width: 100%;
  margin: auto;
}

.contact_logo {
  float: left;
  width: 36px;
  height: 36px;
  margin-left: 432px;
  margin-right: 432px;
  margin-bottom: 10px;
  cursor: pointer;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  /*background: red;*/
}

.contact_logo_icon {
  float: left;
  width: 100%;
}

.email_heading {
  float: left;
  width: 50%;
  margin-left: 25%;
  margin-bottom: 5px;
  font-family: futura-bold;
  font-size: 13px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(65,64,66,1);
  /*color: rgba(200,200,200,1);*/
  /*background: red;*/
}

.email {
  float: left;
  width: 50%;
  margin-left: 25%;
  font-family: futura-bold;
  font-size: 15px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(240,240,240,1);
  /*background: blue;*/
}

#white_text {
  color: rgba(240,240,240,1);
}

#rainbow_text {
  -webkit-animation: rainbow_text 15s infinite linear;
  -moz-animation: rainbow_text 15s infinite linear;
  -o-animation: rainbow_text 15s infinite linear;
  -ms-animation: rainbow_text 15s infinite linear;
  animation: rainbow_text 15s infinite linear;
}

@-webkit-keyframes rainbow_text {
  0%   {color:rgba(250,250,240,.5);}
  14%  {color:rgba(203,75,86,.5);}
  28%  {color:rgba(241,131,83,.5);}
  42%  {color:rgba(254,229,68,.5);}
  56%  {color:rgba(53,169,105,.5);}
  70%  {color:rgba(73,145,201,.5);}
  84%  {color:rgba(157,121,185,.5);}
  100% {color:rgba(250,250,240,.5);}
}
@-moz-keyframes rainbow_text {
  0%   {color:rgba(250,250,240,.5);}
  14%  {color:rgba(203,75,86,.5);}
  28%  {color:rgba(241,131,83,.5);}
  42%  {color:rgba(254,229,68,.5);}
  56%  {color:rgba(53,169,105,.5);}
  70%  {color:rgba(73,145,201,.5);}
  84%  {color:rgba(157,121,185,.5);}
  100% {color:rgba(250,250,240,.5);}
}
@-ms-keyframes rainbow_text {
  0%   {color:rgba(250,250,240,.5);}
  14%  {color:rgba(203,75,86,.5);}
  28%  {color:rgba(241,131,83,.5);}
  42%  {color:rgba(254,229,68,.5);}
  56%  {color:rgba(53,169,105,.5);}
  70%  {color:rgba(73,145,201,.5);}
  84%  {color:rgba(157,121,185,.5);}
  100% {color:rgba(250,250,240,.5);}
}
@-o-keyframes rainbow_text {
  0%   {color:rgba(250,250,240,.5);}
  14%  {color:rgba(203,75,86,.5);}
  28%  {color:rgba(241,131,83,.5);}
  42%  {color:rgba(254,229,68,.5);}
  56%  {color:rgba(53,169,105,.5);}
  70%  {color:rgba(73,145,201,.5);}
  84%  {color:rgba(157,121,185,.5);}
  100% {color:rgba(250,250,240,.5);}
}
@keyframes rainbow_text {
  0%   {color:rgba(250,250,240,.5);}
  14%  {color:rgba(203,75,86,.5);}
  28%  {color:rgba(241,131,83,.5);}
  42%  {color:rgba(254,229,68,.5);}
  56%  {color:rgba(53,169,105,.5);}
  70%  {color:rgba(73,145,201,.5);}
  84%  {color:rgba(157,121,185,.5);}
  100% {color:rgba(250,250,240,.5);}
}

.footer {
  float: left;
  height: 200px;
}

/*---------SCREEN RESPONSE----------*/

@media only screen 
and (max-width : 940px) {

  .landing {
    width: 100%;
    margin: auto;
  }

  .reception {
    width: 20%;
    margin-left: 40%;
  }

  .circle {
    width: 35%;
    margin-left: 32.5%;
  }

  .motelmixtape {
    width: 35%;
    margin-left: 32.5%;
  }

  .contact_logo {
    width: 8%;
    margin-left: 46%;
    margin-bottom: 0%;
  }

  .email_heading {
    margin-top: 5%;
    /*font-size: 16px;*/
  }

  .email {
    /*font-size: 16px;*/
  }

}

/*---------iPhone 6 Plus----------*/

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {

  .landing {
    width: 100%;
    margin: auto;
  }

  .reception {
    width: 20%;
    margin-left: 40%;
  }

  .about {
  font-size: 24px;
  }

  .circle {
    width: 35%;
    margin-left: 32.5%;
  }

  .motelmixtape {
    width: 35%;
    margin-left: 32.5%;
  }

  .contact_logo {
    width: 6%;
    margin-left: 47%;
    margin-bottom: 4%;
  }

  .welcome {
    font-size: 40px;
  }

  .welcome_underline {
    float: left;
    width: 70%;
    height: 6px;
    margin-left: 15%;
    margin-top: 20px;
    background-color: rgba(240,240,240,.8);
  }

  .currently {
    font-size: 32px;
  }

  .email_heading {
    font-size: 28px;
  }

  .email {
    font-size: 28px;
  }

}

/*---------iPhone 6----------*/

@media only screen
and (min-device-width : 375px) 
and (max-device-width : 667px) {

  .landing {
    width: 100%;
    margin: auto;
  }

  .reception {
    width: 20%;
    margin-left: 40%;
  }

  .about {
  font-size: 24px;
  }

  .circle {
    width: 35%;
    margin-left: 32.5%;
  }

  .motelmixtape {
    width: 35%;
    margin-left: 32.5%;
  }

  .contact_logo {
    width: 6%;
    margin-left: 47%;
    margin-bottom: 4%;
  }

  .welcome {
    font-size: 40px;
  }

  .welcome_underline {
    float: left;
    width: 70%;
    height: 6px;
    margin-left: 15%;
    margin-top: 20px;
    background-color: rgba(240,240,240,.8);
  }

  .currently {
    font-size: 32px;
  }

  .email_heading {
    font-size: 28px;
  }

  .email {
    font-size: 28px;
  }

}

/*---------iPhone 5----------*/

@media only screen
and (min-device-width : 320px) 
and (max-device-width : 568px) {

  .landing {
    width: 100%;
    margin: auto;
  }

  .reception {
    width: 20%;
    margin-left: 40%;
  }

  .about {
  font-size: 24px;
  }

  .circle {
    width: 35%;
    margin-left: 32.5%;
  }

  .motelmixtape {
    width: 35%;
    margin-left: 32.5%;
  }

  .contact_logo {
    width: 6%;
    margin-left: 47%;
    margin-bottom: 4%;
  }

  .welcome {
    font-size: 40px;
  }

  .welcome_underline {
    float: left;
    width: 70%;
    height: 6px;
    margin-left: 15%;
    margin-top: 20px;
    background-color: rgba(240,240,240,.8);
  }

  .currently {
    font-size: 32px;
  }

  .email_heading {
    font-size: 28px;
  }

  .email {
    font-size: 28px;
  }

}

/*---------iPhone 4----------*/

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

  .landing {
    width: 100%;
    margin: auto;
  }

  .reception {
    width: 20%;
    margin-left: 40%;
  }

  .about {
  font-size: 24px;
  }

  .circle {
    width: 35%;
    margin-left: 32.5%;
  }

  .motelmixtape {
    width: 35%;
    margin-left: 32.5%;
  }

  .contact_logo {
    width: 6%;
    margin-left: 47%;
    margin-bottom: 4%;
  }

  .welcome {
    font-size: 40px;
  }

  .welcome_underline {
    float: left;
    width: 70%;
    height: 6px;
    margin-left: 15%;
    margin-top: 20px;
    background-color: rgba(240,240,240,.8);
  }

  .currently {
    font-size: 32px;
  }

  .email_heading {
    font-size: 28px;
  }

  .email {
    font-size: 28px;
  }

}