* {
  -webkit-box-sizing: border-box; /* Android <= 2.3, iOS <= 4 */
  -moz-box-sizing: border-box; /* Firefox 1+ */
  box-sizing: border-box; /* Chrome, IE 8+, Opera, Safari 5.1 */
}

body {
 font: 100%/1.5 Georgia,"Times New Roman", serif; 
margin:0;
padding:0;
color: #000;
background:#fff;
}

/* links */
a:link, a:visited   {
font-weight:bold;
text-decoration:none;
outline:none;
/* color: #aaaaff;  */
color:purple;
}

a:hover {
font-weight:bold;
text-decoration:none;
color: #f60;       
}

.linkSmallCap {
font-variant:small-caps;
}

/* layout  */
.page {
margin: 0 auto;
max-width: 60em;    /* 960/16 = 60em */   /* change from width to max-width */
}

.container {
padding-bottom: 1.875%;

display: grid;
 grid-template-columns: 4fr 2fr; 
 grid-template-areas:          
        "main rightSidebar";        
 grid-gap:1em; 
}


@media (max-width: 550px) {
.container {
display: grid;
 grid-template-columns: 1fr; 
 grid-template-areas:  
        "main"        
        "rightSidebar";        
  grid-gap:1em;
  padding:10px;
}
}

main {
width: 62.5%;   /* was 100%  */  /* 600px /960px = .625 = 62.5%      */   
float: left; 
padding-left:1em;  /* move form in center 16*20 320 was 5 now 1*/

grid-area:main;  
}


@supports (display: grid) {  /* newer browsers ff use grid also use width if specified */ 
    main {
       width: auto;        
    }
}

.sidebar {
width: 31.25%;  /* 300px / 960px = .3125 = 31.25% */
float: right;
grid-area: rightSidebar;
}


@supports (display: grid) {
    .sidebar {
       width: auto;        
    }
}

header {
font: bold 36px/120% Arial, Helvetica, sans-serif;
margin: 1% auto; 
/* padding: 1%; */
background-color: rgba(170, 170, 255,1) ;
color: white;
text-align:center;
border-bottom:3px solid #660000;    
border-top:1px solid #660000;  		
/* background-image: url("../images/aglowLogoSun1.png") ; */
/* max-height: 100%; */
}


footer {
font-family: Arial, Helvetica, sans-serif;    
font-weight:bold;
text-align:center;
padding:10px 0px;
border-bottom:1px solid #660000;    
border-top:3px solid #660000;		
background-color:rgba(170, 170, 255,1);
color: rgba(0,0,0, 1);  
} 

#nav ul {
display: flex;             /* use flex IE10 IE11 etc */
flex-wrap:wrap;   
list-style: none;
}


#nav ul li {
display: inline-block;     /* not flex IE9 */
vertical-align:top;
width: calc(25% - 20px);  /* IE9 using width for non FLEX and padding */
padding:0 20px;         /* chrome 7 flex ignores*/
flex: 1 1 50px;               /* rely on flex */
}


@supports (display: flex) {
#nav ul li {
padding:0px;    /* using flex do not need padding rely on flex */
}
}


#nav ul li a:focus, #nav ul li a:hover { 
background-color: rgba(255, 255, 255, 1);   
transition: background-color 0.3s ease-in-out;
border-radius: 15px;
color:purple;
box-shadow: 4px 4px 5px #000;
}  


#nav ul li a {
padding: 3%;
color: rgba(232,126,0, .7);
color: rgba(0,0,0, 1);
font-size: 0.666666666667em;   /*  24px /36px = 0.666666666667 =  66.6666666667 % em */
 /* background-color:white;  */
/* border-radius:.7em; */
}

.bg {
    background: url('../images/lightC3.png  ');
 /*   height: 100vh;
    width:100vh; */
    background-repeat: no-repeat;
 background-size: auto;
    
}


.clearfix:before,.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}


h1 {
 padding:0 4%;   /* 10px / 600px = 1.66666666667 % is relative to container block */
}                                          /* 24/600 = 4% */

h2 {
padding: 0 3.33333333333% ; /*  10px /300px = 0.0333333333333 = 3.33333333333 */
}

