/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');

/* @media all and (display-mode: standalone) {
  * {
    touch-action: pinch-zoom !important;
    -ms-touch-action: pinch-zoom !important;
  }
} */


html {
    margin: 0;
    background: #EEE;
    font-family: 'Montserrat', sans-serif;

}

body {
    height:100vh;
    margin: 0;
    display:flex; 
    flex-direction:column;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
}

#wrapper {
  display: block;
}

.betaversion {
    border: 0px solid red;
    background: rgb(245, 245, 147);
    height: 20px;
    color: #000;
    text-align: center;
    padding: 1%;
    font-weight: bold;
    font: 12px;
}

#header {
    border: 0px solid red;
    background: rgb(45,100,72);
    height: 70px;
    width: 100%;
    box-shadow: 0px 0px 5px 3px #444;
}
    .myTitle {
        color: #FFF;
        font-size: 1.2em;
        border: 0px solid yellow;
        font-weight: bold;
        font-family: 'Patua One', cursive !important;
        text-align: center;
        background: transparent;
        position: relative;
    }
    .heading {
      border: 1px solid transparent;
      text-align: center !important;
    }

    #header h4 {
        color: #FFF;
        margin: auto;
        padding-top: 1%;
        padding-bottom: 1%;
        text-align: center;
        border-bottom: 0px solid #FFF;
    }

#content {
    border: 0px solid #000;
    padding: 1%;
    
}

#mastermap {
    padding: 0;
    border: 0px solid #000;
    border-top: 0px solid #000;
    margin-top: 1.5%;
}
    #mastermap h2 {
        text-align: center;
    }
    #mastermap h5 {
        text-align: center;
        margin-top: -5px;
    }
    #MapURL {
        text-decoration: none;
        color: rgb(71, 114, 241);
        font-size: 0.9em;
    }


#footer {
    border: 0px solid #000;
    background: rgb(45,100,72);
    margin-top:auto;
}
    #footer p {
        color: #FFF;
        margin: auto;
        width: 60%;
        padding: 30px;
        text-align: center;
    }
    #footer a {
        color: #FFF;
    }
    #footer img {
        width: 10%;
        background: #FFF;
        margin-top: 1.5%;
        border-radius: 100px;
    }

.description {
    font-size: 12px;
}

/* Screen Adjustment */
@media only screen and (max-width: 600px) {
  .myTitle {
    font-size: 0.9em !important;
    margin-top: 22px !important;
    margin-left: -20px !important;
  }
    #footer p {
        font-size: 12px;
    }
    #footer img {
        transition: 0.2s;
        width: 10%;
    }
  }


  /* Main Content */

  header, .row {
    display: flex;  /* aligns all child elements (flex items) in a row */
    background: #dcdcdc;
    padding: 0.5%;
  }
  header > .col {
    background: rgb(226,225,225);
    padding: 0.2%;
    font-weight: bold;

  }
  .col {
    flex: 1;        /* distributes space on the line equally among items */
    border: 0px solid #000;
    text-align: center;
  }

  .col a {
    text-decoration: none;
    color: #547ac0;
  }
  .col a:hover {
    text-decoration: none;
    color: #6495ed;
  }


  #Sector {
      width: 100%;
      height: 45px;
      background: url('img/arrow.png') rgb(47, 96, 162);
            background-position: right;
            background-repeat: no-repeat;
            background-position-y: center;
            background-size: 40px;
      color: #FFF;
      font-size: 1.1em;
      font-weight: bold;
      outline: none !important;
      border: 0px;
      border-radius: 3px;
      padding: 0.5%;
      margin-top: 1.5%;
      -webkit-appearance: none;
      
  }
  #subSector {
      display: none;
      width: 100%;
      height: 45px;
      background: url('img/arrow.png') rgb(47, 96, 162);
            background-position: right;
            background-repeat: no-repeat;
            background-position-y: center;
            background-size: 40px;
      color: #FFF;
      font-size: 1.1em;
      font-weight: bold;
      outline: none !important;
      border: 0px;
      border-radius: 3px;
      padding: 0.5%;
      margin-top: 1.5%;
      -webkit-appearance: none;
  }


  .viewall {
      text-decoration: none;
  }

  .viewAllSecBtn {
    border: 0px solid rgb(13, 112, 224);
    color: #547ac0;
    background: none;
    font-size: 1em;
    font-family: inherit;
    -webkit-appearance: none;
    -webkit-border-radius: none;
    border-radius: 2px;
    outline: none !important;
    padding: 0;
  }

  #closeSectors {
      color: rgb(13, 112, 224);
      text-transform: capitalize;
      text-decoration: none;
      font-size: 1em;
      font-weight: bold;
      border: 0.5px solid rgb(15, 90, 175);
      padding: 1%;
  }


  #allSectors {
      display: none;
      margin-top: 1.5%;
  }

  .home {
      color: #FFF;
      font-size: 1em;
      text-decoration: none;
  }


