@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(//8.azureedge.net/i/lato.woff2) format('woff2');
    unicode-range: U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(//8.azureedge.net/i/latoe.woff2) format('woff2');
    unicode-range: U+100-24F,U+259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF
}

/* .logo {
    width: 120px;
    height: 48px;
    background-size: contain;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZkAAACWCAMAAAA7WgWdAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAy5pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTIzIDc5LjE1ODk3OCwgMjAxNi8wMi8xMy0wMToxMToxOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIEVsZW1lbnRzIDE1LjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QkRBOUFDNDVCQThDMTFFOTk4MDdGMTEwQkI2Mzc2MzciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QkRBOUFDNDZCQThDMTFFOTk4MDdGMTEwQkI2Mzc2MzciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCREE5QUM0M0JBOEMxMUU5OTgwN0YxMTBCQjYzNzYzNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCREE5QUM0NEJBOEMxMUU5OTgwN0YxMTBCQjYzNzYzNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuMLKJwAAAAYUExURf4ioP+a0/////9HsP++4//Z7/9wwf/v+EUiua4AAAu8SURBVHja7F3bgqsqDIVCwv//8akCmkAQbK2D+4Sn2TPdFFm5rFxA89Ix5zC6BYqMDkVGkdGhyCgyOhQZHYqMIqNDkVFkdCgyOhQZRUaHIqPI6FBkdCgyiowORUaR0aHIKDI6FBkdiowio+MfRQadVShmRAaNMaBYzIeMfQPjgmJxEzIW0Y990r+BMfjAvfOItlZ1GH/yP0Fm0YMxCxWceaQxC4sNNsZKD24wzIpM3O4hRVg/6Z6nMeu638PXBuASG/AjZMCM7rcVJW/+sTpHVz4krL91FWDzIBNFZ8CtJxl7nP+HqBe2wOBt4RxEfCZFxg5ueLR6D/T/GPd+WT9yvHyIjx9mRqavM9GLPs+YhawryLQj/wsuMGe/tWYw8jH3QGNms9h5qh2LBtlMD+zUyAzYMueeaMy2nQfK+De8FuXBOZEZ42aLLbNPNGa7tQrUbu144PcU4FfIjMQzi2JZ+8Qwc1eOQOwW+dlOi8xIpLnaspd7YphJjBVBxu9CNi8yMUK2Xf7mX49kZgQO8iOBY2Jk0PSIY4zV/BXh8t+5GYYM0ST7ffb8pxnN0NMqWF3lczkzQybI6jMbMr5HzRIneyRnpvu+w0E1aWKdgQ4BiO5/JZ3Py2YScSKKQgjAzDrT23KMAuYfWZohZosoCkVj3khz3XLsq5R9opuh0SXJASC3cbMig8d+Jvdk4BOjGconSd6M6sm8yHRKyFmjgnuim6FZzG42YDZkvDmMZ1x6HnhiNMNM8K701LPCBe7zR8jgYUFsy2I+kwDIDqUgzbNWzg5LlSGrzDMJAHUoRFGolOG01ebVjzTlZi+e4yMbzYh7J3BQZK6In83P9L1pqcJO2x6PDFF68uMl8bP51dptk5/sKnMjNQNrr6IaRaZZAOkS9/kTZOLKGipN8jbhNmpmh9oSTiNDlYOkAC6J0n6CTFxZY32kRQvuomapq+2aoJbIU8Pru1l7NCFKkqzTwYj+8+dsyi99yHDV4/kdjTqyuSZKO4FMOGE6lvXKC0Se2riHNLtFGOAi0wnMT2LNpa9pbRhCJniLbh1ofRjYh7hGSanZw9wWzizqsujMxch4uXHmmpqTGYAlNVLm0Tsd4uX+xcrLXFLFGCcAl7WC7N6RFWQ3POCamlMXGetMNZwfSl4IKhHY/tyGzKXcbPOOvKl50xl7TQd9BxlIuDhEay2iS/8+OLmzi4zQfcF7528MNJfzYRcZzk1n+PNtMF1UQDcDbNNF5xKSbYvgwJHKhFYg6cQG7WeNTWeqbnPMf7a/RibagFLWwB6l+BsRsqQyD03OZJ0pcjD5Ya/qBjI9YCS7Bdi22rboUwilyoSvkYEwBTIFOU4PE646DmSOV9DSS2z9iXnFMpIsFf0jZC6LGL9EpjjUFHDrbLhmeeYwPdQ2mK3tYQuDGgmmQx/5GfvXB25hb/vxtQG4jJybwx2wB1FO6KpM6Wgqov+RzuBf3+uQ8mYlBFHMrusGNkcqc34DahfP2Qsn+h/FM5MgI4mZe13YDWwG93hw0QUbY0FX7RtvtGbQylwEb0cyThX7rCBYxcxf13Nq+mHJ5yrDk5q1b/wob9bpMQxBom7LboJIJ44PV4uTrXVBI0QErrFr4VJkPolkq+WWPVhYb3Lo5IYc2toBNzfS4nr0swr3G+YfttSTJCF5MhCQqbscbKqwW0HIP7nsxBwTkPMuAFr2Stico/qMXzZEao7yx7GUEc+xy9+UTpPK5+NIwtDW5sRJX7HOFF5jUnEnMrXEBGKvBDrZ/hJYP22lnbGtMAtY7rVOPgQxLnA+BO8q4MLBZCn3DhLMwso4XMM+zfTSdieGq4V5l1UpN37YxPGGdJnQlnLoGsYn7gxa76O09z2aNc3EfToBvEyGFQpWdE3QuAKByysOe9YLdUYKgPbckth+1nBmPj2jRE9bornuJebeLzfAAuntMIWIRG1K3v89mROMpvQwspchYJzY1uuQkT1z3ns5nSTT5pwWSnpb56elUIvni6AwGq0iHpQCtE+Gzajat61WrTKc+JzofDCHpP0kyxe+NG+JnE4Sf7vNlKSDWaL1QQXLaI+5tJRtIFtWUJceMZfNqZxL5FgUluMoN3sZa27kODMxdk3t8M2gKEkHezbM5265NQmddJXwNJYfUCbE1neyDCgCB028yG/5Mu1RmfUwB3CChbdkNu19yzi6Q1mOP5VHvFBggTzEtei70SnTcb5FyCbz5WQgkuyAYj2RfzMXoOMmWzNOgXuEWcY/7m4royDwAthzuHG/l8fxhdkp5uNPDNWXOdn8kU0Kr4bKQLVCFJsKGyeG+DdznPDQl5tDDjyqNNC+n3C18M1ykuwx8vcmA8EOqcZ5iv/HaWHlvQSXDe2eTWcOfTaI0UzjXIo3ZePD/pHO8W/zaX6qAsa2zdxBOan2D5RGrUiAo/1dSTNdaSSK54eaz4ZK8LEZS/l2ZtfFDikhySD4On4okpe83DFP61TO/LfARJlr++c6CGI0Km1DpGr0xhTmBgsTXy5cuES1ff9ajDF9c7JVYCuqF4NiKWVL18l0t8Mmu9VmP+Zj2t+x0tzjhg7uoJDypJwkWTqq2P5SIwM8+C5tlxCbpmldw5YVZVn6X8OWNoJawMp9gCJfQUGHXpmp26HRhcZ27styx1dqVqLDy2kB5RZEQvZCsZmFoVpnKDggpjNxYvx1NFny2qV7TOkEoZpOdQYISehbJNOLUToEDbqfsZ3bZcvooJRHkkAuYg4QN7M0VKs4c/OzWqRmLOWK4/50u21aBccgM3Bf8xLHzwjSxtvOzppu+Lglo8R6SP/qWH/cOJgSXq8my182Yel3x5VKQyh5wrpZ/LCRK44ZO56dAZNPXjnRSuwKlo2pLwk1wyBs28z4bOQr7J7ATYOwT6/MgKlqYRNiUrfTLgy9M0W+aJXGihsxQuy5DYw/baYp8nfHcHv/hdZIMsWvWFdIFEOYLJTmnYK/3xfii8NB7484ektt/sfI20M6yMTSxdL/H6q/oBl7OYHraRXwr6DMIxRuyMXc/EbGIApfWB/bgk/FG5vEyW90bt9en9cDhS777KAjhYBYTcCNqzNuuBN4oC0j+7PmMtL6QR9X5pLq2pH29+5ZAMgu+L0hENYB3mP+7UB/PXbzPFtfu8OdU1if9oYKF3E6Pivt+nfkZS63Fyt3JVv0EghhsVRXk6D5Vz0ZlpPti/SpzZvTRJtKRLaYzEd2M/aekYGTTfT8jHPODR/X2NW6G7FaWtgNlvGx8JKomvUWSZl4r0FaivUuOhQrpJM5u021fRgpMGGfmzwvJY1EPL0pK950ZXar1PY3bujMGaBwiOatm4OVBj9wPiL5rHy+o1mDD9g6yhMnyGtKn9t7NYIwZTnZvs40meefE9IIlT3fli6tbKGIg8CMntNcDmc4qjrS24q+HEDOuIR4/FA68+LpOtjfwdN6B1jeSJY1kcoT1c5C0IAV38rJkjFxgnwGoX0nT4aRNw6lVs6coH3b/WX4xd+8fj9C61sgwYa9bodQQW9LgVpFwMgycDhZXKG8E6FVEUNjRoF57vs0w5UScFczrjvx5hB90+mdA8eBUWRu1XN3ohypyNysMsPNFYrMfcOeej2VInPb8EaRmdfJKDKz8jJFZr4BvIykyEwz1n4HVGSm5GX2VEuyInOb+3cvRWZOlfHnLkBQZG5Rmb06qshMpzKw302jyMymMqozk3oZ1ZkZYxnMeQCnyMwzPO0fVJ2ZaOBHL6dXZG7x//alOjMtZVZkpjRmOxXQjOaMxiwoMrMxs2TMTl0Zo8jc4GayMVNk5gwzT74JSZH5tZtx/FVoQZGZZAA/Njh+a64icx8BOHf/lSLze2ToNTpekZmJmoUqGaDIzGHNwgduRpG5D5mTb6ZTZG7jZnjuomVF5oZIc7vj9czNpIrMDRRgvdHBnLybXJG5IwlgTpxpVmRuQwYal04oMn+PjXijgyIzBTbh/JsmFZlZhyKjyOhQZBQZHYqMIqNDkdGhyCgyOhSZ/8f4T4ABAJRi3S1Z6UkPAAAAAElFTkSuQmCC)
} */

.guest {
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M25 13c0-6.617-5.383-12-12-12S1 6.383 1 13c0 3.384 1.413 6.439 3.674 8.622a.732.732 0 00.189.172C7.003 23.777 9.858 25 13 25s5.996-1.223 8.137-3.206a.732.732 0 00.19-.172A11.957 11.957 0 0025 13zM13 2.5c5.79 0 10.5 4.71 10.5 10.5 0 2.455-.853 4.71-2.27 6.5-.65-2.097-2.508-3.74-5.028-4.495a5.455 5.455 0 002.272-4.424c0-3.015-2.455-5.467-5.474-5.467s-5.474 2.452-5.474 5.467c0 1.82.899 3.43 2.272 4.424-2.52.756-4.377 2.398-5.028 4.496A10.44 10.44 0 012.5 13C2.5 7.21 7.21 2.5 13 2.5zm-3.974 8.08a3.974 3.974 0 017.948 0 3.974 3.974 0 01-7.948 0zM6.031 20.833c.225-2.75 3.141-4.785 6.969-4.785s6.744 2.035 6.97 4.785C18.112 22.486 15.675 23.5 13 23.5s-5.113-1.014-6.97-2.668z' fill='%231D1D1B'/%3E%3C/svg%3E")
}

.notif {
    width: 26px;
    height: 26px;
    margin-top: 11px;
    opacity: .8;
    background-image: url("//8.azureedge.net/i/notif.svg");
    cursor: pointer
}

:focus {
    outline: 0
}

html,body {
    min-height: 100%;
    width: 100%;
    text-align: center;
    font: 18px Lato,Sans-Serif;
    font-style: normal;
    font-weight: 400;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    word-wrap: break-word;
    color: #373d3f;
    background-color: #fcfcfc
}

iframe {
    width: 100%;
    max-width: 900px;
    height: 56vw;
    border: 0
}

.social {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 10px
}

#fb.lazy {
    background: none
}

