@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:400&display=swap");

html,
body {
   margin: 0;
   padding: 0;
   box-shadow: unset;
}

body > main {
   padding-top: 151px;
   display: flex;
   flex-direction: column;
}

#locations-description {
   max-width: 75%;
}

#map-container {
   all: unset;
   display: block;
   width: 100%;
   margin-bottom: 10px;
}

#map {
   height: 75vh;
   width: 89% !important;
   border-radius: 10px;
   box-shadow: 0.3em 0.3em 1em #000;
   margin-right: auto;
   margin-left: auto;
   font-family: "Josefin Sans, Arial, sans-serif";
}

#map .gm-style-iw.gm-style-iw-c {
   min-width: 275px;
}

#map .gm-style-iw-d {
   max-width: 100% !important;
}

#map .dOuter {
   margin-top: 1px;
   opacity: 0.9;
   background-color: #854F0B;
   border: 2px solid #FAC775;
   color: #000000;
   border-radius: 5px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
   cursor: pointer;
   text-align: center;
   margin-left: 2px;
}

#map .dInner {
   font-size: 1.3vw;
   padding-left: 10px;
   padding-top: 5px;
   background-color: #854F0B;
   line-height: 15px;
   margin: 5px;
   color: #FAEEDA;
}

#map .dInstructionOuter {
   margin-top: 1px;
   background-color: #854F0B;
   border: 2px solid #FAC775;
   color: black;
   border-radius: 5px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
   margin-bottom: 2px;
   text-align: center;
   margin-left: 2px;
   font-size: 1.3vw;
}

#map .dInstructionInner {
   padding-top: 5px;
   text-align: center;
   background-color: #854F0B;
   line-height: 15px;
   margin: 5px;
   color: #FAEEDA;
}

/* Close button */
#map button.gm-ui-hover-effect {
   opacity: 1;
}

/* Cluster marker */
#map .cluster > div > span {
   display: flex;
   justify-content: flex-end;
   outline: none;
}

#map .cluster > img {
   width: 52px;
   height: auto;
}

/* Position the number inside the circle */
#map .cluster > div > span {
   line-height: 18px;
   padding-right: 7px;
}

.IWdiv {
   background-color: #f7efb7;
   border-radius: 5px;
   font-size: 15px;
   transition: all 0.5s;
   z-index: 1000; /* make sure orange border color stays visible */
   border: 1px solid hsla(12, 95%, 47%, 0.93);
   margin-bottom: 3px;
   margin-left: 2px;
}

.IWp {
   color: #f7efb7;
   -webkit-text-fill-color: #f7efb7;   /* polyfill for Safari bug */
   background-color: #fc3903;
   border-radius: 3px;
   margin-top: 0px;
   margin-bottom: 2px;
   text-align: center;
   padding-top: 7px;
   padding-bottom: 3px;
   padding-right: 3px;
   padding-left: 3px;
   font-size: 20px;
}

.IWul {
   list-style: none;
   padding: 1px;
   margin: 5px;
}

.IWul li {
   margin-bottom: 3px;
}

.IWliName {
   text-align: left;
   padding: 1px;
   text-transform: uppercase;
   font-size: 16px;
   font-weight: bold;
}

.IWliPhone {
   text-align: left;
   padding: 1px;
   font-size: 15px;
}

.IWliNotes {
   text-align: left;
   padding: 1px;
   margin-left: 12px;
   font-size: 15px;
   margin-bottom: 4px;
   margin-top: 5px;
}

.IWliEmail,
.IWliURL {
   text-align: left;
   padding: 1px;
   font-size: 15px;
}

.IWliEmail.mobile {
   display: none;
}

#locations-accordion-container .IWliURL a.cta,
.gm-style-iw-d .IWliURL a.cta,
#locations-accordion-container .IWliEmail a.cta,
.gm-style-iw-d .IWliEmail a.cta,
#locations-accordion-container .IWliPhone a.cta,
.gm-style-iw-d .IWliPhone a.cta {
   color: #fff;
   background-color: #3b3a37;
   background-repeat: no-repeat;
   border-radius: 5px;
   display: inline-block;
   margin-right: 7px;
   padding: 8px 10px 6px 8px;
   text-decoration: none;
}

