/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */


/* above this line is normalize.css  ========================================================================== */


body {
padding: 0;
margin: 0;


}

html {


font-size: 18px;
font-size: var(--fs-1200);
/* was 1200 */
line-height: 1.8em;
}

:root {
--min: 2em;
--minwidth: 20em;

--gap: 1rem;


--font-fallback: BlinkMacSystemFont, "Segoe UI", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans;
--font-fallback-heading: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;


/* HEX Colours */
--white: #ffffff;
--black: #000000;
--neutral: #808080;
--neutral-light: #eeeeee;

--darkblue: #2a2b6d;
--brightblue: #0079bb;
--orange: #ff5c00;
--purple: #8f85cd;
--green: #76bc9f;
--yellow: #ffd93f;
/* HEX Colours */

/* HSL Colours */
--darkblue_hsl: hsl(239, 44%, 30%);
--darkblue_hsl-80: hsl(239, 44%, 30% / 80);
--darkblue_hsl-50: hsl(239, 44%, 30% / 50);
--darkblue_hsl-20: hsl(239, 44%, 30% / 20);

--brightblue_hsl: hsl(201, 100%, 37%);
--brightblue_hsl-80: hsl(201, 100%, 37% / 80);
--brightblue_hsl-50: hsl(201, 100%, 37% / 50);
--brightblue_hsl-20: hsl(201, 100%, 37% / 20);

--orange_hsl: hsl(22, 100%, 50%);
--orange_hsl-80: hsl(22, 100%, 50% / 80);
--orange_hsl-50: hsl(22, 100%, 50% / 50);
--orange_hsl-20: hsl(22, 100%, 50% / 20);

--purple_hsl: hsl(248, 42%, 66%);
--purple_hsl-80: hsl(248, 42%, 66% / 80);
--purple_hsl-50: hsl(248, 42%, 66% / 50);
--purple_hsl-20: hsl(248, 42%, 66% / 20);

--green_hsl: hsl(155, 34%, 60%);
--green_hsl-80: hsl(155, 34%, 60% / 80);
--green_hsl-50: hsl(155, 34%, 60% / 50);
--green_hsl-20: hsl(155, 34%, 60% / 20);

--yellow_hsl: hsl(48, 100%, 62%);
--yellow_hsl-80: hsl(48, 100%, 62%) / 80;
--yellow_hsl-50: hsl(48, 100%, 62%) / 50;
--yellow_hsl-20: hsl(48, 100%, 62%) / 20;
/* end HSL Colours */





--hotpink: hotpink;


--fw-regular: 400;
--fw-semi-bold: 500;
--fw-bold: 600;
--fw-bolder: 700;

/* https://borderleft.com/toolbox/rem/ */
/* Text Sizes - 18px - (base) */

--fs-100: 0.44444rem;
/* 8px */
--fs-200: 0.5rem;
/* 9px */
--fs-300: 0.55556rem;
/* 10px */
--fs-400: 0.61111rem;
/* 11px */
--fs-500: 0.66667rem;
/* 12px */
--fs-600: 0.72222rem;
/* 13px */
--fs-700: 0.77778rem;
/* 14px */
--fs-800: 0.83333rem;
/* 15px */
--fs-900: 0.88889rem;
/* 16px */
--fs-1000: 0.94444rem;
/* 17px */
--fs-1100: 1rem;
/* (base) 18px */
--fs-1200: 1.0556rem;
/* 19px */
--fs-1300: 1.1111rem;
/* 20px */
--fs-1400: 1.2222rem;
/* 22px */
--fs-1500: 1.3333rem;
/* 24px */
--fs-1600: 1.4444rem;
/* 26px */
--fs-1700: 1.5556rem;
/* 28px */
--fs-1800: 1.6667rem;
/* 30px */
--fs-1900: 1.7778rem;
/* 32px */
--fs-2000: 1.8889rem;
/* 34px */
--fs-2100: 2rem;
/* 36px */
--fs-2200: 2.1111rem;
/* 38px */
--fs-2300: 2.2222rem;
/* 40px */
--fs-2400: 2.7778rem;
/* 50px */
--fs-2500: 3rem;
/* 54px */
--fs-2600: 3.3333rem;
/* 60px */
--fs-2800: 3.8889rem;
/* 70px */
--fs-2900: 4.4444rem;
/* 80px */
--fs-3000: 5rem;
/* 90px */
--fs-3100: 5.5556rem;
/* 100px */

--body-font: proxima-nova, sans-serif;
--heading-font: roboto-slab, serif;

--letter-spacing: .2em;

--line_height: 2em;


}



/* COLOURS - Utils */
.txt_black {
color: var(--black);
}

.txt_white {
color: var(--white);
}

.txt_darkblue {
color: var(--darkblue);
}

.txt_brightblue {
color: var(--brightblue);
}

.txt_orange {
color: var(--orange);
}

.txt_purple {
color: var(--purple);
}

.txt_green {
color: var(--green);
}

.txt_yellow {
color: var(--yellow);
}



.bg_black {
background-color: var(--black);
}

.bg_white {
background-color: var(--white);
}

.bg_darkblue {
background-color: var(--darkblue);
}

.bg_brightblue {
background-color: var(--brightblue);
}

.bg_orange {
background-color: var(--orange);
}

.bg_purple {
background-color: var(--purple);
}

.bg_green {
background-color: var(--green);
}

.bg_yellow {
background-color: var(--yellow);
}


body div.main-layout div.wrapper {
	
	
}


/* COLOURS - Utils */


.main-layout {
/*min-height: 100vh;*/
/* fiddling with this adjusts for if the content is SUPER short, you can try 96vh in CodePen it looks a bit off, because of the editor text areas here. */

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: rows 1fr rows auto;
    
    
}

/* large screens*/
@media only screen and (min-width : 1025px) {



}

/* small width screens*/
@media only screen and (max-width: 1024px) {




}



/* TEXT STUFF */


/* section STUFF */
.short_intro {
	padding-bottom: 0;

}
/* section STUFF */

/* newsletter section */
.heading_large {
	font-family: var(--heading-font);
	font-weight: 700;
	font-style: normal;
	font-size: var(--fs-2500);
	margin-top: calc(var(--gap)*.5);
	line-height: calc(var(--line_height)*.5);
}

/* end newsletter section */


section.footer {

	display: flex;
	flex-direction: column;
	
}

