/*VIEWPORT*/
/*######################################################################################################*/
/*body::before {
  content: "xs-767px";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  background-color: #000;
  color: #fff;
}
@media (min-width : 768px) { body::before { content: "sm-768px-991px"; }}
@media (min-width : 992px) { body::before { content: "md"; }}
@media (min-width : 1200px) { body::before { content: "lg"; }}*/
/*viewport*/
/*######################################################################################################*/


/*BODY & NAVBAR*/
/*######################################################################################################*/
body {
    font-family: Arial;
    padding-top:80px;

    /*margin-top: 180px;*/
    /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

a:focus,
a:active,
a:hover{
    color:#fdb930;
    text-decoration: none;
}

.navbar {
    min-height: 80px;
    background: #4E2784;
}

.navbar-right {
    margin-right:10px;
    margin-top:10px;
}

.navbar-brand {
    padding-top:20px;
    height: 80px; 
    line-height: 80px;
}

.navbar-brand>img {
    height: 35px;
}

.navbar-toggle{
    margin-top: 20px;
}

.navbar-citysavings .navbar-nav li a.active, 
.navbar-citysavings .navbar-nav .open .dropdown-menu > li > a.active {
    color:#fdb930;
}

.navbar-citysavings .navbar-nav li a,
header {
    color:#fff;
    font-weight: bold;
    text-transform: uppercase;
    font-size:17px;
}

@media (max-width: 991px) {
    .navbar-citysavings .navbar-nav li a {
        font-size: 14px;
    }

    .navbar-citysavings .navbar-nav .input-group {
        padding-left: 20px;
    }
}

/*@media (min-width: 768px) and (max-width: 785px) {
	.navbar-citysavings .navbar-nav li a {
		font-size: 13px;
	}

    .navbar-brand>img {
            height: 20px;
    }
}*/

@media (min-width: 991px) and (max-width: 806px) {
    .navbar-citysavings .navbar-nav li a {
        font-size: 11px;
    }

    .navbar-brand>img {
            height: 23px;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    .navbar-citysavings .navbar-nav li a {
        font-size: 15px;
    }

    .navbar-brand>img {
            height: 32px;
    }

}


/*.navbar-citysavings .navbar-nav li a:active,*/
.navbar-citysavings .navbar-nav li a:hover,
.navbar-citysavings .navbar-nav li a:focus {
    color:#fdb930;
    outline:0;
}


.navbar-citysavings .navbar-toggle {
    border: none;
    outline: none;
}

.navbar-citysavings .navbar-toggle:focus,
.navbar-citysavings .navbar-toggle:hover,
.navbar-citysavings .navbar-nav .dropdown-menu {
    background-color:#4E2784;
    /*background-color: red;*/
    /*text-align: center;*/
}

.navbar-citysavings .dropdown-menu > li {
    text-align: center;
}


/*NAVBAR DROPDOWN HORIZONTAL*/
@media (min-width: 992px) {
.navbar-citysavings .nav > li{
    position: static !important;
}

.navbar-citysavings .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    /*background:red !important;*/
    background: rgba(78, 39, 132, .8) !important;
    /*padding-right: 200px;*/
}

.navbar-citysavings .dropdown-menu > li{
    float: right !important;
    /*text-align: center;*/
    padding: 5px 20px;
} 

.navbar-citysavings .dropdown-menu > li > a{
    width:auto !important;
}
/*NAVBAR DROPDOWN HORIZONTAL*/
}


.navbar-citysavings .navbar-toggle:focus .icon-bar,
.navbar-citysavings .navbar-toggle:hover .icon-bar {
    background-color: #fdb930;
}

.navbar-citysavings .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-citysavings .navbar-nav .dropdown li a:hover,
.navbar-citysavings .navbar-nav .dropdown li a:focus,
.navbar-citysavings .navbar-nav .dropdown-toggle:focus {
    background-color: transparent;
}

/* caret */
.navbar-citysavings .navbar-nav > .dropdown > a .caret,
.navbar-citysavings .navbar-nav > .dropdown > a:hover .caret,
.navbar-citysavings .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #fdb930;
    border-bottom-color: #fdb930;
}

.navbar-citysavings .navbar-nav > .open > a .caret, 
.navbar-citysavings .navbar-nav > .open > a:hover .caret, 
.navbar-citysavings .navbar-nav > .open > a:focus .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
}


.navbar-citysavings .navbar-nav > .open > a, 
.navbar-citysavings .navbar-nav > .open > a:hover, 
.navbar-citysavings .navbar-nav > .open > a:focus {
    color: #fdb930;
    background-color: transparent;
}

@media (max-width: 991px) {
    .navbar-citysavings .navbar-nav .open .dropdown-menu > li > a {
        color: #fff;
        /*color:red;*/
    }

    .navbar-citysavings .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-citysavings .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #fdb930;
        /*color: red;*/
    }

}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

/*######################################################################################################*/


/*TEMP*/
.bg-royal-violet {
    background-color:#4E2784;
}

.bg-sunflower-yellow {
    background-color:#fdb930
}

.bg-silver {
    background-color:#E2e2e2;
}

.bg-dark {
    background-color:#222;    
}

.bg-pink {
    background-color: #c62582;
}

.bg-cyan {
    background-color: #8fd2c9;
}

.bg-yellow-green {
    background-color: #d9db56;
}


/*FOOTER SECTION CSS*/
/*######################################################################################################*/
footer .row {
    background-color:#4E2784;
}

footer h3,
footer .footer-contact h6 small {
    font-weight: bold;
}

footer h4 a,
footer h3,
footer h4,
footer h5,
footer .footer-bottom,
footer .footer-bottom p a,
footer .footer-contact h6 small {
    color:#fff;
}

footer .footer-bottom p a:hover,
footer h4 a.active {
    color:#fdb930;
}

footer h3 {
    font-size: 21px;
}

footer .footer-right h3 {
    font-size: 21px
}

/*footer .footer-right h4 {
    font-size: 22px
}*/

footer .footer-left {
    height: 315px;
    padding: 40px 50px;
}

footer .footer-right {
    /*padding: 60px 30px 30px 30px;*/
    padding: 32px 30px 30px 30px;
    height: 315px;
}

footer .footer-right .bancnet {
    padding-top: 12px;
}
footer .footer-right .bancnet p {
    color: #fff;
    font-size: 12px;
}

footer .footer-right .bancnet p a{
    color: #fdb930;
  
}

footer .footer-right .placeholder {
    /*color:red;*/
}

/*PLACEHOLDER*/
footer .footer-right *::-webkit-input-placeholder { /* Chrome, Safari, Opera */
    color: #4E2784;
    font-size: 17px;
}

footer .footer-right *:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #4E2784;
    font-size: 17px;
}

footer .footer-right *::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #4E2784;
    font-size: 17px;
}

footer .footer-right *:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #4E2784;
    font-size: 17px;
}

footer .footer-right .form-group #email,
footer .footer-right .form-group .btn {
    border-radius: 25px;
    border:none;
    height: 45px;
}

footer .footer-right .form-group .btn {
    /*color: #fff;*/
    /*background: #fdb930;*/
    /*text-transform: uppercase;*/
    /*font-weight: bold;*/
}

footer .footer-below .site_seal {
    position:absolute;
    right:-20px;
    top:7px;
    float:right;
    width:auto;
}

footer .footer-left .simple-is-good{
    color:#fdb930;
    /*font-stretch: ultra-condensed;*/
    /*font-weight: bolder;*/
    /*font-size:14px;*/
    font-size: 18px;
    padding-top: 10px;
    font-family: Impact, Arial;
}

footer .footer-highlight {
    height: 35px;
    margin-bottom: 30px;
    background-color: #fdb930;
    margin-top: 10px;
}

footer .footer-bottom {
    text-align: left;
    font-stretch: ultra-condensed;
    font-weight: bold;
    font-size:15px;
    margin-top:10px;
}

footer .footer-contact .contact_details {
    margin-left: 65px;
    overflow: hidden;
}

footer .footer-contact .contact_margin {
    /*margin-top:4px;*/
    margin-top:15px;
    /*margin-bottom:4px*/
}

footer .footer-contact .contact_margin a {
    color: #fdb930;
}

footer .footer-contact .contact_details h6 {
    color: #fdb930;
    font-size:16px;
}

footer .footer-contact .contact_details small {
    font-size: 15px;
}

footer .footer-contact .fa-envelope-o{
    vertical-align: middle;
    font-size: 40px;
    color: #fff;
}

footer .footer-contact .fa-phone {
    font-size: 50px;
    padding-top: 5px;
    color:#fff;
}

footer .footer-contact .email {
    color: #fdb930;
    font-size:17px;
    padding-left: 20px;
}

footer .footer-right h5 {
    font-size:16px;
    /*font-weight: bold;*/
}


@media (max-width: 468px) {
    footer .footer-left {
        padding:20px 0 0 0;
        height:630px;
    }

    footer .footer-right {
        /*padding: 40px 15px;*/
        padding: 0 15px;
        height: auto;
    }

    footer .footer-bottom {
        font-size:12px;
    }

    footer .footer-contact .fa-envelope-o {
        font-size: 30px;
    }

    footer .footer-contact .email {
        font-size:14px;
        padding-left:8px;
    }

    footer .footer-contact .contact_details h6 {
        font-size:14px;
    }

     footer .footer-contact .fa-phone {
        font-size: 40px;
        padding-top: 10px;
    }

    footer .footer-contact .contact_details {
        margin-left: 5px;
    }

    footer .footer-right .social-buttons h5 {
        font-size: 15px;
    }

    footer .footer-right .social-buttons {
        padding:  0 10px;
    }
}

@media (min-width: 469px) and (max-width: 767px ) {
    footer .footer-left {
        height:670px;
    }

    footer .footer-right {
        height: auto;
        padding: 0 70px;
    }
}


@media (min-width: 768px) and (max-width: 991px) {
    footer .footer-left {
        height:450px;
    }

    footer .footer-right {
        height: auto;
        padding: 0 70px;
    }
}

@media (min-width: 991px) and (max-width: 1199px) {
     footer .footer-left,
     footer .footer-right {
        height:460px;
    }
}

@media (max-width: 369px) {
    footer .footer-left .simple-is-good {
        font-size: 14px;
    }

}

@media (min-width: 370px) and (max-width: 489px) {
    footer .footer-left .simple-is-good {
        font-size: 15px;
    }

}

@media (min-width: 1000px) and (max-width: 1099px) {
     footer .footer-left .simple-is-good {
        font-size: 16px;
    }
}


@media (min-width: 1100px) and (max-width: 1200px) {
     footer .footer-left .simple-is-good {
        font-size: 17px;
    }
}

/*@media (min-width: 992px) and (max-width: 1099px) {
     footer .footer-left .simple-is-good {
        font-size: 14px;
    }
}*/


/*FACEBOOK ICON*/
.social-buttons {
    font-size: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: inline-flex;
    display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: -webkit-inline-box;
}

.social-button {
    display: inline-block;
    background-color: #fff;
    outline: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    margin: 0 5px;
    text-align: center;
    position: relative;
    overflow: hidden;
    opacity: .99;
    border-radius: 50%;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    -ms-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
    content: '';
    background-color: #000;
    width: 120%;
    height: 120%;
    position: absolute;
    top: 90%;
    left: -110%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    -ms-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
    font-size: 38px;
    vertical-align: middle;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    -ms-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
    transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
    background-color: #3B5998;
}

.social-button.youtube:before {
    background-color: #CC181E;
}


.social-button.facebook .fa {
    color: #3B5998;
}

.social-button.youtube .fa {
    color: #CC181E;
}


