/*CSS*/
html {
    overflow-x: hidden;    
}

body {
/*    font: 400 15px Lato, sans-serif;*/
    font:400 15px "Jost", sans-serif;
    line-height: 1.8;
        overflow-x: hidden;
  }
  h1, h2, h3, h4, h5, h6 {
/*      font-family: "Montserrat", sans-serif;*/
      font-family: "Jost", sans-serif;
      color: #7a0019;
  }
  p {
    color: #333333;
  }
li {
    font-size: large;
}
  p {
    font-size: large;
    line-height: 1.3rem;
  }
  h3 {
    text-align: center;
  }
  h2 {
    font-size: x-large;
    padding-bottom: 10px;
  }
  #statemap h2 {
    font-size: xx-large;
    padding-bottom: 10px;
  }
  a {
    color: #7a0019;
  }
  h2.maptext {
    color: #333333;
  }

  img {
    width: 100%;
    height: auto;
  }

/*Margins & Paddings*/
.m15 {
    margin: 25px;
}

.header {
  position: sticky;
  top: 0;
  padding: 20px 15px;
  background: #7a0019;
  color: #f1f1f1;
  z-index: 104;
}
.navbar-default {
  border-color: transparent;
}
.navbar {
    background: #7a0019;
    padding: 10px;
}
.logo img {
    max-width: 300px; 
}
.sitename {
    text-align: right;
    color: #ffffff;
    font-size: larger;
}

#vidcontainer {
	width: 100%;
	max-height: 100%;
    background: #f1f1f1;
}
#vidcontainer iframe {
/*    opacity: .3 !important;*/
}

/*Positioning*/
.mapWrapper {
    position: relative;
    width: 800px;
    margin: auto;
}

.tabclose {
    position: absolute;
    font-size: 70px;
    top: -87px;
    right: -45px;
    font-weight: 200;
    color: #ffde7a;
    border: none;
    background: transparent;
}
.topright:hover {
    cursor: pointer;
}
.containter.stateof {
    position: absolute;
    top: 50%;
    width: 100%;
}
.stateof svg {
	width: 50%;
}
#statemap {
    position: relative;

}
#statemap img.mnstatemap {
    width: 900px;
    margin-top: -400px;
    position: relative;
    padding-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Style the tab */
.maptab {
  overflow: hidden;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.maptab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  height: 80px;
  width: 80px;
  cursor: pointer;
  padding: 14px;
  transition: 0.3s ease all;
  font-size: 17px;
  background: #ffcc33;
  border-radius: 100%;
  border:1px solid #ffcc33;
  box-shadow: 0 0 0 0 #ffcc33;
  transform: scale(1);
  animation: pulse 2s infinite;
  transition: 0.5s ease all;  
}

.maptext {
    padding-bottom: 100px;
    font-weight: normal;
}

/* Change background color of buttons on hover */
.maptab button:hover {
  background:#ffffff6b;
  padding: 24px 26px 21px 26px;
  transition: 0.3s ease all;
}
.maptab button svg {
    transition: .4s ease all;
}
.maptab button:hover svg {
    filter: drop-shadow(2px 4px 6px #ffde7a);
    transform: scale(1.5);
    transition: .2s ease all;
}

/* Create an active/current tablink class */
.maptab button.active {
  border-radius: 100%;
  border:1px solid #fff;
  background:#fff;
}
.btnlabel {
    background: #000000;
    color: #ffffff;
    padding: 5px 10px;
    position: absolute;
    width: 110px;
    font-size: small;
    border-radius: 23px;
    left: 0px;
    bottom: -64px;
    opacity: 0;
    transition:2s ease all;
}

.maptab button:hover .btnlabel {
    opacity:100%;
    bottom: -34px;
    transition:.5s ease all;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  position: absolute;
  width: 70%;
  left: 15%;
  top: 15%;
  background: #fffffff7;
  padding: 30px;
  z-index: 1000;
  box-shadow: 100px 100px 100px 3000px #3c3c3cbd;
/*  box-shadow: 1px 1px 1px 3px #00000087;*/  
}
.tabcontent .col-lg-6 img {
    width: 70%;
    margin: 0 15% 0 15%;
}

.tabcontent i.location {
    font-size: 16px;
    color: #333;
    background: #ffde7a;
    padding: 2px 9px;
    border-radius: 35px;
}
.tabcontent svg, .maptab svg {
	height: 50px;
	width: 50px;
}

button.tablinks {
    position: absolute;

}

button.tablinks#one {
    position: absolute;
    right: 280px;
    bottom: 220px;
}

button.tablinks#two {
    position: absolute;
    right: 190px;
    bottom: 49%;
}
button.tablinks#three {
    position: absolute;
    right: 200px;
    bottom: 100px;
}
button.tablinks#four {
    position: absolute;
    left: 220px;
    bottom: 15%;
}
button.tablinks#five {
    position: absolute;
    left: 37%;
    top: 39%;
}
button.tablinks#six {
    position: absolute;
    left: 47%;
    top: 50%;
}
button.tablinks#seven {
    position: absolute;
    right: 350px;
    bottom: 220px;
}
button.tablinks#eight {
    position: absolute;
    left: 29%;
    top: 60%;
}
button.tablinks#nine {
    position: absolute;
    right: 190px;
    top: 28%;
}

