/* ========================================================================================= */
/* ********************* A Custom Build by Craft & Cloud Marketing Co. ********************* */
/* ========================================================================================= */
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*================================ Customer: Resource Rentals ===============================*/
/*================================ Build Date: December 2024 ================================*/
/*================================ Developer: Vince Nisly ===================================*/
/*|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/* ========================================================================================= */
/* ***************************** Beautifully written CSS below ***************************** */
/* ========================================================================================= */

/* Variables */

:root {
	--background: #f5f5f5;
	--dark-blue: #0F1936;
	--brown: #9B8163;
	--gray: #605F64;
	--patua: Patua One, serif;
	--istok: Istok Web, serif;
	--mini-text: clamp(5px, 1.2vw, 18px);
	--small-text: clamp(20px, 2.5vw, 22px);
	--small-heading: clamp(25px, 3vw, 30px);
	--heading: clamp(20px, 6vw, 55px);
	--heading2: clamp(14px, 5vw, 40px);
	--paragraph: clamp(14px, 4vw, 25px);
	--buttons: clamp(12px, 3vw, 28px);
}

/* Some General Styles */

@media screen and (min-width: 769px) {
	
	.only-mobile {
		display: none;
	}
}

@media screen and (max-width: 768px) {
	
	.only-desk {
		display: none !important;
	}
}

.categories {
	padding: 0 1em;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2em;
	justify-content: center;
	max-width: 1500px;
	margin-left: auto;
	margin-right: auto;
	
	a {
		color: var(--dark-blue);
		font-family: var(--istok);
		font-size: var(--mini-text);
		padding-left: 15px;
		font-weight: bold;
	}
	
	a:hover {
		color: var(--gray);
	}
}

@media screen and (min-width: 768px) {

	.blazy.b-flexbox--sm-2 > .grid {
		flex: 0 1 calc(33% - var(--bfb-col-gap)) !important;
	}
}

@media screen and (min-width: 1450px) {

	.blazy.b-flexbox--sm-2 > .grid {
		flex: 0 1 calc(25% - var(--bfb-col-gap)) !important;
	}
}

