/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
 *,::after,::before{
     box-sizing:border-box 
}
 html{
     font-size:18px;
     line-height:1.4;
     -webkit-text-size-adjust:100%;
     -moz-tab-size:4;
     tab-size:4 
}
 body{
     margin:0;
     font-family:alwyn-new-web,Verdana,system-ui,-apple-system,'Segoe UI',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji' 
}
 hr{
     height:0;
     color:inherit 
}
 abbr[title]{
     text-decoration:underline dotted 
}
 b,strong{
     font-weight:bolder 
}
 code,kbd,pre,samp{
     font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;
     font-size:1em 
}
 small{
     font-size:80% 
}
 sub,sup{
     font-size:75%;
     line-height:0;
     position:relative;
     vertical-align:baseline 
}
 sub{
     bottom:-.25em 
}
 sup{
     top:-.5em 
}
 table{
     text-indent:0;
     border-color:inherit 
}
 button,input,optgroup,select,textarea{
     font-family:inherit;
     font-size:100%;
     line-height:1.15;
     margin:0 
}
 button,select{
     text-transform:none 
}
 [type=button],[type=reset],[type=submit],button{
     -webkit-appearance:button 
}
 ::-moz-focus-inner{
     border-style:none;
     padding:0 
}
 :-moz-focusring{
     outline:1px dotted ButtonText 
}
 :-moz-ui-invalid{
     box-shadow:none 
}
 legend{
     padding:0 
}
 progress{
     vertical-align:baseline 
}
 ::-webkit-inner-spin-button,::-webkit-outer-spin-button{
     height:auto 
}
 [type=search]{
     -webkit-appearance:textfield;
     outline-offset:-2px 
}
 ::-webkit-search-decoration{
     -webkit-appearance:none 
}
 ::-webkit-file-upload-button{
     -webkit-appearance:button;
     font:inherit 
}
 summary{
     display:list-item 
}
/* site styles - Soleil, Textbook New */
 body{
     background-color:#f8faf9 
}
 a{
     color:#303030 
}
 a.button,button,[type=button],[type=reset],[type=submit]{
     box-shadow:4px 4px 10px #303030;
     padding:11px 18px;
     text-decoration:none 
}
 button,[type=button],[type=reset],[type=submit]{
     background-color:#01a1b1;
     color:white 
}
/*.teal class*/
 div#wrapper{
     margin:auto;
     max-width:1280px;
     min-width:320px;
     padding:0 
}
 div#body{
     background-color:white;
     margin:0;
     padding:0 
}
 footer{
     margin-top:36px 
}
 footer>div{
     display:inline-block;
     padding:0 26px;
     vertical-align:top 
}
 h1{
     font-size:2.5em;
     font-weight:600 
}
 h1,h2,h3,h4{
     color:#009faf;
     margin-bottom:0 
}
 hr{
     border:1px solid #009faf;
     margin:2px 0 0 0;
     padding:0 
}
 html{
     color:#303030 
}
 input,select,textarea{
     font-weight:100;
     padding:9px 
}
 input[type=submit]{
     border-color:#777;
     cursor:pointer 
}
 nav{
     background-color:#eef0ef;
     min-height:36px 
}
 p{
     margin-top:0 
}
 ul.menu{
     list-style:none inside none;
     margin:0;
     padding:0 
}
 ul.menu>li{
     display:inline-block 
}
 ul.menu>li.help{
     display:none 
}
 ul.menu>li>a{
     text-decoration:none 
}
 ul.menu>li>a.active{
     text-decoration:underline 
}
 #accessibility-tools{
     visibility:hidden 
}
 #calendar{
     margin-top:18px 
}
 #contact,#foot-bar{
     font-size:.8rem;
     padding:.9rem 0 .7rem 
}
 #contact i.fa-envelope{
     font-size:.9rem 
}
 #email-top,#tel-top{
     display:inline-block 
}
 #tel-top{
     margin-left:26px 
}
 #email-top{
     margin-left:70px 
}
 #filter{
     margin-bottom:20px 
}
 #header{
     position:relative 
}
 #logo img{
     display: block;
     margin: auto;
    /* width:100% */
}
 #logo{
     display:inline-block;
     float:left;
    /* padding:9px 0 0 11px;
     */
     padding:10px;
     user-select:none;
    /* width:512px */
}
 #locations,#map_canvas{
     height:523px 
}
 #locations{
     float:left;
     overflow:scroll;
     overflow-x:visible;
     width:37.5% 
}
 #map_holder{
     float:right;
     width:61.3% 
}
 #mobile-menu{
     display:none;
     float:right;
     margin:32px 24px 0 0;
     width:50px 
}
 #mobile-menu div{
     background-color:#009faf;
     border-radius:4px;
     height:10px;
     margin-bottom:7px;
     transition:0.4s 
}
 #util,#gear,#help{
     float:right 
}
 #util,#help{
     font-weight:500;
     text-align:right 
}
 #util{
     font-size:.86rem;
     padding:52px 9px 7px 0;
     width:432px 
}
 #util a{
     color:#009faf;
     text-decoration:none 
}
 #util a:hover{
     text-decoration:underline 
}
 #util li{
     margin-left:13px 
}
 #util li:first-child{
     margin-left:0 
}
 #util i.fa-universal-access{
     font-size:.9rem 
}
 #help{
     height:47px;
     padding:11px 0;
     position:relative;
     width:432px 
}
 #help li{
     margin-right:24px 
}
 #help:before{
     position:relative;
     left:-100px;
     background:linear-gradient(to top left, #01a1b1 50%) 
}
 #menu{
     font-weight:600;
     text-align:center 
}
 #menu li{
     margin:0 0.9%;
     padding:13px 0 
}
 #menu li:first-child{
     margin:0 1.8% 0 0 
}
 #menu li.last{
     margin-right:0 
}
 #highlights{
     padding:0 2.3% 54px;
     text-align:center 
}
 #highlights div img {
     display: block;
     margin: auto;
     width: 75%;
}
 #highlights>h1{
     margin-bottom:54px 
}
 #partners{
     padding:0 2.3% 54px;
     text-align:center 
}
 #partners>h1{
     margin-bottom:54px 
}
 #partners>div{
     display:inline-block;
     padding:0 2.3% 
}
 #partners>div:first-of-type{
     width:17.6% 
}
 #partners>div:nth-of-type(2){
     width:43.1% 
}
 #partners>div:last-of-type{
     width:29.3% 
}
 #partners>div>img{
     max-width:100%;
     max-height: 100px;
}
 #ramp{
     position:absolute;
     left:-88px;
     top:0;
     width:0;
     height:0;
     border-top:47.5px solid transparent;
     border-right:88px solid #01a1b1 
}
 #resources{
     position:absolute;
     right:42px;
     top:25px;
     width:372px;
     z-index:9999 
}
 #resources>ul{
     list-style-type:none;
     padding:0 
}
 #resources>ul.teal{
     box-shadow:4px 4px 10px #303030 
}
 #resources>ul>li{
     position:relative;
     user-select:none;
     white-space:nowrap 
}
 #resources>ul>li.sky{
     cursor:pointer;
     margin-top:5px;
     padding:9px .5% 
}
 #resources>ul>li.grey{
     height:200px;
     margin-top:0;
     padding:18px;
     text-align:center 
}
 #resources>ul>li>i{
     color:#f26841;
     margin:0 13px 
}
 #resources select{
     margin:9px 0 35px 
}
 #next-slide,#prev-slide{
     color:#888;
     cursor:pointer;
     font-size:26px;
     font-weight:bold;
     margin-top:-32px;
     padding:18px;
     position:absolute;
     text-decoration:none;
     top:50%;
     user-select:none;
     width:auto;
     z-index:9990 
}
 #next-slide:hover,#prev-slide:hover{
     background-color:rgba(0,0,0,0.8);
     color:white 
}
 #next-slide{
     border-radius:4px 0 0 4px;
     right:0 
}
 #prev-slide{
     border-radius:0 4px 4px 0 
}
 #slide-mashup,#slideshow{
     position:relative 
}
 #dot-container{
     text-align:center;
     padding:10px;
     background:#eef0ef 
}
 #logo-miami{
     padding-top:27px;
     width:29% 
}
 #logo-miami-inner,#quick-links-inner{
     margin:0 auto;
     max-width:200px 
}
 #quick-links{
     width:35% 
}
 #contact-us{
     width:34% 
}
 #contact-us p{
     margin-bottom:9px 
}
 #contact-us .far{
     color:#009faf 
}
 #foot-bar{
     margin-top:26px;
     padding:12px 0 16px;
     text-align:center 
}
 #foot-bar li{
     margin:0 0.7% 
}
 #map-radius{
     margin-top:4px 
}
 #map-zip{
     width:120px 
}
 #search{
     display:none 
}
 #search-zip,#search-range,#search-btn{
     max-width:184px 
}
 #search-btn{
     box-shadow:4px 4px 10px #303030;
     color:white;
     padding:11px 36px 
}
 .button.b{
     margin-left:18px 
}
 .buttons{
     margin-top:26px;
     text-align:center 
}
 .circle{
     background-color:white;
     border-radius:50%;
     display:inline-block;
     font-size:1.4rem;
     padding:13px 0;
     text-align:center;
     width:54px;
     height:54px 
}
 .clear{
     clear:both 
}
 .cols2.field{
     display:inline-block;
     float:left;
     min-height:71px;
     padding-right:20px;
     width:49.8% 
}
 .cols2.fields{
     margin-right:-20px 
}
 .content{
     padding:0 2% 
}
 .criteria{
     margin-top:4px 
}
 .dot{
     background-color:#bbb;
     border-radius:50%;
     cursor:pointer;
     display:inline-block;
     height:16px;
     width:16px;
     margin:0 2px;
     transition:background-color:0.6s ease 
}
 .dot:hover,.dot.active{
     background-color:#777 
}
 .explain{
     font-style:italic 
}
 .fa-rss{
     visibility:hidden 
}
 .field{
     margin-bottom:10px 
}
 .field label{
     font-weight:bold 
}
 .field input,.field select,.field textarea{
     width:100% 
}
 .field input[type=radio],.field input[type=checkbox]{
     width:auto 
}
 .grey{
     background-color:#eef0ef 
}
 .grey a{
     text-decoration:none 
}
 .grey a:hover,.grey a:active,.teal a:hover,.teal a:active{
     text-decoration:underline 
}
 .hilite{
     background-color:#f1c40f 
}
 .inline{
     display:inline-block 
}
 .invalid{
     animation:wiggle .6s;
     color:red;
     font-weight:bold 
}
 .location{
     border-top:1px solid #777;
     cursor:pointer;
     font-size:.9rem;
     padding:4px 6px 
}
 .location.alt{
     background-color:#eef0ef 
}
 .location:hover{
     background-color:gainsboro 
}
 .logo{
     width:100% 
}
 .nobull{
     list-style-type:none 
}
 .normal{
     font-weight:normal!important 
}
 .nowrap{
     white-space:nowrap 
}
 .openable{
     display:block;
     margin-top:-10px;
     position:absolute;
     right:10px;
     top:50% 
}
 .red{
     color:#c20000 
}
 .rust{
     background-color:#f26841;
     color:white 
}
 .sky{
     background-color:#7ed1e1 
}
 .section-img{
     float:right 
}
 .services>div{
     display:inline-block;
     padding:2.3%;
     width:32% 
}
 .services>div>a{
     display:inline-block;
     padding:16px 18px;
     width:100% 
}
 .services>div>img{
     margin-bottom:8px;
     width:100% 
}
 .slide{
     opacity:0;
     position:absolute;
     top:0;
     transition:opacity 0.5s ease-in-out 
}
 .slide:first-of-type{
     position:relative 
}
 .slide.opaque{
     opacity:1 
}
 .slide p{
     margin-top:clamp(24px,5vw,62px) 
}
 .slide-button{
     font-size:clamp(13px, 2.2vw, 26px);
     font-weight:bold;
     padding:clamp(13px, 2.2vw, 26px);
     text-decoration:none 
}
 .slide-img{
     display:block 
}
 .slide-overlay{
     position:absolute;
     left:0;
     top:0;
}
 .small{
     font-size:.75rem 
}
 .smallwrap{
     display:inline-block 
}
 .sublabel{
     font-weight:normal 
}
 .teal{
     background-color:#01a1b1;
     color:white 
}
 .teal a{
     color:white 
}
 .title{
     background-color:#01a1b1;
     margin:3px 0 27px;
     padding:18px 0 36px;
     text-align:center 
}
 .title>h1{
     color:white 
}
 .title>p+h1{
     margin:-9px 0 18px 
}
 .title>p:first-child{
     color:white;
     font-size:larger;
     font-weight:bold;
     margin-bottom:0 
}
 .visited{
     border:2px solid #00c200 
}
 .visited:invalid{
     border-color:#c20000 
}
/******** FL Keys Mods ***************/
 h3 a {
     color: #009faf;
}
 #footer-nav {
     color: #009faf;
     margin-top: 0;
}
 .sunset-bg-img {
     background-image:url('img/fl-keys-sunset-bg-img.png');
    /* background-color:purple;
     */
     background-position: 50% 55%;
     min-height:300px;
     border-bottom:1px solid #009faf;
     display: block !important;
     color: white;
}
 .max-width {
     margin: 0 auto;
     max-width: 850px;
    /* border: solid 1px purple;
     */
}
 #yt-video {
     position: relative;
     padding-bottom: 56.25%;
    /* 16:9 video ratio */
     height: 0;
}
 #yt-video iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
 .brta-logo {
     text-align: left;
}
 .brta-logo img {
     margin: 20px;
     float: left;
    " 
}
 .tree-img {
     text-align: right;
}
 .tree-img img {
     margin: 20px;
     float: right;
     width: 160;
}
/* .sunset-bg-img {
     background-image:url('img/fl-keys-sunset-bg-img.png');
     background-repeat:no-repeat;
     background-size:contain;
     background-position:center;
     border: solid 2px black;
}
 .ratio-container {
     position:relative border: solid 2px purple;
}
 .ratio-container:after {
     display:block;
     height:0;
     width:100%;
     padding-bottom:50%;
     content:"" 
}
 .ratio-container>* {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100% 
}
 */