.social-button:focus:before, .social-button:hover:before {
    top: -10%;
    left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
    color: #fff;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
/*FACEBOOK ICON*/
/*######################################################################################################*/



/*CAROUSEL*/
.media-carousel {
    margin-bottom: 0;
    padding: 0 40px 30px 40px;
    margin-top: 30px;
}

/* Previous button  */
/*#security_advisory .media-carousel .carousel-control.left*/ 
#corporate_news .media-carousel .carousel-control.left,
#csr_news .media-carousel .carousel-control.left,
#brigada_news .media-carousel .carousel-control.left,
#project_synergy_news .media-carousel .carousel-control.left,
#learning_and_teaching_support_news .media-carousel .carousel-control.left,
#brigada_pagbasa_news .media-carousel .carousel-control.left,
#disaster_risk_reduction_news .media-carousel .carousel-control.left,
#national_economic_development_and_value_formation_news .media-carousel .carousel-control.left,
#learning_loss_recovery_program_news .media-carousel .carousel-control.left {
    left: -12px;
    background-image: none;
    background: none repeat scroll 0 0 #fdb930;
    border: 4px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    height: 40px;
    width : 40px;
    margin-top: 150px
}

/* Previous button  */
/*#corporate_social_responsibility .media-carousel .carousel-control.left {*/
#security_advisory .media-carousel .carousel-control.left {
    left: -12px;
    background-image: none;
    background: none repeat scroll 0 0 #4E2784;
    border: 4px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    height: 40px;
    width : 40px;
    margin-top: 150px
}


/* Next button  */
#corporate_news .media-carousel .carousel-control.right,
#csr_news .media-carousel .carousel-control.right,
#brigada_news .media-carousel .carousel-control.right,
#project_synergy_news .media-carousel .carousel-control.right,
#learning_and_teaching_support_news .media-carousel .carousel-control.right,
#brigada_pagbasa_news .media-carousel .carousel-control.right,
#disaster_risk_reduction_news .media-carousel .carousel-control.right,
#national_economic_development_and_value_formation_news .media-carousel .carousel-control.right,
#learning_loss_recovery_program_news .media-carousel .carousel-control.right {
    right: -12px !important;
    background-image: none;
    background: none repeat scroll 0 0 #fdb930;
    border: 4px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    height: 40px;
    width : 40px;
    margin-top: 150px
}

/* Next button  */
#security_advisory .media-carousel .carousel-control.right {
    right: -12px !important;
    background-image: none;
    background: none repeat scroll 0 0 #4E2784;
    border: 4px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    height: 40px;
    width : 40px;
    margin-top: 150px
}

/* Changes the position of the indicators */
/*.media-carousel .carousel-indicators {
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-right: -19px;
}*/

/* Changes the colour of the indicators */
/*.media-carousel .carousel-indicators li {
    background: #c0c0c0;
}
.media-carousel .carousel-indicators .active {
    background: #333333;
}*/

/* End CAROUSEL */





.news {
    margin-top: 40px;
}

.news .box {
    transition:all 0.2s ease;
    border:2px dashed #e6e6e6;
    /*margin-top: 10px;*/
    box-sizing: border-box;
    border-radius: 5px;
    background-clip: padding-box;
    padding:5px;
    /*min-height:340px;*/
}

#news_and_stories .box {
    transition:all 0.2s ease;
    border:2px dashed #e6e6e6;
    /*margin-top: 10px;*/
    box-sizing: border-box;
    border-radius: 5px;
    background-clip: padding-box;
    padding:5px;
}


.news .box:hover,
#news_and_stories .box {
    cursor: pointer;
}

#news_and_stories .box:hover {
    /*border:2px solid #fdb930;*/
    border:2px solid #4E2784;
    border-radius: 5px;
}


.news .box .box-content {
  padding: 5px;
  border-radius: 0 0 2px 2px;
  background-clip: padding-box;
  box-sizing: border-box;
}

#news_and_stories .box {
  padding: 5px;
  border-radius: 0 0 2px 2px;
  background-clip: padding-box;
  box-sizing: border-box;
}

.news .box .box-description {
    /*margin-top: -19px;*/
    padding: 20px 20px;
    height: 130px;
}

#news_and_stories .box-description {
    height: 60px;
}


@media (max-width: 991px) {

    .news .box .box-description {
        height: auto;
    }

    #news_and_stories .box-description {
        height: auto;
    }


}

#news_and_stories .box {
    margin-top: -8px;
    padding: 25px 25px;
}



/*#corporate_news h3,
#corporate_social_responsibility h3,
#security_advisory h3 {
    font-family: Impact, Arial;
    font-size:27px;
}
*/


#corporate_news h4,
#corporate_social_responsibility h4,
#security_advisory h4,
#csr_news h4,
#brigada_news h4,
#project_synergy_news h4,
#learning_and_teaching_support_news h4,
#brigada_pagbasa_news h4,
#disaster_risk_reduction_news h4,
#national_economic_development_and_value_formation_news h4,
#learning_loss_recovery_program_news h4 {
    /*font-weight: bold;*/
    /*font-stretch: condensed;*/
    /*font-family: Impact;*/
    font-size:18px;
}

#corporate_news h3,
#security_advisory h3 {
    color:#fdb930;
}

/*corporate_social_responsibility*/
#security_advisory {
    background-color: #F0EEED;
    padding-top: 50px;
}

/*#corporate_social_responsibility h3*/  
#security_advisory {
    color:#4E2784;
}

#corporate_news .box:hover,
#csr_news .box:hover,
#brigada_news .box:hover,
#project_synergy_news .box:hover,
#learning_and_teaching_support_news .box:hover,
#brigada_pagbasa_news .box:hover,
#disaster_risk_reduction_news .box:hover,
#national_economic_development_and_value_formation_news .box:hover,
#learning_loss_recovery_program_news .box:hover
/*#security_advisory .box:hover*/ {
    border:2px solid #fdb930;
}

/*#corporate_social_responsibility .box:hover*/
#security_advisory .box:hover {
    border:2px solid #4E2784;
}


#corporate_news .box .box-description,
#csr_news .box .box-description,
#brigada_news .box .box-description,
#project_synergy_news .box .box-description
#learning_and_teaching_support_news .box .box-description,
#brigada_pagbasa_news .box .box-description,
#disaster_risk_reduction_news .box .box-description,
#national_economic_development_and_value_formation_news .box .box-description,
#learning_loss_recovery_program_news .box .box-description
/*#security_advisory .box .box-description*/ {
    background-color:#fdb930;
    color: #4E2784;
}

/*#corporate_social_responsibility .box .box-description*/
#security_advisory .box .box-description {
    background-color:#4E2784;
    color: #fff;
}






/*NEWS MODAL*/
.news-modal .modal-content {
    /*border-radius:0;background-clip:border-box;-webkit-box-shadow:none;box-shadow:none;border:none;min-height:100%;padding:100px 0;text-align:center*/
    border-radius:0;
    background-clip:border-box;
    -webkit-box-shadow:none;
    box-shadow:none;
    border:none;
    min-height:100%;
    /*min-width: 100%;*/
    /*padding:100px 0;*/
    /*text-align:center;*/

}

.news-modal .modal-content h2 {
    margin:0;font-size:3em
}

.news-modal .modal-content img {
    margin-bottom:30px
}

.news-modal .modal-content .item-details {
    margin:30px 0
}

.news-modal .modal-content .modal-header {
    text-align: center;
}

.modal-sunflower .modal-content .modal-header {
    background-color:#fdb930;
    color:#4E2784;
}

.modal-royal .modal-content .modal-header {
    background-color:#4E2784;
    color:#fff;
}

.news-modal .modal-header .close {
    color:#fff;
    opacity: 1;
}

.news-modal .modal hr.style {
    /*border-top: 1px solid #4E2784;*/
    border-top: 3px double #4E2784;
}

/*.news-modal .modal .modal-body p {
    color:#4E2784;
    font-size:19px;
}
*/



/*NEWS!!!*/
.news-modal .modal-body p {
    color:#4E2784;
    font-size: 16px;
    padding: 10px 0;
    text-align: justify;
}

.news-modal .modal-body .caption {
    color:#4E2784;
    font-size: 14px;
    /*padding: 10px 0 0 0;*/
    text-align: center;
    color: #fdb930;

}

.news-modal .modal-body a {
    color: #fdb930 ;
}

hr.modal-news { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}






/*ABOUT US SECTION CSS*/
/*######################################################################################################*/

#about_us {
    background: #e2e2e2;
    padding: 20px 0;
}

#about_us > h1  {
    /*font-weight: bold;*/
    /*font-stretch: ultra-condensed;*/
    color:#4E2784;
    font-size: 30px;
    text-align: center;
    font-family: Impact, Arial;
}

#about_us .about-top {
    background: #fff;
    border-radius:15px;
    padding-top: 20px;
    margin-top: 20px;
}

#about_us .about-bottom {
    /*background: #fdb930;*/
    background: #fdb930;
    border-radius:15px;
    margin-top: 20px;
}

#about_us .about-top-content h4 {
    color: #4E2784;
    font-size: 19px;
    text-align: justify;
}

#about_us .about-top-content h4 a {
    color:#4E2784;
    font-weight: bold;
    font-size: 17px;
}

#about_us .about-top-content h4 a:hover{
    color:#fdb930;
}

#about_us .about-top-content h3 {
    color: #fdb930;
    font-weight: bolder;
    font-size: 32px;
}

#about_us .about-top-content {
    padding: 0 100px 50px 100px;
}


#about_us .about-bottom-right {
    padding: 50px 10px ;
}

#about_us .about-bottom-right h4, 
#about_us .about-bottom-right h1 {
    color: #4E2784;
}

#about_us .about-bottom-right h1 {
    /*font-weight: bolder;*/
    /*font-stretch: ultra-condensed;*/
    font-family: Impact, Arial;
    font-size:37px;

}
#about_us_video_section {
    padding: 10px 40px 40px 30px;
    width: 85% !important;
    margin: 0 auto;
}

.about_us_left, .about_us_right {
    margin:50px 34px 40px 0px;   
}

.about_us_right h3 {
    color: #fdb930; 
    font-weight: bold; 
    font-family: system-ui;
}

.about_us_right p {
    color: #4E2784;
    font-size: 18px;
}

/* @media screen and (max-width: 360px) {    
    .about_us_video {
        width:320px !important;
        height: 200px !important;
    }
    #about_us_video_section {
        margin: 0px 0px !important;
        padding: 0px !important;
    }
    
    .about_us_left, .about_us_right {
        margin:0;   
    }
} */

@media (max-width: 467px) {
    #about_us .about-top-content {
        padding:0 0 10px 0;
    }
    .about_us_video {
        width:320px !important;
        height: 200px !important;
    }
    #about_us_video_section {
        margin: 0px 0px !important;
        padding: 0px !important;
    }
    
    .about_us_left, .about_us_right {
        margin:0;   
    }
}

@media (min-width: 468px) and (max-width: 767px) {
    #about_us .about-top-content {
        /*padding: 0 150px 50px 150px;*/
        padding:0 10px 20px 10px;
    }

    #about_us_video_section {
        margin: 0px 0px !important;
        padding: 0px !important;
    }
    .about_us_video {
        width:680px !important;
        height: 400px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #about_us .about-top-content {
        /*padding: 0 150px 50px 150px;*/
        padding:0 20px 20px 20px;
    }
    #about_us_video_section {
        margin: 0px 0px !important;
        padding: 0px !important;
    }
    .about_us_video {
        width:740px !important;
    }
}

@media screen and (min-width:1024px) and (max-width:1279px) {
    .about_us_video {
        width: 440px;
        height: 300px;
    }
    .about_us_left {
        margin-top:140px;
    }

}
@media screen and (min-width:1280px) {
    .about_us_video {
        width: 560px;
        height: 360px;
    }
    .about_us_left {    
        margin-top:140px;
    }
}


#about_us .about-bottom img {
    /*height: 228px;*/
    /*padding: 15px 0 0 0 ;*/
    padding: 40px 0 0 0 ;
}

@media (max-width: 767px) {
    #about_us .about-bottom img {
        padding-top: 20px ;
    }

    #about_us .about-bottom-right {
        padding: 20px;
    }

}


/*######################################################################################################*/








#news_and_stories {
    padding: 50px 0;
}

#news_and_stories h4 {
    color:#4E2784;
    font-size: 17px;
}

#news_and_stories h4 a {
    color:#4E2784;
    font-weight: bold;
    font-size:17px;
}


