/* Colors */

:root {
  --primary: #000;
  --secondary: #000;
  --secondary-hover: #f7ff14;
  --third: #d9d9d9;
  --third-hover: #b8afa5;
  --input-fields: #f3f3f3;
  --primaryBtn: #f7ff14;
  --primaryBtn-hover: #000;
  --secondaryBtn: #000;
  --secondaryBtn-hover: #f7ff14;
  --tableHighlight: #f3f3f3;
  --headings-font-family: "Opel Next", Arial, sans-serif;
  --text-font-family: "Opel Next", Tahoma, sans-serif;
}


/* Fonts */

@font-face {
font-family: 'Opel Next';
src: url('../font/Opel-Next-Light.woff2') format('woff2');
font-weight: 400;
font-style: normal;

}


@font-face {
  font-family: 'Opel Next';
  src: url('../font/Opel-Next-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;

}


@font-face {
  font-family: 'Opel Next';
  src: url('../font/Opel-Next-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;

}

@font-face {
  font-family: 'Opel Icons';
  src: url('../font/icons-opel.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;

}

@font-face {
font-family: "iconfont";
src: url("../font/iconfont.woff") format("woff");
font-weight: normal;
font-style: normal;
}

/* Style */

.brand{
  height: 40px;
}

#menu{
  border-bottom: 1px solid #ccc;
}

#menu .topmenu div button::after, #menu .topmenu div a::after {
  font-size: 24px;
  font-family: 'Opel Icons';
}

#menu .gray img{
  display:none
}

#menu .topmenu .testdrivebutton #testdrive::after {
  content: "";
}

#menu .topmenu .testdrivebutton #askoffer::after {
  content: "";
}

#menu .topmenu .testdrivebutton .gray::after {
  content: "";
}

#menu .topmenu .servicebtn #service::after, #menu .topmenu .servicebtn #service2::after {
  content: "";
}

.topmenu #service2, #menu .topmenu div a:hover{
  text-decoration: none;
}

.right p, .thirdwidest p {
  font-size: 1.1rem;
}

.headercontent {
  background: #f9f9f9 !important;
}

#rightmenu li a{
  background: rgba(0,0,0,.5);
}

#rightmenu #conf {
  margin: 0 -6px -5px -6px;
}

#menu ul li{
  display:flex;
  align-items: center;
}

#menu ul li a, #menu ul li button, .left ul li a, .leftmenu ul li a, .front-cta .link {
  color: var(--primary);
  background-color: transparent;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0.375rem 0.5rem;
}

#menu ul li a::after, #menu ul li button::after, .left ul li a:not(.news-list ul li a):after, .leftmenu ul li a:after, .front-cta .link::after{
  content: '';
  position: absolute;
  top: 0;
  z-index: 1;
  width: 136%;
  height: 100%;
  background-color: #f7ff14;
  -webkit-transform-origin: 200% 0;
  transform-origin: 200% 0;
  left: 0;
  -webkit-transform: skew(-23deg) translateX(-101%);
  transform: skew(-23deg) translateX(-101%);
  transition: transform .55s cubic-bezier(0,.545,.19,1);
  overflow: hidden;
}

#menu ul li a:hover::after, #menu ul li button:hover::after, .left ul li a:hover::after, .leftmenu ul li a:hover::after, .front-cta .link:hover::after{
      -webkit-transform: skew(-23deg) translateX(0);
      transform: skew(-23deg) translateX(0);
      transition: transform .55s cubic-bezier(0,.545,.19,1);
}

#menu ul li a span, #menu ul li button span, .left ul li a span, .leftmenu ul li a span, .front-cta .link span{
  position: relative;
  z-index: 2;
}


#menu ul .sel a {
  font-weight:700;
}


.prettybutton{
  border: 1px solid #000;
  background-color: transparent !important;
  padding: 0.875rem 2.9375rem;
  color: #000 !important;
  font-weight:700;
}

.prettybutton:hover{
  border-color: #f7ff14;
  background: #f7ff14 !important;
  color: #000;
}


.models2 .onemodel{
  border: 1px solid #ccc;
}

.models2 .onemodel:hover {
  background: #fdfdfd;
  border: 1px solid #f7ff14;
  cursor: pointer;
}

.models2 .model-info{
  padding:8px
}

.models2 .onemodel{
  text-align: left;
}

.models2 .onemodel img{
  transition: transform .5s ease;
}

.models2 .onemodel:hover .model-info img{
  transform:scale(1.07);
}



#footer {
  background: #000;
}