/********************************************

GENERAL

********************************************/
@media only screen and (max-width: 992px) {  
    .relative {
        position: relative;
    }
    .container {
        width: 90%;
    }
}
@media only screen and (max-width: 769px) {
    
    .flex_container {
        flex-direction: column;
    }
}



/********************************************

NAVIGATION BAR

********************************************/
@media only screen and (max-width: 992px) {
    .navigation_desktop .nav_lower .nav > li .personal {
        left: -25%;
        width: 125%;
    }
    .navigation_desktop .nav_lower .nav > li .business {
        left: 10%;
        width: 75%;
    }
    .navigation_desktop .nav_lower .nav > li .loans {
        left: 40%;
        width: 50%;
    }
    .navigation_desktop .nav_lower .nav > li .about {
        right: -10%;
        width: 60%;
    }
}


@media only screen and (max-width: 769px) {
    .navigation_desktop .nav {
        display: none;
    }
    .navigation_desktop .nav_lower {
        margin-top: 15px;
    }
    .navigation_desktop .nav_lower .right {
        display: none;
    }
    .navigation_desktop .nav_lower .hamburger {
        display: flex;
    }
    .navigation_desktop .nav_lower .container {
        height: 44px;
    }
    .navigation_desktop .nav_lower .logo img {
        width: 150px;
    }

    /* =========================== */
    /* =======  Navigation - Mobile =======*/
    /* ========================== */

    .navigation_desktop  .hamburger {
        display: flex;
    }

}

@media only screen and (max-width : 375px) {

    .navigation_desktop .nav_upper {
        display: none;
    }
    .navigation_desktop .nav_lower {
        margin-top: 15px;
    }
    .navigation_desktop .nav_lower .right {
        display: none;
    }
    .navigation_desktop .nav_lower .hamburger {
        display: flex;
    }
    .navigation_desktop .nav_lower .container {
        height: 44px;
    }

    /* =========================== */
    /* =======  Navigation - Mobile =======*/
    /* ========================== */

    .navigation_desktop .hamburger {
        display: flex;
    }

}