.hide {
display:none;
}

.show   {
display:inline;
}

img, embed, object, video {
 display:block;  /* avoid having to write <br> or <br clear=all> before and after image */
  border:0;       /* may have to write this for old browsers in markup non css*/
  max-width:100%;
/*  height:auto;  */
}

video {
height:auto;
}

ol, ul  {
list-style: normal;  /* normal  */
}

footer ol, footer ul, #rightNav, .otherLightHouses {
list-style: none;
}


.otherLightHouses li {
padding: .05em;
}

/* fixes dots areound a context menu and inputs radio buttons - should think about putting this in reset */
a,input {
 outline: 0;
}

/* fixes dots around submit button */
input::-moz-focus-inner {
border:0;
}

p {
margin:1%;
}

/*  aglow page elements */
#mainSection {
min-height:200px;
}

/* mast head */
 .figureContainer {     
position:relative;
text-align: center;
color:white;    
}

.lightHouseHero {
width:100%;   
max-height:325px;  
object-fit:fill ;   /* cover */
object-position: top right ; 
}


 /* mast head title */ 
.logoTitle {
position: absolute;
top:53%;
left:53%;
transform: translate(-53%,-53%);  

color: black;    
font-style: italic;
font-family: Calligraphy; 
font-size:1.5em;
}


@media (max-width: 480px) {
.logoTitle {
font-size: .9em;    
}
}

/* nav menu */

.highLightNavOn {
background-color: white;  		    /* when hovered or select choose white */
box-shadow: 2px 2px 5px #999 ;   /* when selected place a boxshadow. */
box-shadow: 4px 4px 5px #000;
position:relative;
top:-2px;
  border-radius:13px;
}

/*
.nav-main a:hover {
  color: #029443;
  text-decoration: none;
}
*/ 

/* Right Nav   */

#rightNav  {
/* margin: 0px 0px 0px 10%; */
/* background: #ccc ;  */  /* #cff */ 
border: 6px solid #AAA;
border-radius:13px;
width: 65%;
/* border: 1px solid pink; */
border:none;
}


#rightNav li  {
position: relative;
list-style:none;
margin:0;
border-bottom: 1px solid #CCC;
}

#rightNav li a   {
display: block;
padding: 0.25em 0 0.25em 0.55em;
text-decoration: none;
color:#660000;
color:purple;
/* color: rgba(86,0,0,.5);   */
text-shadow: 0 1px 1px rgba(86,0,0,.5);
transition: all 0.3s ease-in-out;
}

#rightNav li:hover {
background: white;
background: rgba(255,255,255,.9);
background: #ccc;
border-radius:13px;
}

#rightNav li:last-child, #leftNav2 li:last-child, #leftNav3 li:last-child  {
padding-bottom: 0;
border-bottom:none;
}

.highLightLeftNav {
  background: #fff ;
  border-radius:13px;
  }


/* text */ 
.textAlignCenter {
text-align:center;   
}


/* main area - page Elements */

.sectionHeader {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1.2em;          /* target / Context   24px/16 =1.5em    19.2px/16 = 1.2em */
font-weight: bold;
text-shadow: 0px 1px 1px rgba(86,0,0,.3);
text-align: left;
/* color:#560000; */
color:#000000;
/* background-color: #000; */
/* border-radius: 30px 30px; */
margin: .625em 0;              /* 10 / 16 = .625em = 62.5%*/
padding:0.3125em 0px;       /* 5px/16px =  0.3125em */
}

/* button */

.btn {
	background-color: rgba(170,170,255,.9);   /* AAAAFF */
	border: none;
	border-radius: 4px;
	box-shadow: 2px 2px 2px #333;
	color: rgba(255,255,255,1);
	margin: 12px 0 0 26px;
	padding: 8px;
    font-weight:bold;
	text-shadow: 1px 1px 0px #777; 
/*	text-shadow: 1px 1px 0px rgba(86,0,0,.3); */
}