/* large screens*/
@media only screen and (min-width : 1025px) {


	.section, 
	section {
		display: grid;
		grid-template-columns: 55px, repeat(12, minmax(100px, 1fr)), 55px;
		grid-template-rows: min-content min-content 1fr min-content;
		gap: var(--gap);
		padding: var(--gap) 0;
		margin: var(--gap) 0 var(--gap) 0;
		background-color: var(--white);
		
	}


}

/* END large screens*/



/* small width screens*/
/* @media only screen and (max-width: 470px) */
@media only screen and (max-width: 720px)  {

	.section,
	section {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: min-content min-content 1fr min-content;
		
		padding: calc(var(--gap)*.2) 0;
		margin: var(--gap) 0 var(--gap) 0;	
		/*background-color: var(--neutral-light);*/
		background-color: var(--white);
		
	}
	body div.main-layout div.wrapper section.hero.hero-image-1 span.hero-message img {
		width: 100%;
	}

}

/* END small width screens*/
/* large screens*/
@media only screen and (min-width : 1025px) {

	.section-intro {
		
	    display: grid;
	    gap: var(--gap);
	    grid-template-columns: 1fr;
	    margin: calc(var(--gap)*1) calc(var(--gap)*3);
	    padding: calc(var(--gap)*1) calc(var(--gap)*3);
	    align-content: center;
	    justify-content: center;

    }

}




/* small width screens*/
@media only screen and (max-width: 1024px)  {
	
	 .section-intro {

	    display: grid;
	    gap: var(--gap);
		grid-template-columns: auto repeat(auto-fit, minmax(200px, 1fr)) auto;
		margin: var(--gap) calc(var(--gap)*1);
	    padding: calc(var(--gap)*2) 0;
	    align-content: center;
	    justify-content: flex-start;

    }
	
}


/* large screens*/
@media only screen and (min-width : 1025px) {

    .header {

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        align-items: center;


    }
}

/* small width screens*/
@media only screen and (max-width: 1024px)  {


    .header {

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        align-items: center;

    }
	.headerbottom_mobile {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        align-items: center;
		/*background-color: hotpink;*/	
	}

}



/* large screens*/
@media only screen and (min-width : 1025px) {

    .tickertop {

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-self: center;
    align-items: center;
	color: var(--white);
    background-color: var(--darkblue);
    width: 100%;
    text-align: center;
	
    }
    .tickertop img {
    margin: calc(var(--gap)*.4) calc(var(--gap)*1);
    }
	
}

/* small width screens*/
@media only screen and (max-width: 1024px)  {

    .tickertop {
    	display: none;
    }
    


}






/* large screens*/
@media only screen and (min-width : 1025px) {
    .headerbottom {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
		justify-content: center;
		align-self: center;
        width: 92%;
        margin: 0 calc(var(--gap)*1);
        gap: calc(var(--gap)*1);
    }

	.headerbottom_mobile {
		visibility: hidden;
		display: none;
	}

}

/* small width screens*/
@media only screen and (max-width: 1024px) {

	body div.main-layout div.wrapper div.header div.headerbottom_mobile div.social_and_nav div.logo {
		min-width: 80px;
	}
    .headerbottom {
		visibility: hidden;
		display: none;
    }

	.headerbottom_mobile {
		display: grid;
		grid-template-columns: 1fr;
		justify-content: center;
		align-items: center;
		gap: 1em;
        margin: 0 var(--gap) 0 var(--gap);
        padding: calc(var(--gap)*.5) calc(var(--gap)*.5) 0 calc(var(--gap)*.5);
			
		
	}
	

}




/* large screens*/
@media only screen and (min-width : 1025px) {

    .social_and_nav {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: calc(var(--gap)*4);
	
    flex-grow: 1;
    justify-content: center;
    align-content: center;
    align-items: center;
	/*width: 100%;*/

    }



}

/* small width screens*/
@media only screen and (max-width: 1024px) {


    .social_and_nav {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
		justify-content: space-between;
	    align-content: center;
	    align-items: center;
	    gap: 1rem;
    
    }

	.flex-row {
		display: flex;
		justify-content: space-between;
		align-content: center;
		align-items: center;
		
	}
	.social_and_nav > * {
		margin: 0 calc(var(--gap)*.1);
	}


}

/* small width screens*/
@media only screen and (max-width: 550px) and (orientation: portrait) {
.social_and_nav {
	    
		display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
		justify-content: center;
	    align-content: center;
	    align-items: center;
	    /*display: grid;
		grid-template-columns: 1fr 1fr;*/
    
    }

}

/* main nav */
/* large screens*/
@media only screen and (min-width : 1025px) {

	   .nav-page {
	    display: flex;
	    flex-direction: row;
	    flex-wrap: wrap;
	    justify-content: space-evenly;
	    align-content: center;
	    
	    gap: 0;
	    background-color: var(--darkblue);
	    padding: calc(var(--gap)*3) 0 calc(var(--gap)*1) calc(var(--gap)*2);
	    font-family: var(--body-font);
	    line-height: 2em;
    }


}

/* small width screens*/
@media only screen and (max-width: 1024px)  {


	.nav-page {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-content: flex-end;
	gap: var(--gap);
	background-color: var(--darkblue);
	
	padding: calc(var(--gap)*1) 0 calc(var(--gap)*1) calc(var(--gap)*2);
	
	font-family: var(--body-font);
	/*font-size: var(--fs-1900);*/
	line-height: 2em;
	
	
	}
	

	.nav-page ul li {
	
	line-height: calc(var(--gap)*3);
		
		
	}


}

.nav-page ul {
list-style: none;
padding: 0;

}
.nav-page ul li a {
	

}

.nav-page ul>li ul {
	padding: calc(var(--gap)/3) calc(var(--gap)*1.2);
}







.nav-page>h2 {
font-family: var(--body-font);

text-decoration: underline;
width: 100%;
display: inline-block;


}

.nav-page div ul.main-nav-item li a,
.nav-page>* {
	color: var(--white);
	text-decoration: none;

}
.nav-page div ul.main-nav-item li a:hover {
color: var(--white);

}
.nav-page div ul.main-nav-item li a:visited {
	color: inherit;
	text-decoration: none;
	
}


.nav-callout {
display: flex;
flex-direction: column;
flex-wrap: nowrap;

align-content: center;
align-items: center;
justify-content: center;

align-self: center;
background: var(--purple);
border-radius: 30px 0 0 30px;
padding: var(--gap);
max-width: 32em;

}



