*{
  margin:0 0 0 0;
  padding: 0 0 0 0;
  webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body{
  font-family: "proxima-nova", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
  color:#444;
  min-width: 600px;
  background-image: linear-gradient(to top, #7278fa 0%, #5fbefb 100%);
  min-height: 100vh;
}

@-webkit-keyframes animation-rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes animation-rotate {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes animation-rotate {
  100% {
    -o-transform: rotate(360deg);
  }
}
@keyframes animation-rotate {
  100% {
    transform: rotate(360deg);
  }
}

.button--loading {
  position: relative;
  cursor: wait;
  color:transparent !important;
}
.button--loading:before {
  margin: -13px 0 0 -13px;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  content: '';
  -webkit-border-radius: 24px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 24px;
  -moz-background-clip: padding;
  border-radius: 24px;
  background-clip: padding-box;
  border: rgba(255, 255, 255, 0.25) 2px solid;
  border-top-color: #fff;
  -webkit-animation: animation-rotate 750ms linear infinite;
  -moz-animation: animation-rotate 750ms linear infinite;
  -o-animation: animation-rotate 750ms linear infinite;
  animation: animation-rotate 750ms linear infinite;
}
.button--loading span,
.button--loading:hover span,
.button--loading:active span {
  color: transparent;
  text-shadow: none;
}

#wrapper{
  display: block;
  width: 70%;
  min-width: 650px;
  max-width: 850px;
  margin: 0 auto;
}

#nav{
  width: 100%;
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 50px;
}

#nav .left{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#nav .left a{
  text-decoration: none;
}

#nav .left .logo{
  height: 40px;
  width: 40px;
  background: url('../image/logocircle-w.png') no-repeat;
  background-size: cover;
  background-position: center;

}

#nav .left .logo::before{
  content: "YUGO";
  font-family: 'Montserrat', sans-serif;
  height: 40px;
  line-height: 40px;
  margin-left: 50px;
  color:#fff;
}

#nav .right{
  display: flex;
  justify-content: flex-end;
  vertical-align: middle;
  align-items: center;
}

#nav .right a{
  text-decoration: none;
}

#nav .right .user{
  position: relative;
  display: flex;
  vertical-align: middle;
  align-items: center;
  color:#fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#nav .right .user .avatar{
  height: 40px;
  width: 40px;
  background: #fff;
  border-radius: 90px;
  margin-right: 12px;
  background-position: center !important;
  background-size: cover !important;
  border:2px solid #fff;
}

#nav .right .user .menu_u{
  position: relative;
  top:50px;
  right:10px;
  z-index: 99;
  width: 220px;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

#status{
  display: block;
  margin-bottom: 20px;
}

#status .message{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding:14px 18px;
  border-radius: 4px;
  font-size: 0.9em;
  color:#fff;
  background: #fff;
}

#status .message .content{
  line-height: 1.45;
}

#status .message .close{
  line-height: 1 !important;
  font-size: 1.6em;
}

#status .success{
  color: rgba(35, 191, 104, 1);
  box-shadow: 0 0 0 2px rgba(35, 191, 104, 0.5);
}

#status .error{
  color: rgba(229, 103, 103, 1);
  box-shadow: 0 0 0 2px rgba(229, 103, 103, 0.5);
}

/* LANDING */
#landing{

}

#landing #whydrive{
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);

}

#landing #whydrive .header{
  display: flex;
  vertical-align: middle;
  align-items: center;
  padding:40px 30px 10px 30px;
  text-align: center;
  justify-content: center;
}

#landing #whydrive .header .title{
  font-weight: 300;
  font-size: 1.4em;
  color:#999;
  text-align: center;
}

#landing #whydrive .grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:30px;
  margin-bottom: 10px;
}

#landing #whydrive .grid .item{
  display: flex;
  width: 50%;
  justify-content: flex-start;
  vertical-align: middle;
  align-items: center;
  height: 60px;
  padding:30px;
  margin-bottom: 20px;
}

#landing #whydrive .grid .item .icon{
  font-size:3em;
  line-height: 1;
  margin-right: 30px;
  margin-top: 3px;
  color:#707efb;
}

#landing #whydrive .grid .item .content{
  line-height: 1.5;
  font-weight: 300;
}

#landing #whydrive .footer{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: space-between;
  padding:30px;
  background: #f9f9f9;

}

#landing #whydrive .footer .title{
  font-weight: 200;
  font-size: 1.4em;
  line-height: 1;
}

#landing #whydrive .footer a{
  text-decoration: none;
}

#landing #whydrive .footer .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #3b5998;
  padding:20px 28px;
  border-radius: 4px;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#landing #whydrive .footer .button:hover{
  cursor: pointer;
  background: #707efb;
}

#landing #whydrive .footer .button .icon{
  height: 24px;
  width: 24px;
  background: url('../image/facebook-w.png') no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 16px;
}

#landing #yourtickets{
  display: block;
  margin-bottom: 40px;
}

#landing #yourtickets .title{
  color:rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  font-size: 0.9em;
  margin-bottom: 15px;
}

#landing #yourtickets .ticket{
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding:20px;
  vertical-align: middle;
  align-items: center;
  margin-bottom: 10px;
}

#landing #yourtickets .ticket .left{
  display: flex;
  vertical-align: middle;
  align-items: center;
  font-size: 1.1em;
}

#landing #yourtickets .ticket .left .icon{
  margin: 0 10px;
  line-height: 1em;
  margin-top: 2px;
}

#landing #yourtickets .ticket .left .time{
  color:#999;
  margin-left: 20px;
}

