@font-face {
    font-family: 'hagin-caps';
    src: url('../fonts/hagin-caps-medium-webfont.eot');
    src: url('../fonts/hagin-caps-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hagin-caps-medium-webfont.woff') format('woff'),
         url('../fonts/hagin-caps-medium-webfont.ttf') format('truetype'),
         url('../fonts/hagin-caps-medium-webfont.svg#hagin-caps-medium') format('svg');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'hagin-caps';
    src: url('../fonts/hagin-caps-thing-webfont.eot');
    src: url('../fonts/hagin-caps-thing-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/hagin-caps-thing-webfont.woff') format('woff'),
         url('../fonts/hagin-caps-thing-webfont.ttf') format('truetype'),
         url('../fonts/hagin-caps-thing-webfont.svg#hagin-caps-thin') format('svg');
    font-weight: 300;
    font-style: normal;

}
@font-face {
    font-family: 'Aleo';
    src: url('../fonts/aleo-regular-webfont.eot');
    src: url('../fonts/aleo-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/aleo-regular-webfont.woff') format('woff'),
    url('../fonts/aleo-regular-webfont.ttf') format('truetype'),
    url('../fonts/aleo-regular-webfont.svg#aleobold') format('svg');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Aleo';
    src: url('../fonts/aleo-bold-webfont.eot');
    src: url('../fonts/aleo-bold-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/aleo-bold-webfont.woff') format('woff'),
    url('../fonts/aleo-bold-webfont.ttf') format('truetype'),
    url('../fonts/aleo-bold-webfont.svg#aleobold') format('svg');
    font-weight: 700;
    font-style: normal;
}
html{ margin: 0px; padding: 0px;}
body{ font-family: 'hagin-caps'; font-size:14px; line-height:18px;position: relative; margin: 0px; padding: 0px; background: #ffffff; 
    width: 100%;  overflow: auto; color: #000000}
img{ margin: 0px; padding: 0px; border: 0px;}
input{ position: relative; margin: 0px; padding: 0px}
a{ text-decoration: none;  color: inherit;  transition: all 0.5s ease;}
a:hover{ color: #e65c00; text-decoration: none; }
.img-fluid {
    display: block;
    height: auto;
    max-width: 100%;
}


#outer{  min-height: 618px; position: relative; min-width: 320px; overflow: hidden;}
.inner{ max-width: 890px; width:100%; position: relative; margin: 0px auto 0px auto; text-align: center; }

.shadow{ -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0, 1);
-moz-box-shadow:    0px 3px 5px 0px rgba(0,0,0, 1);
box-shadow:         0px 3px 5px 0px rgba(0,0,0, 1);}

.shadow2{-webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 1);}
.shadow4{-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 1);}
.shadow5{-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    0px 2px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow:         0px 2px 5px 0px rgba(0, 0, 0, 0.75);}
.shadow6{-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);}

.sp20{ width: 100%; height: 20px; line-height: 20px; font-size: 20px; position: relative;}
 .sp40{ width: 100%; height: 40px; line-height: 40px; font-size: 40px; position: relative;}
 .sp60{ width: 100%; height: 60px; line-height: 60px; font-size: 60px; position: relative;}
 .sp80{ width: 100%; height: 80px; line-height: 80px; font-size: 80px; position: relative;}
 .sp100{ width: 100%; height: 100px; line-height: 100px; font-size: 100px; position: relative;}
.clear{ width: 100%; height: 0px; line-height: 0px; font-size: 0px; position: relative; clear: both;}