/*Stat Tab Styles*/
.tab-content {
    padding: 10px 20px;
}
.tab-content img {
    border: 1px solid #7a0019;
    margin-bottom: 15px;
}
.tab-bg {
 background: #000000a3;
 content: '';
 width: 120%;
 height: 100%;
 left: -30px;
 top: -231px;
 z-index: -168;
}
div#s--three {
    padding-top: 60px;
}
.statnav li {
    width: 25%;
    font-size:xx-large;
    font-weight:bold;
    color:#7a0019;
    border: 1px solid #f1f1f1;
}
.statnav li.active {
    background: #7a0019;
}
.statnav li a {
    color:#7a0019;
    background: #E4E4E4;
    text-align:center;
    margin: 0;
    border-radius: 0;
    padding: 20px 15px;
    display: block;
}

.statnav.nav-tabs>li.active>a, .statnav.nav-tabs>li.active>a:focus, .statnav.nav-tabs>li.active>a:hover {
    background: #7a0019;
    color:#ffffff;
}
.section--four {
    background: #ffecb5;
    padding-top: 60px;
}
.section--four .column.col-6.col-sm-4.col-md-3 {
    padding: 0;
}
section.section.section--five {
    padding: 50px 0;
}
.text p {
    padding-top: 0;
    font-size: medium;
    line-height: 1.25rem;
}
/**********Pop up Video Styles******************/
.box {
  position: absolute;
  top: 30%;
  left: 47%;
  z-index: 100;
  text-align: center;
}
.box img {
    position: sticky;
    width: 50%;
    width: 100px;
}



.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
  z-index: 200;
}

.popup {
  margin: 100px auto;
  padding: 2px;
  background: #fff;
  border-radius: 0;
  width: 60%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
}
.popup .close {
    position: absolute;
    top: -40px;
    right: -40px;
    transition: all 200ms;
    font-size: 50px;
    font-weight: 200;
    text-decoration: none;
    color: #ffffff;
    opacity: 1;
}
.popup .close:hover {
  color: #ffde7a;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}





/*.navdots {
    position: fixed;
    right:15px;
    top:30%;
}
.navdots li {
    list-style: none;
    font-size: 30px;
    line-height: 15px;
}
.dots li a {
    text-decoration: none;
    font-size: 70px;
    text-shadow: 3px 1px 5px #ffffff;
}*/

.dotsnav {
    position: fixed;
    right: 60px;
    bottom: 50%;
    z-index: 10000;
}

.dotstyle ul {
    position: relative;
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dotstyle li {
    position: relative;
    display: block;
    float: left;
    margin: 0 16px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-top: 10px;
}

.dotstyle li a {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    outline: none;
    border-radius: 50%;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
    text-indent: -999em; /* make the text accessible to screen readers */
    cursor: pointer;
    position: absolute;
    border: 1px solid #7a0019;
}

.dotstyle li a:focus {
    outline: none;
}

/* Scale up */

.dotstyle-scaleup li a {
    -webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.dotstyle-scaleup li a:hover,
.dotstyle-scaleup li a:focus {
    background-color: white;
    scale: 1.5;
    transition: .2s ease all;
}

.dotstyle-scaleup li.current a {
    background-color: white;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

footer {
    background: #f1f1f1;
    padding: 40px 0;
}
.to-top {
   position: fixed;
   right: 20px;
   bottom: 30px;
   padding-right: 20px;
   z-index: 10000;   
}


/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
  #vidcontainer {
        margin-top: -160px !important;
    }   

}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  #statemap img.mnstatemap {
    margin-top: -140px !important;
    }
    .text h3 {
        font-size: 15px !important;
        font-weight: normal !important;
    }
    .text p {
        padding-top: 0 !important;
        font-size: small !important;
        line-height: 14px !important;
    }
    .tabcontent iframe {
        max-width: 310px;
        max-height: 250px;
    }

}