#landing #yourtickets .ticket .right a{
  text-decoration: none;
}

#landing #yourtickets .ticket .right{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#landing #yourtickets .ticket .right .riders{
  font-size: 0.9em;
  margin-right: 20px;
}

#landing #yourtickets .ticket .right .pending{
  font-size: 0.9em;
  margin-right: 20px;
}

#landing #yourtickets .ticket .right .button{
  padding: 12px 18px;
  border-radius: 3px;
  background:#55b2fa;
  color:#fff;
  font-size:0.9em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

#landing #yourtickets .ticket .right .button:hover{
  cursor: pointer;
  background:#707efb;
}

#landing #yourrides .ride{
  display: flex;
  justify-content: space-between;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding:20px;
  vertical-align: middle;
  align-items: center;
  margin-bottom: 10px;
}

#landing #yourrides .title{
  color:rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  font-size: 0.9em;
  margin-bottom: 15px;
}

#landing #yourrides .ride .left{
  display: flex;
  vertical-align: middle;
  align-items: center;
  font-size: 1.1em;
}

#landing #yourrides .ride .left .icon{
  margin: 0 10px;
  line-height: 1em;
  margin-top: 2px;
}

#landing #yourrides .ride .left .time{
  color:#999;
  margin-left: 20px;
}

#landing #yourrides .ride .right a{
  text-decoration: none;
}

#landing #yourrides .ride .right{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#landing #yourrides .ride .right .riders{
  font-size: 0.9em;
  margin-right: 20px;
}

#landing #yourrides .ride .right .pending{
  font-size: 0.9em;
  margin-right: 20px;
}

#landing #yourrides .ride .right .button{
  padding: 12px 18px;
  border-radius: 3px;
  background:#707efb;
  color:#fff;
  font-size:0.9em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

#landing #yourrides .ride .right .button:hover{
  cursor: pointer;
  background: #55b2fa;
}

#landing #findride{
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

#landing #findride #bar{
  display: flex;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  justify-content: space-between;
}

#landing #findride #bar .search{
  font-size: 1em;
   background:#707efb;
   color:#fff;
   margin: 10px;
   padding: 0 40px;
   border:none;
   border-radius: 4px;
   width: 20%;
}

#landing #findride #bar .search:hover{
  cursor: pointer;
  background: #55b2fa;
}

#landing #findride #bar .block{
  width: 40%;
}

#landing #findride #bar .from{
  border-right:1px solid #e2e2e2;
}

#landing #findride #bar .block .text{
  display: block;
  width: 100%;
  margin: 0 20px;
  margin-top: 20px;
}

#landing #findride #bar .block input{
  display: block;
  width: 100%;
  padding:0 20px;
  padding-bottom: 15px;
  border:none;
  border-bottom: 2px solid #fff;
  outline: none;
  font-size: 1.1em;
  padding-top:10px;

}

#landing #findride #bar .block input:focus{
  border-color: #707efb;
}

#promo_seen_on{
  margin-top: 60px;
  margin-bottom: 60px;
}

#promo_seen_on .title{
  color:rgba(255, 255, 255, 0.9);
  text-align: center;
}

#promo_seen_on .logos{
  display: flex;
  justify-content: center;
  text-align: center;
  margin-top:20px;
}

#promo_seen_on .logos img{
  opacity: 0.6;
}

#promo_facebook{
  display: flex;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  margin-top: 30px;
}

#promo_facebook .left{
  min-width: 45%;
  background: url('../image/facebook_share_leader.png') no-repeat;
  height: 400px;
  background-size: 100% auto;
  background-position: 0 50px;
  margin-top: -30px;
  margin-left: 5%;
}

#promo_facebook .right{
  min-width: 30%;
  margin-right: 5%;
  margin-left: 20px;
}

#promo_facebook .right .title{
  font-size: 2em;
  font-weight: 300;
  margin-bottom: 10px;
  line-height: 1.3;
}

#promo_facebook .right .des{
  color:#999;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.45;
}

#promo_payments{
  display: flex;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  margin-top: 30px;
  overflow: hidden;
}

#promo_payments .left{
  min-width: 45%;
  background:rgba(0, 0, 0, 0) url('../image/payments_leader.png') no-repeat;
  height: 400px;
  background-size: 100% auto;
  background-position: 0 50px;
  margin-top: -30px;
  margin-right: 5%;
  /*box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);*/
}

#promo_payments .right{
  min-width: 30%;
  margin-left: 5%;
  margin-right: 20px;
}

#promo_payments .right .title{
  font-size: 2em;
  font-weight: 300;
  margin-bottom: 10px;
  line-height: 1.3;
}

#promo_payments .right .des{
  color:#999;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.45;
}

#promo_notifications{
  display: flex;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  margin-top: 30px;
}

#promo_notifications .left{
  min-width: 45%;
  background: url('../image/notifications_leader.png') no-repeat;
  height: 400px;
  background-size: 100% auto;
  background-position: 0 50px;
  margin-top: -30px;
  margin-left: 5%;
}

#promo_notifications .right{
  min-width: 30%;
  margin-right: 5%;
  margin-left: 20px;
}

#promo_notifications .right .title{
  font-size: 2em;
  font-weight: 300;
  margin-bottom: 10px;
  line-height: 1.3;
}

#promo_notifications .right .des{
  color:#999;
  font-size: 1.1em;
  font-weight: 300;
  line-height: 1.45;
}

#promo_cta{
  display: block;
  text-align: center;

  width: 100%;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
  margin-top: 45px;
}

