:root {
    --color-dark: #111111;
    --color-light: #ffffff;
    --color-primary: #010dff;
    --color-secondary: #bcff6b;
}

body { font-family:'DM Sans', sans-serif; color:var(--color-dark); line-height:1.5; background:#f7f4f3; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family:"Inter", sans-serif; color:var(--color-dark); text-transform:uppercase; font-weight:800; font-style:italic; line-height:1; }

.h1, h1 { font-size:2.5rem; letter-spacing:-1px; margin-bottom:2rem; }
.h2, h2 { font-size:2rem; letter-spacing:-1px; margin-bottom:1.5rem; }
.h3, h3 { font-size:1.5rem; letter-spacing:-1px; margin-bottom:1.5rem; }
.h4, h4 { font-size:1.25rem; letter-spacing:-1px; margin-bottom:1.5rem; }
.h5, h5 { font-size:1rem; margin-bottom:1.5rem; }
.lead { font-weight:600; font-size:1.125rem; }
@media(min-width:992px) {
    .h1, h1 { font-size:6vw; letter-spacing:-2px; margin-bottom:3rem; }
    .h2, h2 { font-size:4vw; letter-spacing:-2px; margin-bottom:2.75rem; }
    .h3, h3 { font-size:3.5vw; letter-spacing:-1px; margin-bottom:2rem; }
    .h4, h4 { font-size:3vw; letter-spacing:-1px; margin-bottom:1.75rem; }
    .h5, h5 { font-size:2vw; margin-bottom:1.5rem; }
    .lead { font-weight:600; font-size:1.25rem; }
}

p { line-height:1.5; margin-bottom:1.5rem; font-weight:500; }
a, a:visited { color:var(--color-dark); font-weight:600; text-decoration:none; }
a:hover, a:active { color:#82cdf0; text-decoration:none; }
h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited, h5 a, h5 a:visited,
.h1 a, .h1 a:visited, .h2 a, .h2 a:visited, .h3 a, .h3 a:visited, .h4 a, h4 a:visited, .h5 a, .h5 a:visited
{ color:#24292e; text-decoration:none; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover,
.h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover { color:#82cdf0; text-decoration:none; }
b, strong, .font-weight-bold { font-weight:500!important; }
p + h1, p + h2, p + h3, p + h4, p + h5 { margin-top:3rem; }

.py-6 { padding-top:6rem!important; padding-bottom:6rem!important; }
.py-8 { padding-top:8rem!important; padding-bottom:8rem!important; }

.bg-brand-primary { background:var(--color-primary); }
.bg-brand-secondary { background:var(--color-secondary); }

.bg-dark { background:var(--color-dark)!important; color:var(--color-light)!important; }
.bg-dark * { color:var(--color-light)!important; }

.bg-white { background:#ffffff; }
.bg-lightgrey { background:#f8f8f8; }
.bg-darkgrey { background:#5c6d7d; }
.bg-light { background:#f7f4f3!important; }
.bg-lightblue { background:#f1f3f4; }
.bg-gradient { background:#8cc8f0; background-image: linear-gradient(to right top, #abb6e5, #a1bceb, #96c2ee, #8cc8f0, #82cdf0); color:#fff;; }
.border-top-right-radius { border-top-right-radius:30px; overflow:hidden; }
.border-top-left-radius { border-top-left-radius:30px; overflow:hidden; }
.border-radius { border-radius:30px; overflow:hidden; }
.sticky-top { z-index:1000!important; }


/* Aspect ratio rules */
.image-ratio-landscape-3-2 img { aspect-ratio: 3 / 2; }
.image-ratio-portrait-2-3 img { aspect-ratio: 2 / 3; }
.image-ratio-landscape-4-3 img { aspect-ratio: 4 / 3; }
.image-ratio-portrait-3-4 img { aspect-ratio: 3 / 4; }
.image-ratio-landscape-16-9 img { aspect-ratio: 16 / 9; }
.image-ratio-portrait-9-16 img { aspect-ratio: 9 / 16; }
.image-ratio-square-1-1 img { aspect-ratio: 1 / 1; }

.image-ratio-landscape-3-2 img,
.image-ratio-portrait-2-3 img,
.image-ratio-landscape-4-3 img,
.image-ratio-portrait-3-4 img,
.image-ratio-landscape-16-9 img,
.image-ratio-portrait-9-16 img,
.image-ratio-square-1-1 img { width:100%; height:auto; object-fit: cover; display: block }



.hero { height:100vh; display:flex; align-items:center; justify-content:center; background-color:#f7f4f3; background-position:top center; background-repeat:no-repeat; background-size:cover; position:relative; }
.hero.center-image { background-position:center center; }
.hero-body { max-width:960px; text-align:center; padding-left:1.5rem; padding-right:1.5rem; }
.hero-body h1 { color:#fff; border:none; }
.hero-body p { color:#fff; line-height:1.5; }
.hero.with-text:after { display:block; content:""; position:absolute; z-index:2; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.4); }
.hero * { position:relative; z-index:3; color:#fff; }


.btn { text-transform:uppercase; letter-spacing:1px; font-size:0.875rem; font-weight:700; text-decoration:none!important; cursor:pointer; padding:1.25rem 2rem; border-radius:5rem; }

.btn-lg {  padding:1.5rem 3.5rem; }
.btn-xs-sm { padding:.5rem .75rem; }
.btn-sm { padding:0.5rem 1rem; }

.btn-primary { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-light)!important; }
.btn-primary:hover { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-light)!important; }
.btn-outline-primary { border-width:2px; border-color:var(--color-primary); color:var(--color-light)!important; }
.btn-outline-primary:hover { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-light)!important; }

.btn-secondary { background:var(--color-secondary); border-color:var(--color-secondary); color:var(--color-primary)!important; }
.btn-secondary:hover { background:var(--color-secondary); border-color:var(--color-secondary); color:var(--color-primary)!important; }
.btn-outline-secondary { border-width:2px; border-color:var(--color-secondary); color:var(--color-secondary)!important; }
.btn-outline-secondary:hover { background:var(--color-secondary); border-width:2px; border-color:var(--color-secondary); color:var(--color-primary)!important; }

.btn-light { background:var(--color-light); border-color:var(--color-light); color:var(--color-dark)!important; }
.btn-outline-light { border-width:2px; border-color:var(--color-light); color:var(--color-light)!important; }
.btn-outline-light:hover { background:var(--color-light); border-width:2px; border-color:var(--color-light); color:var(--color-dark)!important; }

.btn-dark { background:var(--color-dark); border-color:var(--color-dark); color:var(--color-light)!important; }
.btn-outline-dark { border-width:2px; border-color:var(--color-dark); color:var(--color-light)!important; }
.btn-outline-dark:hover { background:var(--color-dark); border-width:2px; border-color:var(--color-dark); color:var(--color-light)!important; }


@media(min-width:992px) {
	.btn-xs-sm { padding:.5rem 1.250rem; }
}

.rounded-corners { border-radius:2rem; }



.badge { padding:.4rem .6rem; }

.footer { background:var(--color-light); font-size:0.813rem; }
.footer a { color:var(--color-dark); }
.footer a.footer-icon { display:inline-block; padding:1rem; }

.navbar { transition: background-color 0.3s ease; padding:1.25rem 0.5rem 1.25rem 1.5rem; width:100%; }
.navbar.bg-light { background:var(--color-light)!important; }
.navbar-nav .nav-item { padding-right:0.75rem; padding-left:0.75rem; }
.navbar-nav .nav-link { color:var(--color-dark); position:relative; text-transform:uppercase; font-size:0.813rem; font-weight:600; letter-spacing:1px; padding-right:0; padding-left:0; }
.navbar-nav .nav-link:not(.btn-primary):after { content:''; position:absolute; left:0; bottom:0; width: 100%; height: 2px; background-color: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.navbar-nav .nav-link:hover:after { transform: scaleX(1); }
.navbar-nav .nav-link.btn {  padding:0.5rem 1rem; }

.navbar-light .navbar-nav .nav-link { color:var(--color-dark); }
.navbar-light .navbar-nav .nav-link.btn-primary { color:var(--color-dark); }
.navbar-dark .navbar-nav .nav-link { color:var(--color-light); }

.navbar-brand { width:160px; height: 34px; background-position:center center; background-repeat:no-repeat; background-size:contain; }
.navbar-light .navbar-brand { background-image:url(/images/prom-photo-swap-logo.png); }
.navbar-dark .navbar-brand { background-image:url(/images/prom-photo-swap-logo-light.png); }
@media(min-width:992px) {
    .navbar { padding:1.25rem 1.5rem; }
    .navbar-brand { width:240px; height:44px; }
}

.header-count { border-radius:50%; min-width:16px; height:16px; line-height:16px; font-size:10px; color:#fff; background:#82cdf0; border:1px solid #fff; display:inline-block; text-align:center; position:absolute; top:3px; right:2px; }

.bi-bell-fill { -webkit-transform-origin:center top; -ms-transform-origin:center top; transform-origin:center top; }
.bi-bell-fill.active { -webkit-animation:animation-layer-1 5000ms; animation:animation-layer-1 5000ms; }

@-webkit-keyframes animation-layer-1 {
  0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  8.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  12.0% { -webkit-transform:rotate(42deg); transform:rotate(42deg); }
  16.0% { -webkit-transform:rotate(-35deg); transform:rotate(-35deg); }
  20.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  23.0% { -webkit-transform:rotate(28deg); transform:rotate(28deg); }
  26.0% { -webkit-transform:rotate(-20deg); transform:rotate(-20deg); }
  29.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  31.0% { -webkit-transform:rotate(16deg); transform:rotate(16deg);}
  33.0% { -webkit-transform:rotate(-12deg); transform:rotate(-12deg); }
  35.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }  
  37.0% { -webkit-transform:rotate(-6deg); transform:rotate(-6deg); }
  39.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
}

@keyframes animation-layer-1 {
  0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  8.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  12.0% { -webkit-transform:rotate(42deg); transform:rotate(42deg); }
  16.0% { -webkit-transform:rotate(-35deg); transform:rotate(-35deg); }
  20.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  23.0% { -webkit-transform:rotate(28deg); transform:rotate(28deg); }
  26.0% { -webkit-transform:rotate(-20deg); transform:rotate(-20deg); }
  29.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
  31.0% { -webkit-transform:rotate(16deg); transform:rotate(16deg);}
  33.0% { -webkit-transform:rotate(-12deg); transform:rotate(-12deg); }
  35.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }  
  37.0% { -webkit-transform:rotate(-6deg); transform:rotate(-6deg); }
  39.0% { -webkit-transform:rotate(0deg); transform:rotate(0deg); }
}


.navbar-light .navbar-nav .btn { font-size:0.813rem; }
.dropdown-menu { margin:0; min-width:15rem; border-radius:0; border:0; box-shadow:0 2px 12px rgba(0,0,0,0.05); }
.navbar .dropdown:hover > .dropdown-menu { display:block; }
.dropdown-item { text-transform:uppercase; font-size:0.750rem; letter-spacing:1px; color:#5c6d7d!important; }

@media (max-width:991px) {
 .navbar-light .navbar-toggler { border:0; outline:0; }
 .navbar-nav.mr-auto { padding-top:20px; }
 .navbar-nav .dropdown-menu { /*display:block!important;*/ border:0; border-bottom:none; border-radius:0; margin-top:0; padding-top:0; }
 .navbar-nav .dropdown-menu .dropdown-item { padding-left:0.5rem; }
}


.navbar .navbar-toggler {
 border:none;
 background:transparent!important;
 padding:.5rem .5rem
}

.navbar .navbar-toggler:focus {
 outline:none;
 background:transparent!important
}

.navbar .navbar-toggler .icon-bar {
 background-color:#5c6d7d;
 transform:rotate(0deg) translate(0,0);
 transition:ease all .2s
}

.navbar .navbar-toggler .icon-bar {
 display:block;
 width:22px;
 height:2px;
 border-radius:1px
}

.navbar .navbar-toggler .icon-bar+.icon-bar {
 margin-top:4px
}

.navbar .navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
 transform:rotate(45deg) translate(5px,4px);
 transition:ease all .2s
}

.navbar .navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) {
 opacity:0;
 transition:ease all .2s
}

.navbar .navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) {
 transform:rotate(-45deg) translate(4px,-4px);
 transition:ease all .2s
}

.dropdown-toggle::after { display:none; }

@media (max-width:992px) {
    .albums-sidebar { height:100%; position:fixed; z-index:1090!important; top:0; left:0; width:300px; transform:translateX(-300px); transition:transform 250ms ease-in-out; }
    .albums-sidebar.active { transform:translateX(0);}
}

svg { vertical-align:text-bottom; }
.albums-sidebar { -ms-flex:0 0 300px; -webkit-box-flex:0; flex:0 0 300px; max-width:300px; }
.albums-sidebar .main-list li > a { font-size:0.750rem; font-weight:500; line-height:1.2; display:block; padding:0.75rem 0.5rem 0.75rem 2rem; border-top-right-radius:25px; border-bottom-right-radius:25px; color:inherit; }
.albums-sidebar .main-list li > a:hover, .albums-sidebar .main-list li > a.active { display:block; text-decoration:none; color:inherit; background:#ffffff; }
.albums-sidebar svg { color:inherit; }
.albums-sidebar .main-list-svg { vertical-align:text-bottom; }
.sub-list { max-height:0; opacity:0; -webkit-transition:max-height 0.15s ease-out, opacity 0.15s ease-out; -o-transition:max-height 0.15s ease-out, opacity 0.15s ease-out; transition:max-height 0.15s ease-out, opacity 0.15s ease-out; overflow:hidden; }
.expand .sub-list { max-height:1000px; opacity:1; -webkit-transition:max-height 0.25s ease-in, opacity 0.25s ease-in; -o-transition:max-height 0.25s ease-in, opacity 0.25s ease-in; transition:max-height 0.25s ease-in, opacity 0.25s ease-in; }
.sub-list li:last-child { padding-bottom:1rem; }
.sub-list-expander { display:inline-block; line-height:1; position:absolute; z-index:9999; left:0; padding:0.75rem 0.5rem; }
.sub-list-expander svg { vertical-align:bottom; -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:-webkit-transform 0.15s ease-out; transition:-webkit-transform 0.15s ease-out; -o-transition:transform 0.15s ease-out; transition:transform 0.15s ease-out; transition:transform 0.15s ease-out, -webkit-transform 0.15s ease-out; }
.expand .sub-list-expander svg { -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg); -webkit-transition:-webkit-transform 0.15s ease-in; transition:-webkit-transform 0.15s ease-in; -o-transition:transform 0.15s ease-in; transition:transform 0.15s ease-in; transition:transform 0.15s ease-in, -webkit-transform 0.15s ease-in; }
.albums-sidebar .sub-list li > a { font-size:0.750rem; font-weight:500; display:block; padding:0.25rem 0.5rem 0.25rem 4rem; color:inherit; white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; }
.albums-sidebar .sub-list li > a:hover, .albums-sidebar  .sub-list li > a.active { display:block; text-decoration:none; color:inherit; background:#ffffff; }
.site-overlay { background:rgba(0,0,0,0.4); position:fixed; z-index:1080; top:0; left:0; right:0; bottom:0; width:100%; height:100%; opacity:0; transition:opacity 250ms ease-in-out; }
.site-overlay.active { opacity:1; }

label { font-weight:500; font-size:0.875rem; }
/*.form-control { height:calc(2em + .75rem + 2px); padding:.5rem .75rem; }*/
.form-group { margin-bottom:1.5rem; }
.input-group .form-control { height:calc(1.5em + .75rem + 2px); padding:.375rem .75rem; }

.nav-pills { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nav-pills .nav-item { -ms-flex:0 0 auto; flex:0 0 auto; width:auto; max-width:100%; }
.nav-pills .nav-link { color:#5c6d7d; border-radius:30px; }
.nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color:#5c6d7d; }


.nav-tabs { border-bottom:none; }
.nav-tabs .nav-item { padding:0 1rem 0 0; }
.nav-tabs .nav-link { border:none; border-bottom:2px solid transparent; border-top-left-radius:0; border-top-right-radius:0; color:#b8b8b8; font-weight:500; padding:1rem 0; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color:#5c6d7d; background-color:#fff; border-color:#5c6d7d; }
.nav-tabs .nav-link:hover:not(.active) { color:#5c6d7d; background-color:#fff; border-color:transparent; }


.breadcrumb { background-color:transparent; border-radius:0; padding:0 0 0.75rem 0; border-bottom:1px solid rgba(0,0,0,0.05); }

.blockquote { position:relative; border:0; font-family:"Headline-Light", serif; font-size:1.1rem; font-style:italic; padding:0.75rem; }
.blockquote:before { content:'\201C'; color:#c4c4c4; font-size:4rem; position:absolute; left:-20px; top:-20px; }
.blockquote:after { content:'\201D'; color:#c4c4c4; font-size:4rem; position:absolute; right:0; top:-20px; }
.blockquote-byline { text-transform:uppercase; font-size:0.875rem; }
.blockquote-byline:before { content:''; display:block; width:60px; height:2px; margin:0 auto 20px auto; background:#4c4c4c; }

@media (min-width:992px) {
 .blockquote { font-size:1.1rem; font-style:italic; }
 .blockquote:before { font-size:6rem; left:-50px; top:-40px; }
 .blockquote:after { font-size:6rem; right:-50px; top:-40px; }
}

@media (min-width:1400px) {
 .blockquote { font-size:1.2rem; font-style:italic; }
 .blockquote:before { font-size:6rem; left:-60px; top:-50px; }
 .blockquote:after { font-size:6rem; right:-60px; top:-50px; }
}

img { display:inline-block; max-width:100%; height:auto; vertical-align:top; }

.home-invite-col { background:url(/images/guest-filming-wedding.jpg) 50% 50% no-repeat; height:400px; }

@media (min-width:992px) {
 .home-invite-col { height:680px; }
}

.comment { border-radius:5px; position:relative; }
.comment .comment_buttons { display:none; position:absolute; top:15px; right:15px; }
.comment:hover .comment_buttons { display:block; }

.stacked-gallery { max-width:520px; margin:0 auto; }
.stacked-gallery .photo-wrapper { display:block; position:relative; background:#fff; margin-bottom:1.5rem;  }
.stacked-gallery .photo-wrapper img { display:block; position:relative; border-radius:0.5rem; overflow:hidden; }
.stacked-gallery .photo-wrapper.is-selected img { opacity:0.5; }
.stacked-gallery .photo-wrapper video { height:auto; max-width:100%; min-width:100%; }

.justify-gallery .photo-wrapper { display:block; position:relative; background:#fff; margin-bottom:1.5rem;  }
.justify-gallery .photo-wrapper img { display:block; position:relative; border-radius:0.5rem; overflow:hidden; }
.justify-gallery .justify-gallery-placeholder { background:#F4F1BB; height:150px; width:100%; max-width:480px; }
.justify-gallery .photo-wrapper.is-selected img { opacity:0.5; }
.justify-gallery .photo-wrapper video { height:auto; max-width:100%; min-width:100%; }

@media (min-width:768px) {
 .justify-gallery { display:flex; flex-wrap:wrap; margin:-5px; overflow:hidden; }
 .justify-gallery:after { content:''; flex-grow:999999999; height:0; min-width:240px; }
 .justify-gallery .photo-wrapper { display:block; flex-grow:1; height:240px; margin:5px; position:relative; }
 .justify-gallery .photo-wrapper a { position:relative; }
 .justify-gallery .photo-wrapper:not(.selectable) a:hover:after { content:""; display:block; position:absolute; z-index:2; top:0; bottom:0; left:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.2); }
 .justify-gallery .photo-wrapper img, .justify-gallery .photo-wrapper video { height:240px; width: 100%; max-width:100%; min-width:100%; object-fit:cover; object-position:center; vertical-align:bottom; }
 .justify-gallery .justify-gallery-placeholder { max-width:240px; }
}

@media (min-width:992px) {
 .justify-gallery { display:flex; flex-wrap:wrap; margin:-5px; overflow:hidden; }
 .justify-gallery:after { content:''; flex-grow:999999999; height:0; min-width:200px; }
 .justify-gallery .photo-wrapper { display:block; flex-grow:1; height:400px; margin:5px; position:relative; }
 .justify-gallery .photo-wrapper img, .justify-gallery .photo-wrapper video { height:400px; width: 100%; max-width:100%; min-width:100%; object-fit:cover; object-position:center; vertical-align:bottom; }
 .justify-gallery .justify-gallery-placeholder { max-width:400px; }
}




/*
Sort of works...
Looks great, but images are laid out down the column so aren't in order of being taken!
.justify-gallery { -webkit-column-count:4; -moz-column-count:4; column-count:4; -webkit-column-gap:1em; -moz-column-gap:1em; column-gap:1em; margin:0; padding:0; -moz-column-gap:1.5em; -webkit-column-gap:1.5em; column-gap:1.5em; font-size:.85em; }
.justify-gallery .photo-wrapper { display:inline-block; background:#fff; margin:0 0 1.5em; border-radius:0.5rem; overflow:hidden; position:relative; width:100%; -webkit-transition:1s ease all; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
.justify-gallery .photo-wrapper img { max-width:100%; }
.justify-gallery .photo-wrapper.is-selected img { opacity:0.5; }

@media only screen and (max-width:320px) {
    .justify-gallery { -moz-column-count:1; -webkit-column-count:1; column-count:1; }
}

@media only screen and (min-width:321px) and (max-width:768px) {
    .justify-gallery { -moz-column-count:2; -webkit-column-count:2; column-count:2; }
}

@media only screen and (min-width:769px) and (max-width:1200px) {
    .justify-gallery { -moz-column-count:3; -webkit-column-count:3; column-count:3; }
}

@media only screen and (min-width:1201px) {
    .justify-gallery { -moz-column-count:4; -webkit-column-count:4; column-count:4; }
}
*/


/*
.justify-gallery .photo-wrapper { display:block; position:relative; background:#fff; margin-bottom:1.5rem; border-radius:0.5rem; overflow:hidden; }
.justify-gallery .justify-gallery-placeholder { background:#F4F1BB; height:150px; width:100%; max-width:480px; }
.justify-gallery .photo-wrapper.is-selected img { opacity:0.5; }
.justify-gallery .photo-wrapper video { height:auto; max-width:100%; min-width:100%; }

@media (min-width:768px) {
    .justify-gallery { display:flex; flex-wrap:wrap; margin:0 -0.5rem; }
    .justify-gallery .photo-wrapper { display:block; position:relative;
        --ratio:calc(var(--width)/var(--height));
        --row-height:12rem;
        flex-basis:calc(var(--ratio)*var(--row-height));
        flex-grow:calc(var(--ratio)*100);
        margin-left:0.5rem;
        margin-right:0.5rem; margin-bottom:1rem; }
    .justify-gallery .photo-wrapper a { position:relative; }
    .justify-gallery .photo-wrapper img, .justify-gallery .photo-wrapper video { height:100%;
        -o-object-fit:cover;
        object-fit:cover;
        transition:opacity .3s ease;
        width:100%; }
    .justify-gallery .justify-gallery-placeholder { max-width:280px; }
}

@media (min-width:992px) {
    .justify-gallery .photo-wrapper {
        --ratio:calc(var(--width)/var(--height));
        --row-height:14rem;
        flex-basis:calc(var(--ratio)*var(--row-height));
        flex-grow:calc(var(--ratio)*100);
        margin-left:0.5em;
        margin-right:0.5em; margin-bottom:1rem; }
}

@media (min-width:1200px) {
    .justify-gallery .photo-wrapper {
        --row-height:16em;
        flex-grow:calc(var(--width)/var(--height)*100);
        flex-grow:calc(var(--ratio)*100);
        margin-bottom:0.75em;
        margin-right:0.75em;
        --ratio:calc(var(--width)/var(--height));
        flex-basis:calc(var(--width)/var(--height)*12em);
        flex-basis:calc(var(--ratio)*var(--row-height));
    }
}*/

.bulk-confirm-wrapper { transform:translateY(100%) translateZ(0); background:#fff; box-shadow:0 0 16px rgba(0,0,0,0.4); position:fixed; bottom:0; left:0; right:0; width:100%; z-index:9996; opacity:0; }
.bulk-confirm-wrapper.active { animation:animateActionIn 0.2s ease-in-out; animation-fill-mode:forwards; }
@keyframes animateActionIn {
 from { transform:translateY(100%); opacity:0; }
 to { transform:translateY(0%); opacity:1; }
}
@keyframes animateActionOut {
 from { transform:translateY(0%); opacity:1; }
 to { transform:translateY(100%); opacity:0; }
}
/*Hide images with no source for lazy loading*/
img:not([src]) { visibility:hidden; }

/*WPS Icons*/
.wps-i { display:inline-block; vertical-align:middle; width:1.188rem; height:1.188rem; background-position:center center; background-repeat:no-repeat; background-size:contain; }
.wps-i.i-lg { width:1.500rem; height:1.500rem; }
.wps-i.i-sm { width:1rem; height:1rem; }
.i-heart-o { background-image:url(/images/icons/i-heart-o.svg); }
.i-heart-s { background-image:url(/images/icons/i-heart-s.svg); }
.i-heart-white-s { background-image:url(/images/icons/i-heart-white-s.svg); }
.i-comment-o { background-image:url(/images/icons/i-comment-o.svg); }
.i-comment-s { background-image:url(/images/icons/i-comment-s.svg); }
.i-comment-white-s { background-image:url(/images/icons/i-comment-white-s.svg); }
.i-trash-o { background-image:url(/images/icons/i-trash-o.svg); }
.i-magnifier-add-o { background-image:url(/images/icons/i-magnifier-add-o.svg); }
.i-plus-o { background-image:url(/images/icons/i-plus-o.svg); }
.i-plus-white-o { background-image:url(/images/icons/i-plus-white-o.svg); }
.i-arrow-left { background-image:url(/images/icons/i-arrow-left.svg); }
.i-arrow-right { background-image:url(/images/icons/i-arrow-right.svg); }
.i-options { background-image:url(/images/icons/i-options-o.svg); }
.i-options-vertical { background-image:url(/images/icons/i-options-vertical-o.svg); }
.i-download { background-image:url(/images/icons/i-download.svg); }
.i-rotate { background-image:url(/images/icons/i-rotate.svg); }
.i-picture-o { background-image:url(/images/icons/i-picture-o.svg); }
.i-bag-o { background-image:url(/images/icons/i-bag-o.svg); }
.i-arrow-right-circle { background-image:url(/images/icons/i-arrow-right-circle.svg); }
.i-folder-o { background-image:url(/images/icons/i-folder-o.svg); }
.i-bell-o { background-image:url(/images/icons/i-bell-o.svg); }
.i-bell-s { background-image:url(/images/icons/i-bell-s.svg); }
.i-eye { background-image:url(/images/icons/i-eye.svg); }
.i-eye-slash { background-image:url(/images/icons/i-eye-slash.svg); }
.i-arrow-up-circle-b { background-image:url(/images/icons/i-arrow-up-circle-blue.svg); }
.i-lock { background-image:url(/images/icons/i-lock.svg); }
.i-lock-open { background-image:url(/images/icons/i-lock-open.svg); }

.i-upgrade-o { background-image:url(/images/icons/i-upgrade-o.svg); }
.i-upgrade-s { background-image:url(/images/icons/i-upgrade-s.svg); }
.i-upgrade-white-s { background-image:url(/images/icons/i-upgrade-white-s.svg); }

.i-circle-loader { border:1px solid rgba(0,0,0,.2); border-left-color:#fff; animation:loader-spin 1.2s infinite linear; position:relative; display:inline-block; vertical-align:top; border-radius:50%; width:20px; height:20px; position:absolute; top:50%; left:50%; margin-top:-10px; margin-left:-10px }

.i-social-facebook { background-image:url(/images/icons/i-social-facebook.png); }
.i-social-instagram { background-image:url(/images/icons/i-social-instagram.png); }
.i-social-twitter { background-image:url(/images/icons/i-social-twitter.png); }

@keyframes loader-spin {
    0% {
        transform:rotate(0deg)
    }

    100% {
        transform:rotate(360deg)
    }
}

.nav-prev, .nav-next { display:none; }
@media (min-width:991px) {
	.nav-prev { display:block; position:absolute; top:50%; left:-38px; transform:translateY(-50%); }
	.nav-next { display:block; position:absolute; top:50%; right:-38px; transform:translateY(-50%); }
}

#album_cover label { vertical-align:middle; }
.switch { display:inline-block; height:26px; position:relative; width:50px; vertical-align:middle; margin-right:0.5rem; }
.switch input { display:none; }
.switch .slider { border-radius:26px; background-color:#ccc; bottom:0; cursor:pointer; left:0; position:absolute; right:0; top:0; transition:.3s; webkit-transition:.3s; }
.switch .slider:before { border-radius:50%; background-color:white; bottom:3px; content:""; height:20px; left:3px; position:absolute; transition:.3s; webkit-transition:.3s; width:20px; }
.switch input:checked + .slider { background-color:#82cdf0; }
.switch input:focus + .slider { box-shadow:0 0 1px rgba(0,0,0,0.3); }
.switch input:checked + .slider:before { ms-transform:translateX(24px); transform:translateX(24px); webkit-transform:translateX(24px); }
.blocked { color:#b8b8b8; }
form label.error { font-size:12px; font-style:italic; color:#cc0000; margin:10px 0 0 0; }

body.fabutton-active { overflow:hidden; height:auto; -ms-touch-action:manipulation; touch-action:manipulation; -webkit-overflow-scrolling:touch; }
.fabutton-overlay { display:none; opacity:0; position:fixed; z-index:96; top:0; left:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.4); }
.fabutton-wrapper { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); text-align:center; z-index:1000; }
.fabutton-menu { display:none; transform:translateY(80px) translateZ(0); opacity:0; position:relative; z-index:98; }
.fabutton-menu-item { background:#ffffff; color:#5c6d7d; border-radius:20px; padding:0.45rem 1.5rem; margin-bottom:0.75rem; }
.fabutton-menu-item a { color:#5c6d7d; }
.fabutton { position:relative; z-index:99; display:inline-block; cursor:pointer; box-shadow:0 2px 12px rgba(0,0,0,0.4); background:#82cdf0/*#2a6*/; width:68px; height:68px; border-radius:68px; }
.fabutton .wps-i { transition:all .3s ease-in-out; position:absolute; top:50%; left:50%; -webkit-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%); }

@media(min-width:992px) {
    .fabutton-wrapper { bottom:30px; right:30px; }
    .fabutton { box-shadow:0 2px 14px rgba(0,0,0,0.42); background:#2a6; width:68px; height:68px; border-radius:68px; }
}
.fabutton-wrapper.active .fabutton-menu { animation:animateSMOverlayIn 0.3s ease-in-out; animation-fill-mode:forwards; display:block; }
.fabutton-wrapper.active .wps-i { -webkit-transform:translateX(-50%) translateY(-50%) rotate(315deg); -ms-transform:translateX(-50%) translateY(-50%) rotate(315deg); transform:translateX(-50%) translateY(-50%) rotate(315deg); }
body.fabutton-active .fabutton-overlay { animation:fadeIn 0.3s ease-in-out; animation-fill-mode:forwards; display:block; }

@keyframes animateSMOverlayIn {
 from { transform:translateY(80px); opacity:0; }
 to { transform:translateY(0%); opacity:1; }
}
@keyframes animateSMOverlayOut {
 from { transform:translateY(0%); opacity:1; }
 to { transform:translateY(80px); opacity:0; }
}
@keyframes fadeIn {
 from { opacity:0; }
 to { opacity:1; }
}
@keyframes fadeOut {
 from { opacity:1; }
 to { opacity:0; }
}

.album-wrap { border-radius:0.5rem; overflow:hidden; position:relative; }
.album-link { display:flex; justify-content:center; align-items:center; overflow:hidden; height:260px; /*padding-bottom:75%;*/ }
.album-link img { flex-shrink:0; min-width:100%; min-height:100%; object-fit:cover; }


/*.album-link { display:block; overflow:hidden; position:relative; padding-bottom:75%; }
.album-link img { position:absolute; object-fit:cover; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }
.album-link img.portrait { position:absolute; max-width:initial; width:100%; height:auto; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }
.album-link img.landscape { position:absolute; max-width:initial; width:auto; height:100%; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }*/
.album-detail { position:absolute; bottom:0; width:100%; color:#fff; padding:1.5rem 0 1rem 1rem; background:rgb(0,0,0); background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);}
.album-detail * { color:#fff!important; }
.album-create-new { color:#1d221e!important; font-size:0.875rem; }
.album-actions { position:absolute; z-index:1020; bottom:0; width:100%; transform:translateY(100%); transition:transform 250ms ease-in-out; background:#fff; padding:1rem 0 1rem 0; border-top-right-radius:20px; border-top-left-radius:20px; box-shadow:0 0 16px rgba(0,0,0,0.2); }
.album-actions.active { transform:translateX(0); }
.album-actions a { display:block; color:#1d221e!important; font-size:0.750rem; }
.album-actions a:hover { text-decoration:none }
.album-actions-close { cursor:pointer; position:absolute; z-index:1020; top:20px; right:20px; display:inline-block; background:#fff; padding:0.5rem 0.75rem; margin-bottom:1rem; border-radius:20px; color:#1d221e!important; font-size:0.750rem; text-align:center; text-transform:uppercase; font-weight:500; opacity:0; transition:opacity 250ms ease-in-out; }
.album-actions-overlay { display:block; position:absolute; z-index:1010; top:0; bottom:0; left:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.6); opacity:0; transition:opacity 250ms ease-in-out; }
.album-actions-overlay.active, .album-actions-close.active { opacity:1; }
@media(min-width:992px) {
    .album-create-new { font-size:1rem; }
}

/* Photo Card Modal */
.lds-ripple { display:inline-block; position:relative; width:80px; height:80px; }
.lds-ripple div { position:absolute; border:4px solid #82cdf0; opacity:1; border-radius:50%; animation:lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
.lds-ripple div:nth-child(2) { animation-delay:-0.5s; }
@keyframes lds-ripple {
    0% { top:36px; left:36px; width:0; height:0; opacity:1; }
    100% { top:0px; left:0px; width:72px; height:72px; opacity:0; }
}

@media (min-width:1300px) {
    .modal-xl { max-width:1200px; }
}
@media (min-width:1400px) {
    .modal-xl { max-width:1300px; }
}
.photo-wrapper:not(.selectable):not(.pending-photo) { cursor:zoom-in; }
.modal-content { border:none; }
#photoModal .modal-content { height:calc(100vh - 1.5rem)!important; max-height:calc(100vh - 1.5rem)!important; }
.modal-dialog { margin:0 auto 1.5rem auto; }
.modal-photo-wrapper, .modal-video-wrapper { min-height:50vh; position:relative; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -ms-flex-pack:center!important; justify-content:center!important; -ms-flex-align:center!important; align-items:center!important; /*-webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column;*/ }
.modal-photo-lg { max-height:calc(100vh - 3.5rem); }
.modal-backdrop.show { opacity:0.8; }
.modal-comments { overflow-y:auto;  }

.js-next-photo,.js-prev-photo { cursor:pointer; position:absolute; top:50%; transform:translateY(-50%); z-index:1050; width:40px; height:40px; line-height:40px; border-radius:30px; text-align:center; background-color:#f7f4f3; }
.js-next-photo:hover,.js-prev-photo:hover { cursor:pointer; background-color:#f7f4f3; }
.js-next-photo img,.js-prev-photo img { width:11px; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); }
.js-next-photo { right:5px; }
.js-prev-photo { left:5px; }
.js-close-modal, .js-comment, .js-like-photo, .js-save-photo { cursor:pointer; }
.js-close-modal { padding:1rem; }
/*.js-close-modal svg { width:1.5rem; height:1.5rem; }*/

.js-more-photo-options { cursor:pointer; width:40px; height:40px; line-height:34px; text-align:center; border-radius:40px; }
.js-more-photo-options:hover { cursor:pointer; background-color:rgba(0,0,0,0.05); }
.js-more-photo-options svg { vertical-align:middle; width:1.25rem; height:1.25rem; }

@media (min-width:576px) {
    /*.modal-dialog { margin:0 auto 1.75rem auto; }*/
}
@media(min-width:992px) {
    .js-next-photo,.js-prev-photo { position:absolute; width:40px; height:40px; line-height:40px; border-radius:40px; }
    .js-next-photo { right:10px; }
    .js-prev-photo { left:10px; }
    .js-next-photo img,.js-prev-photo img { width:8px; }
}


.pending-photo .accept_photo { position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); }
.pending-photo .accept_photo .photo_accept,
.pending-photo .accept_photo .photo_decline { display:inline-block; width:38px; height:38px; line-height:38px; text-align:center; border-radius:38px; background:#fff; }
.pending-photo .accept_photo .outcome { display:inline-block; padding:0 1rem; height:38px; line-height:38px; text-align:center; border-radius:38px; background:#fff; }
.pending-photo .accept_photo .photo_accept:hover,
.pending-photo .accept_photo .photo_decline:hover { box-shadow:0 1px 16px rgba(0,0,0,0.4); }
.pending-photo .accept_photo .photo_accept svg,
.pending-photo .accept_photo .photo_decline svg { vertical-align:middle!important; }
.pending-photo.accepted img { opacity:0.5; filter:alpha(opacity=50); }




/* ************************************
OLD CSS
**************************************/
.no_albums { background:url(/images/no_albums_bg.jpg); }
#no_albums_wrapper { background:url(/images/no_albums_b.jpg); }
#no_albums { background:url(/images/welcome_no_albums_bg.png) no-repeat; width:904px; height:246px; padding:50px 37px 0 37px; position:absolute; top:50%; margin:-180px 0 0 0; z-index:999; }
#no_albums h1 { font-size:34px; color:#fff; border-bottom:6px solid #fff; padding:0 0 12px 0; margin:0 0 15px 0; }
#no_albums p { font-size:18px; color:#bdafb8; width:465px; border-bottom:1px solid #fff; line-height:22px; padding:0 0 28px 0; margin:0 0 19px 0; }
#no_albums a { text-decoration:none; color:#fff; background:url(/images/blue_button_right.png) no-repeat top right; display:block; float:left; height:33px; margin-right:6px; padding-right:20px; text-transform:uppercase; font-size:11px; font-family:Arial; font-weight:bold; }
#no_albums a span { background:url(/images/blue_button_left.png) no-repeat; display:block; line-height:23px; padding:5px 0 5px 18px; color:#fff; }
#no_albums #photos { position:absolute; top:25px; right:37px; }
#basket { padding:0px; font-family:arial; font-size:11px; font-weight:bold; color:#fff; text-transform:uppercase; float:right; margin:35px 0 0 0; clear:both; width:300px; }
#basket a { text-decoration:none; color:#fff; background:url(/images/black_button_right.png) no-repeat top right; display:block; float:right; height:33px; padding-right:20px; text-transform:uppercase; font-family:arial; font-size:11px; font-weight:bold; color:#fff; }
#basket span { background:url(/images/black_button_left.png) no-repeat; display:block; line-height:23px; padding:5px 0 5px 18px; font-family:arial; font-size:11px; font-weight:bold; color:#fff; }
#basket #items, #basket #price { background:none; display:inline; padding:0; }
#add_new_album { float:left; width:975px; border-bottom:1px solid #d4d4d4; padding:32px 0 20px 0; }
#add_new_album h2 { border-bottom:2px solid #777777; color:#555555; font-size:17px; padding:0 0 15px; text-transform:none; margin:0 0 18px 0; }
#add_new_album #center_new_album { width:356px; margin:0 auto; }
#add_new_album #center_create_album { width:155px; margin:0 auto; }
.ui-widget-content { border:1px solid #ffffff; background:#ffffff url(/images/ui-bg_flat_100_ffffff_40x100.png) 50% 50% repeat-x; color:#44474b; }
.ui-widget-overlay { background:rgba(0,0,0,.6); opacity:1; filter:Alpha(Opacity=1); z-index:1990!important; }
.ui-widget.ui-widget-content { border:none; }
.ui-widget-header { border:1px solid #ffffff; background:#ffffff url(/images/ui-bg_highlight-soft_100_ffffff_1x100.png) 50% 50% repeat-x; color:#555555; font-weight:bold; }
.dialog { display:none; overflow:hidden; }
.ui-dialog { padding:0; background:#fff; z-index:2000!important; }
.ui-dialog .ui-resizable-handle { cursor:default; width:36px; height:36px; }
.ui-widget-content { border:0; }
.ui-dialog .ui-dialog-content { padding:25px 25px 0 25px; }
.ui-dialog .ui-resizable-ne { background:url(/images/dialog_north_east_corner.png) no-repeat; top:-1px; right:-2px; }
.ui-dialog .ui-resizable-se { background:url(/images/dialog_south_east_corner.png) no-repeat; right:-3px; bottom:-3px; }
.ui-dialog .ui-resizable-sw { background:url(/images/dialog_south_west_corner.png) no-repeat; left:-3px; bottom:-3px; }
.ui-dialog .ui-resizable-nw { background:url(/images/dialog_north_west_corner.png) no-repeat; top:-1px; left:-2px; }
.ui-dialog-titlebar { display:none; }
.ui-dialog .dialog_title { float:left; width:100%; padding:0 0 24px 0; }
.ui-dialog .dialog_title h1 { float:left; font-size:1.3rem; }
.ui-dialog label { display:block; color:#44474b; }
.ui-dialog input[type=text] { border:1px solid #D4D4D4; color:#686868; font-family:Georgia; font-size:14px; padding:12px 0 10px 5px; width:528px; }
.ui-dialog .close a { background:url(/images/close_dialog.png) no-repeat; width:30px; height:30px; display:block; position:absolute; top:5px; right:5px; }
.ui-dialog .ui-dialog-buttonpane { padding:0; margin:0; background:#fff; border-width:0; }
.rename_album .ui-dialog-buttonpane { padding:0 31px 27px 0; }
.delete_album .ui-dialog-buttonpane .ui-dialog-buttonset { padding:0 0 25px 25px; float:none; }
/*.order_a_print_dialog .print_preview { margin:0 auto; float:none; -webkit-box-shadow:2px 2px 7px 0px #000; box-shadow:2px 2px 7px 0px #000; }*/
@media(min-width:991px) {
 .dialog { min-width:750px; }
}

.au-upldr-uploader .progress-bar-horizontal { display:none; }


#loading { border-bottom:1px solid #D4D4D4; float:left; padding:32px 0 20px; width:975px; text-align:center; }
#loading #center_new_album { width:350px; margin:0 auto; }
#loading h2 { border-bottom:2px solid #777777; color:#555555; font-size:17px; margin:0 0 18px; padding:0 0 15px; text-transform:none; width:350px; text-align:center; }
.controls { width:728px; }
.controls a { text-decoration:none; color:#fff; background:url(/images/black_button_right.png) no-repeat top right; display:block; float:left; height:33px; padding-right:20px; text-transform:uppercase; font-family:arial; font-size:11px; font-weight:bold; color:#fff; margin:0 10px 0 0; }
.controls a span { background:url(/images/black_button_left.png) no-repeat; display:block; line-height:23px; padding:5px 0 5px 18px; font-family:arial; font-size:11px; font-weight:bold; color:#fff; }
#upload_images ul { margin:0; padding:0; width:728px; float:left; }
#upload_images ul li { list-style:none; padding:0 0 0 0; }
#upload_images #choose_album { padding:0 0 10px 0; }

/*input[type="file"] {
 display:none;
}*/

#upload_images li { position:relative; height:31px; }

.upload_file input[type=text] { float:left; margin:0 10px 0 0; }

#photo_wrapper { background:url(/images/my_photo_bg.png) repeat-y; display:inline-block; text-align:left; padding:0 0 16px 0; float:left; width:975px; }

#banner_background { background:url(/images/photo_banner.jpg); float:left; width:100%; }

#banner_image_for_photo_wrapper { margin:0 auto; width:975px; height:20px; }

#banner_image_for_photo { float:left; width:975px; height:20px; }

#invite_banner a { background:url("/images/blue_button_right.png") no-repeat scroll right top transparent; color:#FFFFFF; display:block; float:left; font-family:Arial; font-size:11px; font-weight:bold; height:33px; margin-right:6px; padding-right:20px; text-decoration:none; text-transform:uppercase; margin:0 15px 0 0; }

#invite_banner a span { background:url("/images/blue_button_left.png") no-repeat scroll 0 0 transparent; color:#FFFFFF; display:block; line-height:23px; padding:5px 0 5px 18px; }

#invite_banner #photos { position:absolute; right:37px; top:25px; }


td.left_align, th.left_align { text-align:left; }

.invite_friends_dialog #email_addresses_invite,
.invite_friends_dialog #email_addresses_resend { min-height:87px; }

.invite .ui-dialog-buttonpane { padding:0 31px 15px 0; }

.invite .save_message { background:url(/images/black_button_right.png) no-repeat right top!important; padding:0 10px 0 0!important; }

.invite .save_message span { background:url("/images/black_button_left.png") no-repeat scroll 0 0 transparent!important; padding:5px 10px 5px 17px!important; }

.invite .error { display:none; }

.invite .tagit-choice { background:#6dc2bf!important; -webkit-border-radius:3px!important; -moz-border-radius:3px!important; border-radius:3px!important; color:#fff!important; font-family:Georgia!important; font-size:14px!important; border:0!important; padding:5px 22px 5px 15px!important; filter:0!important; }

.invite .tagit-choice a.tagit-close { padding:6px 5px 2px 0!important; color:#fff!important; }
ul.tagit li { width:100%; }

#email_addresses_invite ul,
#email_addresses_resend ul { max-height:150px; min-height:100px; width:100%; border:1px solid #D4D4D4!important; margin:0!important; cursor:text; }

.invite #email_addresses_invite .error,
.invite #email_addresses_resend .error { padding:5px 0 0 0; }

.usage_wrapper { float:left; width:552px; }
.usage_wrapper p { font-size:14px; color:#60aaa7; padding:0 0 14px 0; }
.usage { float:left; border:1px solid #d4d4d4; padding:1px; width:340px; }
.usage ul { width:100%; margin:0; padding:0; }
.usage li { list-style:none; float:left; width:10%; height:27px; background:#b4b2b2; border-left:1px solid #d5d6d7; padding:0; }
.usage li.used { background:#60aaa7; }

#expire_outter_wrapper { position:relative; height:42px; }
#expire_wrapper { float:left; width:100%; background:#abb6e5; padding:20px; position:absolute; top:0; z-index:100; text-align:center; }
#expire_wrapper #expire p, #expire_wrapper #expire li { color:#fff; font-size:11px; font-style:italic; padding:0; }
#expire_wrapper #expire li { padding:10px 0 14px 0; list-style:none; }
#expire_wrapper #expire ul { margin:0; }
#expire_wrapper #expire li:first-child { padding:0 0 14px 0; font-size:18px; }
#expire_wrapper #expire #close_errors { width:100px; margin:auto; padding:10px 0 0 0; }
#expire_wrapper #expire #close_errors a { color:#fff; font-weight:bold; font-size:11px; text-decoration:none; }
#expire_wrapper #expire p a { text-decoration:underline; color:#fff; font-size:11px; font-style:italic; }

.upgrades .left_column { padding:16px 0 0 0; }
.upgrades .right_column { clear:both; margin:0; }

#number_pending { background:url(/images/pending_photos_icon.png) no-repeat; width:24px; height:20px; text-align:center; font-family:Arial; font-size:10px; font-weight:bold; display:inline-block; position:absolute; right:-13px; top:-20px; color:#fff; padding:4px 0 0 0; }
.product .right_content p.bought { line-height:22px; font-size:27px; }


.loading.dialog { text-align:center; }
.loading.dialog .message { padding-top:50px; }
.loading.dialog .spinner { left:50%; top:14px; }

.au-upldr-information-bar.informationBar { display:inline; padding:0px 10px; overflow:hidden; height:auto; }
.au-upldr-information-bar.informationBar span { line-height:normal; }
.au-upldr-uploader { background-color:inherit!important; font-family:inherit!important; }
.goog-css3-button { font-family:inherit!important; }
#share_buttons { float:right; padding:5px 0px 0px 10px; }
.stButton .chicklets { color:#FFFFFF; }

/*----------------New css start here -----------*/

.loginExpiry .ui-dialog-buttonpane .ui-dialog-buttonset button { float:right!important; margin-top:-15px!important; margin-bottom:15px!important; margin-right:215px!important; }

/*---------------------------- Right content offer css start here -----------*/

.product .right_content_offer { float:right; width:142px; height:142px; text-align:center; padding:52px 0 0 0; background:url(/images/product_bg_offer.png) no-repeat; }

#photo_hosting .right_content_offer { background:url(/images/photo_hosting_bg_offer.png) no-repeat; }
#extend_account .right_content_offer { background:url(/images/extend_account_bg_offer.png) no-repeat; }

.product .right_content_offer p { font-size:26px; color:#fff; padding:0 0 12px 0; line-height:16px; }
.product .right_content_offer p.bought { padding-top:15px; }
.product .right_content_offer a { text-decoration:none; color:#fff; font-family:Arial; font-size:10px; font-weight:bold; font-style:italic; }

.product .right_content_offer a:hover { text-decoration:underline; }

.loginbox button { background:url(/images/login_submit.png) no-repeat; width:116px; height:31px; border:none; color:#fff; }

#introduction { margin-top:-87px; }
#join { position:absolute; z-index:99; }

#overlay-photo { position:fixed; top:0; left:0; width:100%; height:100%; background-color:#000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; z-index:999; }
.overlay-inner { background:url("/images/overlay-inner-bg.png") repeat; height:165px; left:0; padding:53px 5px 0 5px; position:absolute; top:0; width:204px; }
.overlay-inner a, .overlay-inner span, .overlay-inner p { /*color:#fff;*/ color:#FFFFFF!important; text-decoration:none; }
.overlay-inner a:hover { color:#fff; text-decoration:underline; }

/*#disable-button { opacity:0.5; filter:alpha(opacity=50); border:0!important; }*/
#sortable li { border:none!important; }

.loader,
.loader:before,
.loader:after { border-radius:50%; width:2.5em; height:2.5em; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation:load7 1.8s infinite ease-in-out; animation:load7 1.8s infinite ease-in-out; }
.loader { color:#ffffff; font-size:10px; margin:80px auto; position:relative; text-indent:-9999em; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation-delay:-0.16s; animation-delay:-0.16s; }
.loader:before,
.loader:after { content:''; position:absolute; top:0; }
.loader:before { left:-3.5em; -webkit-animation-delay:-0.32s; animation-delay:-0.32s; }
.loader:after { left:3.5em; }
@-webkit-keyframes load7 {
 0%,
 80%,
 100% { box-shadow:0 2.5em 0 -1.3em; }
 40% { box-shadow:0 2.5em 0 0; }
}
@keyframes load7 {
 0%,
 80%,
 100% { box-shadow:0 2.5em 0 -1.3em; }
 40% { box-shadow:0 2.5em 0 0; }
}

.photo_delete { position:absolute; z-index:3; color:#444; top:10px; left:10px; font-size:0.875rem; text-decoration:none; }
.custom-switch { padding-left:2.5rem; }
.custom-control-label { padding-top:3px; }
.custom-switch .custom-control-label::before { width:2.25rem; left:-2.5rem; border-radius:1.25rem; }
.custom-switch .custom-control-label::after { top:calc(0.25rem + 2px); left:calc(-2.5rem + 2px); width:calc(1.25rem - 4px); height:calc(1.25rem - 4px); }
.custom-control-label::before { width:1.25rem; height:1.25rem; border-radius:1.25rem; }
.custom-control-label::after { width:1.25rem; height:1.25rem; }
.custom-switch .custom-control-input:checked~.custom-control-label::after { -webkit-transform:translateX(1rem); transform:translateX(1rem); }
.custom-control-input:checked~.custom-control-label::before { color:#fff; border-color:#9cea85; background-color:#9cea85; }
.storage-limit-reached span { position:absolute !important; top:50%; left:0; width:100%; padding:1rem 4rem; color:#888; text-align:center; z-index:999; transform:translateY(-50%);}
.storage-limit-reached:before { background:rgba(255, 255, 255, 0.8); content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; }
.storage-limit-reached-notice { background-color:rgba(255, 255, 255, 1); box-shadow:0 0 16px rgba(0, 0, 0, 0.1); padding:1rem; text-align:center; border-radius:5px; width:100%; position:fixed; z-index:9999; bottom:0; left:0; right:0; }


.lds-roller {
  display:inline-block;
  position:relative;
  width:64px;
  height:64px;
}
.lds-roller div {
  animation:lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin:32px 32px;
}
.lds-roller div:after {
  content:" ";
  display:block;
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#cef;
  margin:-3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay:-0.036s;
}
.lds-roller div:nth-child(1):after {
  top:50px;
  left:50px;
}
.lds-roller div:nth-child(2) {
  animation-delay:-0.072s;
}
.lds-roller div:nth-child(2):after {
  top:54px;
  left:45px;
}
.lds-roller div:nth-child(3) {
  animation-delay:-0.108s;
}
.lds-roller div:nth-child(3):after {
  top:57px;
  left:39px;
}
.lds-roller div:nth-child(4) {
  animation-delay:-0.144s;
}
.lds-roller div:nth-child(4):after {
  top:58px;
  left:32px;
}
.lds-roller div:nth-child(5) {
  animation-delay:-0.18s;
}
.lds-roller div:nth-child(5):after {
  top:57px;
  left:25px;
}
.lds-roller div:nth-child(6) {
  animation-delay:-0.216s;
}
.lds-roller div:nth-child(6):after {
  top:54px;
  left:19px;
}
.lds-roller div:nth-child(7) {
  animation-delay:-0.252s;
}
.lds-roller div:nth-child(7):after {
  top:50px;
  left:14px;
}
.lds-roller div:nth-child(8) {
  animation-delay:-0.288s;
}
.lds-roller div:nth-child(8):after {
  top:45px;
  left:10px;
}
@keyframes lds-roller {
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}


.slick-slider { position:relative; display:block; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent }
.slick-list { position:relative; display:block; overflow:hidden; margin:0; padding:0 }
.slick-list:focus { outline:0 }
.slick-list.dragging { cursor:pointer; cursor:hand }
.slick-slider .slick-list, .slick-slider .slick-track { -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); transform:translate3d(0,0,0) }
.slick-track { position:relative; top:0; left:0; display:block; margin-left:auto; margin-right:auto }
.slick-track:after, .slick-track:before { display:table; content:'' }
.slick-track:after { clear:both }
.slick-loading .slick-track { visibility:hidden }
.slick-slide { display:none; float:left; height:100%; min-height:1px }
[dir=rtl] .slick-slide { float:right }
.slick-slide img { display:block }
.slick-slide.slick-loading img { display:none }
.slick-slide.dragging img { pointer-events:none }
.slick-initialized .slick-slide { display:block }
.slick-loading .slick-slide { visibility:hidden }
.slick-vertical .slick-slide { display:block; height:auto; border:1px solid transparent }
.slick-arrow.slick-hidden { display:none }

.profile-photo { width:100px; height:100px; position:relative; }
.profile-photo .photo { width:100px; height:100px; border-radius:100px; overflow:hidden; position:relative; }
.profile-photo .photo img.landscape { object-fit:cover; width:auto; height:100%; }
.profile-photo .photo img.portrait { object-fit:cover; width:100%; height:auto; }
.profile-photo .edit { text-align:center; position:absolute; background:#fff; bottom:-15px; left:50%; transform:translateX(-50%); width:30px; height:30px; line-height:30px; border-radius:30px; }

.action-toast, .notification { width:calc(100% - 1rem); background:#1A211E; color:#ffffff; padding:1rem 1rem; border-radius:1rem; position:fixed; z-index:99999; bottom:0; left:50%; transform:translateX(-50%) translateY(100%); transition:transform 250ms ease-in-out; }
.action-toast.active, .notification-opened { transform:translateX(-50%) translateY(-30px); }

@media (min-width:992px) {
    .action-toast, .notification { width:auto; padding:1rem 2rem; }
}

.js-drag-handle { width:100%; text-align:right; padding:0.75rem 1rem; position:absolute; z-index:1020; top:0; right:0; cursor:grab; background:linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); }

.uppy-Dashboard--modal .uppy-Dashboard-inner { z-index:1030!important; }