.blazy--grid {
	/*padding: 0 1em !important;*/
	
	@media screen and (min-width: 1800px) {
		max-width: 1800px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

.page-node-type-general-page .blazy {
	box-sizing: content-box !important;
}

#block-cirrocumulus-content {
	position: relative;
}

.feed-icon {
	display: none;
}

img {
	width: 100%;
	height: auto;
}

body {
	margin: 0;
	overflow-x: hidden;
}

main {
	background-color: var(--background);
}

.path-frontpage main {
	background-color: white;
}

h2 {
	font-size: var(--heading);
}

h1, h2, h3 {
	font-family: var(--patua);
	padding: 0 2rem;
}

p {
	font-family: var(--istok);
	font-size: var(--paragraph);
	padding: 0 2rem;
}

.all-caps {
	text-transform: uppercase;
}

.align-center {
	text-align: center;
}

.blue-background {
	background-color: var(--dark-blue);
	color: white;
	
	@media screen and (min-width: 1800px) {
		max-width: 1800px !important;
		padding-left: calc((100vw - 1800px) /2) !important;
		padding-right: calc((100vw - 1800px) /2) !important;
		margin-left: auto;
		margin-right: auto;
	}
}

.white-text {
	color: white;
}

.blue-text {
	color: var(--dark-blue);
}

.white-button {
	text-align: center;
	width: 40vw;
	max-width: 350px;
	display: block;
	margin: auto;
	padding: 2vw 0vw;
	background-color: white;
	color: var(--dark-blue);
	text-decoration: none;
	border-radius: 5px;
	font-size: var(--buttons);
	font-family: var(--istok);
	font-weight: bold;
	
	@media screen and (min-width: 768px) {
		padding: 1em;
	}
}

.gray-button {
	text-align: center;
	width: 40vw;
	display: block;
	margin: auto;
	padding: 1vw 0vw;
	background-color: var(--gray);
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-size: var(--buttons);
	font-family: var(--istok);
	
	@media screen and (min-width: 768px) {
		padding: .5em 0;
	}
}

@media only screen and (min-width: 768px) {

	.b-column--md-2 {
		-webkit-columns: 15em 1 !important;
		-moz-columns: 15em 1 !important;
		columns: 15em 1 !important;
	}
}

@media only screen and (min-width: 1250px) {

	.b-column--md-2 {
		-webkit-columns: 15em 3 !important;
		-moz-columns: 15em 3 !important;
		columns: 15em 3 !important;
	}
}

@media only screen and (min-width: 1400px) {

	.b-column--md-2 {
		-webkit-columns: 15em 4 !important;
		-moz-columns: 15em 4 !important;
		columns: 15em 4 !important;
	}
}

/* ===== HEADER STYLES ===== */

header {
	width: 100%;
	
	>div {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	@media screen and (max-width: 769px) {
		
		#block-cirrocumulus-main-menu, #block-cirrocumulus-headerhours {
			display: none;
		}
	}
	
	#block-cirrocumulus-headerhours .header-hours {
		background-color: var(--dark-blue);
		color: white;
		text-align: center;
		border-radius: 0  0 15px 15px;
		padding: .5em;
		
		p {
			margin: 0;
			font-size: var(--mini-text);
			font-family: var(--patua);
		}
	}
	
	#block-cirrocumulus-sitelogo {
		width: 50vw;
		padding: .5em;
		max-width: 300px;
		display: flex;
		align-items: center;
	}
	
	@media only screen and (min-width: 960px) {
		
		>div {
			margin: 0 1em;
			
			@media screen and (min-width: 1800px) {
				max-width: 1800px !important;
				padding-left: calc((100vw - 1800px) /2) !important;
				padding-right: calc((100vw - 1800px) /2) !important;
				margin-left: auto;
				margin-right: auto;
			}
		}
		
		#block-cirrocumulus-responsivemenumobileicon {
			display: none !important;
		}
		
		#block-cirrocumulus-sitelogo {
			width: 150px;
		}
		
		#horizontal-menu {
			font-size: var(--mini-text);
			font-family: var(--istok);
			font-weight: 600;
			
			a {
				color: var(--dark-blue);
				font-family: var(--istok);
			}
		}
		
		#block-cirrocumulus-horizontalmenu {
			display: flex;
			align-items: center;
		}
		
		#block-cirrocumulus-headerhours {
			margin-bottom: 1em;
		}
		
		#block-cirrocumulus-headerhours .header-hours p {
			padding: 0;
		}
	}
}

/* Search Setup */

#block-cirrocumulus-searchicon {
	display: flex;
	align-items: center;
	
	.search-icon-container {
		border: 3px solid var(--dark-blue);
		border-radius: 50%;
		height: 25px;
		width: 25px;
		padding: 8px;
	}
	
	.search-icon-container:hover {
		-webkit-box-shadow: 1px 2px 15px 0px rgba(0,0,0,0.34);
		-moz-box-shadow: 1px 2px 15px 0px rgba(0,0,0,0.34);
		box-shadow: 1px 2px 15px 0px rgba(0,0,0,0.34);
	}
}

.path-search {
	text-align: center;
	font-family: var(--istok);
	
	main {
		padding-top: 1em;
		padding-bottom: 2em;
	}
}

#block-cirrocumulus-exposedformsearch-resultspage-1, #views-exposed-form-search-results-page-1 {
	padding-bottom: 2em;
}

#block-cirrocumulus-exposedformsearch-resultspage-1, #block-cirrocumulus-exposedformsearch-resultspage-1-2 {
	
	#views-exposed-form-search-results-page-1 {
		display: flex;
		width: 80vw;
		justify-content: space-between;
		padding-left: 10vw;
		max-width: 1000px;
		margin: auto;
		
		@media screen and (min-width: 1000px) {
			padding-left: 0;
		}
		
		.js-form-item {
			
			label {
				display: none;
			}
			
			.form-text {
				width: 55vw;
				max-width: 800px;
				font-size: var(--paragraph);
				border: 1px solid var(--dark-blue);
				border-radius: 10px;
				padding: .25em;
				font-family: var(--istok);
			}
		}
		
		#edit-submit-search-results, #edit-submit-search-results--2 {
			background-color: var(--dark-blue);
			border: 1px solid var(--dark-blue);
			color: white;
			padding: .25em 1em;
			border-radius: 10px;
			font-size: var(--paragraph);
			font-family: var(--istok);
		}
	}
}

