@charset "UTF-8";

/* CSS zurücksetzten */
* {
  margin: 0;
  padding: 0;
  font-size: 100%;
  font-weight: normal;
  box-sizing: border-box;
}

a,
img,
img a {
  border: none;
  text-decoration: none;
}

.informieren,
.impress-kontakt {
  list-style: none;
  padding-left: 0;
}
.wrapper3sp p {
  margin: 0;
}
.wrapper3sp a:hover {
  color: #c00;
}
.anschrift {
  margin-top: 10px;
}

a:link,
a:visited,
a:active {
  color: #000;
}
.start-content .kontaktfeld {
  background-color: white;
  width: 100%;
  text-align: center;
  padding: 50px;
}
.start-content .kontaktfeld span {
  display: block;
  padding: 20px;
  margin-top: 10px;
  font-size: 1.2em;
  font-weight: 300;
  color: #c00;
}
.start-content .kontaktfeld h3 {
  font-size: 1.8em;
  font-weight: 300;
  color: #c00;
  margin-bottom: 30px;
}

.pellet-ofen .contentboxright3sp img,
.pellet-ofen .contentboxleft3sp img {
  min-width: 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.sanitaer-container {
  width: 100%;
  align-items: stretch;
}
.start-content .sanitaer-container .contentboxleft2spequal {
  min-width: 60%;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.start-content .sanitaer-container .contentboxleft2spequal img {
  object-fit: contain;
  max-height: 100%;
  width: auto;
}
.start-content .sanitaer-container .contentboxright2spequal {
  min-width: 40%;
  max-height: 100% !important;
  display: flex;
  flex: 1;
  margin-bottom: 0;
  padding: 10px;
  align-items: center;
}
.start-content .sanitaer-container a {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  display: flex;
  flex-wrap: wrap;
  max-height: 100% !important;
}
.start-content .sanitaer-container a {
  display: flex;
  flex-wrap: wrap;
  max-height: auto !important;
}

.heizungen-main {
  display: flex;
  flex-wrap: wrap;
}
.heizungen-main .heizkoerper-text-content a {
  background-color: #cc0000;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
}
.heizungen-main .heizkoerper-text-content a:hover {
  color: #cc0000;
  background-color: white;
  border: 2px solid #cc0000;
}
.heizungen-main .contentbox-top-left {
  max-width: 320px;
}
.heizungen-main .contentboxleft2spsmall {
  width: 100%;
  max-height: 250px;
  border: none;
}
.heizungen-main .contentboxleft2sqsmall1,
.heizungen-main .contentboxleft2spsmall2 {
  position: relative;
}
.heizungen-main .contentbox-top-left a:first-child {
  margin-bottom: 8px;
  display: block;
  position: relative;
}
.heizungen-main .heikoerper-text-content a {
  background-color: #c00;
  padding: 10px;
  border-radius: 10px;
  color: white;
}
.heizungen-main .contentboxright2spbig {
  width: calc(100% - 326px);
  float: none;
  background-color: white;
  height: 100%;
}
.heizungen-main .heizkoerper-text-content {
  display: flex;
}
.heizungen-main .contentbox-top-headline {
  display: flex;
}
.heizungen-main .wrapper3sp img:hover {
  transform: scale(1.1);
  transition: 2s ease-in-out;
}
.heizungen-main .contentboxleft3sp,
.heizungen-main .contentboxmiddle3sp,
.heizungen-main .contentboxright3sp {
  overflow: hidden;
}

/* Float Anweisungen */

.cf {
  clear: both;
}

.fr {
  float: right;
}
.impressum .firmendaten li {
  font-family: "Raleway";
  font-weight: 200;
}
.impressum .firmendaten h3 {
  font-family: "Raleway";
  font-weight: 200;
}
.kontakt .firmendaten h3 {
  font-weight: 200;
  font-family: "Raleway";
}

/* font-Klassen und Schriften */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 200;
  src: url("/fonts/raleway/raleway-light.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* latin */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/raleway/raleway-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  src: url("/fonts/raleway/raleway-bold.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
.second-content {
  justify-content: space-between;
}
#content p {
  font-family: "Raleway", sans-serif;
  font-size: 1em;
  font-weight: 200;
  line-height: normal;
}
#content {
  justify-content: space-between;
}
#handelspartner a:hover {
  transform: scale(1.2);
}
.kontakt h3,
.impressum h3 {
  font-weight: 500;
  font-size: 1em;
}
.kontakt p {
  padding: 0;
  margin: 0;
}
.zentralstaubsauger .wrapper3sp {
  justify-content: space-between;
}
.kontakt .contentboxleft2spsmall .anschrift,
.kontakt .contentboxleft2spsmall .kontaktdaten,
.kontakt .contentboxleft2spsmall .firmendaten {
  margin-top: 20px !important;
}
.impressum .contentboxleft2spsmall .anschrift,
.impressum .contentboxleft2spsmall .kontaktdaten,
.impressum .contentboxleft2spsmall .firmendaten {
  margin-top: 20px !important;
}
.datenschutz .contentboxright2spbig {
  float: none;
}
.datenschutz #bundDe {
  word-wrap: break-word;
}
.kontaktdaten a {
  color: dodgerblue;
  text-decoration: underline;
}
.datenschutz h2 {
  margin-bottom: 20px;
}
.datenschutz .anschrift p {
  margin: 0;
  padding: 0;
}
.datenschutz .contentboxright2spbig {
  margin-left: 6px;
  width: calc(65% - 6px);
  background-color: white;
}
.datenschutz .fixed {
  position: sticky;
  top: 0;
  width: 354px;
}
.datenschutz h1 {
  margin-bottom: 30px;
}
.datenschutz .lauftextklein a:hover {
  color: #c00;
}
.datenschutz .contentboxleft2spsmall {
  padding: 20px;
}
.datenschutz .anschrift {
  margin: 20px 0px;
}
.impressum p {
  margin: 0;
  padding: 0;
}
.impressum .contentboxleft2spsmall {
  background-color: white;
  width: 100%;
  height: auto;
}
.kontakt li {
  font-family: "Raleway", sans-serif;
  font-size: 1em;
  font-weight: 200;
  line-height: normal;
}
.kontakt .contentboxleft2spsmall {
  height: auto;
  background-color: white;
  width: 100%;
}
.fachhandelspartner .contentboxleft2spsmall,
.fachhandelspartner .contentboxright2spbig {
  min-width: 100%;
  height: auto;
  background-color: white;
}
.fachhandelspartner .contentboxright2spbig {
  background-color: white;
}
.fachhandelspartner .contentboxright2spbig div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.fachhandelspartner .contentboxleft2spsmall {
  border-bottom: 0;
}
.wohnlueftung {
  display: flex;
  flex-wrap: wrap;
}
.referenzen .contentboxleft2spsmall {
  width: 100%;
  min-width: 100%;
  height: 100%;
  background-color: white;
  max-height: 100%;
  border-bottom: none;
}

