/* news sectiosn were broke with out this -- can you believe it */
* {
  box-sizing: border-box;
}


/* and sadly i had to add this to get padding after news section */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
a { color: rgb(255, 223, 0); } 

.footer {
  /* background-color: #cf263c; */
  background-color: #5B3B48;
  margin-bottom: 30px;
}

li {
  list-style-type: none;
}

body {
  /* color: red; */
  color: rgb(255, 223, 0);
  font-family: larabiefont, monospace;
  font-weight: 400;
  font-style: normal;

  line-height: 1.4;

  margin: 0;
  padding: 0;
  border: 0;

  /*consider commenting from here*/
  font-size: 100%;
  /* font: inherit; */
  vertical-align: baseline;

  text-align: center;
  display: block;
  /*consider commenting to here*/
}


/* todo consider removing this */
/* article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
} */

.friendlyText{
  /* font-family: monotype-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal; */
  font-size:1.3em;
  /* letter-spacing: 0.0625em; */
  letter-spacing: 0.1;
  /* word-spacing:.3em; */
  color:white;
}

#news{
  /* background-color: #cf263c; */
  background-color: #5B3B48;
}

/* #news h1 { */
#news h1 {
  /* font-size:x-large; */
  font-size:4em!important;

}
#mail h1 {
  font-size:4em!important;
}

#news h3{
  margin-bottom:1em;
  text-transform:uppercase;
  font-size:1.5em!important;
}



.newsTopHeading {
  /* font-family: monotype-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal; */
  font-family: shimano-narrow-round, sans-serif;
  font-weight: 300;
  font-style: normal;
}


.secTitle {
  margin-bottom: 30px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* text-indent: -99999px; */
}



.newsWrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: 50px;
}



@media (max-width: 600px){
.newsPost {
    width: calc(100% - 20px)!important;
    margin-bottom: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
    .newsWrapper {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
}}


.newsPost {
  /* background: #a3172c; */
  background: #773B48;
  width: calc(50% - 10px);
  padding: 25px;
  text-align: left;
}

.slightlyCentered {
  padding:2em;
  line-height:1.7em;
}

#videoDiv{
  position:relative;
  top:200px;
  /* left:27%; */
}
video {
  height: 70%;
  width: 70%;
}

.header {
  /* background: url("../images/b0des1440.jpg") no-repeat center; */
  /* background: url("../images/b0des1440.jpg") no-repeat center center; */
  /* background: url("../images/b0desEye1440.jpg") no-repeat center center; */
  /* background: url("../images/testBackgroundEye.jpg") no-repeat center center; */
  background: url("../images/newb0des.combg.jpg") no-repeat center center;
  /* background: url("../images/headerBg.jpg") no-repeat center center; */
  /* background: url("../images/headerBg.jpg"); */
  width: 100%;
  height: 100vh;
  display: flex;
  /* flex-direction:column; */
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  background-size: cover;
  align-items: top;
  position: fixed;
  z-index: 0;
  top: 0;
  background-repeat: no-repeat;
  /* width:100vw; */
  /* width:100em; */

  /* background-size:100% */
  /* background-size: 100%; */
  /* position:fixed; */
  /* top:0; */

  /* 
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
 */
 /* background-size: cover; */

}

.b0desLogo {
  /* margin-top: 1em; */
  margin-top: 3em;
  background-image: url("../images/b0des6.svg");
  height: 20em;
  width: 20em;
  background-repeat: no-repeat;
}

.color1 {
  background-color: rgb(197, 197, 197);
}
.color2 {
  background-color: rgb(11, 11, 11);
}

.color3 {
  background-color: 75, 83, 32;
}

.section {
  /* z-index: 999; */
  /* padding: 10px 0; */
  padding: 50px 0;
  z-index: 1;
  position: relative;
/* 
  display: block;

  background-color: #aa263c;

  margin: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;

  box-sizing: border-box;

  text-align: center; */
  
}


.scroll {
  width: 100px;
  text-align: center;
  color: #fff;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  bottom: 10px;
  text-transform: uppercase;
  opacity: 0.5;
  font-size: 1em;
  letter-spacing: 0.05rem;
  text-indent: 0.05rem;
  /* font-family: 'Gurajada', serif; */
  /* font-family: 'Judson', serif; */
}

