/* colors
    #048cce
*/

@charset "UTF-8";

@font-face {
  font-family: "icons";
  src:url("../fonts/icons.eot");
  src:url("../fonts/icons.eot?#iefix") format("embedded-opentype"),
    url("../fonts/icons.woff") format("woff"),
    url("../fonts/icons.ttf") format("truetype"),
    url("../fonts/icons.svg#icons") format("svg");
  font-weight: normal;
  font-style: normal;

}

[data-icon]:before {
  font-family: "icons" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  display: inline-block;
  font-family: "icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle;
}

.icon-exclamation-triangle:before {
  content: "\e000";
}
.icon-check-circle:before {
  content: "\e001";
}
.icon-plus-circle:before {
  content: "\e002";
}
.icon-times-circle:before {
  content: "\e003";
}
.icon-minus-circle:before {
  content: "\e004";
}
.icon-edit:before {
  content: "\e005";
}
.icon-trash:before {
  content: "\e006";
}
.icon-enter:before {
  content: "\e007";
}
.icon-info-circled:before {
  content: "\e008";
}
.icon-sign-out:before {
  content: "\e009";
}



/* reset junk */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
*:focus{ outline: none; }
*{ box-sizing: border-box; -moz-box-sizing: border-box; }
.hide{
    display: none;
}
/* -- */
html{
    min-height: 100%;
}

body{
    font-family: "Assistant", "helvetica neue", "helvetica", sans-serif;
    font-size: 100%;
    font-weight: 300;
    line-height: 1.4;
    /* background: #eee url(../img/noise.png); */
    min-height: 100%;
    background: #eee;
    color: #666;
    min-width: 900px;
    font-size: 16px;
}

main{
    /* box-shadow: inset 0 0 0 0.25em rgba(0,0,0,0.05); */
    display: block;
    /* border: 0.25em solid rgba(0,0,0,0.05); */
    position: relative;
    /* padding: 2em 0; */
    overflow: auto;
    height: 100%;
    width: 100%;
    min-height: calc(100vh - 148px);
    /* display: flex; */
}

.bg{
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    z-index: 1;
}

.constrained{
    width: 96%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}
.narrow{
    margin: 0 auto;
    max-width: 500px;
    width: 75%;
}
.narrowish{
    margin: 0 auto;
    max-width: 660px;
    width: 90%;
}
.box{
    background: #fff;
    padding: 2em;
}
.competition_title{
    position: relative;
    z-index: 10;
    font-size: 2.2em;
    text-align: center;
    margin: 1.5em 0 0 0;
    color: #fff;
    font-family: "Assistant";
    font-weight: 300;
}
/*.competition-name{
    width: 300px;
    height: 170px;
    margin: 1em auto .5em auto;
    background-image: url(../img/logo_fn.png);
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -9999px;
    position: relative;
    z-index: 2;
} */
/*.competition-name{
    font-size: 1.6em;
    margin: 02em 0 .5em 0;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
} */
.login-box{
    margin-top: 2em;
    margin-bottom: 2em;
    background: rgba(255,255,255,0.95);
    position: relative;
    z-index: 2;
    border-radius: 6px;
}
.login-box.login-box--transparent{
    background: rgba(255,255,255,0.75);
}
.fl{
    float: left;
}
.fr{
    float: right;
}

/* typography */

h1,h2,h3,h4{
    line-height: 1.1;
    font-weight: 600;
    color: #333;
    font-family: "roboto condensed", "helvetica neue", "helvetica", sans-serif;
    clear: both;
}
h1.nomargin{
    margin: 0;
}
h1{
    margin: 0 0 1em 0;
    font-size: 2.2em;
}
h2{
    margin: 0 0 0.75em 0;
    font-size: 1.8em;
}
.center-content h2 {
  margin: 1.5em 0 0.75em 0;
}
h3{
    margin: 1.25em 0 1em 0;
    font-size: 1.4em;
}
h4{
    margin: 1.25em 0 0.666em 0;
    font-size: 1em;
    text-transform: uppercase;
}
h1 span, h2 span, h3 span, h4 span{
    color: #999;
}
p{
    margin: 0 0 1.5em 0;
}
hr{
    width: 100%;
    margin: 1.5em 0;
    height: 0;
    border: none;
    border-bottom: 4px solid rgba(0,0,0,0.05);
}
.center{
    text-align: center;
}
strong{
    font-weight: 600;
}
.archive-title span{
    color: #ccc;
}