body {
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-weight: 400;
}
.sortiment a {
  display: block;
  background-color: #c00;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  border: 2px solid #c00;
  color: white;
}
.sortiment a:hover {
  color: #c00;
  background-color: white;
}
.baeder {
  display: flex;
  flex-wrap: wrap;
}
.smallthin {
  font-weight: 200;
  font-size: 0.8em;
  list-style: none;
  position: relative;
  z-index: 100;
}

.lauftext {
  font-size: 1em;
  line-height: 1.4em;
}

.lauftextklein {
  font-size: 0.9em;
  line-height: 1.3em;
}

.hinweis {
  font-size: 0.8em;
  color: #c00;
}

h1 {
  font-size: 1.8em;
  line-height: 1.2em;
  font-weight: 200;
  color: #c00;
}

h2 {
  font-size: 1.1em;
  line-height: 1.1em;
  font-weight: 700;
  color: #888;
}

h4 {
  font-size: 1.4em;
  font-weight: 700;
  color: #706f6f;
}
.pellet-ofen .contentboxright3sp,
.pellet-ofen .contentboxleft3sp,
.pellet-ofen .contentboxleft2spsmall {
  border: 5px solid white;
  overflow: hidden;
}
.waermepumpe .contentboxleft2spsmall {
  border: 5px solid white;
  overflow: hidden;
}
.hlur {
  font-size: 1.5em;
  line-height: 1.1em;
  font-weight: 200;
  color: #fff;
  background-color: #c00;
  position: absolute;
  padding: 10px 15px;
  right: 0px;
  bottom: 0px;
}