#news_and_stories h4 a:hover{
    color:#fdb930;
}




/*ADVISORY*/
/*######################################################################################################*/
#advisory {
    padding: 20px 0;
}

#advisory h1,
#news_and_stories h1 {
    text-align: center;
    font-weight: bolder;
    font-size:38px;
    color:#fdb930;
    /*font-family: Impact, Arial;*/
}


#advisory_modal .modal-body h4 {
	font-size:18px;
	color:#4E2784;
	/*text-align: justify;*/
}

#advisory_modal .modal-body h4 small {
    color:#4E2784;
}

#advisory h4 {
    color:#4E2784;
    font-size:18px;
    text-align: justify;
}

#advisory h5 {
	color:#4E2784;
	text-align: justify;
}

#advisory h5 span,
#advisory h4 span,
#advisory_modal .modal-body h4 span {
	color:#c62582;
    font-weight: bold;
}

#advisory h4 a {
    color:#4E2784;
    font-weight: bold;
    font-size:18px;
}

#advisory h4 a:hover,
#advisory h4 a:active,
#advisory_modal .modal-body h4 a:hover,
#advisory_modal .modal-body h4 a:active {
    color:#fdb930;
}

#advisory_modal .modal-body h2 {
    text-align: center;
    color:#fdb930;
    font-weight: bold;
}

#advisory_modal .modal-body h4,
#advisory_modal .modal-body h4 a {
    color:#4E2784;
}

#advisory_modal .modal-body h4 a {
    font-weight: bold;
}

#advisory_modal .modal-body {
    /*padding: 0 15px 15px 15px;*/
    padding: 10px;
}

#advisory_modal .modal-footer {
    padding: 0 20px 20px 20px;
}

#advisory_modal .modal-header {
    border: 0;
    padding: 10px 15px 0 0;
}

#advisory_modal .modal-footer {
    border: 0;
}

#advisory_modal .modal-header .close {
    color:#4E2784;
    font-size: 18px;
    opacity: 1;
}

/*MODAL BACKDROP*/
.modal-backdrop.in {
    opacity: 0.9;
    background-color: #4E2784;
}

#advisory_modal {
    /*padding-top:5%;*/
    padding-top:1%;
}

#advisory_modal .modal-content {
    border-radius: 20px;
}



/*SERVICES SECTION CSS*/
/*######################################################################################################*/
#services h4 {
    color:#4E2784;
    font-weight: bold;
    font-size: 15px;
}

#services .services-header {
    padding:0;
}

#services .services-content {
    padding-left:22px;
}

#services span {
    color:#fdb930;
}

#services p {
    color: #4E2784;
    font-size: 15px;
    /*text-align: justify;*/
}

#services {
    padding: 30px 0;
}

.vertical-divider{
    border-left:2px solid #e2e2e2;
}

/*######################################################################################################*/


/*PRODUCTS SECTION CSS*/
/*######################################################################################################*/
#products {
    color:#4E2784;
    /*font-weight: bold;*/
    text-align: center;
}

#products .product-left {
    background-color: #8fd2c9;
    height: 90px;
    padding-top: 5px;
}

#products .product-left p,
#products .product-right p {
    font-family: Impact, Arial;
    font-size: 32px;
    padding-top: 10px;
}

#products .product-left h4,
#products .product-right h4 {
    font-size: 18px;
}

#products .product-right {
    background-color: #d9db56;
    height: 90px;
    padding-top: 5px;
}

#products .product-btn {
    padding:15px 0;
}

@media (min-width: 1200px) and (max-width: 1600px) {
    #products .product-btn {
        padding:30px 0;
    }
}

@media (max-width: 991px) {
    #products .product-left,
    #products .product-right {
        height: auto;
    }
}

@media (min-width: 992px) and (max-width: 1069px) {
    #products .product-left,
    #products .product-right {
        height: 180px;
    }
}

@media (min-width: 1070px) and (max-width: 1199px) {
    #products .product-left,
    #products .product-right {
        height: 150px;
    }
}

/*@media (min-width: 1074px) and (max-width: 1201px) {
    #products .product-left,
    #products .product-right {
        height: 140px;
    }

}*/

/*@media (min-width: 1200px) and (max-width: 1230px) {
    #products .product-left,
    #products .product-right {
        height: 130px;
        padding-top: 5px;
    }
}*/

@media (min-width: 1200px) and (max-width: 1300px) {
    #products .product-left,
    #products .product-right {
        /*height: 105px;*/
        height: 110px;
    }

    #products .product-left p,
    #products .product-right p {
        font-size: 30px;
        /*padding-top: 10px;*/
    }

    #products .product-left h4,
    #products .product-right h4 {
        font-size: 16px;
    }

    .btn-learn {
        font-size: 14px !important;
    }


}

@media (min-width: 1301px) and (max-width: 1449px) {
    #products .product-left,
    #products .product-right {
        /*height: 105px;*/
        height: 120px;
    }

    .btn-learn {
        font-size: 15px !important;
    }
}

@media (min-width: 1450px) and (max-width: 1762px) {
    #products .product-left,
    #products .product-right {
        /*height: 105px;*/
        height: 115px;
    }
}

@media (min-width: 1763px) and (max-width: 1822px) {
    #products .product-left,
    #products .product-right {
        /*height: 105px;*/
        height: 95px;
    }
}


/*PRODUCTS*/
/*######################################################################################################*/


/*BUTTONS*/
/*######################################################################################################*/
.btn-learn,
.btn-apply,
.btn-map {
    border-radius: 15px;
    transition:all .3s ease-in-out;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-motormoto {
    border-radius: 15px;
    transition:all .3s ease-in-out;
    font-weight: bold;
}

#back_point {
    padding: 8px 60px;
    border-radius: 15px;
}

.btn-learn,
.btn-motormoto {
    font-size: 17px;
    color:#4E2784;
    background: #fdb930;
}

.btn-apply {
    background: #4E2784;
    color:#fdb930;
    font-size: 17px;
    padding: 5px 35px;
}

.btn-apply-below {
    color: #4E2784;
    background-color: transparent;
    border-radius: 15px;
    cursor: default;
    padding: 5px 35px;
    font-weight: bold;
    border: 2px solid #4E2784;
    font-size: 17px;
}

.btn-map {
    background: #4E2784;
    color:#fff;
    padding: 5px 35px;
    font-size: 17px;
}

.btn-subscribe {
    color: #fff;
    background: #fdb930;
    font-size: 17px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
}

.btn-search {
    font-size: 17px;
    letter-spacing: 1px;
    color:#fff;
    background:#fdb930;
    font-weight: bold;
    padding: 10px 45px;
    border-radius: 15px;
}

.btn-submit {
    font-size:17px;
    letter-spacing: 1px;
    color:#4E2784;
    background:#fdb930;
    font-weight: bold;
    padding: 10px 45px;
    border-radius: 15px;
    text-transform: uppercase;
}

.btn-modal-close {
    background: #4E2784;
    color:#fff;
    padding:10px 50px;
    border-radius: 15px;
    text-transform: uppercase;
    font-weight: bold;
    font-size:16px;
}

.modal .btn-modal-close:hover,
.modal .btn-modal-close:focus {
    color:#fdb930;
    background:#4E2784;
}

.btn-apply:hover,
.btn-apply:active,
.btn-apply:focus {
    /*background:rgba(0,0,0,.5);*/
    color:#fff;
}

.btn-map:hover,
.btn-map:active,
.btn-map:focus {
    color:#fdb930;
}

.btn-search:hover,
.btn-search:active,
.btn-search:focus {
    color: #fdb930;
    background:#4E2784;
}

.btn-submit:hover,
.btn-submit:active,
.btn-submit:focus {
    color:#fdb930;
    background: #4E2784;
}

.btn-learn:hover,
.btn-learn:active,
.btn-learn:focus {
    color:#fdb930;
    background:#4E2784;
}

.btn-motormoto:hover,
.btn-motormoto:active,
.btn-motormoto:focus {
    color:#fdb930;
    background:#4E2784;
}

.btn-subscribe:hover,
.btn-subscribe:active,
.btn-subscribe:focus {
    color:#4E2784;
}

/*######################################################################################################*/


/*HOME - CSB CAROUSEL*/
/*######################################################################################################*/
#csb-carousel .carousel-control {
    background:rgba(0,0,0,.5);
    height: 44px;
    top:40%;
    width: 33px;
}

#csb-carousel .carousel-control .glyphicon-chevron-left {
    left: 12px;
    top: 15px;
}

#csb-carousel .carousel-control .glyphicon-chevron-right {
    right: 12px;
    top: 15px;
}

@media (max-width: 767px) {
    #csb-carousel .carousel-control {
        height: 30px;
        width: 25px;
    }
}
/*######################################################################################################*/





/*MOTOR MOTO CAROUSEL*/
/*######################################################################################################*/

#motor-moto-carousel {
    display: inline-block;
}

#motor-moto-carousel .carousel-control {
    background:rgba(0,0,0,.5);
    height: 44px;
    top:40%;
    width: 33px;
}

#motor-moto-carousel .carousel-control .glyphicon-chevron-left {
    left: 12px;
    top: 15px;
}

#motor-moto-carousel .carousel-control .glyphicon-chevron-right {
    right: 12px;
    top: 15px;
}

.motor-moto-carousel-text{
    text-align: center;
    text-transform: none;
    font-family: Calibri;
    color: black;
    letter-spacing:3px;
    font-size: 20px;
}

@media (max-width: 767px) {
    #motor-moto-carousel .carousel-control {
        height: 30px;
        width: 25px;
    }
}

.motor-moto-line {

   margin: auto; 
   width: 80%;
}

.hr_motor_moto {
    border: 2px dotted #fdb930;
}


/*######################################################################################################*/





/*MC CARAVAN - CAROUSEL*/
/*######################################################################################################*/
#mc-caravan-carousel .carousel-control {
    background:rgba(0,0,0,.5);
    height: 44px;
    top:40%;
    width: 33px;
}

#mc-caravan-carousel .carousel-control .glyphicon-chevron-left {
    left: 12px;
    top: 15px;
}

#mc-caravan-carousel .carousel-control .glyphicon-chevron-right {
    right: 12px;
    top: 15px;
}

@media (max-width: 767px) {
    #mc-caravan-carousel .carousel-control {
        height: 30px;
        width: 25px;
    }
}
/*######################################################################################################*/




/*TIMELINE*/
/*######################################################################################################*/
#timeline {
    padding: 20px 0;
    background: #e2e2e2;
}

#timeline h1 {
    color:#fdb930;
    font-size: 41px;
    font-family: Impact, Arial;
    padding-left: 30px;
    font-weight: bold;
}

.timeline {
    list-style: none;
    padding: 30px;
    position: relative;
}

.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    /*content: " ";*/
    content: " ";
    /*border:3px dashed #fdb930;*/
    border-left: 8px dotted #fdb930;
    left: 50%;
    margin-left: -1.5px;
}

.timeline > li {
    margin-bottom: 20px;
    position: relative;
    /*margin-right:-30px;*/
}

.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}



.timeline > li > .timeline-panel {
    width: 43%;
    float: left;
    /*border: 1px solid #d4d4d4;*/
    /*border: 1px solid red;*/
    /*border-radius: 2px;*/
    /*padding: 20px;*/
    position: relative;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    padding: 20px;
    background-color: #fff;
}

.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    /*right: -35px;*/
    /*right: -45px;*/
    display: inline-block;
    border-top: 15px solid transparent;
    /*border-top: 50px solid transparent;*/
    /*border-left: 50px solid #ccc;*/
    border-left: 15px solid #ccc;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    /*border-bottom: 50px solid transparent;*/
    content: " ";
}
.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    /*right: -35px;*/
    display: inline-block;
    border-top: 14px solid transparent;
    /*border-top: 50px solid transparent;*/
    /*border-left: 50px solid #fff;*/
    border-left: 14px solid #fff;
    border-right: 0 solid #fff;
    border-bottom: 14px solid transparent;
    /*border-bottom: 50px solid transparent;*/
    content: " ";
}