/* ===== HOME PAGE STYLES ===== */

@media screen and (min-width: 768px) {
	
	.banner-text-container {
		position: absolute;
		top: 0;
		background-color: #ffffffa1;
		width: 50%;
		max-height: 30vw;
		margin-top: 2em;
		margin-left: 2em;
	}
	
	.banner-heading {
		font-size: clamp(30px, 4vw, 55px);
		color: var(--dark-blue);
	}
	
	.banner-p {
		font-size: clamp(17px, 2vw, 25px);
		font-weight: bold;
		color: var(--dark-blue);
	}
	
	.banner-text-container .banner-buttons {
		width: 100%;
		margin-top: 3em;
		
		a {
			margin: 0 1em;
			max-width: 300px;
		}
	}
}

@media screen and (min-width: 820px) {
	
	.banner-text-container .banner-buttons {
		margin-top: 4em;
	}
}

@media screen and (min-width: 2000px) {
	
	.banner-text-container {
		margin-left: calc((100vw - 1800px) / 2) !important;
		margin-top: 7em !important;
	}
}

@media screen and (min-width: 1400px) {
	
	.banner-text-container .banner-buttons {
		width: 60%;
	}
}

@media screen and (min-width: 1550px) {
	
	.banner-text-container {
		margin-top: 5em;
		max-width: 700px;
	}
}

@media screen and (min-width: 1100px) {
	
	.banner-text-container .banner-buttons {
		margin-top: 3.3em;
	}
	
	.banner-text-container {
		max-height: 350px;
	}
}

.banner-buttons {
	display: flex;
	flex-wrap: nowrap;
	width: 85vw;
	margin: 2em auto 3em auto;
	
	@media screen and (min-width: 768px) {
		
		a {
			font-size: clamp(16px, 2vw, 20px);
		}
	}
	
	@media screen and (min-width: 1100px) {
		flex-wrap: wrap;
		justify-content: center;
		
		a {
			margin-top: 0.5em !important;
		}
	}
}

.thumbnail-section-container {
	padding-top: 5em;
	max-width: 600px;
	margin: auto;
	
	@media screen and (min-width: 1400px) {
		padding-top: 8em;
	}
	
	@media screen and (min-width: 2000px) {
		padding-top: 15em;
	}

	.thumbnail-container {
		
		.thumbnail-image {
			background-color: white;
			position: relative;
			height: 50vw;
			margin: 15vw 2em 0 2em;
			
			img {
				height: auto;
				width: 60vw;
				margin-left: 12vw;
				margin-top: -13vw;
				position: absolute;
				max-width: 500px;
				
				@media screen and (min-width: 600px) {
					margin-left: 2em;
				}
			}
		}
		
		.thumbnail-text {
			text-align: center;
			
			a {
				color: white;
				text-decoration: none;
				font-family: var(--patua);
				
				@media screen and (max-width: 768px) {
					font-size: var(--heading2)
				}
			}
		}
	}
}

@media screen and (min-width: 768px) {
	
	.our-mission {
		border-left: 3px solid var(--gray);
		margin-left: 2em;
	}
	
	.thumbnail-section-container {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		max-width: 90vw;
		
		.thumbnail-container {
			width: 26vw;
			
			.thumbnail-image {
				margin: 0;
				height: 20vw !important;
				
				img {
					height: auto;
					width: 90%;
					margin: 0;
					margin-top: -5vw;
					margin-left: 5%;
				}
			}
		}
	}
}

@media screen and (min-width: 2000px) {
	
	.thumbnail-section-container {
		
		.thumbnail-container {
			max-width: 500px;
			
			.thumbnail-image {
				max-height: 370px !important;
			}
		}
	}
}

.home-button-1 {
	margin-top: 4em;
}

.home-blue-block-1 {
	padding-bottom: 8vw !important;
	
	@media screen and (min-width: 768px) {
		margin-top: -.5em;
	}
	
	@media screen and (min-width: 2000px) {
		padding-bottom: 4em !important;
	}
}