.hlul {
  font-size: 1.5em;
  line-height: 1.1em;
  font-weight: 200;
  color: #fff;
  background-color: #c00;
  position: absolute;
  padding: 10px 15px;
  left: 0px;
  bottom: 0px;
}

.container-fluid.p-0 #metanav {
  position: relative;
  z-index: 150;
}

/* body-background */
body {
  background: #f0f0f0 url(images/bg.png) left top repeat-x;
}

/* Container Layout */
#container {
  margin: 0 auto;
  position: relative;
  max-width: 980px;
}

/* Header Layout */

#logoarea {
  position: absolute;
  top: 20px;
  z-index: 150;
}
header {
  position: relative;
  height: auto;
}

header img {
  position: absolute;
}
header img:nth-child(2) {
  bottom: 5px;
  left: 50px;
}

#bereiche {
  color: #fff;
  padding-top: 10px;
}

#bereiche li {
  padding-bottom: 5px;
  text-align: right;
  background: url(images/underline.png) bottom right no-repeat;
}
.start-content .hlur-img img:hover,
.start-content .contentboxleft2spsmall:hover img {
  transform: scale(1.1);
  transition: 2s ease-in-out;
}
.start-content .sanitaer-container a:hover img {
  transform: scale(1.1);
  transition: 2s ease-in-out;
}

/* Navigation */
ul {
  margin: 0;
}
.navbar {
  position: relative;
  bottom: 0;
  max-width: 750px;
  font-size: 0.9em;
  border: #333 1px solid;
  background: #3f3f3f;
  background: -moz-linear-gradient(top, #3f3f3f 0%, #000000 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #3f3f3f),
    color-stop(100%, #000000)
  );
  background: -webkit-linear-gradient(top, #3f3f3f 0%, #000000 100%);
  background: -o-linear-gradient(top, #3f3f3f 0%, #000000 100%);
  background: -ms-linear-gradient(top, #3f3f3f 0%, #000000 100%);
  background: linear-gradient(to bottom, #3f3f3f 0%, #000000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f3f3f', endColorstr='#000000', GradientType=0);
}
.navbar-toggler {
  border-color: white !important;
}

.navbar-toggler-icon {
  border-color: white !important;
  filter: invert(100%);
}

.navbar ul {
  padding: 0 5px;
}

.navbar ul li {
  position: relative;
  border-right: #333 1px solid;
}

.navbar ul li a:link,
.navbar ul li a:visited,
.navbar ul li a:active {
  color: #bbb;
  padding: 12px;
}

.navbar ul li a:hover,
.navbar ul li a:focus {
  color: #fff;
}

.navbar ul li ul {
  position: absolute;
  z-index: 100;
  left: -5px;
  padding: 15px;

  background: #000000;
  background: -moz-linear-gradient(top, #000000 0%, #444444 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #000000),
    color-stop(100%, #444444)
  );
  background: -webkit-linear-gradient(top, #000000 0%, #444444 100%);
  background: -o-linear-gradient(top, #000000 0%, #444444 100%);
  background: -ms-linear-gradient(top, #000000 0%, #444444 100%);
  background: linear-gradient(to bottom, #000000 0%, #444444 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#444444', GradientType=0);

  -moz-border-radius: 0 0 8px 8px;
  -webkit-border-radius: 0 0 8px 8px;
  -khtml-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;

  -moz-box-shadow: 5px 5px 16px #999;
  -webkit-box-shadow: 5px 5px 16px #999;
  box-shadow: 5px 5px 16px #999;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');

  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
.nav-item.dropdown .dropdown-toggle.show {
  color: white !important;
}
.navbar ul li ul:hover {
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
  transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
.dropdown-item:hover {
  background: none !important;
}

.navbar ul li > ul {
  display: none;
}

.navbar ul li ul li {
  border: none;
  display: block;
  white-space: nowrap;
}

.navbar ul li ul li a:link,
.navbar ul li ul li a:visited,
.navbar ul li ul li a:active {
  padding: 5px;
}

/* Meta-Navigation */

#metanav ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
}

#metanav ul li a:link,
#metanav ul li a:visited,
#metanav ul li a:active {
  color: #999;
  font-size: 0.7em;
  padding: 5px;
}

#metanav ul li a:hover,
#metanav ul li a:focus {
  color: #fff;
}

/* Content */
#content {
  border-bottom: #f90 1px dotted;
  padding-bottom: 10px;
  line-height: 100%;
}

#content div {
  margin-top: 6px;
}

#content a div {
  outline: transparent;

  transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}

#content a div:hover {
  transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}
.start-content .kontaktfeld p a:hover {
  transform: scale(1.1);
}
.start-content .kontaktfeld p a {
  display: block;
  min-width: 100%;
  text-align: center;
  font-size: 1.2em;
  color: #c00;
}
.start-content .kontaktfeld p {
  font-weight: 400 !important;
}
.start-content #ueberuns div {
  overflow: hidden;
  padding: 20px;
}
.start-content #ueberuns div:first-child {
  flex: 1;
}
.start-content #ueberuns div:last-child {
  align-items: center;
}
.start-content #ueberuns img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.start-content #ueberuns {
  display: flex;
  flex-wrap: wrap;
}
.kontaktfeld {
  background: linear-gradient(
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0.8)
    ),
    url(images/badezimmer_kontakt.jpg);
  background-size: cover;
}
.btn-outline-primary {
  color: #c00;
  border: 2px solid #c00;
}
.btn-outline-primary:hover {
  background-color: #c00;
  color: white;
  border-color: #c00;
}
.background-image-header {
  overflow: hidden;
}
#content a div div:hover {
  outline: none;
}