#promo_cta .title{
  color:#fff;
  font-weight: 200;
  font-size: 1.8em;
}

#promo_cta a{
  text-decoration: none;
}

#promo_cta .button{
  display: inline-flex;
  width: auto;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  color: #3b5998;
  padding:10px 12px;
  border-radius: 4px;
  font-size: 1em;
  background:#fff;
  font-weight: 400;
  text-align: center;
  margin-top: 20px;
}

#promo_cta .button:hover{
  cursor: pointer;
  color: #0f43b8;
}

#promo_cta .button .icon{
  height: 24px;
  width: 24px;
  background: url('../image/facebook.png') no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 15px;
}

#profile{
  display: block;
}

#profile #header{
  display: flex;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding:30px;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
}

#profile #header .left{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#profile #header .left .avatar{
  height: 80px;
  width: 80px;
  border-radius: 90px;
  background-size: cover !important;
  background-position: center !important;
  margin-right: 20px;
}

#profile #header .left .con{

}

#profile #header .left .con .name{
  font-size: 1.2em;
  color:#222;
  margin-bottom: 3px;
}

#profile #header .left .con .rating{
  font-size: 1em;
  color:#999;
}

#profile #header .right{
  display: flex;
  vertical-align: middle;
  align-items: center;
  font-size: 1.5em;
  font-weight: 300;
  color:#999;
}

#profile #header .right .drives{
  margin-right: 30px;
}

#profile #header .right .rides{

}

#ride_page{

}

#ride_page #driver{
  display: flex;
  width: 100%;
  background: #f9f9f9;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding:30px;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
}

#ride_page #driver .left{

}

#ride_page #driver .left .user{
  display: flex;
  justify-content: flex-start;
  vertical-align: middle;
  align-items: center;
}

#ride_page #driver .left .user .avatar{
  height: 70px;
  width: 70px;
  background: #ddd;
  margin-right: 14px;
  border-radius: 90px;
  background-size: cover !important;
  background-position: center !important;
}

#ride_page #driver .left .user .name{
  font-size: 1.1em;
  line-height: 1;
}

#ride_page #driver .left .user .name .phone{
  color:#999;
  font-size: 0.9em;
  margin-top: 5px;
}

#ride_page #driver .left .user .name .rating{
  display: flex;
  margin-top: 5px;
}

#ride_page #driver .left .user .name .rating .star-y{
  display: inline-block;
  height: 14px;
  width: 14px;
  background: url('../image/star-y.png') no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 4px;
}

#ride_page #driver .left .user .name .rating .star-n{
  display: inline-block;
  height: 14px;
  width: 14px;
  background: url('../image/star-n.png') no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 4px;
}

#ride_page #driver .left .user .facebook{
  height: 24px;
  width: 24px;
  background: url('../image/facebook.png') no-repeat;
  background-size: cover;
  background-position: center;
  margin-left: 40px;
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  opacity: 0.6;
  border-radius: 5px;
}

#ride_page #driver .left .user .facebook:hover{
  opacity: 1;
  cursor: pointer;
  -webkit-filter: grayscale(0);
  filter: none;
}

#ride_page #driver .left .user a{
  text-decoration: none;
}

#ride_page #driver .left .user .facebook-friends{
  color:#aaa;
  font-size: 0.8em;
  margin-left: 10px;
}


#ride_page #driver .right{

}

#ride_page #driver .right a{
  text-decoration: none;
}

#ride_page #driver .right .cancel{
  color:#888;
  font-weight: 400;
  font-size: 0.9em;
  text-decoration: underline;
}

#ride_page #driver .right .cancel:hover{
  color:#e26f6f;
}

#ride_page #driver .right .grey{
  background: #999 !important;
}

#ride_page #driver .right .red{
  background: #dc5151 !important;
}

#ride_page #driver .right .green{
  background: #3ED783 !important;
}

#ride_page #driver .right .button{
  background: #6473f9;
  border-radius: 4px;
  color:#fff;
  font-weight: 400;
  padding:18px 35px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
  text-decoration: none;

}

#ride_page #driver .right .button:hover{
  cursor: pointer;
  background: #64a0f9;
}

#ride_page #ride{
  display: block;
  position: relative;
  width: 100%;
  background: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding:30px;
  border-bottom: 1px dashed #d9d9d9;
}

#ride_page #ride .top{
  display: flex;
  justify-content: space-between;
}

#ride_page #ride .top .left{

}

#ride_page #ride .top .left .location{
  display: flex;
  vertical-align: middle;
  align-items: center;
  font-size: 2em;
  line-height: 1;
  font-weight: 300;
}

#ride_page #ride .top .left .details{
  display: flex;
  color:#999;
  font-size: 1.2em;
  margin-top: 5px;
  font-weight: 300;
}

#ride_page #ride .top .left .details .date{
  margin-right: 10px;
}

#ride_page #ride .top .left .details .time{

}

#ride_page #ride .top .left .details .seats::before{
  content:"•";
  padding-right: 20px;
  padding-left:20px;
  color:#ccc;
}

#ride_page #ride .top .left .details .seats{
  margin-right: 20px;
  color:#
}

#ride_page #ride .top .left .location .icon{
  display: inline-block;
  margin:0 18px;
  padding-top: 5px;
}

#ride_page #ride .top .right{
  text-align: right;
  font-size: 3em;
  font-weight: 200;
  color:#3ED783;
  line-height: 1;
}

#ride_page #ride .meta{
  margin-top: 25px;
  font-size: 0.9em;
}

