@import url(navbar.css);
@import url(stylesheet.css);
@import url(../fonts/font-awesome/css/font-awesome.min.css);
@import url(animate.min.css);
@import url('https://fonts.googleapis.com/css?family=Roboto');

body{
    background: #f4f4f4;
    font-family: 'Roboto', sans-serif;
    font-weight:500;
}
.counter h3{
    color:#fff;
}
p{
    font-weight:500;
    font-size:16px !important;
}
.btn{
    font-weight: 500 !important;
    font-size:16px !important;

}

.welcome{
    width:800px;
    max-width:100%;
    padding: 80px 40px;
}
.welcome h1{
    font-size:30px;
}
#faqDetails{
    padding: 80px 40px;
}

.pages-title h1{
    color:#fff;
}

/* PAGE BANNERS */

.main-banner{
    background-image: url("../img/banners/main-banner.jpg");
    height:300px;
}

/* ---------- END OF BANNERS -------------*/

/* TERMS */
.terms .section-title{
    text-align:left;
}
.terms .section-title h2{}
.terms .section-title h3{}
.terms .section-title hr.center{
    margin-left: 0px;
}
.terms .section-title p{}


/* CONTACT FORM */
.contact-form{
    text-align:center;
    width:500px;
    max-width:90%;
}
.contact-form input, .contact-form textarea{
    text-align:center;
}
.contact-form .btn{
    width:300px !important;
    max-width:100%;
    margin:30px auto;
    padding: 0.3rem 1.125rem;
    font-size: 14px;
    line-height: 2;
    color: #FFF;
    background-color: rgb(128, 247, 112);
    transition: 0.3s;
}
.contact-form .btn:hover{
    background: #c05353 !important;
    border: 2px solid #c05353  !important;
    color:#fff;
}

/* ---------- END OF CONTACT FORM -------------*/

/* SIGNUP FORM */
.signup-form{
    width: 80%;
    margin: auto;
    padding:60px;
    border-radius:20px;
    border: 1px solid rgba(30,30,30,.2);
    margin-top: 60px;
    margin-bottom: 100px;
}
.signup-form a{
    text-decoration:underline;
    color: #777;
}
/* ---------- END OF SIGNUP FORM -------------*/

/* FOOTER */
.signup-footer h4{
    color:#fff;
}
.signup-footer p{
    color:#fff;
}
.footer-links p{
    font-size:14px;
    margin-bottom:10px;
}

/* FAQ */
.panel-title{
    font-size: 16px;
    transition: 0.3s;
    background: #f4f4f4;
    border: 1px solid #595959;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
}


/* LOGIN FORM */
.login{
    width: 700px;
    max-width:90%;
    margin: auto;
    padding:60px;
    border-radius:20px;
    border: 1px solid rgba(30,30,30,.2);
    margin-top: 60px;
    margin-bottom: 100px;
    font-family: Aileron-Regular;
    text-align:center;
}
.login .btn{
    padding: 0.3rem 1.125rem;
    margin-top:1rem;
    font-size: 14px;
    line-height: 2;
    color: #FFF;
    background-color: rgb(128, 247, 112);
    transition: 0.3s;
}
.login .btn:hover{
    background: #c05353 ;
    border: 2px solid #c05353 ;
    color:#fff;
}
.login .btn-primary:focus{
    background: #c05353 ;
    border: 2px solid #c05353 ;
    color:#fff;
    box-shadow:none;
}
.login .form-control{
    width:350px;
    margin:0 auto;
    max-width:100%;
    text-align:center;
}
.login .text-muted{
    font-size:14px;
    margin-top:20px;
}
.login label{
    font-size: 0.85rem;
    font-family: Aileron-Heavy;
    color: #4d4d4d;
}
.pumpone{
    border: 1px solid rgba(150, 150, 150, 0.1);
    width:1000px !important;
    max-width:100%;
    margin:0 auto;
}
.hub-mobile{
    display:none;
}
.pumpone-mobile{
    width:700px;
    max-width: 90%;
    margin: auto;
    padding:50px 20px;
    border-radius:20px;
    border: 1px solid rgba(30,30,30,.2);
    margin-top: 60px;
    margin-bottom: 100px;
    text-align:center;
}

.thumb-container{
    width:500px;
    max-width:100%;
    margin:0 auto;
}
.thumb{
    width:100%;
    text-align:center;
    margin:0 auto;
    transition-duration: .3s;
}
.thumb:hover{
    transform:scale(1.1);
}
.thumb img{
    width:150px;
    max-width:100%;
}

/* ---------- END OF LOGIN FORM -------------*/

/* CAROUSEL */
hr{
    border-top: 1px solid rgba(250,250,250,.7);
}



/* ---------- END OF FOOTER -------------*/

/* Media Queries */
@media screen and (max-width:1200px){
    .hub-container{
        display:none;
    }
    .hub-mobile{
        display:block;
    }
}

@media screen and (max-width:1024px){
    .signup-form{
        width:90%
    }
}
@media screen and (max-width:768px){
    .signup-form{
        padding:50px;
    }
    .main-banner{
        height:80px;
    }
    .carousel-caption{
        left:50%;
        padding:40px;
        width:80%;
    }
}
@media screen and (max-width:480px){
    .signup-form{
        padding:40px 20px;
    }
    .carousel-caption{
        left:50%;
        right:initial;
        bottom:initial;
        top:50%;
        padding:20px;
        padding-top:40px;
        padding-bottom:40px;
        width:90%;
    }
    .carousel-caption h4{
        font-size:18px;
        margin:10px auto;
    }
    .carousel-caption h5{
       
        margin:5px auto;
    }
    .welcome{
        width:800px;
        max-width:100%;
        padding: 40px 20px;
    }
    #faqDetails{
        padding: 40px 20px;
    }
    .panel-title > a{
        padding: 15px 5px;
    }
}

#modalPopUp{
    display:none;
}
.modal{
    background: rgba(30,30,30,.3);
}
.modal-dialog{
    width:400px;
    max-width:100%;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%) !important;
    margin:0px;
}

.modal h5{
    color:dodgerblue;
    font-size:25px;
}

.modal .btn{
    border:0px;
    color:#fff;
}

.startChat:hover{
    cursor:pointer;
}
h4 a{
    color:#fff;
}

.uiButton{
    max-width:300px !important;
    font-size:20px !important;
}
.btn-default{
    background:dodgerblue;
}
.btn-default:hover{
    background:rgb(59, 157, 255);
}
.modal-body .form-control{
    padding:10px;
    background:transparent;
}
.modal-body .finishmessage{
    padding: 10px;
    font-size: 60%;
    color: rgb(45, 154, 158);
}
.modal-body #form_name, .modal-body #form_message{
    display:none !important;
}