/* lists */

.center-content ul,
.center-content ol {
  margin: 0 0 1.5em 0;
  padding: 0;
}

.center-content ul li,
.center-content ol li {
  margin: 0 0 1em 0;
}

.l-sidebar ol {
  margin: 0 0 1.5em 0;
}

.l-sidebar ol li {
  margin: 0 0 1em 0;
}

.l-sidebar ul,
.notes ul{
    list-style: none;
    margin: 0 0 1.5em 0;
}
.l-sidebar ul li,
.notes ul li{
    padding: 0;
    margin: 0.25em 0;
    position: relative;
}
.l-sidebar ul li:before,
.notes ul li:before{
    content: "•";
    position: absolute;
    font-size: 1.5em;
    line-height: 1;
    left: -0.5em;
    top: -0.1em;
    display: inline-block;
    color: #aaa;
}

.userdata{
    overflow: hidden;
    margin: 0 0 1em 0;
}
.userdata dt{
    font-weight: 600;
    padding: 0 0.5em 0 0;
    margin: 0 0 0.25em 0;
}
.userdata dd{
    margin: 0 0 1em 0;
}
/* toggle */

.toggle__select{
    font-family: "roboto condensed";
    font-size: 24px;
    font-weight: 300;
    margin: 0 0 1em 0;
    overflow: hidden;
    text-align: center;
}
.toggle__select a{
    display: inline-block;
    margin: 0 0.25em;
    padding: 0.2em;
    text-decoration: none;
    color: #999;
    border-bottom: 5px solid rgba(255,255,255,0);
}
.toggle__select a:hover,
.toggle__select a.active{
    color: #048cce;
}
.toggle__select a.active{
    border-color: #048cce;
}

/* filters */

.filters{
    background: #fff;
    color: #666;
    padding: 0.25em;
    margin: 0 0 2em 0;
    overflow: hidden;
    border-radius: 999px;
}
.filters .label,
.filters a{
    display: block;
    float: left;
    padding: 0.25em 0.5em;
    text-decoration: none;
    font-family: "roboto condensed";
    font-weight: 300;
    border-radius: 999px;
}
.filters a:hover{
    background: #eee;
}
.filters a.active{
    background: #999;
    color: #fff;
}
.filters .count{
    opacity: 0.5;
}

.sets{
    overflow: hidden;
    background: #fff;
    color: #666;
    padding: 0.25em;
    margin: 0 0 1.5em 0;
}
.sets .label,
.sets a{
    display: block;
    float: left;
    padding: 0.25em 0.5em;
    text-decoration: none;
    font-family: "roboto condensed";
    font-weight: 300;
}
.sets a:hover{
    background: #ccc;
}

/* forms */