#locations-accordion-container a.cta:hover,
.gm-style-iw-d a.cta:hover {
   background-color: #554e4e;
}

#locations-accordion-container a.cta span,
.gm-style-iw-d a.cta span {
   margin-right: 10px;
}

#locations-accordion-container .IWliURL a.cta,
.gm-style-iw-d .IWliURL a.cta {
   padding-left: 35px;
}

.IWliURL a.cta { 
   background-image: url('../images/icons/calendar.png');
   background-repeat: no-repeat;
   background-size: 16px;
   background-position: 9px 6px;
}

@media only screen and (-o-min-device-pixel-ratio: 5/4),
       only screen and (-webkit-min-device-pixel-ratio: 1.25),
       only screen and (min-device-pixel-ratio: 1.25),
       only screen and (min-resolution: 1.25dppx) {
   .IWliURL a.cta { 
      background-image: url('../images/icons/calendar@2x.png');
   }
}

@media only screen
  and (min-device-width: 375px)
  and (max-device-width: 667px)
  and (-webkit-min-device-pixel-ratio: 2) {
   #locations-accordion-container a.hover-underline,
   .gm-style-iw-d a.hover-underline {
      display: none;
   }
}
/* link styling */
.IWdiv a {
   text-decoration: none;
   font-size: 16px;
   color: #000;
   position: relative;
}

.IWliURL a {
   text-decoration: underline;
}

/* link styling */
.IWdiv a:hover {
   color: #000;
}

/* link styling */
.IWdiv a:hover:before {
   visibility: visible;
   -webkit-transform: scaleX(1);
   transform: scaleX(1);
}

/* Section 3: the container holding the unordered list holding the list items holding the state <divs/> */
#locations-accordion-container {
   display: block;
   border-radius: 6px;
   padding: 10px 7px 20px 7px;
   min-width: 150px;
   width: 89%;
   text-align: left;
   overflow: hidden;
   height: auto;
   margin-left: auto;
   margin-right: auto;
}

/*----------------------------------------------*/
/* third section styling                        */
/*----------------------------------------------*/
/* Title verbiage ("Beaches where Sand Helper Wheelchairs can be Found */
#locations-accordion-container > h3 {
   padding-top: 0.5em;
   text-decoration: none;
   margin-block-end: 0em;
}

/* centering the div that holds the states <uls/> */
#locations-accordion-container > div {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
}

/* the unordered list holding the list items holding the state <divs/> */
#locations-accordion-container > div > ul {
   list-style-type: none;
   position: relative;
}

/* the list items holding the state <divs/> */
#locations-accordion-container > div > ul > li {
   float: left;
   width: 100%;
   text-align: left;
}

/* styling for the state header */
#locations-accordion-container > div > ul > li > h4 {
   text-align: center;
   background-color: hsla(12, 95%, 47%, 0.93);
   color: rgb(250, 245, 198);
   border-radius: 4px;
   box-shadow: 0.1em 0.1em 0.3em #000;
   padding: 7px;
   padding-top: 8px;
   font-size: 20px;
   margin-block-start: 0.1em;
   margin-block-end: 0.1em;
}

.accordion {
   list-style-type: none;
   position: relative;
   padding: 0px 0em;
}

.inner-accordion {
   border-bottom: 1px solid #d8d8d8;
   padding-top: 15px;
   padding-bottom: 15px;
   padding-left: 4px;
   background-color: #f7f7f7;
   box-shadow: 0.1em 0.1em 0.3em #000;
   border-radius: 5px;
   transition: all 0.75s;
}

#locations-accordion-container .IWul {
   padding: 4px;
}

/* the email address and click for info, pricing and reservations line */
#locations-accordion-container a {
   color: black;
}

/* the name of the beach */
#locations-accordion-container > div > ul > li > div > div > div > a {
   color: black;
}

/* the name of the beach */
#locations-accordion-container
   > div
   > ul
   > li
   > div
   > div
   > div
   > a:hover {
   cursor: pointer;
}

.beachline {
   display: flex;
}

/* question and answer container */
.accordion-container {
   color: rgb(0, 0, 0);
   font-weight: bold;
   font-size: 16px;
   transition: all 0.75s;
   flex: 20 20 auto;
}