#fb {
    background-image: url("//8.azureedge.net/i/fb.svg")
}

#ig.lazy {
    background: none
}

#ig {
    background-image: url("//8.azureedge.net/i/ig.svg")
}

#tw.lazy {
    background: none
}

#tw {
    background-image: url("//8.azureedge.net/i/tw.svg")
}

#yt.lazy {
    background: none
}

#yt {
    background-image: url("//8.azureedge.net/i/yt.svg")
}

#span_mosaicDesc {
    line-height: 29px;
    white-space: pre-line
}

img {
    vertical-align: top
}

a,a:active,a:hover,a:visited {
    color: #1c72b3;
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

h1,h2,h3 {
    font-weight: normal;
    color: #373d3f
}

p {
    line-height: 2
}

input {
    font: 16px 'Lato',sans-serif
}

.mg10 {
    margin: 10px
}

.center {
    text-align: center
}

.banner {
    position: relative;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    min-height: 410px;
    padding: 0;
    text-align: left
}

.banner h1,.banner h2,.banner h3,.banner h4,.banner p {
    margin-left: 20px;
    margin-right: 20px;
    color: #131516
}

.banner p {
    color: #373d3f
}

.banner .btn {
    margin-bottom: 20px
}

.banner div:first-child h2 {
    margin: 0;
    padding: 20px
}

.banner a:first-child:hover {
    text-decoration: none
}

.sticky {
    position: fixed;
    display: flex;
    justify-content: center;
    width: 100vw;
    top: 0;
    z-index: 3;
    height: 48px;
    background-color: rgba(0,0,0,.85)
}

.sticky>a,.sticky>a:visited,.sticky>a:active {
    color: #fff !important;
    font-size: 14px;
    font-weight: 400;
    padding: 15px 10px 9px 10px
}

.sticky>a:hover {
    color: #fff !important;
    text-decoration: none;
    opacity: .5
}

.r-h {
    float: right;
    margin-right: 10px
}

.tab-l,.tab-l a,.tab-l a:visited,.tab-l a:active {
    color: #333 !important;
    font-size: 14px;
    font-weight: 400;
    padding: 15px 10px 9px 10px
}

.tab-l:hover {
    color: #333 !important;
    text-decoration: none;
    opacity: .5
}

.selected {
    opacity: .5
}

.ni {
    width: 120px;
    text-align: left;
    font-size: 12px;
    font-weight: bold
}

.ni a,.ni a:visited {
    display: block;
    padding: 10px 10px 10px 19px;
    background-color: #fff;
    color: #000;
    text-decoration: none
}

.ni a:hover {
    color: #fff;
    background-color: #fe28a2;
    text-decoration: none
}

#menu {
    display: none
}

