/*---------------------------------
	IMPORTS
-----------------------------------
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Lobster+Two:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
Della Respira|     Source Serif Pro    Barlow Condensed
*/

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

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

h1{
font-family: "Barlow Condensed", arial, verdana, sans-serif;
font-weight:700;
font-size:2.1rem;
line-height:100%;
color:#1A7672;
}

h2{
font-family: "Barlow Condensed", arial, verdana, sans-serif;
font-size:1.9rem;
font-weight:400;
color:#1A7672;
line-height:100%;
}

h3{
font-family: "Della Respira", arial, verdana, sans-serif;
font-size:1.5rem;
font-weight:400;
line-height:100%;
color:#1A7672;
}

h4{
font-size:1.5rem;
font-family: "Source Serif Pro", arial, verdana, sans-serif;
font-weight: normal;
line-height:100%;
color:#1A7672;
line-height:95%;
}
h5{
font-size:1.3rem;
font-family: "Source Serif Pro", arial, verdana, sans-serif;
font-weight: normal;
color:#1A7672;
}
h6{
font-size:1.1rem;
font-family: "DSource Serif Pro", arial, verdana, sans-serif;
font-weight: stronger;
color:#1A7672;
}

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

 .clear {  clear:both;  }

.topMenuTab {
 display:block;
color:#fff;
 text-decoration:none;
 cursor: pointer;

}

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

#topMenuStoryBox:after{
  display: inline-block;
  font-family:"Source Serif Pro", arial, verdana, sans-serif;
  font-weight:bold;
  font-size:5vw;

  position:absolute;
  top:200px;
  right:30px;


  content: "\00d7"; /* This will render the 'X' */
  color:#30607D;
  cursor:pointer;
}

}


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


.video-container {
    overflow: hidden;
    position: relative;
    width:98%;
 margin-left:1%; 
margin-right:1%;
margin-top:40px;
margin-bottom:20px;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* EVENT TABS */


/* Style the tab */
.eventTab {
  overflow: hidden;
 // border: 1px solid #ccc;
  background-color: #FAFDEF;
  text-align:center;
}

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

/* Change background color of buttons on hover */
.eventTab button:hover {
  background-color: #1A7672;
}

/* Create an active/current tablink class */
.eventTab button.active {
  background-color: #1A7672;
}

/* Style the tab content */
.eventTabcontent {
  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;
}
/* EVENT TABS */



/*  MOBILE MENU */

.phoneMenuText { 
  font-size:1.2rem;
  padding-left:20px;
}


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

.phoneMenuNav #phoneMenuLinks { 
 display: none;
}

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

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

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

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



/*  MOBILE MENU */