/* ---- MOBIE MENU ---- */

.sidenav {
    height: 100%;
    width: 250px;
    /*idth: 0;*/
    position: fixed;
    z-index: 4;
    top: 0;
    left: -265px;
    border-top: 6px solid rgb(14,119,85);
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(235,237,247),1) 75%, rgba(54,60,83,1) 100%);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
        -webkit-box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.8); 
        box-shadow: 0px 0px 13px 2px rgba(0,0,0,0.8);
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    text-align: left !important;
    font-size: 18px !important;
    color: #666 !important;
    display: block;
    transition: 0.2s;
    font-weight: bold !important;
    font-family: 'Bebas Neue', cursive;
  }
  
  .sidenav a:hover {
    color: #f1f1f1;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 5px;
    font-size: 2em !important;
    margin-left: 50px;
    color: #222222 !important;
  }

  .openMenu {
      color: #FFF !important;
      border: 0px solid #000;
      text-decoration: none;
      font-size: 3em !important;
      border: 0px solid #FFF;
      transition: 0.5s;
      position: absolute;
      right: 10px;
      top: -4px;
  }
  .menuTxt {
    font-size: 0.8em !important;
  }

  .menColor {
      color: #000 !important;
      font-family: 'Bebas Neue', cursive;
  }

  .announc {
      text-align: center;
  }
  .announcList ul {
    list-style: none !important;
    margin-left: -10px;
  }
  .announcList li {
    list-style: none !important;
  }
  .announc-text {
    text-align: left;
    font-size: 14px;
    color: #000;
    font-style: normal;
    padding: 1%;
  }
  .announc-text > .past {
    color: rgb(239, 100, 100);
  }
  .announc-text > .newPost {
    color: rgb(89, 201, 81);
  }
  .subList {
    font-size: 0.8em !important;
    margin-left: -4%;
  }
  .details {
    font-weight: bold;
  }

  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }



  /* ---- WEATHER POP ---- */

.popweather {
    height: 100%;
    width: 300px;
    /*width: 0;*/
    position: fixed;
    z-index: 4;
    top: 0;
    right: -365px;
    border-top: 6px solid rgb(45,100,72);
    background: rgb(255,255,255);
  /*  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 75%, rgba(45,100,72,1) 100%); */
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    padding-left: 1.5%;
    padding-right: 1.5%;
        -webkit-box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.8); 
        box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.8);
  }
  
  .popweather a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    text-align: left !important;
    font-size: 18px !important;
    color: #666 !important;
    display: block;
    transition: 0.2s;
    font-weight: bold !important;
    font-family: 'Bebas Neue', cursive;
  }
  
  .popweather a:hover {
    color: #f1f1f1;
  }
  
  .popweather .closebtn {
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 2em !important;
    margin-left: 50px;
    color: #222222 !important;
  }

  .forecastTitle {
    font-family: 'Bebas Neue', cursive;
    text-align: center;
  }


  @media screen and (max-height: 450px) {
    .popweather {padding-top: 15px;}
    .popweather a {font-size: 18px;}
  }

  #overlay {
      background-color: #000;
      width: 100%;
      height: 100%;
      opacity: 0.6;
      display: none;
      position: absolute;
      left: 0px;
      top: 0px;
      transition: 0.2s;
      z-index: 2;
  }

  #onoff {  /*snow on/off text*/
    font-size: 0.8em !important;
    font-family: inherit !important;
    font-weight: normal !important;
  }


/* Menu List */
.menu {
  margin-left: -50px;
}

.menu ul {

}