.scroll:after {
  content: " ";
  display: block;
  -webkit-transform: translateX(49px) translateY(10px);
  -ms-transform: translateX(49px) translateY(10px);
  transform: translateX(49px) translateY(10px);
  width: 2px;
  height: 38px;
  background-color: #fff;
}

.bigDivPad {
  margin-top: 3em;
  margin-bottom: 3em;
}
.divPad {
  margin-top: 1.5;
  margin-bottom: 1.5;
}

.bottomDivPad {
  margin-top: 3em;
}

strong {
  font-size: 3em;
}

@media only screen and (max-width: 600px) {
  .section {
    /* font-size: 100%; */
  }
  .scroll {
    /* font-size: 3em; */
    transform: scale(1.5);
    /* transform: translateX(50px,0px);;     */
  }
  .scroll:after {
    height: 68px;
  }
}

@media only screen and (min-width: 601px) {
  /* .scroll:after {
    height: 68px;
  } */
}




.comingSizzoon{
  color:rgb(249,51,40);
  background:linear-gradient(green,black );
  /* padding-bottom:20px; */
}


h1{
  /* todo: fix !importants */
  font-size:2em!important;
  text-align:center;
}

#sighTemp{
  text-align:left;
  height:100%!important;
  min-height:10em!important;
}


#instagram{
  transform:scale(1.2);
}


#legalAndSocial{
  padding-top:7em;
}
#legalAndSocial a{
  color: rgb(255, 223, 0);
  text-decoration:none;
}

/* cant figure out why i need this */
.socialIconWeird {
  padding-top:0!important;
  padding-bottom:1px!important;
}

@media only screen and (min-width: 601px) {
  
  #legalAndSocial svg{
    padding:.5em;
    margin-bottom:3em;
  }
}

@media only screen and (max-width: 600px) {
  #legalAndSocial svg{
    transform:scale(.66);
    padding:0em!important;
    margin-bottom:3em;
  }
  #spotifySvg {
    padding-top:.2em;
  }
}

@media only screen and (min-width: 601px) {
  
  #legalAndSocial img{
    padding:.5em;
    margin-bottom:3em;
  }
}

@media only screen and (max-width: 600px) {
  #legalAndSocial img{
    transform:scale(.66);
    padding:0em!important;
    margin-bottom:3em;
  }
  #spotifySvg {
    padding-top:.2em;
  }
}

/* begin nav ripping off */