header{ position: relative; background: #ffffff }
.head_img{ width: 100%; height: 558px; position: relative; }
.head_img_b{ display: block; width: 100%; position: relative; height: 558px; background: url(../images/head.jpg) top center no-repeat; }
.head_img_m{ display: none; width: 100%; position: relative; max-width: 580px; margin: 0px auto 0px auto }
.head_img_m img{ width: 100%; position: relative; display: block; }
.main_ttl{ position: relative; color: #ffffff; font-size: 46px; line-height: 51px; text-transform: uppercase; width: 95%; max-width: 661px; margin: 10px auto 0px auto; }
.upload_ttl{ position: relative; color: #ffffff; font-size: 27px; line-height: 31px; text-transform: uppercase; width: 95%; max-width: 570px; margin: 10px auto 0px auto;}
hr{ position: relative; width: 95%; max-width: 600px; border: 1px solid #ffffff; margin: 10px auto 10px auto }
.upload_btn{ position: relative; width: 95%; max-width: 408px; margin: 10px auto 0px auto }
.upload_btn img{ width: 100% }

.note{ position: relative; color: #ffffff; font-size: 12px; line-height: 15px; font-family: 'Lato',sans-serif;width: 95%; max-width: 400px; margin: 5px auto 0px auto }
.album{ position: relative; font-family: 'Aleo',serif;  }
.album_cover{ position: relative; display: inline-block; vertical-align: middle;  }
.album_info{ position: relative; display: inline-block; vertical-align: middle; width: 95%; max-width: 300px; }
.album_ttl{ color: #ae1d37; font-size: 18px; line-height: 21px; font-weight: 700;text-transform: uppercase; }
.album_av{ color: #424143; font-size: 18px; line-height: 21px; font-weight: 400;text-transform: uppercase; }

.content{ background: #ae1d37; color: #ffffff }
.socials{ position: relative; text-align: center; padding: 20px 0px 20px 0px; }
.socials ul{ list-style: none; margin: 0px; padding: 0px; }
.socials ul li{ list-style: none; margin: 0px; padding: 0px; width: 74px; height: 74px;-webkit-border-radius: 74px;
-moz-border-radius: 74px;
border-radius: 74px; background: #ae1d37; color: #ffffff; text-align: center; font-size: 30px; line-height: 74px; display: inline-block; vertical-align: middle; margin: 10px 6px 0px 6px }
.socials ul li a{ display: block; width: 100%; height: 100%; position: relative; text-align: center; color: #ffffff }
.white_bar{ position: relative; background: #ffffff }
.gallery{ position: relative; background: #ffffff }
.gallery_items{ position: relative; width: 800px;  margin: 0px auto 0px auto }
.item{ width: 180px; height: 180px; position: relative; float: left; margin: 10px; }
.item .pic{ width: 100%;display: block; position: relative; }
.item .pic img{ width: 100%; display: block; position: relative; border: 5px solid #ffffff }
.gallery_ttl{ font-size: 50px; line-height: 52px; color: #ae1d37; text-transform: uppercase; padding: 20px 0px 0px 0px;}
.more{ font-size: 34px; line-height: 40px; color: #ae1d37; text-transform: uppercase; padding: 0px 0px 20px 0px;}
.copy{ position: relative; margin: 20px auto 0px auto; width: 95%; font-size: 18px; line-height: 22px; text-transform: uppercase; color: #ffffff; }
.bmlg{ position: relative; margin: 20px auto 0px auto; width: 95%; max-width: 336px;}
.bmlg img{ display: block; width: 100% }

.content{ border-top: 1px solid #cbb5ac;border-bottom: 1px solid #cbb5ac; position: relative; z-index: 10 }
.content:before{ border-top: 1px solid #ae1d37; content: " ";
  position: absolute; top:-2px; left: 0px; width: 100% }
  .content:after{ border-bottom: 1px solid #ae1d37; content: " ";
  position: absolute; bottom:-2px; left: 0px; width: 100% }
  .buy{ position: relative; }
  .buy img{ position: relative; margin: 2px; }
  .left_side{ width: 440px; float: left; }
  .right_side{ width: 299px; float: right; }
  .share_player{ position: relative; font-size: 16px; line-height: 20px; color: #000000; font-family: 'Lato',sans-serif; text-transform: uppercase; float: left; }
 .add_player{ position: relative; float: right;  }
 .sub{ position: relative; margin: 4px 0px 0px 0px; }
 .sub span{ display: inline-block; vertical-align: middle; line-height: 35px;  font-weight: 700; }
 .sub a{ display: inline-block; vertical-align: middle; line-height: 35px; font-size: 25px; margin: 0px 0px 0px 5px }
 .twc{ color: #2fa8e0 }
 .fbc{ color: #3b5999 }
 .top_bar{ position:relative; z-index: 10; top:0px; left: 0px }
 .enter_web{ position: relative; font-size: 24px; line-height: 28px; color: #ae1d37;  font-family:'BodoniSeventytwoITCW01-_731145'; font-size: 27px; line-height: 30px;  text-align: left; display: inline-block; vertical-align: top }
 .top_logo{ position: relative; display: inline-block; vertical-align: top; padding: 0px 0px 20px 0px }
 .top_logo img{ height: 94px; }
.top_left{ position: relative; float: left; margin: 10px 0px 0px 0px; }
 .head_desk_sttl{ font-family:'BodoniSeventytwoITCW01-_731145'; font-size: 27px; line-height: 30px; color: #ffffff; }
 .head_desk_ttl{ color: #ae1d37; font-size: 70px; line-height: 60px; font-style: italic; text-align: center;  }
  .head_mob_sttl{ font-family:'BodoniSeventytwoITCW01-_731145'; font-size: 27px; line-height: 30px; color: #ffffff; }
.head{ position: relative; background: #b3b2ad }
.head_desk{ position: relative; width: 100%; height: 422px; background: url(../images/head.jpg) top center no-repeat; }
.head_mob{ position: relative; width: 100%; min-height: 200px; background: url(../images/head_m.jpg) top center no-repeat;display: none; background-size: 100% auto }
.head_mob_spacer{ position: relative; width: 100%; max-width: 550px; margin: 0px auto 0px auto }
.head_mob_spacer img{ position: relative; width: 100%; display: block; }
.head_mob_ttl{ color: #ae1d37; font-size: 70px; line-height: 60px; font-style: italic; text-align: center;  }
.head_mob .inner{ max-width: 500px; width: 95% }
.album_top{ position: relative; float: right; text-align: right; margin: 10px 0px 0px 0px; width: 270px; }
.album_cover{ display: inline-block; vertical-align: middle;  }
.album_info{ display: inline-block; vertical-align: middle; max-width: 165px; text-align: center; }

.hh_left{ width: 500px; position: relative; text-align: center; margin: 200px 0px 0px 0px; text-align: center; }


 footer{ background: #ae1d37 }

@media handheld, only screen and (max-width: 830px)
    {

      .head_desk{ display: none; }
      .head_mob{ display: block; }
        .gallery_items{ width: 95%; margin: 0px auto 0px auto; max-width: 800px; position: relative; }
        .item{ width: 29%; margin: 1%; height: inherit; float: none; display: inline-block; vertical-align: top; }

 
    }



 @media handheld, only screen and (max-width: 800px) {
    .enter_web{ position: relative; top:0px; left: 0px; text-align: center; font-size: 20px; line-height: 25px; padding: 10px 0px 0px 0px; }
    .item{ float: none; display: inline-block; vertical-align: top; }
    .left_side{ float: none; margin: 10px auto 0px auto; width: 95% }
    .right_side{ float: none; margin: 10px auto 0px auto; width: 95%;}
    .player{ width: 100%;   }
    .player img{ width: 100% }
    .player iframe{ width: 100% }
    .album_info{ margin-top:10px; }
    .album_cover{ margin-top:10px; }
 }

  @media handheld, only screen and (max-width: 600px)
    {
  .item{ width: 45%; margin: 1%;  height: inherit;}

    }

    @media handheld, only screen and (max-width: 580px) {
.head_img{ height: inherit; }
.head_img_b{ display: none; }
.head_img_m{ display: block; }
        

    }




