html,
body {
	scroll-behavior: smooth !important;
}

@font-face {
font-family: "WingfootSans";
src: url("../font/WingfootSans.ttf");
}

@font-face {
font-family: "TradeGothic";
src: url("../font/Trade_Gothic_LT_Bold_Oblique.ttf");
}
.pointer {
	cursor: pointer;
}
.heading-alt {
	font-family: "WingfootSans";
}
.heading-alt-sub {
	font-family: "TradeGothic";
}


:target:before {
	display: block;
	height: 90px;
	/* fixed header height*/
	margin: -90px 0 0;
	/* negative fixed header height */
}

.navbar {
	padding-top: 0px;
	padding-bottom: 0px;
}
.color-yellow {
  color: gold;
}

.card-header {
	text-align: center;
	font-weight: bold;
	color: gold;
}

.card>.tyres {
	height: 202px;
	width: 150px;
}

.anchor {
	display: block;
	position: relative;
	top: -50px;
	visibility: hidden;
}

.tested-panel>p img {
	max-height: 151px;
	border-radius: 10px;
}

.categories>img {
	max-height: 49px;
}

.product-page {
  background-color: black;
	color: white;
}

.product-row {
	height: 300px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.header-title>h1 {
	color: white;
	font-weight: bold;
	font-style: italic;
}

.header-title>span:last-child {
	border-top: 2px solid gold;
	padding-top: 5px;
}

.carousel-row {
	background-color: black;
}
.carousel-title {
	margin-top: 20px;
}
.carousel-title>h2 {
	color: gold;
	font-weight: bold;
}

.road-tyre {
	width: 100%;
	height: 150px;
	margin-top: -100px;
}

.custom-card .header {
	background-color: #17498F;
  margin: 5px 10px 0px 10px;
  padding: 10px 10px;
}
.custom-card .header > p {
  font-weight: bold;
  font-style: italic;
	margin-bottom: 0px;
}
.custom-card .header p > img {
	width: 25px;
	height: 25px;
	margin-right: 5px;
}

.custom-card .body {
  background: linear-gradient(to bottom, #1e7ae8 0%, #17498f 100%);
  margin: 0px 10px 15px 10px;
  padding: 5px 10px;
}
.custom-card .body .body-title {
  color: gold;
  font-weight: bold;
  border-bottom: 1px solid;
  padding-bottom: 5px;
}

.tyre-sizes table {
  text-align: left;
    text-indent: 35px;
}

tr.color-yellow {
    text-indent: 140px;
}

tr .color-yellow td {
  color: gold;
}

.tyre-sizes th {
  background-color: #808080;
  color: gold;
}

th {
    text-align-last: center;
}

.bottom-banner {
  padding: 20px 30px;
  text-align: center;
  color: gold;
  font-size: 14px;
  background-color: #17498F;
  margin: 0px 15px;
}

.tyres-carousel img {
	height: 400px;
	width: auto !important;
	margin: 0 auto;
}

@media (max-height: 767px) {
	.tyres-carousel img {
		height: 350px;
		width: auto !important;
		margin: 0 auto;
	}
}

.owl-theme .owl-dots .owl-dot.active span {
	background-color: gold !important;
}

@media (max-height: 767px) {
	.card-img-top {
		width: 100%;
		height: auto;
	}
}

.news {
	width: 320px;
  height: 190px;
	border: 1px solid blue;
}

.news-single {
	background-color: black;
	color: white;
}
.news-single > img {
	height: 500px;
  width: 840px;
	display: block;
	margin: 0 auto;
}
.golden-hr {
	border-top: 2px solid gold;
}
.golden-dotted {
	border-top: 2px dotted gold;
}

.centered {
	display: block;
	margin: 0 auto;
}

.quotes {
	font-style: italic;
	font-weight: bold;
	color: gold;
	text-align: center;
}

.custom-tabs {
	border-bottom: 2px solid gold;
	margin-bottom: 20px;
	padding-bottom: 15px;
}

.video-header {
	z-index: -1;
}


.disabled {
	opacity: 0.5;
}

.welcome-banner {
  display: block;
  margin: 0 auto;
  width: auto;
  height:440px;
}
@media(max-width: 992px) {
  .welcome-banner {
    height: 40vh;
  }
}
.video-container {
  position: relative;
  background-color: black;
  height: 440px;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.title-container {
  position: absolute;
  left: 10%;
  top: 0px;
  width: 800px;
  z-index: 2;
}


.video-container .container {
  position: relative;
  z-index: 2;
}

.video-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (max-width: 992px) {
  .video-container {
    height: 50vh;
  }
}

@media (max-width: 413px) {
	.hide-on-xs {
		display: none;
	}
	.adjust-on-xs {
		padding: 20px 0px;
	}
}

.justify-content-center-hide-on-mobile {
  justify-content: center;
}

@media(max-width: 992px) {
	.justify-content-center-hide-on-mobile {
		justify-content: left;
	}
}

/* DROPDOWN BUTTON */
.dropbtn {
	margin-right: 10px;
	margin-left: 10px;
}
.dropdown {
	margin-top: 8px;
  position: relative;
  display: inline-block;
}

.dropdown-content {
	margin-top: 10px;
  display: none;
  position: absolute;
  background-color: #00356E;
  min-width: 250px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
	background-color: gold;
	color: #00356E !important;
}

.dropdown:hover .dropdown-content {display: block;}

.visible-on-mobile {
	display: none;
}

@media(max-width: 992px) {
	.dropdown {
		display: none;
	}
	/* .dropbtn {
		margin-left: 0px;
	}
	.dropdown {
		margin-bottom: 8px;
	}
	.dropdown-content {
		width: auto;
		background-color: gold;
	}
	.dropdown-content a {
			color: #00356E !important;
	} */
	.visible-on-mobile {
		display: block;
	}
}

.contact-us .form-control {
	background-color: transparent;
	border-color: #00356E;
	color: white;
}
.contact-us input[type=text],.contact-us input[type=number], .contact-us select {
	color: white;
	margin-bottom: 5px;
}
.contact-us .form-control:active, .contact-us .form-control:focus {
	background-color: #00356E;
	border-color: white;
	color: white;
}
.contact-us label {
	text-transform: uppercase;
	border-bottom: 1px solid gold;
}

.contact-us ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #bbb1b1 !important;
  opacity: 1; /* Firefox */
}

.contact-us :-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #bbb1b1 !important;
}

.contact-us ::-ms-input-placeholder { /* Microsoft Edge */
	color: #bbb1b1 !important;
}