/* ------------------------------------------------------------------- */
/* General */
/* ------------------------------------------------------------------- */

/* --- */
/* Base Structure */
/* --- */

/* HTML & Body */
body {font: normal 14px "Open Sans", sans-serif; color: #333; background: url(/Resources/Image/BackgroundImage3) no-repeat top center #EC5430; background-size: cover;}


/* Scroll settings */
html {-ms-overflow-style: scrollbar;}
html, body {overflow-x: hidden; height: 100%;}


/* Form Behavior */
.error-message {position: relative; bottom: 12px; margin-top: 15px; text-align: left; color: #ba4141; font-size: 12px;}
.input-error {border-color: #ba4141; outline: 0 none;}


/* Elements with display: none; */
#google_translate_element, .secondary-header-branding, .secondary-footer-branding, .back-to-top, #footer ul#social span, .print-instructions {display: none !important;}




/* --- */
/* Links & Buttons */
/* --- */

/* Links */
a {color: #2b3036; text-decoration: none;}
a:hover {color: #4f675b; text-decoration: underline;}

.forgot-link {font-size: 12px; margin: -10px 0 15px; padding-right: 0; text-align: right;}

.bottom-forgot-links {font-size: 12px;}


/* Buttons */
.btn i.fa.icon-before {margin-right: 3px;}
.btn i.fa.icon-after {margin-left: 3px;}
.btn i.fa.fa-user-plus {position: relative; top: -1px;}

.btn-login {background-color: #EC5430; border: none; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .5);}
.btn-login.active, .btn-success.focus, .btn-login:active, .btn-login:focus, .btn-login:hover, .open > .dropdown-toggle.btn-login {background-color: #045a5d; border: none; color: #fff;}

.btn-register {background-color: #8b8b8b; border: none; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 1);}
.btn-register.active, .btn-register.focus, .btn-register:active, .btn-register:focus, .btn-register:hover, .open > .dropdown-toggle.btn-register {background-color: #8b8b8b; border: none; color: #fff;}

.btn.focus, .btn:focus, .btn:hover {color: #FFF; text-decoration: none;}




/* --- */
/* Wrappers & Containers */
/* --- */

.wrap {display: block; width: 100%; position: relative; min-height: 100%; height: auto;}

.main-container {position: relative; display: block; width: 100%; height: 100%; background: transparent; margin-top: -30px; padding-top: 30px; z-index: 100;}



/* --- */
/* Navigation */
/* --- */

#main-nav, #main-nav li, #main-nav li a {height: 30px; line-height: 30px;}
#main-nav {margin: 0; border-radius: 0; min-height: 30px; background: #EC5430; color: #fff; height: 30px; border: none; line-height: 30px;}
#main-nav .container {padding: 0;}
#main-nav a.navbar-brand {padding: 0; margin: 0; height: auto;}
#main-nav li {background: transparent; margin: 0 8px;}
#main-nav .nav a, #main-nav .nav a:active, #main-nav .nav a:hover {padding: 0 8px; background: transparent; color: #fff; line-height: 30px;}
#main-nav .nav a:hover {text-decoration: underline;}





/* --- */
/* Content Rows */
/* --- */

/* Top Row */
.top-row {background-color: #ffffff; position: relative; padding: 20px 0;}
.top-row h1 {font-size:26px; margin-top: 10px; color: #EC5430; text-align:right;}

/* Center Row */
.center-row {margin: 0; position: relative; background: transparent; padding: 8rem 0;}
.center-row .bottom-forgot-links {margin-top: 5px;}

.login-section {float: right; background-color: rgba(212,212,212,.6); padding: 3rem;}

.or-line {border-top: 1px solid #fff; margin: 27px 5px 10px;}
.or-circle-area {text-align: center;}
.or-circle {background: #F0F0F0; border-radius: 25px; height: 35px; line-height: 35px; margin: -17px auto 0; width: 35px; color: #EC5430;}

/* Bottom Row */
.bottom-row {color: #FFF; background: rgba(0,0,0,.7); position: absolute; right: 0; bottom: 0; left: 0; padding: 40px 0;}




/* --- */
/* Footer */
/* --- */

#footer {color: #FFF; padding: 0; background: #EC5430; border-top: none;clear: both; z-index: 300; position: relative; float: left; width: 100%;}
#footer a {text-decoration: none; color: #FFF;}
#footer a path, #footer a circle {fill: #FFF;}
#footer .footer-links {text-align: center;}
#footer ul {margin: 0; text-align: center; display: inline; line-height: 80px; padding-left: 0;}
#footer ul li {list-style: none; zoom: 1; display: inline; margin: 0; padding: 0; line-height: 16px;}
#footer #powered-by-kuder-logo {padding: 20px 0; max-width: 150px; margin: 0;}
#footer #kuder-links a {font-size: 11px; margin-right: 20px; border-bottom: 1px dotted transparent; -webkit-transition: .3s; transition: .3s;}
#footer #kuder-links a:hover {border-bottom: 1px dotted #FFF;}
#footer ul#social li a {display: inline-block; height: 30px; text-decoration: none; width: 30px; padding: 0; font-size: 22px; -webkit-transition: .3s; transition: .3s;}
#footer ul#social li a:hover {opacity: .5}

.help {text-transform: capitalize;}










/* ------------------------------------------------------------------- */
/* Media Queries */
/* ------------------------------------------------------------------- */

/* --- */
/* Desktop - Extra Large Screens (>= 1200px) */
/* --- */
@media (min-width: 1200px) {

}



/* --- */
/* Desktop - Standard / Tablet - Extra Large (== 992px && <= 1199px) */
/* --- */
@media (max-width: 1199px) {
    #main-nav li a {font-size: 12px;}
}

@media (min-width: 992px) and (max-width: 1199px) {

}

@media (min-width: 992px) {
    .wrap {padding-bottom: 80px; margin-bottom: -80px;} /* footer height + height of the bottom-row (80) div */
    #footer {height: 80px;}
}



/* --- */
/* Tablet - Small (== 768px && <= 991px) */
/* --- */
@media (max-width: 991px) {

}

@media (min-width: 768px) and (max-width: 991px) {
    .wrap {padding-bottom: 65px; margin-bottom: -65px;} /* footer height + height of the bottom-row (216) div */

    .top-row h1 {font-size:25px; margin-top:15px;}

    #main-nav li {margin: 0;}

    #footer {height: 65px;}
    #footer ul {line-height: 65px;}
    #footer #kuder-links a {margin-right: 10px;}
    #footer ul#social li a {font-size: 18px; width: 21px;}
}

@media (min-width: 768px) {

}




/* --- */
/* Phone - Standard (<= 767px) */
/* --- */
@media (max-width: 767px) {
    body {background-color: #2d3238; background-image: none;}

    .wrap {padding-bottom: 147px; margin-bottom: -147px;}

    #main-nav {background-color: #fff; line-height: inherit; height: auto;}
    #main-nav a img {max-width: 220px;}
    #main-nav a.navbar-brand {margin: 0; position: relative; padding: 1rem 0; text-align: center; display: block; width: 100%; z-index: 198;}
    #main-nav li {height: auto; line-height: inherit; clear: both; display: block;}
    #main-nav li a {height: auto; line-height: inherit; padding: 5px 10px !important;}
    #main-nav .container {padding: 0 15px;}
  #main-nav .nav a, #main-nav .nav a:active, #main-nav .nav a:hover {padding: 0 8px; background: transparent; color: #000000; line-height: 30px;}

    .navbar-header {margin: 0 !important; position: relative;}
    .navbar-toggle {background-color: #d1d1d1; margin-right: 30px; color: #333; display: inline-block; border: none; float: left; position: absolute; top: 50%; margin-top: -18px; z-index: 199;}

    .logo-mobile {max-width: 200px; text-align: center; margin: 0 auto;}

    .main-container {padding-top: 35px; position: static; background: none; min-height: auto;}

    .main-xs-form {background: rgba(255,255,255,.7); margin-top: 0; color: #000;}

    .panel-heading {background: rgba(255,255,255,.7); border-bottom: none; border-top-left-radius: 0; border-top-right-radius: 0; padding: 12px; margin: 0 -15px;}
    .panel-heading h2 {margin: 0 20px; padding: 0; font-size: 20px; color: #000; text-align: center;}
    .panel-body {padding: 25px 15px 15px;}

    .bottom-forgot-links {text-align: center; margin-top: 15px;}

    .forgot-link {text-align: center;}

    #footer {padding: 0; height: 147px;}
    #footer ul {line-height: 15px;}
    #footer .footer-links.social-icons {padding-top: 25px;}
    #footer #powered-by-kuder-logo {margin: 0 auto;}
    #footer #kuder-links a {margin: 0px 5px; font-size: 12px;}
    #footer ul#social li a {font-size: 18px; width: 21px;}
}




/* --- */
/* Phone - Extra Small */
/* --- */
@media (max-width: 500px) {
    .wrap {padding-bottom: 166px; margin-bottom: -166px;}
    #footer {height: 166px;}
}