* {margin:0px; padding:0px; border:0; box-sizing:border-box;}
body {position:relative; min-width:320px; width:100vw; height:100vh; color:#ffffff; font-family:'Roboto', sans-serif; background-color:#ffffff; text-align:center; overflow-x:hidden;}
tbody {width:100%}
p {margin:10px 0; padding:0; font-size:16px; line-height:1.3;}
ol, ul {margin:0 0 0 20px;}
li {margin:0 0 5px 10px;}
a, a:link, a:visited, a:hover {color:inherit; text-decoration:underline; transition:.3s;}
a:hover {color:orange;}

div#top {position:fixed; left:0; top:0; width:100%; height:80px; background:#111111; overflow:show; transition:.3s; text-align:center; z-index:1000;}
div#hat {position:relative; display:inline-block; width:100%; max-width:1200px; height:120px; padding:0 25px; text-align:left;}
a#logo {position:absolute; display:inline-block; left:0; top:0; width:151px; height:143px; background-image:url(/Images/buderus.png); background-position:left top; background-repeat:no-repeat; background-size:contain;}
div#title {position:absolute; display:inline-block; left:170px; top:20px; width:400px; padding:0; text-align:left; color:#ffffff; transition:.3s;}
div#title h1 {font-size:18px; line-height:1; font-weight:normal; margin-bottom:5px;}
div#title p {font-size:14px; line-height:1; font-weight:normal; margin:0;}

a#phone {position:absolute; display:none; right:10px; top:10px; width:60px; height:60px; background-image:url(/Images/phone.png); background-position:left top; background-repeat:no-repeat; background-size:contain;}

div#phones {position:absolute; display:inline-block; right:20px; top:15px; width:420px; padding:0; text-align:right; color:#ffffff; transition:.3s;}
div#phones h2 {font-size:18px; line-height:1; font-weight:normal; margin-bottom:5px;}
div#phones p {font-size:14px; line-height:1; font-weight:normal; margin:0 0 5px 0;}
a.phone:link, a.phone:visited {text-decoration:none;}
a.phone:hover {text-decoration:underline;}

div#banner {margin:80px 0 0 0; width:100%; height:500px; text-align:center; background-image:url(/Images/buderusbanner.jpg); background-position:50% 50%; background-size:cover;}

div#blue {margin:0; width:100%; text-align:center; background:rgb(0,45,89);}
div#form {display:inline-block; width:100%; max-width:1200px; padding:20px; text-align:left;}
div#form div {display:inline-block; width:45%; margin:0 2%; text-align:left; vertical-align:top;}
div#form h2 {font-size:32px; line-height:1; font-weight:normal; margin:10px 0;}
div#form input {display:block; width:100%; padding:5px; text-align:left; font-size:16px; line-height:1;}
div#form input[type="submit"] {display:inline-block; width:auto; padding:10px 15px; margin:15px 0; color:#ffffff; background:rgb(0,45,89); border:1px solid #ffffff; cursor:pointer; transition:.3s;}
div#form input[type="submit"]:hover {color:rgb(0,45,89); background:#ffffff; border:1px solid #ffffff;}

div.white {margin:0; width:100%; text-align:center; background:#ffffff;}
div#products {display:inline-block; width:100%; max-width:1200px; padding:30px 0; text-align:left;}
div#products h2 {color:#111111; font-size:32px; line-height:1; font-weight:normal; margin:0 0 30px 0; text-align:center;}
div.item {display:inline-block; position:relative; width:22%; height:400px; margin:0 1% 30px 1%; background:rgb(237,237,237); text-align:left; vertical-align:top; overflow:hidden;}
div.item img {width:100%; border:0; margin:0; padding:10px 0; object-fit:cover;}
div.item h3 {color:#111111; font-size:18px; line-height:1; font-weight:normal; padding:10px 20px 0 20px;}
div.item p {color:#111111; font-size:12px; margin:0; padding:10px 20px;}
div.new {position:absolute; left:0; top:0; width:40px; height:40px; border:0; background-image:url(/Images/new.png);}

div#info {display:inline-block; width:100%; max-width:1200px; padding:30px 0; text-align:left;}
div#info h2 {color:#111111; font-size:32px; line-height:1; font-weight:normal; margin:0 0 30px 0; text-align:center;}
a.info, a.info:link, a.info:visited {display:inline-block; position:relative; width:30%; height:500px; margin:0 1% 30px 1%; background:rgb(237,237,237); text-align:left; text-decoration:none; vertical-align:top; overflow:hidden; transition:.3s;}
a.info:hover {background:rgb(207,207,207)}
a.info img {width:100%; height:225px; border:0; margin:0; padding:0; object-fit:cover;}
a.info h3 {color:#111111; font-size:21px; line-height:1; font-weight:normal; padding:10px 20px 0 20px;}
a.info p {color:#111111; font-size:14px; max-height:100px; margin:0; padding:10px 20px; overflow:hidden;}
button {display:inline-block; position:absolute; left:20px; bottom:30px; width:auto; padding:10px 15px; color:#111111; background:rgb(237,237,237); border:1px solid #111111; cursor:pointer; transition:.3s;}
button:hover {background:#ec7018; border:1px solid #ec7018; color:#ffffff;}

div#black {margin:0; width:100%; text-align:center; background:#231f20;}
div#footer {position:relative; display:inline-block; width:100%; max-width:1200px; padding:20px; text-align:left;}
div.up {position:absolute; right:20px; top:0; width:60px; height:60px; border:0; background-image:url(/Images/up.png); cursor:pointer;}


div#slider {display:none; position:relative; left:0; top:0; width:100%; height:100vh; text-align:center; padding:0; background-color:rgba(0,0,0,.9); background-position:50% 50%; background-repeat:no-repeat; background-size:contain; z-index:2000; transition:.5s;}
div#left {display:inline-block; width:70px; height:100%; position:absolute; left:0; top:0; background-image:url(/Images/arrowleft.png); background-position:50% 50%; background-repeat:no-repeat; cursor:pointer;}
div#right {display:inline-block; width:70px; height:100%; position:absolute; right:0; top:0; background-image:url(/Images/arrowright.png); background-position:50% 50%; background-repeat:no-repeat; cursor:pointer;}
div#close {display:inline-block; width:40px; height:40px; position:absolute; right:10px; top:10px; background-image:url(/Images/close.png); background-position:50% 50%; background-repeat:no-repeat; cursor:pointer;}

@media only screen and (max-width : 1200px), only screen and (max-device-width : 1200px){
	div.item {display:inline-block; position:relative; width:30%; height:400px; margin:0 1% 30px 1%; background:rgb(237,237,237); text-align:left; vertical-align:top; overflow:hidden;}
}
@media only screen and (max-width : 900px), only screen and (max-device-width : 900px){
	div#phones {display:none;}
	a#phone {display:inline-block;}
	div#banner {margin:80px 0 0 0; width:100%; height:300px; text-align:center; background-image:url(/Images/buderusbanner.jpg); background-position:50% 50%; background-size:cover;}
}
@media only screen and (max-width : 770px), only screen and (max-device-width : 770px){
	a.info, a.info:link, a.info:visited {display:inline-block; position:relative; width:47%; height:500px; margin:0 1% 30px 1%; background:rgb(237,237,237); text-align:left; text-decoration:none; vertical-align:top; overflow:hidden; transition:.3s;}
	div.item {display:inline-block; position:relative; width:47%; height:400px; margin:0 1% 30px 1%; background:rgb(237,237,237); text-align:left; vertical-align:top; overflow:hidden;}
}
@media only screen and (max-width : 600px), only screen and (max-device-width : 600px){
	a#logo {position:absolute; display:inline-block; left:0; top:0; width:90px; height:90px; background-image:url(/Images/buderus.png); background-position:left top; background-repeat:no-repeat; background-size:contain;}
	div#title {position:absolute; display:inline-block; left:100px; top:20px; width:400px; padding:0; text-align:left; color:#ffffff; transition:.3s;}
	div#form div {display:inline-block; width:98%; margin:0; text-align:left; vertical-align:top;}
}
@media only screen and (max-width : 500px), only screen and (max-device-width : 500px){
	div#hat {height:90px;}
	a#logo {position:absolute; display:inline-block; left:0; top:0; width:90px; height:90px; background-image:url(/Images/buderus.png); background-position:left top; background-repeat:no-repeat; background-size:contain;}
	div#title {position:absolute; display:inline-block; left:100px; top:15px; width:calc(100% - 100px); padding:0; text-align:left; color:#ffffff; transition:.3s;}
	div#banner {margin:80px 0 0 0; width:100%; height:220px; text-align:center; background-image:url(/Images/buderusbanner.jpg); background-position:50% 50%; background-size:cover;}
	a#phone {display:none;}
	div#form h2 {font-size:24px; line-height:1; font-weight:normal; margin:10px 0;}
	div.white {padding:20px;}
	a.info, a.info:link, a.info:visited {display:inline-block; position:relative; width:97%; height:500px; margin:0 1% 30px 1%; background:rgb(237,237,237); text-align:left; text-decoration:none; vertical-align:top; overflow:hidden; transition:.3s;}
	div.item {display:inline-block; position:relative; width:97%; height:400px; margin:0 1% 30px 1%; background:rgb(237,237,237); text-align:left; vertical-align:top; overflow:hidden;}

}