/*// X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 
    .dotsnav {
      bottom: 30%;
    }    
  #vidcontainer {
        margin-top: 75px !important;
    } 
    .stateof svg {
        width: 90% !important;
    }       
  .logo img {
    padding: 0 15%;
  }
  h2, .h2 {
    font-size: 1.95rem;        
  }
  #statemap h2 {
    font-size: 20px;
  }
  p {
    font-size: medium;
    line-height: 1.3rem;
  }
  .text p {
    padding-top: 0;
    font-size: 13px;
  }
 h2.maptext, h4 {
    font-size: 1.25rem;
    padding: 20px;
    }  

.mapWrapper, #statemap img.mnstatemap {
    width: 100% !important;
}

    .maptab button {
        width: 45px !important;
        height: 45px !important;
        padding: 0 !important;
    }
    .maptab svg {
        height: 30px;
        width: 30px;
    }
    button.tablinks#one {
        right: 160px !important;
        bottom: 90px !important;
    }
    button.tablinks#two {
        right: 128px !important;
        bottom: 45% !important;
    }
    button.tablinks#three {
        right: 145px !important;
        bottom: 37px !important;
    }
    button.tablinks#four {
        left: 95px !important;
    }
    button.tablinks#five {
        left: 31% !important;
        top:33% !important;
    }
    button.tablinks#six {
        left: 38% !important;
        top: 46% !important;
    }    
    button.tablinks#seven {
        right: 205px !important;
        bottom: 90px !important;
    }
    button.tablinks#eight {
        left: 22%;
        top: 54%;
    }    
    button.tablinks#nine {
        right: 118px;
    }
  .dotsnav {
   right: 10px;
  }
  .sitename {
    text-align: center;
  }
  .containter.stateof {
    position: absolute;
    top: 21% !important;
    width: 90%;
    left: 5%;
  }
.box {
    left: 41% !important;
}
  #statemap img.mnstatemap {
    margin-top: -100px !important;
    width: 100%;
    margin-left: 0%;
  }
  .box {
    top: 13% !important;
  }
  .box img {
    width: 50px !important;
  }
  .tabcontent {
    width: 80%;
    left: 7%;
    top:0;
  }
  iframe {
    width: 100%;
    height: auto;
  }
  .maptab button {
    padding: 4px 6px 1px 6px;
  }
  .maptab button:hover {
    padding: 6px 8px 3px 8px;
  }
  .text {
    font-size: large;
  }
  .btnlabel {
    padding: 1px 8px;
    width: 85px;
    font-size: 11px;
  }
  .maptab button:hover .btnlabel {
    bottom: -34px;
  }


  }

/*// Small devices (landscape phones, less than 768px)*/
@media all and (max-width: 767.98px) { 

.movebtn {
    top:15% !important;
}
#mnpartner svg {
    width: 100%;height: 300px !important;
}
.ourPartners {
    background-attachment: scroll !important;
    background-size: cover !important ;
}

#vidcontainer {
     margin-top: 45px;
    }
  .sitename {
    text-align: center;
    font-size: medium;
  }
  .logo img {
    max-width: 100%;
  }
  #statemap img.mnstatemap {
    margin-top: -90px;
  }
  h2.maptext {
    margin-top: 30px;
    padding-top: 50px;
  }
  .box {
    top: 13%;
  }
  .box img {
    width: 50px;
  }
  .statnav li {
    width: 100%;
  }
  .statnav li a {
    padding: 7px 15px;
  }
 }


/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
.movebtn {
    top: 10%;
    transition: 1s ease all;
}
img.stateOnhover {
   width: 90% !important;
translate: 10% !important;
}
.movebtn {
    top:30%;
}
#mnpartner svg {width: 100%;height: 700px;}

.tab-content iframe {
    width: 100%;
    max-width: 560px;
}   
.tabcontent iframe {
        max-width: 310px;
        max-height: 250px;
    } 
button.tablinks#one {
    position: absolute;
    right: 360px;
    bottom: 150px;
}
button.tablinks#two {
    position: absolute;
    right: 280px;
    bottom: 49%;
}
button.tablinks#three {
    position: absolute;
    right: 300px;
    bottom: 62px;
}
button.tablinks#four {
    position: absolute;
    left: 245px;
    bottom: 14%;
}
button.tablinks#five {
    position: absolute;
    top: 38%;
}
button.tablinks#six {
    position: absolute;
    left: 42%;
    top: 50%;
}
button.tablinks#seven {
    position: absolute;
    right: 420px;
    bottom: 150px;
}
    .text p {
        padding-top: 0;
        font-size: small !important;
        line-height: 14px;
    }
.maptab svg {
    height: 40px;
    width:40px;
}
.maptab button {
    width: 60px;
    height: 60px;
    padding: 10px;
}

    .box {
      top: 20%;
    }
    .box img {
      width: 80px;
    }
    .text {
      font-size: medium !important;
    }
    .stateof svg {
      width: 90%;
    }
    h2.maptext {
      margin-top: 30px;
      padding-top: 50px;
    }
    .statnav li {
      font-size: large;
    }
    #statemap img.mnstatemap {
        margin-top: -190px;
        width: 600px;
    }    
}

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) { 
/*  .maptab button {
     height: 53px;
     width: 53px;
  }
  .maptab svg {
    height: 35px;
    width: 35px;
  }*/
/*  button.tablinks#one {
    top: 10%;
  }
  button.tablinks#two {
    left: 50%;
    top: 0px;
  }
  button.tablinks#three {
    position: absolute;
    top: 25%;
  }*/
}

/*// X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) { 
    .movebtn {
    top: 30%;
    transition: 1s ease all;
}
    .containter.stateof {
       position: absolute;
       top: 29%;
    }
    .stateof svg, img.stateOnhover {
        width: 80%;
    }
    .box {
       top: 16%;
    }
    #statemap img.mnstatemap {
        margin-top: -260px;
/*        width: 600px;*/
    }
}

/*// XX-Large devices (larger desktops)*/
/*// No media query since the xxl breakpoint has no upper bound on its width*/