#ride_page #ride .meta .pick-up{
  margin-bottom: 7px;
}

#ride_page #ride .meta .drop-off{

}

#ride_page #ride .bottom{

}

#ride_page #confirm_payout{
  display: block;
  margin-bottom: 40px;
}


#ride_page #confirm_payout .title{
  display: block;
  width: 100%;
  color:rgba(0,0,0,0.5);
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
  margin-top: 35px;
}

#ride_page #confirm_payout .form{
  display: flex;
  vertical-align: middle;
  align-items: center;
  width: 100%;
  padding:30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

#ride_page #confirm_payout .form .icon{
  font-size: 2.8em;
  line-height: 1;
  margin-right: 30px;
  color:#999;
}

#ride_page #confirm_payout .form .content{
  display: flex !important;
  justify-content: space-between;
  width: 100%;
}

#ride_page #confirm_payout .form .content .left{
  display: flex !important;
  justify-content: space-between;
  width: 100%;
}

#ride_page #confirm_payout .form .content .left label{
  color:#999;
  font-size: 0.9em;
}

#ride_page #confirm_payout .form .content .left input{
  display: block;
  width: 100%;
  padding:10px 0;
  border:none;
  border-bottom: 2px solid #e2e2e2;
  font-size: 1em;
  outline: none;
}

#ride_page #confirm_payout .form .content .left input:focus{
  border-color: #6473f9;
}

#ride_page #confirm_payout .form .content .left .email{
  width: 35%;
  margin-right: 10px;
}

#ride_page #confirm_payout .form .content .left .phone{
  width: 35%;
  margin-right: 10px;
}

#ride_page #confirm_payout .form .content .left .country{
  width: 30%;
}

#ride_page #confirm_payout .form .content .right{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#ride_page #confirm_payout .form .content .right .button{
  color:#fff;
  margin-left: 20px;
  background: #6473f9;
  padding:18px;
  border-radius: 4px;
  font-size: 0.9em;
  border:none;
}

#ride_page #confirm_payout .form .content .right .button:hover{
  background: #64a0f9;
  cursor: pointer;
}
#ride_page #confirm_payout .secure{
  display: flex;
  width: 100%;
  vertical-align: middle;
  align-items: center;
  color:rgba(255, 255, 255, 0.9);
  font-size: 0.85em;
  margin-bottom: 16px;
}

#ride_page #confirm_payout .secure a{
  text-decoration: underline;
  text-decoration-color: #fff;
  color:#fff;
  margin: 0 5px;
}

#ride_page #confirm_payout .secure .icon{
  margin-right: 8px;
  line-height: 1;
}

#ride_page #transfer_payment{
  display: block;
  margin-bottom: 40px;
}

#ride_page #transfer_payment .title{
  display: block;
  width: 100%;
  color:rgba(0,0,0,0.5);
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 15px;
  margin-top: 35px;
}

#ride_page #transfer_payment .form{
  display: flex;
  vertical-align: middle;
  align-items: center;
  width: 100%;
  padding:30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

#ride_page #transfer_payment .pending{
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

#ride_page #transfer_payment .form .icon{
  font-size: 2.8em;
  line-height: 1;
  margin-right: 30px;
  color:#999;
}

#ride_page #transfer_payment .form .content{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  width: 100%;
}

#ride_page #transfer_payment .form .content .left{
  display: flex;
  vertical-align: middle;
  align-items: center;
  font-size: 1.4em;
  font-weight: 300;
}

#ride_page #transfer_payment .form .content .left b{
  color: #30c772;
  font-weight: 300;
  margin-left: 7px;
}

#ride_page #transfer_payment .form .content .right{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#ride_page #transfer_payment .form .content .right .button{
  padding: 16px 18px;
  background: #30c772;
  border-radius: 3px;
  font-size: 0.9em;
  color:#fff;
}

#ride_page #transfer_payment .form .content .right .button:hover{
  cursor: pointer;
  background: #46b14d;
}

#ride_page #other_seats{
  display: block;
  width: 100%;
}

#ride_page #other_seats .title{
  display: block;
  width: 100%;
  color:rgba(0,0,0,0.5);
  font-size: 0.9em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 25px;
  margin-top: 35px;
}

#ride_page #other_seats .share_message{
  margin: 30px 0;
  padding:30px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

#ride_page #other_seats .share_message .text{
  color:#111;
  font-weight: 300;
  font-size: 1.4em;
  margin-bottom: 20px;
}

#ride_page #other_seats .share_message .share{
  display: flex;
  font-size: 0.9em;
}

#ride_page #other_seats .share_message .share .facebook{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #3b5998;
  padding:10px 12px;
  border-radius: 4px;
  font-size: 1em;
  color:#fff;
  font-weight: 400;
  text-align: center;
  margin-right: 15px;
}

#ride_page #other_seats .share_message .share .facebook:hover{
  cursor: pointer;
  background: #0f43b8;
}

#ride_page #other_seats .share_message .share .facebook .icon{
  height: 24px;
  width: 24px;
  background: url('../image/facebook-w.png') no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 16px;
}

#ride_page #other_seats .share_message .share .messenger{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #1787fb;
  padding:10px 12px;
  border-radius: 4px;
  font-size: 1em;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#ride_page #other_seats .share_message .share .messenger:hover{
  cursor: pointer;
  background: #0f43b8;
}

#ride_page #other_seats .share_message .share .messenger .icon{
  height: 24px;
  width: 24px;
  background: url('../image/messenger-w.png') no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 16px;
}

