/*--------------------------------------------------*/
/* 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;
}

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

.navbar {
    background-color: #fff;
    opacity: .9;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.navbar span {
    display: block;
    color: #232323;
    text-align: center;
    padding: 1vw 5vw 1vw 0px;
    text-decoration: none;
    font-size: 2.5vw;
}

#home {
    padding-left: 26px;
    float: left;
    text-transform: uppercase;
}


.dropup {
    float: right;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.dropup-content {
    display: none;
    position: fixed;
    bottom: 3.5vw;
    left: 0px;
    background-color: #fff;
    min-width: 100vw;
/*    box-shadow: 8px 8px 16px 8px rgba(0,0,0,0.2);*/
    z-index: 1;
    padding: 2vw 5vw 2vw 45vw;
    text-align: right;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

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

.show {
    display: block;
}


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

.dot {
    height: 9vw;
    width: 9vw;
    background-color: #111;
    border-radius: 50%;
    display: inline-block;
    margin: 1px 1px;
    mix-blend-mode: multiply;
}

#place11{
    background-color: rgb(140, 170, 0);
    margin-left: 5vw;
    margin-top: 2vw;
}
#place12{
    margin-right: 2vw;
    margin-left: 2vw;
    -webkit-transform: scale(2);
    transform: scale(2);
    background-color: #ba0769;
}
#place13{
    margin-bottom: -3.5vw;
    background-color: rgb(240, 130, 0);
}
#place14 {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    margin: -2vw;
    background-color: #00bbeb;
}
#place15 {
    margin-top: -2vw;
    background-color: #ffe400;
}
#place16 {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    margin-left: 2vw;
    margin-right: 24vw;
    margin-bottom: -6vw;
    background-color: #c31414;
}
#place17 {
    -webkit-transform: scale(2);
    transform: scale(2);
    margin-left: 4vw;
    margin-right: 3vw;
    margin-top: 2vw;
    background-color: #4ba700;
}
#place18 {
    margin-left: 0vw;
    background-color: #8005c7;
}
#place19 {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    background-color: #d9ae00;
}
#place21 {
    background-color: #75005d;
    margin-left: 0vw;
    margin-right: 4.5vw;
}
#place22 {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    background-color: #0099a7;
}
#place23 {
    margin-left: -1vw;
    margin-bottom: -3vw;
    background-color: #4f00a7;
}
#place24 {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    background-color: #0bac75;
}
#place25 {   
    -webkit-transform: scale(2);
    transform: scale(2);
    margin-left: 4vw; 
    margin-bottom: -2vw;
    background-color: #ffa800;
}
#place26 {
    background-color: #fff;
    margin-right: 18vw;
}
#place27 {
    background-color: #fff;
}
#place28 {
    -webkit-transform: scale(2);
    transform: scale(2);
    margin-left: 7vw;
    background-color: #d179cc;
}
#place31 {
    background-color: #ff4e00;
    margin-left: 2vw;
}
#place32 {
    -webkit-transform: scale(2);
    transform: scale(2);
    margin-top: 7vw;
    margin-left:2vw;
    background-color: #00750e;
}
#place33 {
    background-color: #fff;
}
#place34 {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    background-color: #0b1eac;
}
#place41 {
     -webkit-transform: scale(1.4);
     transform: scale(1.4);
    background-color: #d8d100;
    margin-left: 2vw;
}
#place42 {
    background-color: #87009b;
}
#place51 {
    background-color: #005d75;
    margin-left: 4vw;
    margin-top: -2vw;
}



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

.overlay {
    position: relative;
    color: #fff;
    display: block;
    text-align: center;
}


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

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

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

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

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

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

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

#orchard a {
    font-family: 'Roboto', sans-serif; 
    font-size: 1.2vw;
    text-transform: uppercase;
    position: absolute;
    top: 2.6vw;
    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;
}


/*--------------------------------------------------*/
/* HOVERS */
/*--------------------------------------------------*/

.dot:hover{
    transform: scale(2);
    transition: transform 0.3s, opacity 0.3s;
    mix-blend-mode: multiply;
}
#place33:hover,
#place26:hover,
#place27:hover {
    transform: scale(1);
    opacity: 0;
}

/*transform 2*/
#place12:hover,
#place17:hover,
#place25:hover,
#place28:hover,
#place32:hover {
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
}

/*transform 1.3*/
#place14:hover,
#place16:hover,
#place19:hover,
#place22:hover,
#place34:hover {
    -webkit-transform: scale(1.9);
    transform: scale(1.9);
}

/*transform 1.5*/
#place24:hover,
#place41:hover {
    -webkit-transform: scale(2);
    transform: scale(2);
}