#content div div {
  margin-top: 0;
}
.grid {
  margin: 0 auto;
}

.grid-item {
  width: 30%; /* Breite pro Item (3 Spalten) */
  margin-bottom: 15px; /* Abstand zwischen den Reihen */
}

.grid-item img {
  width: 100%;
  display: block;
  border-radius: 6px;
}
.filter-item {
  display: none !important; /* ALLE verstecken */
}
.filter-item.show {
  display: block !important; /* Nur wenn "show" aktiv */
}
.grid-sizer,
.grid-item {
  width: 33.333%;
}
.contentboxleft2spsmall {
  position: relative;
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, 0) 100%
  );
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, 0) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 25%,
    rgba(255, 255, 255, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
  width: 320px;
  height: 800px;
  float: left;
}

.contentboxleft2spbig {
  position: relative;
  background-color: #fff;
  width: 654px;
  float: left;
}

.contentboxright2spbig ul {
  padding: 5px 0;
}

.contentboxright2spbig ul li {
  padding: 5px 0;
  margin-left: 20px;
  list-style-type: circle;
  font-size: 0.9em;
}

.contentboxright2spsmall {
  position: relative;
  background-color: #fff;
  width: 320px;
  float: right;
  margin-left: 6px;
}

.contentboxright2spbig {
  position: relative;
  background-color: #fff;
  width: 654px;
  float: right;
  margin-left: 6px;
}

.contentboxleft2spequal {
  position: relative;
  background-color: #fff;
  width: 487px;
  float: left;
}

.contentboxright2spequal {
  position: relative;
  background-color: #fff;
  width: 487px;
  float: right;
  margin-left: 6px;
}
.gasheizung .contentboxtop {
  display: flex;
  flex-wrap: wrap;
}
.gasheizung .contentboxbottom {
  display: flex;
  flex-wrap: wrap;
}
.pellet-ofen .lauftext {
  font-family: "Raleway", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 1em;
  margin: 0;
  padding: 10px;
}

#ueberuns {
  width: 100%;
  height: auto;
  background: white;
  padding: 30px;
}

.contentboxleft3sp {
  position: relative;
  background-color: #fff;
}

