/*Webfolio CSS*/
* {
margin:0px;
padding:0px;
font-family:sans-serif;
letter-spacing: 2px;
}
html ,body {
height: 100%;
width:100%;
} 
body {
margin: 0px auto;
padding: 0px;
} 
a {
color: #000;
text-decoration:none;
}
a:hover {
color: #333;
}
.clearboth {
clear:both;
}
p {
margin: 20px 0px;
}
ul {
list-style: none;
}
h1 {
font-size: 50px;
letter-spacing: -4px;
font-weight: normal;
}



#container {
width: 800px;
padding: 50px 0px 0px 100px;
}
#header {
margin: 0px 0px 50px 0px;
}
#header img {
vertical-align: middle;
margin-right: 20px;
}
#main-menu {
font-size: 100px;
letter-spacing: -10px;
line-height: 80px;
margin: 0px 0px 20px 0px;
}
#kontakt-content img {
vertical-align: top;
}
.date {
font-weight: bold;
}
.current{
font-weight: bold;
font-size: 170%;
}
/*#print {
margin: 0px 0px 100px 0px;
}*/
.subtitle {
color: gray;
letter-spacing: -1px;
}
.anchor {
font-size: 25%;
line-height: 25%;
letter-spacing: -2px;
margin: 0px 15px 0px 10px;
}
#retouch div {
width: 500px;
height: 300px;
margin: 0px 0px 20px 0px;}

#retouch_img01 {
background: url(img/EXERCISE_01_3478_before.jpg) no-repeat;
}
#retouch_img01:hover {
background: url(img/EXERCISE_01_3478_after.jpg) no-repeat;
}
#retouch_img02 {
background: url(img/HAMMOCK_01_4503_before.jpg) no-repeat;
}
#retouch_img02:hover {
background: url(img/HAMMOCK_01_4503_after.jpg) no-repeat;
}
#retouch_img03 {
background: url(img/HOME_01_4250_before.jpg) no-repeat;
}
#retouch_img03:hover {
background: url(img/HOME_01_4257_4250_after.jpg) no-repeat;
}
#retouch_img04 {
background: url(img/faro_natur_before.jpg) no-repeat;
}
#retouch_img04:hover {
background: url(img/faro_natur_after.jpg) no-repeat;
}
#retouch_img05 {
background: url(img/Mobile_before.jpg) no-repeat;
width: 300px !important;
height: 500px !important;
}
#retouch_img05:hover {
background: url(img/Mobile_after.jpg) no-repeat;
}

/* responsive for 980px or less */
@media screen and (max-width: 980px) {
#container {
width: 94%;
}
}

/* responsive for 700px or less */
@media screen and (max-width: 700px) {
#header {
width: auto;
float: auto;
margin: 0 0 50px;
}
#container {
padding: 10px 0px 0px 10px;
}
#main-menu {
width: auto;
float: auto;
font-size: 80px;
line-height: 60px;
letter-spacing: -7px;
}
.anchor {
margin: 0px 0px 0px 10px;
}
section {
width: auto;
}
section div {
 width: auto;
 margin: 0 0 50px;
}
section img {
width: 100%;
height: auto;
}
}

/* responsive for 480px or less */
@media screen and (max-width: 480px) {
#header {
width: auto;
float: auto;
margin: 0 0 20px;
}
#container {
padding: 5px 0px 0px 5px;
}
#main-menu {
width: auto;
float: auto;
font-size: 50px;
line-height: 40px;
letter-spacing: -5px;
}
h1 {
font-size: 30px;
letter-spacing: -2px;
font-weight: normal;
}
.anchor {
font-size: 30%;
letter-spacing: -1px;
margin: 0px 0px 0px 8px;
}
section {
width: auto;
}
section img {
height: auto;
}
}