/*
        Hear My Name CSS V3
         Designer: Hear My Name UG | www.hmn.ug
         =================================================
         Grundfarben: #EFEFEC (helles grau), #b6b6b6 (dunkles Grau), #00B5E9 (Blau), #ffd53f (gelb)
*/

/* Links */
a:link, a:visited {
           font-size: 1.0em;
         color: #00B5E9;
         font-weight: normal;
         text-decoration: none;
         padding-bottom: 1px;
         border-bottom: 2px #00B5E9 dotted;
         transition: 0.4s;
}

a:hover {
         color: #000000;
         text-decoration: none;
         transition: 0.4s;
}
a.no { border-bottom: 0px #00B5E9 dotted; }

/* Button */
a.button:link, a.button:visited {
        padding: 6px 20px;
         margin: 5px 5px 5px 0px;
         border: 1px #00B5E9 solid;
         font-size: 1.2em;
         font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 0px;
         color: #00B5E9;
         background-color: #ffffff;
         border-radius: 6px;
         -moz-border-radius: 6px;
         -khtml-border-radius: 6px;
}

a.button:hover {
        color: #FFFFFF;
         text-decoration: none;
         text-shadow: #00B5E9 1px 1px 0px;
        background-color: #00B5E9;
         border: 1px #FFFFFF solid;
}

a.button2:link, a.button2:visited {
        display: inline-block;
        padding: 7px 60px 7px 40px;
         margin: 5px 5px 5px 5px;

         font-size: 1.2em;
         font-weight: normal;
         color: #FFFFFF;
         text-shadow: #00B5E9 1px 1px 0px;
         text-align: left;
         text-decoration: none;

         border: 2px #FFFFFF solid;
         background: #00B5E9 url(../images/button_hover.png) center right no-repeat;

         border-radius: 30px;
         -moz-border-radius: 30px;
         -khtml-border-radius: 30px;
}

a.button2:hover {
         text-shadow: #FFFFFF 1px 1px 0px;
         color: #00B5E9;

         border: 2px #00B5E9 solid;
         background: #FFFFFF url(../images/button.png) center right no-repeat;
}

a.external {
         background-image: url(../images/el-16.png);
         background-position: center right !important;
         background-repeat: no-repeat !important;
         padding-right: 35px !important;
}
a.external:hover { background-image: url(../images/el-16-w.png); }


/* Allgemein */
html { height:100%; }
body {
         background:#FFFFFF;
         font-size: 100%;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         min-width: 320px;
}

.links         { float:left; }
.rechts         { float:right; }
img         { border: 0px; }
.pad     { padding: 10px; }
.pad_top { padding: 20px 0px; }
.pad_side{ padding: 0px 20px; }
.pad_big { padding: 20px 25px; }
.clear         { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; padding: 0px !important; margin: 0px !important; }
.center         { text-align:center; }
.small        { font-size: 0.8em !important; }
.medium        { font-size: 1.0em !important; }
.big        { font-size: 1.2em !important; }
.line        { border-bottom: 2px #BFBFBF dotted; }
.round        { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.aright  { text-align: right; }
.acenter { text-align: center; }
.ajustifiy { text-align: justify; }

.w100         { width: 100%; }
.w100pad { width: calc(100% - 20px); padding: 5px 10px; }
.w75         { width: 75%; }
.w75pad         { width: calc(75% - 20px); padding: 5px 10px; }
.w50         { width: 50%; }
.w50pad         { width: calc(50% - 20px); padding: 5px 10px; }
.w33         { width: 33.3%; }
.w33pad         { width: calc(33.3% - 20px); padding: 5px 10px; }
.w25         { width: 25%; }
.w25pad         { width: calc(25% - 20px); padding: 5px 10px; }

.blue         { background: #00B5E9; color: #FFFFFF; text-shadow: #00B5E9 1px 1px 0px; }
.blue2         { background: #78c6e7; color: #054453; text-shadow: #78c6e7 1px 1px 0px; }
.grey         { background: #f5f5f5; color: #4F4F4F; text-shadow: #FFFFFF 1px 1px 0px; }
.grey2         { background: #efefef; color: #4F4F4F; text-shadow: #FFFFFF 1px 1px 0px; }

.block         { background: #00B5E9; color: #FFFFFF; text-shadow: #00B5E9 1px 1px 0px; padding: 10px 15px; }

.in_shadow { -webkit-box-shadow: inset 0px 7px 10px -10px rgba(0, 0, 0, 0.40), inset 0px -7px 10px -10px rgba(0, 0, 0, 0.40); -moz-box-shadow:    inset 0px 7px 10px -10px rgba(0, 0, 0, 0.40), inset 0px -7px 10px -10px rgba(0, 0, 0, 0.40); box-shadow:         inset 0px 7px 10px -10px rgba(0, 0, 0, 0.40), inset 0px -7px 10px -10px rgba(0, 0, 0, 0.40); }
.additional { text-indent: -9999px; height: 0px; width: 0px; }
.mail { direction: rtl; unicode-bidi: bidi-override; }
td { padding: 2px 5px !important; }

body, div {
         font-family: 'Open Sans', sans-serif, Verdana;
         font-size: 1.0em;
         color: #3F3F3F;
         font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 1px;

         padding: 0px 0px 0px 0px;
         margin: 0px 0px 0px 0px;
}

/* �berschriften */
h1 {
         font-family: 'Questrial', sans-serif;
         font-size: 3.0em;
         color: #FFFFFF;
         font-weight: normal;
         margin: 0px 0px 0px 0px;
         text-shadow: #009bc7 2px 2px 0px;
}

h2 {
         font-family: 'Questrial', sans-serif;
         font-size: 2.0em;
         color: #000000;
         font-weight: normal;
         margin: 0px 0px 0px 0px;
         text-shadow: #DADAD4 0px 0px 0px;
}

h3 {
        display: inline-block;
         margin: 10px 0px 0px 0px;
         padding: 5px 10px 3px 10px;

         font-family: 'Ruda', sans-serif;
         font-size: 1.4em;
         color: #FFFFFF;
         font-weight: 700;
         text-shadow: #DADAD4 0px 0px 0px;
         text-align: center;

         background: #b6b6b6;
         cursor: pointer;
}

h3.color {
        display: inline-block;
         margin: 10px 0px 0px 0px;
         padding: 5px 10px 3px 10px;

         font-family: 'Ruda', sans-serif;
         font-size: 1.4em;
         color: #FFFFFF;
         font-weight: 700;
         text-shadow: #00B5E9 0px 0px 0px;
         text-align: center;

         background: #00B5E9;
}


/* Aufbau */
#wrapper { width: 100%; }

.in {
         min-width: 300px;
         width: calc(100% - 40px);
         max-width: 1400px;
         margin: 0px auto 0px auto;
}

#header {
         display: block;
         background: #00B5E9;
         width: calc(100% - 0px);
         margin: 0px auto 50px auto;
         padding: 50px 0px 5% 0px;

         -webkit-clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
         clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%); }

#header .logo {
         display: block;
         width: 100%;
         margin: 10px auto 20px auto;
         text-align: center;
}

#header . img {
         width: calc(100% - 20px);
         max-width:685px;
         height: inherit;
         margin: 0px auto;
}


#site {
         width: 100%;
         margin: 0px auto;
}

.lineheight { display: inline-block; max-width: 800px; font-size: 1.2em; line-height: 1.6em !important; }

#footer {
        background: #00B5E9;
         width: 100%;

         padding: 20px 0px 40px 0px;

         text-align: center;
         font-size: 1.0em;
         color: #FFFFFF;
         font-weight: normal;
         text-shadow: #009bc7 1px 1px 1px;
}

#footer a:link, #footer a:visited {
         font-size: 1.0em;
         color: #FFFFFF;
         font-weight: normal;
         text-decoration: none;
}

#footer a:hover {
        color: #ffd53f;
}