#ride_page #other_seats .share_message input{
  padding:10px 12px;
  font-size: 1em;
  border-radius: 3px;
  border:none;
  outline: none;
  width: 260px;
  background: #f1f1f1;
  margin-right: 15px;
}

#ride_page #other_seats .share_message input:focus{
  background: #e9e9e9;
}

#ride_page #other_seats .cards{
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#ride_page #other_seats .cards .rider{
  background: #fff;
  width: 31.5%;
  margin-right: 1.533%;
  padding:30px;
  border-radius: 3px;
  text-align: center;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

#ride_page #other_seats .cards .rider .avatar{
  display: block;
  height: 90px;
  width: 90px;
  border-radius: 90px;
  background: #e2e2e2;
  margin: 0 auto;
  margin-bottom: 10px;
}

#ride_page #other_seats .cards .rider .name{

}

#ride_page #other_seats .cards .rider .phone{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  color:#888;
  margin-top: 10px;
  font-size: 0.9em;
}

#ride_page #other_seats .cards .rider .phone .icon{
  line-height: 1;
  margin-right: 10px;
  margin-top: 1px;
}

#ride_page #other_seats .cards .rider .cancel_ride{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  color:#888;
  text-decoration: underline;
  margin-top: 10px;
  font-size: 0.9em;
}

#ride_page #other_seats .cards .rider .cancel_ride:hover{
  cursor: pointer;
  color:#e26f6f;
}

#ride_page #other_seats .cards .rider .deets{
  display: flex;
  margin-top: 15px;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}

#ride_page #other_seats .cards .rider .deets a{
  text-decoration: none;
}

#ride_page #other_seats .cards .rider .deets .facebook{
  height: 24px;
  width: 24px;
  border-radius: 4px;
  background: url('../image/facebook.png') no-repeat;
  background-size: cover;
  background-position: center;
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  opacity: 0.6;
  border-radius: 5px;
  margin-right: 10px;
  }

#ride_page #other_seats .cards .rider .deets .facebook:hover{
  opacity: 1;
  cursor: pointer;
  -webkit-filter: grayscale(0);
  filter: none;
}

#ride_page #other_seats .cards .rider .deets .mutual{
  font-size: 0.85em;
  line-height: 1;
  color:#888;
}

#ride_page #other_seats .cards .rider .actions{
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

#ride_page #other_seats .cards .rider .actions .button{
    padding:7px 18px 5px 18px;
  border-radius: 3px;
  color:#fff;
  font-size: 0.9em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#ride_page #other_seats .cards .rider .actions .button .icon{
  font-size: 1.6em;
  line-height: 1;
}

#ride_page #other_seats .cards .rider .actions a{
  text-decoration: none;
  display: inline-block;
}

#ride_page #other_seats .cards .rider .actions .deny{
  width: 38%;
  background: #f35051;
}

#ride_page #other_seats .cards .rider .actions .deny:hover{
  cursor: pointer;
  background: #ca2627;
}

#ride_page #other_seats .cards .rider .actions .approve{
  width: 58%;
  background: #30c772;
}

#ride_page #other_seats .cards .rider .actions .approve:hover{
  cursor: pointer;
  background: #46b14d;
}

#create_ride_page{

}

#create_ride_page .form{
  background: #fff;
  border-radius: 4px;
}

#create_ride_page .form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #bbb;
}

#create_ride_page .form ::-moz-placeholder { /* Firefox 19+ */
  color: #bbb;
}

#create_ride_page .form :-ms-input-placeholder { /* IE 10+ */
  color: #bbb;
}

#create_ride_page .form :-moz-placeholder { /* Firefox 18- */
  color: #bbb;
}

#create_ride_page .form .header{
  padding:40px;
}

#create_ride_page .form .title{
  font-size: 1.8em;
  font-weight: 200;
  margin-bottom:5px;
}

#create_ride_page .form .des{
  color:#999;
  font-weight: 300;
  font-size: 1.1em;
}

#create_ride_page .form .ride{
  display: block;
  position: relative;
  width: 100%;
  background: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding:40px;
  border-top: 1px dashed #d9d9d9;
  border-bottom: 1px dashed #d9d9d9;
}

#create_ride_page .form .ride .instructions{
  display: block;
  color:#bbb;
  font-size: 0.9em;
  margin-bottom: 25px;
  text-transform: uppercase;
}

#create_ride_page .form .ride .top{
  display: flex;
  justify-content: space-between;
}

#create_ride_page .form .ride .red{
  background: #ffcece !important;
}

#create_ride_page .form .ride .top .left{

}

#create_ride_page .form .ride .top .left .location{
  display: flex;
  vertical-align: middle;
  align-items: center;
  font-size: 2em;
  line-height: 1;
  font-weight: 300;
}

#create_ride_page .form .ride .top .left .location input{
  font-size: 1em;
  line-height: 1;
  font-weight: 300;
  border:none;
  background: #f9f9f9;
  padding:10px;
  margin: 0;
  width: 200px;
  outline: none;
}

#create_ride_page .form .ride .top .left .location input:focus{
  background: #e2e2e2;
}

#create_ride_page .form .ride .top .left .details{
  display: flex;
  color:#999;
  font-size: 1.2em;
  margin-top: 10px;
  font-weight: 300;
}

#create_ride_page .form .ride .top .left .details input{
  color:#999;
  font-size: 1em;
  margin-right: 10px;
  font-weight: 300;
  width: 140px;
  border:none;
  background: #f9f9f9;
  padding:10px;
  margin: 0;
  outline: none;
}