.nav-callout div {
align-self: center;
}

.nav-page div h2 {
font-family: var(--body-font);
display: block;
border-bottom: 2px solid var(--purple);

font-size: var(--fs-1200);

text-transform: uppercase;
}
.nav-page div h2 a {
	color: var(--white);
}

/* end main nav */

/* SECTIONS */

.signup {
	background-color: var(--neutral-light);
}


.section-intro img {
	max-width: 100%;
	height: auto;
}



.section-listing {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	margin: var(--gap) auto;
	padding: calc(var(--gap)*.12) 0;
	max-width: 80vw;
	align-content: center;
	justify-content: center;
}

.section-pagination {
	
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: flex-start;
	margin: var(--gap) auto;
	padding: calc(var(--gap)*.12) 0;
	list-style: none;
	
}

.section-pagination li {
	
	font-family: var(--body-font);
	color: var(--black);
	text-decoration: none;
	margin: 0 12px;
	display: inline-block;

}



li .active {
	
	color: var(--hotpink);
	border-bottom: 10px solid var(--orange);
}


.announcements {

	background-image: url('http://orleansunitedchurch.com/images/uploads/mainimages/joao-cruz-IkEpl3JkVqU-unsplash.jpg'), linear-gradient(100deg, var(--brightblue), var(--purple));
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	
	background-color: var(--brightblue);
	background-blend-mode: luminosity;
	
}



.announcements div span.article-category,
.announcements h2 {
color: var(--black);

}

.callout-title div h1 {
color: var(--black);
}


/*designed but turned off*/
.goals {

background-image: url('http://orleansunitedchurch.com/images/uploads/mainimages/annie-spratt-0ZPSX_mQ3xI-unsplash.jpg'), linear-gradient(100deg, var(--yellow), var(--yellow));
background-position: center;
background-repeat: no-repeat;
background-size: cover;

background-color: var(--yellow);
background-blend-mode: multiply;
}


/* END SECTIONS */


/* footer */


section.footer div.txt-center.bg_white p,
section.footer div.txt-center.bg_white p a {
	font-size: var(--fs-800);
}

footer {
	background-color: var(--darkblue);
}



/* large screens*/
@media only screen and (min-width : 1025px) {

        article.footer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: calc(var(--gap)*4);
        padding: calc(var(--gap)*3) 0;
        margin: calc(var(--gap)*3) calc(var(--gap)*4);
        
        }


}

/* small width screens*/
@media only screen and (max-width: 1024px)  {

    article.footer {
    display: grid;
    grid-template-columns: 1fr;
    margin: var(--gap) calc(var(--gap)*2);
    padding: calc(var(--gap)*2) 0;
	
    }
	
}



.footer ul,
.footer ul li,
.footer ul li a {
color: var(--white);
line-height: var(--line_height);
}

 a.footer,
 a.footer {
	text-decoration: none;
	transition: none;
}


/* end footer */

.contact-area {
color: var(--white);
font-family: var(--body-font);
letter-spacing: calc(var(--letter-spacing)*.3);
}



.quick-menu a,
.quick-menu p,
.quick-menu ul li,
.quick-menu ul li a {
color: var(--white);
font-family: var(--body-font);
font-size: var(--fs-1600);
letter-spacing: calc(var(--letter-spacing)*.3);

}
.quick-menu a {
	text-decoration-color: var(--white)
}

.quick-menu ul {
font-family: var(--body-font);
font-size: var(--fs-1200);
letter-spacing: calc(var(--letter-spacing)*.3);

line-height: var(--gap);

}
div.quick-menu ul {
list-style: none;
padding: 0;
}
div.quick-menu ul li {
padding: 0;

}



/* large screens*/
@media only screen and (min-width : 1025px) {

    .list-articles {
    display: grid;
    gap: calc(var(--gap)*4);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin: var(--gap) auto;
    padding-bottom: calc(var(--gap)*2);
    max-width: 80vw;
    align-content: center;
    justify-content: center;
    
    
    }

}

/* small width screens*/
@media only screen and (max-width: 1024px) {

    .list-articles {
        display: grid;
        gap: calc(var(--gap)*4);
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        margin: var(--gap) auto;
        padding-bottom: calc(var(--gap)*2);
        max-width: 80vw;
        align-content: center;
        justify-content: center;


    }


}


article {

/*padding: calc(var(--gap)*3) calc(var(--gap)*1.5);*/
position: relative; 
/* SB must be here it is related to how I did cards. if this is not on, then the last-child of announcements' icon is a the top of the page above the ticker... */
	/*max-width: 100%;*/
}

.event-date {

font-family: var(--body-font);
font-size: var(--fs-1200);
font-weight: 600;
text-align: center;
color: var(--orange);
text-decoration-color: var(--orange);
text-decoration-style: solid;
text-decoration-line: underline;
text-decoration-thickness: 1px;

}


.card {

display: flex;
flex-direction: column;
justify-content: flex-start;
gap: calc(var(--gap)*.9);
background-color: var(--white);
box-shadow: none;
}

.card-icon {

display: flex;
flex-direction: column;
justify-content: flex-start;
gap: calc(var(--gap)*1);
background-color: var(--white);
transition: all 0.17s ease-in;

}
.card-icon:hover {
/*top: -2px;*/
box-shadow:
0 1px 1px hsl(0deg 0% 0% / 0.085),
0 2px 2px hsl(0deg 0% 0% / 0.085),
0 4px 4px hsl(0deg 0% 0% / 0.085),
0 8px 8px hsl(0deg 0% 0% / 0.085),
0 18px 18px hsl(0deg 0% 0% / 0.085),
0 27px 27px hsl(0deg 0% 0% / 0.085);
}

.card-inside {
	
	/* LONG URLS */
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;
	
	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;
	
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	/* End LONG URLS */
}



.card-icon > div {

margin: 0;
padding: calc(var(--gap) * 1.8);
position: relative;

}
.card-inside div {

position: absolute;
top: -25px;
left: -25px;

width: 50px;
height: auto;

}




/* large screens*/
@media only screen and (min-width : 1025px) {

    .logo img {
			width: 100%;

    }
    
}

/* small width screens*/
@media only screen and (max-width: 1024px)  {
	.logo {
		text-align: center;
		
	}
    .logo img {
			width: 100%;
            max-width: 100px;
			height: auto;
			
    }



}

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

    .logo img {
			
            padding: 0 var(--gap);

    }



}


