/* General styles changes */
header {
	background-color:#000000;
}

.siteHeader .eventLogo { 
	height:20px;
}


.navOpen.navClose .navToggle,
.navToggle,
.navBg,
.pageMask,
div.overlay.alert .header, div.overlay.alert .content   {
	background-color:#000000;

}


.siteMain,
.pgGeneral .pageContent,
.pgLogIn .siteMain  {
	background-image:none;
	background-color:#000000;
	margin-bottom:0;
	padding-bottom:0px;
}

.pageContent.bgLight {
	background-color:#ffffff;
}

.pgLogIn .intro,
.photoBoothInstructions,
.tableGeneral th  {
	background-color:#cc0000;
}

.pageTitle {
	background-color:#ffffff;
}
.pageTitle .fs-title1 {
	color:#000000;
}




/* link, button colors */
a,
ul.accordion .toggle {
    color:#c4a762;
}

.no-touch a:hover, 
.no-touch a:focus, 
a:active {
    color:#d2b369;
}

/* buttons */
.button {
	color:#ffffff;
    background-color:#cc0000;
}

.no-touch .button:hover, 
.no-touch .button:focus, 
.button:active {
	color:#ffffff;
	background-color:#9e0c13;
}



/* nav card links */
.no-touch .cardLinks  li a:hover,
.no-touch .cardLinks  li a:focus,
.cardLinks  li a:active, 
.no-touch ul.cardLinks.nav a:hover,
.no-touch ul.cardLinks.nav a:focus,
ul.cardLinks.nav a:active {
	background-color:#cc0000;
}


/* on light background link color */
.bgLight a,
.bgLight ul.accordion .toggle {
    color:#6a5a34;
}

.no-touch .bgLight a:hover, 
.no-touch .bgLight a:focus, 
.bgLight a:active,
.no-touch .bgLight ul.accordion .toggle:hover, 
.no-touch .bgLight ul.accordion .toggle:focus, 
.bgLight ul.accordion .toggle:active, 
.no-touch .bgLight ul.accordion .toggle:hover::after, 
.no-touch .bgLight ul.accordion .toggle:focus::after, 
.bgLight ul.accordion .toggle:active::after {
    color:#857142;
}

.bgLight ul.accordion .toggle::after {
    color:#857142;
}



/* overlay buttons */
.no-touch .scrollNavContainer button:hover, 
.no-touch .scrollNavContainer button:focus, 
.scrollNavContainer button:active,

.no-touch .fancybox-navigation button:hover div,
.no-touch .fancybox-navigation button:focus div,
.fancybox-navigation button:active div,
.fancybox-navigation button.touch div  {
	background-color:#cc0000;
}

 


/* footer  */
.siteFooter {
	border:0px;
}

div.auxLinks {
	border-color:rgba(255,255,255,0.25);
}

/* footer link colors */
nav ul.textLinks a,
nav ul.textLinks button {
	color:#ffffff;
}

/* icon white */
nav .navLogOut button::before,
nav .socialLinks a:before {
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(45deg) brightness(108%) contrast(102%);
}



ul.textLinks a,
ul.textLinks button {
	color:#000000;
}



.no-touch ul.textLinks a:hover,
.no-touch ul.textLinks a:focus,
ul.textLinks a:active,
.no-touch ul.textLinks button:hover,
.no-touch ul.textLinks button:focus,
ul.textLinks button:active {
	color:#cc0000;
}


/* banner links color */
.bannerVert ul.links li a, 
.bannerVert ul.links li button {
	background-color:#eeeeee;
	color:#000000;
}

.no-touch .bannerVert ul.links li a:hover, 
.no-touch .bannerVert ul.links li a:focus, 
.bannerVert ul.links li a:active, 
.no-touch .bannerVert ul.links li button:hover, 
.no-touch .bannerVert ul.links li button:focus, 
.bannerVert ul.links li button:active {
	background-color:#000000;
	color:#ffffff;
}





/* icon hover filter */
.no-touch .overlayClose:hover:before,  
.no-touch .overlayClose:focus:before,
.overlayClose:active:before,
.no-touch .chatClose:hover:before,  
.no-touch .chatClose:focus:before,
.chatClose:active:before,
.no-touch .navLogOut button:hover:before,
.no-touch .navLogOut button:focus:before,
.navLogOut button:active:before, 
.no-touch .socialLinks a:hover:before, 
.no-touch .socialLinks a:focus:before,
.socialLinks a:active:before,

.no-touch .fancybox-toolbar .fancybox-button:hover img, 
.no-touch .fancybox-toolbar  .fancybox-button:focus img,
.fancybox-toolbar .fancybox-button:active img   {
	filter: brightness(0) saturate(100%) invert(11%) sepia(82%) saturate(6622%) hue-rotate(2deg) brightness(85%) contrast(113%);;
}


/* nav toggle */
.navToggle .top, .navToggle .middle1, .navToggle .middle2, .navToggle .bottom {
	background-color:#ffffff;
}

.no-touch .navToggle:hover span, .no-touch .navToggle:focus span, .navToggle:active span {
	background-color:#cc0000;
}



/* nav */
nav, nav b {
	color:#ffffff;
}


body.navOpen { 
	border-color:#616c68;
}


ul.cardLinks.nav .navGallery .image::after {
	background-image: url(../images/shell/icon-honda.svg);
  }




  /* login */
  .pgLogIn .siteMain .eventLogo {
	  max-width:200px;
  }





/* honda  home */
.pgHome .siteMain .cardLinks.nav {
	margin-bottom:40px;
}
.pgHome .pageContent {
	overflow:hidden;
}


/* banner */
.pgHome .bannerVert .header {
	background-color:#cc0000;
}
.pgHome .bannerVert .contentContainer {
	background-color:#cc0000;
}

.pgHome .videoScreen {
    top:70px;
    -webkit-box-shadow: 0px 3px 1px 1px rgba(0,0,0,0.25);  
    -moz-box-shadow:    0px 3px 1px 1px rgba(0,0,0,0.25);
    box-shadow:         0px 3px 1px 1px rgba(0,0,0,0.25);
}	



/* gallery */
.pgGallery .artworks .honda img {
	z-index: 1;
	position: absolute;
	height:auto;
	width:750px;
	top:120px;
}






/* CHAT TOGGLE COLOR OVERRIDE */
.chch-mobileChatweeWindowSwitch.chch-16-3,
.chch-fixedChatweeWindowSwitchCircle.chch-14-3 {
	background-color:#cc0000 !important;
}


/* ------------------------------------- BREAKPOINT ---------------------------------- */
@media screen and (min-width:500px) {
	.siteHeader .eventLogo {
		height:20px;
	}
}


/* ------------------------------------- BREAKPOINT ---------------------------------- */
@media screen and (min-width:760px) {
	.pgHome .bannerVert ul.links {
		text-align:center;
	}
}

/* ------------------------------------- BREAKPOINT ---------------------------------- */
@media screen and (min-width:1000px) {
	/* honda */
	.pgHome .videoScreen {
		top: calc(47% - 180px);
	}

	.pgHome .bannerVert .contentContainer {
		background:#cc0000;
	
		background: linear-gradient(180deg, rgba(204,0,0,1) 30%, rgba(158,12,19,1) 100%);
	
	}



	/* gallery */
	.pgGallery .artworks .honda img {
		width:1150px;
		top:180px;
	}





}





/* ------------------------------------- BREAKPOINT ---------------------------------- */
@media screen and (min-width:1400px) {


	/* honda */
	.pgHome  .videoScreen {
		top: calc(47% - 220px);
	}

}