@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;800;900&display=swap');

@-webkit-keyframes bounce {
	0%, 20%, 60%, 100%  { -webkit-transform: translateY(0); }
    40%  { -webkit-transform: translateY(-10px); }
	80% { -webkit-transform: translateY(-5px); }
}

* { box-sizing: border-box; }
html {margin: 0px; padding: 0px; font-family: 'Raleway', sans-serif; width: 100%; height: 100%; color: #414141; font-size: 16px; font-weight: 400;}
body { width: 100%; height: 100%; margin: 0px;}
ul {margin: 0px; padding: 0px;}
ul {margin: 0px; padding: 0px; list-style-type: none;}

a {color: #414141; text-decoration: underline;}
a:hover {text-decoration: none; }

.homepage {width: 100%; height: 100%; display: block;}
.homepage .header { position: fixed; z-index: 199; display: block; background: #000000; width: 100%; height: auto; min-height: 100px;}
.homepage .header .content { text-align: left !important; padding: 10px; }
.homepage .header .content ul { text-align: right; width: 500px; float: right; }

.homepage .header .content a.menubutton { width: 24px; height: 24px; display: inline-block; background: url('../images/menu.svg') no-repeat; background-size: 24px; display: none; z-index: 299; position: absolute; right: 0; margin-right: 20px; top: 0; margin-top: 30px;}
.homepage .header .content ul li { margin-top: 35px; }
.homepage .header .content ul li { display: inline-block; padding-left: 10px; padding-right: 10px;}
.homepage .header .content ul li a { color: #ffffff; text-transform: uppercase; font-size: 14px; font-weight: 700; text-decoration: none;}
.homepage .header .content ul li a:hover { text-decoration: underline;}

.homepage .scroll {
    position: absolute;
	bottom: 0;
	margin-bottom: 50px;
	color: #ffffff;
    width: 100%;
	text-align: center;

}

.homepage .scroll a img {
      width: 30px;
      -webkit-animation: bounce 2s infinite ease-in-out;
}

.content {width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; text-align: center; padding-top: 30px; padding-bottom: 30px; box-sizing: border-box;}
.footer {width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; text-align: center; padding-top: 10px; padding-bottom: 10px; color: #ffffff; font-size: 11px;}
.footer a {color: gray; text-decoration: none;}
.footer a:hover {color: #ffffff;}

.line_white {width: 100%;}
.line_gray {width: 100%; background: #ededed;}
.line_black {width: 100%; background: #000000;}

h1 {font-size: 30px; text-transform: uppercase;}
h2 {font-size: 46px; text-transform: uppercase; margin-top: 20px;}

a.nabidka {font-size: 16px; text-transform: uppercase; border: 1px solid #414141; border-radius: 10px; font-weight: 700; padding: 20px 30px 20px 30px; margin-top: 30px; margin-bottom: 30px; display: inline-block; background: url('../images/auto.svg') no-repeat 10px 50%; background-size: 90px; padding-left: 120px; text-decoration: none;}
a.nabidka:hover {border: 1px solid #414141; color: #ffffff; background: #414141 url('../images/auto-white.svg') no-repeat 10px 50%; background-size: 90px;}

a.jump { width: 100%; height: 100px; display: block; position: absolute; margin-top: -100px;  z-index: -99; background: transparent;}

ul.sluzby li {border: 1px solid #414141; padding: 3px 5px 3px 5px; border-radius: 5px; display: inline-block; margin: 5px;}

ul.telefon {margin-bottom: 50px;}
ul.telefon li {display: inline-block; margin-left: 15px; margin-right: 15px; background: url('../images/telefon.svg') no-repeat 0px 50%; background-size: 20px; padding-left: 25px;}
ul.telefon li a {font-weight: bold; text-decoration: none;}

@media (min-width: 800px) {
   .homepage {background: #000000 url('../images/auto.png') no-repeat 50% 50%; background-size: 70%;}
}

@media (max-width: 1200px) {	
   .content {padding-left: 10px; padding-right: 10px;} 
   h1 {font-size: 24px;}
   h2 {font-size: 34px;}
}

@media (max-width: 800px) {
	body{font-size: 12px; }
   .homepage {background: #000000 url('../images/auto-mobile.png') no-repeat 50% 50%; background-size: 90%;}
   .homepage .header .content img.logo { width: 150px; }
   .homepage .header .content a.menubutton { display: block; }
	
   .homepage .header .content ul.menu { display: none; width: 100%; height: 100%; background: #000000; position: fixed; top:0; left:0; padding-top: 70px;}
   .homepage .header .content ul.menu li { display: block; margin-top: 0px; text-align: center;}
   .homepage .header .content ul.menu li a { padding-top: 20px; padding-bottom: 20px; display: block;}

   a.nabidka {font-size: 14px;}
	
   ul.telefon {margin-bottom: 0px;}
   ul.telefon li {padding-left: 25px; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px;}
   
}