/* The rental info  */
.accordion-content {
   font-family: "Karla", monospace;
   font-weight: 400;
   font-size: 15px;
   display: visible;
   padding-right: 10px;
   transition: all 0.75s;
   margin-left: -20px; /* Artificially centers the content inside the entire accordion width */
}

/* font size of state line  */
#locations-accordion-container > div > ul > li > div > div > div > a {
   font-size: 20px;
}

[role="button"] {
   cursor: pointer;
}

/* plusMinus button styling */
.accordion-toggle-btn {
   color: rgb(250, 245, 198);
   background: hsla(12, 95%, 47%, 0.93);
   width: 20px;
   height: 20px;
   position: relative;
   font-size: 14px;
   border-radius: 50%;
   cursor: pointer;
   border: 0;
   outline: 0;
   padding: 0;
   top: -2px;
   transition: all 0.75s;
}

/* plusMinus button styling  on hover */
.accordion-toggle-btn {
   cursor: pointer;
}

.plus,
.minus {
   color: rgb(250, 245, 198);
   padding-top: 3px;
   width: 20px;
   height: 20px;
   line-height: 15px;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   text-align: center;
   /* box-sizing: border-box; */
   transition: 0.5s all ease-out;
}

.plus {
   opacity: 1;
   transform: rotate(0deg);
}

#locations-accordion-container
   > div
   > ul
   > li
   > div
   > div
   > button.active
   .plus {
   opacity: 0;
   transform: rotate(90deg);
}

.minus {
   opacity: 0;
   transform: rotate(-90deg);
}

#locations-accordion-container
   > div
   > ul
   > li
   > div
   > div
   > button.active
   .minus {
   opacity: 1;
   transform: rotate(0deg);
}
/*
    divs that choose the styling of the Google Maps styling
 */
#style1 {
   border-radius: 50%;
   margin-left: 12px;
   margin: 5px;
   margin-top: 2px;
   border: 4px solid hsla(12, 95%, 47%, 0.93);
   height: 5vh;
   width: 5vh;
   transition: all 0.25s;
}

#style2 {
   border-radius: 50%;
   margin-left: 12px;
   margin: 5px;
   border: 2px solid black;
   height: 5vh;
   width: 5vh;
   transition: all 0.25s;
}

#style3 {
   border-radius: 50%;
   margin-left: 12px;
   margin: 5px;
   border: 2px solid black;
   height: 5vh;
   width: 5vh;
   transition: all 0.25s;
}

/**************************/
/* really narrow screens  */
/**************************/
@media only screen and (max-width: 800px) {
   #map .gm-style-iw-d {
      margin-right: 12px !important;
   }
}

@media only screen and (max-width: 720px) {
   #locations-accordion-container
      > div
      > ul
      > li
      > div
      > div
      > div
      > div
      > div
      > ul
      > li:nth-of-type(4)
      > a {
      color: blue;
   }

   /* #map .IWliURL > a { */
      /* text-align: left; */
      /* padding: 1px; */
      /* margin-left: 12px; */
      /* font-size: 16px; */
      /* color: blue; */
   /* } */

   .IWliEmail.mobile {
      display: block;
   }

   .IWliEmail.desktop {
      display: none;
   }

   .dInstructionInner {
      display: none;
   }

   .dInner {
      display: none;
   }
}

@media only screen and (max-width: 720px) {
   #locations-description {
      max-width: 85%;
   }
}

@media only screen and (max-width: 490px) {
   #map {
      width: 92%;
   }

   .IWliName:not(:first-child) {
      margin-top: 20px;
   }

   .IWliURL,
   .IWliNotes {
      margin-left: 0px;
   }

   .IWliURL {
      margin-top: 7.5px;
   }

   #map .IWliURL > a {
      margin-left: 0px;
   }

   body > main {
      padding-top: 43px;
   }
   #locations-accordion-container ul {
      padding-left: 0px;
   }
   #locations-accordion-container > div > ul > li {
      width: 100%;
   }
}

@media only screen and (max-height: 500px) {
   body > main {
      padding-top: 43px;
   }
}

@media only screen and (max-width: 400px) {
   #map {
      width: 92%;
   }
}