label[for="menu"] {
    left: 25px;
    top: 0;
    cursor: pointer;
    opacity: .7;
    font-size: 30pt;
    line-height: 35px;
    margin-left: 12px;
    font-weight: 400
}

label[for="menu"]:hover {
    opacity: 1
}

.ow {
    transition: transform .3s
}

.cm {
    margin-top: 49px;
    position: absolute;
    z-index: 20;
    transition: transform .3s
}

.cm--sl {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 0 5px 0
}

.cm--sr {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px 0 5px 0
}

.cis {
    list-style: none;
    margin: 0;
    padding: 0
}

.cm--sl .cm__link,.cm--sr .cm__link,.cm__link {
    padding: 12px 24px
}

.cm--sl {
    z-index: 5;
    top: 0;
    left: 0;
    transform: translateX(-100%)
}

@media all and (min-width: 320px) {
    .cm--sl {
        transform:translateX(-300px)
    }
}

.cm--sl.is-active {
    transform: translateX(0)
}

.cm--sr,.cm--push-right {
    display: none;
    float: right;
    margin-left: -77px;
    margin-top: 9px
}

.cm--sr.is-active,.cm--push-right.is-active {
    display: block
}

.btn,.btn:active,.btn:visited {
    margin: 0;
    display: inline-block;
    height: 28px;
    border: solid 1px #000;
    padding: 0 10px;
    outline: 0;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    word-wrap: normal;
    line-height: 28px;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
    border-color: #d3d3d3;
    background: #f8f8f8;
    color: #333;
    margin-top: 2px;
    margin-right: 2px
}

.btn:hover {
    text-decoration: none;
    background: #f0f0f0;
    color: #333
}

.btn:active {
    border-color: #c6c6c6;
    background: #e9e9e9
}

.disabled,.disabled:hover,.disabled:visited,.disabled:active {
    color: #d3d3d3
}

