body {
	margin: 0;
}

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

h3 {
	font-size: 2vw;
	color: var(--main-color);
}

* {
	font-family: "Noto Sans";
}

a {
	text-decoration: none;
}

p {
	font-size: clamp(18px, 1vw, 26px);
}

:root {
	--main-color: #711304;
}




.white {
	color: white;
}

.center {
	text-align: center;
}

.layout-container a {
	font-size: clamp(16px, 1.5vw, 18px);
}

/*------------------Header Section Desktop--------------------------------------------*/
.header {
	background-color: var(--main-color);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 6vw;
	position: fixed;
	width: 100%;
	z-index: 10;
	filter: drop-shadow(2px 2px 4px black);
}

.header a {
	color: white;
	text-decoration: none;
	transition: ease-in-out 0.5s;
	text-decoration-color: transparent;
	font-size: clamp(22px, 1vw, 30px);
}

.header a:hover {
	text-decoration-color: white;
	transition: ease-in-out 0.5s;
	text-decoration: underline;
}

.headerContact {
	border: 1px solid white;
	padding: 0.25vw 0.5vw;
}

.headerContact:hover {
	color: var(--main-color);
	background-color: white;
}

.headerLogo {
	margin-left: 7vw;
	width: 8vw;
	transition: ease-in-out 0.5s;
}

.headerLogo:hover {
	transform: scale(1.025);
	transition: ease-in-out 0.5s;
}

.headerMenu {
	margin-right: 7vw;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 3vw;
	height: 2vw;
}

/*--------------End Header Section Desktop--------------------------------------------*/

/*--------------  Banners Section Desktop-------------------------------------*/
.path-frontpage #block-cirrocumulus-content picture {
	display: flex;
	background-color: rgba(0, 0, 0, 0.54);
	/*padding-top: 6vw;*/
	border-bottom: 10px solid var(--main-color);
}

#block-cirrocumulus-content picture {
	display: flex;
	background-color: rgba(0, 0, 0, 0.54);
	/*padding-top: 4vw;*/
	border-bottom: 10px solid var(--main-color);
}

#block-cirrocumulus-content img {
	position: relative;
	z-index: -1;
}

.homeBannerText {
	text-align: center;
	margin-top: -25vw;
	margin-bottom: 9.5vw;

}

.homeBannerText h1 {
	font-size:clamp(40px, 3.5vw, 90px);
	margin-bottom: 0vw;
}

.homeBannerText h5 {
	font-size: clamp(22px, 1.75vw, 46px);
	margin-top: 0.5vw;
	font-weight: 100;
	line-height: 1;
}

.centerButton {
	color: white;
	padding: 0.5vw 1.5vw;
	border: 1px solid white;
	transition: ease-in-out 0.5s;
	font-size: clamp(16px, 1vw, 28px) !important;
}

.centerButton:hover {
	background-color: var(--main-color);
	transition: ease-in-out 0.5s;
	transition-delay: 0.1s;
}

.sermonBanner h1 {
	font-size: clamp(40px, 3.5vw, 90px);
	margin-bottom: 0vw;
}

.sermonBanner h5 {
	font-size:clamp(22px, 1.75vw, 46px);
	margin-top: 0.5vw;
	font-weight: 100;
	line-height: 1;
}

.sermonBanner {
	margin-top: -20vw;
	margin-bottom: 15vw;
}

/*-------------End Banners Section Desktop---------------------------------*/



/*--------------Home Main Section Desktop--------------------------------------------*/
.homeMain {
	/*border-top: 0.55vw solid var(--main-color);*/
	
}

.homeTopTriple {
	display: flex;
	flex-direction: row;
	width: 65%;
	margin: auto;
	justify-content: space-between;
	margin-bottom: 7vw;
	margin-top: -4vw;
}

.graySquare {
	background-color: #F0F0F0;
	aspect-ratio: 1 / .8;
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 15vw;
	border-radius: 8px;
	filter: drop-shadow(2px 0px 5px black);
	transition: ease-in-out .5s;
}

.graySquare:hover {
	background-color: black;
	transition: ease-in-out .5s;
	
	.link {
		color: white;
		transition: ease-in-out .5s;
	}
	
	img {
		filter: invert(100);
		transform: scale(1.6);
		transition: ease-in-out .5s;
		transition-delay: 0.2s;
	}
}
.graySquare a {
	text-decoration: none;
}