/*forgive me father john misty...your site just looked too fresh */



           /*  .nav {
              position: relative;
              margin-top: 100vh;
              background-color: #ba2036;
              background-color: #443B48;
              z-index: 2000;
              -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
              box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
            } */





          .nav {
            position: relative;
            margin-top: 100vh;
            background-color: #ba2036;
            background-color: #443B48;
            z-index: 20;
            -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.1);
            box-shadow: 0 1px 4px rgba(0,0,0,.1)
        }
        
        .nav.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0
        }
        
        .navWrapper {

          /* font-family: monotype-grotesque, sans-serif; */
          /* font-weight: 400; */
          font-style: normal;

            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding: 15px;
            /* text-transform: uppercase; */
        }
        
        .navList {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            height: 100%
        }
        
        @media (max-width: 600px) {
            .navList {
                display:none
            }
        }
        
        .navBandName {
            color: #f5cf80;
            font-size: 1.7em;
            letter-spacing: .08rem;
            position: relative;
            top: 2px
        }
        
        .navList--item {
            margin-left: 15px
        }
        
        .navList--item:first-child {
            margin-left: 0
        }
        
        .navList--link {
            position: relative;
            top: 2px;
            display: inline-block;
            padding: 0 6px;
            text-decoration: none;
            color: #f5cf80;
            font-size: 1.1em;
            display: inline-block;
            -webkit-transition: all 110ms ease-out;
            -o-transition: all 110ms ease-out;
            transition: all 110ms ease-out
        }
        
        .navList--link:after {
            -webkit-transition: all 110ms ease-out;
            -o-transition: all 110ms ease-out;
            transition: all 110ms ease-out;
            content: ' ';
            width: calc(100% + 12px);
            height: 2px;
            background-color: #ba2036;
            background-color: #443B48;
            position: absolute;
            left: -6px;
            top: 33px
        }
        
        .navList--link:hover {
            color: #fff
        }
        
        .navList--link:hover:after {
            background-color: #fff
        }
        
        .navList__active {
            color: #fff
        }
        
        @media (max-width: 600px) {
            .burger-wrapper {
                display:block!important
            }
        }
        
        .burger-wrapper {
            width: 24px;
            height: 24px;
            position: relative;
            display: none;
            cursor: pointer;
            top: 6px
        }
        
        .burger {
            position: absolute;
            width: 24px;
            height: 2px;
            background-color: #f5cf80
        }
        
        .burger:after,.burger:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 2px;
            background-color: #f5cf80
        }
        
        .burger:before {
            -webkit-transform: translateY(14px) translateX(-12px);
            -ms-transform: translateY(14px) translateX(-12px);
            transform: translateY(14px) translateX(-12px)
        }
        
        .burger:after {
            -webkit-transform: translateY(7px) translateX(-12px);
            -ms-transform: translateY(7px) translateX(-12px);
            transform: translateY(7px) translateX(-12px)
        }
        
        .burger,.burger:after,.burger:before {
            -webkit-transition: background-color .3s,-webkit-transform .3s ease-in-out;
            transition: background-color .3s,-webkit-transform .3s ease-in-out;
            -o-transition: transform .3s ease-in-out,background-color .3s;
            transition: transform .3s ease-in-out,background-color .3s;
            transition: transform .3s ease-in-out,background-color .3s,-webkit-transform .3s ease-in-out
        }
        
        .open .burger-wrapper {
            top: 1px
        }
        
        .open .burger {
            -webkit-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            transform: rotate(90deg);
            background-color: rgba(255,255,255,0)
        }
        
        .open .burger:before {
            -webkit-transform: translateY(0) rotate(45deg);
            -ms-transform: translateY(0) rotate(45deg);
            transform: translateY(0) rotate(45deg)
        }
        
        .open .burger:after {
            -webkit-transform: translateY(0) rotate(135deg);
            -ms-transform: translateY(0) rotate(135deg);
            transform: translateY(0) rotate(135deg)
        }
        
        .open .burger:after,.open .burger:before {
            background-color: #000
        }
        
        .mobileNav {
            display: none
        }
        
        @media (max-width: 600px) {
            .mobileNav {
                width:100%;
                /* height: 160px; */
                background-color: #ba2036;
                background-color: #443B48;
                -webkit-box-shadow: 0 7px 14px rgba(0,0,0,.15);
                box-shadow: 0 7px 14px rgba(0,0,0,.15);
                opacity: 0;
                -webkit-transition: opacity 140ms ease-out;
                -o-transition: opacity 140ms ease-out;
                transition: opacity 140ms ease-out
            }
        
            .open .mobileNav {
                display: block;
                position: absolute;
                top: 50px;
                opacity: 1
            }
        
            .mobileNav ul {
                position: static
            }
        
            .mobileNav .navList {
                padding: 20px;
                display: block
            }
        
            .mobileNav .navList:after {
                display: none
            }
        
            .mobileNav .navList--item {
                margin-bottom: 14px
            }
        
            .mobileNav .navList--item:last-child {
                margin-bottom: 0
            }
        
            .mobileNav .navList--link {
                /* text-transform: uppercase; */
                font-size: 1.3em;
                letter-spacing: .08rem;
                text-indent: .08rem;
                color: #fff
            }
        
            .mobileNav .navList--link:after {
                display: none;
            }




          }












          .hiddenb0desMask {
            /* opacity:.20; */
            display:flex;
            justify-content: center;
            flex-wrap:wrap;
            align-items: center;
            overflow: hidden;            
            /* width:100px; */
            /* height:100px; */
          }
          .hiddenb0desMask img {
            /* flex-shrink:0; */
            /* min-width:100%; */
            /* min-height:100%; */
            max-height:200px;
            padding-left:10px;
          }


.titratheReleaseDate, .liveShows{
  display:flex;
  flex-wrap:wrap;
  /* align-items:center; */
  text-align: center;
  justify-content: center;
}
.titratheReleaseDate span, .liveShows span{
  padding:10px;
}