.icon-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 .25em 1em .25em;
	
	@media screen and (min-width: 1400px) {
		width: 90vw;
		margin: auto;
		max-width: 1000px;
	}
	
	h2 {
		width: 100%;
	}
	
	.icon-inner-container {
		width: 33%;
		max-width: 300px;
		
		p {
			font-size: clamp(9px, 1.5vw, 18px);
			font-weight: bold;
			color: var(--dark-blue);
		}
	
		.blue-circle {
			background-color: var(--dark-blue);
			border-radius: 50%;
			padding: 2rem;
			margin: 0 .25em;
			
			@media screen and (min-width: 610px) {
				padding: 3em;
			}
			
			@media screen and (min-width: 1400px) {
				padding: 5em;
			}
		}
	}
}

.why-choose-section {
	padding: 3em 0;
	
	img {
		border: 5px solid white;
		border-radius: 10px;
		width: 80%;
		margin: 10%;
		
		@media screen and (min-width: 1500px) {
			margin-bottom: -6em;
		}
		
		@media screen and (min-width: 2000px) {
			margin-bottom: -10em;
		}
	}
	
	@media screen and (min-width: 960px) {
		
		.why-choose-container {
			display: flex;
		}
	}
	
	@media screen and (min-width: 2000px) {
		
		.why-choose-container {
			display: flex;
			justify-content: space-between;
			
			img {
				width: 100%;
			}
		}
	}
}

.propane-section {
	background-color: var(--brown);
	color: white;
	margin-top: 15vw;
	padding-bottom: 1em;
	
	@media screen and (min-width: 1500px) {
		margin-top: 10vw;
		max-height: 300px;
		margin-bottom: 15em;
	}
	
	@media screen and (min-width: 1800px) {
		max-width: 1800px !important;
		padding-left: calc((100vw - 1800px) /2) !important;
		padding-right: calc((100vw - 1800px) /2) !important;
		margin-left: auto;
		margin-right: auto;
	}
	
	@media screen and (min-width: 2000px) {
		max-width: 1600px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	.propane-inner {
		display: flex;
		
		.propane-text {
			width: 60%;
			padding-top: 1.5em;
			padding-bottom: 1em;
			
			.larger-p {
				font-size: 4vw;
				
				@media screen and (min-width: 950px) {
					font-size: clamp(14px, 4vw, 40px);
				}
			}
			
			p {
				font-size: 2.5vw;
				margin: 0;
				
				@media screen and (min-width: 950px) {
					font-size: clamp(14px, 3.5vw, 25px);
				}
			}
		}
		
		.propane-image-container {
			width: 35%;
			
			@media screen and (min-width: 768px) {
				max-width: 400px;
			}
			
			img {
				border: 5px solid white;
				border-radius: 10vw;
				margin-top: -12vw;
				
				@media screen and (min-width: 768px) {
					border-radius: 3em;
					margin-top: -4vw;
					margin-bottom: -4vw;
				}
				
				@media screen and (min-width: 1500px) {
					margin-top: -8vw;
				}
				
				@media screen and (min-width: 2000px) {
					margin-top: -7em;
				}
			}
		}
	}
}

#slick-8236aac58c6:before {
	height: 60vw;
	max-height: 200px;
	width: 100vw;
	content: "";
	background-color: var(--dark-blue);
	display: block;
	
	@media screen and (min-width: 660px) {
		max-height: 220px !important;
	}
	
	@media screen and (min-width: 768px) {
		margin-top: 10em;
	}
	
	@media screen and (min-width: 2000px) {
		max-width: 1600px;
		margin: auto;
	}
}

#slick-8236aac58c6 {
	position: relative;
	z-index: 1;
	padding-bottom: 2em;
}

