@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
html,
body {
    background-color: #F3F3F3;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}


.card {
    margin: 5px;
    padding: 8px 8px;
    width: 300px;
    height: 300px;
    border-radius: 3px;
    background-color: #878787;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, .2);
    -webkit-animation: open 2s cubic-bezier(.39, 0, .38, 1);
}

@-webkit-keyframes open {
    from {
        padding: 0 30px;
        height: 0;
    }
    to {
        height: 470px;
    }
}

h1,
h2,
h3,
h4 {
    color: #fff;
    position: relative;
}

h1 {
    float: right;
    color: #fff;
    font-weight: 300;
    font-size: 6.59375em;
    line-height: .2em;
    -webkit-animation: up 2s cubic-bezier(.39, 0, .38, 1) .2s;
}

h2 {
    font-weight: 300;
    font-size: 2.25em;
    margin-bottom: 8px;
    -webkit-animation: up 2s cubic-bezier(.39, 0, .38, 1);
}

.dot {
    font-size: .9em;
}

span {
    color: #bbbbbb;
}

.sky {
    float: right;
    position: relative;
    margin-top: 18px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #03A9F4;
    -webkit-animation: up 2s cubic-bezier(.39, 0, .38, 1) .2s;
}

@-webkit-keyframes up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(15px);
    }
    50% {
        opacity: 0;
        -webkit-transform: translateY(15px);
    }
    99% {
        -webkit-animation-play-state: paused;
    }
    100% {
        opacity: 1;
    }
}