.timeline > li > .timeline-badge {
    /*color: #fff;*/
    /*color:blue;*/
    /*width: 24px;*/
    /*height: 24px;*/
    /*width: 50px;*/
    /*line-height: 30px;*/
    /*line-height: 150px;*/
    /*font-size: 1.4em;*/
    /*font-size: 8em;*/
    /*text-align: center;*/
    position: absolute;
    top: -15px;
    left: 50%;
    /*margin-left: -12px;*/
    margin-left: -50px;
    /*background-color: #999999;*/
    z-index: 100;
    /*padding:0 -10px;*/
  
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    /*left: -35px;*/
    right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timeline-body > p,
.timeline-body > ul {
    padding:20px;
    margin-bottom: 0;
    color:#4E2784;
    font-size:17px;
    text-align: justify;
}


#timeline .circle-text {
    width: 100px;
}

#timeline .circle-text:after {
    content: "";
    display: block;
    width: 100%;
    height:0;
    padding-bottom: 100%;
    background: #4E2784; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}

#timeline .circle-text div {
    float:left;
    width:100%;
    padding-top:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
    /*color:white;*/
    color:#fdb930;
    font-weight: bold;
    font-size: 30px;
}


@media (max-width: 767px) {

    .timeline {
        padding: 10px;
    }

    .timeline > li > .timeline-panel {
        padding: 5px;
    }

    #timeline .circle-text {
        width:60px;
    }

    #timeline .circle-text div {
        font-size: 18px;
    }

    ul.timeline:before {
        /*left: 30px;*/
        left: 35px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: -2px;
        margin-left: 0;
        top: 16px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }
  
    ul.timeline > li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }

    ul.timeline > li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }

}

@media (min-width: 768px) and (max-width: 991px) {
    .timeline {
        padding: 10px;
    }

    .timeline > li > .timeline-panel {
        padding: 10px;
    }

    #timeline .circle-text {
        width:65px;
    }


    #timeline .circle-text div {
        font-size: 20px;
    }

    .timeline > li > .timeline-badge {
         margin-left: -30px;
         top: 10px;
    }


}

@media (min-width: 992px) and (max-width: 1050px) {
    #timeline .circle-text {
        width:75px;
    }

    .timeline > li > .timeline-badge {
        margin-left: -35px;
        top: 5px;
    }

}



/*######################################################################################################*/






/*BRANCHES LOCATOR*/
/*######################################################################################################*/
#branches .carousel-inner {
    border-radius: 20px;
    background: #fdb930;
}

/* Previous button  */
#branches .media-carousel .carousel-control.left {
  left: -12px;
  background: none repeat scroll 0 0 #4E2784;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 150px
}

/* Next button  */
#branches .media-carousel .carousel-control.right {
  right: -12px !important;
  background: none repeat scroll 0 0 #4E2784;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 150px
}


/* Changes the position of the indicators */
#branches .media-carousel .carousel-indicators {
    right: 50%;
    top: auto;
    bottom: -20px;
}

/* Changes the colour of the indicators */
#branches .media-carousel .carousel-indicators li {
    background: transparent;
    border:2px solid #4E2784;
    height: 15px;
    width: 15px;
}

#branches .media-carousel .carousel-indicators .active {
    background: #4E2784;
}


#branches .media-carousel img {
    padding:30px;
}

#branches .branches-details {
    padding: 30px;
}

#branches {
    padding: 50px 0;
}

#branches h1 {
    color:#fdb930;
    font-weight: bold;
    font-family: Impact, Arial;
    font-size:41px;
}

#branches h3 {
    color:#4E2784;
    font-size:17px;
}

#branches .col-md-4 h3 {
    font-weight: bold;
}

#branches .branches-details h3 {
    color:#4E2784;
    font-weight: bold;
    font-size:20px;
}

#branches .branches-details h4 {
    font-size:17px;
    /*color: #4E2784;*/
}


#branches .branches-details .branch-address,
#branches .branches-details small {
    color: #4E2784;
    font-style: italic;
    font-size:15px;
}

/*#branches .branches-details .branch-numbers {
	color: #4E2784;
	font-weight: bold;

}*/

#branches .branches-details a {
    color: #4E2784;
    font-weight: bold;

}



#branches .branches-details .business-hrs {
	color:#4E2784;
	font-weight: bold;
}

#branches .branches-details small {
    /*font-size: 16px;*/
    /*font-weight: bold;*/
}
/* End carousel */


@media (max-width: 767px) {
    #branches .media-carousel img {
        padding:15px 10px 0 10px;
    }

    #branches .branches-details {
        padding: 0 20px 20px 25px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #branches .media-carousel img {
        padding:25px 20px 0 20px;
    }

    #branches .branches-details {
        padding: 0 20px 20px 40px;
    }

}

@media (min-width: 992px) and (max-width: 1010px) {
    #branches .media-carousel img {
        padding:50px 0 0 20px;
    }
}

@media (min-width: 1011px) and (max-width: 1070px) {
    #branches .media-carousel img {
        padding:40px 0 0 20px;
    }
}

@media (min-width: 1071px) and (max-width: 1120px) {
    #branches .media-carousel img {
        padding:30px 0 0 20px;
    }
}

@media (min-width: 1121px) and (max-width: 1150px) {
    #branches .media-carousel img {
        padding:30px 0 0 20px;
    }
}

@media (min-width: 1151px) and (max-width: 1199px)  {
    #branches .media-carousel img {
        padding:20px 0 0 20px;
    }
}

/*@media (min-width: 1191px) and (max-width: 1199px){
    #branches .media-carousel img {
        padding:20px 0 0 20px;
    }
}*/

@media (min-width: 1200px) and (max-width: 1245px) {
    #branches .media-carousel img {
        padding:55px 0 0 20px;
    }
}

@media (min-width: 1246px) and (max-width: 1340px) {
    #branches .media-carousel img {
        padding:40px 0 0 20px;
    }
}


@media (min-width: 1341px) and (max-width: 1420px) {
    #branches .media-carousel img {
        padding:30px 0 0 20px;
    }
}

@media (min-width: 1421px) and (max-width: 1470px) {
    #branches .media-carousel img {
        padding:25px 0 0 20px;
    }
}

@media (min-width: 1471px) and (max-width: 1500px) {
    #branches .media-carousel img {
        padding:20px 0 0 20px;
    }
}

@media (min-width: 1501px) and (max-width: 1550px) {
    #branches .media-carousel img {
        padding:15px 0 0 20px;
    }
}

@media (min-width: 1551px) and (max-width: 1580px) {
    #branches .media-carousel img {
        padding:10px 0 0 20px;
    }
}

@media (min-width: 1581px) and (max-width: 1600px) {
    #branches .media-carousel img {
        padding:8px 0 0 20px;
    }
}

@media (min-width: 1601px) {
    #branches .media-carousel img {
        padding:15px 0 20px 20px;
    }
}

/*##### GOOGLE MAP BRANCHES*/
#branches .media-carousel iframe {
    /*padding: 15px;*/
    padding-top: 15px;
    padding-left: 15px;
    padding-right:15px;
    padding-bottom: 10px;
    width: 100%;
    height: 320px;
}


.number_circle {
    border-radius: 50%;
    /*width: 36px;*/
    width: 36px;
    height: 36px;
    background: #fdb930;
    margin-top: 15px;
    /*border: 2px solid #666;*/
    /*color: #666;*/
    text-align: center;
    font-size: 21px;
    font-weight: bold;
    /*vertical-align: middle;*/
    /*font: 30px;*/
    color:#4E2784;
}

#branches .search-header {
    display: inline-flex;
    padding-top: 20px;
}

#branches .search-header h3 {
    padding-left:20px;
}

#branches .form-control {
    border-radius: 12px;
    border: 2px solid #fdb930;
}


#branches .form-group select,
#branches .bootstrap-select .btn {
    border-radius: 12px !important;
    border: 2px solid #fdb930;
}


#branches .bootstrap-select.btn-group .dropdown-toggle .caret {
    color:#fdb930;
}

#branches .bootstrap-select .btn {
    color:#4E2784;
    /*font-size: 20px;*/
}

#branches .bootstrap-select option {
    color:#4E2784;
}

/*######################################################################################################*/





/*COMPANY GOVERNANCE*/
/*######################################################################################################*/
#company_governance  {
    padding: 50px;
    background-image: url('../img/banners/About_us.jpg');
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
}

#company_governance h1 {
    font-family: Impact, Arial;
    font-weight: bold;
    color:#fdb930;
    font-size:41px;
    /*font-stretch: ultra-condensed;*/
}

#company_governance p {
    font-size: 21px;
    color:#4E2784;
    text-align: justify;
}

@media (max-width: 767px) {
    #company_governance {
        padding: 15px;
    }
}


/*######################################################################################################*/


/*OUR VISION*/
/*######################################################################################################*/
#our_vision {
    padding: 50px;
}

#our_vision .vision_left {
    padding:0;
}

#our_vision .vision_right {
    padding-left: 40px;
    margin-top:15px;
}

#our_vision .vision_right h1 {
    font-family: Impact, Arial;
    font-weight: bold;
    color:#fdb930;
    font-size:41px;
}

#our_vision .vision_right p,
#our_vision .vision_right ul {
    font-size: 20px;
    color:#4E2784;
}


/*@media (max-width: 767px) {*/
@media (max-width: 799px) {
    #our_vision {
        padding: 15px;
    }

    #our_vision .vision_right {
        margin-top:0;
    }
}



/*@media (min-width: 768px) and (max-width: 799px) {

    #our_vision {
        padding: 20px;
        padding: 15px;
    }

    #our_vision .vision_right {
        padding: 0 30px;
        margin-top:0;
    }

    #our_vision .vision_right h1 {
        font-size: 27px;
    }

    #our_vision .vision_right p,
    #our_vision .vision_right ul {
        font-size: 11px;
    }
}*/

/*@media (min-width: 800px) and (max-width: 816px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_right {
        padding: 0 30px;
        margin-top:0;
    }

    #our_vision .vision_right h1 {
        font-size: 28px;
    }

    #our_vision .vision_right p,
    #our_vision .vision_right ul {
        font-size: 12px;
    }
}*/

/*@media (min-width: 817px) and (max-width: 881px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_right {
        padding: 0 30px;
        margin-top:0;
    }

    #our_vision .vision_right h1 {
        font-size: 29px;
    }

    #our_vision .vision_right p,
    #our_vision .vision_right ul {
        font-size: 13px;
    }
}*/


/*@media (min-width: 882px) and (max-width: 949px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_right {
        padding: 0 30px;
        margin-top:0;
    }

    #our_vision .vision_right h1 {
        font-size: 30px;
    }

    #our_vision .vision_right p,
    #our_vision .vision_right ul {
        font-size: 14px;
    }
}
*/
@media (min-width: 992px) and (max-width: 999px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 60px;
    }

    #our_vision .vision_right {
        padding: 0 30px;
        margin-top:0;
    }

    #our_vision .vision_right h1 {
        font-size: 28px;
    }

    #our_vision .vision_right p,
    #our_vision .vision_right ul {
        font-size: 14px;
    }
}

@media (min-width: 1000px) and (max-width: 1049px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 75px;
    }

    #our_vision .vision_right {
        padding: 0 30px;
        margin-top:0;
    }

    #our_vision .vision_right h1 {
        font-size: 32px;
    }

    #our_vision .vision_right p,
    #our_vision .vision_right ul {
        font-size: 16px;
    }
}

@media (min-width: 1050px) and (max-width: 1139px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 75px;
    }

    #our_vision .vision_right {
        padding: 0 30px;
        margin-top:0;
    }

    #our_vision .vision_right h1 {
        font-size: 35px;
    }

    #our_vision .vision_right p,
    #our_vision .vision_right ul {
        font-size: 18px;
    }
}

@media (min-width: 1140px) and (max-width: 1179px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 80px;
    }
    
    #our_vision .vision_right {
        padding: 0 30px;
        margin-top:0px;
    }

}

