/*-----------------Site Build May 2024----------------------------*/
/*-----------------Craft and Cloud Marketing Co.-----------------*/
/*-----------------Built by Héctor J. Mejía (HJM)---------------*/
/*-----------------This site mas built DESKTOP first!----------*/
/*-----------------Items of importance are commented throughout--*/

* {
	font-family: Istok Web;
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

*::-webkit-scrollbar {
  display: none;
}

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

.normal {
	font-weight: normal !important;
}

.layout-container {
	margin: -8px -8px -18px -8px;
}

.navButtons {
	text-align: center;
	padding: 2vw 0;
	 
	.call {
		border: 1px solid white;
		background: #781d22;
		border-radius: 5px;
		color: white;
		transition: .5s;
		
		&:hover {
			background: gray;
			color: #781D22;
			transition: .5s;
		}
	}
	
	.get {
		border: 1px solid #871d22;
		background: rgba(255, 255, 255, 0.80);
		border-radius: 5px;
		color: #781d22;
		margin-left: 2vw;
		transition: 0.5s;
		
		&:hover {
			background: gray;
			color: white;
			transition: .5s;
		}
	}
	
	a {
		text-decoration: none;
		padding: .8vw 3vw;
		font-size: 1vw;
		font-weight: bold;
	}
}

.header-cont {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0vw 6vw;
	
	.header-logo {
		width: 10vw;
		height: auto;
	}
	
	a {
		text-decoration: none;
		padding: 3vw;
		color: black;
		transition: 0.25s;
	}
		
	a:hover {
		text-decoration: underline;
		transition: 0.25s;
		font-weight: bold;
	}
	
	.header-menu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 1vw;
		
		.subMenu {
			margin-top: 5vw;
			background: gray;
		}	
	}
	
	.call-button {
		font-weight: bold;
		background: #781d22;
		padding: .5vw;
		border-radius: 0.25vw;
		transition: .5s;
		
		a{
			color: white;
			font-size: 1vw;
		}
		
		&:hover {
			background: gray;
			transition: .5s;
			
			a {
				color: #781D22;
			}
		}
		
	}
}

#shedStyles {
	border: none;
	background: none;
	font-size: 1vw;
	padding: 1vw;
	
	&:hover {
		text-decoration: underline;
		transition: 0.25s;
		font-weight: bold;
		cursor: cell;
	}
}

.shed-styles-menu {
	background: #F5F5F5;
	display: none;
	align-items: center;
	justify-content: space-around;
	text-align: center;
	height: 7vw;
	opacity: 0; 
	visibility: hidden; 
	display: none; 
	animation: slideInOut .5s ease-in-out;
	margin-bottom: -7vw;
	position: relative;
	z-index: 10;
	
	a {
		padding: 0 5vw;
		color: #781d22;
		font-weight: bold;
		font-size: 1vw;
	}
}

.shed-styles-menu.visible { 
	opacity: 1; 
	visibility: visible; 
	display: flex; 
}

@keyframes slideInOut { 
	0% { 
		opacity: 0; 
		visibility: hidden; 
		transform: translateY(-4vw); 
	} 

	50% { 
		opacity: 0.5; 
		visibility: visible; 
		transform: translateY(0); 
	} 

	100% { 
		opacity: 1; 
		visibility: visible; 
		transform: translateY(0); 
	} 
}

.footer-cont {
	background: #F5F5F5;
	padding-top: 3vw;
	font-size: 0.8vw;
	
	a {
		text-decoration: none;
		padding: 0.25vw;
		color: black;
	}
	
	.styles-box {
		display: flex;
		gap: 0.5vw;
	}
	
	.column-one, .column-two {
		display: flex;
		flex-direction: column;
		
	}
	.footer-main {
		display: flex;
		justify-content: space-around;
		
		h5 {
			font-size: 1vw;
		}
		
		h4 {
			font-size: 1.25vw;
			margin-top: 1.15vw;
		}
	}
	
	.footer-address {
		padding-top: 0.3vw;
		
		a {
			font-weight: bold;
			font-size: 1.25vw;
		}
	}
	
	.footer-nav {
		p {
			display: flex;
			flex-direction: column;
		}
	
		a {
			margin: 0;
			gap: 0.5vw;
		}	
	}
	
	.copyright {
		text-align: center;
		width: 70%;
		margin: auto;
		border-top: 1px solid black;
		margin-top: 3vw;
		
		p {
			margin-top: 2vw;
			padding-bottom: 2vw;
		}
	}
}