.blue,.blue:active,.blue:visited {
    background: linear-gradient(#54b4fe,#28a2fe,#2492e5);
    border-color: #2492e5;
    color: #fff
}

.blue:hover {
    background: linear-gradient(#6abdfe,#3eabfe,#28a2fe);
    border-color: #28a2fe;
    color: #fff
}

.blue:active {
    background: linear-gradient(#28a2fe,#2492e5,#2082cc);
    border-color: #2082cc
}

.pink,.pink:active,.pink:visited {
    background: linear-gradient(#fe54b4,#fe28a2,#e52492);
    border-color: #e52492;
    color: #fff
}

.pink:hover {
    background: linear-gradient(#fe6abd,#fe3eab,#fe28a2);
    border-color: #fe28a2;
    color: #fff !important
}

.pink:active {
    background: linear-gradient(#fe28a2,#e52492,#cc2082);
    border-color: #cc2082
}

div.pink a {
    color: #fff
}

button.btn,button.btn:active,button.btn:visited {
    height: 30px;
    line-height: 28px
}

button.big,button.big:active,button.big:visited {
    font-size: 15px;
    height: 36px;
    padding: 1px 20px 4px 20px
}

.big,.big:active,.big:visited {
    font-size: 15px;
    height: 30px;
    padding: 2px 20px 3px 20px
}

.super,.super:active,.super:visited {
    font-size: 22px;
    height: 38px;
    padding: 10px 25px 3px 25px
}

@media all and (max-width: 480px) {
    .super,.super:active,.super:visited {
        font-size:18px;
        height: 33px;
        padding: 2px 20px 3px 20px
    }
}

@keyframes glow {
    to {
        text-shadow: 0 0 10px #ff00bf;
        font-size: larger
    }
}

@keyframes glowing {
    0% {
        box-shadow: 0 0 0 #fe28a2
    }

    50% {
        box-shadow: 0 0 20px #fe28a2
    }

    100% {
        box-shadow: 0 0 0 #fe28a2
    }
}

.glow {
    animation: glowing 1000ms infinite
}

.glow3s {
    animation: glowing 1000ms 3
}

.glow5s {
    animation: glowing 1000ms 5
}

.chat {
    position: fixed;
    bottom: -75px;
    right: 5px;
    z-index: 10;
    cursor: pointer;
    color: #fff;
    width: 60px;
    height: 36px;
    border-radius: 50%;
    margin: 10px;
    font-weight: bold;
    font-size: 12px;
    padding: 14px 0 10px 0
}

.footer {
    margin-top: 120px;
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: #eee;
    font-size: 12px
}

.footer a,.footer a:active,.footer a:visited {
    color: #555
}

.footerSub {
    vertical-align: top;
    display: inline-block;
    text-align: left;
    padding: 20px;
    line-height: 30px;
    min-width: 200px
}

.footerSub a {
    display: block;
    padding: 5px
}

@media only screen and (max-width: 740px) {
    .footerSub {
        display:block
    }
}

.tbar {
    position: relative;
    background: #fff;
    z-index: 9;
    text-align: left;
    border-bottom: 1px solid #ccc
}

.mbar {
    display: flex;
    justify-content: space-between;
    max-width: 900px;
    width: 100%;
    height: 48px;
    margin: auto
}

.user {
    width: 34px;
    height: 34px;
    margin-top: 7px;
    cursor: pointer;
    border-radius: 17px
}

.l-m,.l-m:visited,.l-m:active,.l-m:hover {
    display: none
}

#bm {
    display: none;
    margin-top: 5px
}

@media all and (max-width: 530px) {
    .sticky {
        position:sticky
    }

    h1 {
        font-size: 1.8em
    }

    .l-m,.l-m:visited,.l-m:active,.l-m:hover {
        display: inline-block;
        vertical-align: bottom
    }

    #bm {
        display: initial
    }

    .l-t {
        display: none
    }

    .tab-l {
        display: none
    }

    input {
        font: 16px 'Lato',sans-serif
    }

    .tbar {
        justify-content: unset
    }

    .l-m {
        margin-right: auto
    }
}

.cm--sr2 {
    margin-left: -240px !important
}

#div_Notification {
    max-height: 60vh;
    overflow-y: auto;
    width: 300px
}

img.smallThumb {
    margin: 10px;
    width: 150px;
    height: 150px;
    border-radius: 75px
}

@media all and (max-width: 480px) {
    img.smallThumb {
        margin:10px;
        width: 100px;
        height: 100px;
        border-radius: 50px
    }
}

img.tinyp {
    width: 30px;
    height: 30px;
    border-radius: 15px
}

.smaller {
    font-size: smaller
}

.displayNone {
    display: none !important
}

.rel {
    position: relative;
}

.abs {
    position: absolute
}

/* #loading {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.8);
    z-index: 1000
} */

#loadingcontent {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

#loadingspinner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding-top: 80px
}

#findPictureSearchInput {
    padding-left: 20px;
    border-radius: 50px;
    border: 1px solid #86d2f8;
    color: #060606;
    min-width: 200px;
    font-size: 16px;
}

.spin {
    animation: spin 4s linear infinite
}

@keyframes spin {
    100% {
        transform: rotate(360deg)
    }
}

.lens {
    display: inline-block;
    position: relative;
    text-align: center;
    vertical-align: top
}

.lens img,.lens div {
    width: 256px;
    height: 256px;
    border-radius: 50%;
    cursor: zoom-in;
    display: block;
    margin: 10px
}

.lens:hover img,.lens:hover div {
    transition: all .7s ease;
    transform: scale(1.1)
}

.clickable {
    cursor: pointer
}

.cWhite {
    color: #fff
}

.left {
    text-align: left
}

.cap {
    display: block;
    padding: 5px 5px 30px 5px;
    line-height: 1.4em;
    overflow: hidden;
    white-space: nowrap;
    max-width: 256px;
    text-overflow: ellipsis
}

.ml5 {
    margin-left: 5px
}

.margin0 {
    margin: 0
}

.border-top {
    border-top: solid 1px #f1f1f1
}

.underline {
    text-decoration: underline
}

.marginLeftRight20 {
    margin-left: 20px;
    margin-right: 20px
}

.mt10 {
    margin-top: 10px
}

.mb10 {
    margin-bottom: 10px
}

.flLeft {
    float: left
}

.flRight {
    float: right
}

.cPointer {
    cursor: pointer
}

#gallery {
    margin: 0 auto;
    max-width: 1200px
}

@media(min-width: 1700px) {
    #gallery {
        max-width:1700px
    }
}

progress {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: none;
    width: 400px;
    max-width: 90vw;
    height: 50px;
    text-align: center
}

