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




@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Bitter:wght@100;200;400&family=Merriweather:ital,wght@0,300;0,400;1,300;1,400&Roboto+Flex:opsz,wght@8..144,100&display=swap');


@font-face {
 font-family: ConsulSans;
 src: url("fonts/consul-sans750.eot") /* EOT file for IE */
}
@font-face {
 font-family: ConsulSans;
 src: url("fonts/consul-sans750.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: ConsulSans;
 src: url("fonts/consul-sans750.woff") /* TTF file for CSS3 browsers */
}


@font-face {
 font-family: Domaine-Display;
 src: url("fonts/DomaineDisplayBoldeot") /* EOT file for IE */
}
@font-face {
 font-family: Domaine-Display;
 src: url("fonts/DomaineDisplayBold.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
 font-family: Domaine-Display;
 src: url("fonts/DomaineDisplayBold.woff") /* TTF file for CSS3 browsers */
}


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

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

h1{
font-family: 'Domaine-Display', Arial, Helvetica, sans-serif;
font-size:2.1rem;
line-height:110%;
color:#092653;
margin-bottom:18px;
}

h2{
 font-family: 'Arvo',  Arial, Helvetica, sans-serif;
font-size:2.0rem;
font-weight:100;
color:#092653;
line-height:110%;
margin-bottom:18px;
}

h3{
font-family: 'Arvo',  Arial, Helvetica, sans-serif;
font-size:1.9rem;
font-weight:700;
line-height:110%;
color:#6A8D92;
margin-bottom:18px;
}

h4{
font-size:1.9rem;
font-family: 'Domaine-Display',  Arial, Helvetica, sans-serif;
font-weight:700;
line-height:110%;
color:#FA8334;
margin-bottom:15px;
}
h5{
font-size:1.6rem;
font-family: 'ConsulSans',  Arial, Helvetica, sans-serif;
line-height:105%;
font-weight: 700;
color:#FF7B9C;
margin-bottom:15px;
}
h6{
font-size:1.3rem;
font-family:  'ConsulSans', Arial, Helvetica, sans-serif;
font-weight: 400;
line-height:95%;
color:#6A8D92;
margin:0;
}

strong {
color:#6A6A6A;
}

b {
color:#6A6A6A;
}

a { color: #000 }
/*---------------------------------
	LAYOUT
-----------------------------------*/
body{
height:100%;
margin:0;
padding:0 0 0 0;
color:#000;
// background:#fdfdfd;
font: 400 0.8rem/125% "Merriweather", Times, 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: 360px) 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;}
        }     
 
  


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

/* 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%;
}
      




.closePageX {
z-index:10000;
position:absolute;
display:block;
color:#EA6A92;
margin-top:50px;
right:40px;
font-family: "ConsulSans" arial, verdana;
font-weight:600;
font-size:3.0vw;
cursor:pointer;
}

.closePageX:hover { opacity:0.65; }

.bodyTextContainer {
 background-color:#F2F2F2;
 width:100%;
}


#topBorderBox { 
z-index:600; 
 position:absolute;
 top:0;
 background-color:#E86A92;
 width:100%;
 height:40px;
text-align:center;
 margin 0 0 0 0;
}



#topSearchBox { 
z-index:600; 
 float:left;
top:0;
 background-color:#80B192;
 width:100%;
 height:40px;
text-align:center;
 margin 0 0 0 0;
color:#000;
}




#topLogoBox {
top:0;
 position:absolute;
 width:clamp(90px, 13.5%, 160px);
z-index:700; 

}



#topMenuContainer {
float:left;
 width:100%;
height:105px;
  margin-top:40px;
 border-bottom-width:0.1px;
 border-bottom-style:solid;
 border-bottom-color:#dfdfdf;
}

#topTitleBox {
// background-color:yellow; 
 float:left;
 text-align:center;
  margin:50px 0 0 14%;
 width:29%;
}


#topMenuBox {
 float:right;
//  background-color:grey;
  margin-top: 0px;
 width:51%;
 padding:0 2% 0 0;
}



/* MENU TABS */


/* Style the tab */
.menuTab {

  overflow: hidden;
  width:100%;
  text-align:center;
}

/* Style the buttons inside the tab */
.eventtopMenuLink  {
  background-color:#fff;
  float: left;
  height:45px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0px 2%;
  transition: 0.5s;
  font-family: 'consulSans', sans-serif;
  font-weight:200;
  font-size: clamp(0.04rem, 1.30vw, 0.8rem);
  margin-top:60px;
  color:#000;
  border-bottom: solid 4px #fff;
}

/* Change background color of buttons on hover */
.eventtopMenuLink:hover {
  border-bottom: solid 4px #733146;
}

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

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


.phoneEventButton {
  width:49%;
  padding-top:6px;
  padding-bottom:6px;
  font-family:  Times New Roman;
  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:#000;
}

.subMenuItem {
width:100%; 
background-color:#f4f6f6; 
color: #000;
margin: 4px 0 0 0;
padding:4px 0 4px 0;

font-family:  Times New Roman;
font-weight: 500;
font-size:clamp(12px,1.4vw,23px);
}

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



.phoneTopMenuDropdownItem:hover{
 cursor:pointer;
}




/* SUBPAGES */

#homePageStoryBox{
float:left;
 width:96.5%;
 background-color:#f9fafc;
// min-height:100px;
 padding:0 0.5% 20px 3%;
font-size: clamp(0.06rem, 1.30vw, 0.8em);
line-height:175%;

}


#subPageStoryBox, #listingsPageStoryBox{
position:absolute;
 top:150px;
left:0;
width:86%;
min-height:827px;
 display:none;
 padding:20px 7% 40px 7%;
 background-color:#f8f8f8;
border-bottom:solid 15px #E86A92;
}


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




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



/* SUBPAGES */






/*  MOBILE MENU */

.phoneMenuText { 
  font-family: Times New Roman;
  font-size:1.2rem;
  padding-left:20px;
}


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

.phoneMenuNav #phoneMenuLinks { 
 display: none;
}

.phoneMenuNav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-family:  Times New Roman;
  font-size: 17px;
  display: block;
}

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

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

.activePhoneMenu { 
  background-color: #D54E27; 
  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);
}