@font-face 
{
    font-family: 'Tw Cen MT';
    src: url('../font/Tw Cen MT.ttf') format('truetype');
}

body {padding: 0;margin: 0;position: relative;font-family: Tw Cen MT;}

.tabbg {background-color: #1d1d1d;height: 100px;width: 100%;position: absolute;top: 0;}

.contain {max-width: 800px;margin: auto; width: 95%; padding-bottom: 6em;}

img {width: 100%;}

.title {font-weight: bold;font-size: 18pt;}

.w90 {width: 90%;margin: 3em auto 0;}

.applybtn {background: #fdbe0f;color: black;padding: 4px 25px;display: inline-block;}

.label {color: #fdbe0f;}

.stronglabel {text-shadow: black 1px 2px 1px; font-size: 15pt;}

/*.bannerimg {height: 300px;}*/

.map {max-width: 300px;max-height: 300px;margin: 2em;display: inline-block;}
.office {display: inline-block;text-align: left;}
.addr {margin-bottom: 1.5em;}
.contact > div {display: inline-block;width: 100%; margin-bottom: 5px;}
.contactimg {width: 18px;height: 18px;float: left;margin-right: 5px;}


.callus {background-color: black; text-align: center; font-weight: bold; padding: 5px; }

.tabspage {height: 100px;position: relative; width: 90%; margin: auto;}
.tabspage > div {width: 100%;padding-top: 15px;}
.tabspage .logo {width: 70px;}
.tabspage .page {display: inline-block; position: absolute; bottom: -5px; width: 100%; text-align: center; font-size: 13pt;}
.tabspage .page > ul {padding-left: 10px;}
.tabspage li {display: inline-block;padding: 0 10px 0 5px;border-right: #fdbe0f 1px solid;}
.tabspage a {color: #fdbe0f;text-decoration: none;}
.tabspage a:hover {color: #a8a9ad;}

#main {display: none;}

#rowfind {position: relative; margin-top: 3em;}
#rowfind .title {position: relative; width: 90%; margin: auto;}
#rowfind .findcon {position: relative;margin:1em 0 3em; text-align: center;font-size: 16pt;}
#rowfind .findcon > div {background: rgba(0,0,0,0.6);display: inline-block;}
#rowfind .sel {border-bottom: white 1px solid;}
#rowfind .sel > div {display: inline-block;color: white;
           /*padding: 15px 25px;*/
           padding: 15px 60px;
}
#rowfind .findinput {display: inline-block;overflow: hidden;}
#rowfind .dropinput {position: relative;margin: 1em 0;}
#rowfind .dropinput > select {width: 100%;height: 43px;font-size: 16pt; padding: 0 10px;-webkit-appearance: none;background-color: white;}
#rowfind .btn {background: #fdbe0f;padding: 10px 5em;margin: 1em 0;}
.dropdarrow { border-top: 10px solid;  
              border-right: 10px solid transparent;  
              border-left: 10px solid transparent;
              color: #fdbe0f;
              margin: 13px 9px;
              position: absolute;
              top: 6px;
              right: 6px;}


/*#rowworks {height: 510px;}*/
#rowworks .title {width: 90%;margin: auto;}
#rowworks .flowimg {margin: 2em 0;}
#rowworks .workscon {height: 235px; padding: 1em 0 3em; width: 90%; margin: auto;}
.workscon .work {float: left; width: 22%;padding:8px;}
.workscon .worksimg {width: 100px;margin: 10px auto;}
.workscon .head {margin-bottom: 10px;color: #fdbe0f; font-weight: bold;}
.workscon span {font-size: 10pt;}

#rowbr {background: #1d1d1d;padding: 3em 0; margin-top: 3em;}
#rowbr .brhead {color: white;width: 77%;margin: auto;}
#rowbr .date {font-size: 12pt;float: right;margin-top: 10px;}
#rowbr .brcon {width: 77%;margin: 4em auto 0;position: relative;}
#rowbr .br1 {display: inline-block;}
#rowbr .br2 {position: absolute;right: 0px;bottom: 0px;}

#loanpack {color: white;font-size: 12pt;}
#loanpack .top {background: #fdbe0f;color: black;font-weight: bold;}
#loanpack .top > td {padding: 5px 10px;}
#loanpack .bordertop > td {border-top: #fdbe0f 1px solid;}
#loanpack td {border-bottom: #fdbe0f 1px solid;}
#loanpack .bank {width: 300px;border-left: #fdbe0f 1px solid;padding: 5px 10px;}
#loanpack .rate {width: 250px;padding: 2px 0;}
#loanpack .rate > span {font-size: 8pt;}
#loanpack .pay {width: 220px;}
#loanpack .apply {width: 200px;border-right: #fdbe0f 1px solid;}
#loanpack .bank2 {border-left: #fdbe0f 1px solid;padding: 5px 10px;}
#loanpack .rate2 {border-right: #fdbe0f 1px solid;padding: 2px 10px;text-align: right;}


.bankapply {background: #1d1d1d;padding: 3em 0;}
.bankapply > div {width: 80%;margin: auto;}

#calculate {width: 80%;margin: 3em auto 0;}
/*#calculate > div {margin-top: 2em;}*/
/*#calculate table {font-size: 15pt;}*/
#calculate div {font-size: 15pt;}
/*#calculate thead {text-align: left;font-size: 17pt;color: black;}*/
#calculate .calrow {margin: 10px 0;}
#calculate .oprcon {width: 310px; float: left;padding: 7px;}
#calculate .calopt {float: left; font-weight: bold;}
#calculate .calcenter{padding: 0px 15px;float: right;}
#calculate .calinput {display: inline-block;}
#calculate .btnwidth {width: 254px;}
#calculate .calbtn {background: #fdbe0f;padding: 10px 0;color: black;text-align: center;}
#calculate input {padding: 7px 10px;width: 230px;font-size: 12pt;border: black 1px solid;}
#calculate .birth {position: relative;width: 252px;}
#calculate .birth input {text-align: center; width: 20%;position: relative; z-index: 2;}
#calculate .birth > div {position: absolute;width: 100%;text-align: center; bottom:  0; z-index: 1;}


#rowdesc {width: 100%;height: 200px;background-color: black;position: relative;padding: 5px 0;}
#rowdesc > div {height: 100%;width: 20%;float: left;position: relative;}
#rowdesc .desc {width: 79%;border-right: #988658 1px solid;} 
.readmore {position: absolute;right: 40px;bottom: 10px;color: white;}
#rowdesc .rm {margin: 20px 10px;text-align: center;}
#rowdesc .rm > div {color: #fdbe0f;}
#rowdesc .btn {position: absolute;bottom: 10px;text-align: center;width: 100%;}
#rowdesc .info {margin: 20px 10px;}
#rowdesc .info > div {color: #fdbe0f;border-bottom: #fdbe0f 1px solid;}

#rowbanner {height: 300px;position: relative; background: url(../img/insurance.jpg) no-repeat scroll center;background-size: cover; width: 100%;display: inline-block;margin-top: 3em;}
#rowbanner .top {position: absolute; top: 20px; left: 20px; width: 51%;}
#rowbanner .head {font-weight: bold;font-size: 16pt; font-weight: bold; text-shadow: #fdbe0f 1px 2px 1px;}
#rowbanner .con {margin: 1em 0;}
#rowbanner .con > span {display: block;}
#rowbanner .bottom {position: absolute;bottom: 20px;left: 20px;background: rgba(0,0,0,0.6);padding: 0 20px;}
#rowbanner .bottom > div {padding: 5px 10px;}
#rowbanner .bottom a {color: #fdbe0f;text-decoration: none;}
#rowbanner .bottom a:hover {color: #a8a9ad;}

#about {width: 90%; margin: 2em auto; text-align: justify;}
#about h2 {font-weight: bold;}

.specialist {width: 70%;margin: 3em auto; white-space: nowrap;}
.specialist table {width: 100%; border-collapse: collapse;}
.specialist th {background-color:black; font-size: 13pt;height: 30px;}
.specialist tr {border: 1px solid black;}
.specialist td {height: 30px; padding: 0 5px;width: 33%;}
.specialist .spcontact {text-align: center;}

#popup1 {margin: auto;}
#popup1 .name {font-weight: bold}
#popup1 .center {width: 10px; text-align: center;}
#popup1 input {padding: 5px 10px; margin:5px;}
#popup1 .succes {border-radius: 80px;background-color: #fdbe0f; font-size: 20pt; padding: 35px 25px; text-align: center; display: inline-block;margin-bottom: 10px;}
#popup1 .succes > span {display: block;}
#popup1 .loanapply {border-bottom: black 1px solid;padding: 10px 0; margin: auto;}
#popup1 .loanapply th {color: #fdbe0f;}
.popupapply {color: black;background:#fdbe0f;width: 200px;padding: 10px 0;margin: 5px auto;text-align: center;}

.homeloanapply {margin-top: 3em; text-align: center;}
.homeloanapply .title {width: 90%;margin:0 auto 1em; text-align: left;}
.homeloanapply .conhomeapy {border: 1px black solid; padding: 10px 0; display: inline-block;}
.homeloanapply table {margin: auto; padding: 10px 20px;}
.homeloanapply .name {font-weight: bold}
.homeloanapply .center {width: 10px; text-align: center;}
.homeloanapply input {padding: 5px 10px; margin:5px;}

.loanapycon {text-align: center;padding: 10px 0;width: 88%; margin: auto;}
.loanapycon > select {width: 200px;height: 38px;margin-bottom: 10px;}
.statetilte {text-align: left;font-weight: bold; color: #fdbe0f;margin-bottom: 10px;}

#term {width: 75%;margin: 2em auto 0;text-align: justify;position: relative;font-size: 9px;}
#term input {position: absolute;left: -15px; top: 0px; padding: 0; margin: 0;}

.footer {height: 80px;width: 95%;position: relative;margin: auto;z-index: 1;max-width: 760px;}
.footer > div {display: inline-block;margin-top: 1em;}
.footer .partner {font-size: 9pt;float: left;padding: 15px 5px;}
.footer .partnerimg {width: 70px;float: left;}
.footer .leftft {display: inline-block;margin-bottom: 10px;}
.footer .fbimg {width: 20px;height: 20px;float: left;}
.footer .fb {font-size: 9pt;float: left;padding-top: 4px; padding-left: 5px;}
.footer .copyright {font-size: 11pt;}
.footerbg {background-color: #fdbe0f;height: 80px;width: 100%;position: absolute;bottom: 0;}
.fix {position: fixed; bottom: 0; }

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 15px;
    border: 1px solid black;
    max-width: 400px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: black;
    float: right;
    font-size: 25px;
    position: absolute;
    right: -10px;
    top: -15px;
    background: #fdbe0f;
    border-radius: 50px;
    padding: 1px 6px;
    /*font-weight: bold;*/
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* career form */
.career-form {
    width: 90%;
    margin: 1em auto 2em;
    text-align: justify;
    border: 2px solid #eee;
    padding: 1em;
}

.career-form label {
    width: 30%;
    display: inline-block;
}

.career-form input[type=text] {
    width: 65%;
    padding: 6px;
}

.career-form .submit-btn {
    width: 30%;
    text-align: center;
    color: #1d1d1d;
    background: #fdbe0f;
    padding: 11px 0;
    border: none;
    font-weight: bold;
}

@media screen and (max-width : 800px) {
    .title {font-size: 15pt;}
    .bankapply > div {width: 90%;}
    .map {display: block;margin: 2em auto;}
    .dropdarrow {top: 0;}
    .contain {padding: 0;}
 
    .office {width: 100%;margin-bottom: 2em;}
    .addr {width: 200px; text-align: center; margin: 0 auto 1.5em;}
    .contact {width: 160px; margin: auto;}
    
    .callus {text-align: justify;}
    
    .statetilte {text-align: center;}
    
    /*#rowfind .title {left: 0;}*/

    .tabspage > div {text-align: initial;}
    .tabspage .page {display: none;}
    .tabspage .logo {margin-left: 1em;}
    
    #main {display: block; margin-left: 0px; position: absolute; right: 0; top: 35px;}
    
    #calculate {width: 90%;}
    #calculate div {font-size: 12pt;}
    #calculate .calcenter {display: none;}
    #calculate .oprcon {width: 100%; padding: 7px 0;}
    #calculate .calinput {display: block;}
    #calculate input {width: 93%;}
    .slider.slider-horizontal {width: 100%;}
    #calculate .btnwidth {margin: auto; width: 100%;}
    #calculate .birth {width: auto;}
    #calculate .title {text-align: center;}
    
    /*#rowbanner {background-position-x: -13em;}*/
    #rowbanner .head {font-size: 13pt;font-weight: bold;}
    #rowbanner .con > span {display: inline;}
    
    #rowdesc {font-size: 10pt;}
    #rowdesc .desc {width: 65%;}
    #rowdesc > div {width: 34%;}
    
    #rowworks .title {text-align: center;}
    #rowworks .workscon {height: auto; text-align: justify;}
    .workscon .work {float: none;margin: auto;width: 65%}
    
    #rowfind .findcon {font-size: 13pt;}
    #rowfind .sel > div {
        /*padding: 10px 15px;*/
        padding: 10px 40px;
    }
    #rowfind .dropinput > input {font-size: 13pt;height: 33px;}
    
    #rowbr .brhead {width: 90%;}
    #rowbr .brcon {width: 90%;}
    #rowbr .date {font-size: 10pt;margin-top: 5px;}
    #rowbr .br1 {display: block;}
    #rowbr .br2 {position: relative;width: 100%;}
    .homeloanapply p {text-align: justify;}
    
    #loanpack {width: 100%; font-size: 10pt;}
    #loanpack .bordertop > td {border-top: none;}
    
    .homeloanapply .title {text-align: center;}
    
    .footer .copyright {font-size: 8pt;}
    .footer .partner {float: none;padding: 0;margin-top: -5px;}
    
    .fix {position: relative;}
    .footerbg {position: absolute;}
    
    .modal-content {width: 80%;}
    
}

@media screen and (max-width : 700px) {
    .specialist {width: 90%;}
}

@media screen and (max-width : 400px) {
    .specialist {font-size: 12px;}
    #rowbanner .bottom {left: 0;}
    #rowfind .title {margin-top: 1em;}
}

@media screen and (max-width : 450px) {
    .career-form label {
        width: 100%;
        margin-bottom: 5px;
    }

    .career-form input[type=text] {
        width: 95%;
    }
}