/* RESET ======================================================================================= */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, 
ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, 
summary, time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }

html            { overflow-y:scroll; }
.ie7 img        { -ms-interpolation-mode:bicubic; }

/* Headings **********************************************/
h1,h2,h3, 
h4,h5,h6        { font-weight:bold; }
h1 /* Logo */   { background: url(/gfx/logo.png) center top no-repeat; height: 114px; width: 210px; }
h2              { height:40px; margin:0 auto 20px; background-position:center bottom; }
p + h2          { margin-top:25px; }
h3              { font-size:24px; margin:20px 0 0; }

/* Content ***********************************************/
a:hover,a:active,
a:focus         { outline:none; }
p               { font-size: 22px; line-height: 35px; margin-top: 50px; }
h2 + p::before  { background: url(/gfx/symbol-trenner.png) center top no-repeat; content: "\0020"; display: block; height: 10px; position: relative; top: -20px; }
h3 + p          { margin-top:10px; }
p + p           { margin-top:25px; margin-bottom:25px; }
.clear          { background: url(/gfx/symbol-end.png) center top no-repeat; clear:both; height:28px; padding-bottom:25px; margin-top:25px; }

/* IE */
.ie7 p.end      { background:red;padding-bottom:30px; }
/* Tables ************************************************/
table           { border-collapse:collapse; border-spacing:0; }
td              { vertical-align:top; }

/* Font Normalisation ************************************/
body            { font:13px/1.231 "Arno", serif; *font-size:small; }
select,input, 
textarea,button { font:99% "Arno", serif; }
small           { font-size:85%; }

/* Lists *************************************************/
ul,ol           { margin-left:2em; }
ol              { list-style-type:decimal; }
nav ul,nav li   { margin:0; list-style:none; list-style-image:none; }