.btnMarginZero {
	background-color: rgba(204,255,255,.9);
	border: none;
	border-radius: 4px;
	box-shadow: 2px 2px 2px #333;
	color: rgba(86,0,0,1);
	margin: 0;
	padding: 8px;
/*	text-shadow: 1px 1px 0px #777; */
	text-shadow: 1px 1px 0px rgba(86,0,0,.3);
}

.btnPage {              /* can be used in a form */
	background-color: rgba(170,170,255,.9); 
	border: none;  /*  none */
	border-radius: 14px;
	box-shadow: 2px 2px 2px #333;
	color: rgba(255,255,255,1);
    font-weight:bold;
    font-size:medium; 
/*	margin: 12px 0 0 26px; */
	margin: 0px 5px 0px 0px;
    cursor: pointer;

	padding: 5px 10px;
	text-shadow: 1px 1px 0px #777; 
/*	text-shadow: 1px 1px 0px rgba(86,0,0,.3); */
}


.secondaryButtonColor {
background-color: #dcdcdc;
/* color: */
}

/*
button:disabled, input[type='submit']:disabled {
opacity: .5;
border: 1px dotted gray;
}

button:enabled,  input[type='submit']:enabled {
opacity: 1;
}
*/

/* end button */

.aglow50, .kingdom50 {
margin: .625em 0;              /* 10 / 16 = .625em = 62.5%*/
padding:0.3125em 0px;   
}

.speakerBioHeader, .tvMinistryHeader, .monthlyEventsHeader, .subHeader {
color: black;  
padding:1%;
font-weight:bold;
background-color:rgba(170, 170, 255,1); 
}

.firstLetter::first-letter {
color: purple;
font-weight:bold;
font-size: 1.75em;
}

.columnLunch, .chicagoNorthSuburban, .twoColumns {
column-count: 2;
column-width: 250px;
}	

.figCapLunch , .figCap {
display: block;
padding: 10px;
font-weight:bold;
font-size:1.1em;
line-height:1.34em;
color:#ccc;
background: rgba(0,0,0,.3);
transform: translateY(-100%); 
}

a[href$='.doc'] {
display:block;
background-image: url('../images/icons/word25.png');
background-size: contain;  
background-position: right 190px top ;  /* 190px/16=  11.875 em 190  35%*/
background-repeat:no-repeat;
}

a[href$='.pdf'] {
display:block;
background-image: url('../images/icons/pdf.svg');
background-size: contain;  
background-position: right 190px top ;  /* 190px/16=  11.875 em 190  35%*/
background-repeat:no-repeat;    
}

.specialEvent a[href$='.pdf'] {
display:block;
background-image: url('../images/icons/pdf.svg');
background-size: unset;   
background-position: right 35% bottom ;  /* 190px/16=  11.875 em 190  35%*/
background-repeat:no-repeat;    
}    
    
    

@media (max-width: 820px) {   /*  550px */
a[href$='.doc'], a[href$='.pdf'] {
background-position: right 20% top ;  /* 7/7 */
}  
    
}


.title {       /* events page */
font-size:1.2em;
color: purple;
}

.marginBottom {
margin-bottom: .9em;
}


.marginTop {
margin-top: .9em;
}

.importantMsgBorder {
border-top:3px solid black;
border-bottom:3px solid black;
font-style: italic;
font-size: 24px;
}

.importantMsgBold {
  font-weight:bold;
  font-style:italic;
}


.board {
 /*   font-variant: small-caps;
    font-weight:bold; */
    font-style:italic;
    
}

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


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

.flexP {
 display:flex;
 flex-wrap: wrap; 
 gap: .9em;
}


.flexCenter {
justify-content:center;
}


.flexRight {
justify-content: right;
}

.imageText {
flex: 1 1 auto;
}

.headerBold {
font-weight:bold;
font-size:1.2em;
color: purple;
font-style:italic;
}

.floatLeftTV, .floatLeft {
float: left;    
margin:0 1em 0 0;
}

.floatRight {
float: right;    
/* margin:1em; */
}


.error, .impMessage {
	color:#FF0033;
	font-size:14px;
    font-weight:bold;
	}
	
.success  {
	color:#008000;
	font-size:14px;
    font-weight:bold;
	}