input, textarea, button{
    /* font-family: "roboto condensed", "helvetica neue", "helvetica", sans-serif; */
    font-size: 1em;
    font-weight: 400;
    line-height: 1.4;
}
input[type=text], input[type=tel], input[type=email], input[type=password], textarea{
    background: #fff;
    color: #666;
    border: 3px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    width: 100%;
    /* max-width: 400px; */
    display: block;
    margin: 0;
    padding: 0.5em;
    font-family: "Assistant", "helvetica neue", "helvetica", sans-serif;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
textarea{
    height: 14em;
}
input[type=text]:hover, input[type=tel]:hover, input[type=email]:hover, input[type=password]:hover, textarea:hover{
    border-color: rgba(0,0,0,0.25);
}
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus, select:focus{
    border-color: rgba(0,0,0,0.5);
    background: #fff;
}
.gfield_error input[type=text], .gfield_error input[type=tel], .gfield_error input[type=email], .gfield_error input[type=password], .gfield_error textarea{
    border-color: #900;
}
.gfield_description.validation_message{
    color: #900;
    font-size: 0.875em;
}
.gfield_checkbox label{
    font-weight: 400;
}
label{
    display: inline-block;
    font-family: "roboto condensed", "helvetica", sans-serif;
    font-size: 13px;
    margin: 0.5em 0 0 0;
    font-weight: 600;
}
form input[type=submit]{
    margin: 1em 0 0 0;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    cursor: pointer;
}
.gform_drop_area{
    border: 3px solid rgba(0,0,0,0.1);
    padding: 2em;
    border-radius: 6px;
    margin: 0 0 1em 0;
    text-align: center;
}
.gform_drop_area.hover{
    border: 3px solid rgba(0,0,0,0.5);
    background: #f4f4f4;
}
.gfield_error .gform_drop_area{
    border-color: #900;
}
.gfield_error .gform_drop_area.hover{
    border-color: #c00;
}
#extensions_message{
    display: none;
}
.ginput_preview{
    margin: 0 0 0.25em 0;
}
.ginput_preview:last-of-type{
    margin: 0 0 1em 0;
}
.gform_wrapper{ }
.gform_wrapper ul.gform_fields{
    list-style: none;
    margin: 0;
    padding: 0;
}
.gform_wrapper ul.gform_fields ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.gform_wrapper ul.gform_fields li{
    margin: 0 0 0.5em 0;
    padding: 0;
}
.gform_validation_container{
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}
.gform_wrapper .half{
    width: 48.5%;
    float: left;
}
.gform_wrapper .half + .half{
    margin-left: 3%;
}
.ginput_left{
    width: 48.5%;
    float: left;
}
.ginput_right{
    width: 48.5%;
    float: left;
    margin-left: 3%;
}
.gfield_password_strength{
    /*background: #eee; */
    border: 1px solid #eee;
    background: #f5f5f5;
    clear: both;
    text-align: center;
    font-size: 0.875em;
    float: left;
    width: 100%;
    margin: 3% 0 0 0;
    padding: 0.25em;
    font-family: "roboto condensed";
    color: #900;
}
.gfield_password_strength.blank{
    text-indent: -9999px;
}
.gfield_password_strength.bad{
    color: #c90;
}
.gfield_password_strength.good,
.gfield_password_strength.strong{
    font-weight: 600;
    color: #090;
}
.gform_delete {
  display: none;
}
.validation_error{
    color: #900;
    text-align: center;
    margin: 1em 0;
}
.pw span label{
    text-transform: none;
    font-weight: 400;
}
span.gfield_required{
    color: #c00;
    display: inline-block;
    margin-left: 0.25em;
}
.ginput_preview strong::before {
  content: '️✓';
  color: #3c0;
  display: inline-block;
  margin: 0 1em 0 0;
}
.gfield.dropdown .ginput_container{
    background: #fff;
    width: 100%;
    /* max-width: 400px; */
    display: block;
    overflow: hidden;
    position: relative;
    background: #fff;
    border-radius: 6px;
    border: 3px solid rgba(0,0,0,0.1);
}
.gfield.dropdown .ginput_container select{
    display: block;
    background: transparent;
    margin: 0;
    padding: 0 0 0 0.5em;
    line-height: 1;
    height: 2.75em;
    font-family: "Assistant", "helvetica neue", "helvetica", sans-serif;
    background: transparent;
    font-size: 16px;
    color: #666;
    border-radius: 0;
    width: 112%;
    border: none;
    /*-webkit-appearance: none; */
}
.gfield.dropdown .ginput_container:hover{
    border-color: rgba(0,0,0,0.25);
}
.gfield.dropdown .ginput_container:after{
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #048cce;
	position: absolute;
    right: 10px;
    top: 25px;
    content: " ";
}
.gfield.dropdown .ginput_container:before{
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #048cce;
	position: absolute;
    right: 10px;
    bottom: 26px;
    content: " ";
}
.gfield_checkbox{
    
}
.gfield_checkbox label{
    vertical-align: middle;
}
.gfield_checkbox label:before{
    content: "×";
    width: 1.4em;
    height: 1.4em;
    line-height: 1.4em;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    border: 1px solid #ccc;
    background: #fff;
    color: #fff;
    border-radius: 3px;
    margin: 0 0.33em 0 0;
}
.gfield_checkbox input[type=checkbox]:checked + label:before{
    color: #048cce;
}
.gfield_checkbox input[type=checkbox]{
    display: none;
}
.gfield_description{
    color: #999;
}
.gform_fileupload_rules {
  display: none;
}
.add_photoset{
}
form p{
    margin: 0 0 0.5em 0;
}
form p:last-of-type{
    margin: 0;
}
.lostpw{
    float: right;
    margin: -2em 0 0 0;
}

.user-info__edit{
    margin: 0 0 1.5em 0;
}
.feedback-form,
.user-info__edit-password,
.user-info__edit{
  border-radius: 6px;
    overflow: hidden;
    padding: 2em;
    background: #fff;
    width: 90%;
    max-width: 500px;
    margin: 1em auto;
}
.feedback-form .gform_button,
.user-info__edit-password .gform_button,
.user-info__edit .gform_button{
    float: right;
    margin: 1em 0 0 0;
}
.feedback-form .cancel,
.user-info__edit-password .cancel,
.user-info__edit .cancel{
    margin: 1em 0 0 0;
}