@media (min-width: 1180px) and (max-width: 1280px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 85px;
    }

    #our_vision .vision_right {
        padding: 0 30px;
        margin-top:0px;
    }

}

/*@media (min-width: 1200px) and (max-width: 1280px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_right {
        padding: 0 40px;
        margin-top:30px;
    }

}*/

@media (min-width: 1281px) and (max-width: 1366px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 85px;
    }

    #our_vision .vision_right {
        padding: 0 50px;
        margin-top:0;
    }

}

@media (min-width: 1367px) and (max-width: 1399px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 70px;
    }

    #our_vision .vision_right {
        padding: 0 50px;
        margin-top:0;
    }

}

@media (min-width: 1400px) and (max-width: 1498px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 60px;
    }

    #our_vision .vision_right {
        padding: 0 50px;
        margin-top:0;
    }

}

@media (min-width: 1499px) and (max-width: 1599px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 40px;
    }

    #our_vision .vision_right {
        padding: 0 70px;
        margin-top:0;
    }

}

@media (min-width: 1600px) and (max-width: 1800px) {

    #our_vision {
        padding: 20px;
    }

    #our_vision .vision_left {
        margin-top: 20px;
    }

    #our_vision .vision_right {
        padding: 0 70px;
        margin-top:0;
    }

}

/*######################################################################################################



/*CAREER*/
/*######################################################################################################*/
#career-better-world h2 {
    color: #4E2784;
    /*font-weight: bolder;*/
    font-family: Impact, Arial;
    /*font-stretch: ultra-condensed;*/
    font-size:30px;
    text-align: center;
}

#career-better-world p {
    text-align: center;
    color:#4E2784;
    font-size:18px;
}

#career-better-world .career-better-content {
    padding: 40px 60px;
}

@media (max-width: 467px) {
    #career-better-world .career-better-content {
        padding: 10px;
    }
}

@media (min-width: 468px) and (max-width: 767px) {
    #career-better-world .career-better-content {
        padding: 30px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #career-better-world .career-better-content {
        padding: 50px;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    #career-better-world .career-better-content {
        padding: 20px;
    }
}

@media (min-width: 1280px) and (max-width: 1440px) {
    #career-better-world .career-better-content {
        padding: 30px;
    }
}

@media (min-width: 1441px) and (max-width: 1680px) {
    #career-better-world .career-better-content {
        padding: 30px;
    }
}
/*######################################################################################################*/


#apply_now {
    /*padding: 20px;*/
    background-color:#fdb930;
}

#apply_now .apply_now {
     padding: 30px 0 ;
}


#apply_now .apply_now h4,
#apply_now .apply_now h1 {
    color: #4E2784;
}


#apply_now .apply_now h1 {
    /*font-weight: bolder;*/
    /*font-stretch: ultra-condensed;*/
    font-family: Impact, Arial;
    font-size: 30px;
}





/*CONTACT US*/
/*######################################################################################################*/

#contact_us {
    padding: 10px 80px 80px 80px;
}

#contact_us h1 {
    color: #fdb930;
    font-family: Impact, Arial;
    font-size: 41px;
    text-align: center;
}

#contact_us p {
    color:#4E2784;
    font-size:18px;
}

#contact_us .contact_right {
	/*padding-top: 30px;*/
}

#contact_us .contact_right form{
    padding-top: 15px;
    /*padding-left: 200px;*/
    /*text-align: center;*/
}

#contact_us .contact_right label {
    color: #4E2784;
    font-size: 18px;
}

#contact_us .contact_right .form-control {
    border: 2px solid #fdb930;
    border-radius: 15px;
}

#contact_us .contact_right .img-thumbnail {
    border: 2px solid #fdb930;
    border-radius: 10px;
}

#contact_us #captcha_image {
    border: 1px solid #4E2784;
}

#contact_us .fa-envelope {
    vertical-align: middle;
    font-size: 40px;
    color: #4E2784;
}

#contact_us .fa-phone {
    font-size: 50px;
    padding-top: 12px;
    color:#4E2784;
}

#contact_us .email {
    color: #fdb930;
    font-size:17px;
    padding-left: 20px;
}

#contact_us .contact_details {
    /*margin-left: 65px;*/
    padding-left: 10px;
    overflow: hidden;
}

#contact_us .contact_details h6 {
    color: #fdb930;
    font-size:16px;
}

#contact_us .bootstrap-select .btn {
    border-radius: 15px !important;
    border: 2px solid #fdb930;
}

#contact_us .bootstrap-select.btn-group .dropdown-toggle .caret {
    color:#fdb930;
}

#contact_us .bootstrap-select .btn {
    color:#4E2784;
}

#contact_us .bootstrap-select option {
    color:#4E2784;
}

#contact_us .banknet img{
    height: 30px;
}

#contact_us .contact_margin1 {
	margin-top:23px;
}

#contact_us #captcha_refresh {
	color: #4E2784;
	background-color: #fdb930;
    border-color:#4E2784;
}

#contact_us .contact_fb_messenger a {
    font-size: 16px;
    color: #fdb930;
}

#contact_us .contact_fb_messenger span {
    margin-left: 15px;
}

@media (max-width: 381px) {
    #contact_us {
        padding: 0;
    }

    #contact_us .fa-envelope {
        font-size: 30px;
    }

    #contact_us .fa-phone {
        font-size: 40px;
    }

    #contact_us .contact_details {
        padding-left:5px;
    }

    #contact_us .contact_details h6 {
        font-size:14px;
    }

    #contact_us .contact_fb_messenger a {
        font-size: 14px;
    }

    #contact_us .contact_fb_messenger img {
        height: 40px;
    }

    #contact_us .contact_fb_messenger span {
        margin-left: 10px;
    }

    #contact_us .email {
        font-size:14px;
        padding-left:13px;
    }

}


@media (max-width: 467px) {
	#contact_us {
		padding: 0 5px 40px 5px;
	}

	#contact_us .contact_left {
		padding-bottom: 50px;
	}
}


@media (min-width: 468px) and (max-width: 767px) {
	#contact_us {
		padding: 0 10px 40px 10px;
	}

	#contact_us .contact_left {
		padding-bottom: 50px;
	}

}

@media (min-width: 768px) and (max-width: 1026px) {
	#contact_us {
		padding: 0 15px 40px 15px;
	}

	#contact_us .contact_left {
		padding-bottom: 50px;
	}

}


/*######################################################################################################*/





/*LOANS*/
/*######################################################################################################*/
#how_to_apply,
#download_form {
    padding: 20px;
    text-align: center;
    color:#4E2784;
}

#how_to_apply h2,
#download_form h2 {
    font-weight: bold;
}

#how_to_apply small a,
#download_form small a{
    color:#4E2784;
}

#download_form small a:hover{
    color:#fff;
}

#how_to_apply small a:hover {
    color:#fdb930;
}

#how_to_apply {
    background-color: #e2e2e2;
}

#download_form {
    background-color: #fdb930;
}

#requirements {
    padding-top: 50px;
}

#loan {
    padding-bottom: 50px;
}

#requirements .qualifications,
#requirements .requirements,
#loan .new_loan,
#loan .reloan {
    padding: 0 50px;
}

#requirements .qualifications-header {
    background-color: #8fd2c9;
    padding: 0 20px;
}

#requirements .requirements-header {
    background-color: #d9db56;
    /*padding: 100px 0 20px 20px;*/
    padding: 0 20px;
}

#requirements .requirements-content,
#requirements .qualifications-content {
    padding: 20px 0;
}


#loan .reloan-header,
#loan .new_loan-header {
    background-color: #fdb930;
    padding: 0 20px;
    /*padding: 100px 0 20px 20px;*/
}

#loan .reloan-content,
#loan .new_loan-content {
    background-color: #e2e2e2;
    padding: 20px 0;
}

#loan .new_loan-header h1,
#loan .reloan-header h1,
#requirements .qualifications-header h1,
#requirements .requirements-header h1 {
    color:#4E2784;
    font-weight: bold;
    font-size:28px;
}

#loan .new_loan-content li,
#loan .reloan-content,
#requirements .qualifications-content li,
#requirements .requirements-content li {
    color: #4E2784;
    font-size: 22px;

}

#loan .new_loan-content li p,
#loan .reloan-content li p {
    padding-left: 30px;
}


@media (max-width: 467px) {
    #requirements {
        padding: 20px 0 20px 0;
    }

    #requirements .requirements {
        padding:0 10px;
    }

    #requirements .qualifications {
        padding:0 10px;
    }

    #requirements .qualifications-header {
        /*padding: 100px 0 0 0;*/
        text-align: center;
    }

    #requirements .requirements-header {
        /*padding: 100px 0 0 0;*/
        text-align: center;
    }

    #loan {
        padding: 0 0 20px 0;
    }

    #loan .new_loan {
        padding: 0 10px 20px 10px;
    }

    #loan .reloan {
        padding: 0 10px;
    }
}



/*######################################################################################################*/


#deposits,
#atm_account {
    color:#4E2784;
    padding: 30px 0;
    background:#fff;
}

#deposits h3 {
    font-weight: bold;
    text-align: center;
    font-size:32px;
}

#deposits h4 {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

#deposits h1 {
    font-weight: bold;
    font-size:83px;
    text-align: center;
}

#deposits h2 {
    font-weight: bold;
}

#deposits p {
    font-size: 19px;
}

#deposits hr,
#savings_account hr {
    border: 2px dashed #4E2784;
}

#deposits .deposits-left {
    background-color: #fdb930;
    padding: 20px;
    height:1800px;
}

#deposits .deposits-middle {
    background-color: #d9db56;
    padding:20px;
    height:1800px;
}

#deposits .deposits-right {
    background-color: #8fd2c9;
    padding: 20px;
    height:1800px;
}

#deposits .deposits-bottom {
    /*padding: 800px 0 0 80px;*/
    padding-left: 80px;
    /*padding: 20px 80px;*/
}

#atm_account .deposits-bottom {
    padding-left: 80px;
}

#atm_account .deposits-bottom h2 {
    font-size:19px;
    font-weight: bold;
}



#deposits .deposits-bottom h2 {
    font-size:19px;
}

#deposits .deposits-content {
    padding: 50px;
    border: 5px solid #4E2784;
    height: 1760px;
}

#deposits .deposits-margin {
    padding:0 50px;
    padding-bottom: 30px;
}

@media (max-width: 467px) {
    #deposits {
        padding: 5px 0;
    }

    #deposits .deposits-margin {
        padding:2px;
    }

    #deposits .deposits-bottom,
    #atm_account .deposits-bottom {
        padding-left: 0;
    }


    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 10px;
        height: auto;
    }

    #deposits .deposits-content {
        padding: 10px;
        height: auto;
    }
}

@media (min-width: 468px) and (max-width: 767px) {
    #deposits {
        padding: 10px 0;
    }

    #deposits .deposits-margin {
        padding:20px 20px;
    }

    #deposits .deposits-bottom,
    #atm_account .deposits-bottom {
        padding-left: 20px;
    }

    #deposits .deposits-content,
    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 20px;
        height: auto;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #deposits .deposits-margin {
        padding:10px 50px;
    }

    #deposits .deposits-content,
    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        height: auto;
    }
}

@media (min-width: 992px) and (max-width: 1024px) {
    #deposits {
        padding: 10px 0;
    }

    #deposits .deposits-margin {
        padding:20px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 10px;
        /*height: 960px;*/
        height: 1990px;
    }

    #deposits .deposits-content {
        padding: 10px;
        height: 1970px;
    }
}

@media (min-width: 1025px) and (max-width: 1100px) {
    #deposits {
        padding: 20px 0;
    }

    #deposits .deposits-margin {
        padding:10px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 10px;
        height: 1970px;
    }

    #deposits .deposits-content {
        padding: 10px;
        height: 1950px;
    }
}

@media (min-width: 1101px) and (max-width: 1125px) {
    #deposits {
        padding: 20px 0;
    }

    #deposits .deposits-margin {
        padding:10px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 10px;
        height: 1960px;
    }

    #deposits .deposits-content {
        padding: 10px;
        height: 1940px;
    }
}