.graySquare img {
	width: 4vw;
	margin-top: 2vw;
	transition: ease-in-out .5s;
	padding: 1vw;
	padding-bottom: 0;
}


.link {
	color: black;
	/*margin-top: 1.5vw;*/
	transition: ease-in-out .5s;
	padding: 1vw;
	padding-bottom: 3vw;
	font-size: clamp(18px, 1vw, 28px) !important;
}

.homeTopParagraph, .homeSecondParagraph {
	width: 80%;
	margin: auto;
}

.homeTopParagraph h3 {
	margin-bottom: 0;
}

.homeTopParagraph p {
	margin-top: 0.15vw;
}

.homeSecondParagraph h3 {
	margin-bottom: 0;
}

.homeSecondParagraph p {
	margin-top: 0.15vw;
}


.darkButton {
	background-color: black;
	border: 1px solid black;
	color: white;
	padding: 0.35vw 1.2vw;
	text-decoration: none;
	margin-right: 1vw;
	transition: ease-in-out 0.5s;
}

.darkButton:hover {
	background-color: rgba(0, 0, 0, 0.43);
	color: black;
	transition: ease-in-out 0.5s;
}


.lightButton {
	border: 1px solid black;
	padding: 0.35vw .5vw;
	color: black;
	text-decoration: none;
	margin-left: 1vw;
	transition: ease-in-out 0.5s;
}

.lightButton:hover {
	background-color: rgba(0, 0, 0, 0.43);
	color: white;
	transition: ease-in-out 0.5s;
}

.buttonsHolder1, .buttonsHolder2, .buttonHolder3, .buttonsHolder3 {
	text-align: center;
	margin-top: 3vw;
	margin-bottom: 3vw;
}

.buttonsHolder2 .lightButton {
	padding: 0.35vw 1.5vw;
}

/*--------------End Home Main Section Desktop---------------------------------------*/

/*------------------Calendar Section Desktop---------------------------------------*/
.calendar {
	display: flex;
	flex-direction: column;
	width: 65%;
	height: 40vw;
	margin: auto;
	padding-bottom: 15vw;
	padding-top: 5vw;
}
.calendar h4 {
	text-align: center;
	margin: 0;
	padding: .75vw;
	color: white;
	font-size: 1.5vw;
	background-color: var(--main-color);
}

.calendar p {
	margin: 0;
}

.cal-iframe {
	border-radius: 0 0 2vw 2vw;
	height: 40vw;
	width: 100%;
}

.agenda {
	display: none;
}
/*--------------End Calendar Section Desktop---------------------------------------*/



/*------------------Contact Us Section Desktop---------------------------------------*/
.contactMiddle {
	width: 80%;
	margin: auto;
	padding-bottom: 5vw;
}

#location h3 {
	margin-bottom: 0;
}

#location p {
	margin-top: 0;
}

.map {
	text-align: center;
	
}
.map iframe {
	border-radius: 8px;
	border: 2px solid var(--main-color);
	width: 100%;
	margin: auto;
}


/*--------------End Contact Us Section Desktop---------------------------------------*/


/*------------------We Meet Section Desktop--------------------------------------------*/
.weWorship {
	width: 80vw;
	margin: auto;
	height: 25vw;
}

.weWorship h3 {
	
}

.timesContainer div {
	background-color: black;
	width: 20vw;
	aspect-ratio: 1 / .8;
	border-radius: 8px;
	color: white;
	text-align: center;
}

.timesContainer div img {
	width: 5vw;
	margin-top: 2.25vw;
	transition: ease-in-out 0.3s;
}

.timesContainer div img:hover {
	transform: scale(1.05);
}


.big {
	font-size:clamp( 20px, 1.15vw, 28px);
	padding-bottom: 1vw;
}

.timesContainer {
	width: 48vw;
	margin: auto;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	
}

.timesContainer p {
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: 0;
}


/*------------------End We Meet Section Desktop----------------------------------------*/
/*------------------John 316 Section Desktop----------------------------------------*/
.john316 {
	width: 60vw;
	margin: auto;
	border-top: 1px solid var(--main-color);
	border-left: 1px solid var(--main-color);
	padding:0 2vw;
	margin-bottom: 5vw;
}

