@charset "UTF-8";
/*
 *      CSS für Sandbox von Julian Rademacher (hosted by Rademacher.IT)
 *
 *      @Author     Julian Rademacher
 *      @Copyright  2021 by Julian Rademacher
 *      @Version    0.1.20210112
 *
 */

@media all {
    html, body {
        color: #efefef;
        background: #efefef;
        font: 300 18px Lato;
    }
    
    html, body, article, header, section, footer {
        display: block;
        margin: 0;
        padding: 0;
    }
    
    html {
        padding: 15px 0 0;
    }
    
    header {
        color: #666;
        text-align: center;
    }
    
    #owl {
        width: 547px;
        height: 500px;
        padding-left: 35px;
        margin: 0 auto;
    }
    
    #ast {
        border-top: 15px solid #8C6635;
        width: 100%;
        height: 0;
        margin: -40px 0 30px;
    }

    #video {
        aspect-ratio: 16 / 9;
        background: #000;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    
    header h1 {
        font-size: 35px;
        margin: 0;
        padding: 15px 0;
    }
    
    #content {
        margin: 0;
        padding: 0;
    }
    
    article {
        width: 600px;
        margin: 0 auto;
    }
    
    #impressum {
        text-align: center;
        margin: 100px auto 50px;
    }
    
    #impressum header {
        width: 415px;
        margin: auto 0 auto auto;
    }
    
    section {
        color: #666;
        background: #fff;
        border-radius: 2px;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        width: 570px;
        margin: 25px auto;
        padding: 10px 15px;
    }
    
    #impressum section {
        background: url(../img/moortaube_hochkant.png) 90% 50% no-repeat #fff;
        background-size: 100px;
        width: 300px;
        margin-right: 0;
        padding-right: 100px;
    }
    
    footer {
        background: #000;
        border-radius: 2px 2px 0 0;
        color: #ccc;
        font-size: 14px;
        text-align: center;
        width: 570px;
        margin: 0 auto;
        padding: 10px 15px 15px;
    }
    
    a {
        color: #f99;
        text-decoration: none;
    }
    
    a:hover {
        color: #99f;
    }
    
    .Berlin {
        background: #000;
        background: rgba(0,0,0,0.5);
        border-radius: 2px;
        font-family: Audiowide;
        margin: 0 auto;
    	padding: 5px;
    }
    
    .Herz {
        color: #f99;
    }
    
    /* Sandbox */
    #chart_standalone_framework {
        width: 100%;
        height: 450px;
    }
    
    #vh_demo {
        background-color: red;
        color: #fff;
        height: 100vh;
        padding-top: 0;
        padding-bottom: 0;
    }
    
    #vh_demo_div {
        background-color: green;
        height: 80vh;
    }
}

@media screen and (min-width: 1300px) {
    #content {
        width: 1250px;
        margin: 0 auto;
    }
    
    .clear {
        clear: both;
        float: none;
    }
    
    article:nth-child(2n-1) {
        float: left;
    }
    
    article:nth-child(2n) {
        float: right;
    }
    
    #impressum {
        clear: both;
        margin-left: 50px;
        float: right;
    }
    
    footer {
        clear: both;
        width: 1220px;
    }
}

@media screen and (min-width: 1950px) {
    #content {
        width: 1900px;
    }
    
    .clear.second {
        display: block;
    }    
    
    article:nth-child(3n-2) {
        float: left;
    }
    
    article:nth-child(3n-1) {
        float: left;
        margin: 0 50px;
    }
    
    article:nth-child(3n) {
        float: right;
    }
    
    #impressum {
        clear: none;
        float: right;
        width: 600px;
    }
    
    footer {
        width: 1870px;
    }
}

@media screen and (max-width: 640px) {
    html {
        padding: 15px 10px 0;
    }
    
    #owl {
        display: block;
        width: 100%;
        height: auto;
        padding-left: 0;
    }
    
    #ast {
        border-top: 15px solid #8C6635;
        width: 100%;
        height: 0;
        margin: -35px -10px 25px;
        padding: 0 10px;
    }
    
    article {
        width: 100%;
        margin: 0 auto;
    }
    
    #impressum {
        text-align: center;
        margin: 100px auto 50px;
    }
    
    #impressum header {
        width: auto;
        margin: auto 0 auto auto;
    }
    
    section {
        border-radius: 2px;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
        width: auto;
        padding: 10px 15px;
    }
    
    #impressum section {
        background: url(../img/moortaube_hochkant.png) 99% 50% no-repeat #fff;
        background-size: 100px;
        text-align: left;
        width: auto;
        padding-right: 0;
    }
    
    footer {
        border-radius: 2px 2px 0 0;
        width: 100%;
        margin: 0 auto;
        padding: 10px 0 15px;
    }
    
    footer p, footer span {
        padding: 0 15px;
    }
    
    .buyebook a {
        display: block;
        min-width: auto;
        margin: 0 0 5px 0;
        padding: 15px;
    }
}
@charset "UTF-8";
/*
 *      Erweiterte CSS für Sandbox von Julian Rademacher (hosted by Rademacher.IT)
 *
 *      @Author     Julian Rademacher
 *      @Copyright  2064 by Julian Rademacher
 *      @Version    0.6.20646036
 *
 */

footer {
	-moz-animation: animationname 2s infinite;
	-webkit-animation: animationname 2s infinite;
	animation: animationname 2s infinite;
}

@-moz-keyframes animationname {
	0%		{ background: #000; }
	50%		{
	    background: #efefef;
	    color: #000;
	}
	100%	{ background: #000; }
}

@-webkit-keyframes animationname {
	0%		{ background: #000; }
	50%		{
	    background: #efefef;
	    color: #000;
	}
	100%	{ background: #000; }
}

@keyframes animationname {
	0%		{ background: #000; }
	50%		{
	    background: #efefef;
	    color: #000;
	}
	100%	{ background: #000; }
}