/* Navigation .................................................................................................................. */

	nav	{
    	align-items: center;
    	-webkit-align-items: center;
		flex-direction:column;
		-webkit-flex-direction:column;
	    background-color:var(--white);
		box-shadow: 0px 0px rgba(200,200,200,0.3);
		clear:both;
		float:left;
		margin-bottom:0px;
		padding: 0;
		position:fixed;
		top: 0;
		width:100%;
		z-index: 20;
	}

	nav a {
		display: block;
		height: auto;
		text-decoration:none;
	}
	

	nav #logo-small-container {
		display: none;
		clear: both;
		margin-top:1em;
		opacity: 0;
	}

	nav .navbar-brand {
    	align-items: center;
    	-webkit-align-items: center;
		border-bottom:0px;
		height: auto;
		padding: 0px;
	}

	
	nav #logo-small {
		max-width:150px;
	}
	
	nav a {
		-webkit-transition: all .5s ease;
		-moz-transition: all .5s ease;
		-ms-transition: all .5s ease;
		transition: all .5s ease;
	}


	nav ul,
	nav #secondary-nav {
		align-items: center;
		-webkit-align-items:center;
		display:flex;
		display: -webkit-flex;
		float: left;
		margin:0px;
		padding:0px;
	}
		
	nav #secondary-nav img {
		height:1.5em;
		margin-right:5px;
	}
		
	nav ul > li {
		margin:0px 5px;
	}
	

	nav a {
		border:solid transparent;
		border-width: 0 0 3px 0;
		border-radius: 3px;
		color:#000;
		display: inline-block;
		font-family:Lato;
		padding: 7px 10px 5px 10px;
		position: relative;
	}
	
	nav #secondary-nav {
		flex: 1;
		-webkit-flex:1;
	}

	nav #primary-nav {
		flex: 1;
		-webkit-flex:1;
		justify-content:flex-end;
		-webkit-justify-content:flex-end;
	}
	
	nav,	
	nav #logo-container,
	nav #secondary-nav > *,
	nav ul > li {
		display: flex;
		display: -webkit-flex;
		float:left;
	}
		

	nav + * {
		margin-top: 80px !important;
	}

	nav #secondary-nav li {
		display: none;
	}
	
	
	#svgh-cdf-cardiffstays {
		margin-left:10px;
	}
	
	
	body#home nav .home 							{ border-color:#779029; }
	body#warranties nav .warranty					{ border-color:#495610; }
	body#about nav .about							{ border-color:#40410e; }
	body#boiler nav .boilers						{ border-color:#783609; }
	body#faq-page nav .faqs							{ border-color:#398B9C; }
	body#thermostats nav .thermostats,
	body#finance nav .finance,
	body#how-to-buy nav .how_to_buy,
	body#products nav .products,
	body#quote nav .contact							{ border-color:#806806; }
	
	
	
	.sticky_header {
		z-index:1;
	}	
		

	nav .search {
		border-radius: 3px;
	}


	nav .search .btn {
		align-content: center;
		-webkit-align-content: center;
		background-color: var(--cs-red);
		border-radius: 4px;
		color: var(--white);
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0px;
	}
	
	nav .search input {
		border: 1px solid transparent;
		cursor: pointer;	
		font-size: 16px;
		margin-top:5px;
		padding-left: 10px;
		transition: 0.3s border;
	}
	
	nav .search input#search-date-summary {
		padding-left: 20px;
	}
	


	nav .search input:focus,
	nav .search button:focus {
		outline: none !important;
		box-shadow: none !important;
	}

	nav .search input::-moz-focus-inner,
	nav .search button::-moz-focus-inner {
		border: 0;
	}

	nav .search input:focus::-webkit-textfield-decoration-container {
		box-shadow: none;
	}


	nav .search .date-range-picker > div {
		background: #f4f4f4;
	}



		
    nav .date-range-picker {
		display: inline-block;	
		position: relative;
	}
	
    .drp-input {
		border: 1px solid #ccc;	
		padding: 8px 12px;
		width: 260px;
	}
		
    .drp-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;		
	}
	
    .drp-header button {
		background: none;
		border: none;
		font-size: 18px;
		cursor: pointer;
		color: #333;		
	}
	
	.drp-header button svg {
		border-radius: 50%;
		height: 29px;
		padding: 4px;
		width: 29px;
	}
	
	.drp-header button:hover svg {
		background-color: var(--white);
	}
	
    .drp-range-display {
		font-size: 16px;
		color: #333;
		flex-grow: 1;
		text-align: center;		
	}
		
	.drp-calendars {
		display: flex;
		gap: 16px;		
	}
	
    .drp-month {
		min-width: 200px;		
	}
	
    .drp-month-name {
		text-align: center;
		font-weight: bold;
		margin-bottom: 8px;		
	}
	
    .drp-weekdays, .drp-days {
		display: grid;
		grid-template-columns: repeat(7, 40px);
		gap: 1px;		
	}
	
    .drp-weekdays div {
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 14px;
		color: #666;		
	}
	
    .drp-days div {
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		-webkit-justify-content: center;
		align-items: center;
		-webkit-align-items: center;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 16px;
		cursor: pointer;
		transition-duration: .3s;
		transition-property: background;
		padding: 4px;		
	}
	
    .drp-days div:not(.selected-start, .selected-end):hover,
    .drp-days .in-range {
		background: rgba(0, 123, 255, 0.2);
	}
	
    .drp-days .selected-start, 
	.drp-days .selected-end {
		background: #007bff;
		color: var(--white);		
	}
	
    .drp-days .selected-end {
		border-radius: 0px 3px 3px 0px;
	}
	
    .drp-days .selected-start {
		border-radius: 3px 0px 0px 3px;	
	}
	
    .drp-days .in-range {
		border-bottom: 1px dotted rgba(0, 123, 255, 0.2);	
		border-radius: 3px;
		border-top: 1px dotted rgba(0, 123, 255, 0.2);
	}
	
	
	
	
	.search .btn.ready {
		background-color: #2c80fc;
	}




	#primary-nav .guest-picker.show {
		display: block;
		opacity: 1;
	}
	#primary-nav .guest-picker > div,
	#primary-nav .guest-picker .gp-btn {
		display: flex;
		display: -webkit-flex;
	}
	#primary-nav .guest-picker > div {
		align-items: flex-start;
		-webkit-align-items: flex-start;
		margin-bottom: 10px;
	}
	#primary-nav .guest-picker > div:last-child {
		margin-bottom: 0;
	}
	#primary-nav .guest-picker .gp-row label,
	#primary-nav .gp-count {
		padding-top:6px;
	}
    #primary-nav .gp-count {
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }
	#primary-nav .guest-picker .gp-row label {
		flex: 1;
		-webkit-flex: 1;
		color: #333;
		font-size: 16px;
		font-weight: 500;
		margin-right:20px;
	}
	#primary-nav .guest-picker .gp-row label > span {
		color: #585858;
		font-weight: normal;
	}
	#primary-nav .gp-btn {
		justify-content: center;
		-webkit-justify-content: center;
		align-items: center;
		-webkit-align-items: center;
		border: 1px solid #e4e4e4;
		border-radius: 4px;
		background: var(--white);
		color: #3f85f9;
		height: 32px;
		font-size: 18px;
		font-weight:bold;
		cursor: pointer;
		transition: background 0.2s, border-color 0.2s;
		width: 32px;
	}
	#primary-nav .gp-btn:disabled {
		cursor: not-allowed;
		opacity: 0.3;
	}
	#primary-nav .gp-btn svg {
		stroke:#3f85f9;
		height: 12px;
		width: 12px;
	}
	#primary-nav .gp-btn:hover:not(:disabled) {
		background: rgba(0,123,255,0.1);
		border-color: #007bff;
	}
	#primary-nav wcount {
		color:#000;
		font-size: 16px;
		font-weight: 500;
		margin: 0 8px;
		text-align: center;
		width: 36px;
	}




	@media (max-width: 991px) {
		main {
			padding: 10px 20px 20px 20px;
		}
		
		nav	{
			background-color:var(--white);
			box-shadow: none;
			height:auto;
			position: fixed;
		}
		
		nav #primary-nav,
		nav #secondary-nav,
		nav #secondary-nav button,
		nav #secondary-nav #search-container {
			display: flex;
			display: -webkit-flex;
		}
		
				
		nav #primary-nav {
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-justify-content: flex-start;
			justify-content: flex-start;
			background-color: #e1e0dd;
			padding: 10px 15px 30px 15px;
			right: -100vw;
			width: 100vw;		
			z-index: 10;
			margin: 0px;
			-webkit-opacity: 0;
			opacity: 0;
			overflow-y: scroll;
			position: fixed;
			height: calc(100vh - 70px);
			top: 70px;
			transition-duration: .3s;
			transition-property: opacity;
		}
		

		#main-nav.open #primary-nav {
			-webkit-animation: dropdown_on_mobile 0.7s cubic-bezier(0.5, 0, 0, 1) forwards;
			animation: dropdown_on_mobile 0.7s cubic-bezier(0.5, 0, 0, 1) forwards;
		}

		
		
		nav #svgh-cdf-nav {
			fill:var(--indigo);
			margin-right: 5px;
		}

		nav #svgh-cdf-cardiffstays {
			height: 30px;
			margin: 5px 0px 0px 10px;
		}
		
							
		nav #primary-nav .tel {				display: block; }
		nav #primary-nav .tel a {			padding: 0px; }	
		nav #primary-nav .tel svg {			margin-left: 7px; }
		
		
		
		nav #primary-nav .search {
			-webkit-flex-direction: column;
			flex-direction: column;
			background-color: var(--white);
			margin-bottom: 10px;

			/*max-height: 0px;
			opacity: 0;
			overflow: hidden;
			pointer-events: none;
			transform: translateY(-12px);
			transition: max-height 0.35s ease, opacity 0.25s ease, padding-bottom 0.35s ease, transform 0.35s ease;
			visibility: hidden;*/
		}
		
		/*nav #main-nav.go-search #primary-nav .search {
			max-height: 999px;
			opacity: 1;
			overflow: unset;
			pointer-events: auto;
			transform: translateY(0);
			visibility: visible;
		}*/

		nav .date-range-picker:before {
			content: 'Your reservation dates';
			display: block;
			width: 100%;
			padding: 5px 0px;
			text-align: center;
			font-weight: 600;
			color: black;
			font-size: 18px;
		}

		nav #primary-nav .guest-picker {
			padding: 15px 15px 0 15px;
			width: 100%;
		}
		
		nav #primary-nav .guest-picker .gp-row label br {
			display: none;
		}
		
		nav #primary-nav .guest-picker .gp-row label span {
			text-transform: lowercase;
		}
		
		nav .search .date-range-picker > div {
			padding: 15px;
			width: 100%;
		}
				
		nav .search input#search-date-summary {
			display: none;
		}
		
		nav .search input.gp-guests,		
		nav .search .drp-range-display {
			display: none;
		}
				
		
		nav .drp-calendar {
			display: block !important;
			position: relative;
		}
				
		
		nav .drp-calendars {
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-flex-wrap: wrap;
			flex-wrap: wrap;
			background-color: var(--white);
			border-radius: 4px;
			gap: 0px;
			padding: 5px;
		}
		
		nav .drp-header {
			margin-bottom: 3px;
			padding: 5px 5px 0px 5px;
			position: absolute;
			top: 16px;
			width: calc(100% - 30px);
		}
		
		nav .drp-month-name {
			padding-top: 5px;
		}
		
		nav .drp-weekdays, 
		nav .drp-days {
			-webkit-justify-content: center;
			justify-content: center;
			gap: 1px;
		}
	

		nav .search .btn {
			font-size: 18px;
			font-weight: 600;
			margin: 10px 15px;
			padding: 10px 10px 10px 20px;
			text-align: left;
		}
		
		
		
				
		nav ul > li {
			margin: 0px;
		}
		
		nav #primary-nav li a img,
		nav #secondary-nav li a img {
			height:35px;
		}
		
		nav #primary-nav li.xs {
			display: block;
			padding: 0px 20px;
			text-align: left;
			width: 100%;
		}
		
		nav #primary-nav li.xs a {
			border-color: #ccc;
			border-style: solid;
			border-width: 0 0 1px 1px;
			color: black;
			font-weight: 600;
			margin-top: 10px;
			padding: 10px 10px 10px 20px;
			width: 100%;
		}
		
		nav #main-nav.container {
			box-shadow: 0px 0px 50px #ddd6;
			padding:0px;
		}
		
		nav #secondary-nav a,
		nav #secondary-nav button label,
		nav ul a {
			border:none;
			font-size: 1.5rem;
			letter-spacing: 0px;		
		}
		
		nav ul .telno {
			font-size: 1.4em;
		}
		
		
		


		nav #secondary-nav {
			border-radius: 5px;
			margin: 15px 15px 10px 15px;
			width: calc(100vw - 30px);
			z-index: 99;
		}
		
		nav #secondary-nav #logo-container {
			-webkit-align-items: center;
			align-items: center;
		}
		
		nav #secondary-nav button {
			-webkit-align-items:center;
			align-items:center;
			background-color: var(--white); /*#af0c47;*/
			border: none;
			border-radius: 5px;
			box-shadow: 0 0 20px #ddd4;
			margin-left: auto;
			padding: 3px 8px 0px 8px;
			text-align: right;
		}
		
		nav #secondary-nav button > .nav-icon {
			width: 35px;
		}

		nav #secondary-nav button > div {
			padding-bottom: 4px;
		}
	
		nav #secondary-nav button > .nav-icon div, 
		nav #secondary-nav button > .nav-icon:after, 
		nav #secondary-nav button > .nav-icon:before {
			background-color: var(--cs-red);
			content: '';
			display: block;
			height: 4px;
			margin: 7px 0;
			transition: all .2s ease-in-out;
		}
		

		#main-nav.open  #nav-mnu .nav-icon:before {
		  transform: translateY(11px) rotate(45deg);
		}

		#main-nav.open  #nav-mnu .nav-icon:after {
		  transform: translateY(-11px) rotate(-45deg);
		}

		#main-nav.open  #nav-mnu .nav-icon div {
		  transform: scale(0);
		}

		
		nav #secondary-nav button label {
			font-weight:normal;
			margin-right:10px;
		}
		
				
		nav #secondary-nav a.make_appointment {
			font-size:2.3rem;
		}
		
		nav #secondary-nav #search-container {
			-webkit-align-content: center;
			align-content: center;
			-webkit-justify-content: center;
			justify-content: center;
			background-color: #af0c47;
			border-radius: 5px 0px 0px 5px;
			height: 50px;
			margin-left: auto;
		}
		
		nav #secondary-nav #search-container svg {
			fill: var(--white);
			margin: auto;
		}
		
		nav #secondary-nav button {
			display: block;
		}
		
		nav #tertiary-nav {
			display: none;
		}
	}


	@media (max-width: 1097px) {
		nav > .container {
			width:auto;
		}
	}


	@media (max-width: 1200px) {
		nav ul {
			justify-content: space-between;
		}
	}
	


	@media screen and (min-width: 992px) {
		main {
			padding: 20px;
		}
		
		nav > .container,
		body > #intro:first-of-type nav > .container,
		#banner-main nav > .container {
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			-webkit-flex-direction: row;
			justify-content: space-between;
			-webkit-justify-content: space-between;
		}
		
		nav.fixed_header {
			box-shadow: 0px 5px 30px rgba(200,200,200,0.3);
		}

		
		nav #svgh-cdf-nav {
			fill:#ffffff;
			margin-right: 15px;
		}

		
		nav #main-nav {
			background-color: var(--white);
			padding: 0px 15px 0px 30px;
			width: 100%;
		}
		
		
		nav #primary-nav,
		nav #tertiary-nav {
			padding-top:15px;
			padding-bottom:20px;
		}
		
		#primary-nav .guest-picker {
			cursor: pointer;
			display: none;
			left: 48%;
			margin-top: 6px;
			opacity: 0;
			position: absolute;
			padding: 12px;
			top: 100%;
			transition-property: opacity;
			transition-duration: .3s;
			width: 355px;
		}
		
		nav .search {
			justify-content: flex-end;
			-webkit-justify-content: flex-end;
			flex: 1;
			-webkit-flex: 1;
			border: 1px solid #f3f3f3;
		}
	
		nav .search .date-range-picker > div {
			border: 1px solid #f2f2f2;
			border-radius: 4px;
			box-shadow: 0 20px 30px rgba(0,0,0,0.15);
			margin-top: 6px;
			padding: 15px 22px 15px 25px;
		}

		nav .search input {
			height: calc(100% - 10px);
		}


		nav .search input.drp-input {	width: 49%; border-right: 1px solid #eee; }
		nav .search input.gp-guests {	width: 49%;	padding-left: 15px; }


		nav .search .btn {
			margin: 5px 6px 5px 10px;
			padding: 4px 10px;
		}


		nav .date-range-picker {
			-webkit-flex: 1;
			flex: 1;
			min-width: 510px;
		}
		
		nav .drp-calendar {
			display: none;
			left: 0;
			margin-top: 6px;
			position: absolute;
			top: 100%;
			z-index: 100;	
		}
		


		nav a {
			color:var(--indigo);
			cursor: pointer;
			font-weight: 600;
		}
		

		nav ul > li:not(.search):hover > a {
			background-color:#0b4770;
			color:var(--white);
			text-decoration:none;
		}
	
		nav ul > li:not(.xs) {
			display: flex;
			display: -webkit-flex;
		}
	
		nav ul li.xs {
			display: none;
		}
	
	
		nav.fixed_header #cardiffstays-logo-svg {
			background: url('/_images/cardiffstays-logo.svg') no-repeat;
		}


		nav .search input:hover {
			border-bottom: 1px solid #995544;
		}
		
		nav #primary-nav .portfolio,
		nav #tertiary-nav .make_appointment {
			white-space: nowrap;
		}

		nav #secondary-nav #search-container,
		nav #secondary-nav button,
		nav #primary-nav .tel {
			display:none;
		}

				
		.navbar-nav > li > a { 
			padding-left:8px !important; padding-right:8px !important; font-size:1.1em; 
		}
		

		.sticky_header.fixed_header {
			float:left;
			position:absolute;
			z-index:10;
		}
	}	
	
	
	
	@media screen and (min-width: 1200px) 	{
		.navbar-nav > li > a { 
			padding-left:10px !important; padding-right:10px !important; font-size:1.5em; 
		}	
		
		nav #tertiary-nav .call a:before {
			color:var(--white);
			content:'Call '; 
			margin-right:5px;
		}
	}