* { box-sizing:border-box; }

    .maiden-orange-regular {
      font-family: "Maiden Orange", serif;
      font-weight: 400;
      font-style: normal;
    }

    @font-face {
        font-family: 'Flame-on-Black';
        src:url('Flame-on-Black.ttf.woff') format('woff'),
            url('Flame-on-Black.ttf.svg#Flame-on-Black') format('svg'),
            url('Flame-on-Black.ttf.eot'),
            url('Flame-on-Black.ttf.eot?#iefix') format('embedded-opentype');
        font-weight: normal;
        font-style: normal;
    }

    body, html {
      height: 100%;
    }

    html { background-color: #fd9fd2; background-image:url(../images/ff-bg.png); background-repeat:no-repeat; background-size:100% 100vh; background-attachment:fixed; }
    body { font-family: "Maiden Orange", serif; font-weight: 400; margin: 0px; color:#3048a1;  }

    strong { font-weight:700; }

    .outer-wrapper { display:flex; justify-content:center; align-items:center; min-height:100vh; background:url(../images/ff-big-skull.png) center bottom no-repeat; background-size:auto 400px; }
    .wrapper { z-index:2; padding-bottom:400px; padding-top:90px; }

    .tcenter {text-align:center; }

    .contained { display:block; width:100%; margin:0 0 40px; }
    .contained.shallow { margin:0 0 10px; }

    .slimmer-content { max-width:900px; padding:0 30px; }
    .padded-content { max-width:90%; padding:0 30px; margin:0 auto; }

    h1 { font-family:Arial, sans-serif; font-size:85px; margin:0 0 10px 0; text-transform:uppercase; letter-spacing:0.15em; }
    h1.fancy { font-family:"Flame-on-Black", Arial, sans-serif; font-size:85px; margin:0 0 10px 0; text-transform:uppercase; letter-spacing:0.15em; }
    h2 { font-family:Arial, sans-serif; font-size:50px; margin:0 0 10px 0; text-transform:uppercase; letter-spacing:0.15em; }
    h3 { font-family:Arial, sans-serif; font-size:30px; margin:0 0 10px 0; text-transform:uppercase; letter-spacing:0.15em; }

    p { font-size:22px; margin:0 0 25px 0; line-height:1.4em; }
    p.shallow { margin-bottom:10px; }

    img { max-width:100%; }

    hr { border:0; width:100%; margin:60px 0; height:1px; background:#3048a1; }

    a { color:#000; text-decoration: underline; -webkit-transition:.2s; transition:.2s; }
    a:hover { color:#fff; text-decoration: underline; }

    a.clean { color:inherit; text-decoration:none; }

    a.button { display:inline-block; border:0; border-radius:0; text-decoration:none; background:#3048a1; color:#fff; line-height:26px; padding:10px 30px; transform: skew(-15deg, 0deg); }
    a.button span { display:inline-block; transform: skew(15deg, 0deg); }
    a.button:hover { background:#fff; color:#3048a1; text-decoration:none;}

    .nav  { list-style:none; margin:0 0 40px; padding:0; width:100%; text-align:center; }
      .nav li  { margin:0 10px; padding:0; display:inline-block; }
        .nav li a { color:#3048a1; text-transform:uppercase; font-size:20px; text-decoration:none; }
        .nav li a.active { text-decoration:underline; }
        .nav li a:hover { color:#fff; text-transform:uppercase; font-size:20px; }


    .bands  { overflow:hidden; margin:70px 0; }
      .bands .band { width:100%; overflow:hidden; display:flex; justify-content:center; align-items:center; margin:40px 0; }
        .bands .band .img { width:35%; float:left; margin-right:10px; }
        .bands .band .info { width: calc( 100% - 35% ) ; padding-left:30px; float:right; }
        .bands .band .band-icon { width:35px; margin:0; vertical-align:center; margin-bottom:30px; }

    .faqs {  }
    .faqs h3 { margin-bottom:30px; }
    .faqs p { margin-bottom:10px; }
    .faq-answer { margin-left:30px !important; }

    .list-of-photos { columns:4; grid-column-gap: 30px; column-gap: 30px; }
      .list-of-photos a { display:inline-block; margin:0 0 30px;  }

    @media only screen and (max-width: 900px) {
        .outer-wrapper { background-size:auto 170px; }
        .wrapper { padding-bottom:180px; padding-left:15px; padding-right:15px; }

        h1 { font-size:40px; }
        h2 { font-size:30px; }
        h3 { font-size:22px; }
        p { font-size:14px; }

      .padded-content { max-width:95%; padding:0 20px; margin:0 auto; }

      .bands .band { width:100%; overflow:hidden; display:block;  margin:40px 0; text-align:center; }
        .bands .band .img ,
        .bands .band .info { width: 100% !important; margin:0 !important; padding:0 20px; }
        .bands .band .img img { max-height:150px; margin:0 0 10px; }
        .bands .band .band-icon { width:30px; margin:0; }

      .list-of-photos { columns:2; grid-column-gap: 30px; column-gap: 30px; }
        .list-of-photos a { display:inline-block; margin:0 0 30px;  }

    }