html{ margin: 0px; padding: 0px;}
body{ position: relative; margin: 0px; padding: 0px; background: #ffffff;
    width: 100%; font-family:arial, verdana, sans-serif; overflow: auto;}
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: #d1d2d2; text-decoration: none; }
.img-fluid {
    display: block;
    height: auto;
    max-width: 100%; margin: 0px auto 0px auto; position: relative;
}
.img-fluid {
    display: block;
    height: auto;
    max-width: 100%; margin: 0px auto 0px auto; position: relative;
}

#outer{ width: 100%;position: relative; margin: 0px auto 0px auto;  }
.inner{ max-width: 700px;width: 100%; position: relative; margin: 0px auto 0px auto; text-align: center; }
.inner_footer{ max-width: 700px;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(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);}
.shadow3{-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow:    0px 0px 8px 0px rgba(0, 0, 0, 0.4);
box-shadow:         0px 0px 8px 0px rgba(0, 0, 0, 0.4);}
.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);}
.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;}

.top_bar{ width: 100%; min-height: 25px; background: #ffffff;color: #000000; position: fixed; top:0px; left: 0px; width: 100%; z-index: 30}
.row{ width: 396px; height: 55px; position: relative; margin: 10px auto 0px auto; border: 2px solid #ffffff}

.upload_btn{ position: relative; margin: 10px 0px 0px 0px; text-align: center;}
.widget{ width: 400px; margin: 30px auto 0px auto; position: relative;}
.preview{ width: 100%; max-width: 392px; margin: 40px auto 0px auto; position: relative; }
.preview img{ width: 100%; display: block;border: 4px solid #ffffff; height: auto; box-sizing: border-box }

.logo{ position: relative; text-align: center; margin: 30px 0px 0px 0px;}
.main_ttl{ position: relative; text-align: center; margin: 10px 0px 0px 0px; color: #ffffff; font-size: 40px; line-height: 45px; text-transform: uppercase;}

.powered{ position: relative; text-align: center;}
.connect{ position: absolute; top:10px; left: 10px}
.connect img{ position: relative; vertical-align: middle; display: inline-block; margin: 0px 10px 0px 0px}
.in input{ font-family: 'Roboto Condensed', sans-serif; color: #ffffff; font-size: 24px; line-height: 55px; width: 250px; height: 55px; border: 0px; background: transparent;}
.in{ position: absolute; top:0px; left: 9px;}
.update{ position: absolute; top:-2px;right: -2px;}
.note{ font-family: Lato,sans-serif; color: #ffffff; font-size: 12px; line-height: 14px; text-align: center; margin: 5px auto 0px auto; max-width: 380px;  }
.note a {text-decoration: underline}
.buy_album{ position: relative; text-align: center; margin: 20px 0px 0px 0px}
.gallery{ position: relative; margin: 20px 0px 0px 0px}
.album_cover{ position: relative; display: inline-block; vertical-align: middle;}
.album_info{ position: relative; display: inline-block; vertical-align: middle; text-align: center;}
.album_btns{ position: relative; margin:6px 0px 0px 0px;}
.album_btns img{ vertical-align: middle; margin: 0px 5px 0px 5px;}

.share_top{ position: absolute; top:10px; left: 300px;}
.share_top img{ vertical-align: middle; margin: 0px 4px 0px 4px; display: inline-block;}


.gallery .inner{ max-width: 950px }

.item{ width: 180px; height: 180px; border: 5px solid #ffffff; float: left; margin: 10px;}
.item .pic{ width: 100%; height: auto !important; position: relative;  }
.item .pic img{ width: 100%; height: auto !important; display: block; }
.gallery_items{  max-width: 870px; position: relative; margin: 10px auto 0px auto; text-align: center; }
.gallery_ttl{ position: relative; font-size: 35px; line-height: 39px; color: #ffffff;  padding: 20px 0px 0px 0px;  }
.more{ position: relative; font-weight: 400; font-size: 30px; line-height: 34px; margin:10px 0px 0px 0px; color: #ffffff; font-weight: 400; }
.buy{ position: relative; margin-top: 30px; }

.socials{ position: relative;  width: 95%; margin: 0px auto 0px auto; text-align: center; }
.socials ul{ list-style: none; margin: 0px; padding: 0px;  position: relative; display: inline-block; vertical-align: middle; }
.socials ul li{ list-style: none; margin: 2px; width: 25px; height: 25px; padding: 0px;  position: relative; display: inline-block; vertical-align: middle; }
.socials ul li a{ display: block; width: 100%; height: 100%; position: relative;text-align: center; color: #000000; background: #ffffff; line-height: 25px; font-size: 15px; -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;}
.socials ul li a:hover{ opacity: 0.8 }

.top_bar .inner{ padding: 10px 0px 10px 0px; }
.enter_web{ position: relative; font-size: 18px; line-height: 25px;  float: right; text-align: right; width: 49%; }
.top_socials{ position: relative; font-size: 25px; line-height: 25px;  float: left; text-align: left; width: 49%; }

.top_bar .inner{ text-align: center; }

.main_logo{ position: relative; text-align: center; margin: 80px auto 0px auto; }


.white_btn{ border:2px solid #ffffff;;background: #ffffff; color: #000000;  font-size: 25px; line-height: 28px;  text-transform: uppercase;  padding: 10px 14px 10px 14px;  display: block;  position: relative;}
.white_btn i{ display: inline-block; vertical-align: middle; margin: 0px 4px 0px 0px; font-size: 130%;  position: relative; }
.white_btn span{ display: inline-block; vertical-align: middle; position: relative; }
.white_btn:hover{ color: #000000; background: #eeeeee; }

.white_btn5{ border:2px solid #ffffff;;background: #ffffff; color: #000000;  font-size: 25px; line-height: 28px;  text-transform: uppercase;  padding: 10px 0px 10px 0px;  display: inline-block;  position: relative; width: 45%; margin: 1%}
.white_btn5 i{ display: inline-block; vertical-align: middle; margin: 0px 4px 0px 0px; font-size: 130%;  position: relative; }
.white_btn5 span{ display: inline-block; vertical-align: middle; position: relative; }
.white_btn5:hover{ color: #000000; background: #eeeeee; }


.white_btn_sm{ border:2px solid #ffffff; background: #ffffff; color: #000000;  font-size: 20px; line-height: 25px;  text-transform: uppercase;   display: block; padding:10px 14px 10px 14px;   position: relative;}
.white_btn_sm i{ display: inline-block; vertical-align: middle; margin: 0px 4px 0px 0px; font-size: 140%;  position: relative; }
.white_btn_sm span{ display: inline-block; vertical-align: middle; position: relative; }
.white_btn_sm:hover{ color: #000000; background: #eeeeee; }

.btn_width { width: 100%; max-width: 392px; margin-left: auto; margin-right: auto; }

@media handheld, only screen and (max-width: 900px) {
.top_bar{ position: relative; }

}
 @media handheld, only screen and (max-width: 850px) {


.gallery_items{ width: 95%; }
        .item{ width: 28%; height: auto !important; margin:1%; position: relative; display: inline-block; vertical-align: top; float: none; }
    

    }

 @media handheld, only screen and (max-width: 800px) {
.inner{ width: 95% }

}
@media handheld, only screen and (max-width: 450px) {

        .item{ width: 43%; margin:1%; position: relative; display: inline-block; vertical-align: top; float: none; }

    

    }