/* Media Queries (From skeleton.css - changed min to max)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/*GRID STOPS AT THIS ONE */
@media (max-width: 550px) {
  .header-link {
      margin-top: 1.5rem;
  }

  .csec-image-and-logo {
          display: none;
      }
}

@media (max-width: 400px) {
    .hats-row{
        width: 100%;
    }
    .page-content .container{
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 40px;
        margin-left: 10px;
        margin-right: 10px;
    }
}


@media (max-width: 1000px) {
    .header{
        display: none;
    }
    .hats-row{
        width: 100%;
    }
    .page-content .container{
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 40px;
        margin-left: 10px;
        margin-right: 10px;
        width: 97%;
    }
    .sub-header-link {
        /*border-width: 0px 1px;
        border-style: solid;
        border-color: #A4A4A4 ;
        border-radius: 25px;*/
        color: #3C3A83;
        height: 25px;
        line-height: 25px;
        padding-bottom: 1.5rem;
        text-decoration: none;
        width: 200%;
    }
    .sub-header{
        margin-bottom: -60px;
    }
    .merged-seven{
        margin-top: 60px;
    }
    .merged-seven .seventh.columns {
        width: 33.285%;
    }
    .merged-five{
        margin-top: 60px;
    }
    .merged-five .fifths.columns {
        width: 33.285%;
    }
    .u-full-width{
        width: 90%;
    }
    .usec-width{
        width: 90%;
    }
    .contact .six.columns{
        padding-left: 10px;
    }
    .tablink{
        font-size: 11px;
    }
    .notice{
        display: none;
    }
    .profile-content .container {
        margin-top: 5px;
    }
    .intro{
        margin-top: 4em;
    }
    .four{
        margin-top: 3em;
    }
}

@media (max-width: 550px) {
    .tablink{
        font-size: 9px;
    }
}


@media only screen and (min-width: 1000px) {
    .nav-mobile{
        display: none;
    }
    .secret2{
        z-index: 998;
    }
    .tab{
        z-index: 999;
    }
}

@media (max-width: 1200px) {}


@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 705px) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  DEMO STYLES
--------------------------------------------- */


/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */

header {
  background: #fff;
  position: fixed;
  z-index: 3;
  width: 100%;
  left: 0;
  top: 0;
}

.logo {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  font-weight: bold;
  line-height: 55px;
  padding: 0 20px;
  color: #fff;
  float: left;
}


/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  background: rgba(0,0,0, .5);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 705px) {
  .mask {
    display: none !important;
    opacity: 0 !important;
  }
}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

@media screen and (min-width: 705px) {
  .nav-collapse {
    float: right;
    width: auto;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
  height: 26px;
}

@media screen and (min-width: 705px) {
  .nav-collapse li {
    width: auto;
  }
}

.nav-collapse a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-top: 1px solid white;
  text-decoration: none;
  background: #f4421a;
  padding: 0.7em 1em;
  color: #fff;
  width: 100%;
  float: left;
}

.nav-collapse a:active,
.nav-collapse .active a {
  background: #b73214;
}

@media screen and (min-width: 705px) {
  .nav-collapse a {
    border-left: 1px solid white;
    padding: 1.02em 2em;
    text-align: center;
    border-top: 0;
    float: left;
    margin: 0;
  }
}

.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 2em;
}

@media screen and (min-width: 705px) {
  .nav-collapse ul ul a {
    display: none;
  }
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("../images/icons/responsivenav.eot");
  src:url("../images/icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../images/icons/responsivenav.ttf") format("truetype"),
    url("../images/icons/responsivenav.woff") format("woff"),
    url("../images/icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #f4421a; /* Edit this to change the icon color */
  font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  position: absolute;
  content: "\2261"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-toggle.active:before {
  font-size: 24px;
  content: "\78"; /* Close icon */
}