.card.green {
background-color: var(--green);
}

/* card borders */
.event {
border: 1px solid var(--purple);
}
.newsletter {
border: 1px solid var(--orange);
}
.announcement {
border: none;
}

/* end Cards */

/* Callout-1 */ /* gonna et rid of short titles */

.callout-1 {
display: grid;

overflow: hidden;
gap: var(--gap);
padding: calc(var(--gap)*3) 0;
margin: 0;
}


.callout-1 > div {
margin: 0 calc(var(--gap)*2) 0 calc(var(--gap)*2);
}
.callout-1 ul {

letter-spacing: calc(var(--letter-spacing)*.3);
padding-left: 2rem;

color: var(--black);
line-height: calc(var(--gap)*1.7);
font-family: var(--body-font);
}

.callout-1 ul li {

letter-spacing: calc(var(--letter-spacing)*.3);
padding-left: 2rem;

}



.callout-1 ul li a {

text-decoration: none;

}
.callout-1 h1,
.callout-1 h2,
.callout-1 .h2 {

color: var(--black);
}

.callout-1-title {
text-align: left;

}




.section-1-txt {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;

align-content: center;
align-items: flex-start;

margin: calc(var(--gap)*1.6) calc(var(--gap)*1.8);

}

@media only screen and (min-width : 1025px) {
	.callout-1 {

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	
	}
	.callout-1-title {
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 3;
	}
	
	.section-1-txt {
c
	grid-column-start: 2;
	grid-column-end: -1;
	grid-row-start: 3;
	grid-row-end: 5;
	}
}


/* end Callout-1 */




/* Callout-2 */


/* large screens*/
@media only screen and (min-width : 1025px) {

	.title-block {
		display: flex;
		flex-direction: row;
		margin-left: calc(var(--gap)*6);
		gap: calc(var(--gap)*1.6);
	
	}


	.callout-2 {

		display: grid;
		grid-template-columns: repeat(3, 1fr);
		overflow: hidden;
	    gap: var(--gap);

	    margin: 0;
		}
		
		.callout-2-title {
		grid-column-start: 1;
		grid-column-end: 4;
		grid-row-start: 1;
		grid-row-end: 3;
		}
		
		.section-2-txt {

		grid-column-start: 2;
		grid-column-end: -1;
		grid-row-start: 3;
		grid-row-end: 5;
		}
		.callout-2 > div {
			margin: 0 calc(var(--gap)*2);
			
		}

}

/* small width screens*/
@media only screen and (max-width: 1024px) {

		

}








/* small width screens*/
@media only screen and (max-width: 1024px) {


	.title-block {
		display: flex;
		flex-direction: column;
		margin-left: calc(var(--gap)*1);
		gap: calc(var(--gap)*1.6);
	
	}
	.callout-2 img {
		width: 100%;
		
	}
    .callout-2 {
    
    overflow: hidden;
    gap: var(--gap);
    padding: calc(var(--gap)*1) calc(var(--gap)*.2);
    margin: 0;
	display: flex;
	flex-direction: column;
	
    }

	.callout-2-title {
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 1;
	grid-row-end: 3;
	}
	
	.section-2-txt {
	grid-column-start: 1;
	grid-column-end: -1;
	grid-row-start: 3;
	grid-row-end: 5;
	}
	.callout-2 > div {
	margin: 0 calc(var(--gap)*1);
	}
}



.callout-2 ul {

letter-spacing: calc(var(--letter-spacing)*.3);
padding-left: 2rem;

color: var(--black);
line-height: calc(var(--gap)*2.5);
}

.callout-2 ul li {

letter-spacing: calc(var(--letter-spacing)*.3);
padding-left: 2rem;

}



.callout-2 ul li a {

	text-decoration: none;

}
.callout-2 h1,
.callout-2 h2,
.callout-2 .h2 {

	color: var(--black);
}

.callout-2-title {
	text-align: left;

}

.title-2-block {
	display: flex;
	flex-direction: row;
	margin-left: calc(var(--gap)*6);
	
	gap: calc(var(--gap)*1.6);
	border: 1px solid hotpink;

}



/* large screens*/
@media only screen and (min-width : 1025px) {

	.section-2-txt {
	        display: flex;
	        flex-direction: column;
	        flex-wrap: wrap;
	        justify-content: center;
	
	        align-content: center;
	        align-items: flex-start;
	
	        margin: calc(var(--gap)*1.6) calc(var(--gap)*1.8);
			
	 }
}

/* small width screens*/
@media only screen and (max-width: 1024px)  {

	.section-2-txt {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;

        align-content: center;
        align-items: flex-start;
		
        margin: calc(var(--gap)*1.6) calc(var(--gap)*1.8);
		
    }

	
}

/* end Callout-2 */


/* Buttons */

/* there are 4 sizes of buttons, sm-btn + md-btn+ lg-btn are set widths if none of those are used, the button can actually handle crazy text, but it goes to 2 lines at 3 or so words */

.button {
background: var(--darkblue);
border: 0.20rem solid var(--darkblue);
border-radius: 2.5rem;
color: var(--white);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem .7rem;
margin: .7rem .2rem;
min-width: 90px;
width: auto;
/* SB: you can turn this off and the button will accept amazing aoumts of text */
text-decoration: none;
/*text-transform: uppercase;*/
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

font-family: var(--body-font);
font-size: var(--fs-1400);
/*line-height: 2em;*/

}

.button:hover,
.button:focus {
/*background: var(--purple);*/
/*border-color: var(--darkblue);*/
border: 0.20rem solid var(--darkblue);
color: var(--white);
outline: none;
background-color: var(--darkblue);
/*background-blend-mode: luminosity;*/
border: 0.20rem solid var(--white);
}

.button:hover i,
.button:focus i {
transform: translateX(-0.25rem);
}

.button:hover .button-text,
.button:focus .button-text {
transform: translateX(0.25rem);
}

.button.secondary {
background: transparent;
color: var(--darkblue);
border: 0.20rem solid var(--white);
color: var(--white);

}
.button.secondary:hover,
.button.secondary:focus {
color: var(--white);

border: 0.20rem solid var(--purple);
}

.button.icon-right:hover i,
.button.icon-right:focus i {
transform: translateX(0.25rem);
}

.button.icon-right:hover .button-text,
.button.icon-right:focus .button-text {
transform: translateX(-0.25rem);
}