#create_ride_page .form .ride .top .left .details input:focus{
  background: #e2e2e2;
}

#create_ride_page .form .ride .top .left .details .date{
  margin-right: 10px;
}

#create_ride_page .form .ride .top .left .details .time{

}

#create_ride_page .form .ride .top .left .details .seats::before{
  content:"•";
  padding-right: 20px;
  padding-left:20px;
  color:#ccc;
}

#create_ride_page .form .ride .top .left .details .seats{
  margin-right: 20px;
  color:#
}

#create_ride_page .form .ride .top .left .details .seats input{
  color:#999;
  font-size: 1em;
  margin-right: 10px;
  font-weight: 300;
  width: 50px;
  border:none;
  background: #f9f9f9;
  padding:10px;
  margin: 0;
  outline: none;
}

#create_ride_page .form .ride .top .left .details .seats input:focus{
  background: #e2e2e2;
}

#create_ride_page .form .ride .top .left .location .icon{
  display: inline-block;
  margin:0 18px;
  padding-top: 5px;
}

#create_ride_page .form .ride .top .right{
  position: relative;
  text-align: right;
  font-size: 3em;
  font-weight: 200;
  color:#3ED783;
  line-height: 1;
}

#create_ride_page .form .ride .top .right input{
  font-size: 1em;
  border:none;
  background: #f9f9f9;
  padding:10px 10px 6px 10px;
  margin: 0 0 0 5px;
  width: 90px;
  outline: none;
  color:#3ED783;
  line-height: 1 !important;
  font-weight: 200;
}

#create_ride_page .form .ride .top .right input:focus{
  background: #e2e2e2;
}

#create_ride_page .form .ride .top .right .helper{
    position: absolute;
    padding:10px;
    border-radius: 4px;
    right:-160px;
    top:20px;
    font-size: 0.3em;
    font-weight: 400;
    color:rgba(255, 255, 255, 0.75);
}

#create_ride_page .form .ride .meta{
  margin-top: 25px;
  font-size: 0.9em;
}

#create_ride_page .form .ride .meta input{
  color:#999;
  font-size: 1em;
  margin-right: 10px;
  font-weight: 300;
  width: 300px;
  border:none;
  background: #f9f9f9;
  padding:10px;
  margin: 0;
  outline: none;
}

#create_ride_page .form .ride .meta input:focus{
  background: #e2e2e2;
}

#create_ride_page .form .ride .meta .pick-up{
  margin-bottom: 7px;
}

#create_ride_page .form .ride .meta .drop-off{

}

#create_ride_page .form .ride .bottom{

}

#create_ride_page .form .create{
  display: flex;
  justify-content: space-between;
  padding:30px 40px;
  background: #f9f9f9;
}

#create_ride_page .form .create .left{
  display: flex;
  vertical-align: middle;
  align-items: center;
  color:#bbb;
  font-weight: 300;
}

#create_ride_page .form .create .right{
  display: flex;
  vertical-align: middle;
  align-items: center;
}

#create_ride_page .form .create .right .button{
  background: #6473f9;
  border-radius: 4px;
  color:#fff;
  font-weight: 400;
  padding:18px 35px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  font-size: 1em;
  border:none;

}

#create_ride_page .form .create .right .button:hover{
  cursor: pointer;
  background: #64a0f9;
}

#site_footer{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  margin-top: 70px;
  margin-bottom: 40px;
}

#site_footer .menu{
  text-align: center;
}

#site_footer .menu a{
  display: inline-block;
  margin: 0 15px;
  font-size: 0.8em;
  font-weight: 300;
  text-decoration: none;
  color:rgba(0, 0, 0, 0.5);
}

#site_footer .right{

}

#site_footer .right .facebook{
  height: 28px;
  width: 28px;
  background: url('../image/facebook-w.png') no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  opacity: 0.8;
}

#site_footer .right .facebook:hover{
  cursor: pointer;
  opacity: 1;
}


/* MODALS */

#modal_continue_with_facebook{

}

#modal_continue_with_facebook .title{
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4;
}

#modal_continue_with_facebook .des{
  color:#999;
  margin-top: 15px;
}

#modal_continue_with_facebook .des li{
  margin-bottom: 3px;
}

#modal_continue_with_facebook a{
  text-decoration: none;
}

#modal_continue_with_facebook .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #3b5998;
  padding:20px 28px;
  border-radius: 4px;
  margin-top: 25px;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#modal_continue_with_facebook .button:hover{
  cursor: pointer;
  background: #8b9dc3;
}

#modal_continue_with_facebook .button .icon{
  height: 24px;
  width: 24px;
  background: url('../image/facebook-w.png') no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 16px;
}

#modal_confirm_ticket{

}

#modal_confirm_ticket .title{
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4;
}

#modal_confirm_ticket .des{
  color:#999;
  margin-top: 15px;
}

#modal_confirm_ticket .des li{
  margin-bottom: 3px;
}

#modal_confirm_ticket #payment-form{
  margin-top:25px;
  background: #f6f7f8;
  padding:20px;
  border-radius: 3px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

#modal_confirm_ticket #payment-form .card{
  display: block;
  color:#999;
  text-transform: uppercase;
  font-size: 0.9em;
  margin-bottom: 10px;
}

#modal_confirm_ticket #payment-form .confirm_pay{
  display: flex !important;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  margin-top: 15px;
}

#modal_confirm_ticket #payment-form .confirm_pay .stripe{
  display: flex !important;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
  font-size: 0.8em;
  color: #0f753a;
}