/* Forms *************************************************/
input,select    { vertical-align:middle; }
textarea        { overflow:auto; }
input[type="radio"]     { vertical-align:text-bottom; }
input[type="checkbox"]  { vertical-align:bottom; }
label, 
input[type="button"], 
input[type="submit"], 
input[type="image"], 
button          { cursor:pointer; }
button,input,
select,textarea { margin:0; }
button          { width:auto; overflow:visible; }
/* IE Forms */
.ie6 legend, .ie7 legend    { margin-left:-7px; } 
.ie7 input[type="checkbox"] { vertical-align:baseline; }
.ie6 input                  { vertical-align:text-bottom; }
/* HTML5 Forms */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { border-radius:1px; -moz-box-shadow:0px 0px 5px red; -webkit-box-shadow:0px 0px 5px red; box-shadow:0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color:#f0dddd; }

/* Selection *********************************************/
::-moz-selection{ background:#444; color:#fff; text-shadow: none; }
::selection     { background:#444; color:#fff; text-shadow: none; }
a:link          { -webkit-tap-highlight-color:#444; }

/* Base Styles ******************************************/
body            { font-family:"Arno", serif; }
body,select,
input,textarea  { color:#444; }
a, a:active,
a:visited       { color:#607890; }
a:hover         { color:#036; }

/* Body Background Gradient */
body            { background-color:#f3f3f3; }
.ie6 body       { filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#ffffff'); }
/* ============================================================================================ */


/* TOOLS ====================================================================================== */
/* Fonts */
@font-face {
  font-family:'Arno';
  src: url('fonts/arnopro-display-webfont.eot');
  src: url('fonts/arnopro-display-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/arnopro-display-webfont.woff') format('woff'),
       url('fonts/arnopro-display-webfont.ttf') format('truetype'),
       url('fonts/arnopro-display-webfont.svg#ArnoProDisplay') format('svg');
  font-weight:normal; font-style:normal;
}

/* Sticky Footer */
html, body {height:100%;}
#container {min-height:100%;}
#main {overflow:auto; padding-bottom:30px;}
footer { position:relative; margin-top:-30px; padding-top:5px; height:25px; clear:both;}
body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px;/ }
/* ============================================================================================ */


/* LAYOUT ===================================================================================== */
#container { margin:0 auto; position:relative; width:1220px; }
header { float: left; margin: 45px 0 0 20px; width: 213px; }
#main  { float: right; margin: 45px 0 0 0; width: 985px; }

/* IE ****************************************************/
.ie6 header { display: inline; }
/* ============================================================================================ */


/* GLOBAL SYLES =============================================================================== */
#main { text-align:left; }
#hero { background:url(/gfx/bg-hero-bottom.png) 0 bottom no-repeat; margin:30px 0 0 -5px; padding:0 0 55px 0; }
#hero img { background:url(/gfx/bg-hero-top.png) no-repeat; padding:54px 50px 0 54px }

.column { float:left; margin:0 35px 0 0; width:455px; }
.column p { font-size:20px; line-height:1.5; }
/* ============================================================================================ */


/* HEADER ===================================================================================== */
#logo { background: url(/gfx/symbol-trenner.png) center bottom no-repeat; display: block; margin: 0 0 20px; padding: 0 0 40px; }

/* Navigation ********************************************/
nav { background: url(/gfx/symbol-end.png) center bottom no-repeat; padding: 0 0 35px; text-align: center; }
nav a { background-image: url(/gfx/sprite-navi.png); display: block; height: 30px; margin: 0 0 25px; width: 100%; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; }
.es nav a { background-image: url(/gfx/sprite-navi-es.png); }
nav a:hover { opacity: .7; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; }

/* Navigation Points */
.ueber-uns a          { background-position:center 0; }
.unsere-leistungen a  { background-position:center -48px; }
.kontakt a            { background-position:center -95px; }

/* Sprachwähler ******************************************/
#language { position:absolute; right:0; top:10px; }
#language li { display:inline; float:left; margin-left:10px; }
#language span, #language a { display:block; height:11px; text-indent:-999em; width:16px; }
#language .aleman { background:url(/gfx/de.gif) no-repeat; }
#language .aleman.active { background:url(/gfx/de-active.gif) no-repeat; }
#language .espanol { background:url(/gfx/es.gif) no-repeat; }
#language .espanol.active { background:url(/gfx/es-active.gif) no-repeat; }
/* ============================================================================================ */


/* HEADINGS =================================================================================== */
/* Start */
.de .start h2     { background-image:url(/gfx/heading-start.png); width:426px; }
.es .start h2     { background-image:url(/gfx/heading-vivir.png); width:346px; }
/* About */
.de .about h2     { background-image:url(/gfx/heading-ueber-uns.png); width:139px; }
.es .about h2     { background-image:url(/gfx/heading-somos.png); width:230px; }
/* Services */
.de .services h2  { background-image:url(/gfx/heading-unsere-leistungen.png); width:288px; }
.es .services h2  { background-image:url(/gfx/heading-servicios.png); width:299px; }
/* Kontakt */
.de .contact h2   { background-image:url(/gfx/heading-kontakt.png); width:125px; }
.es .contact h2   { background-image:url(/gfx/heading-contacto.png); width:142px; }
/* Impressum */
.de .imprint h2   { background-image:url(/gfx/heading-impressum.png); width:175px; }
.es .imprint h2   { background-image:url(/gfx/heading-imprenta.png); width:241px; }
/* ============================================================================================ */


/* START ====================================================================================== */
.start #main { text-align:center; }
/* ============================================================================================ */


/* KONTAKT ==================================================================================== */
form                    { margin:20px 0 40px; font-size:20px; }
form div                { padding:0 0 20px; position:relative; width:450px; }
label                   { display:block; }
input.text, textarea    { color:#868688; padding:7px 5px; font-size:20px; width:440px; outline:none; border:1px solid #aaa; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
input.text:focus,
textarea:focus          { color:#4B4B4D; }
.required label::after  { content:"*"; color:#E78D8D; }
input.submit            { padding:5px 8px 3px; color:#f3f3f3; font-size:20px; border:1px solid #323334; border-radius:3px; background:#4b4c4e; font-weight:bold; -webkit-transition:all .7s; -moz-transition:all .7s; }
input.submit:hover      { color:#fff; background:#646568; -webkit-transition:all .3s; -moz-transition:all .3s; }
form small              { display:block; font-size:15px; font-style:italic; color:#666; position:relative; }
form small span         { color:#E78D8D; }
div.textarea 			{ clear:both; }

/* Error */
input.text.error,
textarea.error          { border-color:#E78D8D; color:#E78D8D; }
label.error             { position:absolute; right:0; bottom:0; font-size:15px; color:#E78D8D; }
.textarea label.error   { position:absolute; bottom:19px; }
label.error::after      { content:none; }

/* Success */
.formSuccess            { display:none; color:#7D9211; font-size:20px; border:1px solid #B5C945; border-radius:3px; background:#CADA72; font-weight:bold; padding:10px; text-align:center; width:429px; }
/* ============================================================================================ */


/* FOOTER ===================================================================================== */
footer { background: url(/gfx/bg-footer.jpg) repeat-x; color: #fff; box-shadow: 0 0 50px rgba(0,0,0,.1); font-family: "Arno", serif; font-size: 17px; }
footer div { margin: 0 auto; text-align: right; width: 1200px; }
footer a, footer a:active, footer a:visited { color: #fff; text-decoration:none; }
footer a:hover { color: #fff; text-decoration:underline; }
/* ============================================================================================ */


/* HELPER ===================================================================================== */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ============================================================================================= */


/* MEDIA QUERIES =============================================================================== */
/* iPad **************************************************/
@media all and (min-width: 480px) and (max-width: 1200px) {
#container { width: 985px; }
header { float: none; margin: 0; padding-top: 30px; overflow: hidden; width: 100%; }
#main { float: none; margin-top: 0; width: 100%; }
  
#logo { background: none; padding: 0; float: left; margin: 0 30px 0 0; }

nav { background: none; float: right; padding: 40px 0 0; }
nav li { float: left; margin-left: 30px; }

/* Über Uns */
nav li.ueber-uns { width: 100px; }
.es nav li.ueber-uns { width:160px; }
nav li.ueber-uns a { background-position: -55px 0; }
.es nav li.ueber-uns a { background-position: -25px 0; }

/* Unsere Leistungen */
nav li.unsere-leistungen { width: 207px; }
nav li.unsere-leistungen { width: 211px; }
nav li.unsere-leistungen a { background-position: -1px -46px; }
nav li.unsere-leistungen a { background-position: 0 -46px; }

/* Kontakt */
nav li.kontakt { width: 89px; }
nav li.kontakt { width: 100px; }
nav li.kontakt a { background-position: -61px -91px; }
nav li.kontakt a { background-position: -55px -91px; }
  
#hero { margin-top: 0; }
  
footer div { width: 985px; }
}

/* iPhone ************************************************/
@media screen and (max-width: 480px) {
html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; }

#container { width: 100%; }
header { display: block; float: none; margin: 0; width: 100%; }
#main { width: 100%; }

#logo h1 { margin: 20px auto 0; }
#hero { display: none; }

.column { float:none; width:100%; }

h3, p, form { padding-left:10px; padding-right:10px; }
form div { width:100%; }
input.text, textarea { width:100%; padding:0; }
textarea { min-width:100%; max-width:100%; }
input.submit { width:100%; font-size:24px; }

footer div { text-align: center; width: 100%; }
}

/* Print *************************************************/
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-ms-filter: none !important; } 
a, a:visited { color: #444 !important; text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3{ page-break-after: avoid; }
}
/* ======================================================================================================= */