.button.icon-right i {
margin: 0 0 0 0.75rem;
order: 1;
}

.button.icon-right .button-text {
order: 0;
text-align: right;
}

/* icon size for in all buttons (i) */
i {
width: 22px;
height: 22px;
}


.button i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;

}

.button .button-text {
line-height: 1.25;
text-align: left;
transition: transform 0.2s ease;

}

/* large screens*/
@media only screen and (min-width : 1025px) {
	.button_light,
	.button {
	   	font-size: var(--fs-1400);
	   	
	   }
}

/* small width screens*/
@media only screen and (max-width: 1024px) {
	.button_light,
   .button {
   	font-size: var(--fs-1400);
   	
   }

}



/* button sizes */
.sm-btn {
max-width: 120px;

}
.md-btn {
max-width: 250px;

}
.lg-btn {
max-width: 320px;
}

/* end button sizes */

/* Extra button */

.button_light {
background: var(--purple);
border: 0.20rem solid var(--darkblue);
border-radius: 2.5rem;
color: var(--white);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem .7rem;
/*margin: .7rem .2rem;*/
min-width: 100px;
width: auto;
/* SB: you can turn this off and the button will accept amazing aoumts of text */
text-decoration: none;
/*text-transform: uppercase;*/
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

font-family: var(--body-font);
font-size: var(--fs-1300);
/*line-height: 2em;*/

}

.button_light:hover,
.button:focus {
/*background: var(--purple);*/
/*border-color: var(--darkblue);*/
border: 0.20rem solid var(--purple);
color: var(--darkblue);
outline: none;
background-color: var(--white);
/*background-blend-mode: luminosity;*/
border: 0.20rem solid var(--darkblue);
}

.button_light:hover i,
.button_light:focus i {
transform: translateX(-0.25rem);

}

.button_light:hover .button-text,
.button_light:focus .button-text {
transform: translateX(0.25rem);
color: var(--darkblue);
}
.button_light i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/watch_darkblue.svg");

}
/* small width screens*/
@media only screen and (min-width: 1025px) {
	
	.button_light {
		background: var(--purple);
		border: 0.20rem solid var(--darkblue);
		border-radius: 2.5rem;
		color: var(--white);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 1rem .7rem;
		margin: .7rem .2rem;
		min-width: 130px;
		width: auto;
		/* SB: you can turn this off and the button will accept amazing aoumts of text */
		text-decoration: none;
		/*text-transform: uppercase;*/
		transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
		
		font-family: var(--body-font);
		font-size: var(--fs-1300);
		/*line-height: 2em;*/
		
	}

	
	.button_white {
		background: var(--white);
		border: 0.20rem solid var(--darkblue);
		border-radius: 2.5rem;
		color: var(--darkblue);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 1rem .7rem;
		margin: .7rem .2rem;
		min-width: 180px;
		width: auto;
		/* SB: you can turn this off and the button will accept amazing aoumts of text */
		text-decoration: none;
		/*text-transform: uppercase;*/
		transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
		
		font-family: var(--body-font);
		font-size: var(--fs-1300);
		/*line-height: 2em;*/
	
	}



}


/* End Extra button */



/* Extra white button */

.button_white {
background: var(--white);
border: 0.20rem solid var(--darkblue);
border-radius: 2.5rem;
color: var(--darkblue);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1rem .7rem;
margin: .7rem .2rem;
/*min-width: 180px;*/
min-width: 100px;
width: auto;
/* SB: you can turn this off and the button will accept amazing aoumts of text */
text-decoration: none;
/*text-transform: uppercase;*/
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

font-family: var(--body-font);
font-size: var(--fs-1300);
/*line-height: 2em;*/

}

.button_white:hover,
.button:focus {
/*background: var(--purple);*/
/*border-color: var(--darkblue);*/
border: 0.20rem solid var(--purple);
color: var(--darkblue);
outline: none;
background-color: var(--white);
/*background-blend-mode: luminosity;*/
border: 0.20rem solid var(--darkblue);
}

.button_white:hover i,
.button_white:focus i {
transform: translateX(-0.25rem);

}

.button_white:hover .button-text,
.button_white:focus .button-text {
transform: translateX(0.25rem);
color: var(--darkblue);
}
.button_white i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/watch_darkblue.svg");

}



/* End Extra white button */





/* large screens*/
@media only screen and (min-width : 1025px) {
	.secondary,
	.button_light {
	        
			
	 }
}

/* small width screens*/
@media only screen and (max-width: 1024px)  {
	
	.button-text {
        font-size: var(--fs-1400);
		
		
    }
	a.menu-button.txt_white.sm-btn.toggle {
		
		padding: 1rem .7rem;
		font-size: var(--fs-1400);
	}
	.menu-icon {
		
	}
}

/* large screens*/
@media only screen and (min-width : 1025px) {
    
}

/* small width screens*/
@media only screen and (max-width: 1024px) {

   .quick-menu {
   	border-top: 1px solid #fff;
   	padding-top: calc(var(--gap)*2);
   }

}



.menu-icon {
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/hamburger-menu.svg");
}
.readmore-icon {
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/arrow_down_02.svg");
}
.heart-icon {
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/heart16x16.svg");
}
.give-icon {
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/donate_white.svg");
}
.watch-icon {
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/watch_white.svg");
}

.give-icon i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/give.svg.svg");

}

.watch-icon i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/watch_white.svg");

}

/* End Buttons */

/* ReadMore links */
.readmore {
background: transparent;
/*background: var(--white);*/
/*border: 0.25rem solid violet;
border-radius: 2.5rem;*/
color: var(--black);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: flex-start;
/*padding: 1rem 1.5rem;*/
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

font-family: var(--body-font);
/*font-size: var(--fs-1300);*/
/*line-height: 2em;*/
padding-top: calc(var(--gap)*2);
}

.readmore:hover,
.readmore:focus {
background: transparent;
/*border-color: hotpink;*/
color: var(--darkblue);
outline: none;
}

.readmore:hover i,
.readmore:focus i {
transform: translateX(-0.25rem);
}

.readmore:hover .readmore-text,
.readmore:focus .readmore-text {
transform: translateX(0.25rem);
}

.readmore.secondary {
background: none;
color: var(--black);
}

.readmore.secondary:hover,
.readmore.secondary:focus {
color: var(--darkblue);
text-decoration: underline;
}

.readmore.icon-right:hover i,
.readmore.icon-right:focus i {
transform: translateX(0.25rem);
}

