html,body{margin:0;width:100%;height:100%;color:#444;font-family:Arial,Helvetica,sans-serif;
background-color: #d7cfc4;}
a{text-decoration:none}
.clear{clear:both;float:none;}
.hide{display:none !important; }



/* INDEX */

.wrapper{
	width:100%;
  height:100%;
  max-width:700px;
  margin:0 auto;
  background-image:url(wall.jpg);
  background-size:100%;
  background-position:center top;
}

.header{
  width:calc(100% - 40px);
  position:relative;
  top:0;
  left:0;
  background:#2F4444;
  border-bottom:1px solid #141F1F;
  padding:10px 20px;
  overflow:hidden;
}

.logo{
  float:left;
  width:150px;
}

.logo>img{
  height:30px;
}

.chat{
  width:90%;
  margin:10px auto;
}

.bubbles{
  width:calc(100% - 30px);
  position: relative;
  background: #FCFBF6;
  min-height:20px;
  border: 1px solid #C3BFB8;
  margin:10px auto;
  border-radius:5px;
  padding:10px;
  box-shadow:0 1px 1px #C3BFB8;
  display:none;
}
.bubbles:after, .bubbles:before {
  right: 100%;
  top: 20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.time{
  position: relative;
    /* width: 100%; */
    text-align: right;
    /* top: -15px; */
    color: #B7AD9E;
    font-size: 14px;
}

.bubbles:after {
  border-color: rgba(252, 251, 246, 0);
  border-right-color: #FCFBF6;
  border-width: 10px;
  margin-top: -10px;
}
.bubbles:before {
  border-color: rgba(195, 191, 184, 0);
  border-right-color: #C3BFB8;
  border-width: 11px;
  margin-top: -11px;
}

#countdown{
  display: inline-block;
  color:#4abc34;
}

.icons{
  float:right;
  width:calc(100% - 180px);
  color:#fff;
  font-size:30px;
  text-align:right;
}

.button{
  clear:both;
  margin:20px auto 10px;
  max-width:400px;
}

button{
  width:100%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  border: 1px solid #40AB2B;
  width:100%;
  height:60px;
  border-radius:5px;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-shadow:0 -1px 1px rgba(0,0,0,0.4);
  background-color: #62D94B; background-image: -webkit-gradient(linear, left top, left bottom, from(#62D94B), to(#51C43A));
    background-image: -webkit-linear-gradient(top, #62D94B, #51C43A);
    background-image: -moz-linear-gradient(top, #62D94B, #51C43A);
    background-image: -ms-linear-gradient(top, #62D94B, #51C43A);
    background-image: -o-linear-gradient(top, #62D94B, #51C43A);
    background-image: linear-gradient(to bottom, #62D94B, #51C43A);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#62D94B, endColorstr=#51C43A);
    cursor:pointer;
}

button:hover{
  cursor:pointer;
}

button:active, button:focus{
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  border: 1px solid #40AB2B;
  width:100%;
  height:60px;
  border-radius:5px;
  color:#fff;
  font-size:20px;
  font-weight:bold;
  text-shadow:0 -2px 1px rgba(0,0,0,0.4);
background-color: #51C43A; background-image: -webkit-gradient(linear, left top, left bottom, from(#51C43A), to(#62D94B));
    background-image: -webkit-linear-gradient(top, #51C43A, #62D94B);
    background-image: -moz-linear-gradient(top, #51C43A, #62D94B);
    background-image: -ms-linear-gradient(top, #51C43A, #62D94B);
    background-image: -o-linear-gradient(top, #51C43A, #62D94B);
    background-image: linear-gradient(to bottom, #51C43A, #62D94B);
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#51C43A, endColorstr=#62D94B);
  cursor:pointer;

}

@media only screen and (min-width: 380px) {

}

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

}