/*-------------Top section with three white blocks with icons -----------------------------*/

.homeTop {
	background: #781d22;
	padding-bottom: 2.5vw;
	padding-top: 4vw;
	background: linear-gradient(157.5deg, rgba(85, 23, 26, 1.0) 58%, rgba(120, 29, 34, 1.0) 0%);
}

.triple {
	display: flex;
	width: 90%;
	margin: auto;
	justify-content: space-between;
	padding-top: 2vw;
	
	.icon {
		width: 20%;
		margin: auto;
		padding-top: 2vw;
	}

	.box {
		background: white;
		width: 28vw;
		text-align: center;
		color: #781d22;
		
		h4 {
			font-size: 1.5vw;
			margin-top: 0;
		}
	}
	
	.vertLine {
		border: 0.5px solid black;
		width: 0;
	}
}

.homeParagraph {
	color: white;
	font-size: 1.5vw;
	width: 70%;
	margin: auto;
	padding-top: 7vw;
	
	.topLine {
		height: 0vw;
		width: 40%;
		margin-left:0;
		border: 1.25px solid white;
		
	}
	
	.bottomLine {
		height: 0vw;
		width: 40%;
		margin-left: 60%;
		border: 1.25px solid white;
		margin-bottom: 4vw;
		
	}
	
	.paragraph{
		margin: 3vw 0vw;
	}
	
	p {
		margin-top: 0.5vw;
	}
	
	h2 {
		margin-bottom: 0;
	}
}

/*-----------------------Finding Perfect Shed---------------*/

.perfect {
	text-align: center;
	/*background: linear-gradient(170deg, rgba(0, 0, 0, 0.20) 45%, rgba(255, 255, 255, 0) 0%);*/
	padding-bottom: 6vw;
	position: relative;
	
	h2 {
		font-size: 2.5vw;
		padding-top: 4vw;
		margin-top: 0;
		margin-bottom: 4vw;
	}
}

.perfect::before {
	content: '';
	display: block;
	background: linear-gradient(170deg, rgba(0, 0, 0, 0.20) 47%, rgba(255, 255, 255, 0) 0%); 
	padding-bottom: 6vw;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

.tripleRound {
	display: flex;
	width: 60%;
	margin: auto;
	justify-content: space-between;
	padding-bottom: 8vw;
	
	.roundSpot {
		height: 15vw;
		width: 15vw;
		/*background: #781d22;*/
		border-radius: 50%;
		color: white;
		position: relative;
		overflow: hidden;		
			
		.angleLine {
			height: 0;
			width: 80%;
			margin: auto;
			border: 1.25px solid white;
			transform: rotate(-.84deg);
		}
		
		h4 {
			font-size: 3vw;
			margin-top: 1vw;
			margin-bottom: 0;
		}
		
		h6 {
			font-size: 1.5vw;
			margin-top: 1vw;
		}
	}
	
	.roundSpot::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #781d22;
		z-index: 1;
	}

	 .roundSpot .number, .roundSpot .angleLine, .roundSpot h6  {
		z-index: 5;
		position: relative;
	}
}

/*----------Explore Shed Styles----------------------*/
.title {
	text-align: center;
	font-size: 2.25vw;
}

.stylesContainer {
	display: flex;
	flex-wrap: wrap;
	width: 85%;
	margin: auto;
	justify-content: space-between;
	padding-bottom: 6vw;
}

.homeStyles {
	width: 25%;
	margin: auto;
	background-color: #f5f5f5;
	text-align: right;
	background: linear-gradient(160deg, rgb(109, 28, 32) 34%, rgb(245, 245, 245) 0%);
	padding: 2vw;
	margin-top: 3vw;
	position: relative;
	transition: 0.5s;
	
		.barnAdjust {
			img {
				height: 11vw;
				width: auto;
			}	
		}
		
		.hiBarnAdjust {
			img {
				height: 10vw;
				width: auto;
			}	
		}
	
		h5 {
			font-size: 1.25vw;
			margin-bottom: 0;
			color: #781d22;
			text-transform: uppercase;
		}
		
		p {
			margin: 0;
			padding: 0;
		}
	
}