.edit_photoset_info {
    position: relative;
}
.edit_photoset_info .message{
    display: none;
    position: absolute;
    top: 0.25em;
    margin: 0;
    right: 0;
    text-align: left;
    font-size: 0.875em;
    color: #999;
    padding: 0;
}
.edit_photoset_info .message .icon{
    color: rgba(125,250,100,0.75);
    display: none;
    vertical-align: middle;
    margin: 0 0 0 1em;
}
.edit_photoset_info.loading .message{
    display: block;
}
.edit_photoset_info.loading.ok .message .icon{
    display: inline-block;
}


#payment{
    overflow: hidden;
    margin: 0 0 0.5em 0;
    /* padding: 1em; */
    /* background: #fff; */
}
#payment .fr{
    float: right;
}
#payment .fr label{
    float: left;
    margin: 0.8em 1em 0 0;
}
.payment__content .button{
    float: right;
    margin: 0.25em 0 1em 0;
}
.payment__content p{
    float: left;
    margin: 0.4em 0 1em 0 !important;
}
.payment__content img{
    clear: both;
    width: 100%;
    display: block;
    margin: 0;
}

/*
#payment{
    background: #fff;
    padding: 0.25em;
    overflow: hidden;
    margin: 0 0 1.5em 0;
}
#payment img{
    float: left;
}
.payment__content{
    float: left;
    margin: 0.75em 0 0 1em;
}
.payment__content p{
    margin: 0;
}
.payment__content .button{
    margin: 0.25em 0 0 0;
}
*/
/*
#payment .button{
    float: left;
    margin: 27px 0 0 2em;
}
*/

/* links */

