ul#startgal{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width:100%;
}
#startgal li,
#firstimg {
  position: absolute;
  opacity: 0;
  z-index: 90
}

#content .trans{
    display: block;
	margin-bottom: 20px;
	position: relative;
	z-index: -1

}

#startbuttons a {
	width: calc(25% - 15px);
	height: auto;	
	padding-top: 12.5%;
	display: inline-block;
	float:left;
	margin: 0 20px 20px 0;
	background: transparent url('/img/01/button-1.jpg') center center no-repeat; 
	background-size: cover;
	text-align: center
}
#startbuttons a:last-of-type{
	margin-right: 0;
}
#startbuttons a span {
	font-family: b,serif;
	display: block;
	background-color: rgba( 87,17,35, .7 );
	padding: 4px;
	min-height: 20px;
    transition: .2s
}
#startbuttons a:hover span,
#startbuttons a:active span {
    background-color: #8e2240
}
#startbuttons #sb2 {
    background-image: url('/img/01/button-2.jpg'); 
}
#startbuttons #sb3 {
    background-image: url('/img/01/button-3.jpg'); 
}
#startbuttons #sb4 {
    background-image: url('/img/01/button-4.jpg'); 
}


/*
https://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/
 .heart {
  animation-play-state: running;
}

.heart:hover {
  animation-play-state: paused;
} 
*/

@media screen AND ( max-width: 1299px){

#content .trans {
}
}

@media screen AND (min-width: 1000px) AND (max-width:1130px) {
    #startbuttons a {
	width: calc(50% - 10px);
	padding-top: 25%;
}

#startbuttons a:nth-of-type(2){
    margin-right: 0
}
}

@media screen AND (max-width: 1000px){

#startgal li {
    width: 100%;
}


}

@media screen AND (max-width: 615px){
#startbuttons a {
	width: calc(50% - 10px);
	padding-top: 25%;
}

#startbuttons a:nth-of-type(2){
    margin-right: 0
}
}
@media screen AND (max-width: 430px){

}