.readmore.icon-right:hover .readmore-text,
.readmore.icon-right:focus .readmore-text {
transform: translateX(-0.25rem);
}

.readmore.icon-right i {
margin: 0 0 0 0.75rem;
order: 1;
}

.readmore.icon-right .readmore-text {
order: 0;
text-align: right;
}

.readmore i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/arrow_right_02.svg");

}

.readmore .readmore-text {
line-height: 1.25;
text-align: left;
transition: transform 0.2s ease;

}


/* end ReadMore links */


/* download links pdfs */
.download {
background: transparent;
/*background: var(--white);*/
/*border: 0.25rem solid violet;
border-radius: 2.5rem;*/
color: var(--black);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: flex-start;
/*padding: 1rem 1.5rem;*/
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

font-family: var(--body-font);
/*font-size: var(--fs-1300);*/
/*line-height: 2em;*/

}

.download:hover,
.download:focus {
background: transparent;
/*border-color: hotpink;*/
color: var(--darkblue);
outline: none;
}

.download:hover i,
.download:focus i {
transform: translateX(-0.25rem);
}

.download:hover .download-text,
.download:focus .download-text {
transform: translateX(0.25rem);
}

.download.secondary {
background: none;
color: var(--black);
}

.download.secondary:hover,
.download.secondary:focus {
color: var(--darkblue);
text-decoration: underline;
}

.download.icon-right:hover i,
.download.icon-right:focus i {
transform: translateY(0.15rem);
}

.download.icon-right:hover .download-text,
.download.icon-right:focus .download-text {
transform: translateY(-0.15rem);
}

.download.icon-right i {
margin: 0 0 0 0.75rem;
order: 1;
}

.download.icon-right .download-text {
order: 0;
text-align: right;
}

.download i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/arrow_down_02.svg");


}

.download .download-text {
line-height: 1.25;
text-align: left;
transition: transform 0.2s ease;

}


/* end download links pdfs */


/* give buttons */
.give {
background: transparent;
color: var(--black);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: flex-start;
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

font-family: var(--body-font);


}

.give:hover,
.give:focus {
background: transparent;
/*border-color: hotpink;*/
color: var(--darkblue);
outline: none;
}

.give:hover i,
.give:focus i {
transform: translateX(-0.25rem);
}

.give:hover .give-text,
.give:focus .give-text {
transform: translateX(0.25rem);
}

.give.secondary {
background: none;
color: var(--black);
}

.give.secondary:hover,
.give.secondary:focus {
color: var(--darkblue);
text-decoration: underline;
}

.give.icon-right:hover i,
.give.icon-right:focus i {
transform: translateX(0.25rem);
}

.give.icon-right:hover .give-text,
.give.icon-right:focus .give-text {
transform: translateX(-0.25rem);
}

.give.icon-right i {
margin: 0 0 0 0.75rem;
order: 1;
}

.give.icon-right .give-text {
order: 0;
text-align: right;
}

.give i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/donate_purple.svg");

}

.give .give-text {
line-height: 1.25;
text-align: left;
transition: transform 0.2s ease;

}

/* end give buttons */

/* watch buttons */
.watch {
background: transparent;
/*background: var(--white);*/
/*border: 0.25rem solid violet;
border-radius: 2.5rem;*/
color: var(--black);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: flex-start;
/*padding: 1rem 1.5rem;*/
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

font-family: var(--body-font);
/* font-size: var(--fs-1300); */
/* line-height: 2em; */

}

.watch:hover,
.watch:focus {
background: transparent;
/*border-color: hotpink;*/
color: var(--darkblue);
outline: none;
}

.watch:hover i,
.watch:focus i {
transform: translateX(-0.25rem);
}

.watch:hover .watch-text,
.watch:focus .watch-text {
transform: translateX(0.25rem);
}

.watch.secondary {
background: none;
color: var(--black);
}

.watch.secondary:hover,
.watch.secondary:focus {
color: var(--darkblue);
text-decoration: underline;
}

.watch.icon-right:hover i,
.watch.icon-right:focus i {
transform: translateX(0.25rem);
}

.watch.icon-right:hover .watch-text,
.watch.icon-right:focus .watch-text {
transform: translateX(-0.25rem);
}

.watch.icon-right i {
margin: 0 0 0 0.75rem;
order: 1;
}

.watch.icon-right .watch-text {
order: 0;
text-align: right;
}

.watch i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;
content: url("http://orleansunitedchurch.com/images/uploads/mainimages/watch_darkblue.svg");

}

.watch .watch-text {
line-height: 1.25;
text-align: left;
transition: transform 0.2s ease;

}


/* menu button */
/*This became nessesary because click targets on the icon and words of menu were not working. you could only click the pill part of the menu*/

.menu-button {
background: var(--darkblue);
border: 0.20rem solid var(--darkblue);
border-radius: 2.5rem;
color: var(--white);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: .7rem .7rem;
margin: .7rem 1.2rem;
min-width: 120px;
width: auto;
max-height: 1.8rem; /* added when adding backgrouhd image */
/* SB: you can turn this off and the button will accept amazing aoumts of text */
text-decoration: none;
/*text-transform: uppercase;*/
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;

font-family: var(--body-font);
font-size: var(--fs-1300);
/*line-height: 2em;*/
/* background image used because for some reason the icon and the text menu do not let a click through to activate the menu */
content: url('http://orleansunitedchurch.com/images/uploads/mainimages/hamburger-menu_embeded_text.svg');
	

}

.menu-button:hover,
.menu-button:focus {
/*background: var(--purple);*/
/*border-color: var(--darkblue);*/
border: 0.20rem solid var(--darkblue);
color: var(--white);
outline: none;
background-color: var(--darkblue);
/*background-blend-mode: luminosity;*/
transform: translateX(0.25rem);
}



.menu-button:hover .menu-button-text,
.menu-button:focus .menu-button-text {
transform: translateX(0.25rem);
}

.menu-button.secondary {
background: transparent;
color: var(--darkblue);
border: 0.20rem solid var(--darkblue);
}
.menu-button.secondary:hover,
.menu-button.secondary:focus {
color: var(--brightblue);
}

.menu-button.icon-right:hover i,
.menu-button.icon-right:focus i {
transform: translateX(0.25rem);
}

.menu-button.icon-right:hover .menu-button-text,
.menu-button.icon-right:focus .menu-button-text {
transform: translateX(-0.25rem);
}