a{
    color: #048cce;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
a:hover{
    color: #046cae;
}

.textlink{
    color: #048cce;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    text-decoration: underline;
    padding: 0.25em;
    margin: 0 !important;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    font-weight: 300;
    font-family: "Assistant", "helvetica neue", "helvetica", sans-serif;
}
.textlink:hover{
    color: #046cae;
    background: transparent;
}

.submit,
.button-primary,
.button{
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    cursor: pointer;
    border: none;
    display: inline-block;
    vertical-align: middle;
    padding: 0.5em 1em;
    border-radius: 0;
    background: #048cce;
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    font-family: "Assistant", "helvetica neue", "helvetica", sans-serif;
    color: #fff;
    border-radius: 999px;
}
.submit:active,
.submit:hover,
.button:active,
.button:hover{
    background: #046cae;
    color: #fff;
}
.button:disabled{
    background: #999 !important;
    cursor: default;
}
.button--red{
    background: #cc0000;
}
.button--red:active,
.button--red:hover{
    background: #aa0000;
}
.button.active{
    background: #035c8e;
}

.next_set{
    float: right;
    margin-bottom: 2em;
}
.back_to_archive{
    float: left;
    margin-bottom: 2em;
}

.download-csv{
    text-align: center;
    margin: 1em 0;
    font-family: "Assistant", "helvetica neue", "helvetica", sans-serif;
    font-size: 100%;
    font-weight: 300;
    line-height: 1.4;
    font-size: 16px;
}

/* header */

.site-header{
    width: 100%;
    background: #fff;
    overflow: hidden;
    padding: 0.5em 2%;
}
.site-header .logo{
    float: left;
    margin-right: 15px;
    width: 60px;
    height: 60px;
}


.site-header .name{
    float: left;
    margin: 0.66em 1em 0 0;
}
.site-header .button.rules,
.site-header .button.own-page{
    float: left;
    margin: 0.25em 1em 0 0;
}
.site-header .logout{
    float: right;
    margin: 0.25em 0 0 0;
}

/* layout */

.l-flex{
    display: flex;
    width: 100%;
}
.l-main{
    float: left;
    width: 67%;
    padding: 2rem 2%;
    flex: 1 1 auto;
}
.l-sidebar{
    float: right;
    font-size: 0.875em;
    width: 33%;
    background: #d6d6d6;
    padding: 2rem 2%;
    flex: 1 1 auto;
}

.content{
    float: left;
    width: 67%;
    padding: 2rem 2%;
}
.center-content{
    width: 67%;
    margin: 0 auto;
    padding: 2rem 0;
}

.notes{
    float: right;
    font-size: 0.875em;
    width: 33%;
    background: #d6d6d6;
    /* border: 3px solid rgba(0,0,0,0.05); */
    padding: 2rem 2%;
    /* box-shadow: 0 0 0 3px rgba(0,0,0,0.05); */
}
.notes h3{
    margin: 0 0 1em 0;
}
.notes h4{
    margin: 1.2em 0 0.8em 0;
}
.notes p:last-of-type{
    margin-bottom: 0;
}

/* blocks */

.blocks{
    overflow: hidden;
    clear: both;
    margin: 1.5em 0;
}
.blocks .block{
    float: left;
    width: 23.5%;
    margin: 0 0 2% 1.5em;
}
.blocks .block:first-of-type{
    margin-left: 0;
}
.blocks.blocks--participants .block{
    display: block;
    height: 10em;
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.blocks.blocks--participants .block:after{
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    content: " ";
    display: block;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.25);
    border: 3px solid rgba(0,0,0,0.5);
}
.blocks.blocks--participants .id{
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    font-size: 3em;
    font-weight: 600;
    color: #fff;
    z-index: 2;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.blocks.blocks--participants .block:hover .id{
    opacity: 0;
}
.blocks.blocks--participants .block:hover:after{
    background: rgba(0,0,0,0);
    border-color: rgba(0,0,0,0);
}

/* topnav */

.top-nav{
    overflow: hidden;
    background: #ddd;
}
.top-nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.top-nav ul li{
    float: left;
}
.top-nav ul li a{
    display: block;
    font-family: "roboto condensed";
    font-weight: 300;
    text-decoration: none;
    padding: 0.5em;
}

/* imglist */

.images{
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 1.5em 0;
    background: #333;
    color: #ccc;
    text-align: center;
}
.images .image{
    display: inline-block;
    position: relative;
    width: 19%;
    height: 0;
    padding: 0 0 18% 0;
    margin: 0 0 1.5% 0;
}
.images .image:nth-of-type(5n+1){
    margin-left: 0;
}
.images .image a img{
    display: block !important;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.images .image a:hover{
    opacity: 0.8;
}

/* */ /* */

.user-photos{
    overflow: hidden;
}
.user-photos .button-edit{
    float: right;
}
.user-photos .button-add{
    float: left;
}

.photolist{
    margin: 0 0 0.5em 0;
}

.photolist__label{
    font-size: 1.2em;
    margin: 0 0 0 0;
    overflow: hidden;
    font-weight: 400;
}
.photolist__label a{
    float: right;
    font-size: 14px;
    text-decoration: none;
    font-weight: 300;
}
.photolist__photos{
    margin: 0 0 2em 0;
    overflow: hidden;
    width: 100%;
}
.photolist__photos .img-link{
    float: left;
    width: 20%;
    margin: 0;
    height: 0;
    padding: 20% 0 0 0;
    position: relative;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 6px;
}
.photolist__photos .img-link:hover{
    background: #fff;
}
.photolist__photos .img-link img{
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

.photolist__photos .error{
    clear: both;
}

/* */

.remove-wrapper{
    width: 22em;
    margin: 0 auto;
    background: #fff;
    padding: 1em;
    overflow: hidden;
}
.remove-wrapper .button{
    margin: 0;
}
/* imglist-edit */

.note{
    padding: 1em;
    border: 1px solid rgba(60,130,50,0.25);
    background: rgba(125,250,100,0.5);
    margin: 0 0 1.5em 0;
}
.note .icon{
    margin: 0 0.5em 0 0;
}
.icon.icon-green{
    color: rgba(60,130,50,0.5);
}

.imglist-edit{
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}
.imglist-edit li{
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: 0 0 0.5em 0;
    border-radius: 6px;
    border: 3px solid rgba(0,0,0,0.1);
    background: #fff;
}
.imglist-edit li.error{
    background: #fcc;
}
.imglist-edit li.error .select-wrapper{
    border: 3px solid #c00;
}
.imglist-edit .remove{
    position: absolute;
    right: 0;
    top: 0;
    height: 1.2em;
    width: 1.2em;
    padding: 0;
    text-align: center;
    line-height: 1.2;
}

.imglist-edit .img-link{
    display: block;
    width: 10em;
    height: 0;
    padding: 10em 0 0 0;
    margin: 0 0 0 1.5rem;
    position: relative;
    text-align: center;
    float: left;
}
.imglist-edit .img-link:hover{
    /* background: rgba(0,0,0,0.2); */
    opacity: 0.8;
}
.imglist-edit .img-link img{
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    vertical-align: middle;
}
.imglist-edit .img-info{
    position: absolute;
    left: 14em; right: 6em; top: 0.5em; bottom: 0;
}
.imglist-edit textarea{
    height: 4.25em;
    margin: 0.25em 0 0 0;
    resize: none;
}
.imglist-edit .select-wrapper{
    transition: all 0.25s ease-out;
    border: 3px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    background: #fff;
    width: 100%;
    height: 2.25rem;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.imglist-edit .select-wrapper:hover{
    border: 3px solid rgba(0,0,0,0.25);
}
.imglist-edit .select-wrapper select{
    width: 110%;
    position: absolute;
    left: 0; top: 0;
    height: 2em;
    line-height: 2rem;
    padding: 0 0.5em;
    cursor: pointer;
    background: transparent;
    border-radius: 0;
    border: none;
    display: block;
    color: #666;
    font-family: "Assistant", "helvetica neue", "helvetica", sans-serif;
    font-size: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    z-index: 2;
    text-indent: 0;
}
.imglist-edit .select-wrapper:after{
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #046cae transparent transparent transparent;
    position: absolute;
    right: 0.5em;
    top: 0.75em;
    z-index: 1;
}

/*.imglist-edit input[type=text]{
    position: absolute;
    width: 60%;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
}*/
/*.imglist-edit li.loading input[type=text]{
    cursor: default;
    background: #eee;
}*/
.imglist-edit .kokonaisuus{
    position: absolute;
    top: 50%;
    left: 30%;
    margin: 2.2em 0 0 0;
}
.imglist-edit input[type=submit]{
    float: left;
}
.imglist-edit li .message{
    display: none;
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    text-align: left;
    font-size: 1.2em;
    padding: 2em;
    background: rgba(255,255,255,0.82);
    z-index: 3;
}
.imglist-edit li .message .icon{
    color: rgba(125,250,100,0.75);
    display: none;
    vertical-align: middle;
    margin: 0 0 0 1em;
}
.imglist-edit li.loading .message{
    display: block;
}
.imglist-edit li.loading.ok .message .icon{
    display: inline-block;
}

.photosets{
    
}
.photoset{
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0.5em;
    position: relative;
    /* background: #ddd; */
    text-decoration: none;
    /*border-left: 5px solid #666; */
}
.photoset:not(:first-of-type){
    border-top: 1px solid #ccc;  
}
.photoset:hover{
    background: #fff;
}
.photoset.voted:after{
    content: "\e001";
    font-family: 'icons';
    color: #2c0;
    font-size: 20px;
    position: absolute;
    left: 5px;
    top: 5px;
    z-index: 2;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 21px;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.photoset.yes{
    border-color: #0e0;
}
.photoset.no{
    border-color: #e00;
}
.photoset .rating{
	position: absolute;
	left: 4%;
	top: 50%;
	transform: translateY(-50%);
	text-decoration: none;
	color: rgba(255,255,255,0.5);
	font-size: 1.5em;
	font-weight: 700;
	transition: 0.2s all ease-in-out;
}
.photoset:hover .rating{
	color: rgba(0,0,0,0.5);
}

.photoset h3{
    margin: 0 0 0.25em 0;
    font-size: 1.1em;
    font-weight: 300;
}
.photoset h3 a{
    text-decoration: none;
}
.photoset .img-wrapper{
    float: left;
    width: 10%;
    position: relative;
    padding: 10% 0 0 0;
}
.photoset img{
    display: block !important;
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

/* stuff & junk */

.voting{
    margin: 2em 0;
}
form input.vote{
    display: inline-block;
    padding: 0.75em 0.2em;
    width: 8em;
    font-size: 1.2em;
    margin: 1em;
    text-transform: uppercase;
    text-decoration: none;
    font-family: "Assistant", "helvetica neue", "helvetica", sans-serif;
    text-align: center;
    color: #fff;
    font-weight: 300;
    border: 0;
}
.vote--no{
    background: #c00;
}
.vote--no:hover{
    background: #e00;
}
.vote--yes{
    background: #3c0;
}
.vote--yes:hover{
    background: #0e0;
}
.vote.voted{
    border: 10px solid #ccc;
}
.voting .slider{
    width: 30em;
    height: 1.5em;
    margin: 1em auto 0.2em auto;
    border-radius: 0.75em;
    background: rgba(0,0,0,0.2);
    box-shadow: inset 2px 2px 11px rgba(0,0,0,0.25);
}
.voting .slider .ui-slider-range-min{
    border-radius: 1em;
    padding-right: 0.5em;
    box-sizing: content-box;
    -moz-box-sizing: content-box;
    background: #666;
    background: -moz-linear-gradient(left,  #e00902 0, #f9e022 20em, #6df722 40em);
    background: -webkit-gradient(linear, left top, right top, color-stop(0,#e00902), color-stop(20em,#f9e022), color-stop(40em,#6df722));
    background: -webkit-linear-gradient(left,  #e00902 0,#f9e022 20em,#6df722 40em);
    background: -o-linear-gradient(left,  #e00902 0,#f9e022 20em,#6df722 40em);
    background: -ms-linear-gradient(left,  #e00902 0,#f9e022 20em,#6df722 40em);
    background: linear-gradient(to right,  #e00902 0,#f9e022 20em,#6df722 40em);
}
.voting .slider .ui-slider-handle{
    height: 2em;
    width: 2em;
    border-radius: 1em;
}
.voting .slider .ui-slider-handle.ui-state-active,
.voting .slider .ui-slider-handle.ui-state-focus,
.voting .slider .ui-slider-handle.ui-state-hover{
    background: #666;
    border-color: #666;
}
.voting .rating{
    border: none;
    width: auto;
    display: block;
    text-align: center;
    font-size: 1.75em;
    padding: 0.15em 0 0.15em 0;
    color: #555;
    text-align: center;
    margin: 0.5em auto 0 auto;
    font-family: "roboto condensed";
    font-weight: 300;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
    width: 2.5em;
}    
.notification{
    margin: 0;
    border: 1px solid rgba(105,130,50,0.25);
    background: rgba(245,230,100,0.5);
    padding: 1em 2% 1em 2%;
    position: relative;
}
.notification.notification--ok{
    border: 1px solid rgba(60,130,50,0.25);
    background: rgba(125,250,100,0.5);
}
.notification .close{
    position: absolute;
    right: 1.75%;
    top: 0.5em;
    text-align: center;
    padding: 0.5em;
    margin: 0 0 0 0.5em;
    font-weight: 600;
    color: rgba(0,0,0,0.5);
    text-decoration: none;
}
.notification .close:hover{
    color: #900;
}


/* footer */
.site-footer{
  margin: 0;
    background: #fff;
    padding: 1em 2%;
    color: #333;
    overflow: hidden;
}
.site-footer a{
    text-decoration: none;
}
.site-footer a:hover{
    color: #fff;
}

.footer_left{
    float: left;
}
.footer_right{
    float: right;
}

.footer_contact{
    font-size: 0.875em;
    margin: 0.5em 0 0 0;
}
.footer_contact a:hover{
    color: #000;
}

.site-footer .button{
    margin-left: 1em;
}
.login-msg{
    margin: 1em 0;
    padding: 0.5em;
    border: 1px solid #ddd;
    background: #efefef;
}

.remove-photo{
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    color: #c00;
    text-decoration: none;
}
.remove-photo .txt{
  transition: 0.25s ease-in-out opacity;
    opacity: 0;
    pointer-events: none;
    color: #333;
    font-size: 12px;
    text-transform: uppercase;
}
.remove-photo:hover{
    color: #900;
}
.remove-photo:hover .txt{
    pointer-events: auto;
    opacity: 1;
}

.round{
    margin: 0.25rem 0;
}

.paging{
    clear: both;
    margin: 1em 0;
}
.paging .button{
    margin: 0 1px 0 0;
}
.paging .button.current{
    background: #045c9e;
}


.not-found{
    margin: 3em 0;
    text-align: center;
}


.error{
    font-weight: 700;
    color: #a00;
}

.photos{
    overflow: hidden;
}
.photos .img-link{
    float: left;
    width: 12.5%;
    margin: 0;
    height: 0;
    padding: 12.5% 0 0 0;
    position: relative;
    /*border: 1px solid rgba(0,0,0,0.05);*/
}
.photos .img-link:hover{
    background: #fff;
}

.photos .img-link .rating{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	text-decoration: none;
	color: rgba(255,255,255,0.5);
	font-size: 1.5em;
	font-weight: 700;
	transition: 0.2s all ease-in-out;
}
.photos .img-link:hover .rating{
	color: rgba(0,0,0,0.5);
}

.photos .commentscount{
    color: #048cce;
    font-size: 12px;
    position: absolute;
    right: 5px;
    top: 35px;
    z-index: 2;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

/*
.photos .img-link:hover img{
    transform: translateX(-50%) translateY(-50%) scale(1.05);
}
*/
.photos .img-link.voted:after{
    content: "\e001";
    font-family: 'icons';
    color: #2c0;
    font-size: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 2;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 21px;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.photos .img-link.haastettu img{
    box-shadow: 0 0 6px 1px rgba(255,0,0,0.8);
}

.photos .photoset-link{
    overflow: hidden;
    display: block;
    border-bottom: 4px solid #ddd;
    position: relative;
}
.photos .photoset-link:hover{
    background: #fff;
}
.photos .photoset-img{
    float: left;
    width: 20%;
    margin: 0;
    height: 0;
    padding: 20% 0 0 0;
    position: relative;
}
.photos .photoset-link.voted:after,
.photos .photoset-img .voted:after{
    content: "\e001";
    font-family: 'icons';
    color: #2c0;
    font-size: 20px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 2;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 21px;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.photos .img-link img,
.photos .photoset-img img{
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -ms-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}


.photo-area{
    clear: both;
    width: 100%;
    overflow: hidden;
    /* background: #fff;
    padding: 2em; */
    margin: 1em 0;
}
.photo-area img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 80vh;
    min-height: 400px;
    border: 1.5em solid #fff;
    height: auto;
}
.photo-area .photo-title{
    text-align: center;
    margin: 2em auto 0 auto;
    max-width: 200em;
    
}

.photoset-area{
    clear: both;
    width: 100%;
    overflow: hidden;
    /* background: #fff;
    padding: 2em; */
    margin: 1em 0;
    text-align: center;
    background: #fff;
    padding: 1em;
}
.photoset-area .photo-wrapper{
    display: inline-block;
    width: 20%;
    height: 0;
    padding: 20% 0 0 0;
    margin: 0;
    position: relative;
}
.photoset-area img{
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}
.photoset-area .photo-title{
    text-align: center;
    margin: 2em auto 0 auto;
    max-width: 200em;
    
}


.photos-area{
    clear: both;
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding: 2em;
    margin: 1em 0;
}
.photos-area a{
    float: left;
    width: 20%;
    margin: 0;
    height: 0;
    padding: 20% 0 0 0;
    position: relative;
}
.photos-area a:hover img{
    transform: translateX(-50%) translateY(-50%) scale(1.05);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1.05);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1.05);
}
.photos-area img{
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    -ms-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
    transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
}

.haaste{
    text-align: center;
}
.haastettu{
    font-weight: 700;
    font-size: 1.2em;
}

#comments{
    margin: 0 auto;
    max-width: 40em;
}
#comments .logged-in-as{
    display: none;
}
#comments textarea{
    height: 6em;
}
.comment-metadata{
    display: none;
}

.comment-list{
    list-style: none;
    margin: 0 0 1em 0;
    padding: 0;
}
.comment-author{
    font-weight: 700;
    font-size: 0.875em;
    text-transform: uppercase;
}
.comment-author .says{
    display: none;
}
.comment-list + #respond{
    border-top: 4px solid rgba(0,0,0,0.05);
    padding-top: 1em;
}
#reply-title{
    display: none;
}

.screen-reader-text{
    display: none;
}
.open-full-img{
    text-decoration: none;
    font-size: 0.875em;
    text-transform: uppercase;
}

.mfp-zoom-out-cur header,
.mfp-zoom-out-cur main,
.mfp-zoom-out-cur footer{
    filter: blur(5px);
}

#user_photos input.button{
    margin: 1em 0;
    float: right;
}

#user_photos a.button{
    margin: 1em 0;
    float: left;
}

.rate-total{
    font-size: 1.75em;
    text-align: center;
}

.processes{
    margin: 0 0 2em 0;
}
.process{
    margin: 0 0 1px 0;
    position: relative;
    background: #ccc;
}
.process__bar{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #20AE62;
    z-index: 1;
}
.process__info{
    line-height: 2em;
    display: block;
    padding: 0 1em;
    position: relative;
    z-index: 2;
}