/* CSS for Beachwood Kehilla */
/* Written By Michael Ebner - October 2018 */

/* Reset
---------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

:root{
	--globalPurple: #81138c;
	--globalPurpleLight: #e9c5ed;
	--globalPurpleHover: #530c5a;
	--linkColor: #7a2982;
	--globalBlue: #0063a6;
	--globalBeige: #f4eede;
	--globalBeigeLight: #fff9e4;
	--globalGradient: linear-gradient(to top, #680f70, #a718b4);
}

html, body{
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	background: var(--globalBeige);
	background: linear-gradient(0deg, rgba(244,238,222,1) 0%, rgba(249,247,242,1) 100%);
	font-family: 'Oxygen', Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
}

img{
	max-width: 100%;
	border: none;
}

h1{
	font-size: 2em;
	line-height: 125%;
	margin-bottom: 1em;
	color: var(--globalPurple);
}

h2{
	font-size: 1.5em;
	margin-bottom: 1em;
}

h3{
	font-size: 1.25em;
	margin-bottom: 1em;
}

 h4{
	font-size: 1.125em;
	margin-bottom: 1em;
}

p{
	margin-bottom: 15px;
}

a{
	color: var(--linkColor);
	text-decoration: none;
}

ul{
	list-style-position: inside;
}

.hiddenForMobile, .hiddenForMobile-td, .zkl td.hiddenForMobile, .zkl td.hiddenForMobile-td{
	display: none;
}

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

/* Added for Animated Mobile Navigation
----------------------------------------*/

#container{
	position: relative;
	z-index: 20;
	background: linear-gradient(0deg, rgba(244,238,222,1) 0%, rgba(249,247,242,1) 100%);
	min-height: 100%;
	/*-webkit-box-shadow: 1px 0 4px #00478A;
	-moz-box-shadow: 1px 0 4px #00478A;
	box-shadow: 1px 0 4px #00478A;*/
}

#outer_wrapper{
	grid-area: outerWrapper;
	margin-bottom: 20px;
	/*padding: 20px;*/
	/*min-height: 100%;*/
}

#overlay_btn{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.0;
	background: #000;
	z-index: 30;
	cursor: pointer;
}

.bottom{
	clear: both;
	position: absolute;
	bottom: 0;
}

/*----------------------------------*/

.container{
	display: grid;
	/*grid-template-rows: minmax(auto, 156px) auto minmax(auto, 176px);*/
	grid-template-rows: minmax(auto, 156px) auto minmax(auto, 176px);
	grid-template-rows: minmax(auto, 156px) auto auto;
	grid-template-columns: 1fr;
	grid-template-areas: "header"
						"outerWrapper"
						 "footer";
	/*padding: 20px;*/
}

.fl{
	float: left;
}

.fr{
	float: right;
}

.textCenter{
	text-align: center;
}

.fiftyFifty{
	display: grid;
	grid-template-areas: "fiftyA"
						"fiftyB";
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	grid-gap: 1em;
}

.fiftyA{
	grid-area: fiftyA;
}

.fiftyB{
	grid-area: fiftyB;
}

.red{
	color: red;
}

/* Utility CSS - experimenting with Utility CSS
-------------------------------------------------*/
.margin-bottom-large{
	margin-bottom: 32px;
}

.margin-bottom-xlarge{
	margin-bottom: 64px;
}

.padding-right-small{
	padding-right: 2%;
}

.padding-right-large{
	padding-right: 4%;
}

.padding-right-xlarge{
	padding-right: 8%;
}

/* Header
---------------------------------*/

header{
	grid-area: header;
	display: grid;
	grid-template-areas: "headerLeft headerRight";
	grid-template-rows: 100%;
	grid-template-columns: 5fr 1fr;
	/*padding-bottom: 20px;*/
	padding: 20px 40px;
	background: #ffffff;
	/*background: repeating-linear-gradient(
	  45deg,
	  #ffffff,
	  var(--globalBeigeLight) 1px,
	  #ffffff 20px
	  #465298 10px,
	  #465298 20px
	);*/
	/*background: linear-gradient(0deg, rgba(233,197,237,1) 0%, rgba(255,255,255,1) 100%);*/
	/*border-bottom: 1px solid var(--globalPurple);*/
}