.homeStyles:hover {
	filter: drop-shadow(2px 4px 6px black);
	transition: 0.5s;
}

.styleImage {
	width: 70%;
	height: 10vw;
	margin: auto;
}

.clickable {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 1;
}

/*-----------Why Choose Hillside----------------------------*/
.colorAngle {
	height: 10vw;
	background: linear-gradient(177deg, rgb(109,28,32) 63%, rgba(255, 255, 255, 0) 0%);
	margin-bottom: -7vw;
	position: relative;
	z-index: 1;
	
		h2 {
			color: white;
			font-size: 2.25vw;
			margin-top: 0;
			margin-left: 4vw;
			padding-top: 2vw;
			text-transform: uppercase;
		}
}

.split {
	display: flex;
	justify-content: space-between;
	
	.left {
		background: #f5f5f5;
		width: 50%;
		height: 18vw;
		text-align: center;
	}
	
	.right {
		background: #EAEAEA;
		width: 50%;
		height: 18vw;
		text-align: center;
	}
	
	h4 {
		margin-top: 7vw;
		font-size: 1.5vw;
		color: #781d22;
		line-height: 2;
	}
}

/*---------------Reviews HEADING------------------------*/

.reviews {
	
	h2{
		text-align: center;
		font-size: 3vw;
		padding-top: 4vw;
	}
}

/*------------Better Storage Solution BLOCK-----------------*/
.storageContainer {
	display: flex;
	justify-content: space-between;
	margin-top: 5vw;
	padding: 9vw 5vw;
	background: linear-gradient(157.5deg, rgba(85, 23, 26, 1.0) 54%, rgba(120, 29, 34, 1.0) 0%);
}

.betterStorage {
	width: 55%;
	
	h2 {
		font-size: 3vw;
		color: white;
	}
	
	p {
		color: white;
		font-size: 1.75vw;
	}
	
	summary {
		background: #C3AAAD;
		padding: 1vw;
		border-radius: 0.5vw;
		color: #781d22;
		font-weight: bold;
		font-size: 1.5vw;
	}
	
	details {
		background: #C3AAAD;
		border-radius: 0.5vw;
		max-height: 35vw;
		overflow: scroll;
		margin: 4vw 0;
		
			p {
				color: black;
				margin: 2vw;
			}
	}
	
	details[open] {
		summary {
			position: fixed;
			width: 47.75%;
			border-bottom: 2px solid #781D22;
			border-radius: 0.5vw 0.5vw 0 0;
		}
		
		p {
			margin-top: 5vw;
		}
	}
	
	
}

.storagePhoto {
	width: 38%;
	padding-top: 4vw;
}

/*-------------Options Page--------------------------------------*/

.optionsTitle {
	color: white;
	padding-bottom: 15vw;
	margin-top: -32vw;
	position: relative;
	font-size: 2.25vw;
	padding-left: 6vw;
}

.optionsMain {
	display: flex;
	text-align: center;
	padding-top: 1vw;
}

.option {
	height: 10vw;
	
		h6 {
			margin-bottom: .5vw;
			font-size: 1.5vw;
		}
	
		p {
			margin: 0;
			font-size: 1.25vw;
		}
}

.optionLine {
	height: 0;
	width: 60%;
	margin: auto;
	border: 1px solid white;
}

.leftCol, .rightCol {
	width: 50%;
	margin: auto;
	padding-top: 2vw;
}

.leftCol {
	background: #F5F5F5;
}

.rightCol {
	background: #EAEAEA;
}

/*--------------------Color Palettes Section------------------*/

/*--------------------Roof Colors Section---------------------*/
.roof {
	text-align: center;
	padding-top: 4vw;
	
		.navButtons {
			margin: 4vw 0vw;
		}
	
		h2 {
			font-size: 2.5vw;
		}
	
}

.metalColor {
	
		div {
			width: 100px;
			height: 100px;
			border: 1px solid black;
			margin: 1vw 2vw;
			transition: 0.5s;
		}
	
		div:hover {
			transform: scale(1.4);
			transition: 0.5s;
		}
}


