@import url(https://fonts.googleapis.com/css?family=Roboto:300);
@import url(https://fonts.googleapis.com/css?family=Roboto%20Condensed:300);
* {margin:0;padding:0;}
html {-webkit-text-size-adjust: 100%;}
body {
  background:#ffffff; /* fallback for old browsers */ /*#76b852, #8DC26F*/
  background:-webkit-linear-gradient(right, #ffffff, #f6f6f6);
  background:-moz-linear-gradient(right, #ffffff, #f6f6f6);
  background:-o-linear-gradient(right, #ffffff, #f6f6f6);
  background:linear-gradient(to left, #ffffff, #f6f6f6);
  font-family:"Roboto", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
div.button a, ul#photonav a {display:inline-block;font-size:10.5pt;width:auto;padding:6px 10px;color:#ffffff!important;background-color:#2196f3;border:0;border-radius:5px;text-decoration:none;margin:0 4px 12px 2px;}
div.button a:hover, ul#photonav a:hover {background-color:#42a6f5;}

/** HEADER **/
header {display:block;width:calc(100% - 28px);height:50px;margin:0 auto;padding:0px 14px;border-bottom:1px #666666 solid;background-color:#FFFFFF;}
h1 a {display:block;float:left;background-image:url('../../images/logo.svg?v=0.2');background-size:165px 50px;width:165px;height:50px;text-indent:-10000px;}
h2 a {display:block;float:left;background-image:url('../../options/photos/photo_share.svg?v=0.2');background-size:133px 40px;width:133px;height:40px;text-indent:-10000px;margin-left:30px;margin-top:5px;}
header nav {float:right;padding:0px 14px;height:50px;line-height:50px;text-align:center;}
header nav a.logout {margin-left:10px;}
header nav ul {list-style-type:none;}
header nav ul li {display:inline-block;float:left;margin-left:-1px;}
header nav ul li.welcome {padding:0 15px 0 15px;border-right:1px #666666 solid;}
header a.btn {border-left:1px #666666 solid;border-right:1px #666666 solid;height:50px;display:inline-block;padding:0 14px;color:#333333;text-decoration:none;}
header a.btn:hover {background-color:#dddddd;}
header a.icon {color:#333333;padding:5px;width:30px;height:30px;display:inline-block;line-height:30px;text-align:center;}
header a.icon:hover {background-color:#dddddd;border-radius:30px;}
header div.clear {height:0;clear:both;}

    @media screen and (max-width: 1000px) {
        body {min-width:320px;}
        header nav {font-size:11pt;}
        header nav a.logout {margin-left:0;}
        header nav ul {float:right;}
        header nav ul li.welcome {border-right:0;padding:0 8px;}
        header a.btn {border-left:0;border-right:0;height:30px;line-height:30px;padding:5px 8px;}
        header a.btn:hover {background-color:#dddddd;border-radius:30px;}
        header a.btn span.extra {display:none;}
    }
    @media screen and (max-width: 720px) {
        header {padding:0;width:100%;max-width:100%;height:auto;border-bottom:0;}
        header div#logo {width:calc(100% - 20px);display:block;padding:0px 10px;height:50px;border-bottom:1px #666666 solid;text-align:center;}
        header h1, header h2 {display:inline-block;}
        header h1 a, header h2 a {display:inline-block;float:none;padding:0;margin:0;}
        header nav {width:100%;display:block;padding:0;height:50px;border-bottom:1px #666666 solid;float:none;}
        header nav ul {float:none;}
        header nav ul li {float:none;}
    }
    @media screen and (max-width: 350px) {
        header div#logo {width:calc(100% - 12px);padding:0 6px;}
        h1 a {background-size:155px 47px;width:155px;height:47px;text-indent:-10000px;}
        h2 a {background-size:123px 37px;width:123px;height:37px;text-indent:-10000px;margin-left:30px;margin-top:5px;}
        header a.btn {padding:0 4px;}
        header nav ul li.welcome {padding:0 8px 0 8px;}
    }

/** NAV **/
ul#photonav {float:left;display:inline-block;list-style-type:none;}
ul#photonav a {line-height:1.5em;}

main div.loginbox {position:relative;z-index:1;background:#FFFFFF;max-width:300px;margin:20px auto;padding:45px;text-align:center;box-shadow:0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);}
main div.loginbox h3 {margin-bottom:10px;text-align:center;font-family:"Roboto Condensed";font-weight:normal;font-size:16pt;}
main div.loginbox span {clear:left;display:block;margin:6px 0;}
main div.loginbox label {display:none;}
main div.loginbox input {font-family:"Roboto",sans-serif;outline:0;background:#eeeeee;width:100%;border:0;margin:0 0 15px;padding:15px;box-sizing:border-box;font-size:16px;}
main div.loginbox input#field-2fa_token {text-align:center;letter-spacing:0.6em;}
main div.loginbox input[type="submit"] {background:#999999;text-transform:uppercase;outline:0;width:100%;border:0;padding:15px;color:#FFFFFF;font-size:14px;cursor:pointer;-webkit-appearance: none;}
main div.loginbox input[type="submit"]:hover {background:#666666;}
main div.loginbox .message {margin:0px 0 0 0;color:#333333;font-size:11pt;}
main div.loginbox .message p {margin-bottom:1em;}
main div.loginbox .message.error {margin-bottom:15px;color:#FF0000;font-weight:bold;font-size:10pt;}
main div.loginbox .subtle {text-align:right;font-size:10pt;color:#CCCCCC;}
main div.loginbox a {color:#000099;text-decoration:none;}

form div.fieldrow div.error, form div.submit div.error,
form div.fieldrow div.resolved, form div.submit div.resolved {margin-left:0;width:calc(100% - 10px);padding-top:5px;padding-bottom:5px;margin-top:-15px;}

    /** MOBILE ADJUSTMENTS **/
    @media screen and (max-width: 600px) {
        main div.loginbox input {padding:20px 15px;}
    }

#filter {border-bottom:0px #666666 solid;padding:8px 8px;width:calc(100% - 16px);font-size:11pt;}
#filter > div {display:inline-block;}
#filter div.found {margin-right:10px;}
#filter div.filter select {padding:2px 4px;background-color:#FFFFFF;border:1px #cccccc solid;border-radius:0;margin:0 3px;}

#gallery {padding:5px;text-align:justify;} /*min-height:calc(100vh - 150px);}*/
#gallery .thumbnail {display:inline-block;margin:3px;background-size:100% 100%;cursor:pointer;background-repeat:no-repeat;background-color:#dddddd;}
#gallery .thumbnail .overlay {display:block;width:100%;height:100%;position:relative;}
#gallery .thumbnail:hover .overlay {background-color:rgba(0,0,0,0.2);}
#gallery .thumbnail .author {color:#FFFFFF;left:5px;bottom:5px;position:absolute;font-size:10pt;text-shadow: 1px 1px 4px #000000;overflow:hidden;height:1.2em;text-align:left;}
#gallery .thumbnail .video {color:#FFFFFF;right:5px;top:5px;position:absolute;font-size:10pt;text-shadow: 1px 1px 4px #000000;overflow:hidden;height:1.2em;text-align:left;}

#load-more {width:100%;text-align:center;}
#load-more.show {display:block;}
#load-more.hide {display:none;}
/*#load-more a {display:inline-block;padding:5px;background-color:}*/

#display {z-index:90;position:fixed;top:0;left:0;width:100%;height:100vh;background-color:rgba(10,10,10,0.99);display:none;}
#display.show {display:block;}
#display #image-pane {position:relative;width:100%;}
#display #image-pane .name {position:absolute;top:10px;right:152px;text-align:right;color:#ffffff;line-height:1.3em;text-shadow: 1px 1px 4px #000000;overflow:hidden;height:3em;width:calc(100% - 200px);}
#display #image-pane .back {position:absolute;top:10px;left:10px;}
#display #image-pane .close {position:absolute;top:10px;right:10px;}
#display #image-pane .info {position:absolute;top:10px;right:54px;}
#display #image-pane .fullscreen {position:absolute;top:10px;right:98px;}
#display #image-pane #fullscreen-minimise {display:none;}
#display #image-pane .icon a {z-index:95;color:#FFFFFF;font-size:20pt;padding:8px;height:30px;width:30px;display:block;text-align:center;}
#display #image-pane .icon a:hover {background-color:#333333;border-radius:30px;}

#display #image-pane #image-display {width:100%;height:100vh;text-align:center;}
#display #image-pane #image-display #image {width:100%;height:100%;background-repeat:no-repeat;background-position:center;}
#display #image-pane #image-display .imagenav {width:30%;height:100%;cursor:pointer;}
#display #image-pane #image-display .imagenav .arrow {display:none;font-size:50px;color:rgba(255,255,255,0.5);position:absolute;top:calc(50% - 25px);width:calc(30% - 30px);padding:0 10px;}
#display #image-pane #image-display .imagenav:hover .arrow {display:block;}
#display #image-pane #image-display #image-btn-left {float:left;text-align:left;}
#display #image-pane #image-display #image-btn-left:hover {background-image: linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0));}
#display #image-pane #image-display #image-btn-right {float:right;text-align:right;}
#display #image-pane #image-display #image-btn-right:hover {background-image: linear-gradient(to left, rgba(0,0,0,0.3), rgba(0,0,0,0));}

#display #image-pane #image-display #videocontainer {margin:0 auto;background-size:100% auto;background-repeat:no-repeat;}

#display.info #image-pane {width:calc(100% - 320px);}
#display #image-info {display:none;float:right;width:320px;height:100vh;background-color:#ffffff;position:relative;}
#display.info #image-info {display:block;}
#display #image-info .close {position:absolute;top:10px;left:10px;}
#display #image-info .icon a {z-index:95;color:#000000;font-size:20pt;padding:8px;height:30px;width:30px;display:block;text-align:center;}
#display #image-info .icon a:hover {background-color:#dddddd;border-radius:30px;}
#display #image-info #info-title {font-family:"Roboto Condensed";font-weight:bold;font-size:14pt;position:absolute;top:22px;left:58px;}

#display #image-info #info {position:absolute;top:55px;width:100%;}
#display #image-info #info .field {margin-top:30px;color:#333333;}
#display #image-info #info .field .icon {display:inline-block;width:20px;font-size:16pt;padding:0px 20px;vertical-align:top;}
#display #image-info #info .field .data {display:inline-block;width:calc(100% - 70px);}
#display #image-info #info .field .data .main {font-size:12pt;display:block;line-height:1.5em;overflow-wrap:break-word;}
#display #image-info #info .field .data .sub {font-size:10pt;display:inline-block;margin-right:10px;line-height:1.5em;}

    /** MOBILE ADJUSTMENTS **/
    @media screen and (max-width: 580px) {
        #display.info #image-info {width:100%;}
        #display.info #image-pane {display:none;}
    }