@charset "UTF-8";

/* ------- grid ------  */

.outergrid {
	display: grid;
	grid-template-areas: 'header header header header header'
						'. row-icons row-icons row-icons .'
						'. . main . .'
                        '. . spacerow . .'
						'footer footer footer footer footer';
	grid-template-columns: 1fr 5% minmax(300px,1200px) 5% 1fr;
	grid-template-rows: auto auto auto 1fr auto;
    min-height: 100vh;
}


.main {
	grid-area: main;
	text-align: center;
}
.main img {
	width: 100%;
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.4), 0 6px 20px 2px rgba(0, 0, 0, 0.39);
}

/* maps on front img */
#frontmapdiv{
    position:relative;
    z-index:0;
}

#pos1{ /* Chorfenster Mitte */
    position:absolute;
    width:5%;
    height:20%;
    top:30%;
    left:48%; 
}
#pos2{ /* Chorfenster rechts 1 */
    position:absolute;
    width:5%;
    height:30%;
    top:30%;
    left:58%;
}
#pos3{ /* Seitenfenster links */
    position:absolute;
    width:7%;
    height:22%;
    top:32%;
    left:10%; 
}
#pos4{ /* Seitenfenster rechts */
    position:absolute;
    width:7%;
    height:22%;
    top:32%;
    left:83%;
}
#pos5{ /* Chor -1 */
    position:absolute;
    width:5%;
    height:30%;
    top:30%;
    left:37%;
}
#pos6{ /* Chorfenster links 2 */
    position:absolute;
    width:4%;
    height:30%;
    top:30%;
    left:30%;
}
#pos7{ /* Chorfenster rechts 2 */
    position:absolute;
    width:4%;
    height:30%;
    top:30%;
    left:66%;
}
#pos8{ /* Viktor */
    position:absolute;
    width:7%;
    height:21%;
    top:59%;
    left:9%;
}
#pos9{ /* Hauptaltar */
    position:absolute;
    width:10%;
    height:20%;
    top:54%;
    left:45%; 
}
#pos10{ /* Zelebrationaltar */
    position:absolute;
    width:12%;
    height:10%;
    top:77%;
    left:44%; 
}
#pos11{ /* Sakramentshäuschen */
    position:absolute;
    width:7%;
    height:25%;
    top:60%;
    left:18%;
}
#pos12{ /* Ew.Licht, Ambo */
    position:absolute;
    width:12%;
    height:21%;
    top:65%;
    left:28%;
}
#pos13{ /* Kanzel */
    position:absolute;
    width:12%;
    height:15%;
    top:75%;
    left:70%;
}
#pos14{ /* Krippe */
    position:absolute;
    width:12%;
    height:15%;
    top:73%;
    left:82%;
}
#pos1:hover, #pos2:hover, #pos3:hover, #pos4:hover, #pos5:hover, #pos6:hover, #pos7:hover, #pos8:hover, #pos9:hover, #pos10:hover, #pos11:hover, #pos12:hover, #pos13:hover, #pos14:hover{
    border:1px solid red;
}

h3 {
    margin: 1.5em 0;
}