@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

html, body {
    font-family: 'Montserrat', sans-serif;
    margin:      0;
    padding:     0;
}

#map {
    height: 100vh;
    width:  100vw;
}

.container-info {
    align-items:     center;
    background:      white;
    border-radius:   6px;
    bottom:          45px;
    box-shadow:      0px 0px 25px #00000021;
    color:           #2e2e2e;
    display:         flex;
    flex-flow:       wrap row;
    font-size:       0.8em;
    justify-content: space-around;
    position:        fixed;
    left:            50%;
    padding:         15px 25px;
    transform:       translateX(-50%);
    max-width:       380px;
    width:           75%;
}

span.speed {
    font-size:   2.5em;
    font-weight: 600;
    margin:      0px 30px;
    text-align:  center;
}

span.speed:after {
    content:    'km/h';
    display:    block;
    font-size:  0.4em;
    margin-top: 2px;
    text-align: center;
}

.timeout {
    align-items:     center;
    display:         flex;
    flex-flow:       wrap column;
    height:          100%;
    justify-content: center;
    left:            0px;
    opacity:         0;
    position:        fixed;
    top:             0px;
    transition:      opacity ease-in-out 0.3s, z-index 0s linear 0.3s;
    width:           100%;
    z-index:         -1;
}

.timeout.visible {
    opacity:    1;
    transition: opacity ease-in-out 0.3s, z-index 0s linear 0s;
    z-index:    999;
}


.timeout:before {
    background: #111822;
    content:    '';
    opacity:    0.65;
    position:   absolute;
    height:     100%;
    width:      100%;
    transition: opacity ease-in-out 0.4s;
}

.timeout.timeout.visible:before {
    opacity: 0.65;
}

.timeout .error {
    color:          white;
    opacity:        0;
    padding-bottom: 25px;
    pointer-events: none;
    text-align:     center;
    transition:     all ease-out 0.35s;
    z-index:        0;
}

.timeout .error.visible {
    pointer-events: auto;
    opacity:        1;
    padding-bottom: 0px;
}


.timeout .error h3 {
    letter-spacing: 0.025em;
    line-height:    1.5em;
    width:          450px;
}

.timeout .error span {
    bottom:    40px;
    display:   block;
    font-size: 0.9em;
    position:  absolute;
}

.timeout .error button {
    background:     #00ffe6;
    border:         none;
    color:          white;
    cursor:         pointer;
    font-family:    inherit;
    font-weight:    600;
    letter-spacing: 0.025em;
    margin-top:     5px;
    outline:        none;
    overflow:       hidden;
    padding:        13px 25px;
    position:       relative;
    text-transform: uppercase;
    z-index:        1;
}

.timeout .error button:hover::before {
    transform: translateX(0px);
}


.timeout .error button:before {
    content:    '';
    background: #00ccb8;
    height:     100%;
    left:       0px;
    position:   absolute;
    top:        0px;
    transform:  translateX(-100%);
    transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.6s;
    width:      100%;
    z-index:    -1;
}

.timeout .loader {
    left:           50%;
    opacity:        0;
    position:       absolute;
    pointer-events: none;
    top:            50%;
    transition:     opacity 0.3s ease-out 0s;
    transform:      translateX(-50%) translateY(-50%);
    z-index:        1;
}

.timeout .loader.visible {
    pointer-events: auto;
    transition:     opacity 0.3s ease-out 0.4s;
    opacity:        1;
}

.timeout .loader span:last-of-type {
    color:      white;
    font-size:  1.1em;
    display:    block;
    margin-top: 30px;
}

.timeout .loader .spinner  {
    animation:     rotate 1.15s linear infinite;
    background:    transparent;
    border:        solid 4px #00ccb8;
    border-top:    solid 4px transparent;
    border-bottom: solid 4px transparent;
    border-radius: 50%;
    display:       block;
    height:        60px;
    margin:        auto;
    width:         60px;
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}