@font-face {
    font-family: avenir;
    src: url('../fonts/Avenir.otf');
}
@font-face {
    font-family: avenirnextbold;
    src: url('../fonts/AvenirNext-Bold.otf');
}

html, body {
    height: 100%;
    font-family: avenir, 'Open Sans', sans-serif;
    box-sizing: border-box;
    background-color: #782525;
    background: linear-gradient(#3d0b0b, #820000);
    overflow-x: hidden;
}
html * {
    -webkit-text-size-adjust:none;
}

.container-fluid {
  height: 100%;
  background-color: #972F2F;
  background: linear-gradient(#3d0b0b, #820000);
  color: white;
  -webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
}

.app-page {
  display: none;
  height: 100%;
  position: relative;
  text-align: center;
}
    .app-page h2 {
        font-size: 50px;
        line-height: 60px;
    }

.app-content {
    max-width: 400px;
    height: 670px;
    /*border: red solid;*/
    margin: 0px auto;
    padding: 30px 0px;
    position: absolute;
    left: 50%; top: 50%;
    margin-top: -335px;
    margin-left: -200px;
    overflow: scroll;
}

.customShow {
  display: block;
}

.btn-default {
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgb(0, 0, 0) transparent;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  margin: 10px 20px 20px 10px;
}

.nav-container {
  text-align: center;
}

.rumblr-nav {
  background-color: #782525;
  height: 50px;
}

.gifBackground{
  background: url('../fimages/background.gif') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
/*  background-color: #782525;
  background: linear-gradient(#3d0b0b, #820000);*/
}

.legal-copy {
  background-color: white;
  border: 1px solid black;
  opacity:0.7;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  color: black;
  height: 300px;
  overflow: scroll;
}

.match-image {
  width: 100%;
  margin: 5px;
  height: 40%;
}

.match-image img{
  height: 100%;
}

.chat-window {
  height: 100%;
  margin: 10px 100px;
  position: relative;
}

.chat-input{
  bottom: 200px;
  left: 0px;
  position: absolute;
  width: 60%;
}

#chatSend {
  bottom: 200px;
  right: 0px;
  position: absolute;
}
/*#page1 div{
  background: url(http://www.lorempixum.com/649/480) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}*/

textarea {
    resize: none;
}
input:focus {
    outline: 0;
}

.rumblrbtn {
    width: 100%;
    cursor: pointer;
}


.logo {
    width: 200px;
    margin-bottom: 30px;
}
.subtitle {
    font-family: avenir, 'Open Sans', sans-serif;
    font-size: 19px;
    font-style: italic;
}
#page1 .intro {
    margin-bottom: 50px;
}
.rumblrbtn {
    margin-bottom: 10px;
}

#page2 .logo {
    margin-bottom: 10px;
}
#page2 .subtitle {
    margin-bottom: 30px;
}
.field {
    width: 100%;
    font-size: 19px;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    outline: none;
    padding: 14px;
    border-radius: 7px;
    margin-bottom: 15px;
}

#page3 .logo {
    margin-bottom: 20px;
}
#page3 .subtitle {
    margin-bottom: 30px;
}

#page4 .logo {
    width: 170px;
    margin-bottom: 23px;
}
#page4 #mattyice-container {
    width: 100%;
    height: 380px;
    margin-bottom: 30px;
}
#page4 #tinderslide {
    margin: 0 auto;
}
#page4 #pass-btn {
    opacity: 0.3;
    margin-top: -10px;
}
#page4 .rumblrbtn {
    width: 95%;
}

#matched .fighton {
    width: 370px;
}
#matched .matched {
    width: 100%;
    margin-top: 20px;
}
#matched .matched-text {
    width: 80%;
    margin-top: 20px;
    margin-bottom: 50px;
}

#page5 .chat-header {
    width: 100%;
}

#page5 section .from-me, .from-them {
    display: none;
}
#page5 section .answer {
    background: transparent;
    border: none;
    width: 100%;
}
#page5 #chattyice {
    //border: blue solid;
    height: 430px;
    overflow-y: auto;
}
::-webkit-scrollbar {
    display: none;
}

.terms{
  overflow: auto;
  height: 350px;
  margin-bottom: 50px;
}


/* iphone 5 */
@media only screen
and (min-width : 320px)
and (max-width : 568px) {
    #page1 .intro {
        font-weight: 43px;
    }
    .trash {
      display: none;
    }
    .subtitle {
      font-size: 19px;
    }
    .app-content-height: 640px;
}

.overflowyo{
  overflow: visible !important;
}