/*

[Core Stylesheet]

Project: PopForms - Material Design Modal Forms
Version: 1.1
Author : themelooks.com

[Table of Contents]

1. GENERAL STYLES
	- 1-1 MODAL

2. TOP NAVIGATION

3. BANNER AREA

4. LOGIN MODAL

5. SIGNUP MODAL

6. FORGOT MODAL

7. SUBSCRIBE MODAL

8. CONTACT MODAL

9. MEDIA QUERIES
	- 9-1 LARGE DEVICES, WIDE SCREENS
	- 9-2 MEDIUM DEVICES, DESKTOPS
	- 9-3 SMALL DEVICES, TABLETS
	- 9-4 EXTRA SMALL DEVICES, PHONES
	- 9-5 CUSTOM, IPHONE RETINA

10. HELPER CLASSES
    - 10-1 RESET GUTTER
*/

/*------------------------------------*\
    1. GENERAL STYLES
\*------------------------------------*/
.form-control::-webkit-input-placeholder {
    color: #fff;
}
.form-control::-moz-placeholder {
    color: #fff;
}
.form-control::-ms-input-placeholder {
    color: #fff;
}
.form-control.error {
    border-color: #ff5252;
}

.mdl-button {
	font-weight: 300;
}
a.mdl-button {
    border-bottom: none !important;
}
a.mdl-button i.fa {
    margin-right: 8px;
}
a.mdl-button--raised:focus:not(:active) {
    outline: 0;
}

.mdl-button--primary.mdl-button--primary.mdl-button--fab,
.mdl-button--primary.mdl-button--primary.mdl-button--raised {
    color: #fff;
    background-color: #ff5252;
}

.blog-item .mdl-card {
    z-index: auto !important;
}
.contact-form-submit-btn.btn-topmarg{
    margin-top: 15px;
}
.pop-attachment.mdl-textfield__input {
    padding-bottom: 22px;
}
.pop-chaptch.mdl-textfield__input {
    padding: 22px 0px;
}

#loginFormModal .mdl-textfield.is-invalid .mdl-textfield__input,
#signupFormModal .mdl-textfield.is-invalid .mdl-textfield__input,
#forgotFormModal .mdl-textfield.is-invalid .mdl-textfield__input,
#subscribeFormModal .mdl-textfield.is-invalid .mdl-textfield__input,
#contactFormModal .mdl-textfield.is-invalid .mdl-textfield__input {
    border-color: rgba(0, 0, 0, 0.12);
}

/* 1-1 MODAL */
#loginFormModal .modal-dialog,
#signupFormModal .modal-dialog,
#forgotFormModal .modal-dialog,
#subscribeFormModal .modal-dialog,
#contactFormModal .modal-dialog {
    width: auto;
    margin: 60px auto 30px;
    text-align: left;
}
#loginFormModal .modal-content,
#signupFormModal .modal-content,
#forgotFormModal .modal-content,
#subscribeFormModal .modal-content,
#contactFormModal .modal-content {
    background-color: transparent;
}
#loginFormModal button.close,
#signupFormModal button.close,
#forgotFormModal button.close,
#subscribeFormModal button.close,
#contactFormModal button.close {
    position: absolute;
    top: -10px;
    right: -20px;
    z-index: 39;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    color: #fff;
    font-size: 28px;
    line-height: 32px;
    font-weight: 100;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	outline: 0;
}
#loginFormModal button.close:hover,
#signupFormModal button.close:hover,
#forgotFormModal button.close:hover,
#subscribeFormModal button.close:hover,
#contactFormModal button.close:hover {
    background-color: transparent;
}

#forgotFormModal .message .alert {
    margin: 15px 15px 0;
    padding: 15px;
    margin-bottom: 0;
    border-radius: 0;
}
#subscribeFormModal .alert-box .alert,
#signupFormModal .alert-box .alert,
#contactFormModal .alert-box .alert {
    margin-bottom: 0;
    border-radius: 0;
    font-size: 16px;
    line-height: 20px;
}