.roofSwatches {
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
	justify-content: center;
	
		.slate {
			background-color: rgb(117,119,110);	
		}
		
		.white {
			background-color: rgb(246,246,244);
		}
		
		.burgundy{
			background-color: rgb(65,50,51);
		}
		
		.charcoal {
			background-color: rgb(113,113,106);
		}
		
		.ash {
			background-color: rgb(171,164,144);
		}
		
		.black {
			background-color: rgb(32,37,34);
		}
		
		.bronze {
			background-color: rgb(64,61,49);
		}
		
		.tan {
			background-color: rgb(152,133,90);
		}
		
		.beige {
			background-color: rgb(223,209,159);
		}
		
		.ivy {
			background-color: rgb(40,67,49);
		}
		
		.ocean {
			background-color: rgb(83,101,117);
		}
		
		.brown {
			background-color: rgb(88,70,63);
		}
		
		.red {
			background-color: rgb(114,50,40);
		}
		
		.clay {
			background-color: rgb(166,150,130);
		}
		
		.stone {
			background-color: rgb(197,178,142);
		}
		
		.patina {
			background-color: rgb(137,171,133);
		}
}


/*--------------Shingle Colors-------------------------------*/
.shingleSwatches {
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
	justify-content: center;
}

.shingleColor {
	
		.hollow {
			background-image: url(/sites/default/files/2024-05/Timberline_HD_Fox_Hollow_Gray.png);
		}
		
		.pewter {
			background-image: url(/sites/default/files/2024-05/Timberline_HD_Pewter_Gray.png);
		}
		
		.charcoal {
			background-image: url(/sites/default/files/2024-05/Timberline_HD_Charcoal.png);
		}
		
		.hunter {
			background-image: url(/sites/default/files/2024-05/Timberline_HD_Hunter_Green.png);
		}
		
		.hickory {
			background-image: url(/sites/default/files/2024-05/Timberline_HD_Hickory.png);
		}
		
		.weathered {
			background-image: url(/sites/default/files/2024-05/Timberline_HD_Weathered_Wood.png);
		}
		
		.shakewood {
			background-image: url(/sites/default/files/2024-05/Timberline_HD_Shakewood.png);
		}
		
		div {
			width: 100px;
			height: 100px;
			border: 1px solid black;
			margin: 1vw 2vw;
			transition: .5s;
		}
		
		div:hover {
			transform: scale(1.4);
			transition: .5s;
		}
}


/*-------------------Vinyl Colors---------------------------*/
.vinyl {
	text-align: center;
	padding-top: 4vw;
	
		h2 {
			font-size: 2.5vw;
		}
		
		.navButtons {
			margin: 4vw 0vw;
		}
		
		
}

.vinylSwatches {
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
	justify-content: center;
}

.vinylColor {
	
		.tan {
			background-color: rgb(199,195,173);
		}
		
		.beige {
			background-color: rgb(206,197,180);
		}
		
		.almond {
			background-color: rgb(227,219,191);
		}
		
		.mist {
			background-color: rgb(217,213,204);
		}
		
		.cream {
			background-color: rgb(246,241,205);
		}
		
		.pearl {
			background-color: rgb(239,235,213);
		}
		
		.white {
			background-color: rgb(254,254,249);
		}
		
		.clay {
			background-color: rgb(175,170,151);
		}
		
		.gray {
			background-color: rgb(210,212,211);
		}
		
		.flint {
			background-color: rgb(174,175,180);
		}
		
		.blue {
			background-color: rgb(162,191,204);
		}
		
		div {
			width: 100px;
			height: 100px;
			border: 1px solid black;
			margin: 1vw 2vw;
			transition: .5s;
		}
		
		div:hover {
			transform: scale(1.4);
			transition: .5s;
			
		}
}


/*----------------Paint Colors-----------------------------*/
.paintedShed {
	text-align: center;
	padding-top: 4vw;
	padding-bottom: 8vw;
	
		.navButtons {
			margin: 4vw 0vw;
		}
		
		h2 {
			font-size: 2.5vw;
		}
}

.paintedSwatches {
	display: flex;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
	justify-content: center;
}