#footer b { padding-bottom: 6px; border-bottom: 2px #FFFFFF solid; }


/* Sonstiges */
ul { margin: 0px; padding: 10px 0px; list-style: none; }
li { background: url(../images/dot.png) left center no-repeat; margin: 0px; padding: 5px 0px 5px 35px; border-bottom: 2px #CFCFCF dotted; }
li:last-child { border-bottom: 0px #CFCFCF dotted; }

#w { position: fixed; display: none; top: 0; left: 0; background: #000000; color: #FFFFFF; padding: 5px 10px; }


/* Kontakt */
#kontakt {}
#kontakt .l { text-align: right; padding: 40px 40px 40px 0px; border-right: 6px #00B5E9 solid; }
#kontakt .r { padding: 40px 0px 10px 40px; text-align: left; }
#kontakt .l, #kontakt .r { float:left; margin: 0px 0px; width: calc(50% - 46px); }

/* Datenschutz Formatierung */
#datenschutz h2 {
         display: inline-block;
         background: #27C1ED;

         font-size: 1.6em;
         text-shadow: #ffffff 0px 0px 0px;
         color: #FFFFFF;
         font-weight: bold;
         text-align: left;
         text-transform: uppercase;

         margin: 0px 0px 5px 0px;
         padding: 10px 10px 10px 10px;
}

#datenschutz h3 {
         display: inline-block;

        padding: 5px 10px;
        margin: 5px 0px 0px 0px;

         font-size: 1.4em;
        text-align: left;
         font-weight: normal;
         text-decoration:none;

        border:#DFDFDF 0px solid;
}

#datenschutz .highlight {
        padding: 10px;
         background: #DFDFDF;
}

#datenschutz {
        font-size: 0.9em;
         line-height: 1.2em;
         text-align: justify;
}