.liveShows h4{
  font-size:2em;
}
.liveShows h5{
  font-size:1.8em;
}
.liveShows h6{
  font-size:1.5em;
}


















        .album {
            /* background: #06202a url(./images/synth.jpeg) repeat center center; */
            /* background: #06202a url(../images/synth.jpeg) repeat center center; */
            /* background: #aa263c url(../images/redBookBlurred5.jpg) no-repeat center; */
            /* background: #5B3B48 url(../images/jungRedBook.jpg) no-repeat center; */
            background: #5B3B48 url(../images/newTitratheBG2.png) no-repeat center;
            /* background: #5B3B48 url(../images/b0desHeaderBandcamp.png) no-repeat center; */
            background-size:100% auto;
            backdrop-filter: blur(50px);

            /* background: #06202a repeat center center; */
        }
         .sec {
           /* had it working good like this */
            padding: 50px 0;
            /* padding:0; */
            z-index: 1;
            position: relative;
        } 
        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            display: block;
        }






        .albumWrapper {
          position: relative;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
      }
      .wrapper {
          max-width: 940px;
          width: 100%;
          padding: 0 10px;
          margin-left: auto;
          margin-right: auto;
      }









.albumWrapper>div {
    width: calc(50%);
}
.albumCover {
    /* background-image: url(/dist/images/gfc-cover.jpg); */
    /* background-image: url(../images/pixelateb0des2.png); */
    /* background-image: url(../images/blurred4.jpg); */
    background-image: url(../images/titrathe.jpg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0 8px 15px rgba(0,0,0,.24);
    box-shadow: 0 8px 15px rgba(0,0,0,.24);
    margin-left: auto;
    margin-right: auto;
}



.albumInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.albumCover:before {
  content: '';
  display: block;
  padding-top: 100%!important;
}

.albumTracklist {
  font-family: shimano-narrow-round, sans-serif;
  /* font-weight: 300; */
  /* font-style: normal; */


  width: 30px;
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 8px 8px;
  -ms-transform-origin: 8px 8px;
  transform-origin: 8px 8px;
  text-transform: uppercase;
  color: #f5cf80;
  text-transform: uppercase;
  font-size: 1.7em;
  letter-spacing: .08rem;
  text-indent: .08rem;
  margin-left: 40px;
}

@media (max-width: 600px) {
  .albumTracklist {
      position: static;
      width: 100%;
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      margin: 30px 0;
  }


  .albumInfo {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%!important;
  }

  .albumWrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: calc(100% - 10px)!important;
  }

}


.albumTracks--num {
  color: rgba(255,255,255,.5);
  font-family: HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-weight: 300;
  font-size: .8rem;
  text-align: left;
  margin-right: 15px;
  position: relative;
  top: .1rem;
  padding-left: 30px;
}

.albumTracks--track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 16px;
}

.last-track{
  padding-bottom:5em;
}





.song-ui[data-player-status=pause] .icon-play {
  display: block;
}

.song-ui[data-player-status=pause] .icon-pause {
  display: none;
}

.song-ui:hover path {
  fill: #fff;
}
.song-ui path {
  -webkit-transition: all 130ms ease-out;
  -o-transition: all 130ms ease-out;
  transition: all 130ms ease-out;
}