.slick {
	margin-top: 3em;
	background-color: white;
	position: relative;
	z-index: 10;
	
	.slick-list {
		margin-top: -9em;
		overflow: visible;
	}
	
	.slick-slide {
		font-size: clamp(18px, 3vw, 25px);
		text-align: center;
		padding: 2em 1em;
		margin: 0 1em;
		background-color: rgba(245, 245, 245, 0.948);
		-webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.16);
		-moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.16);
		box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.16);
		font-family: var(--istok);
		height: 400px;
		
		@media screen and (min-width: 768px) {
			margin: 0 0.5em;
			font-size: clamp(18px, 2vw, 25px);
		}
	}
	
	.slick-slide:before {
		content: "";
		display: block;
		height: 80px;
		width: 80px;
		position: relative;
		background-image: url("/themes/custom/cirrocumulus/images/Person.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-color: var(--dark-blue);
		border-radius: 50%;
		border: 10px solid var(--dark-blue);
		padding: 10px;
		margin: -4.5em auto 2em auto;
	}
}

/* This styles the CTS's at the bottom */

.cta {
	margin-top: 3em;
	margin-bottom: 3em;
	
	@media screen and (min-width: 768px) {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		max-width: 900px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.blue-button {
		text-align: center;
		width: 40vw;
		max-width: 350px;
		display: block;
		margin: auto;
		padding: 2vw 0vw;
		background-color: var(--dark-blue);
		color: white;
		text-decoration: none;
		border-radius: 5px;
		font-size: var(--buttons);
		font-family: var(--istok);
		font-weight: bold;
		
		@media screen and (max-width: 768px) {
			margin-bottom: 1em;
		}
		
		@media screen and (min-width: 768px) {
			padding: 1em;
		}
	}
}


/* ===== Rental Items Landing pages ===== */

.views-element-container h2 {
	width: 100%;
	text-align: center;
	background-color: var(--dark-blue);
	padding: .5em 0;
	color: white;
}

.views-field-field-rental-item-photo {

	.field-content {
		margin: 1em 2em;
		background-color: white;
		border-radius: 15px;
		padding: 2em;
		aspect-ratio: 3/2;
		height: 100%;
		-webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.16);
		-moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.16);
		box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.16);
		display: flex;
		justify-content: center;
		align-self: center;
	}
	
	img {
		height: 100%;
		width: auto;
	}
}

.blazy--grid {
	max-width: 1600px;
}

.grid {	
	
	@media screen and (max-width: 484px) {
		height: auto !important;
	}
	
	@media screen and (min-width: 485px) {
		height: 85vw !important;
	}
	
	@media screen and (min-width: 543px) {
		height: 25em !important;
	}
	
	/*@media screen and (min-width: 750px) {
		height: 22em !important;
	}*/
	
	@media screen and (min-width: 820px) {
		height: 49vw !important;
	}
	
	@media screen and (min-width: 1200px) {
		height: 35em !important;
	}
	
	@media screen and (min-width: 1400px) {
		height: 28em !important;
	}
}

.views-field-title {
	text-align: center;
	
	.field-content {
		color: black;
		text-decoration: none;
		font-weight: bold;
		font-family: var(--istok);
		font-size: var(--small-heading);
		margin-bottom: 0;
		margin-top: 0;
	}
}

.views-field-field-rental-item-description {
	
	p {
		margin-top: 0 !important;
		font-family: var(--istok);
		text-align: center;
		font-size: var(--small-text);
	}
}

.categories-section {
	padding: 0 1em;
	
	.views-row {
		
		a {
			font-size: var(--mini-text);
			font-family: var(--istok);
			text-decoration: none;
			color: var(--dark-blue)
		}
	}
}

.blue-bar-call {
	background-color: var(--dark-blue);
	padding: 1em;
	max-width: 1600px;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	@media screen and (min-width: 1650px) {
		max-width: 1600px;
		padding: 0 calc((100vw - 1600px) / 2);
	}
	
	h2 {
		margin: 0;
		font-weight: 100;
		font-size: var(--heading2);
		padding: 0;
	}
	
	a {
		color: var(--dark-blue);
		text-decoration: none;
		background-color: white;
		padding: 0.55em 1.5em;
		margin: 1em;
		font-family: var(--patua);
		border-radius: 10px;
		font-size: var(--paragraph);
	}
}

/* This creates the drop down for the categories */

/* Navbar container */
.navbar {
  overflow: hidden;
  font-family: var(--istok);
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: .25em 1em;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  /*float: left;*/
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: .25em 1em;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  background-color: var(--dark-blue);
  border-radius: 10px;
  min-width: 160px;
  margin-top: 1em;
  margin-left: 1.5em;
}