/*------------------------------------*\
    4. LOGIN MODAL
\*------------------------------------*/
#loginFormModal {
    padding: 0 20px;
}
#loginFormModal .modal-dialog {
    max-width: 360px;
}
#loginFormModal .modal-content {
    background-color: transparent;
}

.loginForm .mdl-card {
    width: auto;
}
.loginForm .mdl-card__title {
    padding-top: 0;
}
.loginForm .mdl-card__title .modal--logo {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.loginForm .mdl-card__supporting-text {
    width: 100%;
    padding: 16px !important;
}

#loginForm input {
    padding: 4px 0;
    border-width: 0 0 1px;
    outline: 0;
}
#loginForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#loginForm input.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#loginForm .mdl-textfield {
    width: 100%;
}
.loginForm .mdl-card__actions {
    margin-top: 5px;
    padding: 8px !important;
}
.loginForm .mdl-card__actions a {
    display: block;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 18px;
    border: none;
    box-shadow: none;
}
#loginFormModal .loginForm .mdl-card__actions a {
    color: #737373;
    background-color: transparent;
}

/*------------------------------------*\
    5. SIGNUP MODAL
\*------------------------------------*/
#signupFormModal {
    padding: 0 20px;
}
#signupFormModal .modal-dialog {
    max-width: 360px;
}
#signupFormModal .modal-content {
    background-color: transparent;
}

.signupForm .mdl-card {
    width: auto;
}
.signupForm .mdl-card__title {
    padding-top: 0;
}
.signupForm .mdl-card__title .modal--logo {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.signupForm .mdl-card__supporting-text {
    width: 100%;
    padding: 16px !important;
}

#signupForm input {
    padding: 4px 0;
    border-width: 0 0 1px;
    outline: 0;
}
#signupForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#signupForm input.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#signupForm .mdl-textfield {
    width: 100%;
}
.signupForm .mdl-card__actions {
    margin-top: 5px;
    padding: 8px !important;
    padding-left: 15px !important;
}
.signupForm .mdl-card__actions p {
    color: #737373;
    margin-bottom: 0;
    margin-top: 8px;
}
.signupForm .mdl-card__actions a {
    display: block;
    margin-bottom: 0 !important;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 18px;
    border: none;
    box-shadow: none;
}
#signupFormModal .signupForm .mdl-card__actions a {
    color: #737373;
    background-color: transparent;
}

/*------------------------------------*\
    6. FORGOT MODAL
\*------------------------------------*/
#forgotFormModal {
    padding: 0 20px;
}
#forgotFormModal .modal-dialog {
    max-width: 360px;
}
#forgotFormModal .modal-content {
    background-color: transparent;
}

.forgotForm .mdl-card {
    width: auto;
}
.forgotForm .mdl-card__title {
    padding-top: 0;
}
.forgotForm .mdl-card__title .modal--logo {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.forgotForm .mdl-card__supporting-text {
    width: 100%;
    padding: 16px !important;
}

#forgotForm input {
    padding: 4px 0;
    border-width: 0 0 1px;
    outline: 0;
}
#forgotForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#forgotForm input.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#forgotForm .mdl-textfield {
    width: 100%;
}
.forgotForm .mdl-card__actions {
    margin-top: 5px;
    padding: 8px !important;
    padding-left: 15px !important;
}
.forgotForm .mdl-card__actions p {
    color: #737373;
    margin-bottom: 0;
    margin-top: 8px;
}
.forgotForm .mdl-card__actions a {
    display: block;
    margin-bottom: 0 !important;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 18px;
    border: none;
    box-shadow: none;
}
#forgotFormModal .forgotForm .mdl-card__actions a {
    color: #737373;
    background-color: transparent;
}

