.artbox {
width: 23.8636363%;
height: auto;
float: left;
padding: 10px;
border: 1px solid #666666;
border-radius: 8px;
text-align: left;
overflow: hidden;
display: table-row;
table-layout: fixed;
	-webkit-box-shadow: 0 0 0.313em rgba( 0, 0, 0, .05 ); /* 5 */
	box-shadow: 0 0 0.313em rgba( 0, 0, 0, .05 ); /* 5 */
	-webkit-transition: -webkit-box-shadow .3s ease, border-color .3s ease;
	transition: box-shadow .3s ease, border-color .3s ease;
}

a.artlink {
font-size: 18px;
color: #666666;
font-weight: bold;
text-decoration: none;
}

.artbox:hover {
	border: 1px solid #0a6f43;
	-webkit-box-shadow: 0 0 0.938em rgba( 0, 0, 0, .25 ); /* 15 */
	box-shadow: 0 0 0.938em rgba( 0, 0, 0, .25 ); /* 15 */
}

.artbox:hover a.artlink {
	color: #0a6f43;
}

.artthumb {
padding-right: 10px;
display: table-cell;
vertical-align: middle;
}

.artthumb img {
width: auto;
height: 100px;
border-radius: 5px;
border: 1px solid #fff;
display: block;
}

.artbox:hover .artthumb img  {
border: 1px solid #0a6f43;
}

.arttext {
display: table-cell;
vertical-align: middle;
}

#box1, #box2, #box3, #box5, #box6, #box7, #box9, #box10, #box11 {
margin-right: 1.5151515%; 
margin-bottom: 15px; 
}

#box4, #box8, #box12 {
margin-right: 0;
margin-bottom: 15px; 
}

.artindexheader2 {
color: #666666;
font-size: 22px;
font-weight: bold;
}

.artindexbox {
border: 1px solid #f9b233;
border-radius: 20px;
padding: 20px;
width: 80%;
text-align: justify;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
font-size: 18px;
margin: 0 auto;
margin-bottom: 30px;
color: #666666;
}

.artindexhinweis {
text-align: right;
}

.artcont {
display: flex;
}

#imglayer {
width: 280px;
padding-right: 20px;
}

.artimage {
border: 1px solid #fff;
border-radius: 8px;
}

.artimage:hover {
border: 1px solid #0a6f43;
}

.artimage {
width: auto;
max-width: 260px;
}


@media only screen and (max-width: 1200px) {
.artindexhinweis { text-align: left; }
}


@media only screen and (max-width: 980px) {

.artbox {
width: 32.32%;
height: auto;
padding-bottom: 10px;
float: left;
}

a.artlink {
font-size: 16px;
}

#box1, #box2, #box4, #box5, #box7, #box8, #box10, #box11 {
margin-right: 1.5151515%; 
margin-bottom: 10px; 
}

#box3, #box6, #box9, #box12 {
margin-right: 0;
margin-bottom: 10px;
}

.artindexbox { font-size: 16px; margin-bottom: 20px; }
.artindexheader2 { font-size: 20px; }

}

@media only screen and (max-width: 750px) {

.artbox {
width: 48.5915493%;
height: auto;
padding-bottom: 10px;
float: left;
}


#box1, #box3, #box5, #box7, #box9, #box11 {
margin-right: 2.8169014%;
}

#box2, #box4, #box6, #box8, #box10, #box12 {
margin-right: 0;
}

}

@media only screen and (max-width: 640px) {
.artcont { display: block; }
#imglayer { width: 100%; padding-right: 0px; padding-bottom: 10px; }
.artimage { max-width: 100%; }
}


@media only screen and (max-width: 580px) {

a.artlink {
font-size: 14px;
}

.artindexbox { margin-bottom: 0px; }

}


@media only screen and (max-width: 440px) {

.artbox {
width: 100%;
height: auto;
padding-bottom: 10px;
float: left;
}

#box2, #box4, #box6, #box8, #box10, #box12, #box1, #box3, #box5, #box7, #box9, #box11 {
margin-right: 0;
}

}