/* Mobile First */
html, body {margin:0; font-family:Arial,sans-serif; overflow-x:hidden}
body {background:#2d495e; color:#fff}
header {width:100%; min-height:1.3rem; padding:1rem 1rem 0 1rem; background:#143250; border-bottom:#fff 1px solid; box-shadow:0px 5px 5px #143250}
nav {min-width:230px}
nav ul {position:relative; right:2.5rem; list-style-type:none}
nav ul li {display:inline-block; padding:0 1rem 0 0}
nav ul li a:link, nav ul li a:visited, nav ul li a:active {background-color:#fff; color:#000; border-radius:2px; font-weight:600; font-size:0.8rem; padding:0.2rem 0.4rem}
nav ul li a:hover {text-decoration:underline}
main {margin:10px 10px 0; min-width:200px; text-align:center}
div {position:relative; top:-50px}
article {display:inline-block; margin:15px 10px 0; padding:5px 5px 15px; width:80%; min-width:200px; border-radius:30px}
article.dienstleistungen {background-color:rgba(100,100,100,0.8)}
article.essen {background-color:rgba(50,110,170,0.8)}
article.shopping {background-color:rgba(130,50,170,0.8)}
article.events {background-color:rgba(50,170,130,0.8)}
article.tipps {background-color:rgba(200,10,50,0.8)}
article img {margin:20px 0 0 0; padding:0; min-width:160px; width:90%; max-width:200px; height:auto; max-height:200px; border-radius:15%}
footer {margin:0 auto 1rem; text-align:center; min-width:230px}
footer ul {position:relative; right:1rem; list-style-type:none}
footer ul li {padding:10px 15px 5px 0}
footer ul li a:link, footer ul li a:visited, footer ul li a:active {background-color:#fff; color:#000; border-radius:2px; font-weight:600; font-size:0.8rem; padding:0.2rem 0.4rem}
footer ul li a:hover {text-decoration:none; box-shadow:inset 0 0 2px #000}
h1, h2, h3, h4, h5 {font-weight:400; margin:15px 5px -5px 5px}
h1.heading {font-size:2rem; margin:20px 0 0 0}
h1 {font-size:2rem; text-shadow:3px 3px 3px black}
h2 {font-size:1.5rem; font-style:italic; color:#ffa500}
h3 {font-size:1rem}
h4 {font-size:0.8rem; font-weight:600; color:#222}
h5 {font-size:0.8rem; color:#222}
em.hori {display:none}
em.mobile {position:relative; top:-5px}
ol {text-align:left}
a {text-decoration:none}
a img {border:none}
a:link, a:visited {color:#8fa4b5; text-decoration:none}
a:hover, a:focus {color:#0a1b2a; text-decoration:none}	
hr {width:90%}
form.contact {margin:10px}
label {display:block; margin-top:10px}
input, textarea {width:200px; height:30px; background:#efefef; border:1px solid #444; border-radius:1px; padding:3px; margin-top:3px; color:#3a3a3a; box-sizing:border-box}
textarea {height:100px}
input:focus, textarea:focus {border:1px solid #781828}
#submit {width:100px; height:30px; border:none; background-image: linear-gradient(#666, #444); color:#fff; cursor:pointer; box-sizing:border-box}
#submit:hover {opacity:.8}
/* horizontal ================================================================================== */
@media only screen and (min-width: 820px) {
body.cologne {background:url("bg.jpg") no-repeat center center fixed; background-size:cover}
header {position:fixed; height:1.2rem; padding:1rem}
nav ul {position:absolute; top:0}
main {margin:60px auto 10px; min-width:800px; max-width:1000px; padding:10px 0 10px}
/* main.white {background:rgba(255,255,255,0.8); box-shadow:0px 5px 5px rgba(255,255,255,0.7)}*/
em.hori {display:inline-block}
em.mobile {display:none}
ol {margin-left:100px}
article {text-align:left; border-radius:0}
article img {float:left; height:200px; width:200px; margin:15px 25px 0px 20px}
footer ul li {display:inline-block}
input, textarea {width:300px}
}
/* #2d495e greyblue background */
/* #143250 blue header 20,50,80 */
/* #ffa500 orange h2 */
/* #222 darkgrey h4 h5 */
/* #fff white text */