.contentboxmiddle3sp {
  position: relative;
  background-color: #fff;
  margin-left: 8px;
}
.sanitaerhaustechnik-main .contentbox-top-left a {
  padding: 4px;
  display: block;
}
.sanitaerhaustechnik-main .contentboxright2spsmall a {
  padding: 4px;
  display: block;
}
.heizungen-main .contentboxleft2spsmall1:hover img {
  transform: scale(1.1);
  transition: 2s ease-in-out;
  overflow: hidden;
}
.sanitaerhaustechnik-main .contentbox-top-left .contentboxleft2spbig {
  min-height: 100%;
}
.heizungen-main .contentboxleft2spsmall2:hover img {
  transform: scale(1.1);
  transition: 2s ease-in-out;
  overflow: hidden;
}
.contentboxright3sp {
  position: relative;
  background-color: #fff;
  margin-left: 8px;
  min-width: 240px;
}
.sanitaerhaustechnik-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.sanitaerhaustechnik-main .contentbox-top-left {
  width: calc(66.6% - 4px);
  float: none;
  gap: 8px;
  display: flex;
  flex-wrap: wrap;
}
.sanitaerhaustechnik-main .contentboxright2spsmall {
  overflow: hidden;
  width: 100%;
}
.sanitaerhaustechnik-main .contentboxleft2spbig {
  height: 100%;
}
.sanitaerhaustechnik-main .contentbox-top-left .contentboxleft2spbig {
  width: 100%;
  display: block;
}
.sanitaerhaustechnik-main .contentboxright2spsmall .hlul {
  background-color: #cc0000;
}
.sanitaerhaustechnik-main .contentboxright2spsmall {
  background-color: unset;
  width: 100%;
}
.sanitaerhaustechnik-main .contentboxright2spsmall div {
  background-color: white;
}
.sanitaerhaustechnik-main .contentboxright2spsmall {
  margin-bottom: 0;
  width: 100%;
}
.sanitaerhaustechnik-main .contentboxright2spsmall {
  width: 100%;
}

.sanitaerhaustechnik-main .contentbox-top-left .contentboxleft2spbig img {
  width: 100%;
}
.sanitaerhaustechnik-main .contentbox-top-left a:hover img {
  transform: scale(1.1);
  transition: 2s ease-in-out;
}
.sanitaerhaustechnik-main .contentboxright2spsmall {
  margin: 0;
}
.sanitaerhaustechnik-main .contentboxright2spsmall {
  width: calc(33.3% - 4px);
  float: none;
}
.sanitaerhaustechnik-main .contentboxleft2spbig {
  overflow: hidden;
}

.heizungen-main .wrapper3sp {
  display: flex;
  justify-content: baseline;
  gap: 8px;
  flex: 1;
}

.heizungen-main .contentbox-top-left .contentboxleft2spsmall1,
.heizungen-main .contentbox-top-left .contentboxleft2spsmall2 {
  overflow: hidden;
}
.heizungen-main .contentboxright2spbig {
  width: 66.6%;
}
.heizungen-main .contentbox-top-left {
  width: calc(33.3% - 4px);
  max-width: 33.3%;
}
.heizungen-main .contentboxleft3sp,
.heizungen-main .contentboxmiddle3sp,
.heizungen-main .contentboxright3sp {
  margin: 0;
}
.heizungen-main .contentbox-top-headline {
  gap: 8px;
  display: flex;
}
.heizungen-main .contentboxleft2spsmall1 img,
.heizungen-main .contentboxleft2spsmall2 img {
  width: 100%;
}
.heizungen-main .contentboxleft3sp img,
.heizungen-main .contentboxmiddle3sp img,
.heizungen-main .contentboxright3sp img {
  object-fit: cover;
  width: 100%;
  height: 219px;
}

.heizungen-main .wrapper3sp a {
  width: 33%;
}

.wrapper3sp {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}

/* Footer */
#footer {
  font-size: 0.7em;
  padding: 20px 0px;
}
.img-row-2 {
  display: flex;
  max-width: 200px;
  margin-top: 10px;
}
.img-row-2 img {
  margin-right: 30px;
}

/* Fachhandelspartner */

#handelspartner a {
  display: inline-block;
  margin: 20px;
  vertical-align: middle;
}

/* Formular */
form span {
  position: relative;
}

input,
textarea {
  padding: 5px;
  border: none;
  background-color: #efefef;
}

input:focus,
textarea:focus {
  border: #c00 1px solid;
  outline: none;
}

textarea {
  resize: none;
}

#submitbutton {
  color: #bbb;
  border: #333 1px solid;

  background: #3f3f3f;
  background: -moz-linear-gradient(top, #3f3f3f 0%, #000000 100%);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #3f3f3f),
    color-stop(100%, #000000)
  );
  background: -webkit-linear-gradient(top, #3f3f3f 0%, #000000 100%);
  background: -o-linear-gradient(top, #3f3f3f 0%, #000000 100%);
  background: -ms-linear-gradient(top, #3f3f3f 0%, #000000 100%);
  background: linear-gradient(to bottom, #3f3f3f 0%, #000000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f3f3f', endColorstr='#000000', GradientType=0);
}

#submitbutton:hover {
  color: #fff;
}