progress {
    background: linear-gradient(#ff66d9,#fe28a2,#ff00bf);
    border: 1px solid #333
}

progress::-moz-progress-bar {
    background: linear-gradient(#ff66d9,#fe28a2,#ff00bf)
}

progress:not([value])::-moz-progress-bar {
    background: linear-gradient(#4da6ff,#1c72b3,#1c72b3)
}

progress::-webkit-progress-bar {
    background: linear-gradient(#ff66d9,#fe28a2,#ff00bf)
}

progress::-webkit-progress-value {
    background: linear-gradient(#4da6ff,#1c72b3,#1c72b3)
}

progress:not([value])::-webkit-progress-bar {
    background: linear-gradient(#4da6ff,#1c72b3,#1c72b3)
}

.warning {
    color: #f00
}

.btnGroup {
    line-height: 36px
}

.searchBar {
    max-width: 60vw;
    height: 30px;
    vertical-align: bottom;
    padding-left: .25em
}

.graphContainer {
    display: inline-block;
    min-width: 280px;
    vertical-align: top;
    text-align: center;
    margin-bottom: 5px
}

.graph {
    min-width: 140px;
    min-height: 140px;
    max-width: 280px;
    max-height: 280px;
    display: inline-block
}

@media all and (max-width: 600px) {
    .graphContainer {
        display:inline-block;
        min-width: 150px;
        vertical-align: top;
        text-align: center;
        margin-bottom: 5px
    }

    .graph {
        min-width: 75px;
        min-height: 75px;
        max-width: 150px;
        max-height: 150px;
        display: inline-block
    }
}

.zero {
    margin: 0
}

.views {
    margin: 5px 0;
    color: #808080;
    display: block
}

.top10 {
    margin-top: 10px
}

#tile_loadingDiv {
    background-color: rgba(255,255,255,0);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    text-shadow: 0 0 7px rgba(0,0,0,.7)
}

#tile_loadingHighResDiv {
    background-color: rgba(255,255,255,0);
    position: absolute;
    width: 100%;
    z-index: 1;
    text-shadow: 0 0 7px rgba(0,0,0,.7)
}

.OSD_coverOverlay {
    position: absolute;
    text-align: center;
    color: #fff;
    margin: auto;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(34,34,34,.8)
}

.OSD_coverOverlay h1,.OSD_coverOverlay h3 {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 7px rgba(255,255,255,.7);
    margin-left: 10px;
    margin-right: 10px
}

.mosaicallycontainer {
    max-width: 100%;
    height: 120px;
    background: #000;
    position: relative;
    margin: 0 auto;
    touch-action: manipulation
}

@media all and (min-height: 375px) {
    .mosaicallycontainer {
        height:175px
    }
}

@media all and (min-height: 414px) {
    .mosaicallycontainer {
        height:214px
    }
}

@media all and (min-height: 500px) {
    .mosaicallycontainer {
        height:320px
    }
}

@media all and (min-height: 600px) {
    .mosaicallycontainer {
        height:360px
    }
}

@media all and (min-height: 650px) {
    .mosaicallycontainer {
        height:410px
    }
}

@media all and (min-height: 700px) {
    .mosaicallycontainer {
        height:470px
    }
}

@media all and (min-height: 820px) {
    .mosaicallycontainer {
        height:542px
    }
}

@media all and (min-height: 900px) {
    .mosaicallycontainer {
        height:680px
    }
}

@media all and (min-height: 960px) {
    .mosaicallycontainer {
        height:730px
    }
}

@media all and (min-height: 1060px) {
    .mosaicallycontainer {
        height:820px
    }
}

@media(orientation: portrait) and (max-width:414px) {
    .mosaicallycontainer {
        height:100vw
    }
}

.auto {
    margin: auto
}

.sample {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 15px
}

.sample img {
    max-width: 150px;
    max-height: 150px;
    object-fit: contain
}

.timelineCtrls {
    text-align: center;
    line-height: 0;
    margin-top: 0;
    font-size: 15px
}

.timelineCtrls a {
    margin: 0 10px 0 10px
}

.tileImg {
    max-width: 90vw;
    width: 600px;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    margin-bottom: 10px
}

textarea {
    resize: none;
    border: solid #777 1px
}

.timeago {
    display: block;
    margin-top: 10px;
    color: #555;
    font-size: 11px;
    height: 12px
}

.tileImg_Desc {
    display: block;
    margin-top: 10px
}

.photoStat {
    font-size: 11px
}

.osd_btn {
    font-size: 12px
}

.card {
    max-width: 630px;
    background: #fff;
    padding: 15px 15px 15px 15px;
    margin: 0 auto 15px auto;
    text-align: left;
    box-shadow: 0 0 3px rgba(0,0,0,.15);
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.swal-fillScreen {
    width: unset !important
}

.usernameSpan {
    white-space: nowrap;
    display: inline-block;
    max-width: 100%
}

.commentSpan {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    min-width: 10em
}

.commentDiv {
    margin-top: 10px
}

@media only screen and (max-width: 450px) {
    .commentSpan {
        width:unset;
        min-width: unset;
        max-width: 100%
    }

    input.commentSpan {
        width: 90%
    }

    .commentDiv {
        display: block
    }
}

.ml40 {
    margin-left: 40px
}

.visHidden {
    visibility: hidden
}


.rel {
    display: flex;
    flex-direction: row-reverse;
}

#mosaicallycontainer {
    width: calc(100vw - 450px);
    position: relative;
}

.overlay {
    height: 0%;
    max-width: 550px;
    width: 400px;
    position: relative;
    z-index: 10;
    right: 0;
    background-color: transparent;
    transition: .5s;
    overflow-y: auto;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.overlay-content {
    position: relative;
    width: 400px;
    height: 100vh;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay a {
    transition: .3s
}

.overlay-content-div {
    cursor: pointer;
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin-bottom: 30px;
    line-height: 25px;
    margin: 10px;
    color: #fff
}

.overlay-content-div img {
    width: 256px;
    height: 256px;
    object-fit: contain
}

@media screen and (max-height: 450px) {
    .overlay {
        overflow-y:auto
    }

    .overlay a {
        font-size: 20px
    }
}

.overlay-open {
    height: 100vh
}

.img_PhotoDetail {
    max-width: 80vw;
    max-height: 60vh;
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer
}

.leftArrowBtn {
    width: 20px;
    height: 20px;
    cursor: pointer
}

.leftArrowBtn:hover {
    filter: brightness(150%)
}

.leftArrowBtn.inactive,.leftArrowBtn.inactive:hover {
    cursor: default;
    filter: grayscale(100)
}

.rightArrowBtn {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transform: rotate(180deg)
}

.rightArrowBtn:hover {
    filter: brightness(150%)
}

.rightArrowBtn.inactive,.rightArrowBtn.inactive:hover {
    cursor: default;
    filter: grayscale(100)
}

#overlaySearch {
    background: url("//8.azureedge.net/i/EmbedButtons/Search.svg");
    border: 0;
    width: 29px;
    height: 29px;
    padding: 0;
    cursor: pointer;
    margin-top: -5px;
    vertical-align: middle
}

#trail {
    background-color: #fe28a2;
    opacity: 0;
    animation-name: fade;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    cursor: pointer
}

@keyframes fade {
    0% {
        opacity: .5
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes blinker {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes blinker {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes blinker {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

#editDiv {
    position: absolute;
    width: 100%;
    height: 2em;
    line-height: 2em;
    bottom: 320px;
    left: 0;
    padding: 0;
    background-color: rgba(0,0,0,.75)
}

#editDiv a {
    font-size: 12px;
    margin: 13px;
    line-height: 2.6
}

#infoDiv {
    position: absolute;
    width: 100%;
    height: 60px;
    top: 320px;
    left: 0;
    padding: 0;
    background-color: rgba(0,0,0,.75)
}

#infoDiv span {
    font-size: smaller
}

div#infoDiv label {
    word-wrap: normal
}

#imgCont {
    width: 320px;
    height: 320px;
    margin: 0;
    background-color: rgba(0,0,0,.75)
}

#imgCont img {
    width: 300px;
    height: 300px;
    margin: 10px
}

@media all and (max-width: 420px) {
    #editDiv {
        bottom:220px;
        width: 220px
    }

    #editDiv a {
        font-size: 10px;
        margin: 6px;
        line-height: 3
    }

    #imgCont {
        width: 220px;
        height: 220px;
        margin: 0;
        background-color: rgba(0,0,0,.75)
    }

    #imgCont img {
        width: 200px;
        height: 200px;
        margin: 10px
    }

    #infoDiv {
        top: 220px
    }
}

.uibtn {
    opacity: .7;
    touch-action: manipulation;
    width: 29px;
    height: 29px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: top
}

.uibtn:hover {
    opacity: 1;
    touch-action: manipulation
}

.uibtn:active {
    opacity: .85;
    touch-action: manipulation
}

#play {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 29 29' style='enable-background:new 0 0 29 29;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Ccircle class='st0' cx='14.5' cy='14.5' r='14'/%3E%3C/g%3E%3Cpath d='M11.7,20.7l9.8-5.7c0.4-0.2,0.4-0.7,0-1l-9.8-5.7C11.4,8.1,11,8.4,11,8.7v11.5C11,20.7,11.4,20.9,11.7,20.7z'/%3E%3C/svg%3E%0A")
}

#stop {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 29 29' style='enable-background:new 0 0 29 29;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Ccircle class='st0' cx='14.5' cy='14.5' r='14'/%3E%3C/g%3E%3Cpath d='M8.8,8.8h11.3v11.3H8.8V8.8z'/%3E%3C/svg%3E")
}