@media (min-width: 1126px) and (max-width: 1179px) {
    #deposits {
        padding: 20px 0;
    }

    #deposits .deposits-margin {
        padding:10px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 10px;
        height: 1910px;
    }

    #deposits .deposits-content {
        padding: 10px;
        height: 1890px;
    }
}

@media (min-width: 1180px) and (max-width: 1199px) {
    #deposits {
        padding: 20px 0;
    }

    #deposits .deposits-margin {
        padding:10px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 10px;
        height: 1840px;
    }

    #deposits .deposits-content {
        padding: 10px;
        height: 1820px;
    }
}

@media (min-width: 1200px) and (max-width: 1250px) {
    #deposits .deposits-margin {
        padding:10px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 15px;
        height: 1980px;
    }

    #deposits .deposits-content {
        padding: 20px;
        height: 1950px;
    }
}

@media (min-width: 1251px) and (max-width: 1269px) {
    #deposits .deposits-margin {
        padding:10px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 15px;
        height: 1910px;
    }

    #deposits .deposits-content {
        padding: 20px;
        height: 1880px;
    }
}

@media (min-width: 1270px) and (max-width: 1310px) {
    #deposits .deposits-margin {
        padding:10px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 15px;
        height: 1850px;
    }

    #deposits .deposits-content {
        padding: 20px;
        height: 1820px;
    }
}

@media (min-width: 1311px) and (max-width: 1350px) {
    #deposits .deposits-margin {
        padding:10px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 15px;
        height: 1800px;
    }

    #deposits .deposits-content {
        padding: 20px;
        height: 1770px;
    }
}

@media (min-width: 1351px) and (max-width: 1440px) {
    #deposits .deposits-margin {
        padding:10px 20px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        padding: 15px;
        height: 1750px;
    }

    #deposits .deposits-content {
        padding: 20px;
        height: 1720px;
    }
}

@media (min-width: 1441px) and (max-width: 1485px) {
    #deposits .deposits-margin {
        padding:10px 30px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        height: 2040px;
    }

    #deposits .deposits-content {
        height: 2000px;
    }
}

@media (min-width: 1486px) and (max-width: 1539px) {
    #deposits .deposits-margin {
        padding:10px 30px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        height: 1980px;
    }

    #deposits .deposits-content {
        height: 1940px;
    }
}


@media (min-width: 1540px) and (max-width: 1580px) {
    #deposits .deposits-margin {
        padding:10px 30px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        height: 1900px;
    }

    #deposits .deposits-content {
        height: 1860px;
    }
}

@media (min-width: 1581px) and (max-width: 1620px) {
    #deposits .deposits-margin {
        padding:10px 30px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        height: 1840px;
    }

    #deposits .deposits-content {
        height: 1800px;
    }
}

@media (min-width: 1621px) and (max-width: 1680px) {
    #deposits .deposits-margin {
        padding:10px 30px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        height: 1780px;
    }

    #deposits .deposits-content {
        height: 1740px;
    }
}

@media (min-width: 1681px) and (max-width: 1740px){
    #deposits .deposits-margin {
        padding:10px 50px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        height: 1870px;
    }

    #deposits .deposits-content {
        height: 1830px;
    }
}

@media (min-width: 1741px) and (max-width: 1881px){
    #deposits .deposits-margin {
        padding:10px 50px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        height: 1780px;
    }

    #deposits .deposits-content {
        height: 1740px;
    }
}

@media (min-width: 1882px) and (max-width: 2000px){
    #deposits .deposits-margin {
        padding:10px 50px;
    }

    #deposits .deposits-left,
    #deposits .deposits-middle,
    #deposits .deposits-right {
        height: 1680px;
    }

    #deposits .deposits-content {
        height: 1640px;
    }
}


/*DEPOSITS NEW*/
/*#deposits_new .tab-content {

    background-color:#fdb930;

}

#deposits_new .nav-tabs li{
    background-color: #4E2784;
    color:#fdb930;

}*/


#deposits_new .nav-tabs > li.active > a,
#deposits_new .nav-tabs > li.active > a:hover,
#deposits_new .nav-tabs > li.active > a:focus{
    color: #4E2784;
    background-color: #fdb930;  
    font-weight: bold;
    outline: none;
} 

#deposits_new .nav-tabs > li > a {
    color:#fdb930;
    background-color: #4E2784;
    font-weight: bold;
    font-size:20px;
}

#deposits_new .tab-content {
    background-color: #fdb930;
    padding: 20px;
}



@media (max-width: 467px) {
    #deposits_new .tab-content {
        padding: 5px;
    }
}

#atm_account .savings-content,
#atm_account .checking-content {
    padding: 20px 40px;
    border: 5px solid #4E2784;
    height: 550px;
}


#atm_account .savings-left {
    background-color: #d9db56;
    padding: 20px;
    /*height:2070px;*/
}


#atm_account .checking-right {
    background-color: #8fd2c9;
    padding: 20px;
    /*height:2070px;*/
}


#atm_account .savings-content h3,
#atm_account .checking-content h3 {
    font-weight: bold;
    font-size:32px;
    text-align: center;
}

#atm_account .savings-content p,
#atm_account .checking-content p {
    font-size:19px;
}

#atm_account .savings-content h4,
#atm_account .checking-content h4 {
    font-weight: bold;
    text-align: center;
    font-size:20px;
}

#atm_account .savings-content {
    padding: 20px 40px;
    border: 5px solid #4E2784;
    /*height: 2030px;*/
}



@media (max-width: 467px) {

    #atm_account {
        padding:5px 0;
    }

    #atm_account .savings-margin {
        padding:2px;
    }
    
    #atm_account .savings-content, 
    #atm_account .savings-left {
        padding: 15px;
    }

}

@media (min-width: 992px) and (max-width: 1450px ) {
    #atm_account .savings-content {
        padding: 10px;
    }
}

#atm_account .savings-margin {
    padding-right: 50px;
}

#atm_account .checking-margin {
    padding-left: 50px;
}


@media (max-width: 467px) {
    #atm_account .savings-content,
    #atm_account .checking-content {
        height: auto;
    }

    #atm_account .savings-margin {
        padding: 2px;
    }

    #atm_account .checking-margin {
        padding: 2px; 
    }

    #atm_account .checking-right,
    #atm_account .savings-left {
        padding: 10px;
    }

}


@media (min-width: 468px) and (max-width: 767px) {
    #atm_account .savings-content,
    #atm_account .checking-content {
        height: auto;
    }

    #atm_account .savings-margin {
        padding: 0 20px;
    }

    #atm_account .checking-margin {
        padding: 20px; 
    }

    #atm_account .checking-right,
    #atm_account .savings-left {
        padding: 20px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #atm_account .savings-content,
    #atm_account .checking-content {
        height: auto;
    }

    #atm_account .savings-margin {
        padding: 10px 50px;
    }

    #atm_account .checking-margin {
        padding: 20px 50px; 
    }

    #atm_account .checking-right,
    #atm_account .savings-left {
        padding: 20px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #atm_account .savings-content,
    #atm_account .checking-content {
        height: 650px;
    }

    #atm_account .savings-margin {
        padding: 20px 50px;
    }

    #atm_account .checking-margin {
        padding: 20px 50px; 
    }

    #atm_account .checking-right,
    #atm_account .savings-left {
        padding: 20px;
    }
}

@media (min-width: 1200px) and (max-width: 1366px) {
    #atm_account .savings-content,
    #atm_account .checking-content {
        height: 700px;
    }

    #atm_account .savings-margin {
        padding: 20px;
    }

    #atm_account .checking-margin {
        padding: 20px; 
    }

    #atm_account .checking-right,
    #atm_account .savings-left {
        padding: 20px;
    }
}


@media (min-width: 1367px) and (max-width: 1800px) {
    #atm_account .savings-content,
    #atm_account .checking-content {
        height: 600px;
    }

    #atm_account .savings-margin {
        padding: 20px;
    }

    #atm_account .checking-margin {
        padding: 20px; 
    }

    #atm_account .checking-right,
    #atm_account .savings-left {
        padding: 20px;
    }
}






/*DEPOSITS FAQs*/
#deposits_faqs,
#loans_faqs,
#savings-account_faqs,
#checking-account_faqs,
#rewards_faqs,
#motorcycle_loan_faqs,
#motor_moto_faqs {
    padding: 50px;
}


#motor_moto_faqs h3{
    color:#4E2784;
    font-weight: bold;
}

#motor_moto_links {
    text-align: center;
}

#deposits_faqs_accordion .panel-title,
#loans_faqs_accordion .panel-title,
#motorcycle_loans_faqs_accordion .panel-title,
#checking-account_faqs_accordion .panel-title,
#savings-account_faqs_accordion .panel-title,
#rewards_faqs_accordion .panel-title,
#motor-moto_faqs_accordion .panel-title {
    color:#4E2784;
}

@media (min-width: 768px) {
    #deposits_faqs .panel-heading [data-toggle="collapse"]:after,
    #rewards_faqs .panel-heading [data-toggle="collapse"]:after,
    #loans_faqs .panel-heading [data-toggle="collapse"]:after,
    #motorcycle_loan_faqs .panel-heading [data-toggle="collapse"]:after,
    #checking-account_faqs .panel-heading [data-toggle="collapse"]:after,
    #savings-account_faqs .panel-heading [data-toggle="collapse"]:after,
    #motor_moto_faqs .panel-heading [data-toggle="collapse"]:after {
        font-family: FontAwesome;
        content: "\f0a9";
        float: right;
        color: #fdb930;
        font-size: 18px;
        line-height: 22px;
        /* rotate "play" icon from > (right arrow) to down arrow */
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    #deposits_faqs .panel-heading [data-toggle="collapse"].collapsed:after,
    #rewards_faqs .panel-heading [data-toggle="collapse"].collapsed:after,
    #loans_faqs .panel-heading [data-toggle="collapse"].collapsed:after,
    #motorcycle_loan_faqs .panel-heading [data-toggle="collapse"].collapsed:after,
    #checking-account_faqs .panel-heading [data-toggle="collapse"].collapsed:after,
    #savings-account_faqs .panel-heading [data-toggle="collapse"].collapsed:after, 
    #motor_moto_faqs .panel-heading [data-toggle="collapse"].collapsed:after {
        /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        color: #4E2784;
    }
}

#deposits_faqs .panel-title > a > span,
#rewards_faqs .panel-title > a > span,
#loans_faqs .panel-title > a > span,
#motorcycle_loan_faqs .panel-title > a > span,
#checking-account_faqs .panel-title > a > span,
#savings-account_faqs .panel-title > a > span, 
#motor_moto_faqs .panel-title > a > span {
    color:#fdb930;
    margin-right: 10px;
}

#deposits_faqs .panel-title,
#rewards_faqs .panel-title,
#loans_faqs .panel-title,
#motorcycle_loan_faqs .panel-title,
#checking-account_faqs .panel-title,
#savings-account_faqs .panel-title, 
#motor_moto_faqs .panel-title {
    font-size: 18px;
    font-weight: bold;
}

#deposits_faqs .panel-body,
#rewards_faqs .panel-body,
#loans_faqs .panel-body,
#motorcycle_loan_faqs .panel-body,
#checking-account_faqs .panel-body,
#savings-account_faqs .panel-body, 
#motor_moto_faqs .panel-body {
    font-size: 17px;
    padding: 30px 75px;
    color:#4E2784;
    background-color: #e2e2e2;
}

#loans_faq #faq_1 .panel-body ul {
	color: red !important;
}

@media (max-width: 768px) {
    #deposits_faqs .panel-title,
    #loans_faqs .panel-title,
    #motorcycle_loan_faqs .panel-title,
    #checking-account_faqs .panel-title,
    #rewards_faqs .panel-title,
    #savings-account_faqs .panel-title, 
    #motor_moto_faqs .panel-title {
        font-size: 16px;
    }

    #deposits_faqs .panel-body,
    #loans_faqs .panel-body,
    #motorcycle_loan_faqs .panel-body,
    #checking-account_faqs .panel-body,
    #rewards_faqs .panel-body,
    #savings-account_faqs .panel-body, 
    #motor_moto_faqs .panel-body {
        font-size: 15px;
    }
}