/********************************************

                    FOOTER

********************************************/
@media only screen and (max-width: 992px) {  
    footer .wrapper {
        height: 100%;
    }
    footer .flex_container {
        flex-direction: row;
    }
    footer .content .left{
        display: none;
    }
    footer .content .right {
        width: 100%;
    }
    footer .content .copy .headline{
        font-size: 1rem;
    }
    footer .content .copy ul li a{
        font-size: .9rem;
        letter-spacing: 3px;
    }
    footer .content .copy p{
        font-size: .9rem;
    }
    footer .content .copy {
        padding: 0;
    }
    footer .form {
        width: 100%;
        border-left: none;
        padding-left: 0px;
    }
    footer .form h4 {
        font-weight: bold;
        font-size: 1rem;
    }
    footer .form .relative{
        justify-content: space-between;
    }
    footer form input {
        width: 100%;
    }
    footer form .btn_subscribe {
        width: 35%;
        position: absolute;
        right: 0;
    }
    footer .footer_sub_nav {
        display: block;
        padding-left: 15px;
    }
    footer .address {
        width: 70%;
    }
    footer .footer_sub_nav ul li a {
        letter-spacing: 1px;
        line-height: 1;
    }
    footer .footer_sub_nav ul {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
    }
    footer .address span {
        display: none;
    }

    footer .form .logo img {
        padding: 35px 5px 25px;
    }
    


    /*  Margin Bottom */
    footer .margin_bottom{
        background-color: #49a6d4;
    }
    footer .margin_bottom .logo img {
        padding: 15px 5px;
    }
    footer .NMLS{
        justify-content: center;
        align-items: center;
        color: #000;
        font-weight: bold;
        font-size: .7rem;
        padding: 0 10px;
    }
    footer .NMLS span{
        margin-top: 15px;
    }
    footer .nav>li {
        font-size: .8rem;
    }
    footer .nav li a, footer .nav li p {
        display:inline-block;
        color: #fff;
    }
    footer .nav li a:hover {
        text-decoration: underline;
    }


    /* LOGIN MODAL - MOBILE FOOTER */


        
    .login_modal_footer {
        display: block;
        width: 100%;
        color: #49a6d4;
        margin-top: 25px;
    }
    .login_modal_footer .form_group {
        display: flex;
        flex-direction: column;
    }

    .login_modal_footer input, .login_modal_footer select, .login_modal_footer input::placeholder {
        color: #49a6d4;
        font-size: .8rem;
        background: #fff;
        margin-top: 10px; 
        width: 100%;
        height: 35px;
        padding-left: 5px;
    }
    .login_modal_footer select {
        padding-left: 7px;
        -webkit-appearance: none;
        -moz-appearance:none;
    }
    .login_modal_footer .checkbox_group {
        display: flex;
        flex-direction: row;
    }
    .login_modal_footer input[type="checkbox"] {
        width: 15px;
        height: 15px;
        margin-top: 10px;
    }
    .login_modal_footer label {
        font-size: 0.8rem;
        margin-top: 5px;
        margin-left: 10px;
    }
    .login_modal_footer h1 {
        font-size: 1.2rem;
    }
    .login_modal_footer button {
        border: 1px solid #49a6d4;
        width: 200px;
        height: 35px;
        background: #49a6d4;
        color: #fff;
        font-size: .8rem;
        align-self: flex-end;
        margin-top: 15px;
    }
}
@media only screen and (max-width: 769px) {
    footer .break_point{
        display: block;
    }
    footer .break_point2{
        display: none;
    }
    footer .address>p:first-child {
		margin-bottom: 0px;
	}
    /*  Margin Bottom */
    footer .margin_bottom{
        background-color: #49a6d4;
    }
    footer .margin_bottom>.flex_container {
        flex-direction: column;
    }
    footer .margin_bottom .left{
        width: 100%;
        justify-content: center;
        margin-left: 0px;
    }
    footer .margin_bottom .logo img {
        padding: 15px 5px 0;
    }
    footer .NMLS{
        justify-content: center;
        align-items: center;
        color: #000;
        font-weight: bold;
        font-size: .7rem;
        padding: 0 10px;
    }
    footer .NMLS span{
        margin-top: 15px;
    }
    
    footer .margin_bottom .right{
        width: 100%;
        justify-content: space-around;
        align-items: center;
    }
    footer .nav>li {
        margin: 3px 25px;
        font-size: .72rem;
    }
    footer .nav li a, footer .nav li p {
        display:inline-block;
        color: #fff;
    }
    footer .nav li a:hover {
        text-decoration: underline;
    }



        
    /*************************


            SUBSCRIBE  FORM 


    *************************/
    .subscribe_form .container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #49a6d4;
        text-align: center;
    }
    .subscribe_form form{
        width: 100%;
    }
    .subscribe_form input{
        padding: 8px 5px;
        width: 100%;
    }
   
    .subscribe_form .btn_subscribe {
        width: 180px;
        background: #49a6d4;
        color: #fff;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
    }
    .subscribe_form .input_field {
        margin: 20px auto;
        flex-direction: row;
    }
    .subscribe_form h4 {
        font-size: 1.2rem;
    }

    .recaptcha_term {
        text-align: center;
	}




}

@media only screen and (max-width: 579px) {
    footer .nav>li {
        margin: 3px;
        font-size: .72rem;
    }
    .login_modal_footer button {
        border: 1px solid #49a6d4;
        width: 200px;
        height: 35px;
        background: #49a6d4;
        color: #fff;
        font-size: .8rem;
        align-self: flex-end;
        width: 100%;
    }

}




/********************************************

                    LOGIN MODAL

********************************************/
@media only screen and (max-width: 769px) {
    .login_modal {
        display: none;
    }  
    .overlay_login_modal {
        display: none;
    }
}