#search {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 29 29' style='enable-background:new 0 0 29 29;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:none;stroke:%23000000;stroke-width:1.5;stroke-linecap:round;stroke-miterlimit:10;%7D .st2%7Bfill:none;stroke:%23000000;stroke-linecap:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='14.5' cy='14.5' r='14'/%3E%3Cg%3E%3Ccircle class='st1' cx='12.7' cy='13' r='6.4'/%3E%3Cline class='st1' x1='17.8' y1='16.9' x2='22.6' y2='20.7'/%3E%3Cpolygon class='st2' points='13.5,10.1 13.9,11 14.5,10.3 '/%3E%3C/g%3E%3C/svg%3E%0A")
}

#zoom-in {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 29 29' style='enable-background:new 0 0 29 29;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='14.5' cy='14.5' r='14'/%3E%3Cg%3E%3Cpath d='M20.2,15.5H8.6c-0.2,0-0.4-0.2-0.4-0.4v-1.6c0-0.2,0.2-0.4,0.4-0.4h11.5c0.2,0,0.4,0.2,0.4,0.4v1.6 C20.5,15.4,20.4,15.5,20.2,15.5z'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M15.2,20.5h-1.6c-0.2,0-0.4-0.2-0.4-0.4V8.6c0-0.2,0.2-0.4,0.4-0.4h1.6c0.2,0,0.4,0.2,0.4,0.4v11.5 C15.6,20.4,15.4,20.5,15.2,20.5z'/%3E%3C/g%3E%3C/svg%3E%0A")
}

#zoom-out {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 29 29' style='enable-background:new 0 0 29 29;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='14.5' cy='14.5' r='14'/%3E%3Cg%3E%3Cpath d='M20.2,15.5H8.6c-0.2,0-0.4-0.2-0.4-0.4v-1.6c0-0.2,0.2-0.4,0.4-0.4h11.5c0.2,0,0.4,0.2,0.4,0.4v1.6 C20.5,15.4,20.4,15.5,20.2,15.5z'/%3E%3C/g%3E%3C/svg%3E%0A")
}

#homeBtn {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 29 29' style='enable-background:new 0 0 29 29;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D .st1%7Bfill:none;stroke:%23000000;stroke-linecap:round;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg%3E%3Ccircle class='st0' cx='14.5' cy='14.5' r='14'/%3E%3C/g%3E%3Cg%3E%3Crect x='7' y='7' class='st1' width='15.1' height='15.1'/%3E%3Cg%3E%3Cline class='st1' x1='19.9' y1='15.9' x2='19.9' y2='20'/%3E%3Cline class='st1' x1='16' y1='20' x2='19.9' y2='20'/%3E%3C/g%3E%3Cg%3E%3Cline class='st1' x1='9' y1='13' x2='9' y2='8.9'/%3E%3Cline class='st1' x1='12.9' y1='8.9' x2='9' y2='8.9'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A")
}

#custom_full-page,#full-page {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 29 29' style='enable-background:new 0 0 29 29;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D .st1%7Bfill:%23FFFFFF;%7D .st2%7Bfill:none;stroke:%23000000;stroke-width:0.864;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Csymbol id='Arrow_28' viewBox='-22.9 -15.9 45.8 31.8'%3E%3Crect x='-22.9' y='-15.9' class='st0' width='45.7' height='31.8'/%3E%3Cg%3E%3Cpolygon points='-22.9,4.8 4.6,4.8 -6.5,15.9 7,15.9 22.9,0 7,-15.9 -6.5,-15.9 4.6,-4.8 -22.9,-4.8 '/%3E%3C/g%3E%3C/symbol%3E%3Cg%3E%3Ccircle class='st1' cx='14.5' cy='14.5' r='14'/%3E%3C/g%3E%3Cg%3E%3Crect x='6.9' y='7' class='st2' width='14.8' height='14.8'/%3E%3Cuse xlink:href='%23Arrow_28' width='45.8' height='31.8' id='XMLID_1_' x='-22.9' y='-15.9' transform='matrix(-9.604608e-02 -9.929566e-02 9.929566e-02 -9.604608e-02 10.8706 10.9192)' style='overflow:visible;'/%3E%3Cuse xlink:href='%23Arrow_28' width='45.8' height='31.8' x='-22.9' y='-15.9' transform='matrix(9.604608e-02 -9.929566e-02 -9.929566e-02 -9.604608e-02 18.2813 10.9192)' style='overflow:visible;'/%3E%3Cuse xlink:href='%23Arrow_28' width='45.8' height='31.8' x='-22.9' y='-15.9' transform='matrix(-9.604608e-02 9.929566e-02 9.929566e-02 9.604608e-02 10.8046 18.2052)' style='overflow:visible;'/%3E%3Cuse xlink:href='%23Arrow_28' width='45.8' height='31.8' x='-22.9' y='-15.9' transform='matrix(9.604608e-02 9.929566e-02 -9.929566e-02 9.604608e-02 18.2813 18.2052)' style='overflow:visible;'/%3E%3C/g%3E%3C/svg%3E%0A")
}

#mosaicControls,.rightCtrls {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 10px 5px 7px 10px;
    color: #fff;
    z-index: 2;
    touch-action: manipulation
}

div#tooltip {
    padding: 0;
    position: absolute;
    font-size: 12px;
    color: #fff;
    z-index: 1
}

div#tooltip a {
    color: #fff
}

div#overlayMatch {
    background-color: #fe28a2;
    opacity: 0;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 15;
    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 15;
    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 15
}

label {
    cursor: pointer;
    font-size: .9em
}

.hidden {
    display: none
}

.highlight {
    background-color: #fe28a2;
    opacity: 0;
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 15;
    -moz-animation-name: blinker;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 15;
    animation-name: blinker;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 15
}

.highlight:hover {
    opacity: .5
}

.fillScreen {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9999999
}

.width100 {
    width: 100%
}

.iOS_BODY_MODAL {
    overflow: hidden;
    position: fixed
}

.overflowHidden {
    overflow: hidden
}

.maxWidth3em {
    max-width: 3em
}

#mosaically {
    margin: 0 auto;
    height: 100%;
    background-color: transparent;
    color: #fff;
    cursor: pointer;
    touch-action: manipulation
}

#mosaically:active {
    cursor: grabbing
}

@media print {
    #mosaicallycontainer,.tbar {
        display: none
    }

    .pgbr {
        display: block;
        page-break-after: always
    }
}

.lftCtrls {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    z-index: 2;
    text-align: left;
    padding: 10px 10px 7px 10px
}

div.PhotoDetailMenuContainer {
    display: inline-block
}

@media only screen and (max-width: 400px) {
    div.PhotoDetailMenuContainer {
        font-size:smaller
    }

    div.PhotoDetailMenuContainer {
        width: 100%
    }
}

img.PhotoDetail {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain
}

span.ImageHolderTextAuthor {
    display: block;
    margin: 0 10px 5px 10px;
    clear: both
}

