/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 ;
    box-sizing: border-box; }
.column,
.columns {
    width: 100%;
    float: left;
    box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 100%) {
    .container {
        width: 85%;
        padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 100%) {
    .container {
        width: 80%; }
    .column,
    .columns {
        margin-left: 4%; }
    .column:first-child,
    .columns:first-child {
        margin-left: 0; }

    .one.column,
    .one.columns                    { width: 4.66666666667%; }
    .two.columns                    { width: 13.3333333333%; }
    .three.columns                  { width: 22%;            }
    .four.columns                   { width: 30.6666666667%; }
    .five.columns                   { width: 39.3333333333%; }
    .six.columns                    { width: 48%;            }
    .seven.columns                  { width: 56.6666666667%; }
    .eight.columns                  { width: 65.3333333333%; }
    .nine.columns                   { width: 74.0%;          }
    .ten.columns                    { width: 82.6666666667%; }
    .eleven.columns                 { width: 91.3333333333%; }
    .twelve.columns                 { width: 100%; margin-left: 0; }

    .one-third.column               { width: 30.6666666667%; }
    .two-thirds.column              { width: 65.3333333333%; }

    .one-half.column                { width: 48%; }

    /* Offsets */
    .offset-by-one.column,
    .offset-by-one.columns          { margin-left: 8.66666666667%; }
    .offset-by-two.column,
    .offset-by-two.columns          { margin-left: 17.3333333333%; }
    .offset-by-three.column,
    .offset-by-three.columns        { margin-left: 26%;            }
    .offset-by-four.column,
    .offset-by-four.columns         { margin-left: 34.6666666667%; }
    .offset-by-five.column,
    .offset-by-five.columns         { margin-left: 43.3333333333%; }
    .offset-by-six.column,
    .offset-by-six.columns          { margin-left: 52%;            }
    .offset-by-seven.column,
    .offset-by-seven.columns        { margin-left: 60.6666666667%; }
    .offset-by-eight.column,
    .offset-by-eight.columns        { margin-left: 69.3333333333%; }
    .offset-by-nine.column,
    .offset-by-nine.columns         { margin-left: 78.0%;          }
    .offset-by-ten.column,
    .offset-by-ten.columns          { margin-left: 86.6666666667%; }
    .offset-by-eleven.column,
    .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

    .offset-by-one-third.column,
    .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

    .offset-by-one-half.column,
    .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
    font-size: 62.5%; }

body {
    margin: 0;
    padding: 0;
    font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.6;
    font-weight: 400;
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333; 
    font-variant-numeric: lining-nums;  /* <numeric-figure-values> */
    


}


#photos {
    /* Prevent vertical gaps */
    line-height: 0;

    -webkit-column-count: 3;
    -webkit-column-gap:   0px;
    -moz-column-count:    3;
    -moz-column-gap:      0px;
    column-count:         3;
    column-gap:           0px;
}

#photos img {
    /* Just in case there are inline attributes */
    width: 100% !important;
    height: auto !important;
}

@media (max-width: 1200px) {
    #photos {
        -moz-column-count:    3;
        -webkit-column-count: 3;
        column-count:         3;
    }
}
@media (max-width: 1000px) {
    #photos {
        -moz-column-count:    3;
        -webkit-column-count: 3;
        column-count:         3;
    }
}
@media (max-width: 800px) {
    #photos {
        -moz-column-count:    2;
        -webkit-column-count: 2;
        column-count:         2;
    }
}
@media (max-width: 400px) {
    #photos {
        -moz-column-count:    2;
        -webkit-column-count: 2;
        column-count:         2;
    }
}