/* Datenschutz Info */
#cdi {
         z-index: 101;
         bottom: 25px;
         right: 25px;
         position: fixed;

         width: 250px;
         min-height: 50px;

         background: #FFFFFF;
         border-top: 0px #BFBFBF solid;

         color: #1F1F1F;
         font-size: 13px;
         font-weight: normal;
         text-shadow: #FFFFFF 1px 1px 0px;
         text-align: center;

         -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 25px 0px rgba(0, 0, 0, 0.35);
        -moz-box-shadow:    inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 25px 0px rgba(0, 0, 0, 0.35);
        box-shadow:         inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25), 0px 0px 25px 0px rgba(0, 0, 0, 0.35);
}

#cdi .cdi-clear { clear:both; line-height:0.0em; height: 0px; display: block; }

#cdi .cdi-info {
        float:none;
         width: calc(100% - 20px);
         padding: 10px 10px 10px 10px;
}

#cdi .cdi-info a, #cdi .cdi-info a:visited {
        color: #000000;
        font-weight: bold;
         text-decoration: underline;
         text-shadow: #FFFFFF 1px 1px 0px;
         border: 0px;
         padding: 0px 0px;
}

#cdi .cdi-info a:hover { color: #0070C0; }

#cdi .cdi-button {
        float:none;
         width: calc(100% - 20px);

         padding: 5px 10px 10px 10px;
         text-align: center;
}
#cdi .cdi-button form { margin: 0px; padding: 0px; }

#cdi .cdi-button a, #cdi .cdi-button a:visited, #cdi .cdi-button .button, #cdi .cdi-button input[type="submit"] {
        display: block;
         width: calc(100% - 0px);

         cursor: pointer;

        background: #00B5E9;

         font-size: 14px !important;
         color: #FFFFFF;
        font-weight: bold;
         text-shadow: #0091bb 1px 1px 0px;
         text-decoration: none;
         text-align: center;

         padding: 7px 0px;
         margin: 0px 0px;

         border: 1px #00B5E9 solid;
         -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;

         -webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25);
        -moz-box-shadow:    inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25);
        box-shadow:         inset 0px 1px 1px 0px rgba(255, 255, 255, 0.25);
}

#cdi .cdi-button a:hover, #cdi .cdi-button .button:hover, #cdi .cdi-button input[type="submit"]:hover {
        background: #5F5F5F;

         color: #FFFFFF;
         text-shadow: #000000 1px 1px 0px;

         border: 1px #1F1F1F solid;
}


/* Media Querys */
@media (max-width: 1080px) {
         h1 { font-size: 2.4em; }
         #header { padding: 50px 0px 10% 0px; }
         #menu { margin-bottom: 100px; }
         #menu a:link, #menu a:visited { font-size: 1.3em; width: 130px; }

}
@media (max-width: 940px) {
         #menu { margin-bottom: 80px; }
}
@media (max-width: 820px) {
         #menu a:link, #menu a:visited { padding: 10px 15px; width: 120px; font-size: 1.3em; }
         #startseite h3 { font-size: 1.1em; }
}

@media (max-width: 720px) {
         #menu { margin: 30px auto 80px auto; }
         h1 { font-size: 2.8em; }
         #header { padding: 50px 0px 15% 0px; }
         #header h1 span { display: none; }
         #header .logo img { width: 500px; }
         #kontakt .l, #kontakt .r { float:none; margin: 20px 0px 20px 0px; padding: 10px 10px 30px 10px; width: calc(100% - 20px); text-align: center; }
         #kontakt .l { border-right: 0px #00B5E9 solid; border-bottom: 6px #00B5E9 solid; }
         #kontakt .r .clear { float: none; display: inline-block; }
         #kontakt .r .links { float: left; padding: 0px !important; margin: 0px !important; line-height: 0px !important; height: 40px; width: 40px; }
         #kontakt .r .rechts { float: left; padding: 0px 0px 0px 10px; margin: 0px !important; width: calc(50% - 50px); line-height: 40px !important; text-align: left; }
}

@media (max-width: 560px) {
         h1 { font-size: 2.2em; }
         #header .logo img { width: 400px; }
         #kontakt .r .links { width: 40px; text-align: left; }
         #kontakt .r .rechts { width: calc(100% - 50px); text-align: right; }

         h2 { font-size: 1.6em; }
         h3 { font-size: 1.3em; }
}

@media (max-width: 420px) {
         #header .logo img { width: 300px; }
         #menu { margin-bottom: 40px; }
         #menu a:link, #menu a:visited { margin: 5px 5px; padding: 10px 15px; width: 100px; font-size: 1.2em; }

         h2 { font-size: 1.4em; }
         h3 { font-size: 1.2em; }
         h3 { font-size: 1.3em; }
}

@media (max-width: 360px) {
         #startseite .l, #startseite .m, #startseite .r { width: calc(100% - 0px); }
}