/*---------------------------------
	IMPORTS

    font-family: 'Goldman', cursive;

    font-family: 'PT Sans', sans-serif;

-----------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Goldman:wght@700&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*---------------------------------
	OVERRIDES
-----------------------------------*/

html{
  font-size:24px ; /* it means 16px is equal to 1rem */
}

h1{
font-family: 'Goldman', cursive;
font-weight:700;
font-size:2.1rem;
line-height:100%;
color:#1A7672;
}

h2{
font-family: 'Goldman', cursive;
font-size:1.9rem;
font-weight:400;
color:#1A7672;
line-height:100%;
}

h3{
font-family: 'Goldman', cursive;
font-size:1.5rem;
font-weight:400;
line-height:100%;
color:#1A7672;
}

h4{
font-size:1.5rem;
font-family: 'PT Sans', sans-serif;font-weight: normal;
line-height:100%;
color:#1A7672;
line-height:95%;
}
h5{
font-size:1.3rem;
font-family: 'PT Sans', sans-serif;
font-weight: normal;
color:#1A7672;
}
h6{
font-size:1.1rem;
font-family: 'PT Sans', sans-serif;
font-weight: stronger;
color:#1A7672;
}

strong {
color:#010E22;
}

b {
color:#010E22;
}


/*---------------------------------
	LAYOUT
-----------------------------------*/
body{
margin:0;
padding:0 0 0 0;
color:#000;
background:#000;
font: 400 0.8rem/120% 'PT Sans', arial, verdana, sans-serif;
text-shadow: 0 0 1px transparent; /* google font pixelation fix */
}

 .clear {  clear:both;  }


/*---------------------------------
	RESPONSIVE
-----------------------------------*/

  /* Desktop */

        @media screen and (min-width: 896px){
	.grid{max-width: 768px;}
	.show-desktop	{display:block;}
	.hide-desktop	{display:none;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
       }

  /* Tablet */        

        @media screen and (min-width: 641px) and (max-width: 896px) {
	.grid{max-width: 768px;}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
        }       

  /* Phone */        

        @media screen and (min-width: 300px) and (max-width: 640px) {

	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:block;}
	.hide-phone		{display:none;}
        }     
 
        

#topLogoBox {

 top:0;
 float:left;
 width:100%;
 cursor:pointer;
}




#homeStoryContainerBox {
position:relative;
width:84%; 
padding-left:8%; 
padding-right:8%; 
padding-top:30px;   
margin-top:30px;
}

#volunteerBox {
float:left; 
width: clamp(190px, 85%, 325px); 
margin-top:0px; 
margin-bottom:0px;
margin-left:12%; 
border-radius:8px; 
background-color:#3D3D3D;
}



/* MENU TABS */


/* Style the tab */
.menuTab {
  overflow: hidden;
  width:100%;
 // border: 1px solid #ccc;
  background-color: #333333;
  text-align:center;
}

/* Style the buttons inside the tab */
.eventtopMenuLink  {
  background-color: #333333;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 1.8vw;
  color:#fff;
}

/* Change background color of buttons on hover */
.eventtopMenuLink:hover {
  color: #E49529;
}

/* Create an active/current tablink class */
.eventtopMenuLink .active {
  color: #dfdfdf;
}

/* Style the tab content */
.menuTabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


.phoneEventButton {
  width:49%;
  padding-top:6px;
  padding-bottom:6px;
  font-size:0.7rem;
  margin-bottom:10px;
}




.verticalHomemenu {
  width: 200px;
}

.verticalHomemenu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.verticalHomemenu a:hover {
  background-color: #ccc;
}

.verticalHomemenu a.active {
  background-color: #04AA6D;
  color: white;
}

#vertHomeNavMenuBox {
display:none;
position:absolute;
background-color:#E49529; 
text-align:center; 
padding-left:1px; 
padding-right:1px; 
min-width:14%;
border-style:solid;
border-left-width:8px;
border-right-width:8px;
border-bottom-width:8px;
border-top-width:0px;
border-color:#010E22;
color:#010E22;
}

.subMenuItem {
width:100%; 
background-color:#010E22; 
color:#fff;
margin: 9px 0 0 0;
// padding-top:2px; 
padding-bottom:4px; 
margin-bottom:4px;
font-size:clamp(14px,1.5vw,25px);
}

.subMenuItem:hover {
cursor:pointer;
background-color:#EC3C2D; 
}

/* EVENT TABS */


.iconButton {
font-size:2.2vw; 
color:#010E22; 
flex:1 0 40%;
}

.iconButton:hover { 
opacity:0.7; 
background-color:#dedede;
cursor:pointer;
}

/* SUBPAGES */

#homePageStoryBox{
float:left;
 display:block;
 width:100%;
 background-color:#f3f3f3;
padding-bottom:50px;
}


#subPageStoryBox{
position:absolute;
top:360px;
display:none;
 width:100%;
 background-color:#f3f3f3;
}


#homeIconStoryBox{
float:left;
display:none;
 width:100%;
 background-color:#fff;
padding-bottom:40px;
}

.closePageX {
position:absolute;
display:block;
color:grey;
margin-top:50px;
right:20px;
font-size:2.5vw;
cursor:pointer;
}



.closePhonePageX {
position:absolute;
display:block;
color:grey;
margin-top:50px;
right:30px;
font-size:1.9em;
font-weight:800;
cursor:pointer;
}


.closePageX:hover { opacity:0.65; }

/* SUBPAGES */