.john316 p {
	font-size:clamp(22px, 1.5vw, 40px);
	margin-top: 0;
	margin-left: 1.5vw;
}

.john316 h3 {
	margin-bottom: .25vw;
	margin-top: 1vw;
	margin-left: 1.5vw;
}
/*--------------End John 316 Section Desktop----------------------------------------*/

/*--------------Webform Section Desktop--------------------------------------------*/
#webform-submission-contact-node-4-add-form, #webform-submission-contact-node-7-add-form {
	background-color: black;
	width: 40vw;
	margin: 4vw auto;
	text-align: center;
	border-radius: 8px;
}

#webform-submission-contact-node-4-add-form .white {
	padding-top: 1vw;
}


#webform-submission-contact-node-4-add-form input {
	margin-bottom: 1.5vw;
	font-size: 1vw;
	padding: .15vw;
}

#webform-submission-contact-node-4-add-form textarea {
	margin-bottom: 1.5vw;
	font-size: 1vw;
	padding: .15vw;
}

#edit-actions-submit {
	color: white;
	background-color: black;
	border: 1px solid white;
	padding: .25vw 1.5vw !important;
}


#webform-submission-contact-node-7-add-form .white {
	padding-top: 1vw;
}


#webform-submission-contact-node-7-add-form input {
	margin-bottom: 1.5vw;
	font-size: 1vw;
	padding: .15vw;
}

#webform-submission-contact-node-7-add-form textarea {
	margin-bottom: 1.5vw;
	font-size: 1vw;
	padding: .15vw;
}

#edit-actions-submit {
	color: white;
	background-color: black;
	border: 1px solid white;
	padding: .25vw 1.5vw !important;
	transition: ease-in-out 0.5s;
}

#edit-actions-submit:hover {
	background-color: lightgray;
	font-weight: bold;
	transition: ease-in-out 0.5s;
	color: black;
	border-color: black;
	transform: scale(1.02);
}


/*--------------End Webform Section Desktop----------------------------------------*/

/*--------------We Believe Section Desktop----------------------------------------*/
.weBelieve {
	width: 80%;
	margin: auto;
}

.weBelieve ol {
	/*line-height: 2;*/
	font-size: clamp(18px, 1vw, 26px);
	padding-left: 1.25vw;
}

.weBelieve li {
	margin-bottom: .5vw;
}

.churchHistory {
	width: 80%;
	margin: auto;
	margin-bottom: 4vw;
	font-size: clamp(18px, 1vw, 26px);
	margin-top: 0;
}

.churchHistory h3 {
	margin-bottom: -0.5vw;
}

/*---------End-We Believe Section Desktop----------------------------------------*/




/*------------------Footer Section Desktop--------------------------------------------*/
.footerMain {
	background-color: var(--main-color);
	color: white;
}

.footerMain a {
	color: white;
	text-decoration: none;
}

.footerLine {
	background-color: white;
	height: 0.05vw;
	width: 80vw;
	margin: auto;
}

.footerCopy {
	text-align: center;
	padding-bottom: 0.5vw;
	font-size: clamp(12px, 1vw, 14px);
}

.footerCopy p {
	font-size: clamp(12px, 1vw, 14px);
}

.footerCopy a {
	font-size: clamp(12px, 1vw, 14px);
}

.footerAddress {
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-bottom: .5vw;
}


.footerMenu {
	text-align: center;
	display: flex;
	gap: 4vw;
	justify-content: center;
	margin-top: 0.5vw;
}

.footerMenu a:hover {
	text-decoration-color: white;
	transition: ease-in-out 0.5s;
	text-decoration: underline;
}

.footerMenu a {
	transition: ease-in-out 0.5s;
	text-decoration-color: transparent;
}

.footerPhone {
	background: black;
	border: 1px solid white;
	padding: .5vw;
	width: 8vw;
	margin: auto;
	text-decoration: none;
	margin-bottom: 1vw;
	transition: ease-in-out 0.5s;
}

.footerPhone:hover {
	background-color: lightgray;
	font-weight: bold;
	transition: ease-in-out 0.5s;
	color: black;
	border-color: black;
	transform: scale(1.02);
}

