/* titles styling */


.homepageTitle, .homepageSubTitle {
	
	font-size: 65px;
	font-family: 'Caveat Brush', cursive;
	margin: 0 auto 20px auto;
	text-align: center;
	color: #456358;
	text-shadow: 0 0 5px #eafff7;
	
}

.mainText {
	
	max-width: 1200px;
	margin: 30px auto;
	font-size: 15pt;
	background: #d8e8e2;
	padding: 40px;
 	
}



/* styling for hot tub image */

.prettyContent1 {
	
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	width: 100%;

}

.prettyContentImage {
    
    width: 50%;
	min-height: 400px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	
}

.prettyContentText {
	
	width: 50%;
	font-size: 13pt;
	padding: 30px;
	
}

.prettyContent1 p, .prettyContent2 p {
	
	margin: 1.8em auto;
	
	
}

/* different images */

.homepage1 {
	
	background-image: url('../images/lodge-with-a-hot-tub.webp');	
	
}



.homepageSubTitle {
	
	font-size: 45px;
	
}

/* text block styling */

.homepageText {
	
	font-size: 20px;
	padding: 30px;
	margin-top: 50px;
	color: white;
	background: #32759A;
	background: linear-gradient(to right, #32759A, #3190c4);
	width: 100%;

	
}

.homepageText h1 {
	
	margin: 0;
	font-size: 50px;
	font-family: 'Caveat Brush', cursive;
	
}


	


.homepageText p {
	
	margin: 30px 0;
	
}


/* Top 3 styling */

.topThreeContainer {
	
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 30px;

}

.topThreeItem {
	
	width: 32%;
	box-sizing: border-box;
	background: white;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 20px #5b7c6f;

}

.topThreeImage {
	
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	-webkit-transition: all .2s;
    transition: all .2s;

}

.topThreeItem:hover .topThreeImage, .topThreeItem:focus .topThreeImage {
	
	transform: scale(1.05);
	opacity: .9;
	
}


.topThreeCaption, .topThreeCaption2, .topThreeCaption3 {
	
	padding: 15px;
	bottom: 15px;
	left: 15px;
	right: 15px;
	position: absolute;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	border: 1px solid #1c57b5;
	background: rgba(84, 205, 249,.9);
	color: #e2fcff;
	
}

/* xmas 
.topThreeCaption2 {
	background: linear-gradient(45deg, rgba(255, 0, 0, 0.8), rgba(201, 0, 0, 0.8));
	color: #ffffff; 
	border: 1px solid #ff0000; 
	box-shadow: inset 0 0 10px 5px rgba(255, 255, 255, 0.5); 
}
*/

.topThreeCaption2 {
	background: linear-gradient(45deg, rgba(10, 102, 59, 0.8), rgba(10, 102, 59, 0.8));
	color: #ffffff; 
	border: 1px solid #054527; 
	/*box-shadow: inset 0 0 10px 5px rgba(255, 255, 255, 0.5); */
}

.topThreeCaption3 {
	
	background: rgba(255,0,0,.7);
	color: white;
	border: 1px solid #7f0505;

}

.topThreeSubCaption {
	
	font-size: 16px;
	font-weight: normal;
	
}

a.topThreeLinks:link, a.topThreeLinks:link, a.topThreeLinks:link {
	
	color: white;	
	
}

a.topThreeLinks3:link, a.topThreeLinks3:link, a.topThreeLinks3:link {
	
	color: white;	
	
}



/* Destinations styling */

.destinationsContainer {
	
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 30px;
	color: #406012;
	border-radius: 5px;
	width: 100%;
	margin-top: 30px;
	background: #c9dbd4;
	box-shadow: 0 0 20px #5b7c6f;
	padding: 15px;


}

.destinationsItem {
	
	width: 23%;
	box-sizing: border-box;
	background: white;
	margin: 13px 10px;
	position: relative;
	overflow: hidden;


}

.destinationsImage {
	
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	-webkit-transition: all .2s;
    transition: all .2s;

}

.destinationsItem:hover .destinationsImage,
.destinationsItem:focus .destinationsImage
{
	transform: scale(1.05);
	opacity: .9;
}


.destinationsCaption {
	
	background: rgba(255,255,255,.7);
	padding: 15px;
	bottom: 15px;
	left: 15px;
	right: 15px;
	position: absolute;
	text-align: center;
	font-size: 20px;
	color: black;
	font-weight: bold;
	
}

.destinationsSubCaption {
	
	font-size: 16px;
	font-weight: normal;
	
}

/* Ideas styling */

/* row 1 styling */

.ideasRowOneContainer {
	
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 30px;
	
}

.ideasRowOneItem1, .ideasRowOneItem2 {
	
	width: 60%;
	box-sizing: border-box;
	background: white;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 20px #5b7c6f;

}

.ideasRowOneItem2 {
	
	width: 40%;
	margin-left: 20px;
	
}

.ideasRowOneImage1, .ideasRowOneImage2 {
	
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	-webkit-transition: all .4s;
    transition: all .4s;


}

.ideasRowOneItem1:hover .ideasRowOneImage1,
.ideasRowOneItem1:focus .ideasRowOneImage1,
.ideasRowOneItem2:hover .ideasRowOneImage2,
.ideasRowOneItem2:focus .ideasRowOneImage2


{
	transform: scale(1.05);
	opacity: .9;
}


.ideasRowOneCaption1, .ideasRowOneCaption2 {
	
	background: rgba(255,0,0,.8);
	font-family: 'Caveat Brush', cursive;
	padding: 25px;
	top: 10%;
	left: 0;
	position: absolute;
	text-align: center;
	font-size: 50px;
	color: white;
	font-weight: bold;
	border-radius: 0 30px 30px 0;

}

.ideasRowOneCaption2 {
	
	background: rgba(38,83,54,.8);
	padding: 15px 30px;
	font-size: 30pt;
	bottom: 10%;
	top: auto;
	left: auto;
	right: 0;
	border-radius: 30px 0 0 30px;

}

.ideasRowOneSubCaption {
	
	font-size: 30px;
	font-weight: normal;
	line-height: auto;
	margin-top: 20px;
	
}



/* row 2 styling */

.ideasRowTwoContainer {
	
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: space-between;
	-webkit-justify-content: space-between;
	width: 100%;
	margin-bottom: 30px;
	
}

.ideasRowTwoItem {
	
	width: 32%;
	box-sizing: border-box;
	background: white;
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 20px #5b7c6f;

}



.ideasRowTwoImage {
	
	background-position: center;
	background-size: cover;

	-webkit-transition: all .4s;
    transition: all .4s;


}

.ideasRowTwoItem:hover .ideasRowTwoImage,
.ideasRowTwoItem:focus .ideasRowTwoImage

{
	transform: scale(1.05);
	opacity: .9;
}


.ideasRowTwoCaption1, .ideasRowTwoCaption2, .ideasRowTwoCaption3 {
	
	background: rgba(158, 97, 219,.8);
	font-family: 'Caveat Brush', cursive;
	padding: 0px;
	top: 0;
	left: 20px;
	right: 20px;
	bottom: auto;
	position: absolute;
	text-align: center;
	font-size: 40px;
	color: white;
	font-weight: bold;
	border-radius: 0 0 20px 20px;

}

.ideasRowTwoCaption2 {
	
	background: rgba(53, 191, 242,.8);

}

.ideasRowTwoCaption3 {
	
	background: rgba(233, 198, 92,.8);

}

.ideasRowTwoSubCaption {
	
	font-size: 23px;
	font-weight: normal;
	line-height: auto;
	margin-top: -8px;
	
}

/* Most popular styling */

.mostPopularContainer {
	
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	background: white;
	padding: 30px;
	border-radius: 30px;
	background-image: url('/images/homepage/most-popular-bubbles.jpg');
	background-position: center;
	background-size: cover;
	box-shadow: 0 0 20px #5b7c6f;

}

.mostPopularBubble {
	
	margin: 15px;
	background: green;
	padding: 30px;
	border-radius: 30px;
	font-size: 15px;
	-webkit-transition: all .2s;
    transition: all .2s;
    border: 3px solid white;
	
}

.mostPopularBubble:hover {

	background: rgba(1,1,1,1);
	transform: scale(1.1);

}

a.mostPopularBubbleLinks:link, a.mostPopularBubbleLinks:active, a.mostPopularBubbleLinks:visited {
	
	color: white;
	text-decoration: none;
	
}


/* Article card grid */

.articleCategoryGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.articleSection {
	background: white;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
}

.articleSectionLink {
	text-decoration: none;
	display: block;
}

.articleSectionTitle {
	font-size: 20px;
	font-weight: 700;
	color: #456358;
	margin: 0 0 10px;
	padding: 0 0 8px;
	border-bottom: 2px solid #d8e8e2;
	letter-spacing: 0.01em;
	font-family: inherit;
}

.articleSectionLink:hover .articleSectionTitle {
	color: #2f4840;
}

.articleGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.articleCard {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 3 / 2;
	text-decoration: none;
	background: #1a1a1a;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.articleCardImg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, opacity 0.4s ease;
}

.articleCard:hover .articleCardImg {
	transform: scale(1.07);
	opacity: 0.82;
}

.articleCardOverlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.05) 70%, transparent 100%);
	padding: 28px 10px 10px;
}