.menu-button.icon-right i {
margin: 0 0 0 0.75rem;
order: 1;
}

.menu-button.icon-right .menu-button-text {
order: 0;
text-align: right;
}

/* icon size for in all buttons (i) */
i {
width: 22px;
height: 22px;
}


.menu-button i {
margin: 0 0.75rem 0 0;
transition: transform 0.2s ease;
/*content: url("http://orleansunitedchurch.com/images/uploads/mainimages/heart16x16_colour.svg");*/

}
/*.menu-button i:before { content: url("http://orleansunitedchurch.com/images/uploads/mainimages/hamburger-menu.svg"); }*/
.menu-button .menu-button-text {
line-height: 1.25;
text-align: left;
transition: transform 0.2s ease;

}



/* end menu button */

/*bunch icons*/
.social-icons {
display: flex;
flex-direction: row;
gap: calc(var(--gap)*1.2);
}
/*single icon*/
.social-icons a {
text-decoration: none;


-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
}
.social-icons a:hover {
text-decoration: none;


-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
-webkit-transition-property: none;
-moz-transition-property: none;
-o-transition-property: none;
transition-property: none;
}

/* end watch buttons */

.audio-icons {
	/*display: flex;
flex-direction: row;
flex: grow;*/
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: calc(var(--gap)*1.2);
justify-content: center;
align-content: center;
align-items: center;


}

.audio-icons p {
	margin: 0;
	padding: 0;
}


.footer-text-sm {
	font-family: var(--body-font);
	font-size: var(--fs-1100);
	line-height: calc(var(--line_height) * .9);
}



.offset-border-1 {

/*border-right-style: solid;
border-right-color: var(--darkblue);
border-right-width: 3px;
border-bottom-style: solid;
border-bottom-color: var(--darkblue);
border-bottom-width: 3px;*/
margin-bottom: var(--gap);
margin-right: var(--gap);
padding-bottom: var(--gap);
padding-right: var(--gap);
overflow: hidden; /* trying to hide the wide images and make them vertical */



}

/* large screens*/
@media only screen and (min-width : 1025px) {

    .section-img img {
            max-width: 540px;
            /*height: auto;*/
            /*background-color: var(--hotpink);*/
            /*border-right: 3px solid  var(--hotpink);*/
            /*border-bottom: 3px solid  var(--hotpink);*/
            /*padding: 15px 20px;*/
            padding: 0 14px 14px 0;

    }
}

/* small width screens*/
@media only screen and (max-width: 1024px)  {

    .section-img img {
            width: 100%;
            height: auto;
            /*background-color: var(--hotpink);*/
            /*border-right: 3px solid  var(--hotpink);*/
            /*border-bottom: 3px solid  var(--hotpink);*/
            /*padding: 15px 20px;*/
            padding: 0 14px 14px 0;

    }



}

.frame-1-1 {
	
	background-image: url('http://orleansunitedchurch.com/images/uploads/mainimages/frame-01.svg');
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: cacl(var(--gap)*1) cacl(var(--gap)*1);
	overflow: visible;
}
.frame-1-1 img {
object-fit: cover;
margin: 0 35px 65px 0;
overflow: hidden;

}
.frame-2-1 {


	
	background-image: url('http://orleansunitedchurch.com/images/uploads/mainimages/frame-02.svg');
	/* Center and scale the image nicely */
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	padding: cacl(var(--gap)*1) cacl(var(--gap)*1);
	overflow: visible;
}
.frame-2-1 img {
object-fit: cover;
margin: 0 15px 15px 0;
overflow: hidden;

}



div.section-img.offset-border-1 img {
background-color: var(--purple);
}


/* End Borders */

.light {
font-family: var(--body-font);
font-weight: 300;
font-style: normal;
}

.light-italic {

font-family: var(--body-font);
font-weight: 300;
font-style: italic;
}


.regular {
font-family: var(--body-font);
font-weight: 400;
font-style: normal;
}

.italic {
font-family: var(--body-font);
font-weight: 400;
font-style: italic;
}

.bold {
font-family: var(--body-font);
font-weight: 700;
font-style: normal;
}

.bold-italic {
font-family: var(--body-font);
font-weight: 700;
font-style: italic;
}


/* TEXT STUFF */
/* TEXT STUFF */

/* TEXT STUFF */
h1,
.h1{
	font-family: var(--heading-font);
	font-weight: 700;
	font-style: normal;
	font-size: var(--fs-2500);
	margin-top: calc(var(--gap)*.5);
	margin-bottom: calc(var(--gap)*1);
	line-height: calc(var(--line_height)*.5);
	

}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}


.card-icon h2 {
font-family: var(--body-font);
font-size: var(--fs-1500);
text-transform: uppercase;

}

.card-inside > p {
font-family: var(--body-font);
font-size: var(--fs-1500);
/*text-transform: uppercase;*/
/*margin: 0;*/ /* less margin/padding inside the boxes. head and paragraph too far apart without */
width: 100%; /* should not need this */
}

h2,
.h2 {
font-family: var(--heading-font);
font-weight: 700;
font-style: normal;
font-size: var(--fs-2300);
}

h3,
.h3 {
font-family: var(--heading-font);
font-weight: 700;
font-style: normal;
font-size: var(--fs-1800);
}

h4,
.h4 {
font-family: var(--heading-font);
font-weight: 700;
font-style: normal;
font-size: var(--fs-1500);
}

h5,
.h5 {
font-family: var(--heading-font);
font-weight: 700;
font-style: normal;
font-size: var(--fs-1300);
}

h6,
.h6 {
font-family: var(--heading-font);
font-weight: 700;
font-style: normal;
font-size: var(--fs-1200);
}


p,
.p {
	font-family: var(--body-font);
	font-size: var(--fs-1300);
	letter-spacing: calc(var(--letter-spacing)*.3);
	/*color: hotpink;*/
	margin: calc(var(--gap)*.5) 0 calc(var(--gap)*.5) 0;
}



ul, li {
	font-family: var(--body-font);
	font-size: var(--fs-13x00);
	letter-spacing: calc(var(--letter-spacing)*.3);
}


.landing_heading {
	font-size: var(--fs-2300);
}

	
/* large screens*/
@media only screen and (min-width : 1025px) {
	ul, li {
		font-family: var(--body-font);
		font-size: var(--fs-900);
		letter-spacing: calc(var(--letter-spacing)*.3);
	}
	p,
	.p {
		font-family: var(--body-font);
		font-size: var(--fs-900);
		letter-spacing: calc(var(--letter-spacing)*.3);
		
	}

}