.footerLogo {
	width: 10vw;
	margin: auto;
	padding-top: 2vw;
	padding-bottom: 1vw;
	transition: all 0.5s;
}

.footerLogo:hover {
	transform: scale(1.025);
	transition: all 0.5s;
}


/*--------------End Footer Section Desktop--------------------------------------------*/

#privacy-policy {
	max-width: 1200px;
	margin: auto;
	padding: 1.5em;
	font-family: helvetica;
	padding-top: 7vw;
}

#privacy-policy a {
	font-size: clamp(18px, 1vw, 26px);
}

/*-----------------------Sermon Player/Library-----------------------------------------*/

#block-cirrocumulus-views-block-sermon-library-block-1 {
	width: 40%;
	max-width: 800px;
	min-width: 450px;
	margin: auto;
	justify-content: center;
	
	
	h2 {
		text-align: center;
		color: #711304;
		font-size: 2vw;
	}
}

#block-cirrocumulus-views-block-sermon-library-block-1 .views-row {
	margin: 2.5vw auto;
}

#block-cirrocumulus-views-block-sermon-library-block-1 .views-row {
	background-color: #eef0f1;
	border: 2.5px solid #711304;
	border-radius: 10px;
	padding: 0.5vw 1vw;
}

.views-field-field-sermon-title, .views-field-field-speaker, .views-field-field-sermon-date {
	display: flex;
	align-items: center;
}

.views-label {
	margin-right: 0.25vw;
	font-weight: bold;
	font-size: clamp(12px, 0.8vw, 16px);
}

audio {
	width: 38vw;
	max-width: 760px;
	min-width: 300px;
	border-top: 2px solid #711304
}


.views-field-field-sermon-title .field-content {
	font-size:s clamp(12px, 1vw, 20px);
}

.views-field-field-speaker .field-content {
	font-size: clamp(12px, 0.9vw, 20px);
}

.views-field-field-sermon-date .field-content {
	font-size: clamp(12px, 0.9vw, 20px);
}

.views-exposed-form {
	display: flex;
	gap: 1vw;
	align-items: center;
	justify-content: center;
}

.views-exposed-form label {
	font-weight: bold;
	color: #711304;
}

#edit-submit-sermon-library {
	background: #711304;
	color: white;
	border: 0;
	padding: 0.35vw 1.5vw;
	font-weight: bold;
	border-radius: 1px;
}

#edit-sort-by, #edit-sort-order, #edit-keys {
	border-color: #711304;
	border-radius: 3px;
}

/*-------------------END-Sermon Player/Library-----------------------------------------*/