.menu li {
  list-style: none;
  border-left: 0px solid tomato;
  padding: 0.5%;
}

.menu > h3 {
  font-family: 'Patua One', cursive !important;
  text-align: left;
  margin-left: 33px;
  color: rgb(47, 96, 162);
  border-bottom: 0px solid #444;
}



/* resources dropdown menu - start */
.resources-dropdown {
  display: none;
  position: absolute;
  left: 20px;
  background-color: #EEE;
  width: 210px;
  border: 0px solid red;
  border-left: 4px solid rgb(45,100,72);
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.2);
  z-index: 1;
}
.resources-dropdown a {
  color: #444 !important;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.resources-dropdown a:hover {background-color: #ddd;}
.res-dropdown:hover .resources-dropdown {display: block !important;}

.resources-dropdown:after{
    content:'';
    position:absolute;
    border:8px solid transparent;
    border-top:8px solid #DDD;
    top: -16px;
    left: 8px;
    transform: rotate(180deg);
  }
/* resources dropdown menu - end */




hr {
  width: 215px !important;
  border-top: 0.5px solid #444;
}

/*

#loading {
  background: rgba(45, 100, 72, 0.8);
  width: 100vh;
  height: 100vh;
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  transition: 0.2s;
  z-index: 4;
  color: white;
  touch-action: none;
}
.loader {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 1s linear infinite;
  touch-action: none;
}
.loaderWrapper {
  width: 50px;
  height: 50px;
  background-color: transparent;
  position: absolute;
  top: 30%;
  left: 20%;
  margin: -25px 0 0 -25px;
  touch-action: none;
}
.loaderWrapper p {
  color: #FFF;
  font-family: 'Permanent Marker', cursive;
  text-align: left;
  padding: 1%;
  width: 280px;
  font-size: 1.2em;
  border: 0px solid #000;
  touch-action: none;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
*/


#closeFullScreen {
  display: none;
  color: #FFF;
  background-color: #FF6347;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
  text-decoration: none;
  z-index: 4;
  text-align: center;
  position: fixed;
  left: 8px;
  top: 8px;
  padding: 1.5%;
  border: 0.5px solid #ff6347;
  border-radius: 3px;
  box-shadow: 0px 0px 2px 2px #CCC;
}

#AllSecMapContainerPop {
  display: none;
}
#AllSecCloseFullScreen {
  display: none;
  color: #ff6347;
  background-color: rgba(250, 250, 149, 0.5);
  font-weight: bold;
  font-family: 'Bebas Neue', cursive;
  font-size: 0.9em;
  text-decoration: none;
  z-index: 4;
  text-align: center;
  position: fixed;
  left: 5px;
  top: 5px;
  padding: 1%;
  border: 0.5px solid #ff6347;
}

#mapContainer {
  box-shadow: 0px 0px 2px 2px #DDD;
}

.text-box {
  border: 0px solid #000;
  padding: 1%;
  margin: auto;
  color: #000;
  font-size: 1.2em;
  font-family: 'Montserrat', sans-serif !important;
  box-shadow: 0px 0px 2px 2px #DDD;
}
.text-box a {
  text-decoration: none;
  color: rgb(57, 57, 252);
}
.text-box a:visited {
  color: rgb(57, 57, 252);
}

.current {
}

.moreArrow {
  font-size: 0.7em;
  font-weight: normal;
  position: relative;
  bottom: 0px;
}

.law {
  background: #FFF;
  border: 0.2px solid #444;
  border-radius: 2px;
  padding: 0.5%;
}

.addtohomescreen-img {
  box-shadow: 0px 0px 8px 1px #ddd;
}
.addtohomescreen-a {
  text-decoration: none;
  color: rgb(57, 57, 252);
  font-family: 'Montserrat', sans-serif !important;
  text-align: center;
}
#addtohomescreen-list li {
  padding: 1.5%;
  margin-left: 1%;
}
.down-arrow-animated {
  animation-name: downarrow;
  animation-duration: 0.7s;
  animation-iteration-count: infinite;
  animation-play-state: running;
  position: relative;
}
@keyframes downarrow {
  0% {
    top: 0px;
  }
  50% {
    top: 15px;
  }
  100% {
    top: 0px;
  }
}