.paintColor {
	
		.barnwhite {
			background-image: url(/sites/default/files/2024-05/barn%20white.png);
		}
		
		.navajowhite {
			background-image: url(/sites/default/files/2024-05/navajo%20white.png);
		}
		
		.martincream {
			background-image: url(/sites/default/files/2024-05/martin%20cream.png);	
		}
		
		.compassbeige {
			background-image: url(/sites/default/files/2024-05/cmpass%20beige.png);
		}
		
		.clay {
			background-image: url(/sites/default/files/2024-05/clay.png);
		}
		
		.charcoalbrown {
			background-image: url(/sites/default/files/2024-05/charcoal%20brown.png);
		}
		
		.red {
			background-image: url(/sites/default/files/2024-05/red.png);
		}
		
		.huntergreen {
			background-image: url(/sites/default/files/2024-05/hunter%20green.png);
		}
		
		.belmontblue {
			background-image: url(/sites/default/files/2024-05/belmont%20blue.png);
		}
		
		.christianagray {
			background-image: url(/sites/default/files/2024-05/christiana%20gray.png);
		}
		
		.gray {
			background-image: url(/sites/default/files/2024-05/gray.png);
		}
		
		.black {
			background-image: url(/sites/default/files/2024-05/black.png);
		}
		div {
			width: 100px;
			height: 100px;
			border: 1px solid black;
			margin: 1vw 2vw;
			transition: .5s;
		}
		
		div:hover {
			transform: scale(1.4);
			transition: .5s;
			
		}
}

/*------------------------About-Us-Page--------------------------------*/

.aboutUsTitle {
	padding-bottom: 7vw;
	margin-top: -34vw;
	position: relative;
	padding-left: 7vw;
	
				
		.navButtons {
			text-align: left;
			
				a {
					border: none;
				}
		}
	
		h2 {
			color: white;
			font-size: 2.75vw;
			line-height: 1.2;
			
		}
		
		p {
			color: white;
			font-size: 1.25vw;
			width: 35%;
		}
}

.missionHeading {
	text-align: right;
	margin-top: -2vw;
}

.mission {
	text-align: right;
}

/*----------------------------Specifications section of styles pages-----------------------*/

.specifications {
	text-align: center;
	
		.navButtons {
			margin: 4vw 0vw;
		}
	
		h2 {
		font-size: 2.25vw;
		margin-bottom: -8vw;
		position: relative;
		}
}

.specColumns {
	display: flex;
	justify-content: space-between;
	
		.text {
			text-align: left;
			font-size: 1.2vw;
		}
}

.specsLeft {
	width: 50%;
	background: #F5F5F5;
	display: flex;
	justify-content: center;
	padding: 10vw 0vw 6vw 0vw;
}

.specsRight {
	width: 50%;
	background: #EAEAEA;
	display: flex;
	justify-content: center;
	padding: 10vw 0vw 6vw 0vw;
}

/*-------------------Barn Style BLOCK--------------------------------------------------------------*/

.stylesScroll {
	max-height: 40vw;
	overflow-y: scroll;
}

/*------------------Shed Styles Titles-------------------------------------------------------------*/
.barnStyleHeader {
	padding-left: 7vw;
	padding-bottom: 6vw;
	margin-top: -31vw;
	position: relative;
	
		.navButtons {
			text-align: left;
			
				.call, .get {
					border: none;
				}
		}
		
		h2 {
			font-size: 2.75vw;
			color: white;
			padding-bottom: 6vw;
		}
}


/*---------------------------Location BLOCK----------------------------------------------------------*/
.locationBlock {
	padding: 6vw 0 10vw 0;
	text-align: center;
	background: linear-gradient(170deg, rgba(0, 0, 0, 0.20) 47%, rgba(255, 255, 255, 0) 0%);
	
		.address {
			
			a {
				text-decoration: none;
				font-weight: bold;
				font-size: 1.2vw;
				color: black;
			}
		}
		
		.addressAndMap {
			display: flex;
			width: 70%;
			margin: auto;
			justify-content: space-between;
			
				.address {
					text-align: left;
					
						h3 {
							color: #781D22;
							font-size: 1.35vw;
							margin-bottom: 0;
							
						}
						
						a {
							color: #781d22;
						}
				}
				
		
				iframe {
					border-radius: 12px;
				}
			
		}
		
		h2 {
			font-size: 2.25vw;
			margin-top: 0;
			margin-bottom: 4vw;
			
		}
}






