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


  font-family: "Times New Roman", Times, serif;



font-family: 'Girassol', cursive;  heading
font-family: 'Mukta Malar', sans-serif;  body text
font-family: 'Playball', cursive; heading

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

@import url('https://fonts.googleapis.com/css2?family=Girassol&family=Mukta+Malar:wght@300&family=Playball&display=swap');

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

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

h1{
font-family: 'Girassol', cursive, 'Open Sans', Arial, Helvetica, sans-serif;
font-weight:700;
font-size:2.1rem;
line-height:100%;
color:#641717;
margin:0 0 15px 0;
}

h2{
font-family: 'Girassol', cursive, 'Open Sans', Arial, Helvetica, sans-serif;
font-size:2.0rem;
font-weight:400;
color:#3f653a;
line-height:98%;
margin:0 0 15px 0;
}

h3{
font-family: 'Playball', cursive, 'Open Sans', Arial, Helvetica, sans-serif;
font-size:1.9rem;
font-weight:600;
line-height:110%;
color:#014266;
margin:0 0 15px 0;
}

h4{
font-size:1.8rem;
font-family: 'Girassol', cursive, 'Open Sans', Arial, Helvetica, sans-serif;
font-weight:600;
font-size:1.6rem;
line-height:110%;
color:#865050;
line-height:100%;
margin:0 0 15px 0;
}
h5{
font-size:1.3rem;
font-family:  'Girassol', cursive, 'Open Sans', Arial, Helvetica, sans-serif;
line-height:98%;
font-weight: 600;
color:#7D947A;
margin:0 0 20px 0;
}
h6{
font-size:1.1rem;
font-family:  'Girassol', cursive, 'Open Sans', Arial, Helvetica, sans-serif;
font-weight:600;
line-height:98%;
font-style: italic;
color:#496F86;
margin:0 0 20px 0;
}

strong {
color:#496F86;
}

b {
color:#496F86;
}

a { color: #7D947A; }

hr {  
height: 2px;
border: 0 none;
background-color: #865050;  
        width: 70%;
        margin-left: auto;
        margin-right: auto;
}

/*---------------------------------
	LAYOUT
-----------------------------------*/
body{
height:100%;
margin:0;
padding:0 0 0 0;
color:#5A5A5A;
background:#FAFAF1;
font: 600 0.8rem/130%  'Mukta Malar', 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: 321px) 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: 540px) {

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


.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
 // padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
 padding-bottom:40px;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
      
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
}




.closePageX {
z-index:10000;
position:absolute;
display:block;
color:#b3b3b3;
margin-top:50px;
right:40px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-weight:600;

cursor:pointer;

    @media screen and (min-width: 896px){
font-size:3.5vw;
margin-top:50px;
        }
  /* Tablet */        

        @media screen and (min-width: 321px) and (max-width: 896px) {
  font-size:3.5vw;
margin-top:50px;
        }       

  /* Phone */        

        @media screen and (min-width: 300px) and (max-width: 540px) {
font-size:1.9rem;
margin-top:-12px;
        }     
 


}

.closePageX:hover { color:#3f653a; }



.contact-iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-contact-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}


#topLogoBox {
 background-color:#cdcba2;
 float:left;
 padding:5px 2% 5px 2%;
 width:96%;
max-height:140px;
min-height:85px;
}


#topMenuBox {
 float:left; 
 width:100%;

}


.eventListItem {
  width:90%;
  padding:10px 5% 20px 5%;
  background-color: #dfdfdf;
}




#moreNewsBoy:hover {
-webkit-transition-duration: 0.4s;
 transform: scale(1.1);
}

#moreNewsLink {
 margin:20px 0 40px 0;
}

#moreNewsLink::after {
  font-family:'Playball', cursive; heading;
  color:#14266;
  font-size:3vw;
  content: " ...Read All About It! ";
}

#moreNewsLink:hover{
 cursor:pointer;
 color:#641717;
}



#moreNewsLinkPhone {
 margin:20px 0 40px 0;
}

#moreNewsLinkPhone::after {
  font-family:'Playball', cursive; heading;
  color:#14266;
  font-size:1.0rem;
  content: " ...Read All About It!";
}

#moreNewsLinkPhone:hover{
 cursor:pointer;
 color:#641717;
}



/* MENU TABS */


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

/* Style the buttons inside the tab */
.eventtopMenuLink  {
  background-color: #fff;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 12px;
  transition: 0.3s;
  font-family: 'Saira Extra Condensed', sans-serif;
  font-weight:500;
  font-size: 1.9vw;
  color:#2069B0;
}

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

/* 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-family:  'Open Sans', Arial, Helvetica, sans-serif;
  font-size:0.7rem;
  margin-bottom:10px;
}




.verticalHomemenu {
  width: 190px;
}

.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: #f4f6f6
  color: white;
}

#vertHomeNavMenuBox {
display:none;
position:absolute;
background-color:  #aeb6bf; 
text-align:center; 
padding-left:1px; 
padding-right:1px; 
min-width:14%;
border-style:solid;
border-left-width:4px;
border-right-width:4px;
border-bottom-width:5px;
border-top-width:0px;
border-color: #ccd1d1; 

color:#010E22;
}



/* SUBPAGES */

#homePageStoryBox{
float:left;
 display:block;
 width:86%;
 background-color:#dfdfdf;
min-height:500px;
 padding:20px 7% 40px 7%;

}




#subPageStoryBox{
float:left;
width:86%;
min-height:500px;
display:none;
 padding:20px 7% 40px 7%;
 background-color:#dfdfdf;
}


#jumpPageStoryBox{
position:absolute;
z-index:7000;
width:86%;
min-height:175px;
display:none;
 padding:20px 7% 40px 7%;
 background-color:#dfdfdf;
}




#phoneAccordionBox{
float:left;
width:86%;
min-height:175px;
display:none;
 padding:20px 7% 40px 7%;
 background-color:#dfdfdf;
text-align:left;
}



/* SUBPAGES */






/*  MOBILE MENU */

.phoneMenuText { 
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
  font-size:1.2rem;
  padding-left:20px;
}


.phoneMenuNav {  
  background-color: #dfdfdf; 
  overflow: hidden;
  position: relative;
}

.phoneMenuNav #phoneMenuLinks { 
 display: none;
}

.phoneMenuNav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-family:  'Open Sans', Arial, Helvetica, sans-serif;
  font-size: 17px;
  display: block;
}

.phoneMenuNav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.phoneMenuNav a:hover {
  background-color: #fff;
  color: black;
}

.activePhoneMenu { 
  background-color: #fff; 
  color: white;
}



/*  MOBILE MENU */


/* POP UP BANNERS */

.popupBannerItem {
 float:left;
  position:rel
 // border: 0px solid #333;
  margin-right: 3%;
  text-align:center;
  overflow: visible;
//  min-width: 350px;
  width:22%;
}
popupBannerItem img {
  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
popupBannerItem:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}