/*------------------------------------*\
    7. SUBSCRIBE MODAL
\*------------------------------------*/
#subscribeFormModal {
    padding: 0 20px;
}
#subscribeFormModal .modal-dialog {
    max-width: 360px;
}
#subscribeFormModal .modal-content {
    background-color: transparent;
}

.subscribeForm .mdl-card {
    width: auto;
    min-height: 0;
}
.subscribeForm .mdl-card__title {
    padding-top: 0;
}
.subscribeForm .mdl-card__title .modal--logo {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.subscribeForm .mdl-card__supporting-text {
    width: 100%;
}

#subscribeForm input {
    padding: 4px 0;
    border-width: 0 0 1px;
    border-color: rgba(0, 0, 0, .12) !important;
    outline: 0;
}
#subscribeForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373 !important;
    text-align: left !important;
}
#subscribeForm label:after {
    background-color: #607d8b !important;
}
#subscribeForm input.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#subscribeForm .mdl-textfield {
    width: 100%;
}

/*------------------------------------*\
    8. CONTACT MODAL
\*------------------------------------*/
#contactFormModal {
    padding: 0 20px;
}
#contactFormModal .modal-dialog {
    max-width: 600px;
}
#contactFormModal .modal-content {
    background-color: transparent;
}

.contactForm .mdl-card {
    width: auto;
}
.contactForm .mdl-card__title {
    padding-top: 0;
}
.contactForm .mdl-card__title .modal--logo {
    display: block;
    width: auto;
    height: auto;
    margin: 0 auto;
    padding: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}
.contactForm .mdl-card__supporting-text {
    width: 100%;
}

#contactForm input {
    padding: 4px 0;
    border-width: 0 0 1px;
    outline: 0;
}
#contactForm label {
    margin-bottom: 0;
    font-weight: 100;
    color: #737373;
}
#contactForm input.error + label:after,
#contactForm textarea.error + label:after {
    background-color: #ff5252;
    left: 0;
    width: 100%;
    visibility: visible;
}
#contactForm .mdl-textfield {
    width: 100%;
}
#contactForm input.contact-form-submit-btn {
    padding: 0 20px;
    height: auto;
    min-width: auto;
    font-size: 14px;
    line-height: 36px;
    font-weight: 100;
}
#contactMessage {
    min-height: 80px;
    border-color: rgba(0,0,0,.12);
}

/*------------------------------------*\
    9. MEDIA QUERIES
\*------------------------------------*/
/* 9-1 LARGE DEVICES, WIDE SCREENS */
@media screen and (min-width: 993px) and (max-width: 1200px) {
}

/* 9-2 MEDIUM DEVICES, DESKTOPS */
@media screen and (max-width: 992px) {
    #topNavbar2 li a {
        display: none;
    }
    #topNav2 .navbar-header {
        float: left;
        margin-left: 0;
    }
    #topNavbar2 {
        float: right;
    }
    
    #topNavbar2 .nav {
        margin-top: 0;
        margin-bottom: 0;
    }
}

/* 9-3 SMALL DEVICES, TABLETS */
@media screen and (max-width: 768px) {
}

/* 9-4 EXTRA SMALL DEVICES, PHONES */
@media screen and (max-width: 480px) {
    .loginForm .mdl-card__actions a {
        font-size: 11px;
        padding: 0 10px;
    }
	
	#banner {
		position: relative;
		height: auto;
		min-height: 100%;
	}
	.banner-content h2 {
		font-size: 34px;
		line-height: 38px;
		padding-top: 120px;
	}
}

/* 9-5 CUSTOM, IPHONE RETINA */
@media screen and (max-width: 320px) {
    #topNav .login-form-button {
        display: none;
    }
}

/*------------------------------------*\
    10. HELPER CLASSES
\*------------------------------------*/
/* 10-1 RESET GUTTER */
.no-gutter {
    margin-left: 0;
    margin-right: 0;
}
.no-gutter > [class*='col-'] {
    padding-left: 0;
    padding-right: 0;
}

/*
1. input border  
2. input background
3. button text underline
*/