.logo{
	/*grid-area: logo;*/
	grid-row-start:    1;
	grid-column-start: headerLeft-start;
	grid-column-end:   headerRight-end;
}

.logo img{
	max-height: 110px;
}

/*nav{
		grid-row-start: 1;
		grid-column-start: headerLeft-start;
		grid-column-end: headerRight-end;
		display: grid;
		grid-template-areas: "searchForm"
							"links";
		grid-template-rows: auto auto;
		grid-template-columns: 1fr;
		grid-gap: 2em;
		background: pink;
		align-items: left;
		z-index: 5;
	}*/
/* Animated Mobile Navigation
--------------------------------*/
nav.headerNav{
	display: none;
}

/*nav{
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 190px;
	height: 100%;
	padding: 0 25px;
	margin: 0;
	background: #ffffff;
	z-index: 10;
	}
	*/
	/*background: -webkit-linear-gradient(90deg, #00478A, #0076B7, #003464);*/ /* For Safari 5.1 to 6.0 */
	/*background: -o-linear-gradient(90deg, #00478A, #0076B7, #003464);*/ /* For Opera 11.1 to 12.0 */
	/*background: -moz-linear-gradient(90deg, #00478A, #0076B7, #003464);*/ /* For Firefox 3.6 to 15 */
	/*background: linear-gradient(0deg, #00478A, #0076B7, #003464);*/ /* Standard syntax */

nav.mobileNav{
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 190px;
	height: 100%;
	padding: 25px;
	margin: 0;
	background: var(--globalGradient);
	z-index: 10;
	}
	/*background: -webkit-linear-gradient(90deg, #00478A, #0076B7, #003464);*/ /* For Safari 5.1 to 6.0 */
	/*background: -o-linear-gradient(90deg, #00478A, #0076B7, #003464);*/ /* For Opera 11.1 to 12.0 */
	/*background: -moz-linear-gradient(90deg, #00478A, #0076B7, #003464);*/ /* For Firefox 3.6 to 15 */
	/*background: linear-gradient(0deg, #00478A, #0076B7, #003464);*/ /* Standard syntax */


/*#toggle-menu{
	position: absolute;
	top: 20px;
	right: 10px;
}*/

/* Show the menu when animating or visible */
.animating nav.mobileNav, .menu-visible nav.mobileNav{
  display: block;
}

 .animating #overlay_btn, .menu-visible #overlay_btn {
 	display: block;
 }

/***
 * If the animating class is present then apply
 * the CSS transition to #container over 250ms.
 */
.animating #container, .animating #overlay_btn{
  transition: transform .25s ease-in-out;
  -webkit-transition: -webkit-transform .25s ease-in-out;
}

/***
 * If the left class is present then transform
 * the #container element 240px to the left.
 */	
.animating.left #container {
  transform: translate3d( -240px, 0, 0 );
  -webkit-transform: translate3d( -240px, 0, 0 );
}

/*.animating.left #menu{
 transform: translate3d( -190px, 0, 0 );
  -webkit-transform: translate3d( -190px, 0, 0 );
}*/

/***
 * If the right class is present then transform
 * the #container element 240px to the right.
 */
.animating.right #container {
  transform: translate3d( 240px, 0, 0 );
  -webkit-transform: translate3d( 240px, 0, 0 );
}

/*.animating.right #menu{
	transform: translate3d( 190px, 0, 0 );
	-webkit-transform: translate3d( 190px, 0, 0 );
}*/

/***
 * If the menu-visible class is present then
 * shift the #container 240px from the right edge
 * via position: absolute to keep it in the 
 * open position. When .animating, .left and
 * .right classes are not present the CSS
 * transform does not apply to #container.
 */