/* Divs
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.tester1
{position: fixed;
    top: 160px;
    left: 10px;
    z-index: 20;
    display: block;
}

.tester2
{position: fixed;
    top: 210px;
    left: 10px;
    z-index: 21;

}

.tester3
{position: fixed;
    top: 260px;
    left: 10px;
    z-index: 22;
}

.tester4
{position: fixed;
    top: 310px;
    left: 10px;
    z-index: 22;
}

.tester5
{position: fixed;
    top: 360px;
    left: 10px;
    z-index: 22;
}

.tester6
{position: fixed;
    top: 410px;
    left: 10px;
    z-index: 22;
}

.collages
{position: absolute;
    z-index: -5;
}

#myDIV {
    position: fixed;
    width: 100% !important;
    height: auto !important;
    margin-top: 0px;
    top: 0px;
    left: -3px;
    z-index: 10;
}

#myDIV2 {
    position: fixed;
    width: 100%;
    background-color: ;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    z-index: 9;
}

#myDIV3 {
    position: fixed;
    width: 100%;
    background-color: ;
    margin-top: 0px;
    top: -50px;
    left: -50px;
    z-index: 11;
}

#myDIV4 {
    position: fixed;
    width: 100%;
    background-color: ;
    margin-top: 0px;
    top: -50px;
    left: -50px;
    z-index: 12;
}

#myDIV5 {
    position: fixed;
    width: 100%;
    background-color: ;
    margin-top: 0px;
    top: -50px;
    left: -50px;
    z-index: 13;
}

#myDIV6 {
    position: absolute;
    width: 100%;
    background-color: ;
    margin-top: 0px;
    top: 0px;
    left: 0px;
    z-index: 8;
}


/* Audio
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.audiotest {
    position: fixed;
    z-index: 100;
    left:10px;
    top:60px;
    filter: opacity(80%);
    width: 200px;
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    display: inline-block;
    height: 40px;
    padding: 0 0px;
    color: #555;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    /*background-color: transparent;*/
    background-color: white;
    border-radius: 1px;
    border: 1px solid #fff;
    cursor: pointer;
    box-sizing: border-box; 
    filter: opacity(90%);
    width: 100px;
    margin-right: 10px;

}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
    color: white;
    border-color: #27dddd;
    background-color: #27dddd; 
    outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
    color: #FFF;
    background-color: #33C3F0;
    border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
    color: #FFF;
    background-color: #27DDDD;
    border-color: #27DDDD; }


/*audio player*/
/* >> reset */

ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
ol li {
    margin: 0;
    list-style: none;
}
/* * {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
}*/

a, a:focus, a:active, a:hover, a:visited {
    text-decoration: none;
}
a[href], a[href]:active, a[href]:visited {
    color: #333;
    outline: 0 none;
    text-decoration: none;
}
a[href]:hover, a[href]:focus {
    color: #333;
}
/* << reset */

/* page style 
.page {
position: relative;
margin: 0 auto;
width: 70%;
min-width: 300px;
max-width: 700px;
}

.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}*/

