/* =reset.css (by Andy Clarke) */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin : 0; padding : 0; border : 0; outline : 0; font-weight : inherit; font-style : inherit; font-size : 100%; font-family : inherit; vertical-align: baseline; background : transparent; }

:focus { outline : 0; } 
ol, ul { list-style : none; }
/*table { border-collapse : collapse; border-spacing : 0; }*/
caption, th, td { text-align : left; font-weight : normal; }
button { overflow : visible; }



/* CLEARING
-------------------------------------------------------------*/

/* =clear */
.clear { clear: both; font-size: 1px; line-height: 0; }

/* =clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block; }
/* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */

/* =all-clear */
.all-clear { overflow: hidden; }
/*Because authors use "_height" as min-height in IE lt 7, it is important to turn the above declaration off in IE lt 7.*/
.all-clear { overflow: hidden; _overflow: visible; }
/*The declaration below is not directly related to the technique, but since we are using "overflow" I like to throw in a fix to prevent IE lt 7 from not respecting the width of a container and expanding its dimension depending on content (large image, long string, etc.).*/
.all-clear { overflow: hidden;	_overflow: visible; _overflow-x: hidden; }
/*Setting hasLayout in IE lt 7*/
.all-clear { overflow: hidden;	_overflow: visible; _overflow-x: hidden; _height: 0; }
/*Taking care of IE Mac*/
.all-clear {	overflow: hidden;	_overflow: visible; _overflow-x: hidden; _height: 0; }
/*\*//*/ 
.all-clear { display: inline-block; }
/**/