.menu-visible #container {
  right: 240px;
}

/*.menu-visible #menu{
	right: 190px;
}*/

#container, nav.mobileNav {
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}

/* end Animated Mobile Navigation
----------------------------------*/

.searchForm{
		grid-area: searchForm;
		background: #fff;
		padding-right: 15px;
	}
	
.secondaryNav{
		grid-area: searchForm;
		padding-top: 20px;
		font-size: .875em;
	}	

.links{
		grid-area: links;
		/*background: brown;*/
	}

.links ul li{
		/*display: inline;*/
		text-decoration: none;
		list-style: none;
		margin-right: 20px;
		margin-bottom: 15px;
		color: #ffffff;
		font-size: 1.25em;
	}

.links ul li a{
	color: #ffffff;
	text-decoration: none;
}

 footer .links ul li a:hover{
		/*color: var(--globalPurpleLight);*/
		/*text-decoration: none;*/
	}

.mobileMenuButton{
	/*grid-area: mobileMenu;*/
	grid-row-start: 1;
	grid-column-start: headerRight-start;
	grid-column-end: headerRight-end;
	/*background-color: pink;*/
	z-index: 1;
	opacity: 1;
	height: auto;
	text-align: right;
	color: var(--globalBlue);
}

/* Content Area
-------------------------------*/
content{
	grid-area: content;
	/*padding: 40px 20px;*/
	/*background: var(--globalBeige);*/
	display: block;
}

.paddingWrapper{
	padding: 20px;
}

.homepageWrapper{
	display: grid;
	grid-template-areas: "hero"
						"homeContent";
	grid-template-rows: repeat(2, auto);
	grid-template-columns: 1fr;
	/*background: blue;*/
}

.homepageContent{
	grid-area: homeContent;
	display: grid;
	grid-template-areas: "calendar"
						 "quadMenu"
						 "zkl"
						 "events";
	grid-template-rows: repeat(4, auto);
	grid-template-columns: 1fr;
	grid-row-gap: 2em;
	/*padding: 20px;*/
}

/*.quadMenu{
	grid-area: quadMenu;
	display: grid;
	grid-template-rows: repeat(2, minmax(164px, 183px));
	grid-template-columns: repeat(2, 1fr);
	grid-gap: .5em;
}*/

.hero{
		grid-area: hero;
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: auto;
		grid-template-areas: "heroText";
		align-items: center;
		justify-content: center;
		padding: 20px;
		background: url(https://beachwoodkehilla.com/images/uploads/interface/buildingHeroMobileFirst.jpg) no-repeat;
		background-position: center top;
		background-size: cover;
	}

	.heroText{
		grid-area: heroText;
		background: rgba(129, 19, 140, 0.8);
		padding: 10px;
		color: var(--globalBeige);
		text-align: center;
		font-size: 1.25em;
	    line-height: 1.5em;
	    backdrop-filter: blur(3px);
	}

.quadMenu{
	grid-area: quadMenu;
	display: grid;
	grid-template-rows: repeat(4, minmax(50px, 100px));
	grid-template-columns: 1fr;
	grid-gap: .5em;
}

.quadMenu a{
	color: #ffffff;
	text-decoration: none;
	font-size: 1.5em;
	font-weight: 200;
	line-height: 1.25em;
}

.quadMenu .item{
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	justify-items: center;
	align-items: center;
	text-align: center;
	background: var(--globalPurple);
	padding: 5%;
	transition: background .25s ease;
}

.quadMenu .item:hover{
	background-color: var(--globalPurpleHover);
}

.intro{
	grid-area: intro;
	/*background: var(--globalBeige);*/
	border: 1px solid var(--globalPurple);
	color: var(--globalBeige);
	margin-bottom: 50px;
	background: url(https://beachwoodkehilla.com/images/uploads/interface/bg_header.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.calendar{
	grid-area: calendar;
	height: 300px;
	/*width: 100%;*/
	/*height: auto;*/
	/*min-height: 300px;*/
	/*background: purple;*/
}

.homepage-secondary-content{
	/*width: 100%;*/
	height: auto;
	/*min-height: 300px;*/
	/*background: purple;*/
}

.map{
	grid-area: map;
}

.events{
	grid-area: events;
}

.zkl{
	grid-area: zkl;
}

iframe#spotify .kTRmgL{
background: rgba(0,0,0,0) !important;
}

.calendar, .zkl, .events, .quadMenu, #alert{
	border: 1px solid var(--globalPurple);
	padding: 20px;
}