/* Audio Player */
.player-wrap {
    position: relative;
    margin: 0 0 1em;
    padding: 0;
}
.player-wrap.enabled {
    padding-bottom: em;
}
.player-wrap .button {
    float: left;
    display: none;
    margin: 1.5em 2em;
    width: 5em;
    height: 5em;
    background-color: #333;
    line-height: 5em;
    text-align: center;
    border-radius: 25%;
    display: none;
}
.player-wrap .button:hover {
    background-color: #444;
    cursor: pointer;
    display: none;
}
.player-wrap.enabled .button {
    display: block;
    display: none;
}
.player-wrap .info {
    margin-left: 10em;
    display: none;
}
.player-wrap h1 {
    padding: 1.5em 0;
}
.player-wrap .action {
    font-style: italic;
}
.player-wrap .player {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 1em 0 6em;
    width: 100%;
    height: 1em;
    background-color: darkgray;
    font-size: 2em;
    font-weight: 600;
    color: white;
    box-sizing: border-box;
    width: 215px;
}
.player-wrap.enabled .player {
    display: block;
}
.player-wrap .player svg {
    margin: .25em;
    width: .5em;
    height: .5em;
    fill: white;

}
.player-wrap .player div {
    display: block;
    height: 1em;
}
.player-wrap audio,
.player-wrap .player .pause {
    display: none;
}
.player-wrap .playpause, .player-wrap .timer,
.player-wrap .prev, .player-wrap .next {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    height: 1em;
    line-height: 1em;
    vertical-align: top;
    text-align: center;
}
.player-wrap .playpause,
.player-wrap .prev, .player-wrap .next {
    width: 1em;
    cursor: pointer;

}
.player-wrap .playpause {
    left: 1em;
}
.player-wrap .next {
    left: auto;
    right: 0;
    
}
.player-wrap .playpause:hover,
.player-wrap .prev:hover, .player-wrap .next:hover {
    background-color: magenta;
}
.player-wrap .playpause, .player-wrap .play, .player-wrap .pause,
.player-wrap .prev::-moz-focus-inner,
.player-wrap .next::-moz-focus-inner {
    border: 0;
    padding: 0;
}
.player-wrap .timer {
    left: 2em;
    width: 4em;
}
.player-wrap .timer div {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    font-size: .45em;
}
.player-wrap .seek {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display:none; /*playhead*/
}
.playlist-wrap {
    background-color: white;
    padding-left: -10px;
    width: 215px;
}
.playlist-wrap li {
    margin: 0 0 0 0em;
    padding-left: 10px;
    /*padding: .25em 0 .25em .5em;*/
    list-style:none;
    width: 215px;
}
.playlist-wrap li.sel {
    background-color: #27dddd;
    padding-left: -10px;
    width: 205px;
}
.playlist-wrap li:hover {
    background-color: magenta;
    width: 205px;
}

/* >> input[type=range] class: seek */
input.seek[type=range] {
    box-sizing: border-box;
    background-color: transparent;
    vertical-align: top;
    font-size: 1em;
    -webkit-appearance: none;
}
input.seek[type=range]:focus {
    outline: none;
}
input.seek[type=range]::-webkit-slider-runnable-track {
    box-sizing: border-box;
    width: 98%;
    height: .17em;
    background-color: #eee;
    cursor: pointer;
    border-radius: .1em;
    transition: all .2s ease;
}
input.seek[type=range]::-webkit-slider-thumb {
    box-sizing: border-box;
    width: .17em;
    height: .7em;
    margin-top: -.27em;
    border-radius: .1em;
    background-color: #eee;
    cursor: pointer;
    -webkit-appearance: none;
}
input.seek[type=range]:focus::-webkit-slider-runnable-track {
    background-color: #eee;
}
input.seek[type=range]::-moz-range-track {
    box-sizing: border-box;
    border: 0 solid #eee;
    width: 98%;
    height: .17em;
    background-color: #eee;
    cursor: pointer;
    border-radius: .1em;
    transition: all .2s ease;
}
input.seek[type=range]::-moz-range-thumb {
    box-sizing: border-box;
    border: 0 solid #eee;
    width: .17em;
    height: .7em;
    background-color: #eee;
    cursor: pointer;
    border-radius: .1em;
}
input.seek[type=range]::-ms-track {
    box-sizing: border-box;
    border: 0 none;
    width: 98%;
    height: .17em;
    background-color: transparent;
    color: transparent;
    cursor: pointer;
    transition: all .2s ease;
}
input.seek[type=range]::-ms-fill-lower {
    background-color: #eee;
    border-radius: .1em;
}
input.seek[type=range]::-ms-fill-upper {
    background-color: #eee;
    border-radius: .1em;
}
input.seek[type=range]::-ms-thumb {
    margin-top: -.01em;
    box-sizing: border-box;
    width: .17em;
    height: .7em;
    background-color: #eee;
    cursor: pointer;
    border-radius: .1em;
}
input.seek[type=range]:focus::-ms-fill-lower {
    background-color: #eee;
}
input.seek[type=range]:focus::-ms-fill-upper {
    background-color: #eee;
}
/* << input[type=range] class: seek */