.dropdown .dropbtn:hover {
	border-radius: 10px 10px 0 0;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: var(--dark-blue);
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--dark-blue);
  width: 65vw;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 0 10px 10px 10px;
  margin-left: calc(1.5em - 2px);
  border-right: 2px solid var(--background);
  border-left: 2px solid var(--background);
  border-bottom: 2px solid var(--background);
  margin-top: -.5em;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-family: var(--istok);
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: rgba(255, 255, 255, 0.395);
  border-radius: 10px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Contact Us Page */

#block-cirrocumulus-webform {
	margin: 1em;
	padding: 5em 1em;
	max-width: 1000px;
	margin: auto;
	
	label {
		font-family: var(--istok);
		font-weight: bold;
		color: var(--dark-blue);
		font-size: var(--paragraph);
	}
	
	.webform-name, .webform-email, .webform-message, .webform-phone {
		box-sizing: border-box;
		width: 100%;
		border: none;
		border-radius: 10px;
		padding: .5em;
		font-size: var(--paragraph);
		font-family: var(--istok);
		margin-bottom: 1em;
		color: var(--dark-blue);
	}	
	
	#edit-would-you-like-a-call-back--wrapper-legend {
		font-size: var(--paragraph);
		font-family: var(--istok);
		font-weight: bold;
		color: var(--dark-blue);
	}
	
	#edit-would-you-like-a-call-back label {
		font-weight: normal;
		color: var(--dark-blue);
	}
	
	#edit-actions-submit {
		text-align: center;
		width: 40vw;
		display: block;
		margin: 2em auto 0 auto;
		padding: 2vw 0vw;
		background-color: var(--dark-blue);
		color: white;
		text-decoration: none;
		border-radius: 5px;
		font-size: var(--heading2);
		font-family: var(--istok);
		border: none;
		
		@media screen and (min-width: 768px) {
			max-width: 400px;
			padding: .5em 0;
		}
	}
}

/* Map */

.im-the-map {
	padding: 2em 3em;
	background-color: var(--dark-blue);
	
	@media screen and (min-width: 1800px) {
		max-width: 1800px;
		padding-left: calc((100vw - 1800px) /2) !important;
		padding-right: calc((100vw - 1800px) /2) !important;
		margin-left: auto;
		margin-right: auto;
	}
	
	.map-inner {
		border: 25px solid white !important;
		box-sizing: border-box !important;
		border-radius: 10px;
	}
	
	.map-text {
		font-family: var(--istok);
		font-size: var(--paragraph);
		padding-top: 1.5em;
	}
	
	iframe {
		box-sizing: border-box;
		width: 100%;
		margin-bottom: -0.25em;
	}
}

/* Footer */

footer {
	background-color: var(--background);
	padding-top: 8em;
	margin: auto;
	
	@media screen and (min-width: 1800px) {
		max-width: 1800px !important;
		padding-left: calc((100vw - 1800px) /2) !important;
		padding-right: calc((100vw - 1800px) /2) !important;
		margin-left: auto;
		margin-right: auto;
	}
}

#block-cirrocumulus-footer {
	padding-bottom: .5em;
	
	p {
		font-size: var(--small-text);
		color: var(--dark-blue);
		text-align: center;
	}
	
	a {
		font-size: inherit;
		color: inherit;
	}
}

footer #block-cirrocumulus-mainnavigation {
	
	>ul {
		text-align: center;
		font-size: var(--paragraph);
		font-family: var(--istok);
		padding-left: 0;
		
		@media only screen and (min-width: 960px) {
			display: flex;
			justify-content: space-between;
			margin: 0 1em;
		}
	}
	
	li {
		list-style: none;
		
		a {
			color: var(--dark-blue);
			font-weight: bold;
			font-size: var(--heading);
			
			@media screen and (min-width: 768px) {
				font-size: var(--paragraph);
			}
		}
	}
}

.ara-logo-container {
	width: 30%;
	margin-left: 70%;
	
	img {
		width: 60%;
		height: auto;
		display: block;
		margin: auto;
		max-width: 200px;
	}
}