#modal_confirm_ticket #payment-form .confirm_pay .stripe .icon{
  margin-right: 5px;
  margin-top: 2px;
}

#modal_confirm_ticket #payment-form button{
  display: inline-block;
  background: #3b5998;
  padding:16px 28px;
  border-radius: 4px;
  color:#fff;
  font-weight: 400;
  text-align: center !important;
  border:none;
  font-size: 1em;
}

#modal_confirm_ticket #submit_payment:hover{
  cursor: pointer;
  background:#43458B;
}

#modal_confirm_ticket #payment-form button:hover{
  cursor: pointer;
  background:#43458B;
}

#modal_confirm_ticket #payment-form button .icon{
  margin-left: 10px;
  margin-top: 2px;
  line-height: 1;
}

#modal_confirm_ticket form {
  width: 480px;
  margin: 20px auto;
  padding:20px;
  background: #f3f3f3;
  border-radius: 3px;
}

#modal_confirm_ticket .group {
  background: white;
  box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
              0 3px 6px 0 rgba(0,0,0,0.08);
  border-radius: 4px;
  margin-bottom: 20px;
}

#modal_confirm_ticket label {
  position: relative;
  color: #8898AA;
  font-weight: 300;
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  display: block;
}

#modal_confirm_ticket .group label:not(:last-child) {
  border-bottom: 1px solid #F0F5FA;
}

#modal_confirm_ticket label > span {
  width: 20%;
  text-align: right;
  float: left;
}

#modal_confirm_ticket .field {
  background: transparent;
  font-weight: 300;
  border: 0;
  color: #31325F;
  outline: none;
  padding-right: 10px;
  padding-left: 10px;
  cursor: text;
  width: 70%;
  height: 40px;
  float: right;
  font-size: 1em;
}

#modal_confirm_ticket .field::-webkit-input-placeholder { color: #CFD7E0; }
#modal_confirm_ticket .field::-moz-placeholder { color: #CFD7E0; }
#modal_confirm_ticket .field:-ms-input-placeholder { color: #CFD7E0; }

#modal_confirm_ticket button {
  display: block;
  background: #666EE8;
  color: white;
  box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
              0 3px 6px 0 rgba(0,0,0,0.08);
  border-radius: 3px;
  border: 0;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  padding: 16px;
  outline: none;
}

#modal_confirm_ticket button:focus {
  background: #555ABF;
}

#modal_confirm_ticket #modal_confirm_ticket button:active {
  background: #43458B;
}

#modal_confirm_ticket #modal_confirm_ticket button:hover{
  cursor: pointer !important;
  background: #555ABF !important;
}

#modal_confirm_ticket .outcome {
  float: left;
  width: 100%;
  padding-top: 8px;
  min-height: 24px;
  text-align: center;
}

#modal_confirm_ticket .success, .error {
  display: none;
  font-size: 13px;
}

#modal_confirm_ticket .success.visible, .error.visible {
  display: inline;
}

#modal_confirm_ticket .error {
  color: #E4584C;
}

#modal_confirm_ticket .success {
  color: #666EE8;
}

#modal_confirm_ticket .success .token {
  font-weight: 500;
  font-size: 13px;
}

#modal_confirm_ticket a{
  text-decoration: none;
}

#modal_confirm_ticket .secure{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  font-size: 0.95em;
  margin-top: 30px;
  color: #0c8043;
  line-height: 1;
}

#modal_confirm_ticket .secure .icon{
  line-height: 1;
  margin-right: 8px;
}


#modal_seat_pending_approval{

}

#modal_seat_pending_approval .title{
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4;
}

#modal_seat_pending_approval .des{
  color:#999;
  margin-top: 15px;
}

#modal_seat_pending_approval .des li{
  margin-bottom: 3px;
}

#modal_seat_pending_approval .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #30c772;
  padding:20px 28px;
  border-radius: 4px;
  margin-top: 25px;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#modal_seat_pending_approval .button:hover{
  cursor: pointer;
  background: #1d9050;
}

#modal_seat_approve_deny{

}

#modal_seat_approve_deny .title{
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4;
}

#modal_seat_approve_deny .des{
  color:#999;
  margin-top: 15px;
}

#modal_seat_approve_deny .des li{
  margin-bottom: 3px;
}

#modal_seat_approve_deny a{
  text-decoration: none;
}

#modal_seat_approve_deny .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #30c772;
  padding:20px 28px;
  border-radius: 4px;
  margin-top: 25px;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#modal_seat_approve_deny .button:hover{
  cursor: pointer;
  background: #1d9050;
}

#modal_cancel_ride{

}

#modal_cancel_ride .title{
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4;
}

#modal_cancel_ride .des{
  color:#999;
  margin-top: 15px;
}

#modal_cancel_ride .des li{
  margin-bottom: 3px;
}

#modal_cancel_ride a{
  text-decoration: none;
}

#modal_cancel_ride .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #db3f3f;
  padding:20px 28px;
  border-radius: 4px;
  margin-top: 25px;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#modal_cancel_ride .button:hover{
  cursor: pointer;
  background: #c22020;
}

#modal_cancel_your_ticket{

}

#modal_cancel_your_ticket .title{
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4;
}

#modal_cancel_your_ticket .des{
  color:#999;
  margin-top: 15px;
}

#modal_cancel_your_ticket .des li{
  margin-bottom: 3px;
}

#modal_cancel_your_ticket a{
  text-decoration: none;
}

