﻿@media screen and (max-width: 800px) {

	/**********************************************************************************/
	/*                             Mortgages section                                  */
	/**********************************************************************************/
	#mortgages .application .text-wrapper {
		width: 80%;
		margin: 0 10%;
		padding: 20px 0;
		float: none;
	}

	#mortgages .application .apply-button {
		margin: 0 auto 20px;
		float: none;
	}

	#mortgages .application .mortgage-application-success-message {
		margin: 0 auto;
	}
	/**********************************************************************************/
	/*                               Rates section                                    */
	/**********************************************************************************/
	#rates .rates-container {
		border-width: 25px;
		padding: 20px;
		width: 90%;
	}

		#rates .rates-container #brokertools-RatesTable span.brokertools-rates-term-long-text {
			display: none !important;
		}

		#rates .rates-container #brokertools-RatesTable span.brokertools-rates-term-short-text {
			display: inline !important;
		}

		#rates .rates-container #brokertools-RatesTable div.brokertools-rates-table-header {
			font-size: 14px;
			line-height: 16px;
		}

	/**********************************************************************************/
	/*                            Calculators section                                 */
	/**********************************************************************************/
	#calculators .calculators-container {
		border-width: 25px;
		padding: 20px;
		width: 90%;
	}

	#calculators .brokertool-form .ui-accordion .ui-accordion-content div[data-role=fieldcontain] input[type=number].slider-input {
		width: 35%;
	}

	/**********************************************************************************/
	/*                                 Blog Table                                     */
	/**********************************************************************************/
	#blog #blog-entries .blog-entry .blog-image,
	#blog #blog-single-entry .blog-entry .blog-image {
		height: 200px;
	}

	#blog .blog-body .row {
		margin-left: 0;
		margin-right: 0;
	}

	#blog #blog-share-links li {
		width: 45px
	}

	#blog #other-blog-posts .blog-entry {
		width: 100%;
		margin: 0 auto;
	}

		#blog #other-blog-posts .blog-entry:nth-child(2) {
			margin: 0 auto;
		}

	/**********************************************************************************/
	/*                                Footer section                                  */
	/**********************************************************************************/
	#footer #footer-upper-banner #footer-copy {
		width: 35%;
	}

	#footer #footer-upper-banner #footer-quick-links {
		width: 100%;
		margin-top: 40px;
		text-align: center;
		margin-left:0px;
	}

	#footer #footer-upper-banner #footer-contact-info {
		width: 100%;
		margin-top: 40px;
		text-align:center;
	}
		#footer #footer-upper-banner #footer-contact-info .contact-list li {
			width: 50%;
			margin-left: auto;
			margin-right: auto;
		}

	#footer #footer-upper-banner #footer-hours-of-operation {
		width: 100% !important;
		margin-top: 40px;
		text-align: center;
		margin-left:0px!important;
		margin-right:0px!important;
	}
		#footer #footer-upper-banner #footer-hours-of-operation .hour-list li {
			width: 50%;
			margin-left: auto;
			margin-right: auto;
		}

	#footer #footer-upper-banner .css-logo {
		width: 100% !important;
		margin: 0 auto 0px !important;
		padding-bottom: 20px;
	}

	#footer #footer-upper-banner #footer-logo {
		width: 25%;
		float: none;
		clear: both;
		margin: 0 auto 20px;
		padding-top: 20px;
	}

	@media screen and (max-width: 700px) {
		#about-top-container {
			display: block;
		}

		#about-top-side-image {
			width: 90%;
			max-width: 400px;
			margin: 0 auto 15px;
		}
	}

	#footer #footer-upper-banner #footer-logo .footer-img {
		width: 100vw;
		height: 25vw;
	}

	.weekday {
		color: #ffffff;
		display: flex;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	.day {
		min-width: 30px;
		margin-left: 10px;
	}

	@media screen and (max-width: 600px) {
		/**********************************************************************************/
		/*                             Top Header section                                 */
		/**********************************************************************************/
		nav#navigation,
		nav#navigation.fixedsticky-on,
		nav#navigation.fixedsticky-off {
			margin: 0;
			padding: 0;
			width: 100%;
			left: 0;
			right: 0;
			max-height: 100vh;
		}

			nav#navigation.fixedsticky-on {
				/* overflow-y: auto;*/
			}

			nav#navigation .mobile-menu-head {
				display: block;
			}

				nav#navigation .mobile-menu-head a {
					display: block;
					padding: 9px 20px;
					font-family: "Raleway", sans-serif;
					font-size: 13px;
					text-transform: uppercase;
					font-weight: bold;
					text-align: left;
				}

			nav#navigation > ul > li > ul li a {
				display: block;
				font-size: 13px;
				font-family: "Raleway", sans-serif;
				font-weight: bold;
				text-transform: uppercase;
				padding: 9px 22px 17px 0;
				border: 0;
				background: transparent;
				transition-duration: 0.5s;
				transition-delay: 0s;
				transition-timing-function: ease;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;
				text-align: right;
			}

			nav#navigation > ul > li > ul,
			nav#navigation > ul > li > ul > li > ul {
				position: relative;
				opacity: 1;
				pointer-events: all;
				border: 0 !important;
				left: initial;
				right: initial;
				top: initial;
				overflow: hidden;
				display: none;
			}

				nav#navigation > ul > li > ul > li {
					margin-right: 25px;
				}

					nav#navigation > ul > li > ul > li > ul > li {
						margin-right: 25px;
					}

			nav#navigation li.has-children::after {
				content: "\F0DA" !important;
				top: 9px !important;
				right: 9px !important;
				transition-property: transform;
				transition-duration: 0.1s;
				transition-delay: 0s;
				transition-timing-function: ease;
			}

			nav#navigation li.has-children.mobile-open::after {
				transform: rotate(90deg);
			}

			nav#navigation ul li:hover a::after, nav#navigation.fixedsticky-on ul li.active a::after {
				background: transparent !important;
			}

			nav#navigation > ul > li ul > li {
				width: auto;
			}

			nav#navigation ul {
				float: none;
				display: none;
			}

				nav#navigation ul li {
					float: none;
					text-align: left;
				}

					nav#navigation ul li a {
						padding: 9px 20px;
						border-radius: 0;
						margin-bottom: 0;
					}

						nav#navigation ul li a,
						nav#navigation ul li a:active,
						nav#navigation ul li a:visited,
						nav#navigation ul li a:hover,
						.mobile-menu-head a {
							text-decoration: none;
						}

			nav#navigation.fixedsticky-on ul li:hover a,
			nav#navigation.fixedsticky-on ul li.active a {
				background-image: none;
			}

			nav#navigation > ul > li.contact-button {
				float: none;
			}

		header {
			text-align: center;
		}

			header #header-logo img {
				max-width: 350px;
				width: 100%;
			}

			header #header-bylines {
				clear: both;
				display: inline-block;
				float: none;
				margin: 0 30px;
				padding-top: 20px;
			}

			header #header-social {
				display: inline-block;
				float: none;
				margin-left: auto;
				margin-right: auto;
			}

			header #header-language-selector {
				top: -20px;
				right: 0;
			}

		/**********************************************************************************/
		/*                               Banner section                                   */
		/**********************************************************************************/
		.banner-carousel {
			height: 200px;
		}

		#banner-caption #banner-caption-inner div {
			font-size: 30px;
		}

		.portrait-banner #banner-caption #banner-caption-inner div {
			font-size: 20px;
		}

		.banner-carousel .highlight-buttons a {
			display: block;
			margin: 5px auto;
		}

			.banner-carousel .highlight-buttons a:last-child {
				margin-right: auto;
			}

		#banner-caption {
			top: 0;
			height: 160px;
		}


		/**********************************************************************************/
		/*                             About Us section                                   */
		/**********************************************************************************/
		#about #about-bottom-copy .video {
			width: 80%;
			margin-left: 10%;
		}

		#about #about-bottom-copy .points {
			float: left;
			width: 80%;
			margin: 20px 0 0 10%;
		}

		#about #about-bottom-copy .bottom-copy .bottom-copy-header {
			margin-left: 10%;
		}

		#about #about-bottom-copy .bottom-copy .bottom-copy-body {
			margin: 0 10%;
		}

		/**********************************************************************************/
		/*                             Mortgages section                                  */
		/**********************************************************************************/
		#mortgages .panes .pane {
			width: 80%;
			margin: 10px 10%;
		}

		/**********************************************************************************/
		/*                            Calculators section                                 */
		/**********************************************************************************/
		#calculators .calculators-container div[data-role=fieldcontain] {
			height: 70px;
		}

		/**********************************************************************************/
		/*                                Footer section                                  */
		/**********************************************************************************/
		#footer #footer-upper-banner #footer-copy {
			width: 90%;
			margin: 20px 5% 0;
		}

		#footer #footer-upper-banner #footer-hours-of-operation {
			width: 100%;
			margin-top: 40px;
			text-align: center;
			margin-left:0px;
		}

		#footer #footer-upper-banner #footer-logo {
			width: 100%;
		}

			#footer #footer-upper-banner #footer-logo .footer-img {
				width: 100vw;
				height: 50vw;
				margin-left: auto;
				margin-right: auto;
			}

		#footer #footer-lower-banner #footer-lower-banner-container {
			text-align: center;
		}

		#footer #footer-lower-banner #footer-social {
			float: none;
		}

		#footer #footer-lower-banner #footer-copyright {
			float: none;
		}

		.day {
			width: 20px;
		}

		#footer #footer-upper-banner .heading-underline {
			width: 98%;
			margin-left:1%;
		}
		/**********************************************************************************/
		/*                                  Apply Page                                    */
		/**********************************************************************************/

		.connecting-line {
			height: 2px;
			background: #e0e0e0;
			position: absolute;
			width: 85%;
			margin: 0 auto;
			left: 0;
			right: 0;
			top: 50%;
			z-index: 1;
		}

		.form-contents {
			width: 100%
		}

		span.round-tab {
			width: 5rem;
			height: 5rem;
			line-height: 5rem;
			left: 0 !important;
		}

		.wizard .nav-tabs > li a {
			width: 5rem;
			height: 5rem;
			margin: 20px auto;
		}

			.wizard .nav-tabs > li a .list-text {
				white-space: pre-wrap;
			}

		#initial {
			max-width: 100%;
		}

		/**********************************************************************************/
		/*                          Admin Settings - Top Banner                           */
		/**********************************************************************************/

		/**********************************************************************************/
		/*                          Admin Settings - Edit Page                            */
		/**********************************************************************************/
		#components-list .component-item {
			width: auto;
		}

		/**********************************************************************************/
		/*                               Admin section                                    */
		/**********************************************************************************/
		#component-list-nav {
			width: 350px;
			transition-duration: 0.5s;
			transition-delay: 0s;
			transition-timing-function: ease;
			position: absolute;
			top: 0;
			left: -320px;
			z-index: 999;
		}

			#component-list-nav.open-list-nav {
				left: 0;
			}

			#component-list-nav #touch-handle {
				display: block;
				float: right;
				width: 30px;
				height: 100vh;
			}

				#component-list-nav #touch-handle #text {
					text-wrap: none;
					width: 100px;
					font-size: 18px;
					transform: rotate(90deg);
					transform-origin: left bottom 0;
					margin-top: 200px;
				}

		#component-settings-pane {
			margin-left: 30px;
		}

		#component-list-nav #touch-handle #text i {
			transition-duration: 0.5s;
			transition-delay: 0s;
			transition-timing-function: ease;
		}

		#component-list-nav.open-list-nav #touch-handle #text i {
			transform: rotate(180deg);
			transform-origin: 50% 50% 0;
		}

		/**********************************************************************************/
		/*                         Admin Settings - Blog section                          */
		/**********************************************************************************/
		#component-settings-pane .blog-photo-choice {
			width: 48%;
		}
	}

	@media screen and (max-width: 400px) {
		/**********************************************************************************/
		/*                             Top Header section                                 */
		/**********************************************************************************/
		header #header-bylines {
			margin: 0;
		}
	}

	/**********************************************************************************/
	/*                                Rates Table                                     */
	/**********************************************************************************/
	@media screen and (max-width: 1430px) {
		#rates .rates-container #brokertools-RatesTable div.brokertools-rates-table-header {
			font-size: 24px;
			line-height: 28px;
			padding-top: 19px;
			padding-bottom: 19px;
			height: 80px;
		}

		#rates .rates-container #brokertools-RatesTable div {
			font-size: 18px;
		}

			#rates .rates-container #brokertools-RatesTable div.brokertools-rates-column div:not(:first-child) {
				padding-top: 0;
				padding-bottom: 0;
			}
	}

	@media screen and (max-width: 1175px) {
		#rates .rates-container #brokertools-RatesTable div.brokertools-rates-table-header {
			font-size: 16px;
			line-height: 18px;
			padding-top: 10px;
			padding-bottom: 10px;
			height: 60px;
		}

		#rates .rates-container #brokertools-RatesTable div {
			font-size: 14px;
			line-height: 2.2em;
		}

			#rates .rates-container #brokertools-RatesTable div.brokertools-rates-column div:not(:first-child) {
				padding-top: 0;
				padding-bottom: 0;
			}
	}

	@media screen and (max-width: 600px) {
		#rates .rates-container #brokertools-RatesTable div.brokertools-rates-disclaimer {
			line-height: initial;
		}

		#rates .rates-container #brokertools-RatesTable div.brokertools-rates-table-header {
			font-size: 10px;
		}

		#calculators .calculators-container div[data-role=fieldcontain].has-note {
			height: 150px;
		}
	}


	/**********************************************************************************/
	/*                              Application Wizzard                               */
	/**********************************************************************************/
	.wizard li.active span.round-tab, .previous span.round-tab {
		background: #d55c19;
		color: #fff;
		border-color: #d55c19;
	}