/*--------------------------Contact Us page header------------------------------*/
.contactHeader {
	height: 30vw;
	background: linear-gradient(167.5deg, rgba(85, 23, 26, 1.0) 57%, rgba(120, 29, 34, 1.0) 0%);
	
		.contactTitle {
			color: white;
			padding-left: 6vw;
			padding-top: 5vw;
				
				h2{
					font-size: 2.5vw;
					margin-bottom: 0;	
					line-height: 1.2;
				}	
					
				p {
					font-size: 1.2vw;
				}
		}
}


/*--------------------WEBFORM----------------------------------------------*/
.webform-submission-form {
	width: 50%;
	margin: auto;
	background: #F5F5F5;
	padding-top: 6vw;
	margin-top: -8vw;
	margin-bottom: 8vw;
	filter: drop-shadow(2px 4px 6px black);

}

#edit-name {
	display: flex;
	background: #EAEAEA;
	border: none;
	width: 25%;
	height: 2.25vw;
	margin-left: 15%;
	font-size: .80vw;
	text-indent: 1vw;
}
	
#edit-last-name {
	display: flex;
	justify-content: flex-end;
	background: #EAEAEA;
	border: none;
	width: 25%;
	height: 2.25vw;
	margin-left: 65%;
	margin-top: -2.35vw;
	font-size: .80vw;
	text-indent: 1vw;
	
	
}
	
#edit-email {
	width: 75%;
	border: none;
	background: #EAEAEA;
	margin-left: 15%;
	height: 2.25vw;
	margin-top: 2vw;
	font-size: .80vw;
	text-indent: 1vw;
}
	
#edit-subject {
	width: 75%;
	border: none;
	background: #EAEAEA;
	margin-left: 15%;
	height: 2.25vw;
	margin-top: 2vw;
	font-size: .80vw;
	text-indent: 1vw;
}




#edit-message {
	width: 75%;
	border: none;
	background: #EAEAEA;
	margin-left: 15%;
	height: 10vw;
	margin-top: 2vw;
	padding-top: 1vw;
	font-size: .80vw;
	text-indent: 1vw;
}


#edit-actions {
	text-align: center;
	padding-top: 2.25vw;
	padding-bottom: 2.25vw;
}

#edit-actions-submit {
	border: none;
	background: #781D22;
	color: white;
	font-size: 1vw;
	font-weight: bold;
	padding: 0.5vw 2vw;
	border-radius: 5px;

}

#edit-actions-submit:hover {
	background: radial-gradient(transparent, #781d22);
	color: #781d22;	
}

/*----------------------------GALLERY-----------------------------*/
.views-view-responsive-grid {
	filter: drop-shadow(2px 4px 6px black);
	width: 80%;
	margin: auto;
	padding: 16vw 0 6vw 0;
}

/*----------------------------REVIEWS-----------------------------*/
.slick-current {
	transform: scale(1.25);
	transition: 850ms;
}

.slick-slide {
	margin: 0 2vw;
}

.slick__slide {
	background: #EAEAEA;
	width: 18vw;
	height: 15vw;
	border-radius: 8px;
	border: 1.5px solid #781D22;
}

.slick-track {
	padding: 4vw 0;
	width: 100%;
	margin: auto;
	margin-top: 4vw;
}

.profileBack {
	background: #781d22;
	width: 7vw;
	height: 7vw;
	border-radius: 50%;
	margin: auto;
	margin-top: -3.5vw;
	background-image: url(/sites/default/files/2024-06/Person.png);
	background-size: 5vw 5vw;
	background-repeat: no-repeat;
	background-position: center;
	
}

.review {
	height: 10vw;
	overflow: scroll;
	margin: 1vw;
	font-size: 1vw;
	
		p {
			margin-bottom: 0;
			padding-bottom: 0;
		}
		
		h6 {
			font-size: 0.8vw;
			margin: 0;
		}
	
}

/*----------------------PRIVACY POLICY PAGE-----------------------*/
#privacy-policy {
	max-width: 1200px;
	margin: auto;
	padding: 1.5em;
	font-family: helvetica;
	
		a {
			color: #781D22
		}
	
}


.mobileHeader {
	display: none;
}


/*---------------------------------MOBILE------------------------------*/
/********************************DISPLAY*******************************/
/*******************************STYLES********************************/