#modal_cancel_your_ticket .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #db3f3f;
  padding:20px 28px;
  border-radius: 4px;
  margin-top: 25px;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#modal_cancel_your_ticket .button:hover{
  cursor: pointer;
  background: #c22020;
}

#modal_cancel_ride{

}

#modal_cancel_ride .title{
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4;
}

#modal_cancel_ride .des{
  color:#999;
  margin-top: 15px;
}

#modal_cancel_ride .des li{
  margin-bottom: 3px;
}

#modal_cancel_ride a{
  text-decoration: none;
}

#modal_cancel_ride .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #db3f3f;
  padding:20px 28px;
  border-radius: 4px;
  margin-top: 25px;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#modal_cancel_ride .button:hover{
  cursor: pointer;
  background: #c22020;
}

#modal_reserve_seat_with_phone{

}

#modal_reserve_seat_with_phone .title{
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4;
}

#modal_reserve_seat_with_phone .des{
  color:#999;
  margin-top: 15px;
}

#modal_reserve_seat_with_phone .des li{
  margin-bottom: 3px;
}

#modal_reserve_seat_with_phone a{
  text-decoration: none;
}

#modal_reserve_seat_with_phone input{
  padding:15px;
  border:1px solid #e2e2e2;
  border-radius: 3px;
  background: #f3f3f3;
  font-size: 1em;
  font-weight: 400;
  width: 100%;
  margin-top: 20px;
}

#modal_reserve_seat_with_phone button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  text-align: center !important;
}

#modal_reserve_seat_with_phone .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #30c772;
  padding:20px 28px;
  border-radius: 4px;
  margin-top: 15px;
  width: 100%;
  color:#fff;
  font-weight: 400;
  text-align: center;
  border:none;
  font-size: 1em;
  text-align: center !important;
}

#modal_reserve_seat_with_phone .button:hover{
  cursor: pointer;
  background: #1d9050;
}

#modal_transfer_funds{

}

#modal_transfer_funds .title{
  font-size: 1.6em;
  font-weight: 300;
  line-height: 1.4;
}

#modal_transfer_funds .des{
  color:#999;
  margin-top: 15px;
}

#modal_transfer_funds .des li{
  margin-bottom: 3px;
}

#modal_transfer_funds a{
  text-decoration: none;
}

#modal_transfer_funds .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  padding:20px 28px;
  border-radius: 4px;
  margin-top: 25px;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#modal_transfer_funds .button .icon{
  font-size: 1.8em;
  line-height: 1;
  margin-right: 15px;
  margin-top: 3px;
}

#modal_transfer_funds .active{
  background: #30c772;
}

#modal_transfer_funds .active:hover{
  cursor: pointer;
  background: #1d9050;
}

#modal_transfer_funds .grey{
  background: #999;
}

#modal_transfer_funds .grey:hover{
  cursor: pointer;
  background: #666;
}

#login{
  display: flex;
  justify-content: center;
  margin: 100px 0;
}

#login a{
  text-decoration: none;
}

#login .button{
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  background: #3b5998;
  padding:20px 28px;
  border-radius: 4px;
  margin-top: 25px;
  color:#fff;
  font-weight: 400;
  text-align: center;
}

#login .button:hover{
  cursor: pointer;
  background: #8b9dc3;
}

#login .button .icon{
  height: 24px;
  width: 24px;
  background: url('../image/facebook-w.png') no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 16px;
}

#stripeSetup{

}

#stripeSetup .header{
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  padding:30px;
}

#stripeSetup .header .title{
  font-size: 1.2em;
  margin-bottom: 8px;
}

#stripeSetup .header .des{
  font-size: 1em;
  color:#888;
  line-height: 1.45;
  font-weight: 300;
}

#stripeSetup .bank{
  margin-bottom: 30px;
}

#stripeSetup .bank .title{
  color:#fff;
  font-size: 1em;
  margin-bottom: 15px;
}

#stripeSetup .bank .form{
  background: #f1f1f1;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding:30px;
}

#stripeSetup .bank .form .input-group{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 30px;
  font-size: 1em;
}

#stripeSetup .bank .form .input-group .half{
  width: 48%;
}

#stripeSetup .bank .form label{
  display: block;
  width: 100%;
  margin-bottom: 8px;
  font-size:0.95em;
}

#stripeSetup .bank .form .tut{
  margin-top: 6px;
  font-size: 0.8em;
  color:#999;
}

#stripeSetup .bank .form input{
  display: block;
  padding:15px;
  outline: none;
  font-size: 1em;
  width:100%;
  border-radius: 3px;
  border:none;
  border:1px solid #e2e2e2;
  background: #fff;
}

#stripeSetup .bank .form .input-group input:focus{
  border-color:#555ABF;
}

#stripeSetup .bank .form .buttons{
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  align-items: center;
}

#stripeSetup .bank .form .buttons .help{
  width: 45%;
  font-size:0.8em;
  line-height: 1.45;
  color:#999;
}

#stripeSetup .bank .form .buttons .button{
  display: block;
  background: #666EE8;
  color: white;
  box-shadow: 0 7px 14px 0 rgba(49,49,93,0.10),
              0 3px 6px 0 rgba(0,0,0,0.08);
  border-radius: 3px;
  border: 0;
  font-size: 1em;
  font-weight: 400;
  padding: 16px;
  outline: none;
}

#stripeSetup .bank .form .buttons .button:hover{
  background: #555ABF;
  cursor: pointer;
}

#stripeSetup .bank .form .buttons .button:active {
  background: #43458B;
}

#stripeSetup .bank_success{
  background: #f1f1f1;
  border-radius: 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  padding:30px;
}