/* layout */
body { font-family: "Roboto", sans-serif; font-size: 100%; line-height: 1.6em; font-weight: 400; color: #552b35; background: #fffefe; }
.wrap { max-width: 1920px; padding-top: 41px; margin: 0 auto; background: #fff; }
.header-top { position: fixed; text-align: center; color: #fff; width: 98%; padding: 8px 1%; background: #552b35; z-index: 2; }
.header-top p { font-size: 18px; margin-bottom: 0; }
.header { overflow: auto; color: #fff; height: 680px; padding: 40px 8% 0; background: url(img/bg-hero.jpg) center bottom no-repeat; animation: fadein 1s; }
.logo { display: inline-block; height: 132px; padding: 20px 0 0 132px; background: url(img/logo.png) no-repeat; }
.telefon { float: right; padding: 16px 0 0 47px; margin-top: 12px; background: url(img/ico-telefon.png) no-repeat; }
.telefon h2 { line-height: 0.9em; }
.telefon a { color: #fff; }
.telefon a:hover, .telefon a:active { color: #552b35; }
.header h1, .header h2 { text-shadow: 0 0 5px rgba(83, 62, 57, 0.4); }
.header p { text-shadow: 0 0 5px rgba(83, 62, 57, 0.3); margin-left: 3px; }
.header .third { text-align: center; width: 21%; margin: 36px 4% 0; }
.header .third.center { margin-left: 10.5%; margin-right: 10.5%; }
.header .krug { width: 184px; height: 184px; margin: 0 auto 25px; background: transparent; border: 8px solid #fff; border-radius: 20%; box-shadow: 0 0 10px rgba(83, 62, 57, 0.2); }
.header .krug:hover { background: #813e4e; border-radius: 10%; transform: rotate(6deg); ; transition: .2s; }
.header .krug img { margin-top: 32px; }
.content { overflow: auto; text-align: center; padding: 2% 6%; animation: fadein 2s; }
.content h2 { margin-bottom: 0.6em; }
.content p.intro { display: inline-block; text-align: left; line-height: 1.6em; max-width: 1000px; padding: 0 4% 4%; }
.content ul { font-size: 28px; padding: 5% 5% 0 9%; }
.content li { line-height: 1.3em; margin-bottom: 20px; }
footer { text-align: center; color: #fff; padding: 7% 4% 3%; background: #552b35 url(img/bg-footer.png) center top no-repeat; }
footer h2 { line-height: 1.2em; margin-bottom: 36px; }
footer p.small { font-size: 16px; }
footer a { font-weight: 900; color: #f3711c; }
footer a:hover, footer a:active { color: #fff; }

a.top { display: block; text-indent: -9999px; width: 50px; height: 50px; margin: 50px auto; background: url(img/ico-top.png) no-repeat; }
a.top:hover, a.top:active { color: #fff; }

/* typography */
h1 { font-size: 46px; font-weight: 900; line-height: 1em; letter-spacing: -1px; }
h2 { font-size: 38px; font-weight: 900; line-height: 1em; }
p, ul, ol { font-size: 24px; margin-bottom: 24px; }
ul { text-align: left; }
ul li { list-style-type: disc; margin-left: 3%; }
ul li ul li { margin-left: 2%; }

/* common */
.half { float: left; width: 50%; }
.third { float: left; width: 33.3%; }
.f-left { float: left; }
.f-right { float: right; }
.clear { clear: both; }
strong { font-weight: 900; }
a { text-decoration:  none; }
a:hover { transition: .2s; }

@media only screen and (max-width: 1600px) {
    .header { padding-left: 4%; padding-right: 4%; }
    .header .third { width: 25%; }
    .header .third.center { margin-left: 4%; margin-right: 4%; }
    h1 { font-size: 44px; }
    h2 { font-size: 36px; }
    p, ul, ol { font-size: 22px; margin-bottom: 22px; }
    .content { padding-left: 3%; padding-right: 3%; }
    .content ul { font-size: 26px; }
    footer { padding-top: 8%; padding-bottom: 2%; }
}

@media only screen and (max-width: 1280px) {
    .header { height: 600px; }
    .header .third, .header .third.center { width: 29%; margin: 10px 2% 0; }
    .header .krug { width: 170px; height: 170px; }
    .header .krug img { margin-top: 25px; }
    .content { padding-left: 0; padding-right: 0; }
    .content ul { font-size: 24px; }
    a.top { margin: 40px auto; }
    footer { padding-top: 9%; }
}

@media only screen and (max-width: 1024px) {
    .logo { padding: 18px 0 0 100px; background-size: 21%; }
    .logo p { font-size: 20px; }
    .telefon { padding-left: 38px; margin-top: 12px; background-size: 15%; }
    .header { height: 550px; padding-right: 3%; padding-left: 3%; }
    .header .third, .header .third.center { margin-top: 0; }
    .header .krug { width: 150px; height: 150px; }
    .header .krug img { width: 60%; }
    h1 { font-size: 40px; }
    h2 { font-size: 34px; }   
    p, ul, ol { font-size: 22px; margin-bottom: 22px; }
    footer { padding-top: 10%; }
}

@media only screen and (max-width: 960px) {
    .logo { padding: 16px 0 0 96px; }
    .telefon { padding-top: 10px; padding-left: 28px; margin-left: 12px; background-size: 12%; }
    .header { height: 500px; padding-top: 14px; }
    .header .krug { width: 100px; height: 100px; }
    .header .krug img { margin-top: 18px; }
    .content .third { float: none; width: 100%; }
    .content ul { padding-top: 1%; margin-bottom: 6%; }
    .content li { margin-bottom: 16px; }
    h1 { font-size: 36px; }
    h2 { font-size: 30px; }
    p, ul, ol { font-size: 18px; margin-bottom: 18px; }
    footer { padding-top: 12%; }
}

@media only screen and (max-width: 768px) {
    .header { padding-left: 2.5%; padding-right: 2.5%; }
}

@media only screen and (max-width: 700px) {
    .header { text-align: center; height: auto; padding-bottom: 70px; }
    .header .third, .header .third.center { width: 100%; padding: 15px 0; margin: 0; }
    .header .third { border-top: 1px dashed #fff; }
    .header .krug { width: 70px; height: 70px; margin-bottom: 10px; border-width: 4px; }
    .header .krug img { margin-top: 12px; }
    .header p { margin-left: 0; }
    .logo { text-align: left; height: 74px; padding-top: 16px; padding-left: 90px; margin: 0 5% 8px; background-size: 20%; }
    .telefon { float: none; display: inline-block; padding-top: 10px; padding-left: 30px; margin-top: 0; margin-bottom: 24px; }
    .content h2 { margin-left: 3%; margin-right: 3%; }
    .content ul { font-size: 20px; }
    footer { padding-top: 18%; }
    footer h2 { font-size: 28px; }
}

@media only screen and (max-width: 480px) {	
    .logo { margin-left: auto; margin-right: auto; }
    .content p.intro { line-height: 1.4em; }
    .content ul { margin-bottom: 12%; }
    footer { padding: 20% 5% 3%; }
}

@media only screen and (max-width: 420px) {	
    .logo { height: 64px; height: 60px; padding-top: 6px; padding-left: 66px; margin-bottom: 0; background-size: 16%; }
    .logo p { font-size: 16px; line-height: 1.2em; }
    .third img { width: 30%; }
    h1 { font-size: 36px; }
    .header .third h2 { font-size: 26px; }
    footer { padding-top: 22%; }
    footer p { font-size: 18px; }
}

@media only screen and (max-width: 360px) {	
    .logo { padding-left: 58px; }
    .header-top p { font-size: 16px; }
    .telefon h2 { font-size: 26px; }
    h1 { font-size: 30px; }
    .content ul { padding-left: 6%; margin-bottom: 12%; }
}

@media only screen and (max-width: 330px) {	
    .logo h1 { letter-spacing: -2px; }

}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}