@media only screen and (max-width: 760px) {
	
	.header-cont {
		display: none;
	}
	
	.aboutUsTitle {
		margin-top: -104vw;
		
		h2 {
			font-size: 6.75vw;
		}
		
		p {
			font-size: 3.5vw;
			font-weight: bold;
		}
	}
	
	.homeTop {
		padding-top: 6vw;
		
			.homeParagraph {
				font-size: 3.5vw;
				font-weight: bold;
			}
	}
	
	.navButtons {
		text-align: center !important;
		
		.call, .get {
			font-size: 4vw;
			border-radius: 3px;
		}
	}
	.triple {
		.icon {
			width: 30%;
		}
		
		.box {
			h4 {
				font-size: 3vw;
			}
		}
	}
	
	.perfect {
			h2 {
			font-size: 5vw;
			}
	}
	
	.tripleRound {
		width: 90%;
		
			.roundSpot {
				width: 25vw;
				height: 25vw;
				
					h4 {
						font-size: 5vw;
					}
					
					h6 {
						font-size: 2.85vw;
					}
			}
			
	}
	
	.title {
		font-size: 5vw;
	}
	
	.homeStyles {
		width: 40%;
			
			.styleImage {
				width: 52%;
			}
			
			.barnAdjust {
				img {
					height: 14vw;
				}
			}
			
			.hiBarnAdjust {
				img {
					height: 14vw;
				}
			}
			
			h5 {
				font-size: 3vw;
			}
	}
	
	.whyChoose {
			h2 {
				font-size: 3.5vw;
			}
	}
	
	.split {
		h4 {
			font-size: 2.5vw;
			margin-top: 10vw;
		}
		.left, .right {
			height: 25vw;
		}
	}
	
	.reviews {
			h2 {
				font-size: 5vw;
			}
	}
	
	
	
	.slick__slide {
		background: #EAEAEA;
		width: 30vw;
		height: 40vw;
		border-radius: 5px;
	}
	
	.slick-current {
		transform: scale(1.6);
	}

	
	.review {
		font-size: 2.85vw;
		height: 30vw;
		text-align: center;
			
			h6 {
				font-size: 2.5vw;
			}
	}
	
	.profileBack {
		width: 12vw;
		height: 12vw;
		margin-top: -6vw;
	}
	
	.slick-track {
		padding: 26vw 0;
		margin-top: 3vw;
	}
	
	.betterStorage {
		
			.navButtons {
				display: none;
			}
			
			h2{
				font-size: 5vw;
			}
			
			p {
				height: 40vw;
				overflow: scroll;
				font-size: 3.5vw;
			}
			
			summary {
				font-size: 2.5vw;
			}
			
			
	}
	
	.galleryTitle {
		margin-top: -100vw;
		
			p {
				width: 45%;
				font-weight: bold;
			}
	}

	.views-view-responsive-grid {
		padding: 40vw 0 6vw 0;
	}

	.option {
		height: 20vw;
			h6 {
				font-size: 3vw;
			}
			
			p {
				font-size: 2.5vw;
			}
	}
	
	.roof, .vinyl, .paintedShed {
		h2 {
			font-size: 8vw;
		}
	}	
	
	.optionsTitle {
		margin-top: -92vw;
			h2 {
				font-size: 8vw;
			}
	}
	
	.optionsMain {
		padding-top: 37vw;
	}
	
	
	.locationBlock {
		
		h2 {
			font-size: 6vw;
		}
		
		.addressAndMap {
			flex-direction: column-reverse;
			width: 90%;
			
				
				.address {
					h3 {
						font-size: 5.5vw;
					}
					
					a {
						font-size: 5vw;
					}
					
					p {
						margin: 0;
						font-size: 4.5vw;
					}
				}
		}
		
	}
	
	iframe {
		width: 100%;
	}
	
	.iFrame {
		border: 1px solid #781D22;
		border-radius: 12px;
	}
	
	
	
	.contactHeader {
		height: 55vw;
			
			.contactTitle {
				h2 {
					font-size: 6vw;
				}
				
				p{
					font-size: 4vw;
					font-weight: bold;
				}
			}
	}
	
	.bannerBackground {
		background: rgba(255, 255, 255, 0.80);
		border-radius: 12px;
		width: 85%;
		margin: auto;
		padding: 4vw;
		margin-top: -115vw;
		margin-bottom: 6vw;
			h2, p {
				color: #781D22;
			}
			
			p {
				width: 45%;
			}
	}
	
	.specifications {
		.text {
			font-size: 3.5vw;
			margin-left: 3vw;
		}
		
		h2 {
			font-size: 5vw;
		}
	}
	
	.barnStyleHeader {
		margin-top: -99vw;
			h2 {
				font-size: 10vw;
				padding-bottom: 35vw;
			}
	}
	
	
	
	
	.webform-submission-form {
		width: 90%;
		padding-top: 12vw;
		margin-top: -8vw;
		margin-bottom: 20vw;
	}
	
	#edit-name {
		display: flex;
		background: #EAEAEA;
		border: none;
		width: 25%;
		height: 5vw;
		margin-left: 15%;
		font-size: 4vw;
		text-indent: 1vw;
	}
		
	#edit-last-name {
		/*display: flex;*/
		justify-content: flex-end;
		background: #EAEAEA;
		border: none;
		width: 25%;
		height: 5vw;
		margin-left: 15%;
		margin-top: 4vw;
		font-size: 4vw;
		text-indent: 1vw;
		
		
	}
		
	#edit-email {
		width: 75%;
		border: none;
		background: #EAEAEA;
		margin-left: 15%;
		height: 5vw;
		margin-top: 4vw;
		font-size: 4vw;
		text-indent: 1vw;
	}
		
	#edit-subject {
		width: 75%;
		border: none;
		background: #EAEAEA;
		margin-left: 15%;
		height: 5vw;
		margin-top: 4vw;
		font-size: 4vw;
		text-indent: 1vw;
	}
	
	
	
	
	#edit-message {
		width: 75%;
		border: none;
		background: #EAEAEA;
		margin-left: 15%;
		height: 45vw;
		margin-top: 4vw;
		padding-top: 1vw;
		font-size: 4vw;
		text-indent: 1vw;
	}
	
	
	#edit-actions {
		text-align: center;
		padding-top: 4.5vw;
		padding-bottom: 5.5vw;
	}
	
	#edit-actions-submit {
		border: none;
		background: #781D22;
		color: white;
		font-size: 4vw;
		font-weight: bold;
		padding: 0.5vw 2vw;
		border-radius: 5px;
	
	}
	
	#edit-actions-submit:hover {
		background: radial-gradient(transparent, #781d22);
		color: #781d22;	
	}
	
	
	/*.dialog-off-canvas-main-canvas {
		margin: -8px;
	}
	*/
	/*header {
		background: #781d22;
	}	
	*/
	.mm-wrapper__blocker {
		background: none;
	}
	
	.mm-panel-opened {
		width: 100vw;
		z-index: 30;
	}
	
	.mm-wrapper--position-left {
		--mm-translate-horizontal: 90vw;
	}
	
	.mm-menu--position-left {
		width: 90%;
	}
	
	.responsive-menu-toggle-icon{
		.label {
			display: none !important;
		}
	}
	.mm-menu  {
		font-weight: bold;
	}
	
	.mobileHeader {
		display: block;
		height: 15vw;
		text-align: center;
		background: #f5f5f5;
		padding: 5vw;
			img {
				width: auto;
				height: 80%;
			}
	}
	
	.menu-toggle-icon span.icon {
		background: #781D22;
	}
	
	.responsive-menu-toggle{
		display: flex;
		margin-top: -15vw;
	}
	
	#toggle-icon {
		padding-bottom: 15vw;
			.icon {
				background: #781D22;
			}
	}
	
	.responsive-menu-toggle-icon:after, .responsive-menu-toggle-icon:before {
		background: #781d22;
	}
	
	.footer-main {
		flex-direction: column;
			a {
				font-size: 3.5vw;
			}
			
			h5 {
				font-size: 4vw !important;
				margin-bottom: 1vw;
			}
	}
	
	.footer-cont {
		text-align: center;
			.footer-address {
				h4  {
					font-size: 4.25vw;
					margin-bottom: 0;
				}
			}
			
			p {
				font-size: 3.5vw;
			}
			
			a {
				font-size: 4vw !important;
			}
			
	}
	
	
	.styles-box {
		justify-content: center;
	}
	
	.copyright {
		font-size: 3vw;
		padding-bottom: 3vw;
			a {
				font-size: 3.5vw !important;
			}
	}
			
/*--------------END OF MOBILE STYLES-----*/	
}