/*
Theme Name: AOP Office
Theme URI: https://archphila.org/
Description: Archdiocese of Philadelphia
Author: AOP
Version: 2.0
*/

	/* CSS Reset */
html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}
html{font-size:100%;}
main,article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
html,button,input,select,textarea{font-family:sans-serif}
ul{list-style:none}
ol,ul{margin:1em 0; padding:0 0 0 40px}
button,input,select,textarea{margin:0}
img,video{height:auto;max-width:100%}
iframe{border:0}
table{border-collapse:collapse;border-spacing:0}
td,th{padding:0}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:middle}
button,input{line-height:normal}
textarea{overflow:auto;vertical-align:top}


	body { background-color: #EEE; font:100%/1.5 Arial, Helvetica, sans-serif; padding:0; margin:0; margin:0 auto; text-align:left; color:#444; display:block; width:100%; min-width:250px; }
	
	h1, h2, h3, h4, h5, h6 { line-height:1.25; color:inherit; clear:both; margin-bottom:1em; font-family: 'Abril Fatface', cursive;}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; color:inherit;}
	h1 { font-size: 200%; }
	h2 { font-size: 150%; }
	h3 { font-size: 120%; }
	h4, h5, h6 { font-size: 1em; }

	p { margin: 0 0 1em; }
	p img { margin: 0; }
	ul, ol { margin-bottom: 1em; padding: 0 0 0 1em;}
	ul li, ol li{margin-bottom:0;}
	#content ul{list-style:disc}

	em, i { font-style: italic; line-height: inherit; }
	strong, b { font-weight: bold; line-height: inherit; }
	small { font-size: 80%; line-height: inherit; }

	hr { border: solid currentColor;  border-width: 1px 0 0; clear: both; margin: 1.65em auto; height: 0; }

	a { text-decoration: underline; line-height: inherit; color:black;}
	a:hover { text-decoration:none }
	a:focus { text-decoration:none }
	p a, p a:visited { line-height: inherit; }
	
	img { max-width: 100%; height: auto; }
	object, embed, iframe { max-width: 100%; }

	blockquote { font-style: italic; padding: 0 3em; }
	blockquote cite{ font-style:normal; text-align: right; display: block;}

	a.assistive-text, #page .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; }
	a.assistive-text:hover,	a.assistive-text:active, a.assistive-text:focus { background: #fff; border: 2px solid #333; clip: auto !important; color: #000; display: block; font-size: 12px; padding: 12px; position: absolute; top: 5px; left: 5px; margin: auto; overflow: visible; height: auto;  width: auto; z-index: 1000; }
	
	nav.pagination {margin:10px 0; display:block; padding:10px 0;}
	.nav-links {display:table; width:100%; text-align:center; table-layout:fixed; border-collapse:collapse;}
    .page-numbers {background:#FFF; padding:10px 0; border:1px solid #111; display:table-cell;}
	.page-numbers.current, .page-numbers:hover {background:black; color:#FFF;}

	form input:not([type="checkbox"], [type="radio"]), form textarea, form select{ display:block; width:100%; padding:5px; }
	input[type="submit"] { display:block;}
	#searchform{display:flex;}
	#searchform input[type="text"]{flex:5; background:transparent; border:1px solid gold; color:#FFF; border-width:0 0 1px 0;}
	#searchform input[type="submit"]{flex:1; background:gold;}

/* -------------------------------------------------- 
	:: Layout
	---------------------------------------------------*/

	body{overflow-x: hidden;}

	#header{background:#FFF}
	#toprow{max-width: 1200px; margin:auto; padding:10px}
	#header nav{padding:0 20px;}


	.alignfull{margin-left:-20px; margin-right:-20px; width:100vw !important;} /* compensate for the #content container's additional padding */
	@media (min-width: 1200px) {
		.alignfull { margin-left: calc( (100vw - 1160px) / -2) !important; margin-right: calc( (100vw - 1160px) / -2) !important; }
	}


	h1.title{color:black;text-align:center;margin:0 0 1.5em;}

	#content{max-width:1200px; padding-left:20px; padding-right:20px; margin:0 auto 50px;}

	.archiveblock{margin-bottom:50px;display: flex;}
	.archiveblock img{align-self: baseline; margin:0 20px 0; width:300px}
	.archiveblock > div{flex:1}

	footer{background:black; color:#FFF; font-size:80%}
	footer a{color:gold;}
	footer section{max-width:1200px; padding:20px; margin:auto;}

	.filmstrip { overflow: hidden; position: relative; height: 250px; }
	.filmstrip div { display: flex; position: absolute; height: 250px; animation: marquee 60s linear infinite; }
	.filmstrip img{ max-width:none; margin-right:1px;}
	@keyframes marquee {
		0% {transform: translate(0, 0);}
		100% {transform: translate(-50%, 0);}
	}



.aligncenter { display:block; margin-left:auto; margin-right:auto; text-align:center; }
.alignleft { float:left; margin-right:1.5em; margin-bottom:1em; }
.alignright { float:right; margin-left:1.5em; margin-bottom:1em; }
.aligncenter img, .alignleft img, .alignright img { max-width:100%; height:auto; }
.alignleft::after, .alignright::after { content:""; display:table; clear:both; }
@media (max-width:768px) { 
	.alignleft, .alignright { float:none; margin-left:auto; margin-right:auto; display:block; text-align:center; }
}



/* -------------------------------------------------- 
	:: Navigation
	---------------------------------------------------*/

/*TOUCH MODE*/
/* menu button shows/hides menu in js */
.touch-nav #menulabel{text-align:center;width:100%;padding:10px 0; color:black; background:#cb9e39; border:0; font-family:sans-serif;}
.touch-nav .nav-bar{display:none;}
.show-main-menu .touch-nav .nav-bar{display:block;}
/* the menu */
.touch-nav{margin:1px; color: #333; width:100%;}
.touch-nav ul, .touch-nav li{padding:0; margin:0; text-align:center;}
.touch-nav a{display:block;padding:10px 0; border-bottom:1px solid gold; background:black; color:gold; text-decoration:none;}
.touch-nav .submenuopen li a{ background:#cb9e39; color:black;}
/* add arrows to show open/close state */
.touch-nav li.menu-item-has-children>a::after{content:'\25B6';padding-left:10px;width:25px;display:inline-block;transition: transform .2s ease;}
.touch-nav li.menu-item-has-children.submenuopen>a::after,
.touch-nav li.menu-item-has-children.sub-submenuopen>a::after{transform: rotate(90deg);}
/*smooth accordion, closed*/
.touch-nav .sub-menu a,
.touch-nav .submenuopen>.sub-menu .sub-menu a{max-height:1px; min-height:0; opacity:0; overflow:hidden; visibility:hidden; line-height:0; padding:0 10px 0 40px; border-bottom-width:0; transition:opacity .1s, max-height .1s, line-height .1s, padding .1s, visibility .1s, min-height .1s; } 
/*smooth accordion, opened*/
.touch-nav .submenuopen>.sub-menu a, 
.touch-nav .submenuopen>.sub-menu .sub-submenuopen .sub-menu a{max-height:300px; min-height:0; opacity:1; visibility:visible; line-height:1.8; padding:10px; border-bottom:1px dotted;}


/*CLICK MODE*/
.is-touch .mobileonly{display:none;} /* a top-level menu item in the nav bar can be clicked on for desktop, but touch would only open its dropdown because of the js, so duplicate the link into the dropdown for touch, and add 'mobileonly' class to it to hide from desktop */
.click-nav #menulabel{display:none;}
.click-nav { font-size:15px; clear: both; margin: 0 auto; width: 100%; box-sizing: border-box; background:black;}
.click-nav a { color:#FFF; display: block; padding: 1em; text-decoration: none; border-right: 1px solid #cb9e39;}
.click-nav li:last-of-type a{border:none;}
.click-nav a[href="#"] {cursor:default;}
.click-nav ul { list-style:none; margin:0; padding:0; text-align:center; display:flex; justify-content:center; flex-wrap:wrap;}
.click-nav ul li{ position:relative; margin:0; }
/* sub menus */
.click-nav ul ul { box-shadow: 0 3px 3px rgba(0,0,0,0.2); opacity:0; height:0; overflow:hidden; transition:opacity 0.2s ease-out; border:0 none; margin:0; position:absolute; top:100%; left:0; width:200px; z-index:111;}
.click-nav ul ul a { border-bottom: 1px solid #cb9e39; border-right:none; color:#FFF; height:auto; text-align:left; padding:10px; width:200px;}
.click-nav ul ul ul { left:100%; top:0;}
.click-nav ul li:hover > ul, .click-nav ul li.generatedhover > ul { opacity:1; display:block; height:auto; overflow:visible;} /* .generatedhover = can't focus an li*/
.click-nav ul li li {border:none;}

/* colors, hover accents */
.click-nav ul ul{background: black;}
.click-nav li.noparent:hover > a, .click-nav li.noparent.current_page_item > a, .click-nav li.noparent > a:focus {color:gold;}
.click-nav ul ul li:hover > a, .click-nav ul ul li a:focus, .click-nav ul ul li.current_page_item > a {color:black; background:#cb9e39;}
/*arrows for inner*/
.click-nav .noparent li.menu-item-has-children>a::after{content:'\25B6';padding-left:10px;width:25px;display:inline-block;transition: transform .2s ease;}
.click-nav .noparent li.menu-item-has-children.submenuopen>a::after{transform: rotate(90deg);}
/* last menu item pushes left, all else can push right safely; not so good if menu breaks onto second line */
.click-nav > ul > li:last-child ul{left:auto; right:0;}
.click-nav > ul > li:last-child ul ul{left:-100%;}
.click-nav > ul > li:last-child ul li.menu-item-has-children>a::after{content:none;}
.click-nav > ul > li:last-child ul li.menu-item-has-children>a::before{content:'\25C0';padding-right:10px; width:25px; display:inline-block;}