#deposits_faqs .panel-heading,
#rewards_faqs .panel-heading,
#loans_faqs .panel-heading,
#motorcycle_loan_faqs .panel-heading,
#checking-account_faqs .panel-heading,
#savings-account_faqs .panel-heading, 
#motor_moto_faqs .panel-heading {
    background-color: transparent;
}

#deposits_faqs .panel,
#rewards_faqs .panel,
#loans_faqs .panel,
#motorcycle_loan_faqs .panel,
#checking-account_faqs .panel,
#savings-account_faqs .panel, 
#motor_moto_faqs .panel{
    margin-top: 20px;
    border:0;
    box-shadow: none;
}

#deposits_faqs #faq_2_table th {

    background-color: #bfbfbf;
    text-align: center;
    vertical-align: middle;
}

#motorcycle_loan_faqs #faq_1_table th {
    background-color: #bfbfbf;
}

#deposits_faqs #faq_2_table .column-background {
    background-color: #d9d9d9;
}

#deposits_faqs #faq_2_table {
    text-align: center;
}

#deposits_faqs #faq_9_table th,
#loans_faqs #loans_faq_13 th {
    background-color: #bfbfbf;
}

#deposits_faqs #faq_9_table #faq_9_table_a,
#deposits_faqs #faq_9_table #faq_9_table_b {
    width: 400px;
    margin-left:20px;
    background: transparent;
}

@media (min-width: 768px) and (max-width: 1199px) {
    #deposits_faqs,
    #loans_faqs,
    #motorcycle_loan_faqs,
    #checking-account_faqs,
    #rewards_faqs,
    #savings-account_faqs,
    #motor_moto_faqs {
        padding: 20px;
    }

    #deposits_faqs .panel-body,
    #loans_faqs .panel-body,
    #motorcycle_loan_faqs .panel-body,
    #rewards_faqs .panel-body,
    #checking-account_faqs .panel-body,
    #savings-account_faqs .panel-body, 
    #motor_moto_faqs .panel-body {
        padding: 20px 20px;
    }


}

@media (max-width: 767px) {
    #deposits_faqs,
    #loans_faqs,
    #motorcycle_loan_faqs,
    #rewards_faqs,
    #checking-account_faqs,
    #savings-account_faqs, 
    #motor_moto_faqs {
        padding: 5px;
    }

    #deposits_faqs .panel-body,
    #loans_faqs .panel-body,
    #motorcycle_loan_faqs .panel-body,
    #rewards_faqs .panel-body,
    #checking-account_faqs .panel-body,
    #savings-account_faqs .panel-body, 
    #motor_moto_faqs .panel-body {
        padding:10px;
    }
}


/*SCROLL*/
.scroll-top-wrapper {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99999999;
    background-color: #4E2784;
    /*background-color: #777777;*/
    /*background:rgba(0,0,0,.3);*/
    /*color: #eeeeee;*/
    /*color: #fdb930;*/
    color: #fff;
    /*width: 50px;*/
    /*height: 48px;*/
    width: 40px;
    height: 40px;
    line-height: 36px;
    /*line-height: 40px;*/
    right: 20px;
    bottom: 26px;
    padding-top: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
    /*background-color: #fdb930;*/
    /*color:#4E2784;*/
    color:#fdb930;
    /*background-color: #888888;*/
    /*background:rgba(0,0,0,.3);*/
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
    opacity: 1.0;
}
.scroll-top-wrapper i.fa {
    line-height: inherit;
}

.deposits-bottom {
    color:#4E2784;
    padding: 10px 0 20px 50px;
    background-color: #fdb930;

}

.deposits-bottom h2 {
    font-size:18px;
}

@media (max-width: 468px) {
    .deposits-bottom {
        padding: 10px;

    }
}


#privacy_policy,
#legal,
#site_map {
    padding: 50px 0;
}

#privacy_policy h1,
#legal h1,
#site_map h1 {
    font-family: Arial;
    font-weight: bolder;
    color:#fdb930;
}

#privacy_policy h2,
#legal h2 {
    font-family: Arial;
    font-weight: bolder;
    color:#4E2784;
    font-size: 24px;
}

#privacy_policy p,
#privacy_policy li,
#legal p,
#legal li,
#site_map li a {
    color:#4E2784;
    text-align: justify;
    font-size: 17px;
}

#site_map li a:hover {
    color:#fdb930;
}

.article {
    padding: 50px 20px;
}

.article h2 {
    color: #4E2784;
	text-align: center;
	font-weight: bold;
	font-size: 28px;
}

.article p,
.article ul {
	text-align: justify;
    color:#4E2784;
    font-size:15px;
}

.article .caption {
    font-size: 14px;
    text-align: center; 
    color: #fdb930;
    font-style: italic;

}

hr.sunflower {
	/*color:#4E2784;*/
	border: 2px solid #fdb930;
}

#new-deposits,
#new-loans {
    padding: 50px 10px;
    text-align: center;
}

#new-deposits h1,
#new-loans h1 {
    color: #fdb930;
    text-align: center;
    font-weight: bolder;
    /*font-family: Impact, Arial;*/
    padding-bottom: 15px;
    font-size:38px;
}

#new-deposits p,
#new-loans p,
#csr p {
    color:#4E2784;
    font-size:20px;
    padding: 10px 35px;
}

#checking-account,
#rewards,
#deped-salary-loan,
#teachers-salary-loan,
#pensionado-loan,
#motorcycle-loan,
#brigada-eskwela,
#project-peraparasyon,
#project-synergy,
#project-pink,
#weather-101,
#als-advocacy,
#learning-and-teaching-support,
#brigada-pagbasa,
#project-better-me, 
#disaster-risk-reduction-program,
#national-economic-development-and-value-formation,
#learning-loss-recovery-program {
    padding: 50px 10px;
}

#csr {
	padding: 50px 0;
}

#csr h1 {
    color: #fdb930;
    text-align: center;
    font-weight: bolder;
    /*padding-bottom: 15px;*/
    font-size:35px;
}


#checking-account h1,
#rewards h1,
#savings-account h1,
#time-deposit h1,
#deped-salary-loan h1,
#teachers-salary-loan h1,
#pensionado-loan h1,
#motorcycle-loan h1,
#brigada-eskwela h1,
#project-peraparasyon h1,
#project-synergy h1,
#project-pink h1,
#weather-101 h1,
#als-advocacy h1,
#learning-and-teaching-support h1,
#brigada-pagbasa h1,
#project-better-me h1,
#disaster-risk-reduction-program h1,
#national-economic-development-and-value-formation h1,
#learning-loss-recovery-program h1 {
    color: #fdb930;
    text-align: center;
    font-weight: bolder;
    padding-bottom: 15px;
    font-size:35px;
}

#corporate_news h1 {
    color: #fdb930;
    text-align: center;
    font-weight: bolder;
    /*padding-bottom: 15px;*/
    font-size:35px;
}

#motor_moto_faqs h1 {
    color: #fdb930;
    text-align: center;
    font-weight: bolder;
    /*padding-bottom: 15px;*/
    font-size:35px;
}

#security_advisory h1 {
    color: #4E2784;
    text-align: center;
    font-weight: bolder;
    /*padding-bottom: 15px;*/
    font-size:38px;
}



#csr h1 {
    font-size: 32px;
}

#csr p {
    text-align: center;
}

#checking-account .checking-caption,
#savings-account .savings-caption,
#time-deposit .time-caption,
#deped-salary-loan .deped-salary-loan-caption,
#teachers-salary-loan .teachers-salary-loan-caption,
#pensionado-loan .pensionado-loan-caption,
#motorcycle-loan .motorcycle-loan-caption,
#csr .csr-caption {
    color:#4E2784;
    font-size:20px;
    text-align: center;
    font-weight: bold;
}

#motor-moto-link {
    display: inline-block;
}

#motor-moto-link .motor-moto-tag {
    color:#4E2784;
    font-size:45px;
    text-align: center;
    font-weight: bold;
}

#motor-moto-link .motor-moto-tag:hover {
    color:#fdb930;
}


/*#time-deposit p {*/
    /*color:#4E2784;*/
    /*font-size:18px;*/
    /*font-weight: bold;*/
    /*text-align: center;*/
/*}*/

#checking-account table tr,
#savings-account table tr,
#time-deposit table tr,
#deped-salary-loan table tr,
#teachers-salary-loan table tr,
#pensionado-loan table tr,
#motorcycle-loan table tr {
    color:#4E2784;
    font-size: 18px;
}


#motorcycle-loan .hr_motorcycle_loan {
    border: 2px solid #fdb930;
}

#motorcycle-loan h4 {
    color: #fdb930;
    font-size: 19px;
    font-weight: bold;

}

#motorcycle-loan li,
#motorcycle-loan strong {
    color: #4E2784;
    font-size: 18px;
}



#rewards h4 {
    color:#4E2784;
}

svg {
    fill:currentColor;
}

#rewards .rewards-hr,
#checking-account table td,
#savings-account table td,
#time-deposit .table_time_deposit td,
#deped-salary-loan table td,
#teachers-salary-loan table td,
#pensionado-loan .table_pensionado td,
#motorcycle-loan .table_motorcycle td {
    border-top: 3px solid #fdb930;
}

#checking-account p,
#rewards p,
#savings-account p,
#deped-salary-loan p,
#teachers-salary-loan p,
#pensionado-loan p,
#brigada-eskwela p,
#project-peraparasyon p,
#project-synergy p,
#project-pink p,
#weather-101 p,
#als-advocacy p,
#time-deposit p,
#learning-and-teaching-support p,
#brigada-pagbasa p,
#project-better-me p,
#disaster-risk-reduction-program p,
#national-economic-development-and-value-formation p,
#learning-loss-recovery-program p {
    color:#4E2784;
    font-size:19px;
}

#brigada-eskwela .justified,
#project-peraparasyon .justified,
#project-synergy .justified,
#project-pink .justified,
#weather-101 .justified,
#als-advocacy .justified, 
#learning-and-teaching-support .justified,
#brigada-pagbasa .justified,
#project-better-me .justified,
#disaster-risk-reduction-program .justified,
#national-economic-development-and-value-formation .justified,
#learning-loss-recovery-program .justified {
	text-align: justify;
}

#brigada-eskwela .paint-text,
#project-peraparasyon .paint-text,
#project-synergy .paint-text,
#project-pink .paint-text,
#weather-101 .paint-text,
#als-advocacy .paint-text,
#learning-and-teaching-support .paint-text
#brigada-pagbasa .paint-text,
#project-better-me .paint-text,
#disaster-risk-reduction-program .paint-text,
#national-economic-development-and-value-formation .paint-text,
#learning-loss-recovery-program .paint-text {
	padding-left:10px;
	padding-top:5px;
}

@media (max-width: 1199px) {
	#brigada-eskwela .paint-text,
	#project-peraparasyon .paint-text,
	#project-synergy .paint-text,
	#project-pink .paint-text,
	#weather-101 .paint-text,
	#als-advocacy .paint-text,
    #learning-and-teaching-support .paint-text
    #brigada-pagbasa .paint-text,
    #project-better-me .paint-text,
    #disaster-risk-reduction-program .paint-text
    #national-economic-development-and-value-formation .paint-text,
    #learning-loss-recovery-program .paint-text {
		text-align: center;
		padding-left:0;
	}
}

#deped-salary-loan p, 
#teachers-salary-loan p,
#motorcycle-loan p {
	text-align: center;
}

#motorcycle-loan p {
    font-size: 18px;
}

#deped-salary-loan,
#teachers-salary-loan,
#pensionado-loan,
#motorcycle-loan {
	color:#4E2784;
    font-size:20px;
}

#checking-account h3,
#rewards h3,
#savings-account h3 {
    color: #fdb930;
    font-weight: bold;
    text-decoration: underline;
}

#savings-account,
#time-deposit {
    padding: 50px 10px;
}