.quadMenu, .calendar, .events, .zkl, .map{
	/*margin-bottom: 40px;*/
}

/* Cards
----------------------------*/
.cardGrid{
	display: grid;
	grid-gap: 2em;
}

.card{
	background: #ffffff;
	width: 92%;
	padding: 4%;
	-moz-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	margin-bottom: 10px;
	position: relative;
}

/*.ribbon {
  position: relative;
  overflow: hidden;
}

.ribbon::after {
  position: absolute;
  display: block;
  top: 25px;
  right: -35px;
  width: 150px;
  height: 30px;
  background: red;
  transform: rotateZ(45deg);
  content: 'Meat';
  color: #ffffff;
  text-align: center;
}*/

.card p{
	margin-bottom: 10px;
}

a.rsvpButton{
	display: block;
	padding: 10px;
	float: right;
	background: purple;
	color: #ffffff;
	line-height: 1em;
	text-decoration: none;
}

a.rsvpButton:hover{
	opacity: 0.8;
}

/* Forms
----------------------------*/
input, textarea, option{
	width: 96%;
	padding: 1em 2%;
	border-width: 0;
}

select{
	width: auto;
	padding: 2%;
	border-width: 0;
}

select, input{
	margin-bottom: 1em;
}

input[type=submit]{
	width: auto;
	cursor: pointer;
	background: var(--globalPurple);
	color: #ffffff;
}

input[type=radio], input[type=checkbox]{
	width: auto;
}

input[disabled=disabled]{
	background-color: #e1e1e1;
	cursor: default;
}

form p{
	margin: 10px 0;
}

p.formSubmit{
	text-align: center;
}

::placeholder{
	color: #bbbbbb;
}

/* Visit
---------------------------------*/
.foodGenderMeat{
	color: red;
}

.foodGenderDairy{
	color: var(--globalBlue);
}

.foodGenderParve{
	color: green;
}

ul.visitNav{
	padding: 5px 0;
	border-bottom: 1px solid var(--globalPurple);
	margin-bottom: 20px;
}

.visitNav li{
	display: inline;
	list-style-type: none;
	margin-right: 10px;
}

/* Begin by hiding all of the restaurant card, which will then be automatically shown by the filtering script */
.restaurant{
	display: none;
}

/* Class applied to cards when they should be shown when filtered */
.show{
	display: block;
}

#foodGenderButtonContainer{
	margin-bottom: 1em;
}

#foodGenderButtonContainer h2{
	margin-right: 1em;
}

/* Style the buttons */
.foodGenderButton {
  border: none;
  outline: none;
  padding: 6px 8px;
  background-color: #ffffff;
  cursor: pointer;
}

/* Add a light grey background on mouse-over */
.foodGenderButton:hover {
  background-color: #ddd;
}

.foodGenderButton.active {
  color: white;
}

/* Add the appropriate colored background to the active button */
.foodGenderButton.all.active{
	background-color: var(--globalPurple);
}

.foodGenderButton.Meat.active{
	background-color: red;
}

.foodGenderButton.Dairy.active{
	background-color: var(--globalBlue);
}

.foodGenderButton.Parve.active{
	background-color: green;
}

/* Add a check mark to the active button */
.foodGenderButton.active:before {
    content: "\f00c";
    display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*transform: translate(0, 0);*/
}

/* ZKL
---------------------------------*/
audio{
	width: 100%;
}

.zklGrid{
	display: grid;
	grid-gap: 2em;
}