/* dd container */
.dropdown {
  display: block;
  position: relative;
  outline: none;
  margin: 10px;
  max-width: 500px;
  width: 100%;
}

/* button */
.dropbtn {
/*  padding: 12px 16px;*/
/*  color: white;
  background-color: #861cb9;*/
  cursor: pointer;
  transition: 0.35s ease-out;
}

/* dd content */
.dropdown .dropdown-content {
  position: absolute;
  top: 50%;
  background-color: #f7f7f7;
  min-width: 120%;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 100000;
  visibility: hidden;
  opacity: 0;
  transition: 0.35s ease-out;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  display: block;
  text-decoration: none;
  transition: 0.35s ease-out;
}
.dropdown-content a:hover {
  background-color: #eaeaea;
}

/* show dd content */
.dropdown:focus .dropdown-content {
  outline: none;
  transform: translateY(20px);
  visibility: visible;
  opacity: 1;
}
/*.dropbtn:hover,*/ .dropdown:focus .dropbtn {
  background-color: black;
  color: white;
}

/* mask to close menu by clicking on the button */
.dropdown .db2 {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
  cursor: pointer;
  z-index: 10;
  display: none;
}
.dropdown:focus .db2 {
  display: inline-block;
}
.dropdown .db2:focus .dropdown-content {
  outline: none;
  visibility: hidden;
  opacity: 0;
}