/*************************


	ADDITIONAL RESOURCES 


*************************/


@media only screen and (max-width: 992px) {
    
    .additional_resources {
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }
    .additional_resources ul {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .additional_resources ul li {
        padding: 0;
    }

}


/********************************************

				CALCULATOR

********************************************/

@media only screen and (max-width: 579px) {
    
	.calculator .col {
		width: 100%;
    }
    .calculator .btn_calculate {
		width: 100%;
	}
}




/********************************************

				TABLE

********************************************/
@media only screen and (max-width: 992px) {
    table {
        width: 100%;
    }
    th, td {
        font-size: .7rem;
        width: 100px;
        height: 100%;
        word-wrap: break-word;
        padding: 2px;
    }
}
@media only screen and (max-width: 769px) {
        
    table {
        width: 100%;
    }
    th, td {
        font-size: .6rem;
        width: 100px;
        height: 100%;
        word-wrap: break-word;
        padding: 2px;
        font-weight: 100;
    }
    th{
        color: #49a6d4;
        text-transform: uppercase;
        font-weight: 600;
    }
    th:last-child, td:last-child {
        border-right: none;
    }
    tr:first-child th {
        border-top: none;
    }
    tr:last-child td {
        border-bottom: none;
    }
    .table-head {
        color: white;
        text-align: center;
        background-color: #49a6d4;
        height: 35px;
        padding: 10px
    }

}

/********************************************

				COMMON CONTENT

********************************************/



@media only screen and (max-width: 769px) {
   
    .common_content .headline {
        font-size: 1.85rem;
        line-height: 1.2;
        text-align: center;
    }
    .common_content .sub_headline {
        width: 100%;
    }
    .common_content .copy p{
        line-height: 1.5em;
        font-size: 1rem;
        margin-top: 15px;
    }
    .common_content .container {
        width: 89%;
        max-width: 790px;
        text-align: justify;
    }

}






/********************************************

				HERO STYLE

********************************************/

@media only screen and (max-width: 992px) {  
    
    .hero_style_1 .container .copy .subtitle {
        font-size: 1.6rem;
        padding: 0px;
    }


    .hero_style_2 .container .copy .subtitle {
        font-size: 1.6rem;
        padding: 0px;
    }




    .anchor-menu {
        height: 80px;
    }
    .anchor-menu .container {
        height: 100%;
    }
    .anchor-menu ul li {
        font-size: .8rem;
        padding: 5px;
    }





    .contact .hero_image {
        background-position: center 0px;
    }
    
}
@media only screen and (max-width: 769px) { 

    .hero_style_1 .hero_image {
        height: 400px;
        background-position: center -20px;
    }
    .hero_style_2 .hero_image {
        height: 400px;
        background-position: center -20px;
    }
    .personal_banking_hero .container .copy .subtitle {
        display: none;
    }

    .hero_style_2 .container .copy .title {
        font-size: 2.3rem;
        font-weight: 600;
    }
    .hero_style_2 .content {
		width: 80%;
    }
    

    
    /* =========================== */
    /* =======  Anchor menu =======*/
    /* ========================== */

    .anchor-menu {
        height: 60px;
    }
    .anchor-menu .container {
        height: 100%;
    }
    .anchor-menu ul li {
        font-size: .6rem;
        padding: 5px 10px 5px 0;
    }
}

@media only screen and (max-width : 579px) {

    /* =========================== */
	/* ======= Hero style 1=======*/
	/* ========================== */

	.hero_style_1 .hero_image {
        background-position: -90px center;
		height: 100vh;
    }
    .hero_style_1 .container {
        height: 80%;
    }
    .hero_style_1 .container .copy {
        margin-left: 0;
    }
    .hero_style_1 .container .copy .title {
        font-size: 2.3rem;
        font-weight: 600;
    }
    .hero_style_1 .container .copy .subtitle {
        font-size: 1.8rem;
        padding: 15px;
    }
    .hero_style_1 .break_point{
        display: block;
    }




    .hero_style_2 .hero_image {
        background-position: -90px center;
		height: 100vh;
    }
    .hero_style_2 .container {
        height: 75%;
    }
    .hero_style_2 .container .copy {
        margin-left: 0;
    }
    .hero_style_2 .container .copy .subtitle {
        font-size: 1.8rem;
        padding: 15px;
    }
    .hero_style_2 .content {
		width: 60%;
	}



     /* =========================== */
       /* =======  Anchor menu =======*/
       /* ========================== */
   
    .anchor-menu {
        height: 80px;
    }
    .anchor-menu ul {
        margin-top: 20px;
    }
    .anchor-menu ul li {
        border-right: none !important;
        padding: 0 10px;
        font-size: .7rem;
        width: 100%;            
        float: left;
    }
    .anchor-menu.personal_checking ul li {
        width: 50%;            
        float: left;
    }

    .loans .anchor-menu ul li {
        width: 100%;
    }


	.contact .hero_image {
        background-position: -530px center;
    }
    .contact .container .copy .subtitle {
        font-size: 1.6rem;
        padding: 0px;
    }
}
	


/********************************************

HERO - SLIDE

********************************************/
@media only screen and (max-width: 1200px) {
	.slide .slide3 {
		background-position: center 0px;
	}
} 
@media only screen and (max-width: 992px) {  
    .swiper-container {
        height: 500px;
    }
    .swiper-slide {
        background-position: center 0px;
    }
    .swiper-button-prev{
        left: 2% !important;
    }
    .swiper-button-next{
        right: 2% !important;
    }
}
@media only screen and (max-width: 769px) {
    .slide .slide2 {
		background-position: center -60px;
    }
    .swiper-container .container .copy .title {
        font-size: 2.5rem;
        line-height: 1;
    }
    .swiper-container .container .copy .subtitle {
        font-size: 1.9rem;
        line-height: 1;
    }
    .swiper-button-prev{
        left: 2% !important;
    }
    .swiper-button-next{
        right: 2% !important;
    }
}
@media only screen and (max-width : 579px) {
    .slide {
        height: 100vh;
    }
    .slide .slide2 {
        background-position: -100px 0px;
    }
    .swiper-slide {
        background-position: -140px center;
    }

    .swiper-container {
        height: 100vh;
    }
    .swiper-container .container .copy .title {
        font-size: 2.3rem;
        font-weight: 600;
        line-height: 1;
    }
    .swiper-container .container .copy .subtitle {
        font-size: 1.8rem;
        line-height: 1;
        padding: 0 30px;
    }
    .swiper-button-prev{
        left: 2% !important;
    }
    .swiper-button-next{
        right: 2% !important;
    }
    .swiper-button-prev:hover{
		left: 1.8% !important;
	}
	.swiper-button-next:hover{
		right: 1.8% !important;
	}
}




/********************************************

                    HOME

********************************************/
@media only screen and (max-width: 992px) {  
    .home_2 h3 {
        width: 95%;
    }
}
@media only screen and (max-width: 769px) {
    
    /* =========================== */
    /* =======  Home 1 =======*/
    /* ========================== */

    .home_1 {
        text-align: center;
    }
    .home_1 .headline {
        font-size: 1.85rem;
        line-height: 1.2;
    }
    .home_1 .copy p{
        line-height: 1.5em;
        font-size: 1rem;
        margin-top: 15px;
    }




    /* =========================== */
    /* =======  Home 2 =======*/
    /* ========================== */

    .home_2 {
        height: 100%;
    }
    .home_2 h3 {
        width: 55%;
    }
    .home_1 .copy p:nth-child(2) {
        display: none;
    }
}
@media only screen and (max-width : 579px) {
    .home_1 .container {
        width: 80%;
        max-width: 790px;
    }
    .home_1 .copy{
        text-align: justify;
    }

    .home_2 h3 {
        width: 100%;
        font-size: 1.2rem;
    }
}



/********************************************

        HOUR & LOCATION

********************************************/
@media only screen and (max-width: 769px) {
    .hour_location_1 .fairview_office .copy {
        border-left: none;
        /* border-top: 1px solid #49a6d4; */
        margin: 50px;
        margin-top: 0;
        padding: 30px 0px;
    }
}
@media only screen and (max-width : 579px) {
    .hour_location_1 .copy {
        padding: 8px;
        margin: 30px auto;
    }
    .hour_location_1 .fairview_office .copy {
        margin: 0px 8px 30px;
        padding: 8px 0;
    }
}




/********************************************

			CONTACT

********************************************/

@media only screen and (max-width: 769px) {
    .contact_1 .fairview_office .copy {
        border-left: none;
        /* border-top: 1px solid #49a6d4; */
        margin: 50px;
        margin-top: 0;
        padding: 30px 0px;
    }
    .contact_1 .main_office,
	.contact_1 .fairview_office {
        width: 100%;
        max-width: 100%;
	}
}
@media only screen and (max-width : 579px) {
    .contact_1 .copy {
        padding: 8px;
        margin: 30px auto;
    }
    .contact_1 .fairview_office .copy {
        margin: 0px 8px 30px;
        padding: 8px 0;
    }
}




/********************************************

			ABOUT US

********************************************/

@media only screen and (max-width: 769px) {
    .about_1 .container, .about_2 .container {
        width: 90%;
    }
}


/********************************************

			PERSONAL BANKING

********************************************/

@media only screen and (max-width: 769px) {
    .personal_banking_1 .headline {
        font-size: 1.6rem;
    }
}



/********************************************

			LOANS

********************************************/
@media only screen and (max-width: 769px) {
    .loans_1 .container {
        text-align: center;
    }
    .loans_2 .container {
        text-align: center;
    }
    .loans_3 .container {
        text-align: center;
    }

    .calculator_result .copy {
        width: 100%;
        margin: auto;
    }
    .calculator_result .copy ul {
        margin-left: 2em;
    }
}


@media only screen and (max-width: 579px) {

    .sub_anchor {
        margin: 1.5em 0;
    }
}




/********************************************

			SERVICE FESS

********************************************/
@media only screen and (max-width: 769px) {
    .service_fees_1 .headline{
        font-size: 1.5rem;
    }
    .service_fees_1 .sub_headline{
        text-align: center;
    }
    .service_fees_1 table td {
        font-size: 1rem;
    }
    .service_fees_1 table td:first-child,
    .service_fees_1 table th:first-child {
        padding-left: 10px;
    }
    .service_fees_1 table td:last-child,
    .service_fees_1 table th:last-child {
        padding-right: 10px;
    }
    .service_fees_1 .indented {
        padding-left: 40px !important;
    }
}


@media only screen and (max-width: 579px) {
    .service_fees_1 .headline{
        font-size: 1.2rem;
    }
}



/********************************************

			SERVICES

********************************************/

@media only screen and (max-width: 579px) {
    .services.subtitle{
        display: none;
    }
}




/********************************************

			PRIVACY

********************************************/

@media only screen and (max-width: 769px) {
    .privacy .headline{
        text-align: left;
    }
}





/********************************************

			EVENTS

********************************************/

@media only screen and (max-width: 769px) {
    .events_1 .flex_container{
        flex-direction: row;
    }
    .events_1 .image {
        height: 150px;
        width: 300px;
    }
    .events_1 .headline {
        text-align: left;
    }
}


@media only screen and (max-width: 579px) {
    .events_1 .flex_container{
        flex-direction: column;
        margin-bottom: 2em;
    }
    .events_1 .image {
        height: 150px;
        width: 100%;
    }
    .events_1 .container {
        padding-top: 1em;
        padding-bottom: 1em;
    }
    .events .hero_image {
        background-position: -385px center;
        height: 100vh;
    }
    .events_1 .copy {
        margin: auto 0em;
    }
}