body, html { background-color: #e2dfd8; color: #463933; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; font-size: 16px; margin: 0px; min-height: 100%; overflow-x: hidden; padding: 0px; }
a:hover, a:focus { transition: .2s; text-decoration: none; }
.container { padding: 0; width: 91%; }
.row { margin: 0; }
.row > div { padding: 0 1.5% 12px; }

#header_welcomePage { display: none; }

.sr-only {  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}
.hide { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

table.pick-a-project { font-size: 12px; width: 80%; margin: 0px auto; margin-bottom: 0.5rem;  }
table.pick-a-project td { text-align: center; width: 50%; }
table.pick-a-project td strong { color: #fff; }
td.pick-e88 { background-color: #8a307b; border: 1px solid #fff; padding: 0.5rem; }
td.pick-rosemary { background-color: #036998; border: 1px solid #fff; border-left: none; padding: 0.5rem; }
table.pick-a-project a { color: #fff; display: block; font-weight: normal; text-decoration: none; }
table.pick-a-project a:hover { color: #fff; font-weight: bold; text-decoration: none; transition: font-weight .2s; }
table.pick-a-project td { text-align: center; width: 50%; }
td.not-e88 { background-color: #fff; border: 1px solid #fff; color: #8a307b; padding: 0.5rem; }
td.not-rosemary { background-color: #fff; border: 1px solid #fff; border-left: none; color: #036998; padding: 0.5rem; }

.pick-prompt { color: #fff; font-size: 12px; letter-spacing: 1px; margin: 0; padding: 0; padding-bottom: 0.5rem; text-align: center; text-transform: uppercase; }
.pick-reset { color: #fff; font-size: 12px; letter-spacing: 0px; margin: 0;  margin-bottom: 1.5rem; padding: 0; text-align: center; text-transform: none; }
.pick-reset a { color: #fff; font-size: 12px; }
.pick-reset a:hover { color: #fff; font-size: 12px; }

.e88-choice { background-color: #8a307b; padding: 2rem; font-size: 125%; color: #fff; text-align: center; margin: 1rem 0; }
.e88-choice a { color: #fff; text-decoration: none; }
.e88-choice a:hover { color: #fff; text-decoration: underline; }
.rosemary-choice { background-color: #036998; padding: 2rem; font-size: 125%; color: #fff; text-align: center; }
.rosemary-choice a { color: #fff; text-decoration: none; }
.rosemary-choice a:hover { color: #fff; text-decoration: underline; }

h1,h2,h3,h4,h5,h6 { margin: 0; }
h2 {
     font-family: century-gothic, sans-serif;
     font-size: 40px;
     font-style: normal;
     font-weight: 700;
     line-height: 40px;
     margin-bottom: 40px;
     text-transform: uppercase;
     color: #89307A;
}
h3 {
     color: #89307A;
     text-transform: uppercase;
     font-size: 24px;
     line-height: 25px;
     font-weight: 700;
     margin-bottom: 10px;
}
h4 { color: #5b5d3f; font-size: 20px; padding-bottom: 10px; }
.e88-schedule { color: #8a307b; font-size: 1.5rem; font-weight: bold; text-align: center; }
.e88-schedule span { display: block; font-size: 80%; font-weight: normal; }
.rosemary-schedule { color: #036998; font-size: 1.5rem; font-weight: bold; text-align: center; }
.rosemary-schedule span { display: block; font-size: 80%; font-weight: normal; }
.rosemary-goal { color: #036998; font-size: 100%; font-weight: normal; margin-top: 10px; text-align: center; }
.rosemary-goal span { display: block; font-size: 1.5rem; font-weight: bold; }

p, ul li {
     margin-bottom: 1.6rem; 
     font-family: 'Fira Sans', sans-serif;
     font-style: normal;
     font-size: 14px;
     line-height: 20px;
     color: #000000;
     font-weight: normal;
}

.b-500 {
     font-weight: 500;
     text-align: center;
}

.b-500 a {
     font-weight: 700;
     text-align: center;
     text-decoration: none;
     color: #036998;
}

ul { margin-bottom: 1.5rem; padding-left: 15px; }
ul li { margin-bottom: 3px; }
hr.e88 { border-bottom: 2px solid #8a307b; transform: skewX(45deg); }
hr.rosemary { border-bottom: 2px solid #036998; transform: skewX(45deg); }
.highlight { color: #5b5d3f; font-weight: bold; }
.translate { text-align: center; margin-top: 1rem; }

a { color:#463933; text-decoration: underline; }
a:hover { color: #5a5d40; }
.button { background-color: #8a307b; border-radius: 14px; border: 0; color: #fff; display: inline-block; letter-spacing: .05em; margin-top: 12px; padding: 4px 16px; transition: background-color .2s; }
.button:hover { background-color: #036998; color: #fff; }
.button:focus { color: #fff; }

.link {
     color: #00A0E4;
     text-decoration: none;
}
.link:hover {
     text-decoration: underline;
     color: #0487be;
}


/* MAIN SCREEN */
div#screen { height: 100%; left: 0%; position: absolute; width: 100%; }
img.logo { display: block; width: 100%; max-width: 175px; margin:0px auto; padding: 20px 20px 0 20px; }

/* MAIN AREA - RIGHT SIDE */
#mainArea { float: left; height: 100%; overflow: hidden; position: relative; width: 100%; }
#mainArea > img { height: 100%; position: absolute; transition: left .6s, margin-left 1.1s ease-out .5s; width: 106%; }
#topArea { margin-bottom: 18px; position: relative; text-align: center; top: 14px; }
#topArea h1 { color: #463933; font-weight: bold; font-size: 1.25em; margin-left: 10px; line-height: 1.1em; margin-bottom: 10px; }
#topArea ul { line-height: 14px; margin: 0 auto; width: 80%; }
#topArea li { background-color: #AB5C9E; border-radius: 8px; cursor: pointer; display: inline-block; height: 16px; margin: 0 3px; transition: background-color .2s, height .45s; vertical-align: middle; width: 16px; }
#topArea li:hover { background-color: #89307A; transform: scale(1.3); }
#topArea li.showing { background-color: #89307A; height: 20px;}



/* SLIDE AREA */
#slides { height: 90%; position: relative; top: 32px; transition: transform .65s; width: 100%; }
#slides > div { height: 90%; left: 0; position: absolute; transition: left 0.8s, transform 0.5s; }
.slide { color: #aaa; float: left; height: 100%; }
.slide > div { background-color: rgba(255,255,255,1); color: #463933; height: 100%; margin: 0 auto; overflow-x: hidden; overflow-y: auto; padding: 36px 2.5%; width: 80%; position: relative;} 
.slide img { margin: 0 auto; display: block; width: 100%; transition: box-shadow .3s; }
.slide img.icon { width: 100%; max-width: 55px; float: left; margin: 0 10px 10px 0; border: 0; }
.slide img.large { box-shadow: 0 4px 8px 0 rgba(8,112,145, 0.2), 0 6px 20px 0 rgba(8,112,145,.19); max-width: 85px; float: left; margin: 0 15px 15px 0; }
.slide img.smallicon { float: left; padding-right: 10px; width: 100%; max-width: 35px; border: 0; }
table.icontable td { padding: 1em 0 1em 1em; }
.slide img { margin: 0 auto; display: block; width: 100%; transition: box-shadow .3s; }
.slide li { margin-left: 15px; font-family: 'Fira Sans', sans-serif;}
.listwrap { margin-left: 65px; }
.listitem { color: #003865; font-weight: bold; padding-top: 15px; }



.hero {
     background-image: url('../images/hero-bg.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     height: 280px !important;
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     align-items: center;
     padding: 30px 0;
     height: 320px !important;

}

.hero .large-text {
     display: block;
     width: 100%;
     text-align: center;
     text-transform: uppercase;

     font-family: century-gothic, sans-serif;
     font-size: 96px;
     font-style: normal;
     font-weight: 700;
     color: #89307A;
     text-shadow: 0px 4px 4px #00000040;;

}

.hero .text-banner {
     display: block;
     width: 100%;
     text-align: center;
     background: rgba(137, 48, 122, 0.65);
     padding: 20px 10%;
}
     

.hero .text-banner p {
     margin-bottom: 0;
     color: #FFF;
     font-family: century-gothic, sans-serif;
     font-size: 35px;
     font-style: normal;
     font-weight: 700;
     line-height: 40px;
     text-align: center;
     text-shadow: 0px 4px 4px #00000080;
     max-width: 640px;
     margin: auto;
}

.pad-0 {
     padding: 0 !important;
}

.mb-0 {
     margin-bottom: 0 !important;
}

.default-pad {
     padding: 36px 2.5%;
}

/* The Modal (background) */
.modal {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 1; /* Sit on top */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
   
/* Modal Content/Box */
.modal .modal-content {
    background-color: #FFF3FD;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-height: 65vh;
    overflow-y: scroll;
    position: relative;
    border-radius: 0px;
}

.modal .sublinks a {
     color: #8a307b;
     font-weight: bold;
     margin-bottom: 10px;
     display: block;
}

.modal .sublinks .accordion-header {
     font-size: 16px;
     padding: 0;
     padding-bottom: 5px;
}

.modal .sublinks .accordion-header:hover {
     color: #571f4d;
     border-color: #571f4d;
}

.modal .modal-content::-webkit-scrollbar {
     width: 10px;
}
   
/* Track */
.modal .modal-content::-webkit-scrollbar-track {
     background: #FFF3FD;; 
}
    
/* Handle */
.modal .modal-content::-webkit-scrollbar-thumb {
     background: #89307A; 
}
   
/* Handle on hover */
.modal .modal-content::-webkit-scrollbar-thumb:hover {
     background: #8a307b; 
}


/* The Close Button */
.modal .modal-content .close {
     color: rgb(65, 65, 65);
     font-weight: bold;
     font-size: 40px;
     line-height: 20px;
     opacity: 0.8;
     position: -webkit-sticky; /* Safari */
     position: sticky;
     right: 0;
     top: 0;
}

.modal .modal-content h3 {
     border-bottom: 3px solid #89307A;
     color: #89307A;
     display: inline-block;
     padding-right: 40px;
     padding-bottom: 5px;
     margin-bottom: 20px;
}

.modal .modal-content p {
     margin-bottom: 10px;
}

.ea-modal-link {
     cursor: pointer;
}

.modal .modal-content .bottom-border {
     padding-bottom: 10px;
     border-bottom: 2px solid #89307A;
}
   
.modal .close:hover,
.modal .close:focus {
     color: black;
     text-decoration: none;
     cursor: pointer;
}

.eis-list {
     display: flex;
     flex-wrap: wrap;
}

.eis-list li {
     width: 50%;
     margin: 0;
     padding-right: 40px;
     margin-bottom: 5px;
}

.eis-list li .modal-link {
     font-family: 'Fira Sans', sans-serif;
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
     line-height: 27px;
     text-decoration: none;
     border-bottom: 1px solid #000;
     padding-bottom: 2px;
} 

.eis-list li .modal-link:hover {
     cursor: pointer;

}

.resource-content p, .resource-content ul li {
     font-weight: 500;
}

.green-cta {
     display: block;
     width: 100%;
     padding: 20px;
     background-color: #A0A175;
     color: #FFF;
     text-transform: uppercase;
     font-family: 'Fira Sans', sans-serif;
     font-size: 20px;
     font-style: normal;
     font-weight: 700;
     line-height: 22px;
     text-decoration: none;
     border-radius: 5px;
     transition: 0.25s ease-in-out;
}

.green-cta:hover {
     text-decoration: none;
     background-color: #EFEFEF;
     color: #000;
     
}

.icon-flex {
     display: flex;
     align-items: flex-start;
     margin-bottom: 20px;
}

.icon-flex .flex-icon {
     width: 52px;
     height: auto;
     padding-right: 15px;
     margin: 0;
}

.icon-flex h4 {
     font-family: 'Fira Sans', sans-serif;
     color: #89307A;
     text-transform: uppercase;
     font-size: 16px;
     font-style: normal;
     font-weight: 700;
     line-height: 20px;
}

.icon-flex a {
     text-decoration: none !important;
}

.click-map {
     position: relative;
     min-width: 800px;
     margin-bottom: 20px;
}

.click-map .map-point {
     position: absolute;
     width: 2.7%;
     height: 5.6%;
     cursor: pointer;
}

.point-label {
     display: none;
}

.map-point-description {
     display: block;
     border: 2px solid #8a307b;
     border-radius: 10px;
     padding: 15px;
     font-size: 16px;
     font-weight: 500;
}

.map-point-description ul {
     margin-top: 10px;
     margin-bottom: 0;
}

/* MAP POINTS */
#mp-1 {
     top: 67%;
     left: 13%;
}
#mp-2 {
     top: 44%;
     left: 21%;
}
#mp-3 {
     top: 73%;
     left: 35.5%;
}
#mp-4 {
     top: 42%;
     left: 42%;
}
#mp-5 {
     top: 38%;
     left: 63%;
}
#mp-6 {
     top: 67%;
     left: 83.5%;
}

.bottom-banner {
     background-color: #89307A;
     padding: 40px 60px;
}

.bottom-banner p {
     font-family: century-gothic, sans-serif;
     font-size: 24px;
     font-style: normal;
     font-weight: 700;
     line-height: 30px !important;
     color: #FFF;
     margin: 0;
}

.bottom-banner a {
     color: #F5C3ED;
     text-decoration: none;
}

.bottom-banner a:hover {
     color: #d891cc;
     text-decoration: none;
}

/* Start Rollplot Styling */

/* Modal Window */
.close-modal { display: none; }
.modal-window { display: none; height: 100%; left: 0; position: fixed; top: -100%; transition: 0; width: 100%; z-index: 5000; }
.modal-window.showing { top: 0; transition: top 1s; }
.modal-window > button { background-color: rgba(0,0,0,.75); border: 0; cursor: pointer; display: block; height: 100%; left: 0; margin: 0; position: absolute; top: 0; width: 100%; }
.window-title { padding: 6px 10px; width: 90%; }
.modal-window > div { background-color: #fff; border: 1px solid #333; bottom: 50px; box-shadow: 4px 13px 28px 0 #111; left: 12%; margin: 0; overflow: auto; padding: 0 2% 28px; position: absolute; top: 40px; width: 76%; }
.modal-window > div .close-modal { background: 0; border: 0; font-size: 3em; line-height: .6em; position: absolute; right: 10px; top: 16px; }
.modal-window > div .close-modal span { left: -9999px; position: absolute; }
.modal-window :focus { border-radius: 2px; outline: 2px groove #ddd; }

#rollplot { position: relative; }
#rollplot h3 { background: #89307a; color: #fff; font-size: 1.8em; font-weight: 700; margin-bottom: 0; padding: 12px; text-transform: uppercase; }
#rollplot > div { background: #999; cursor: zoom-in; overflow: hidden; position: relative; }
#rollplot > div.zoomed { cursor: grab; }
#rollplot > div.dragging { cursor: grabbing; }
#rollplot > div > div { box-shadow: 0 0 28px 0 #666; position: relative; }
#rollplot img { width: 100%; }
#rollplot a { background: transparent; border: 0; display: none; height: 25%; left: 3%; position: absolute; top: 12.25%; transition: background .2s; width: 5.5%; }
#rollplot > div.zoomed a { display: block; }
#rollplot a:hover { background: rgb(255 136 255 / .3); }
#rollplot a:after { content: ""; position: absolute; transition: background .2s; }
#rollplot a:hover:after { background: rgb(255 136 255 / .3); }
#rollplot a:nth-of-type(2) { height: 26%; left: 13%; top: 2.5%; width: 5.75%; }
#rollplot a:nth-of-type(3) { height: 24%; left: 22%; top: 2.5%; width: 9.25%; }
#rollplot a:nth-of-type(4) { height: 24%; left: 31.5%; top: 2.5%; width: 5.5%; }
#rollplot a:nth-of-type(5) { height: 24%; left: 37.25%; top: 2.5%; width: 17.5%; }
#rollplot a:nth-of-type(6) { height: 13%; left: 44%; top: 35%; width: 7.75%; }
#rollplot a:nth-of-type(6):after { bottom: 100%; height: 38%; left: 0; width: 26%; }
#rollplot a:nth-of-type(7) { height: 20%; left: 38%; top: 56%; width: 6%; }
#rollplot a:nth-of-type(8) { height: 21%; left: 38%; top: 76.25%; width: 6%; }
#rollplot a:nth-of-type(9) { height: 18.5%; left: 52%; top: 29.5%; width: 4.75%; }
#rollplot a:nth-of-type(9):after { height: 23%; right: 100%; top: 0; width: 14%; }
#rollplot a:nth-of-type(10) { height: 43%; left: 87.5%; top: 33.5%; width: 9.25%; }
#rollplot a:nth-of-type(11) { height: 37%; left: 97%; top: 9%; width: 3%; }
#rollplot a:nth-of-type(11):after { height: 40%;  right: 100%; top: 0; width: 210%; }
#rollplot a span { left: -9999px; position: absolute; }

.rollplot-photo { background: #b08230 !important; color: #fff; }
.rollplot-photo h3 { color: #fff; margin-top: 28px; }
.rollplot-photo img { margin-top: 8px; width: 100%; }

#zoom-out { background: transparent; border: 0; color: #fff; margin: 12px 12px 0; position: absolute; right: 0; top: 0; transition: color .2s; }
#zoom-out i { margin-right: 3px; }
#zoom-out:hover { color: #ddd; }
#zoom-area { border: 1px dashed #89307a; opacity: 0; position: absolute; }

/* End Rollplot Styling */

.language-toggle {
     width: 100%;
     padding-top: 10px;
     margin: auto !important;
     overflow: visible !important;
}

/* Translator */
#google_translate_element2 {
     display: none;
 }
 
 #langaugeselectcont select {
     margin-left: 5%;
     width: 90%;
 }
 
 #langaugeselectcont label {
     margin-left: 5%;
     width: 90%;
     color: #FFF;
 }
 

/* MEDIA QUERIES */
@media screen and (max-width: 1310px) {
     #menu { width: 20%; }
     #mainArea { width: 80%; }
     .slide > div { width: 86%; margin: 0 auto; }
     a.arrow { font-size: 3em; left: -8px;}
     a.right-arrow { left: auto; right: -8px; }
     #contact-toggle { right: 80px; }
     .hero .text-banner {
          padding: 20px 7%;
     }
}

@media screen and (max-width: 1030px) {
     #menu { margin-left: -240px; width: 240px; }
     #menu div { height: 64%; }
     #mainArea { width: 100%; }
     img.logo { display: none; }
     #topArea { margin-left: 80px; margin-right: 80px; }
     #topArea h1 { font-size: 1.3em; }
     a#menu-toggle { display: block; }
     #contact-toggle { right: 20px; }
     .buttons button { right: 22px; }

     #slides { height: 84%; top: 36px; }
     .slide > div { width: 96%; }
     .slide p { line-height: 16px; }

     a.arrow { background-color: rgba(0,0,0,.5); bottom: 0; height: 8%; top: auto; width: 46%; }
     a.arrow:after { height: 108%; }
      
     /* Start Rollplot responsive styling */
     #rollplot h3 { font-size: 1.5em; padding: 8px 12px; }
     #rollplot > div { border: 1px solid #aaa; height: 441.25px !important; overflow-x: auto;  }
     #rollplot > div > div { margin: 0 !important;max-width: 8000%; width: 1800px !important; }
     #zoom-out { display: none !important; }

     .rollplot-photo > div { overflow: auto; }
     .rollplot-photo img { width: 1300px; }
     /* End Rollplot responsive styling */
}

@media screen and (max-width: 960px) {
     #lightbox img { max-width: 8000%; width: 160%; }


     .hero {
          height: 50vw !important;
     }

     .hero .large-text {
          font-size: 10vw;
          margin-bottom: 0;
     }

     .hero .text-banner p {
          font-size: 4vw;
          line-height: 6vw;
     }

     .click-map-col {
          overflow-x: scroll;
     }
}

@media screen and (max-width: 640px) {
     #slides { height: 75%; top: 85px; }
     .slide img { display:block; margin: 0 auto; }
     #topArea { margin-left: 0; margin-right: 0;  top: 60px; }
     #topArea h1 { font-size: 1.2em; line-height: 1em; margin: 8px auto; width: 94%; }
     #topArea ul { margin-top: 10px; }
     #topArea ul li { height: 14px; width: 14px;}
     #topArea ul li.showing { height: 18px; }

     img.logo { display: block; width: 50%; margin: 0 auto; padding-top: 15px;}
     a#menu-toggle { height: 32px; left: 16px; top: 16px; width: 32px; }
     a#menu-toggle span { margin: 5px auto; }
     a#menu-toggle.opened span:nth-of-type(1) { margin-top: 14px; }
     a#menu-toggle.opened span:nth-of-type(3) { margin-top: -18px; }
     #contact-toggle { font-size: .55em; height: 45px; right: 10px; top: 10px; width: 46px; }
     #contact-toggle .far { font-size: 2.3em; }
     #contact { width: 280px; }

     .buttons button { font-size: .7em; padding: 1px 6px 3px; right: 12px; top: 12px; }
     .buttons button .far { font-size: 2em; padding: 1px 0 0; }

     li { font-size: 14px; }
     .slide > div { padding: 12px 3%; }
     h2 { font-size: 1.5em; line-height: normal; margin-bottom: 20px;}
     #skipcontent { display: none; }

     .eis-list li {
          width: 100%;
     }

     .modal .modal-content {
          background-color: #FFF3FD;
          margin: 20% auto;
          padding: 15px;
          width: 90%;
          max-height: 70vh;
      }
      
}

@media screen and (max-width: 530px) {
     a.arrow { height: 44px; line-height: 0px; }
     a.arrow span { font-size: .6em; }
     #slides { height: 74%; } 
     #lightbox img { width: 250%; }
}

@media screen and (max-height: 715px) {
     /* #slides { height: 76%; } */
}

@media screen and (max-height: 595px) {
     #topArea h1, div#topArea ul { display: inline-block; margin: 0 14px; vertical-align: middle; }
     #topArea h1 { margin-bottom: 4px; }
     
     a#menu-toggle { height: 32px; left: 16px; top: 16px; width: 32px; }
     a#menu-toggle span { margin: 5px auto; }
     a#menu-toggle.opened span:nth-of-type(1) { margin-top: 14px; }
     a#menu-toggle.opened span:nth-of-type(3) { margin-top: -18px; }
     #contact-toggle { font-size: .55em; height: 45px; top: 10px; width: 46px; }
     #contact-toggle i { font-size: 2.5em; }
     a.arrow { font-size: 2.5em; }
}

@media screen and (max-height: 560px) {
     #topArea h1 { font-size: 1.1em !important; font-weight: 700; margin-bottom: 6px; }
     /* #slides { height: 55%; } */
}