/* list test */
.condom-resources li {
list-style: none;
}






/******** end FL Keys Mods ***************/
 @keyframes wiggle {
     0% {
         transform: translate(2px) 
    }
     20% {
         transform: translate(-2px) 
    }
     40% {
         transform: translate(2px) 
    }
     60% {
         transform: translate(-2px) 
    }
     80% {
         transform: translate(2px) 
    }
     100% {
         transform: translate(-2px) 
    }
}
 @media only screen and (max-width: 1159px){
     #all-btn:after{
         content:' Locations' 
    }
     .medwrap{
         margin:18px 18px 18px 0 
    }
}
 @media only screen and (max-width: 979px){
     #util{
         padding-top:96px;
         width:288px 
    }
     #gear{
         width:100% 
    }
     #partners>div:first-of-type{
         width:26.1% 
    }
     #partners>div:nth-of-type(2){
         width:63.9% 
    }
     #partners>div:last-of-type{
         width:43.5% 
    }
     #resources{
         margin:12px auto;
         position:relative;
         right:0;
         top:0;
         width:95% 
    }
     .services>div{
         width:47% 
    }
     .services>div>a.button{
         padding:14px 
    }
     .slide-img{
         width:133% 
    }
}
 @media only screen and (max-width: 840px){
     #locations,#map_holder{
         float:none;
         width:100% 
    }
     #logo{
         width:420px 
    }
     #util,#help{
         display:none 
    }
     #menu{
         height:36px;
         transition:height 0.4s ease-out;
         overflow:hidden 
    }
     #menu.open{
         height:318px;
         transition:height 0.4s ease-in 
    }
     #menu ul{
         opacity:0;
         visibility:hidden;
         transition:visibility 1s,opacity 0.5s linear 
    }
     #menu.open ul{
         opacity:1;
         visibility:visible 
    }
     #menu ul.menu>li,ul.menu>li.help{
         display:block 
    }
     #menu li,#menu li:first-child{
         margin:0;
         padding:5px 0 
    }
     #mobile-menu{
         cursor:pointer;
         display:block 
    }
     #mobile-menu.open div{
         transform:rotate(180deg) 
    }
     #logo-miami,#quick-links{
         width:49% 
    }
     #logo-miami{
         padding-left:80px 
    }
     #logo-miami-inner{
         max-width:840px 
    }
     #contact-us{
         padding-left:100px;
         width:100% 
    }
     #partners>div:first-of-type{
         width:36.8% 
    }
     #partners>div:nth-of-type(2){
         width:90% 
    }
     #partners>div:last-of-type{
         width:61.2% 
    }
     #quick-links p{
         margin-bottom:0 
    }
     .cols2.field{
         display:block;
         float:none;
         padding-right:0;
         width:100% 
    }
     .cols2.fields{
         margin-right:0 
    }
     .section-img{
         float:none;
         margin:0 auto;
         max-width:390px 
    }
     .section-img>img{
         width:100% 
    }
}
 @media only screen and (max-width: 640px){
     #logo{
         width:375px 
    }
     #mobile-menu{
         margin:27px 21px 0 0 
    }
     h1{
         font-size:2.3rem 
    }
     #logo-miami{
         padding-left:40px 
    }
     #contact-us{
         padding-left:60px 
    }
     .services>div{
         width:85% 
    }
     .smallwrap{
         margin-top:18px 
    }
}
 @media only screen and (max-width: 512px){
     #logo{
         width:320px 
    }
     #mobile-menu{
         margin:22px 18px 0 0 
    }
     h1{
         font-size:2rem 
    }
     #logo-miami,#quick-links{
         width:100% 
    }
     #logo-miami,#contact-us{
         padding:9px 0 0 
    }
     #logo-miami-inner{
         max-width:180px;
    }
     #logo-miami-inner,#contact-us-inner,#quick-links-inner{
         text-align:center 
    }
     #contact-us-inner{
         margin:0 auto;
         max-width:350px 
    }
     .services>div{
         padding-bottom:18px 
    }
}
 @media only screen and (max-width: 444px){
     #email-top,#tel-top{
         margin-left:9px 
    }
     #logo{
         width:280px 
    }
     #mobile-menu{
         margin:18px 15px 0 0 
    }
     h1{
         font-size:1.8rem 
    }
}
 @media only screen and (max-width: 370px){
     #contact{
         font-size:.73rem 
    }
     #logo{
         max-width:255px 
    }
     #mobile-menu{
         margin:14px 10px 0 0;
         width:45px 
    }
     .services>div>a.button{
         padding:11px 
    }
     .services>div>img{
         margin-bottom:4px 
    }
}