@charset "UTF-8";
/* CSS Document */

@charset "UTF-8";
/* CSS Document */
.quietudeHeader{
	background-color:#527b9d;
	
}


.quietude-header-container {

	padding-top:50px;
	max-width:1400px;
	width:100vw;
	height: auto;
	margin:auto;
/*Toggle this border on and off as a guide*/
	border:1px dashed var(--toggle);
	align-content: center;	
		
}



.quietude-header-tile-container {
	display: flex;
	max-width:1060px;
	flex-flow:  row wrap;  
	justify-content: center;
	padding: 0px;
	margin: auto;
	list-style: none;
	border:1px dashed var(--toggle);
	height:auto;
	gap:20px;
}



	.quietude-img1 {
		margin:auto;
		width: 300px;
		height: 300px;
		clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
	
		
	}	
	
	.quietude-img2 {
		margin:auto;
		width: 300px;
		height: 300px;
		position: absolute;
		top: 1000px; 
		z-index:100;
		clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
		overflow:hidden;
		animation: reveal 3s alternate ease-in-out infinite;
		border:3px solid white;
		
		
	}


.quietude-item-rounded-tile300{

	border-radius:20px;
	box-shadow:var(--box-shadow);
	width:300px;
	height:300px;
	object-fit: cover;
	overflow:hidden;

}

.quietude-item-rounded-tile300x424{
	border-radius:20px;
	box-shadow:var(--box-shadow);
	width:300px;
	height:424px;
	object-fit: cover;
	overflow:hidden;

}



.quietude-item-rounded-tile740{
	display:flex;
	border-radius:20px;
	box-shadow:var(--box-shadow);

	max-width:740px;

	max-height:740px;

	object-fit:cover;
	overflow:hidden;
	align-items:flex-end;
}
	

.quietude-item-rounded-tile740x523{
	display:flex;
	border-radius:20px;
	box-shadow:var(--box-shadow);

	max-width:740px;

	max-height:522px;

	object-fit:cover;
	overflow:hidden;

}

.quietude-item-rounded-tile740x200{

	border-radius:20px;
	box-shadow:var(--box-shadow);

	max-width:740px;

	height:200px;

	object-fit:cover;
	overflow:hidden;
	

}

.quietude-item-rounded-tile1060{
	/* PURPLE BORDER */
	/* border:1px dashed purple; */
	border-radius:20px;
	box-shadow:var(--box-shadow);
	/* border:3px solid white; */
	max-width:1060px;
	/* min-width:150px; */
	max-height:551px;
	/* min-height:150px; */
	object-fit:cover;
	overflow:hidden;
	
}	


.quietude-header-item1, .quietude-header-item2 {
	
	border:1px dashed var(--toggle);	
	
	
}

.quietude-header-item1{
	min-width: 360px; 
	width:400px;
	height: auto;
	flex-grow:0.4; 		
}
d
.quietude-header-item2{
	width:600px;
	
	
}



.quietude-Next-Previous{
	width:auto;
	margin:auto;
	border:1px dashed var(--toggle);
	height:auto;
	padding:0px;
	display:flex;
	align-items:center;
	justify-content:center;
	
}


/* Content section */


.quietude-Content{
	
	border: 1px dashed var(--toggle);
	
}


.quietude-content-container {

	padding-top:50px;
	width:95vw;
	height: auto;
	margin:auto;
/*Toggle this border on and off as a guide*/
	border:1px dashed var(--toggle);
	align-content: center;	
		
}

.quietude-content-tile-container {
	display: flex;
	flex-flow:  row wrap;
	justify-content: center;
	padding: 0px;
	margin: auto;
	list-style: none;
	border:1px dashed var(--toggle);
	height:auto;
}



	@keyframes reveal {
		/*image1 displayed*/ 
		0%{
		clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
		}
		
		/*img2 full reveal - swipes from right to left to reveal img2*/
		10%{
		clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0% );
		}
			
		/*img2 full reveal - swipes from right to left to reveal img2*/
		 40%{
		clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0% );
		}
			 
		/*image1 displayed*/ 
		50%{
		clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
		}	

	}

	
.quietude-content-item1, .quietude-content-item2 {
	
	border:1px dashed var(--toggle);	
	padding: ;
	
}

/*column of dynamic text */	
	
.quietude-content-item1{
	min-width: 320px;
	width:400px;
	height: auto;
	flex-grow:0.4;
	padding-right: 20px;
	
}






.quietude-content-item2{
	width:660px;

	
}

/* 100% width item */
.quietude-content-item3{
	width:90vw;	
	}


.quietude-divider{
	background-color: var(--toggle);
	height:5vh;
	/*height:100px;*/
	width: 100vw;
}



.quietude-content-item4{
	width:660px;
	height:auto;
	border: var(--toggle);
	Text-align: left;
	column-count: 2;
	column-gap: 15px;
	list-style:none;
	border: 1px solid black;
	padding: 20px;
	
}
	
.quietude-content-item4_m {
	width:660px;
	height:auto;
	border: var(--toggle);
	Text-align: left;
	column-count: 1;
	column-gap: 15px;
	list-style:none;
	border: 1px solid black;
	padding: 20px;
	
}


.quietude-description {
	margin-top:20px;
	TEXT-JUSTIFY:LEFT;
}




/* Breakpoints	*/
		/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {

.quietude-content-item4{
 	display: none; 
}

.quietude-content-item4_m {
	display: content; 
}

}


/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (min-width: 601px) and (max-width: 767px)  {

.quietude-content-item4{
 	display: content; 
}

.quietude-content-item4_m {
	display: none; 
}

}


/*Medium devices (landscape tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991px) {

.quietude-content-item4{
 	display: content; 
}

.quietude-content-item4_m {
	display: none; 
}

}


/* Large devices (laptops/desktops, 992px and up) */
@media screen and (min-width: 992px) {

.quietude-content-item4{
 	display: content; 
}

.quietude-content-item4_m {
	display: none; 
}

}


/* Exra large devices (large laptops and desktops, 1200px and up) */
@media screen and (min-width: 1200px) {

.quietude-content-item4{
 	display: content; 
}

.quietude-content-item4_m {
	display: none; 
}

}