#main {
display : block;
margin : 1.25em auto;
max-width : 980px;
padding : 0;
width : 96%;
}
#main article {
background : #FFF;
display : inline-block;
margin : 0;
padding : 0;
text-align : center;
vertical-align : top;
width : 75.9%;
}
#main article h2 {
padding : 1em 1.8em;
}
#main article img {
border-radius : 5px;
box-shadow : 0 0 10px -5px #4c4948;
max-width : 560px;
}
#main aside {
display : inline-block;
margin-right : 2%;
padding : 0;
vertical-align : top;
width : 20%;
}
#main aside section {
background : #FFF;
border-bottom : 0.188em solid #E7590B;
margin-bottom : 1.563em;
}
#main aside section ul {
padding : 0 1.875em 1.25em 2.5em;
}
#menubar {
background : #FFF;
display : block;
}
#menubar ul {
display : block;
padding : 0.9em;
width : 2em;
}
#menubar ul li {
display : inline;
}
#menubar ul li a.menubutton {
display : none;
}
#section typewriter {
width : 10%;
}
#typewriter li {
animation : typing 3.5s steps(30,end), blink-caret 0.5s step-end infinite;
border-right : 0.15em solid orange;
color : #00008b;
font-family : "Times New Roman";
letter-spacing : 0.15em;
margin : 0 auto;
overflow : hidden;
white-space : nowrap;
}
a {
text-decoration : none;
}
body {
background : #f5f5dc;
border : outset 2px;
border-radius : 15px 15px 0 0;
font-size : 100%;
margin : 0.5em;
padding : 0.5em;
}
h1 {
color : #E2DBDB;
font-family : Helvetica;
font-size : 2.5em;
font-weight : 100;
line-height : 3.8em;
margin : 0;
}
h2 {
color : #2F2D2C;
font-family : Helvetica;
font-size : 1.563em;
font-weight : 100;
line-height : 1.8em;
margin : 0;
padding : 1.25em;
text-align : left;
}
h3 {
color : #000;
font-family : Helvetica;
font-size : 2.5em;
font-weight : 100;
line-height : 3.8em;
margin : 0;
}
h4 {
color : #000;
font-family : Helvetica;
font-size : 2.5em;
font-weight : 100;
line-height : 2.5em;
margin : 0;
}
header {
background : #00008b;
display : block;
padding-right : 2em;
text-align : right;
}
img {
height : auto;
max-width : 100%;
width : 90%;
}
li {
color : #2F2D2C;
font-family : Helvetica;
font-weight : 100;
line-height : 1.25em;
list-style : square;
margin : 0;
margin : 0.313em 0 0.313em 0;
padding : 0;
}
nav {
background : silver;
display : inline-block;
padding-left : 0;
text-align : left;
}
nav ul {
display : block;
}
nav ul li {
display : block;
margin : 0 0.188em 0 0;
}
nav ul li a {
color : #454040;
font-size : 0.9em;
font-weight : 700;
line-height : 2.5em;
padding : 0.375em 0.983em 0.375em 0;
transition : background 0.2s;
}
nav ul li a.active {
border-bottom : 0.188em solid #00008b;
}
nav ul li a:hover {
background : #DBD9D8;
border-bottom : 0.188em solid #00008b;
}
p {
color : #2F2D2C;
font-family : Helvetica;
font-weight : 100;
line-height : 1.25em;
margin : 0;
padding : 1.25em;
text-align : justify;
}
ul {
margin : 0;
padding : 0;
}
@keyframes typing {
from {
width : 0;
}
to {
width : 100%;
}
}
@keyframes blink-caret {
50% {
border-color : #00008b;
}
from, to {
border-color : transparent;
}
}
#artilce reise {
display:block;
margin:0;
}
#reise p {
padding:0em;
 }