span.ImageHolderTextDateTime {
    display: block;
    text-decoration: none;
    color: #fff;
    margin: 0 10px 5px 10px;
    clear: both
}

textarea {
    width: 99%;
    height: auto;
    font: 18px Lato,Sans-Serif
}

#div_comments_Mosaic,#div_Comments_Photo,.limited_commentSpace {
    max-height: 400px;
    overflow-y: auto;
    margin-top: 10px
}

.likeBtn {
    min-width: 52px;
    text-align: center
}

.likeCommentBtns {
    display: flex;
    justify-content: space-evenly;
    padding-top: 10px
}

.commentTextarea {
    overflow-y: hidden
}

.commentBtnDiv {
    height: 30px
}

textarea.comment {
    padding: 0;
    padding-left: 2px;
    margin-left: -2px
}

.width50 {
    display: inline-block;
    max-width: 50%;
    vertical-align: middle;
    margin: 10px
}

@media all and (max-width: 1200px) {
    .width50 {
        max-width:100%;
        min-height: 100%;
        min-width: 75vw
    }
}

.img-comp-img {
    position: absolute;
    width: auto;
    height: auto;
    overflow: hidden
}

.img-comp-img img {
    display: block;
    vertical-align: middle
}

.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    width: 40px;
    height: 40px;
    background-color: #fe28a2;
    opacity: .75;
    border-radius: 50%
}

video {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(//8.azureedge.net/i/l.svg)
}

.btnGroup {
    line-height: 36px
}

.editMosaic {
    width: 135px
}

.editMosaic img {
    margin: 10px
}

input[type=range].input_Colorization {
    -webkit-appearance: none;
    width: 88%;
    max-width: 600px;
    margin: 13.8px 0
}

input[type=range].input_Colorization:focus {
    outline: none
}

input[type=range].input_Colorization::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: #2492e5;
    background: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(254,40,162,1) 100%);
    border-radius: 1.3px;
    border: .2px solid #010101
}

input[type=range].input_Colorization::-webkit-slider-thumb {
    border: 1px solid #000;
    height: 36px;
    width: 18px;
    border-radius: 3px;
    background-color: #fff;
    background: linear-gradient(#54b4fe,#28a2fe,#2492e5);
    border-color: #2492e5;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -14px
}

input[type=range].input_Colorization:focus::-webkit-slider-runnable-track {
    background: #3b9de8;
    background: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(254,40,162,1) 100%)
}

input[type=range].input_Colorization::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: #2492e5;
    background: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(254,40,162,1) 100%);
    border-radius: 1.3px;
    border: .2px solid #010101
}

input[type=range].input_Colorization::-moz-range-thumb {
    border: 1px solid #000;
    height: 36px;
    width: 18px;
    border-radius: 3px;
    background-color: #fff;
    background: linear-gradient(#54b4fe,#28a2fe,#2492e5);
    border-color: #2492e5;
    cursor: pointer
}

input[type=range].input_Colorization::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent
}

input[type=range].input_Colorization::-ms-fill-lower {
    background: #1985d6;
    background: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(254,40,162,1) 100%);
    border: .2px solid #010101;
    border-radius: 2.6px
}

input[type=range].input_Colorization::-ms-fill-upper {
    background: #2492e5;
    background: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(254,40,162,1) 100%);
    border: .2px solid #010101;
    border-radius: 2.6px
}

input[type=range].input_Colorization::-ms-thumb {
    border: 1px solid #000;
    height: 36px;
    width: 18px;
    border-radius: 3px;
    background-color: #fff;
    background: -webkit-linear-gradient(#54b4fe,#28a2fe,#2492e5);
    background: -o-linear-gradient(#54b4fe,#28a2fe,#2492e5);
    background: -moz-linear-gradient(#54b4fe,#28a2fe,#2492e5);
    background: linear-gradient(#54b4fe,#28a2fe,#2492e5);
    border-color: #2492e5;
    cursor: pointer
}

input[type=range].input_Colorization:focus::-ms-fill-lower {
    background: #2492e5;
    background: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(254,40,162,1) 100%)
}

input[type=range].input_Colorization:focus::-ms-fill-upper {
    background: #3b9de8;
    background: linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(254,40,162,1) 100%)
}

td {
    text-align: center
}

.expandText {
    white-space: normal
}

img.OVERLAYDOM_IMG_COLORIZE {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

img.Swal_SmallPicUpload {
    max-width: 80vw;
    max-height: 60vh;
    width: 90%;
    height: auto;
    object-fit: contain
}

.div_imgPreviewContainer {
    position: relative;
    display: inline-block
}

.div_imgPreviewContainer img {
    position: absolute;
    height: 100%;
    margin: auto;
    left: 0;
    right: 0;
    text-align: center
}

div.mainBtns a,div.mainBtns button,div.mainBtns button:active,div.mainBtns a:active {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 30px;
    height: 32px
}

label.albumText {
    color: rgba(0,0,0,.54)
}

div.googlePhoto img,div.googleAlbum img {
    width: 256px;
    height: 256px;
    object-fit: contain;
    background-color: #fff
}

img.small {
    width: 256px;
    height: 256px;
    object-fit: contain
}

div.googleAlbum img {
    object-fit: cover;
    object-position: top
}

div.googlePhoto label a {
    font-size: 14px;
    color: rgba(0,0,0,.54)
}

div.googleAlbum,div.googlePhoto {
    display: inline-block;
    cursor: pointer;
    margin: 5px;
    margin-bottom: 20px;
    text-align: center;
    vertical-align: top;
    font-size: 12px
}

div.googleAlbum a,div.googleAlbum span {
    font-size: 14px
}

#uploadProgress {
    width: 100%;
    background: linear-gradient(#4da6ff,#1c72b3,#1c72b3);
    box-shadow: 0 1px 0 rgba(0,0,0,.05)
}

#uploadBar {
    width: 1%;
    height: 32px;
    background: linear-gradient(#ff66d9,#fe28a2,#ff00bf);
    text-align: center;
    line-height: 32px;
    color: #fff;
    word-wrap: normal
}

.gridParent {
    grid-template-columns: 3fr 2fr 1fr 2fr;
    display: grid;
    grid-gap: 5px;
    margin-top: 20px;
    margin-bottom: 30px;
    max-width: 1024px
}

.div_Order {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-bottom: 20px
}

.div_CartItem img {
    width: auto;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)
}

.col {
    align-self: center
}

.infoCol {
    margin: 5px
}

.sec_css_grid {
    display: inline-block;
    border-top: 1px solid #ccc
}

.height100 {
    height: 100%
}

.cRed {
    color: #f00
}

.right0 {
    right: 0
}

@media all and (max-width: 530px) {
    .container {
        font-size:14px
    }
}

.verticalAlignTop {
    vertical-align: top
}

.verticalAlignMiddle {
    vertical-align: middle
}

.notice {
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin: -75px 0 0 0
}

.notice h1,.notice h3,.notice small {
    text-shadow: 0 0 5px rgba(0,0,0,1)
}

#slta {
    height: 50px
}

#embedCodeTextArea {
    height: 150px
}