.articleCardTitle {
	margin: 0;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

@media only screen and (max-width: 900px) {
	.articleCategoryGrid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media only screen and (max-width: 600px) {
	.articleCategoryGrid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.articleSection {
		padding: 10px;
		border-radius: 8px;
	}
	.articleSectionTitle {
		font-size: 14px;
	}
	.articleCard {
		aspect-ratio: 3 / 2;
	}
}


/* Homepage content styling */

.otherGuidesContainer {
	
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: space-evenly;
	-webkit-justify-content: space-evenly;
	padding: 10px 30px 30px 30px;
	box-sizing: border-box;
	width: 100%;
	margin: 30px 0;
	background: white;
	border-radius: 5px;
	
}

.otherGuidesContainer a:hover {
	text-decoration: none;
}

h2.c1 {

	font-family: 'Caveat Brush', cursive;
	font-size: 70px;
	width: 100%;
	border-bottom: 1px dotted #ccc;
	color: #c1c1c1;
	margin: 0;
	padding: 0;
	margin-bottom: 10px;
	
}


			
.homeContainer {

	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: space-between;

}

.homeCell {

	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	width: CALC(50% - 15px);

}



.homeRow {

	/*border: 1px solid red;*/

}

.homeRowBottom {

	display: flex;
	display: -webkit-flex;
	flex-grow: 1;
	-webkit-flex-grow: 1;
	flex-direction: row;
	-webkit-flex-direction: row;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
	align-items: bottom;
	align-items: flex-end; 
	-webkit-align-items: flex-end; 
	margin-top: 10px;

}

.homeRowPicAndText {

	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
}



.homePicCol {

	width: 55%;
	padding-right: 15px;
	box-sizing: border-box;

}

.htc {

	width: 45%;
	text-align: left;

}

.ht1 {

	font-size: 35px;
	padding: 10px 0;
	box-sizing: border-box;
	text-align: left;
	margin-bottom: 20px;
	font-weight: bold;
	
}

a.homeLink:link, a.homeLink:active, a.homeLink:visited {

	font-family: 'Kanit', sans-serif;
	line-height: .8em;
	font-weight: normal;
	font-size: 50px;
	-webkit-transition: color .2s;
    transition: all .2s;
    color: black;
    

}

a.homeLink:hover {

	text-decoration: none;
	color: #F51608;

}

.nicePic {

	box-sizing: border-box;
	padding: 8px;
	border: 1px solid #DDDDDD;
	background: #EEEEEE;
	max-width: 100%;
	

}




.mobileOnly {
	display: none;
}


@media only screen and (max-width: 1200px) {
	
	.topThreeCaption, .topThreeCaption2, .topThreeCaption3 {
		padding: 0px;
		font-size: 12pt;
	}
	
	.topThreeSubCaption {
		font-size: 10pt;
	}
	


}



/*
##########################################

Media Queries

##########################################
*/


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

	

	/* text block responsive styling */
	
	.homepageText {
		
		
		font-size: 20px;
		margin-top: 30px;

	}
	
	.homepageText h1 {
		
		margin: 0;
		font-size: 40px;
		font-family: 'Caveat Brush', cursive;
		
	}
	
	.homepageText p {
		
		margin: 30px 0;
		
	}


	.topThreeItem {
		
		box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
		-moz-box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
		-webkit-box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
	
	}


	.destinationsItem {
		
		width: calc(33% - 20px);
	
	}

	.destinationsCaption {

		top: 15px;
		bottom: 15px;
		left: 15px;
		right: 15px;
		font-size: 18px;
		
	}
	
	/* Most popular styling */
	
	.mostPopularContainer {
		
		box-shadow: -4px 4px 4px rgba(0,0,0,0.2);
		-moz-box-shadow: -4px 4px 4px rgba(0,0,0,0.2);
		-webkit-box-shadow: -4px 4px 4px rgba(0,0,0,0.2);
		padding: 15px;
		border-radius: 20px;
	
	}
	
	.mostPopularBubble {
		
		margin: 10px;
		padding: 15px;
		border-radius: 25px;
		font-size: 15px;
		border: 2px solid white;
		
	}

	
	.homepageTitle {
		

		font-size: 45px;
		margin: 15px 0;
		
	}
	
	/* content styling responsive */
	
	.homepageSubTitle {
		
		font-size: 35px;
		margin: 15px 0;
		
	}
	
	h2.c1 {
	
		font-size: 50px;
		padding-bottom: 10px;
		margin: 0;
		margin-top: 20px;
		
	}
	
	.ht1 {

		font-size: 25px;
		margin: 0;
		line-height: 1.2em;
				
	}
	
	.topThreeCaption, .topThreeCaption2, .topThreeCaption3 {

		font-size: 10pt;
	}
	
	.topThreeSubCaption {
		font-size: 9pt;
	}


}



@media only screen and (max-width: 700px) {
	
	.prettyContent1 {
	
		flex-direction: column;
		-webkit-flex-direction: column;
	
	}
	
	.prettyContentImage, .prettyContentText {
	
		width: 100%;
		
	}


@media only screen and (max-width: 600px) {
	
	.desktopOnly {
		display: none;
	}
	
	.mobileOnly {
		display: block;
	}

	.homepageTitle {
		
		font-size: 35px;
		margin: 15px 0;
		
	}
	
	.homepageSubTitle {
		
		font-size: 25px;
		margin: 15px 0;
		
	}
	
	/* Top 3 responsive styling */

	.topThreeContainer {
	
		flex-direction: column;
		-webkit-flex-direction: column;
		max-width: 100%;
		margin: 0 auto 10px auto;
		
	}
	
	.topThreeImage {
		margin-bottom: -6px;
	}
	
	.topThreeItem {
		
		width: 100%;
		margin-top: 15px;
		height:  CALC(100% - 100px);
	
	}
		
	.topThreeSubCaption {
		
		font-size: 13pt;
		
	}

	.topThreeCaption, .topThreeCaption2, .topThreeCaption3 {
	
		top: 0;
		bottom: auto;
		left: 0;
		right: 0;
		font-size: 16pt;
		padding: 10px 0;
		
	}

	

	.destinationsContainer {
		
		margin-top: 20px;
		margin-bottom: -10px;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none;
		padding: 0;

		

	}

	.destinationsItem {
		
		width: calc(50% - 5px);
		margin: 0;
		margin-bottom: 10px;
	
	}

	.destinationsCaption {

		top: 12px;
		bottom: 12px;
		left: 12px;
		right: 12px;
		padding: 5px;
		opacity: .8;
	
	}


	.destinationsSubCaption {
		
		font-size: 14px;
		
	}
	
	.ideasRowOneContainer {
		
		margin: 20px auto;
		
	}
	
	.ideasRowOneItem1, .ideasRowOneItem2 {
		
		width: calc(50% - 5px);
		height: 230px;
		box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
		-moz-box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
		-webkit-box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
	
	}
	
	.ideasRowOneItem2 {
		
		margin: 0;
		
	}
		
	.ideasRowOneCaption1, .ideasRowOneCaption2 {
		
		padding: 10px;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		font-size: 23px;
		font-weight: bold;
		border-radius: 0;
	
	}
	

	
	.ideasRowOneSubCaption {
		
		font-size: 17px;
		margin-top: 2px;
		
	}
	

	.ideasRowTwoContainer {
		
		display: flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		margin-bottom: 20px;
		
	}
	
	.ideasRowTwoItem {
		
		width: 100%;
		height: 170px;
		margin-bottom: 20px;
		box-shadow: -4px 4px 4px rgba(0,0,0,0.2);
		-moz-box-shadow: -4px 4px 4px rgba(0,0,0,0.2);
		-webkit-box-shadow: -4px 4px 4px rgba(0,0,0,0.2);
	
	}

	.ideasRowTwoCaption1, .ideasRowTwoCaption2, .ideasRowTwoCaption3 {
		
		padding: 5px;
		top: 0;
		left: 0;
		right: 70%;
		bottom: 0;
		font-size: 23px;
		border-radius: 0;
	
	}
	
	.ideasRowTwoCaption2 {
		
		background: rgba(93, 161, 96,.8);
	
	}
	
	.ideasRowTwoCaption3 {
		
		background: rgba(188, 139, 15,.8);
	
	}
	
	.ideasRowTwoSubCaption {
		
		font-size: 17px;
		margin-top: 2px;
		
	}
	
	
	.mostPopularHeaderMobile, .mostPopularDateMobile {
		
		font-size: 45px;
		font-family: 'Caveat Brush', cursive;
		text-align: center;
		
	}
	
	.mostPopularDateMobile {
		font-size: 60px;	
	}
	
	.mostPopularBubble {
		
		margin: 8px;
		padding: 10px;
		border-radius: 20px;
		font-size: 15px;
		
	}
		

	


	/* Homepage content styling */
	
	h2.c1 {
	
		font-size: 40px;
		
	}

	.otherGuidesContainer {
		
		padding: 10px 20px 20px 20px;
		margin: 30px 0;
		background: white;
		box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
		-moz-box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
		-webkit-box-shadow: -4px 4px 4px  rgba(0,0,0,0.2);
		
	}
				
	.homeContainer {
	
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
	
	}
	
	.homeCell {
	
		margin: 0;
		width: 100%;
	
	}
	

	.ht1 {

		font-size: 30px;
		margin: 0;
				
	}

}