@charset "utf-8";

        html {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            background-image: linear-gradient(to bottom right, #FDC724 0, #FDC724 44%, #FDC724 100%);
            color: #000;
            font-family: GeoSlb712MdBT, Georgia, serif;
            font-style: normal;
            text-align: center;
        }

        body {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        #balken {
            height: 20px;
            width: 100%;
            background-color: aqua;
        }

        .the-box {
            top: 20px;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            position: relative;
        }

        h1 {
            padding: 5px;
            font-size: 2.5em;
            text-align: center;
        }

        .the-title {
            padding: 5px;
            font-size: 1.5em;
            text-align: center;
        }

        .text {
            padding: 5px;
            font-size: 1.2em;
            text-align: center;
            line-height: 20pt;
        }
        .link {
            padding: 5px;
            text-align: center;
            line-height: 20pt;
            font-family: GeoSlb712MdBT, Georgia, serif;
            font-style: normal;
}
        .link:link {text-decoration:none; color: #000; }
        .link:visited {text-decoration:none; color: #000; }
        .link:active {text-decoration:none; color: #000; }
        .link:hover {text-decoration:underline; }
        
        img {width: 100%}
		
        .portraet {width: 100%; max-width: 200px;}
		
		.dreifotos {
			width: 100%;
			float: none;
		}
		
		.foto {
			width: 100%;
			float: none;
		}
		
		.fotoweg {
			display:none;
		}
		
		.abstand {
			padding-bottom: 0;
		}
		
		.cta {
			width: 200px;
			height: auto;
			background-color: #309;
			color:#FF0;
			font-family: GeoSlb712MdBT, Georgia, serif;
            font-style: normal;
            text-align: center;
			margin-left:auto;
			margin-right:auto;
			text-align:center;
			vertical-align: middle;
		}


@media screen and (min-width: 800px) {
	html {
		max-width: 1500px;
	}


    body {
		max-width: 1500px;
    }
    the-box {
		width: 100%;
        position: absolute;
    }
    
	.foto {
		width:31%;
		float:left;
		padding:1%;
	}
	
	.fotoweg {
		display:block;
		width:31%;
		float:left;
		padding:1%;
		}
	
	.dreifotos {
		width: 100%;
		float:left;
	}

	.abstand {
		padding-bottom: 400px;
	}
	
	h1 {
		font-size: 3em;
	}


        }