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

 // <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 400 to 900

.playfair-display-heading {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.merriweather-light {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
}

.merriweather-regular {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: normal;
}

.merriweather-bold {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: normal;
}

.merriweather-black {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: normal;
}

.merriweather-light-italic {
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: italic;
}

.merriweather-regular-italic {
  font-family: "Merriweather", serif;
  font-weight: 400;
  font-style: italic;
}

.merriweather-bold-italic {
  font-family: "Merriweather", serif;
  font-weight: 700;
  font-style: italic;
}

.merriweather-black-italic {
  font-family: "Merriweather", serif;
  font-weight: 900;
  font-style: italic;
}


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

html{
  font-size:1.3rem ; 
}

h1{
font-family: 'playfair-display-heading';
font-weight:700;
font-size:3.1rem;
line-height:100%;
color:#993D54;
}

h2{
font-family: 'playfair-display-heading';
font-size:2.9rem;
font-weight:400;
color:#493798;
line-height:100%;
margin:15px 0 0 0;
}

h3{
font-family: 'playfair-display-heading';
font-size:2rem;
font-weight:400;
line-height:100%;
color:#2A1E5C;
line-height:100%;
margin:15px 0 0 0;
}

h4{
font-family: 'playfair-display-heading';
font-size:1.8rem;
font-weight:400;
line-height:100%;
color:#993D54;
line-height:100%;
margin:15px 0 0 0;
}
h5{
font-family: 'playfair-display-heading';
font-size:1.5rem;
font-weight:600;
line-height:100%;
color:#993D54;
line-height:100%;
margin:15px 0 0 0;
}
h6{
font-family: 'playfair-display-heading';
font-size:1.3rem;
font-weight:600;
line-height:100%;
color:#993D54;
line-height:100%;
margin:15px 0 0 0;
}

strong {
color:#493798;
}

b {
color:#493798;
}


/*---------------------------------
	LAYOUT
-----------------------------------*/
body{
margin:0;
padding:0 0 0 0;
color:#000;
background:#fff;
  font-family: "Merriweather", serif;
  font-weight: 300;
  font-style: normal;
  color:#5e5a69;
text-shadow: 0 0 1px transparent; /* google font pixelation fix */
}

 .clear {  clear:both;  }


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

  /* Desktop */

        @media screen and (min-width: 641px){
	.grid{max-width: 1920px;}
	.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;}
        }     
 



.closePageX {
position:absolute;
display:block;
top:20px;
right:30px;
font-size:3.5vw;
font-family: arial, sans;
font-weight:800;
color:#993D54;
cursor:pointer;
z-index:10000;
}

.closePageX:hover { opacity:0.65; }

.closePhonePageX {
position:absolute;
display:block;
top:50px;
right:30px;
font-size:1.9em;
font-family: arial, sans;
font-weight:800;
color:#993D54;
cursor:pointer;
}

 
#topContainer {
float:left; 
width:100%; 
max-height:860px; 
overflow:hidden;
}
   
#phoneMenuContainer{
float:left; 
width:100%; 
margin:0 0 0 0;
padding: 1% 0 1% 0;
background-color:#493798;

}

#topPhoneContainer {
float:left; 
width:100%; 
margin:0 0 0 0;
}
         

#topLogoBox {

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


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

}



#navBarBand{
#width:100%; 
height:40px; 
margin:0 0 0 0; 
font-size: clamp(0.6rem,1.5vw, 1.9rem);
background-color:#983C54;
}

#headerBox{
width:93%; 
height:230px; 
padding:0 0 0 7%; 
background-color:#433C98;
}





/* SUBPAGES */



#homePageContainerBox {
float:left;
width:84%; 
margin:0 0 0 0;
 padding:40px 8% 40px 8%;
background-color:#EAEBF6;
}


#homePageStoryBox{
float:left;
 display:block;
 padding:20px 5% 40px 5%;
 width:90%;
 border-radius:8px;
 background-color:#fff;
padding-bottom:50px;
}



#phonePageStoryBox{
position:absolute;
top:218px;
min-height:400px;
margin:0 0 40px 0;
border:solid 4px #2A1E5C;
width:90%;
padding:40px 4% 30px 4%;

display:none;

 background-color:#f3f3f3;
}


#subPageStoryBox{
position:absolute;
top:240px;
min-height:600px;
margin:0 0 40px 0;
border:solid 4px #2A1E5C;
width:83.5%;
padding:60px 8% 50px 8%;

display:none;

 background-color:#f3f3f3;
}



#phoneSubPageStoryBox{
position:absolute;
top:218px;
min-height:600px;
margin:0 0 40px 0;
border:solid 4px #2A1E5C;
width:83.5%;
padding:60px 8% 50px 8%;

display:none;

 background-color:#f3f3f3;
}




#contactBox{
display:none;
position:absolute; 
width:360px; 
top:240px;  
left: 0; 
right: 0; 
margin-inline: auto; 
width: fit-content; 
background-color:#2A1E5C;
-webkit-box-shadow: -1px 3px 10px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 3px 10px 0px rgba(0,0,0,0.75);
box-shadow: -1px 3px 10px 0px rgba(0,0,0,0.75);
}


/* SUBPAGES */



#navbar {
    display: flex;
    justify-content: flex-start;
    margin-left: 8%;
   
}

.nav-button {
    position: relative;
    display: inline-block;
    background-color: #e7e8a7;
    border: 3px solid #504380;
    border-radius: 6px;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    margin: 0 10px;
    color: #504380;
    cursor: pointer;
    text-align: center;
    font-family: arial, sans;
    font-weight:400;
}

.nav-button:hover {
    background-color: #F3E54F;
}

.dropdown {
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    background-color: #dde0b1;
    border: 3px solid #504380;
    border-radius: 6px;
    z-index: 1;
}

.dropdown-item {
    padding: 4px 6px;
    color: #504380;
    cursor: pointer;
    text-align: left;
        font-family: arial, sans;
    font-weight:400;
}

.dropdown-item:hover {
    background-color: #F3E54F;
}

.nav-button:hover .dropdown {
    display: block;
}


/*  PHONE MENU  */

        .phonePopup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 999;
        }

        .phoneMenu {
            background: #E5E9A8;
            width: 80%;
            max-width: 300px;
            margin: 50px auto;
            border-radius: 8px;
            padding: 10px;
            color:#2A1E5C;
        }

        .phone-menu-item {
            padding: 10px;
            border-bottom: 1px solid #ddd;
            cursor: pointer;
            background:#FCF464;
            color:#2A1E5C;            
        }

        .phone-menu-item:last-child {
            border-bottom: none;
        }


/* PHONE MENU */

























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

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