:root {
  --black: #414142;
  --red: #ee1c24;
  --grey: #7a7a7a;
}
.text-black {
	color: var(--black);
}
.text-red {
	color: var(--red);
}
.text-grey {
	color: var(--grey);
}
html, body {
	color: var(--black);
	min-height: 100vh;
	font-family: 'Roboto';
	overflow-x: hidden;
}
.maintypeface {
	font-family: 'Anton';
}
#overlay {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color:rgba(0, 0, 0, 0.8);
	display:none;
	z-index: 100;
}
#header {
	border-bottom:10px solid var(--red);
	z-index: 99;
}
#header_left {
	font-size:2em; 
	color:var(--grey);
	padding-left: 25px;
}
#header_left i:hover {
	color:var(--red);	
}
#header_left i {
	transition: 0.5s;
	cursor: pointer;
}
#header_right {
	font-size:2em; 
	color:var(--grey);
}
#header_right a {
	margin-right: 15px;
	color:var(--grey);
	transition: 0.5s;
}
#header_right a:hover {
	color:var(--red);	
}
#header_center img {
	height: 75%;
}
#menu {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background-color: var(--red);
	color: #000000;
	z-index: 101;	
	font-size: 3em;
	display: none;
	padding-top: 15px;
	padding-left: 15px;
	transition: 0.5s;
}
.menu_item {
	color: #ffffff;
	background-image: linear-gradient(
		to right,
		#ffffff,
		#ffffff 50%,
		#000 50%
		);
	background-size: 200% 100%;
	background-position: -100%;
	padding: 5px 0;
	position: relative;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: all 0.3s ease-in-out;
}

.menu_item:before{
	content: '';
	background: #ffffff;
	display: block;
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 0;
	height: 3px;
	transition: all 0.3s ease-in-out;
}

.menu_item:hover {
	background-position: 0;
}

.menu_item:hover::before{
	width: 100%;
}
.menu_social {
	color: #000000;
	text-decoration: none;
}
.menu_social:hover {
	color: #ffffff;
}
#breadcrumbs {
	color: var(--red);
}
#breadcrumbs a {
	text-decoration: none;
	color: var(--red);
}
#breadcrumbs a:hover {
	color: var(--black);
}
#footer {
	background-color: var(--black);
	color: #ffffff;
}
#footer a {
	color: #ffffff;
	text-decoration: none;
	transition: 0.3s;
}
#footer a:hover {
	color: var(--red);
}
.footer_social {
	font-size: 1.5em;
	margin-right: 20px;
}
.footer-large-link {
	font-family: 'Anton';
	font-size: 2em;
	text-decoration: none;
}
.red-link {
	color: var(--red);
	text-decoration: none;
	transition: 0.3s;
}
.red-link:hover {
	color: var(--black);
}
.black-link {
	color: var(--black) !important;
	text-decoration: none;
	transition: 0.3s;
}
.black-link:hover {
	color: var(--red);
}
.grey-link {
	color: var(--grey);
	text-decoration: none;
	transition: 0.3s;
}
.grey-link:hover {
	color: var(--red);
}
.cta-button {
	text-align: center;
	color: #ffffff;
	background-color: var(--black);
	padding: 12px;
	cursor: pointer;
	transition: 0.3s;
}
.cta-button:hover {
	background-color: var(--red);
}
.bg-grey {
	background-color: #f4f4f4;
}
.details-button {
	margin-top: 10px;
	padding: 8px;
	width: 150px;
	text-align: center;
	border: 2px solid var(--black);
	color: var(--black);
	transition: 0.3s;
}
.details-button:hover {
	border: 2px solid var(--red);
	background-color: var(--red);
	color: #ffffff;
}
/* ribbon */
.ribbon {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: absolute;
  z-index: 50;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #333333;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 10px 0;
  background-color: #666666;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 14px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -53px;
	top: 20px;
  transform: rotate(-45deg);
}
.bw-hover {
	transition: 0.3s;
}
.bw-hover:hover {
	-webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}
.video-container {
    overflow: hidden;
    position: relative;
    width:100%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#home-menu {
	background-color: #ef1c24;
	background-image: url('/storage/assets/images/home-background.png');
	background-position: right top;
	background-repeat: repeat-y;
}
#home-menu a {
	font-family: 'Anton';
	font-size: 2.5em;
	color: #ffffff;
	text-decoration: none;
}
.home-hover {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: center;
	background-color:rgba(0, 0, 0, 0.7);
	color: #ffffff;
	font-size: 2em;
	padding: 10%;
	font-family: 'Anton';
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 4rem;
    height: 4rem;
}
#carouselContainer {
		padding:0px;
	}
@media only screen and (max-width: 768px) {
	#carouselContainer {
		padding-top:25px;
	}
	.home-hover {
		font-size: 1em;
	}
}