#deped-salary-loan .ranger-caption,
#teachers-salary-loan .ranger-caption,
#motorcycle-loan .ranger-caption {
	margin-top: 15px;
	margin-left: 5px;
}


#pensionado-loan #loan_ranger_outlets table tr {
	font-size: 14px !important;
}


/*#pensionado-loan #loan_ranger_outlets table td,
#pensionado-loan #loan_ranger_outlets table th td {
    border-top: 2px solid #fdb930 !important;
}
*/

/*HOVER*/

/* Flash Hover */
.flash_hover figure {
    position: relative;
}
.flash_hover figure::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255,255,255,.2);
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}
.flash_hover figure:hover::before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
}
@-webkit-keyframes circle {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}
@keyframes circle {
    0% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    100% {
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}

/* Pop-out Hover */
.pop_hover figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
.pop_hover figure:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


#security_advisory {
    padding-bottom: 50px;
}

#corporate_video {
    padding:0px 7px 30px;
}

.advisory_container {
    position: relative;
}

/* POLICY MODAL  */
.modal-open {
    overflow-y: auto;
}

#policy_modal .modal-dialog{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 1%;
}

#policy_modal .modal-header{
    background-color: #fdb930;
    color: #FFFFFF;
}

#policy_modal .modal-body{
    font-size: 12px !important;
    text-align: left;
    line-height: 24px;
}

#policy_modal button {
    background: #fdb930;
    border-radius: 40px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    width: 200px;
    height: 50px;
    border: none;
}

/*  */

@media (min-width:992px) {
    #left.advisory_container.col-md-6 {
        width:43.55%;
        padding:1px;
    }
}

@media (min-width:992px) {
    #right.advisory_container.col-md-6 {
    width:56.45%;
    padding:1px;
    }
}

.advisory_container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.advisory_container .btn {
    position: absolute;
    top: 70%;
    left: 60%;
    color: #4E2784;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #fdb930;
    font-size: 16px;
    padding: 5px 25px;
    border: 5px solid #fff;
    cursor: pointer;
    border-radius: 30px;
    text-align: center;
    white-space:normal !important;
    word-wrap: break-word; 
    font-stretch: condensed;
    line-height: 0.9;

}

.advisory_container .btn:hover {
    background-color: #4E2784;
    color: #fff;
}

.advisory_container .advisory_btn_click {
    font-size: 24px;
    font-weight: bolder;
    font-stretch: condensed;
}

@media (min-width: 487px) and (max-width: 599px) {

    .advisory_container .btn {
/*            top: 73%;
            left: 60%;*/
            padding: 5px 20px;
            font-size: 12px;
    }

    .advisory_container .advisory_btn_click {
        font-size: 17px;
        font-weight: bolder;
    }
}

@media (min-width: 375px) and (max-width: 486px) {

    .advisory_container .btn {
            top: 72%;
            left: 60%;
            padding: 5px 12px;
            font-size: 10px;

    }


    .advisory_container .advisory_btn_click {
        font-size: 15px;
        font-weight: bolder;
    }
}

@media (max-width: 374px) {

    .advisory_container .btn {
            top: 72%;
            left: 60%;
            padding: 4px 7px;
            font-size: 8px;
            border: 3px solid #fff;
    }

    .advisory_container .advisory_btn_click {
        font-size: 11px;
        font-weight: bolder;
    }
}


#mc_calculator {
    margin:auto; 
    background-color:#e6e6e6; 
    width:750px; 
    height:400px; 
    border-radius: 25px;
}

#mc_calculator .calculator_container{
    margin:auto; 
    width:700px; 
}

#mc_calculator .calculator_container h2{
    text-align:center; 
    font-weight: bold; 
    color: #4F2684; 
    padding-top:40px; 
}

#mc_calculator .calculator_container hr{
    border: 1px solid #d6d6d6;
}

#mc_calculator .calculator_container table{
    width:100%;
}

#mc_calculator .calculator_container .calculator_tr_label {
    font-weight: bold;
    color: #4F2684;
}

#mc_calculator .calculator_container .calculator_tr_input td{
    padding-bottom:20px; 
}

#mc_calculator .calculator_container .calculator_input{
    width: 325px; 
    height: 35px; 
    border-radius: 10px; 
    border:none; 
    outline: none; 
    font-size: 12px; 
    font-family: arial, sans-serif; 
    color: #767676;
}



/* other salary loans tabs */


.tabs-main {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 95%;
    height: 75vh;
    /* background: #eee; */
    overflow: hidden;
    /* box-shadow: 2px 2px 5px 2px #ccc; */
    display: flex;
    margin-top: 8%;
    margin-bottom: 3%;
}

.tabs-main .tab-main-header {
    width: 130px;
    line-height: 25px;
}

.tabs-main .tab-main-header > div {
    width: 150%;
    height: calc(100% / 5.5);
    background: #fff;
    color: #888;
    font-weight: 600;
    font-size: 22px;
    display: flex;
    /* text-transform: uppercase; */
    align-items: center;
    border-bottom: 2px solid #fdb930;
    font-family: Arial;
    cursor: pointer;
}

.tabs-main .tab-main-header > div.active {
    border-bottom: 5px solid #fdb930;
    color: #4f2683;
    background: #fff;
}

.tabs-main .tab-content {
    flex: 1;
    position: relative;
    text-align: justify;
}

.tabs-main .tab-content > div {
    position: absolute;
    top: -50vh;
    left: 100px;
    opacity: 0;
}

.tabs-main .tab-content > div.active {
    top: 2vh;
    left: 100px;
    /* bottom: -28px; */
    opacity: 1;
} 

.tabs-main .tab-content img {
    width: 60%;
    float: right;
}

.tabs-main .tab-content h2 {
    font-family: Impact, Arial;
    font-size: 25px;
    color: #fdb930;
}

.tabs-main .tab-content li {
    font-family: Arial;
    font-size: 15px;
    color: #4f2683;
}
.tabs-main .tab-content ol {
    list-style-position: inside;
}

.tabs-main .tab-content p {
    font-family: Arial;
    font-size: 14px;
    color: #4f2683;
    font-style: italic;
}

.tabs-main .tab-content .steps-photo img.scaled {
    width: 100%;
    float: none;
}
.tabs-main .tab-content .steps-photo figure {
    width: 16%;
    float: left;
    text-align: center;
    font-style: italic;
    margin: 1.5em;
    padding: 0.5em;
    padding-left: 50px;
}

/* .tabs-main .tab-content .steps-photo > div {
    text-align: center;
    padding: 10px 20px;
} */

@media screen and (max-width: 320px) {
    .tabs-main {
        height: 165vh !important;
        margin-top: 10%;
        flex-direction: column;
        align-items: stretch;
    }
    .tabs-main .tab-main-header {
        line-height: 35px !important;
    }
    .tabs-main .tab-main-header > div {
        width: 205% !important;
        font-size: 18px !important;
    
    }
    .tabs-main .tab-content > div.active {
        display: contents;
    }
    .tabs-main .tab-content img {
        width: 100% !important;
    }

    .tabs-main .tab-content .steps-photo figure {
        width: 45% !important;
        margin: 0.5em;
        padding: 1.5em !important;
    }
    
}

@media screen and (max-width: 360px) {
    .tabs-main {
        height: 148vh !important;
        margin-top: 10%;
        flex-direction: column;
        align-items: stretch;
    }
    .tabs-main .tab-main-header {
        line-height: 35px !important;
    }
    .tabs-main .tab-main-header > div {
        width: 205% !important;
        font-size: 20px !important;
    
    }
    .tabs-main .tab-content > div.active {
        display: contents;
    }
    .tabs-main .tab-content img {
        width: 100% !important;
    }

    .tabs-main .tab-content .steps-photo figure {
        width: 45% !important;
        margin: 0.5em;
        padding: 1.5em !important;
    }
    
}

@media screen and (max-width: 375px) {
    .tabs-main {
        height: 150vh !important;
        margin-top: 10%;
        flex-direction: column;
        align-items: stretch;
    }
    .tabs-main .tab-main-header {
        line-height: 40px !important;
    }
    .tabs-main .tab-main-header > div {
        width: 215% !important;
        font-size: 21px !important;
    
    }
    .tabs-main .tab-content > div.active {
        display: contents;
    }
    .tabs-main .tab-content img {
        width: 100 !important;
    }

    .tabs-main .tab-content .steps-photo figure {
        width: 46% !important;
        margin: 0.5em;
        padding: 0.5em;
    }
    
}


@media screen and (max-width: 480px) {
    .tabs-main {
        height: 145vh !important;
        margin-top: 10%;
        flex-direction: column;
        align-items: stretch;
    }
    .tabs-main .tab-main-header {
        line-height: 40px !important;
    }
    .tabs-main .tab-main-header > div {
        width: 240% !important;
        font-size: 22px !important;
    
    }
    .tabs-main .tab-content > div.active {
        display: contents;
    }
    .tabs-main .tab-content img {
        width: 100% !important;
    }

    .tabs-main .tab-content .steps-photo figure {
        width: 46% !important;
        margin: 0.5em;
        padding: 0.5em;
    }
    
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .tabs-main {
        height: 240vh !important;
        margin-top: 10%;
        flex-direction: column;
        align-items: stretch;
    }
    .tabs-main .tab-main-header {
        line-height: 45px !important;
    }
    .tabs-main .tab-main-header > div {
        width: 260% !important;
        font-size: 25px !important;
    
    }
    .tabs-main .tab-content > div.active {
        display: contents;
    }
    .tabs-main .tab-content img {
        width: 100% !important;
    }

    .tabs-main .tab-content .steps-photo figure {
        width: 25% !important;
        margin: 0.5em;
        padding: 0.5em;
    }
    
}

@media screen and (min-width: 769px) and (max-width: 991px) {
    .tabs-main {
        height: 110vh !important;
        margin-top: 10%;
        flex-direction: column;
        align-items: stretch;
    }
    .tabs-main .tab-main-header {
        line-height: 30px !important;
    }
    .tabs-main .tab-main-header > div {
        width: 130% !important;
        font-size: 21px !important;
    }
    .tabs-main .tab-content > div.active {
        display: contents;
    }
    .tabs-main .tab-content {
        flex: 1;
        position: absolute !important;
        text-align: justify;
        left: 40vh !important;
    }
    .tabs-main .tab-content img {
        width: 60% !important;
    }
    .tabs-main .tab-content .steps-photo figure {
        width: 25% !important;
        margin: 1.5em;
        padding: 0.5em;
        font-size: small;
    }
    
}

@media screen and (min-width: 991px) and (max-width: 1024px) {
    .tabs-main {
        height: 110vh !important;
        margin-top: 10%;
        flex-direction: column;
        align-items: stretch;
    }
    .tabs-main .tab-main-header {
        line-height: 30px !important;
    }
    .tabs-main .tab-main-header > div {
        width: 130% !important;
        font-size: 22px !important;
    
    }
    .tabs-main .tab-content > div.active {
        display: unset;
        left: 40vh !important;
    }

    .tabs-main .tab-content {
        flex: 1;
        position: unset;
        text-align: justify;
    }
    .tabs-main .tab-content img {
        width: 60% !important;
        float: right;
    }
    .tabs-main .tab-content .steps-photo figure {
        width: 30% !important;
        margin: 0.5em;
        padding: 0.5em;
        font-size: small;
    }
    
}

@media screen and (min-width: 1025px) and (max-width: 1279px) {
    .tabs-main {
        height: 110vh;
        margin-top: 10%;
        flex-direction: column;
        align-items: stretch;
    }
    .tabs-main .tab-main-header {
        line-height: 35px;
    }
    .tabs-main .tab-main-header > div {
        width: 155%;
        font-size: 21px;
    
    }
    .tabs-main .tab-content > div.active {
        left: 40vh;
    }

    .tabs-main .tab-content {
        flex: 1;
        position: unset;
        text-align: justify;
    }
    .tabs-main .tab-content img {
        width: 55%;
        float: right;
    }
    .tabs-main .tab-content .steps-photo figure {
        width: 20%;
        margin: 0.5em;
        padding: 1.5em;
        font-size: small;
    }
  }