html,
body {
    height: 100%;
    font-family: 'Montserrat', sans-serif;
}

body {
    background-image: url("../img/Background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover
}

img {
    max-width: 100%;
    max-height: 100%;
}

.content-row {
    height: 70%;
}

.info-row {
    height: 8%;
    margin: 36px;
}

.footer {
    height: 15%;
    background-color: rgba(255, 255, 255, 0.6);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
}

.parking-spot {
    position: relative;
    height: auto;
    width: 19%;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
}

.info-spot {
    position: relative;
    height: auto;
    width: 20%;
    margin-left: 30px;
}

.spot-info-content {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    left: 50%;
    width: 70%;
    height: 76%;
    color: white;
    font-size: large;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}

.spot-info-content.custom-right {
    height: 57%;

}

.spot-info-content>p {
    margin: 0% 20%;
    font-size: 29px;
    font-size: 1.4vw;
    font-weight: 500;
}

.spot-info-content>p.custom-right {
    margin-left: 40%;
    margin-right: 6%;
    font-size: 29px;
    font-size: 1.4vw;
}

.status-content {
    position: absolute;
    transform: translateX(-50%) translateY(40%);
    left: 50%;
    bottom: 0%;
    width: 68%;
    height: 8%;
    -webkit-transform: translateX(-50%) translateY(40%);
    -moz-transform: translateX(-50%) translateY(40%);
    -ms-transform: translateX(-50%) translateY(40%);
    -o-transform: translateX(-50%) translateY(40%);
}

.status-text {
    font-size: 28px;
    font-size: 1.4vw;
}

.state-text {
    font-weight: 700;
}

.time-text {
    font-weight: 400;
    display: block;
}

.badge-container {
    width: 100%;
    height: 18%;
    position: absolute;
    transform: translateY(-45%);
    -webkit-transform: translateY(-45%);
    -moz-transform: translateY(-45%);
    -ms-transform: translateY(-45%);
    -o-transform: translateY(-45%);
}

img.spot-badge {
    width: auto;
    height: auto;
}

.badge-number {
    position: absolute;
    top: 49%;
    left: 14.5%;
    transform: translate(-50%, -50%);
    font-size: 1.2em;
    font-weight: 700;
    color: white;
}

.logo-fleximodo {
    height: 50%;
    padding-left: 2%;
}

.logo-partner {
    height: 75%;
    padding-right: 1%;

}

img.center-on-parrent {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}

img.spot-empty {
    width: 65%;
}

.gradient-info {
    /* border: 2px solid black; */
    height: 100%;
    background: rgb(125, 185, 232);
    background: -moz-linear-gradient(45deg, rgba(125, 185, 232, 1) 0%, rgba(30, 87, 153, 1) 100%);
    background: -webkit-linear-gradient(45deg, rgba(125, 185, 232, 1) 0%, rgba(30, 87, 153, 1) 100%);
    background: linear-gradient(45deg, rgba(125, 185, 232, 1) 0%, rgba(30, 87, 153, 1) 100%);
    /* filter:; */
    /* progid: DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=1); */
    /* -webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=1); */
}

.info-text-row {
    position: absolute;
    transform: translateX(-50%) translateY(-50%);
    left: 50%;
    top: 50%;
    width: 100%;
    color: white;
    font-size: 1.3vw;
    font-weight: bold;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
}