@import url('//fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


.mce-content-body {
  --primary-color-rgb: 78,121,143;     /* Slate Blue-Teal (#4e798f) */
  --secondary-color-rgb: 118,177,142;  /* Soft Forest Green (#76b18e) */
  --tertiary-color-rgb: 146,198,204;   /* Light Aqua Blue (#92c6cc) */

	--default-white-rgb: 255,255,255;
	--default-black-rgb: 0,0,0;

  --title-font-family: 'Open Sans', sans-serif;
  --sub-title-family: 'Averia Serif Libre', serif;
  --body-font-family: 'Open Sans', sans-serif;

	--primary-color: rgba(var(--primary-color-rgb),1);
	--secondary-color: rgba(var(--secondary-color-rgb),1);
	--tertiary-color: rgba(var(--tertiary-color-rgb),1);

	--default-white: rgba(var(--default-white-rgb),1);
	--default-black: rgba(var(--default-black-rgb),1);
}

a { text-decoration: none; }

/************ ALIGN IMAGES CORRECTLY  ************/
img[align="left"], img[style*="float:left"], img[style*="float: left"] {padding-right: 10px;}
img[align="right"], img[style*="float:right"], img[style*="float: right"] {padding-left: 10px;}

body {color: #333; font-family: var(--body-font-family); font-size: 1rem;}

h1, h2, h3, h4, h5, h6 { margin: .75rem 0; line-height: 1.3; font-weight: normal;}
p { line-height: 1.3;}

h1 {color: var(--heading-color); font-family: var(--heading-font-family); font-size: var(--h1-font-size); font-weight: var(--h1-font-weight); font-variant-caps: var(--h1-font-variant-caps); text-transform: var(--h1-text-transform); line-height: var(--h1-line-height); margin: var(--h1-margin); padding: var(--h1-padding); border-bottom: var(--none); border-radius: var(--null); background: var(--h1-background);}
h2 {color: var(--heading-color); font-family: var(--heading-font-family); font-size: var(--h2-font-size); font-weight: var(--h2-font-weight); font-variant-caps: var(--h2-font-variant-caps); text-transform: var(--h2-text-transform); line-height: var(--h2-line-height); margin: var(--h2-margin); padding: var(--h2-padding); border-bottom: var(--none); border-radius: var(--null); background: var(--h2-background);}
h3 {color: var(--heading-color); font-family: var(--heading-font-family); font-size: var(--h3-font-size); font-weight: var(--h3-font-weight); font-variant-caps: var(--h3-font-variant-caps); text-transform: var(--h3-text-transform); line-height: var(--h3-line-height); margin: var(--h3-margin); padding: var(--h3-padding); border-bottom: var(--title-border-bottom); border-radius: var(--null); background: var(--h3-background);}
h4 {color: var(--heading-color); font-family: var(--body-font-family); font-size: var(--h4-font-size); font-weight: var(--h4-font-weight); font-variant-caps: var(--h4-font-variant-caps); text-transform: var(--h4-text-transform); line-height: var(--h4-line-height); margin: var(--h4-margin); padding: var(--h4-padding); border-bottom: var(--none); border-radius: var(--h4-border-radius); background: var(--h4-background);}
h5 {color: var(--default-white); font-family: var(--heading-font-family); font-size: var(--h5-font-size); font-weight: var(--h5-font-weight); font-variant-caps: var(--h5-font-variant-caps); text-transform: var(--h5-text-transform); line-height: var(--h5-line-height); margin: var(--h5-margin); padding: var(--h5-padding); border-bottom: var(--none); border-radius: .2rem; background: var(--primary-color);}
h6 {color: var(--primary-color); font-family: var(--body-font-family); font-size: var(--h6-font-size); font-weight: var(--h6-font-weight); font-variant-caps: var(--h6-font-variant-caps); text-transform: var(--h6-text-transform); line-height: var(--h6-line-height); margin: var(--h6-margin); padding: var(--h6-padding); border-bottom: var(--none); border-radius: var(--null); background: var(--h6-background);}
a {color: var(--primary-color);} 
a:hover {color: var(--default-black);}

a.button {
	background: var(--primary-color);
	font-family: var(--body-font-family); 
	color: white; 
	font-size: .9rem;
	text-transform: none;
	font-weight: normal;
	padding: .7rem 1.2rem; 
	border-radius: .5rem; 
	display: inline-block;
	font-weight: 500;
	line-height: 1.1rem;
	border: none;
	transition: all .2s ease-in;
}

a.transparentbutton { 
  color: var(--primary-color); 
  font-size: 1rem;
  text-transform: none;
  font-weight: normal;
  background: transparent; 
  padding: .7rem 1.3rem; 
  border-radius: .5rem; 
  margin: 0;
  display: inline-block;
  font-weight: 500;
  line-height: 1.125rem;
  border: 2px solid var(--primary-color);
  transition: all .2s ease-in;
}
.transparentbutton:hover {background: var(--primary-color); color: white; border: 2px solid var(--primary-color);}

blockquote {
  color: #232529;     
  padding: 0 0 0 15px;
  margin: 0 0 20px;
  border-left: 5px solid #d5d5d5;
  font: italic 16px/22px Georgia, Serif;
  line-height: 1.2;
  font-size: 1.3rem;
}

address {
  font-style: italic;
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.2;
}

.mce-edit-table .bilingual {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
.mce-edit-table .bilingual .englishtext {
	flex: 1;
}
.mce-edit-table .bilingual .spanishtext {
	flex: 1;
	font-style: italic;
}

.primary-back { background: var(--primary-color); padding: 20px; margin-top: 10px; margin-bottom: 10px; color: white;}
.secondary-back { background: var(--secondary-color); padding: 20px; margin-top: 10px; margin-bottom: 10px; }

.primary-back p, .primary-back li, .primary-back h1, .primary-back h2, .primary-back div .primary-back h3, .primary-back h4, .primary-back h5, .primary-back h6  {color: var(--default-white); }
.secondary-back p, .secondary-back li, .secondary-back h1, .secondary-back h2, .secondary-back div .secondary-back h3, .secondary-back h4, .secondary-back h5, .secondary-back h6  {color: var(--default-white); }

.whiteborder {border: 2px solid white; padding: 3vw; }
.circle img {border-radius: 50%;}

a.whitebutton {
	color: white;
	background: transparent;
    font-family: var(--body-font-family);
	letter-spacing: 3px;
	border-radius: 0;
	border: 2px solid white;
}
.whitebutton:hover {background: white; color: var(--primary-color);   border: 2px solid var(--secondary-color);}

/************ ALTERNATE ROWS ************/
/**** Create a nice looking table with alternating rows *****/
.alternaterows td { padding: 5px 10px;}
.alternaterows tr:nth-child(even) {background: #fff; border-bottom: 1px solid #ddd;}
.alternaterows tr:nth-child(odd) {background: #e8e8e8; border-bottom: 1px solid #ddd;}


/************ TOP HEADER TABLE ************/
.topheadertable td, .leftheadertable td { border: 1px #333 solid; padding: 5px 10px;}
.topheadertable tr:first-child { background: #333; color: white; font-weight: bold; }
.leftheadertable td:first-child { background: #333; color: white; font-weight: bold; }


.alternaterows.topheadertable td, .alternaterows.leftheadertable td { border: none; }
.alternaterows.topheadertable tr:last-child { border-bottom: 1px #333 solid; }
.alternaterows.topheadertable tbody, .alternaterows.leftheadertable tbody { border: 1px #333 solid; }

/************ TABLES ************/
table {width: auto;}
.fancytable th {color: white; padding: 5px; background: #333333; border: 1px solid #333333;}
.fancytable td {padding: 5px 10px; border: 1px solid #333333;}

 
.mce-edit-table .equaltable { width: 100%; display: table; table-layout: fixed;}
.mce-edit-table table.flextable, .flextable tbody, .flextable tr { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-around;}
.equaltable td {width: 2%;}

 
@media only screen and (max-width: 50.99rem){ 
 	.equaltable, .equaltable div, table.flextable, table.flextable div, .fancytable, .fancytable div, .fancytable tr, .fancytable td, .equaltable, .equaltable td, table.flextable td, table.flextable tbody, table.flextable tr, .equaltable tbody, .equaltable tr{ display: block; table-layout:auto; width: 100%; border: none; margin: 0;}
 	.equaltable img { display: block; margin: 0 auto; width: 100%;}
}

.mce-content-body {
	--heading-color: var(--primary-color);
	--heading-font-family: var(--title-font-family);

	--none: none;
	--null: 0;

	--normal-font-weight: 400;
    --bold-font-weight: 700;

	--font-normal-variant: normal;
	--font-small-caps: small-caps;
	--font-all-small-caps: all-small-caps;

	--text-transform-cap: capitalize;
	--text-transform-upper: uppercase;
	--text-transform-lower: lowercase;
	--text-transform-none: none;
	--text-transform-full: full-width;

	--standard-line-height: 1.3;
	--standard-text-margin: .75rem 0;
	--standard-text-padding: 0;
	
	--title-border-bottom: 1px solid var(--secondary-color);

	--h1-size: 3.5rem;
    --h2-size: 2.5rem;
    --h3-size: 2rem;
    --h4-size: 2rem;
    --h5-size: 1.75rem;
    --h6-size: 1.5rem;

	--h1-color: var(--primary-color);
	--h1-font-family: var(--title-font-family);
	--h1-font-size: var(--h1-size);
	--h1-font-weight: var(--normal-font-weight);
	--h1-font-variant-caps: var(--font-normal-variant);
	--h1-text-transform: var(--text-transform-none);
	--h1-line-height: var(--standard-line-height);
	--h1-margin: var(--standard-text-margin);
	--h1-padding: var(--standard-text-padding);
	--h1-border-bottom: var(--none);
	--h1-border-radius: var(--null);
	--h1-background: var(--none);

	--h2-color: var(--heading-color);
	--h2-font-family: var(--title-font-family);
	--h2-font-size: var(--h2-size);
	--h2-font-weight: var(--normal-font-weight);
	--h2-font-variant-caps: var(--font-small-caps);
	--h2-text-transform: var(--text-transform-none);
	--h2-line-height: var(--standard-line-height);
	--h2-margin: var(--standard-text-margin);
	--h2-padding: var(--standard-text-padding);
	--h2-border-bottom: var(--none);
	--h2-border-radius: var(--null);
	--h2-background: var(--none);

	--h3-color: var(--heading-color);
	--h3-font-family: var(--title-font-family);
	--h3-font-size: var(--h3-size);
	--h3-font-weight: var(--normal-font-weight);
	--h3-font-variant-caps: var(--font-normal-variant);
	--h3-text-transform: var(--none);
	--h3-line-height: var(--standard-line-height);
	--h3-margin: 0 0 10px 0;
	--h3-padding: var(--standard-text-padding);
	--h3-border-bottom: var(--title-border-bottom);
	--h3-border-radius: var(--null);
	--h3-background: var(--none);

	--h4-color: var(--heading-color);
	--h4-font-family: var(--body-font-family);
	--h4-font-size: var(--h4-size);
	--h4-font-weight: var(--normal-font-weight);
	--h4-font-variant-caps: var(--font-normal-variant);
	--h4-text-transform: var(--none);
	--h4-line-height: var(--standard-line-height);
	--h4-margin: var(--standard-text-margin);
	--h4-padding: var(--standard-text-padding);
	--h4-border-bottom: var(--none);
	--h4-border-radius: var(--null);
	--h4-background: var(--none);

	--h5-color: var(--default-white);
	--h5-font-family: var(--title-font-family);
	--h5-font-size: var(--h5-size);
	--h5-font-weight: var(--normal-font-weight);
	--h5-font-variant-caps: var(--font-normal-variant);
	--h5-text-transform: var(--none);
	--h5-line-height: var(--standard-line-height);
	--h5-margin: var(--standard-text-margin);
	--h5-padding: .5rem;
	--h5-border-bottom: var(--none);
	--h5-border-radius: .2rem;
	--h5-background: var(--primary-color);

	--h6-color: var(--heading-color);
	--h6-font-family: var(--body-font-family);
	--h6-font-size: var(--h6-size);
	--h6-font-weight: var(--normal-font-weight);
	--h6-font-variant-caps: var(--font-normal-variant);
	--h6-text-transform: var(--text-transform-upper);
	--h6-line-height: var(--standard-line-height);
	--h6-margin: var(--standard-text-margin);
	--h6-padding: var(--standard-text-padding);
	--h6-border-bottom: var(--none);
	--h6-border-radius: var(--null);
	--h6-background: var(--none);
}

a.rotator-link {
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16/9;
    width: 50%;
    border: 2px solid rgb(0, 0, 0);
    background: rgba(241, 241, 241, 0.75);
    font-size: 1.75rem;
	border-radius: 1rem;
	backdrop-filter: blur(2px);
	margin: 2rem auto 1rem auto;
 }

.mce-content-body .rotator-link::after {
    content: 'Rotator Link';
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: clamp(2rem, 2vw, 4rem);
   	color: red;
}