/* font Gowun Dodum */
@font-face {
    font-family: 'Gowun Dodum';
	font-weight: normal;
    font-style: normal;
	font-display: block;
    src: url('fonts/GowunDodum-Regular.eot'); /* IE9 Compat Modes */
    src: local('Gowun Dodum'), local('GowunDodum-Regular'), /* Erst nachsehen, ob die Schrift beim Besucher schon installiert ist */
		url('fonts/GowunDodum-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('fonts/GowunDodum-Regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('fonts/GowunDodum-Regular.woff') format('woff'), /* Modern Browsers */
        url('fonts/GowunDodum-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('fonts/GowunDodum-Regular.svg#GowunDodum-Regular') format('svg'); /* Legacy iOS */
}

body {
 border: 0px;
 width: 100%;
 max-width: 100%;
 height: auto;
 padding: 0px;
 margin: 0px;
 overflow: scroll;
 overflow-x: hidden;
 font-family: "Gowun Dodum", "Source Sans Pro Light", Calibri, Futura, Arial, Helvetica, sans-serif;
 background-color: #fff;
 z-index: 1;
}

p, a {
 font-family: "Gowun Dodum", "Source Sans Pro Light", Calibri, Futura, Arial, Helvetica, sans-serif;
}

p {
 font-size: 21px;
 line-height: 32px;
 margin: 0px;
 color: #000;
}

a, a:hover , a:active, a:focus {
 outline-style: none;
 text-decoration: none;
 margin: 0px;
}

a {
 color: #fcc300;
 font-weight: 600;
}

a:hover {
 color: #000;
}

.clear {
 border: 0px;
 width: 0px;
 height: 0px;
 clear: both; 
}

.hide {
 display: none;
}

.yellow {
 color: #fcc300;
}

.bluegreen {
 color: #5dbfca;
}

#logo, .logo {
 border: 0px;
 position: absolute;
 margin-top: 2%;
 margin-left: 2%;
 width: 220px;
 height: auto;
}

#logo img, .logo img {
 width: 220px;
 height: auto;
}

/* css hero_image */
#hero_image {
 border: 0px;
 width: 100%;
 height: auto;
 margin-top: 0px;
 margin-left: 0px;
 padding: 0px;
}

#hero_image img {
 border: 0px;
 width: 100%;
 height: auto;
 margin-top: 0px;
 margin-left: 0px;
}
/* end css hero_image */


/* css content */
#content {
 border: 0px;
 width: 100%;
 height: auto;
 position: relative;
 margin-top: 0px;
 margin-left: 0px;
}

/* css pinboard bzw. textliche Inhalt der Seite*/
.pinboard {
 border: 0px;
 width: 44%;
 height: auto;
 margin-top: 0px;
 margin-bottom: 42px;
 margin-left: 27%;
 padding: 0px;
}

.headline {
 border: 0px;
 margin: 0px;
 margin-top: 38px;
 padding: 0px;
}

h1 {
 font-family: "Gowun Dodum", "Source Sans Pro Light", Calibri, Futura, Arial, Helvetica, sans-serif;
 font-size: 26px;
 line-height: 26px;
 color: #5dbfca;
 margin: 0px;
}

.tagline {
 border: 0px;
 margin: 0px;
 margin-top: 16px;
 padding: 0px;
}

h4 {
 font-family: "Gowun Dodum", "Source Sans Pro Light", Calibri, Futura, Arial, Helvetica, sans-serif;
 font-size: 24px;
 line-height: 32px;
 color: #fcc300;
 margin: 0px;
}

.text {
 border: 0px;
 margin: 0px;
 margin-top: 10px;
 padding: 0px;
}
/* end css pinboard */


#empty_space {
 border: 0px;
 width: 100%;
 height: 80px;
 position: relative;
}

/* end css content */

/* css footer*/
#end {
 border: 0px;
 width: 100%;
 height: 50px;
 position: fixed;
 bottom: 0px;
 margin-bottom: 0px;
 background-color: #5dbfca;
}

#end a {
 color: #fff;
 filter: alpha(opacity = 100); /* IE 8 and earlier */ 
 opacity: 1.00; /* alle anderen Browser einschließlich IE 9 */
}

#end a:hover {
 filter: alpha(opacity = 70); /* IE 8 and earlier */ 
 opacity: 0.70; /* alle anderen Browser einschließlich IE 9 */
}
/* css end footer */

/* content footer */
#finger, #mice {
 border: 0px;
 position: absolute;
 left: 3%;
 margin-top: -80px;
}

#finger img {
 width: 31%;
 height: auto;
}

#mice {
 margin-top: -100px;
}

#mice img {
 width: 40%;
 height: auto;
}

/* css home_about_contact */
#home_about_contact {
 border: 0px;
 position: absolute;
 left: 27%;
 margin-top: 11px;
}

#home {
 border: 0px;
 position: absolute;
 left: 0px;
 margin-top: 1px;
}

#home img {
 border: 0px;
 width: 24px;
 height: 24px;
}

#piktogram {
 border: 0px;
 position: absolute;
 left: 42px;
 margin-top: 1px;
}

#piktogram img {
 border: 0px;
 width: 24px;
 height: 24px;
}

#illuorg {
 border: 0px;
 position: absolute;
 left: 80px;
 margin-top: 1px;
}

#illuorg img {
 border: 0px;
 width: 24px;
 height: 24px;
}

#instagram {
 border: 0px;
 position: absolute;
 left: 120px;
 margin-top: 1px;
}