.albumLinks {
  margin-top: 35px;
  margin-left: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.albumLinks>a {
  width: 34px;
  height: 34px;
  display: block;
  margin-right: 25px;
}


.albumLinks a path {
  -webkit-transition: all 110ms ease-out;
  -o-transition: all 110ms ease-out;
  transition: all 110ms ease-out;
}


@media (max-width: 600px){
  .albumLinks {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin-left: 0;


      /*added*/
      margin-top:0;
  }
}

.labelLinks {
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}


.labelLinks--type {
  border-right: 2px solid #f5cf80;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-transition: all 110ms ease-out;
  -o-transition: all 110ms ease-out;
  transition: all 110ms ease-out;
  width: 50px;
}

.labelLinks--copy {
  text-align: left;
  padding: 10px;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: .08rem;
  text-indent: .08rem;
  position: relative;
  top: 2px;
}

.labelLinks--upLeft {
  position: absolute;
  left: 5px;
  top: 6px;
}
.labelLinks--upLeft, .labelLinks--upRight {
  color: #f5cf80;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: .08rem;
  text-indent: .08rem;
}
.labelLinks--upLeft:after {
  content: ' ';
  width: 2px;
  height: 20px;
  background-color: #fff;
  display: block;
  position: relative;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -6px;
  left: 18px;
}


.labelLinks--upRight {
  position: absolute;
  right: 5px;
  bottom: 6px;
}




.labelLinks--copy span {
  color: #f5cf80;
}




.labelLinks>a {
  width: calc(100% / 3 - 20px);
}



.labelLinks--link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: 2px solid #f5cf80;
  color: #fff;
  text-decoration: none;
  -webkit-transition: all 110ms ease-out;
  -o-transition: all 110ms ease-out;
  transition: all 110ms ease-out;
  margin-top: 15px;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  /* font: inherit; */
  vertical-align: baseline;

  
}
body {
  line-height: 1;
}













.ml--title {
  text-transform: uppercase;
  color: #f5cf80;
  margin-bottom: 15px;
  text-transform: uppercase;
  text-transform: uppercase;
  font-size: 1.3em;
  letter-spacing: .08rem;
}

.mlForm {
  max-width: 390px;
  width: 85%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

.mlForm input[type=email] {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  padding: 16px;
  border: none;
}




.mlForm input[type=submit] {
  /* padding: 16px; */
  width: 90px;
  background-color: #f5cf80;
  border: 0;
  text-transform: uppercase;
  font-size: 1.1em;
  flex-grow:1;
}














/* 
**************
************** */
/* modal stolen from */
/* https://codepen.io/Idered/pen/vytkH */

/* [Object] Modal
 * =============================== */
 .modal {
   z-index:9000;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: rgba(0,0,0, .9);
  transition: opacity .25s ease;
}

.modal__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}

.modal-state {
  display: none;
}

.modal-state:checked + .modal {
  opacity: 1;
  visibility: visible;
}

.modal-state:checked + .modal .modal__inner {
  top: 0;
}

/* an interesting attempt at the general sibling operator
using javascript instead */
/* 
.modal-state:checked  ~ .nav.sticky  {
    position: relative;
} */


.modal__inner {
  transition: top .25s ease;
  position: absolute;
  top: -20%;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  margin: auto;
  overflow: auto;
  /* background: #fff; */
  background: rgb(11, 11, 11);
  border-radius: 5px;
  padding: 1em 2em;
  height: 50%;
}

.modal__close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

.modal__close:after,
.modal__close:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1.5em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.modal__close:before {
  transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
	
  .modal__inner {
    width: 90%;
    height: 90%;
    box-sizing: border-box;
  }
}


.modal h2{
  padding-top:4em;
}

.modal div{
  padding-top:2em;
}

.modal form{
  padding-top:2em;
}


#emailSuccess {
  display:none;
  animation: blinker 1s linear 2;
}

#emailFail {
  display:none;
  animation: blinker 1s linear 2;
}

.visible {
  display:flex!important;
}


@keyframes blinker {
  50% {
    opacity: 0;
  }
}












/* Other
 * =============================== */
body {
  padding: 1%;
  font: 1/1.5em sans-serif;
  text-align: center;
}

.btn {
  cursor: pointer;
  background: #27ae60;
  display: inline-block;
  padding: .25em .25em;
  color: #fff;
  border-radius: 3px;


  font-family: shimano-narrow-round, sans-serif;
  font-weight: 300;
  font-size:2.5em;
  /* font-style: normal; */
}

.btn:hover,
.btn:focus {
  background: #2ecc71;
}

.btn:active {
  background: #27ae60;
  box-shadow: 0 1px 2px rgba(0,0,0, .2) inset;
}

.btn--blue {
  background: #2980b9;
}

.btn--blue:hover,
.btn--blue:focus {
  background: #3498db;
}

.btn--blue:active {
  background: #2980b9;
}

p img {
  max-width: 200px;
  height: auto;
  float: left;
  margin: 0 1em 1em 0;
}














/* 
**************
************** */









/* 



          nav
          sticky
          mobileNav
          navWrapper
          navBandName
          navList
          burger-wrapper
          burger */