.container {
    margin: 0 auto;
}
.grid {
    gap: 1em;
    justify-content: center;
    margin: 0 auto;
    width: fit-content;
}

.conexus {
    font-size: 1.5em;
}
.kiosk {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 195px;
}
.kiosk__container {
    text-align: center;
    overflow: hidden;
}
.kiosk__container.page {
    font-size: 0.8em;
    max-height: 100%;
}
.kiosk__container.page-one p {
    margin-bottom: 0;
}
.kiosk__container.page button {
    margin-top: 1em;
}
.kiosk__container >i {
    font-size: 2em;
    margin: 1em 0;
    color: var(--alt);
}

.kiosk__container .form-field label {
    display: block;
}
.kiosk__container .form-field input {
    border-radius: 2px;
    border: 1px solid var(--secondary);
    color: var(--secondary);
    padding: 10px 15px;
}

.camera-window {
    border: 2px solid black;
    background-image: url(../img/camera-bg.png);
    background-size: cover;
    box-shadow: inset 0px 0px 15px 5px #000000;
    height: 300px;
    width: 220px;
    display: flex;
    align-items: end;
    justify-content: center;
}
.camera-window i {
    font-size: 200px;
    color: var(--alt);
}
.map-svg {
    margin-top: -10px;
}
#DeviceLockers {
    -webkit-filter: drop-shadow( 0 0 5px var(--alt));
    filter: drop-shadow( 0 0 5px var(--alt));
}

/******************** Aesthetics *************/
.kiosk__camera, .kiosk__dispenser, .kiosk__speaker {
    display: block;
    position: absolute;
}
.kiosk__camera, .kiosk__dispenser {
    background: black;
    border: 1px solid white;
    transform: translateX(28px);

}

.kiosk__camera {
    top: 243px;
    right: -23px;
    border-radius: 400px;
    width: 15px;
    height: 15px;
}
.kiosk__camera:after {
    display: block;
    border-radius: 400px;
    content: '';
    background-image: radial-gradient( rgba(119, 109, 80, 0.85), transparent 40% ), radial-gradient( rgba(51,180,105,0.25) 13%, rgba(119,159,59,0.2) 53% 70%, rgba(119,159,59,0) 68% ), radial-gradient( rgba(51,180,105,0.25) 23%, rgba(51,180,105,0.2) 53% 70%, rgba(51,180,105,0) 68% ), radial-gradient( #2C1F28, #241921 55%, #080609 70% );
    background-size: 100%, 190% 100%, 190% 100%, 100%;
    background-repeat: no-repeat;
    background-position: center -10px, -30px -48px, -30px 55px, center;
    height: 100%;
    width: 100%;
}
/* .kiosk__camera:after {
    border: 1px solid white;
    border-radius 400px;
} */
.kiosk__dispenser {
    bottom: -65px;
    width: 100px;
    height: 55px;
    border-color: rgba(255, 255, 255, 0.5);
    
    box-shadow:0 -3px 5px 5px rgba(255,255,255,0.25) inset;
    -webkit-box-shadow:0 -3px 5px 5px rgba(255,255,255,0.25) inset;
    -moz-box-shadow:0 -3px 5px 5px rgba(255,255,255,0.25) inset;
}

.kiosk__speaker {
    right: -65px;
    top: 10px;
    width: 43px;
    height: 43px;
    display: grid;
    gap: 1px;
    grid-template-areas: ". hole1 hole2 ."
                         "hole3 hole4 hole5 hole6"
                         "hole7 hole8 hole9 hole10"
                         ". hole11 hole12 .";
    justify-content: center;
    align-items: center;
}
.kiosk__speaker .hole {
    display: block;
    border-radius:30px;
    width: 6px;
    height: 6px;
    background: black;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    margin: 2px;
    box-shadow:0 0 1px 1px rgba(255,255,255,0.25) inset;
    -webkit-box-shadow:0 0 1px 1px rgba(255,255,255,0.25) inset;
    -moz-box-shadow:0 0 1px 1px rgba(255,255,255,0.25) inset;
}
.kiosk__speaker .hole:nth-child(1) { grid-area: hole1; }
.kiosk__speaker .hole:nth-child(2) { grid-area: hole2; }
.kiosk__speaker .hole:nth-child(3) { grid-area: hole3; }
.kiosk__speaker .hole:nth-child(4) { grid-area: hole4; }
.kiosk__speaker .hole:nth-child(5) { grid-area: hole5; }
.kiosk__speaker .hole:nth-child(6) { grid-area: hole6; }
.kiosk__speaker .hole:nth-child(7) { grid-area: hole7; }
.kiosk__speaker .hole:nth-child(8) { grid-area: hole8; }
.kiosk__speaker .hole:nth-child(9) { grid-area: hole9; }
.kiosk__speaker .hole:nth-child(10) { grid-area: hole10; }
.kiosk__speaker .hole:nth-child(11) { grid-area: hole11; }
.kiosk__speaker .hole:nth-child(12) { grid-area: hole12; }

.grid > p {
    grid-column: 1 / 1;
    font-size: 0.8em;
    padding: 0 0.5em;
}

@media (min-width: 80em) {
    .grid > p {
        grid-column: 1 / span 3;
    }
}