@media screen and (max-width: 750px) {
	
	#block-cirrocumulus-mobileheader {
		position: relative;
	}
	
	h3 {
		font-size: 7vw;
	}
	
	p {
		font-size: 5vw;
	}
	
	.footerMenu {
		flex-direction: column;
		gap: 2vw;
		padding-top: 2vw;
	}
	
	.footerMenu a {
		font-size: 5.5vw;
	}
	
	.footerPhone {
		padding: 1.5vw;
		width: 45vw;
		margin: 3vw auto;
	}
	
	.footerLogo {
		width: 55vw;
		padding-top: 6vw;
		padding-bottom: 2vw;
	}
	
	.footerCopy {
		margin: auto 8vw;
	}
	
	.footerLine {
		height: 0.35vw;
	}
	
	.addressText {
		width: 55vw;
		margin: 5vw auto;
	}
	
	.homeBannerText h1 {
		font-size: 9vw;
	}
	
	.homeBannerText h5 {
		font-size: 5vw;
		width: 85vw;
		margin: auto;
		margin-bottom: 5vw;
	}
	
	.homeBannerText {
		margin-top: -70vw;
		margin-bottom: 30vw;
	}
	
	.centerButton {
		font-size: 5vw !important;
		margin-top: 3vw;
		padding: 1vw 8vw;
		font-weight: bold;
		border-width: 2px;
	}
	
	.homeTopTriple {
		flex-direction: column;
		align-items: center;
		gap: 8vw;
	}
	
	.graySquare {
		width: 75vw;
	}
	
	.graySquare img {
		width: 30vw;
		padding-top: 6vw;
		margin-bottom: 1vw;
	}
	
	.graySquare a {
		font-size: 6vw !important;
	}
	
	.john316 {
		width: 75vw;
		margin-bottom: 15vw;
	}
	.john316 p {
		font-size: 5vw;
	}
	
	.weWorship {
		height: auto;
		margin-bottom: 12vw;
	}
	
	.timesContainer {
		flex-direction: column;
		gap: 8vw;
		align-content: : center;
		width: 100%;
	}
	
	.timesContainer div img {
		width: 30vw;
		margin-bottom: -4vw;
		margin-top: 7vw;
	}
	
	.big {
		font-size: 6vw;
		
	}
	
	.morning, .evening {
		margin: auto;
		width: 80vw !important;
	}
	
	.buttonsHolder1, .buttonsHolder2, .buttonHolder3, .buttonsHolder3 {
		display: flex;
		flex-direction: column;
		width: 40vw;
		margin: auto;
		gap: 3vw;
	}
	
	.darkButton {
		margin-right: 0;
	}
	
	.darkButton, .lightButton {
		padding: 2vw 1.75vw !important;
	}
	
	.lightButton {
		margin-left: 0;
	}
	
	.calendar {
		display: none;
	}
	
	.agenda {
		display: block;
		text-align: center;
	}
	
	.ag-iframe {
		border-radius: 0 0 8vw 8vw;
		width: 90%;
		margin: 15vw auto;
	}
	
	#webform-submission-contact-node-4-add-form, #webform-submission-contact-node-7-add-form {
		width: 90vw;
		padding-top: 1vw;
		padding-bottom: 4vw;
		margin-bottom: 15vw;
	}
	
	#webform-submission-contact-node-4-add-form input {
		font-size: 2.5vw;
		padding: 1vw;
		margin-bottom: 3vw;
	}
	
	#webform-submission-contact-node-4-add-form textarea {
		font-size: 2.5vw;
		padding: 1.2vw;
	}
	
	#webform-submission-contact-node-7-add-form input {
		font-size: 2.5vw;
		padding: 1vw;
		margin-bottom: 3vw;
	}
	
	#webform-submission-contact-node-7-add-form textarea {
		font-size: 2.5vw;
		padding: 1.2vw;
	}
	
	#edit-actions-submit {
		font-size: 4vw !important;
		padding: 1vw 6.5vw !important;
		
	}
	
	.map iframe {
		width: 100%;
		height: 80vw;
	}
	
	.sermonBanner {
		margin-top: -50vw;
		margin-bottom: 25vw;
	}
	
	.sermonBanner br {
		display: none;
	}
	
	.sermonBanner h1 {
		font-size: 9vw;
	}
	
	.sermonBanner h5 {
		font-size: 4vw;
		width: 60vw;
		margin: auto;
	}
	
	.weBelieve ol {
		margin-bottom: 6vw;
	}
	
	li {
		font-size: 4vw;
	}
	
	#block-cirrocumulus-desktopheader {
		display: none;
	}
	
	.mobileHeader {
		background-color: var(--main-color);
		height: 14vw;
		display: flex;
		align-items: center;
		padding-right: 6vw;
		justify-content: right;
	}
	
	.headerLogo {
		width: 20vw;
		margin-top: 1.5vw;
	}
	
	.responsive-menu-toggle {
		display: flex;
		margin-top: -11vw;
		margin-bottom: .5vw;
	}
	
	/*#block-cirrocumulus-responsivemenumobileicon {
		margin-bottom: -13vw;
	}*/
	
	#block-cirrocumulus-sermonsbuttonsbottom {
		margin: 5vw auto;
	}
	
	.label {
		display: none !important;
	}
	
	#block-cirrocumulus-content picture {
		padding-top: 0 !important;
	}
	
	#block-cirrocumulus-views-block-sermon-library-block-1 {
		min-width: 295px;
	}
	
	#block-cirrocumulus-views-block-sermon-library-block-1 h2 {
			font-size: 8vw;
	}
	
	
	#block-cirrocumulus-views-block-sermon-library-block-1 audio {
		min-width: 275px;
	}
	
	#block-cirrocumulus-views-block-sermon-library-block-1 #edit-actions {
		margin: auto;
		
		input {
			padding: 2vw 8vw;
			border-radius: 8px;
			margin-top: 2vw;
		}
	}
	
	.views-exposed-form {
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 5vw;
		
	}

	
}