/*--------------------------------------------------*/
/* BASIC SETUP */
/*--------------------------------------------------*/
*{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    background-color: #fff;
    color: #232323;
    font-family: 'Oswald', sans-serif;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/*--------------------------------------------------*/
/* REUSABLE COMPONENTS */
/*--------------------------------------------------*/

a {
    font-family: 'Oswald', sans-serif;
    text-align: center;
    text-rendering: optimizeLegibility;
    color: #fff;
    text-decoration: none;
}
/*---------  HEADINGS -----------*/

h1{
    padding-top: 0px;
    padding-left: 2vw;
    margin: 0px;
    font-weight: 300;
    text-transform: uppercase;
    color: #232323;
    font-size: 2.3vw;
    word-spacing: 4px;
    letter-spacing: 1px;
}

/*--------------------------------------------------*/
/* NAVIGATION */
/*--------------------------------------------------*/

/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
    background-color: #fff;
    opacity: .9;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* Style the links inside the navigation bar */
.navbar span {
    display: block;
    color: #232323;
    text-align: center;
    padding: 2vw 5vw 2vw 0px;
    text-decoration: none;
    font-size: 6vw;
}

#home {
    padding-left: 26px;
    float: left;
    text-transform: uppercase;
}
.dropup {
    float: right;
    position: relative;
    display: inline-block;
    cursor: pointer;
       -webkit-transition: all .3s ease;
            transition: all .3s ease;
}

.dropup-content {
    display: none;
    position: fixed;
    bottom: 7.7vw;
    left: 0px;
    background-color: #fff;
    min-width: 100vw;
/*    box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2);*/
    z-index: 999;
    padding: 2vw 5vw 2vw 45vw;
    text-align: right;
    transform:scaleY(0);
}

.dropup-content a {
    color: #232323;
}
.dropup-content a:active {
    color: rgb(140, 170, 0);
}

.show {
    display: block;
    overflow:hidden;
    transition:transform 0.3s ease-out; 
    height:auto;
    transform:scaleY(1);
}


/*--------------------------------------------------*/
/* DOTS */
/*--------------------------------------------------*/

.dot {
    height: 30vw;
    width: 30vw;
    background-color: #111;
    border-radius: 50%;
    display: inline-block;
    margin: 27px 27px;
    -webkit-transform: scale(2);
    transform: scale(2);
    mix-blend-mode: multiply;
}


#place11{
    background-color: rgb(140, 170, 0);
    margin-left: 20vw;
    margin-top: 2vw;
}
#place12{
    background-color: #ba0769;
}
#place13{
    background-color: rgb(240, 130, 0);
}
#place14 {
    background-color: #00bbeb;
}
#place15 {
    margin-left: 20vw;
    background-color: #ffe400;
}
#place16 {
    background-color: #c31414;
}
#place17 {
    margin-left: 10vw;
    background-color: #4ba700;
}
#place18 {
    background-color: #8005c7;
}
#place19 {
    margin-left: 20vw;
    background-color: #d9ae00;
}
#place21 {
    background-color: #75005d;
    margin-left: 2vw;
}
#place22 {
    background-color: #0099a7;
}
#place23 {
    margin-left: 20vw;
    background-color: #4f00a7;
}
#place24 {
    background-color: #0bac75;
}
#place25 {
    margin-left: 10vw;
    background-color: #ffa800;
}
#place26 {
    background-color: #fff;
}
#place27 {
    background-color: #fff;
}
#place28 {
    margin-left: 30vw;
    background-color: #d179cc;
}
#place31 {
    background-color: #ff4e00;
    margin-left: 20vw;
}
#place32 {
    background-color: #00750e;
}
#place33 {
    background-color: #fff;
}
#place34 {
    margin-left: 30vw;
    background-color: #0b1eac;
}
#place41 {
    background-color: #d8d100;
    margin-left: 2vw;
}
#place42 {
    background-color: #87009b;
}
#place51 {
    background-color: #005d75;
    margin-left: 20vw;
}



/*--------------------------------------------------*/
/* OVERLAYS*/
/*--------------------------------------------------*/

.overlay {
    position: relative;
    opacity: 0;
    -webkit-transition: .3s ease;
    transition: .3s ease;
    color: #fff;
    display: block;
    text-align: center;
}


/*--------------------------------------------------*/
/* LINKS */
/*--------------------------------------------------*/

#myriapod a {
    position: absolute;
    font-size: 4vw;
    top: 10vw;
    bottom: 0;
    left: 0vw;
    right: 0;
}

#katherine a {
    font-family: 'Karla', sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 3vw;
    position: absolute;
    top: 13vw;
    bottom: 0;
    left: 0vw;
    right: 0;
}

#leaf a {
    font-family: 'Old Standard TT', serif;
    text-transform: uppercase;
    font-size: 3vw;
    position: absolute;
    top: 7vw;
    bottom: 0;
    left: 0vw;
    right: 0;
}

#ocd a {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 4vw;
    text-transform: uppercase;
    position: absolute;
    top: 5vw;
    bottom: 0;
    left: 0vw;
    right: 0;
}

#shabam a {
    font-family: 'Bowlby One SC', cursive; 
    font-size: 4vw;
    position: absolute;
    top: 12.2vw;
    bottom: 0;
    left: 0vw;
    right: 0;
}

#sent a {
    font-family: 'Cutive Mono', monospace;
    font-size: 4.5vw;
    position: absolute;
    top: 11vw;
    bottom: 0;
    left: 0vw;
    right: 0;
}

#orchard a {
    font-family: 'Roboto', sans-serif; 
    font-size: 4vw;
    text-transform: uppercase;
    position: absolute;
    top: 8vw;
    bottom: 0;
    left: 0vw;
    right: 0;
}

#place12 #myriapod.overlay {
    opacity: 1;
}

#place14 #katherine.overlay {
    opacity: 1;
}

#place17 #leaf.overlay {
    opacity: 1;
}

#place19 #ocd.overlay {
    opacity: 1;
}

#place25 #shabam.overlay {
    opacity: 1;
}

#place28 #sent.overlay {
    opacity: 1;
}

#place32 #orchard.overlay {
    opacity: 1;
}