#instagram img {
 border: 0px;
 width: 24px;
 height: 24px;
}

#about {
 border: 0px;
 position: absolute;
 width: 92px;
 left: 169px;
 margin-top: 0px;
}

#contact_link {
 border: 0px;
 position: absolute;
 width: 70px;
 left: 281px;
 margin-top: 0px;
}

#about a, #contact_link a {
 font-size: 20px;
 font-weight: 400;
 color: #fff;
}
/* end css home_about_contact */


/* important info */
#imprint {
 border: 0px;
 position: absolute;
 right: 25px;
 margin-top: 11px;
}

#imprint a {
 font-size: 20px;
 font-weight: 400;
 color: #fff;
}

#info {
 margin-right: 18px;
}
/* end important info */
/* end content footer */


@media only screen and (max-width: 1440px) {
	
.pinboard {
 border: 0px;
 width: 43%;
 margin-left: 27%;
}

#home_about_contact  {
 left: 27%;
}

}

@media only screen and (max-width: 1280px) {
	
#logo, .logo {
 border: 0px;
 width: 190px;
 height: auto;
}

#logo img, .logo img {
 width: 190px;
 height: auto;
}

.pinboard {
 border: 0px;
 width: 50%;
 margin-left: 26%;
}

#home_about_contact  {
 left: 26%;
}

#finger {
 margin-top: -75px;
}

#finger img, #mice img {
 width: 26%;
 height: auto;
}

#mice {
 margin-top: -90px;
}

#mice img {
 width: 35%;
 height: auto;
}

}

@media only screen and (max-width: 1024px) {
	
#logo, .logo {
 border: 0px;
 width: 170px;
 height: auto;
}

#logo img, .logo img {
 width: 170px;
 height: auto;
}

h1 {
 font-size: 24px;
 line-height: 24px;
}

.pinboard {
 border: 0px;
 width: 60%;
 margin-left: 18%;
}

#home_about_contact  {
 left: 18%;
}

#finger, #mice {
 left: 25px;
 margin-top: -70px;
}

#finger img, #mice img {
 width: 20%;
 height: auto;
}

#mice {
 left: 22px;
 margin-top: -65px;
}

#mice img {
 width: 27%;
 height: auto;
}

#info {
 margin-right: 15px;
}

}


@media only screen and (max-width: 820px) {

#logo, .logo {
 border: 0px;
 width: 140px;
 height: auto;
}

#logo img, .logo img {
 width: 140px;
 height: auto;
}

.pinboard {
 border: 0px;
 width: 70%;
 margin-left: 15%;
}

#home_about_contact  {
 left: 15%;
}

#finger, #mice {
 display: none;
}

#finger img, #mice img {
 display: none;
}

#contact_link {
 left: 280px;
}

#imprint {
 right: 20px;
}

}


@media only screen and (max-width: 744px) {
	
#logo, .logo {
 border: 0px;
 width: 110px;
 height: auto;
}

#logo img, .logo img {
 width: 110px;
 height: auto;
}

.pinboard {
 width: 80%;
 margin-left: 55px;
}

#end {
 height: 98px;
}

#home_about_contact  {
 position: absolute;
 left: 55px;
 margin-top: 20px;
}

#imprint {
 position: absolute;
 left: 55px;
 margin-top: 60px;
}

#info {
 border: 0px;
 margin-right: 0px;
}

#datenschutz {
 border: 0px;
 margin-right: 0px;
 margin-left: 16px;
}

}

@media only screen and (max-width: 430px) {
	
#logo, .logo {
 border: 0px;
 width: 100px;
 height: auto;
}

#logo img, .logo img {
 width: 100px;
 height: auto;
}

#hero_image {
 overflow-x: hidden;
}

.hero {
 border: 0px;
 width: 160%;
 height: auto;
 margin-top: 0px;
 margin-left: -30%;
 padding: 0px;
}

.pinboard {
 width: 86%;
 margin-left: 25px;
}

p {
 font-size: 20px;
}

#end {
 border: 0px;
 width: 100%;
 height: 110px;
 position: relative;
 bottom: -25px;
 margin-bottom: 0px;
 background-color: #5dbfca;
}

#home_about_contact {
 left: 25px;
}

#imprint {
 left: 25px;
}

#about {
 border: 0px;
 width: 90px;
 left: 168px;
}

#contact_link {
 border: 0px;
 width: 70px;
 left: 278px;
}

}

@media only screen and (max-width: 395px) {
	
#logo, .logo {
 border: 0px;
 width: 95px;
 height: auto;
}

#logo img, .logo img {
 width: 95px;
 height: auto;
}

p {
 font-size: 19px;
}
	
#imprint a, #about a, #contact_link a {
 font-size: 19px;
}

#about {
 border: 0px;
 width: 86px;
 left: 164px;
}

#contact_link {
 border: 0px;
 width: 66px;
 left: 265px;
}

#datenschutz {
 margin-left: 14px;
}

}

@media only screen and (max-width: 360px) {
	
#logo, .logo {
 border: 0px;
 width: 90px;
 height: auto;
}

#logo img, .logo img {
 width: 90px;
 height: auto;
}

#piktogram {
 left: 38px;
}

#illuorg {
 left: 75px;
}

#instagram {
 left: 112px;
}
	
#imprint a, #about a, #contact_link a {
 font-size: 18px;
}

 #about {
 width: 82px;
 left: 153px;
}

#contact_link {
 width: 62px;
 left: 250px;
}

#datenschutz {
 margin-left: 12px;
}

}