.border-bottom {
    /* border-bottom: solid 1px #f1f1f1; */
    padding: 0 0 10px 0
}

.inline-block {
    display: inline-block
}

.tab-btn {
    border: 0;
    background: transparent;
    padding: 0 0 10px 0;
    margin-right: 10px;
    cursor: pointer;
    font-weight: bold;
    color: #999;
    font-size: 15px
}

.tab-btn:hover {
    color: #333;
    border-bottom: 2px solid #fe28a2
}

.tab-btn-sel {
    color: #333;
    border-bottom: 2px solid #fe28a2
}

.div_AuthorMenus {
    display: inline-block;
    max-width: 520px
}

@media all and (max-width: 600px) {
    .div_AuthorMenus {
        max-width:90vw;
        margin-left: -15px;
        margin-right: -15px
    }
}

.div_MosaicSharingSettings {
    display: inline-block;
    text-align: left
}

.div_AuthorMenus div,.div_AuthorMenus div:active {
    height: 100%;
    display: inline-block;
    margin: 5px;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
    min-width: 90px
}

.div_AuthorMenus div img {
    width: auto;
    height: 50px;
    vertical-align: middle;
    filter: invert(28%) sepia(45%) saturate(4716%) hue-rotate(308deg) brightness(101%) contrast(99%)
}

.swal2-popup .swal2-styled:focus {
    box-shadow: none !important
}

.swal2-container.swal2-top.OSD_coverOverlay.swal2-shown {
    background-color: transparent;
    position: relative;
    padding: 0
}

.swal2-container.swal2-top.OSD_coverOverlay.swal2-shown div {
    background-color: #222;
    width: 100%;
    height: 100%;
    padding: 0
}

div#swal_canvas_loading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.divFinal {
    width: 350px;
    left: -175px;
    top: -20px;
    position: absolute
}

input[type=range].MosSlider {
    -webkit-appearance: none;
    width: 100%;
    margin: 13.8px 0
}

input[type=range].MosSlider:focus {
    outline: none
}

input[type=range].MosSlider::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000,0 0 1px #0d0d0d;
    background: #3071a9;
    border-radius: 1.3px;
    border: .2px solid #010101
}

input[type=range].MosSlider::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000,0 0 1px #0d0d0d;
    border: 1px solid #000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #e52492;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -14px
}

input[type=range].MosSlider:focus::-webkit-slider-runnable-track {
    background: #367ebd
}

input[type=range].MosSlider::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    box-shadow: 1px 1px 1px #000,0 0 1px #0d0d0d;
    background: #3071a9;
    border-radius: 1.3px;
    border: .2px solid #010101
}

input[type=range].MosSlider::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000,0 0 1px #0d0d0d;
    border: 1px solid #000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #e52492;
    cursor: pointer
}

input[type=range].MosSlider::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent
}

input[type=range].MosSlider::-ms-fill-lower {
    background: #2a6495;
    border: .2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000,0 0 1px #0d0d0d
}

input[type=range].MosSlider::-ms-fill-upper {
    background: #3071a9;
    border: .2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000,0 0 1px #0d0d0d
}

input[type=range].MosSlider::-ms-thumb {
    box-shadow: 1px 1px 1px #000,0 0 1px #0d0d0d;
    border: 1px solid #000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #e52492;
    cursor: pointer;
    height: 8.4px
}

input[type=range].MosSlider:focus::-ms-fill-lower {
    background: #3071a9
}

input[type=range].MosSlider:focus::-ms-fill-upper {
    background: #367ebd
}

div.OVERLAYDOM_COLORIZE {
    position: relative;
    height: 320px
}

ol#div_Suggestions {
    list-style: none;
    padding: 0
}

ol#div_Suggestions li:before {
    content: '☐';
    margin-right: 10px
}

ol#div_Suggestions2 {
    list-style: none;
    padding: 0
}

ol#div_Suggestions2 li:before {
    content: '✓';
    margin-right: 10px;
    color: #fe28a2
}

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 30px 0;
    border-radius: 4px;
    font-size: 13px
}

.pagination>li {
    display: inline
}

.pagination>li>a,.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.428571429;
    text-decoration: none;
    background-color: #fff
}

.pagination>li:first-child>a,.pagination>li:first-child>span {
    border-radius: 50%
}

.pagination>li:last-child>a,.pagination>li:last-child>span {
    border-radius: 50%
}

.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus {
    background-color: #eee
}

.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus {
    z-index: 2;
    cursor: default;
    color: #fe28a2
}

.pagination>.disabled>span,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus {
    color: #999;
    background-color: #fff;
    border-color: #ddd
}

.pagination-lg>li>a,.pagination-lg>li>span {
    padding: 10px 16px;
    font-size: 18px
}

.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px
}

.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.pagination-sm>li>a,.pagination-sm>li>span {
    padding: 5px 10px;
    font-size: 12px
}

.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px
}

.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}

.pager {
    padding-left: 0;
    margin: 20px 0;
    text-align: center;
    list-style: none
}

.pager:before,.pager:after {
    display: table;
    content: " "
}

.pager:after {
    clear: both
}

.pager:before,.pager:after {
    display: table;
    content: " "
}

.pager:after {
    clear: both
}

.pager li {
    display: inline
}

.pager li>a,.pager li>span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px
}

.pager li>a:hover,.pager li>a:focus {
    text-decoration: none;
    background-color: #eee
}

.pager .next>a,.pager .next>span {
    float: right
}

.pager .previous>a,.pager .previous>span {
    float: left
}

.pager .disabled>a,.pager .disabled>a:hover,.pager .disabled>a:focus,.pager .disabled>span {
    color: #999;
    background-color: #fff
}

.swal2-title {
    font-family: "DarkerGrotesque"!important;
}

.swal2-styled.swal2-confirm {
    background-color: #86d2f8!important;
    font-family: "DarkerGrotesque"!important;
    color: black!important;
}

#showimage {
    z-index: 10;
    top: calc(100% / 2 - 100px);
    left: calc(100% / 2 - 250px);
}

.showcontent {
    display: flex;
    padding: 20px 20px 30px 28px;
}

.showing {
    width: 178px;
    height: 178px;
}
.showing img {
    object-fit: cover;
    object-position: center center;
    width: 178px;
    height: 178px;
}
.content {
    width: 265px;
    height: 178px;
    padding-top: 20px;
    padding-left: 20px;
}