.zkl td{
	display: block;
}

.zklImg{
	width: 100%;
}

.zklTable .one{
	background: #e1e1e1;
}

.zklTable .two{
	background: #b1b1b1;
}

.progressBar{
	position: absolute;
	bottom: 0;
	left: 0;
}

.fa-play-circle{
	color: var(--globalPurple);
}

/* Downloads
--------------------------------*/
.downloads{
		display: grid;
		grid-template-columns: 1fr;
		gap: 2em;
}

.download td{
	padding: 10px;
	background: #ffffff;
}

.fileType{
	font-size: .85em;
	font-weight: 700;
}

/* Kiddush
-----------------------------------*/
#sponsorKiddushPage{
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr;
	grid-gap: 4em;
	grid-template-areas: "sponsorKiddush"
						"sponsoredWeeks";
{!-- 	grid-template-areas: "sponsorshipInfo"
						"sponsorshipForm"; --}
}

#sponsorKiddush{
	grid-area: sponsorKiddush;
}

#sponsoredWeeks{
	grid-area: sponsoredWeeks;
{!-- 	display: grid;
	grid-auto-rows: max-content; --}
}

#sponsoredWeeks table{
	width: 100%;
}

#sponsoredWeeks td{
	padding: 1em;
}

{!-- #sponsoredWeeks tr:nth-child(even) {
    background-color: var(--globalPurple);
} --}

#sponsoredWeeks tr:nth-child(odd) {
    background-color: var(--globalPurpleLight);
}

#totalCost{
	background: var(--globalPurple);
	padding: 15px;
	color: var(--globalPurpleLight);
	margin-top: 20px;
	font-size: 1.5em;
	padding-left: 30%;
}

#totalCost span{
	color: #ffffff;
}

/* Personnel/Rabbis
----------------------------------*/
.personnelGrid{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 4em;
}

.headshot{
	float: left;
	margin-right: 20px;
}

/* Contact
----------------------------------*/
.contactGrid{
	display: grid;
	grid-template-rows: auto auto auto;
	grid-template-columns: 1fr;
	grid-gap: 2em;
	grid-template-areas: "contactForm"
						"contactInfo"
						"contactMap";
}

.contactForm{
	grid-area: contactForm;
}

.contactInfo{
	grid-area: contactInfo;
}

.contactMap{
	grid-area: contactMap;
}

/* Donate
-------------------------------------*/
.threeColumnGrid{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, auto);
	grid-gap: 2em;
	grid-template-areas: "colOne"
						"colTwo"
						"colThree";
}

.colOne{
	grid-area: colOne;
}

.colTwo{
	grid-area: colTwo;
}

.colThree{
	grid-area: colThree;
}

.donateGrid{
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr;
	grid-gap: 2em;
	grid-template-areas: "donateForm"
						"donateAddress";
}

.donateForm{
	grid-area: donateForm;
}

.donateAddress{
	grid-area: donateAddress;
}

{!-- input#amount::before{
	font-family: "Font Awesome 6 Free";
	content: "\f155";
    font-weight: 900;
} --}

{!-- input#amount::before{
	display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	font: var(--fa-font-solid);
    content: "\f155";
} --}

 
 input#amount{
 	width: calc(96% - 20px);
 }
 
.error{
    background-color: red;
    background-image: url('../images/icons8-sort-up-50.png');
    background-position: left center;
    background-repeat: no-repeat;
    color: #ffffff;
    padding: 5px;
    padding-left: 20px;
    display: none;
    margin-top: 10px;
}

/* Google Calendar
----------------------------------------*/
iframe *{
	font-size: 4em !important;
}

/* Footer
----------------------------------------*/

footer{
	grid-area: footer;
	background: var(--globalPurple) url(https://beachwoodkehilla.com/images/uploads/interface/wood25px.jpg) top center repeat-x;
	padding: 45px 20px 20px 20px;
	font-size: .75em;
	color: #ffffff;
}

footer li{
	list-style-type: none;
}