#arctile profil {
display : block;
margin-left : auto;
margin-right : auto;
text-align : center;
}
#autoren h4, #sonstiges h4 {
color : #000;
font-family : Helvetica;
font-size : 1.6em;
font-weight : 100;
line-height : 1em;
margin-left : 40%;
padding : 0;
text-align : left;
}
#autoren h5, #sonstiges h5 {
color : #00008b;
font-family : Helvetica;
font-size : 1.6em;
font-weight : 100;
line-height : 1em;
margin-left : 40%;
padding : 0;
text-align : left;
}
#autoren p, #sonstiges p {
color : #000;
font-family : Helvetica;
font-size : 0.8em;
font-weight : 100;
line-height : 1em;
margin-left : 38%;
text-align : left;
}
#bilder p, #reise p{
color : #000;
font-family : Helvetica;
font-size : 1.6em;
font-weight : 100;
line-height : 3em;
min-height : 9em;
padding : 7em 0 4em;
text-align : center;
}
#foto1 {
background : red;
margin : auto;
max-height : 20%;
max-width : 60%;
}
#impressum h4 {
color : #000;
font-family : Helvetica;
font-size : 1.6em;
font-weight : 100;
line-height : 1em;
margin : auto;
padding : 0;
}
#impressum h5 {
color : #00008b;
font-family : Helvetica;
font-size : 2.5em;
font-weight : 100;
line-height : 1em;
margin-bottom : 2em;
padding : 0;
}
#kontakt h5 {
color : #00008b;
font-family : Helvetica;
font-size : 1.6em;
font-weight : 100;
line-height : 1em;
margin-bottom : 2em;
padding : 0;
}
#kontakt p {
color : #000;
font-family : Helvetica;
font-size : 1em;
font-weight : 100;
line-height : 1em;
margin : auto;
text-align : center;
}
#profil p {
line-height : 2.5em;
margin : 0;
padding : 0;
}
#tape {
margin : auto;
max-width : 480px;
}
#theater h4, #tv h4, #preise h4 {
color : #000;
font-family : Helvetica;
font-size : 1.6em;
font-weight : 100;
line-height : 1em;
margin-left : 34%;
padding : 0;
text-align : left;
}
#theater h5, #tv h5, #preise h5 {
color : #00008b;
font-family : Helvetica;
font-size : 1.6em;
font-weight : 100;
line-height : 1em;
margin-left : 34%;
padding : 0;
text-align : left;
}
#theater p, #tv p, #preise p {
color : #000;
font-family : Helvetica;
font-size : 0.8em;
font-weight : 100;
line-height : 1em;
margin-left : 32%;
text-align : left;
}
#video h4 {
color : #000;
font-family : Helvetica;
font-size : 1.4em;
font-weight : 100;
line-height : 1em;
margin-left : 30%;
text-align : left;
}
#video p {
color : #000;
font-family : Helvetica;
font-size : 0.8em;
font-weight : 100;
line-height : 1em;
margin-left : 27%;
text-align : left;
}
* html .flexslider .slides {
height : 1%;
}
.antwort {
display : block;
font-size : 0.8em;
margin-left : auto;
margin-right : auto;
text-align : center;
}
.flex-container a:hover, .flex-slider a:hover {
outline : none;
}
.flex-pauseplay span {
text-transform : capitalize;
}
.flex-viewport {
max-height : 2000px;
transition : all 1s ease;
}
.flexslider {
background : #fff;
border : #fff solid 4px;
border-radius : 4px;
box-shadow : 0 1px 4px rgb(0 0 0 / 0.2);
margin : 0;
margin : 0 0 6.25em;
padding : 0;
position : relative;
}
.flexslider .slides > li {
display : none;
}
.flexslider .slides img {
display : block;
height : auto;
margin : auto;
width : auto;
}
.flexslider .slides:after {
clear : both;
content : "\0020";
display : block;
height : 0;
line-height : 0;
visibility : hidden;
}
.kursiv {
display : block;
font-size : 1em;
font-style : italic;
font-weight : 700;
margin-left : auto;
margin-right : auto;
text-align : center;
}
.loading .flex-viewport {
max-height : 300px;
}
.slides, .slides > li, .flex-control-nav, .flex-direction-nav {
list-style : none;
margin : 0;
padding : 0;
}
html[xmlns] .flexslider .slides, .no-js .flexslider .slides > li:first-child {
display : block;
}
.carousel li {
margin-right : 5px;
}
.flex-control-nav {
bottom : -40px;
position : absolute;
text-align : center;
width : 100%;
}
.flex-control-nav li {
display : inline-block;
margin : 0 6px;
}
.flex-control-paging li a {
background : #666;
background : rgb(0 0 0 / 0.5);
border-radius : 20px;
box-shadow : 0 0 3px rgb(0 0 0 / 0.3) inset;
cursor : pointer;
display : block;
height : 11px;
text-indent : -9999px;
width : 11px;
}
.flex-control-paging li a.flex-active {
background : #000;
background : rgb(0 0 0 / 0.9);
cursor : default;
}
.flex-control-paging li a:hover {
background : #333;
background : rgb(0 0 0 / 0.7);
}
.flex-control-thumbs {
margin : 5px 0 0;
overflow : hidden;
position : static;
}
.flex-control-thumbs .flex-active {
cursor : default;
opacity : 1;
}
.flex-control-thumbs img {
cursor : pointer;
display : block;
height : auto;
opacity : 0.7;
transition : all 1s ease;
width : 100%;
}
.flex-control-thumbs li {
float : left;
margin : 0;
width : 25%;
}
.flex-direction-nav {
height : 0;
}
.flex-direction-nav .flex-disabled {
cursor : default;
opacity : 0 !important ;
z-index : -1;
}
.flex-direction-nav a {
color : rgb(0 0 0 / 0.8);
cursor : pointer;
display : block;
height : 40px;
margin : -20px 0 0;
opacity : 0;
overflow : hidden;
position : absolute;
text-decoration : none;
text-shadow : 1px 1px 0 rgb(255 255 255 / 0.3);
top : 50%;
transition : all 0.3s ease-in-out;
width : 40px;
z-index : 10;
}
.flex-direction-nav a.flex-next:before {
content : '\f002';
}
.flex-direction-nav a:before {
color : rgb(0 0 0 / 0.8);
content : '\f001';
display : inline-block;
font-family : "flexslider-icon";
font-size : 40px;
text-shadow : 1px 1px 0 rgb(255 255 255 / 0.3);
}
.flex-direction-nav li {
display : none;
}
.flex-pauseplay a {
bottom : 5px;
color : #000;
cursor : pointer;
display : block;
height : 20px;
left : 10px;
opacity : 0.8;
overflow : hidden;
position : absolute;
width : 20px;
z-index : 10;
}
.flex-pauseplay a.flex-play:before {
content : '\f003';
}
.flex-pauseplay a:before {
content : '\f004';
display : inline-block;
font-family : "flexslider-icon";
font-size : 20px;
}
.flex-pauseplay a:hover, .flex-control-thumbs img:hover {
opacity : 1;
}
.flexslider .slides p {
text-align : center;
}
footer {
background : #00008b;
display : block;
text-align : center;
}
footer ul {
display : block;
margin : 0 auto;
max-width : 980px;
text-align : left;
width : 100%;
}
footer ul li {
color : #E2DBDB;
display : inline;
font-size : 0.8em;
line-height : 2.8em;
padding : 0 0.625em;
}
footer ul li a {
color : #E2DBDB;
}
@media screen and (max-width:860px) {
body {
font-size : 95%;
}
}
@media screen and (max-width:800px) {
body {
font-size : 90%;
}
}
@media screen and (max-width:750px) {
body {
font-size : 86%;
}
}
@media screen and (max-width:700px) {
body {
font-size : 84%;
}
.flexslider .slides img {
display : inline;
width : 80%;
}
#main video {
width : 80%;
}
}
@media screen and (min-width:550px) {
nav.nav {
display : block !important ;
}
}
@media screen and (max-width:550px) {
body {
font-size : 80%;
}
#main article {
display : block;
margin : 0.625em 0;
width : 94%;
}
#main aside {
display : block;
margin : auto;
}
#menubar ul li a.menubutton {
display : block;
}
body {
font-size : 75%;
}
nav {
display : none;
height : auto;
}
nav ul li {
display : block;
margin : 0.3em 0;
}
.flexslider {
width : auto;
}
.flexslider .slides img {
display : inline-block;
width : 80%;
}
.flex-control-thumbs {
display : block;
padding : 2em;
}
#main video {
width : 80%;
}
}