/* small width screens*/
@media only screen and (max-width: 1024px)  {

	p,
	.p {
		font-family: var(--body-font);
		font-size: var(--fs-1300);
		letter-spacing: calc(var(--letter-spacing)*.3);
		/*color: hotpink;*/
		margin: calc(var(--gap)*.5) 0 calc(var(--gap)*.5) 0;
	}



}



blockquote {
font-family: var(--body-font);
font-size: var(--fs-1200);
letter-spacing: calc(var(--letter-spacing)*.3);
border-left-color: var(--purple);
border-left-style: solid;
border-left-width: calc(var(--gap)/ 1.98);
padding: 0 var(--gap);
}




/* large screens*/
@media only screen and (min-width : 1025px) {
    .article-category {
	font-family: var(--body-font);
	text-transform: uppercase;
	
	font-size: var(--fs-1200);
	
	
	}
	
}

/* small width screens*/
@media only screen and (max-width: 1024px) {

	 .article-category {
		font-family: var(--body-font);
		text-transform: uppercase;
		
		font-size: var(--fs-900);
		
	
	}  

}




.hero > a {
color: var(--darkblue);
text-decoration: underline;
text-decoration-color: var(--darkblue);

/* underline effect */
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size .7s;
}
.hero > a:hover,
.hero > a:focus {
background-position: 0% 100%;
background-size: 0% 2px;
}

/* end TEXT STUFF */

/* end TEXT STUFF */
/* end TEXT STUFF */


/* links */
a {

color: var(--darkblue);
text-decoration: underline;
text-decoration-color: var(--darkblue);
/* underline effect */
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 1px;
transition: background-size .7s;
/* underline effect */


}

a:hover,
a:focus {
background-position: 0% 100%;
background-size: 100% 2px;
}

div#main.section-intro a {
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0% 0%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size .7s;
}
div#main.section-intro a:hover,
div#main.section-intro a:focus {
	text-decoration: none;
	display: inline;
}


.logo > a {
	background-size: 0; /* remove animated line from logo */
	
}



.tickertop p a {
color: var(--white);
text-decoration: underline;
text-decoration-color: var(--white);
}
.tickertop p a:hover,
.tickertop p a:focus 
 {
text-decoration: underline;

}
/* end links*/

.underline {
text-decoration: underline;
}



/* large screens*/
@media only screen and (min-width : 1025px) {

    .hero {
    /*background-image: url(http://orleansunitedchurch.com/images/uploads/mainimages/who-we-are-OUC-building.jpg);*/
    /* Center and scale the image nicely */
	
    min-height: 14em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc(var(--gap)*4) calc(var(--gap)*3);

	
    }

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

}
.bg-white {
	background: var(--white);
}
/* small width screens*/
@media only screen and (max-width: 1024px)  {

	.txt-center {
	text-align: center;
	padding-top: 0;
	}

	section.hero.hero-image-1 span.article-category {
		display: none;
	}

    .hero {
    /*background-image: url(http://orleansunitedchurch.com/images/uploads/mainimages/who-we-are-OUC-building.jpg);*/
    /* Center and scale the image nicely */

	
    min-height: 10em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc(var(--gap)*.5) calc(var(--gap)*.5);
	
    }
	

}

.hero-image-1 img, 
.hero-image-2 img,
.hero-image-3 img {
	width: 100%;
	padding: 0;
	margin: 0;
}
.hero-image-1 {
background-image: url(http://orleansunitedchurch.com/images/uploads/mainimages/who-we-are-OUC-building.jpg);
background-position: 80% 75%;

}
.hero-image-2 {
background-image: url(http://orleansunitedchurch.com/images/uploads/mainimages/hannah-busing-Zyx1bK9mqmA-unsplash.jpg);
background-position: 80% 35%;
}
.hero-image-3 {
background-image: url(http://orleansunitedchurch.com/images/uploads/mainimages/derick-anies-hDJT_ERrB-w-unsplash.jpg);
background-position: 80% 35%;

}


.hero-message > p {
font-family: var(--body-font);
font-size: var(--fs-2500);
color: var(--white);
/*text-shadow: 0px 0px 5px rgba(128, 128, 128, 1),1px 1px 10px rgba(128, 128, 128, 0.9);*/
/* double */
text-shadow: 0px 0px 7px rgba(128, 128, 128, .45);

line-height: calc(var(--line_height)/1.8);
}
.list-item {
	width: 100%;
	display: grid;
	
}
.list-item h3 {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--gap);
	padding: 0;
	margin: 0;
	margin-right: calc(var(--gap)*24);
	
}

.list-item p {
	margin-right: calc(var(--gap)*5);
}


/* layout - Utils */
.centered,
.center-me {
	text-align: center;
	align-self: center;
}


.padding-top-1 {
	
	
}
/* large screens*/
@media only screen and (min-width : 1025px) {
    .shout-out-text p {
            padding: calc(var(--gap)*1) 0;
            margin: 0;
            font-size: var(--fs-1000);
        }
}

/* small width screens*/
@media only screen and (max-width: 1024px) {

.shout-out-text p {
        padding: calc(var(--gap)*1) calc(var(--gap)*2);
        margin: 0;
        font-size: var(--fs-1000);
    }

}
/* layout - Utils */



hr {
height: 1px;
background-color: var(--purple);
border: none;

}

.hotpink {
	color: var(--hotpink);
}


.section-intro div img {
	max-width: 100%;
    height: auto;
 
}

/* Navigation Bar Hider */

.toggle-content {
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 350ms ease-in-out;
}

.toggle-content.is-visible {
  display: block;
  height: auto;
}


/* Navigation Bar Hider */



/* Forms */

input {
  width: 100%;
  
}
input[type=text] {
  font-size: var(--fs-1400);
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}


/* large screens*/
@media only screen and (min-width : 1025px) {

	   .label,label {
		font-size: var(--fs-1200);
	}

}

/* small width screens*/
@media only screen and (max-width: 1024px) {
	   
	   .label,label {
		font-size: 24px;
		
	   }
	   

}


form#contact_form p label {
	font-size: 24px;
}

/* End Forms */




/*
Assumed Media Sizes guidelines. 

Our 2 sizes are: 
1024 and smaller for small screen

1025 and bigger for desktop


320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV*/