html{ margin: 0px; padding: 0px;}
body{ font-family: 'Montserrat', serif; font-size:14px; line-height:18px;position: relative; margin: 0px; padding: 0px;}
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: #ffffff; 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: 900px; 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);}
.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;}
.videoWrapper {
    position: relative;
    padding-bottom: 51.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; display: block; border:8px solid #ffffff;
}
.top_bar{ position: relative; width: 100%; height: 1px; z-index: 10 }
.spacer{ width: 100%; max-width: 810px; position: relative; margin: 0px auto 0px auto }
.spacer img{ width: 100%; display: block; }
footer{ background: #24bfdb; position: relative; }
.main_ttl{ position: relative; font-size: 32px; line-height: 34px; color: #ffffff; font-weight: 800; letter-spacing: 3.px; margin: 10px auto 0px auto; width: 95%; text-transform: uppercase; }
.main_sttl{ position: relative; font-size: 24px; line-height: 26px; color: #dadddf; font-weight: 400; letter-spacing: 2px; margin: 5px auto 0px auto; width: 95%; text-transform: uppercase; }
.create_ttl{ position: relative; margin: 10px auto 0px auto; width: 95%; font-size: 24px; line-height: 28px; text-transform: uppercase; color: #000000; max-width: 570px; }
.content{ position: relative; margin: -40px auto 0px auto; position: relative; z-index: 10 }
.connect_txt{ width: 95%; max-width: 530px; margin: 10px auto 0px auto; position: relative; font-family: 'Lato',sans-serif;color: #253743; }
.connect_btn{ position: relative; margin: 0px auto 0px auto; width: 95%; max-width: 358px }
.connect_ttl{position: relative; margin: 15px 0px 0px 0px;}
.connect_btn img{ width: 100%; position: relative; display: block; }
.share_btns{position: relative; width: 95%; margin: 5px auto 0px auto !important; text-align: center;}
.share_btns img{ display: initial; vertical-align: middle; margin: 10px 5px 0px 5px !important }
.box{ width: 654px; margin: 20px auto 0px auto; position: relative; border: 1px solid #ffffff; background: #4e5f6a }
.abbr{ position: relative; margin: 15px auto 0px auto; color: #6b6969; font-size: 12px; line-height: 15px; font-family: 'Lato',sans-serif; width: 95%; max-width: 600px; }
.box_left{ width: 50%; position: relative; float: left; height: 506px; }
.box_right{ width: 50%; position: relative; float: right; border-left: 1px solid #ffffff; height: 506px; }
.player{ position: relative; width: 95%; max-width: 292px; margin: 10px auto 0px auto }
.player img{ position: relative; display: block; width: 100% }
.player iframe{ position: relative; display: block; width: 100% }
.box_icon{ position: relative; margin: 15px 0px 0px 0px; width: 100%; height: 68px; }
.box_ttl{ position: relative; margin: 0px auto 0px auto; width: 95%; font-size: 19px; line-height: 22px; }
.prize_ttl{ position: relative; font-size: 30px; line-height: 34px; color: #464646; font-family: 'Lato',sans-serif; font-weight: 700; width: 95%; margin: 10px auto 0px auto }
.prize_txt{ position: relative; font-size: 14px; line-height: 18px; color: #464646; font-family: 'Lato',sans-serif; font-weight: 300; width: 95%; max-width: 500px; margin: 10px auto 0px auto;  }
.prize_img{ width: 95%; max-width: 400px; position: relative; margin: 10px auto 0px auto }
.prize_img img{ width: 100% }
.prize_rules{ position: relative;   font-size: 14px; line-height: 24px; color: #ffffff; font-family: 'Lato',sans-serif; font-weight: 300; width: 95%; max-width: 250px; margin: 10px auto 0px auto}
.connect_top{ position: relative;  margin: 10px 0px 0px 0px; font-size: 30px; line-height: 33px  }
.connect_top a{ display: inline-block; vertical-align: middle; margin: 0px 5px 0px 0px }
.enter_web{ position: relative;  text-align: center; font-size: 22px; line-height: 25px; color: #ffffff; font-weight: 800; margin: 10px 0px 0px 0px; }

.copy{ position: relative; font-size: 13px; line-height: 18px; color: #414042; font-family: 'Lato',sans-serif; font-weight: 700 }
.footer_links{ position: relative; font-size: 13px; line-height: 18px; color: #ffffff; font-family: 'Lato',sans-serif; font-weight: 700 }
.footer_info{ position: relative; margin: 20px auto  0px auto; width: 95%; max-width: 600px; }
.f_logo{ position: absolute; top:20px; left: 10px; max-width: 100px; color: #414042}
.powered{ margin: 30px 0px 0px 0px; position: relative; }
.album_info{ position: relative; display: inline-block; vertical-align: middle;margin: 10px auto 0px auto; width: 95%; max-width: 340px; }
.album_cover{ display: inline-block; vertical-align: middle; margin: 10px auto 0px auto }
.buy{ position: relative; }
.buy img{ display: inline-block; vertical-align: middle; margin: 4px; position: relative; }
.album_ttl{ position: relative; font-size: 24px; line-height: 28px; color: #253743; text-transform: uppercase; font-weight: 700 }
.album_av{ position: relative; font-size: 16px; line-height: 18px; color: #253743; text-transform: uppercase; font-weight: 700 }

footer{ background: #232323 }

.top_covers{ position: relative;text-align: center; }
.top_covers ul { position: relative; list-style: none; margin: 0px; padding: 0px }
.top_covers ul li{ position: relative; width: 30%; margin: 1%; max-width: 300px; display: inline-block; vertical-align: top; }


     @media handheld, only screen and (max-width: 900px) {
body{ background: url(../images/back_m.jpg) #c4d2db top center no-repeat; background-size: 100% auto }
.connect_top{ display: none; }
.enter_web{ display: none; }
.f_logo{ position: relative; width: 100%; text-align: center; top:0px; left: 0px; margin: 20px auto 0px auto; max-width: 150px; }

       
        }

         @media handheld, only screen and (max-width: 680px) {
            .box{ width: 95% }
            .box_left{ width: 100%; position: relative; float: none; height: inherit;}
            .box_right{ width: 100%; position: relative; float: none; height: inherit; }
            .main_ttl{ position: relative; font-size: 25px; line-height: 28px; color: #ffffff; font-weight: 800; letter-spacing: 5px; margin: 10px auto 0px auto; width: 95%; text-transform: uppercase; }
.main_sttl{ position: relative; font-size: 20px; line-height: 22px; color: #dadddf; font-weight: 800; letter-spacing: 0px; margin: 5px auto 0px auto; width: 95%; text-transform: uppercase; }

         }

img {image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}