@charset "UTF-8";
/* CSS Document */
/*
Used colors
success green #319616
success green:hover #45c423
upload blue #165b96
upload blue:hover #4297de
failure red #c50000
failure red fill (lighter red) #f3b7b7
common orange #f05323
common grey #202324
Premier Yellow 2022 #ffc42c
Premier Orange 2022 #f05323
Premier Dark Grey 2022 #202324
*/
#site-logo-desktop {
	padding: 20px 0 0 0 !important;
}
/********************** Div in nav area above content? ***********************/
div.content {
	margin-bottom: 0 !important;
}
/********************** Spacers to push content below nav menus ***********************/

div#top-content-spacer-bottom {
	/*background-color: magenta !important;*/
	width: 400px !important;
	height: 180px !important;
	position: relative !important;			
}
@media screen and (max-width: 1087px) {
div#top-content-spacer-bottom {
	/*background-color: cyan !important;*/
	height: 113px !important;
	}
}

/********************** Top 2 added bars Yellow and Orange ***********************/

/*! CSS Used from: https://premier.ca/css/premierCustom.css */
#tempAlertContainer, #tempNoticeContainer {
	background-color: #ffc42c !important;
	color: #202324 !important;
	padding: 2px 14px !important;
}

#tempAlertContainer a {
	color: #202324 !important;
	text-decoration: none !important;
}

p#tempAlertBut, p#tempNotice {
	margin: 2px !important;
	cursor: pointer !important;
}
p#tempNotice {
	margin: 2px !important;
}

@media all and (max-width:768px) {
	#tempAlertContainer, #tempNoticeContainer {
		padding: 2px 10px !important;
	}
}

/* Remembrance Day specific */
#tempNoticeContainer.remembrance {
	background-image: url(https://premierprinting2.ca/infigo_assets/premier/images/css-images/corner_poppies_left.png), url(https://premierprinting2.ca/infigo_assets/premier/images/css-images/corner_poppies_right.png);
	background-position: top left,top right;
	background-size: contain, contain;
	background-color: #c6e6c3 !important;
	background-repeat: no-repeat;
}
p#tempNotice.remembrance {
	text-align: center;
	color: #085000;
	width: 80% !important;
	margin: 2px auto !important;
}
/* When Remembrance Day text wraps to 2 lines and poppy images get larger add more end margins */
@media all and (max-width:666px) {
	p#tempNotice.remembrance {
	width: 340px !important;
	}
}
div#headerTopBar {
/* Safari seemed to be rendering this div @ 37px. Force endorse 42px */
    min-height: 42px !important;
}

section#top-page-bars {
	position: fixed !important;
    top: 0px;
	left: 0px;
    width: 100%;
    display: block;
    z-index: 32 !important;
}
.topMenuItem {
    padding: 5px 20px !important;
	display: flex !important;
    align-items: center !important;
    background-color: #f05323 !important;
}
.topMenuItem a {
    font-size: 16px !important;
    color: white !important;
}
nav.topMenuItem:hover, nav.topMenuItem:hover a {
    background-color: white !important;
	color: #f05323 !important;
}
/* Disable the hover color changes above for the on the currency switcher. First sibling of the bunch */
nav.topMenuItem:first-of-type:hover, nav.topMenuItem:hover:first-of-type:hover a {
    background-color: #f05323 !important;
	color: white !important;
}
/* Orange quick link bar Get Print Quote, Upload File etc. */
.headerColumn {
	display: flex !important;
    justify-content: center !important;
	padding-right: 0 !important;
}



@media screen and (min-width: 1088px) {
.headerColumn {
	/*padding-right: 20% !important;*/
	}
}

/* Add breathing space under main logo and also pushing main nav down */
@media screen and (min-width: 768px) {
.content-field-navbar .top-menu-split {
        border-top: 10px solid #202324 !important;
        border-bottom: 20px solid #202324 !important;
        background-color: #202324 !important;
    }
}
/* Remove the text beside the icons  in top orange bar so line wrapping doesn't expand the bar down */
/* And reduce padding width for small screens */
@media screen and (max-width: 1000px) {
span.icon-text {
	display: none !important;
	}
.topMenuItem {
    padding: 5px 12px !important;
    }
}
/********************** End Top 2 added bars ***********************/

/* Fix main nav holder just below yellow and orange top bar */
section#main-nav-holder {
	background-color: #202324 !important;
	position: fixed !important;
	/* With top Alert or Notice bar */
    top: 80px !important;
	/* Without top Alert or Notice bar. Subtract 40 px from with */
    /*top: 40px !important;*/
	left: 0px;
    width: 100%;
    display: block;
    z-index: 31 !important;
}


div.header-spacer.ict-header-spacer.two-tier-spacer {
	height: 66px !important;
}
/* shrink logo at 1088px width */
img.is-header-logo.is-full-height {
    height: 2em !important;
	padding: 0px 20px !important;
}
/*@media screen and (max-width: 500px) {
    img.is-header-logo.is-full-height {
        padding: 10px 0 0 10px !important;
        }
}*/

/********************** Navigation Customization Start ***********************/

/* keep navbar same height. Override media query changes in factory styles */
.navbar {
   height: 5em !important;
}
@media screen and (min-width: 200px) {
    .navbar-brand {
        height: 5em !important;
		/*padding-top: 8px !important;*/
    }
}
@media screen and (max-width: 768px) {
    .navbar-brand  {
		/*padding-top: 0px !important;*/
	}
}
/* this drops main nav to appropriate x coordinate */
section.navbar.is-fixed-top {
    top: auto !important;
	position: relative !important;
}
/* Main menu block below 1088px */
#logorow .navbar .navbar-brand {
	background-color: #202324 !important;
}


/* Make Main header container tall enough with added customizations */
@media screen and (min-width: 1088px) {
.ict-navbar.two-tier-menu {
    height: 9.2rem;
	}
img.is-header-logo.is-full-height {
    height: 5em !important;
	padding: 0px 0px !important;
	}
}
/* LOGIN button adjustments */
a#login-text {
	font-weight: 500 !important;
	margin-top: 21px !important;
}
a#login-text:hover {
}

/* Top Account area My Account | Basket | Search */

.navbar-item .button {
    height: 3rem !important;
}
/* this drops main nav to appropriate x coordinate */
section.navbar.is-fixed-top {
    top: auto !important;
	position: relative !important;
}
div.navbar-start div.navbar-item a.navbar-link,
a.button.is-small.is-primary {
	font-size: 1rem !important;
}
a.button.is-small.is-primary:hover {
	color:  #f05323 !important;
}
a.button, a.buttons {
	margin: 8px !important;
}
/* Upper menu section */
/* Upper menu section thin top line */
.content-field-navbar .bottom-menu-split {
    border-top: 1px solid #2f3436 !important;
}
section.two-tier-menu .navbar.ict-navbar.is-fixed-top .content-field-navbar {
	background-color: #202324 !important;
	top: auto !important;
}
a.navbar-link, a.navbar-item {
	color: #fff !important;
}
/* Hover states for parent menu as well as single links that don't have a drop down */
a.navbar-link:hover, a.navbar-link:focus, a.navbar-link:focus-within,
a.navbar-item:hover, a.navbar-item:focus, a.navbar-item:focus-within {
	background-color: #f05323 !important;
	/*background-color: cyan !important;*/
	transition: all .3s !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease !important;
    transition-delay: 0s !important;
    transition-property: all !important;
}
/* Only for promo link that doesn't have a drop down to keep it dark grey when clicked on */
a.navbar-link#promo-nav-link:focus {
	background-color: #202324 !important;
}


@media screen and (min-width: 1088px) {
/* this drops main nav to appropriate x coordinate */
    section.navbar.is-fixed-top {
        top: auto !important;
    }
	#logorow .navbar .navbar-item.has-dropdown:focus .navbar-link, #logorow .navbar .navbar-item.has-dropdown:hover .navbar-link, #logorow .navbar .navbar-item.has-dropdown.is-active .navbar-link {
        background-color: #f05323 !important;
        color: #fff !important;
	}
}
/* mobile hamburger menu not full height out of the box. Fix. */
.navbar-burger {
	height: auto !important;
}
/* mobile burger menu are actually spans with a background color */
.navbar-burger span {
	background-color: #fff !important;
}


/* Hover states for parent menu as well as single links that don't have a drop down */
a.navbar-item:hover {
	background-color: #f05323 !important;
}
/* Little arrow beside main nav links */
.content-field-navbar .navbar-link:not(.is-arrowless)::after {
	border-color: #ffc42c !important;
}

/* Lower menu section */
/* Lower menu section thin top line */
.content-field-navbar .bottom-menu-split {
    border-top: 1px solid #2f3436 !important;
	background-color: yellow !important;
	background-color: #202324 !important;
}
.navbar {
	background-color: #202324 !important;
/*	background-color: orange !important;*/
	color: #fff !important;
	font-size: 1.05em;
/*	display: flex !important;
	align-items: center !important;*/
}
/*div.navbar-item {
	background-color: #202324 !important;
	color: #fff !important;
}*/
/* reduce height. Default was 3.5rem */
.content-field-navbar .bottom-menu-split .navbar {
    height: 50px !important;
}
div.bottom-menu-split div.container {
	background-color: #202324 !important;

}
.navbar-divider {
    /*background-color: magenta !important;*/
    background-color: #2f3436 !important;
    border: 0 !important; 
    height: 1px !important; 
    margin: 0 !important; 
}

/* MOBILE Color first link in drop down menus different (the ABOUT pages) */
/*div.navbar-item a.navbar-item {
	color: #ffc42c !important;
	}*/

div.navbar-item a.navbar-item:hover {
	background-color: #f05323 !important;
	color: #fff !important;
	}
/*div.navbar-dropdown a.navbar-item:first-child:hover {
	background-color: #f05323 !important;
	color: #fff !important;
	}*/

/* DESKTOP Color first link in drop down menus different (the ABOUT pages) */
/* Lower menu section Drop Down Menus */
@media screen and (min-width: 1088px) {
.navbar-dropdown {
    border-top: 1px solid #202324 !important;
    font-size: 1rem !important;
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	background-color: #2f3436 !important;
	/*display: block !important;*/
	}
a.navbar-item {
	border-top: 1px solid #202324 !important;
	padding-top: 10px !important;
	padding-bottom: 14px !important;
	}
a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
    background-color: #f05323 !important;
    color: #ffffff !important;
	transition: all .3s !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease !important;
    transition-delay: 0s !important;
    transition-property: all !important;
	}
div.navbar-dropdown a.navbar-item:hover {
    background-color: #f05323 !important;
	background-color: #ffc42c !important;
	color: #000 !important;
	transition: all .3s !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease !important;
    transition-delay: 0s !important;
    transition-property: all !important;
	}
/* Color first link in drop down menus different (the ABOUT pages) */
div.navbar-dropdown a.navbar-item:last-child {
	background-color: #202324 !important;
	color: #ffc42c !important;
	}
div.navbar-dropdown a.navbar-item:last-child:hover {
	background-color: #f05323 !important;
	color: #fff !important;
	}
}
/*	Center search form in roll down container */
.nav-search-container .search-box {
    display: flex !important;
    align-items: center !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

/*	Correct position of search slide down after header modifications */
/*	slide search bar down by this amount when magnifying glass is clicked  */
.nav-search-container.is-active {
    /* With top Alert or Notice bar */
    transform: translatey(184px) !important;
    /* Without top Alert or Notice bar. Subtract 40 px from with */
    /*transform: translatey(144px) !important;*/
    
}
@media screen and (max-width: 1088px) {
.nav-search-container.two-tier-search.is-active {
    transform: translatey(134px) !important;
	}
}

div.nav-search-container {
	/* With top Alert or Notice bar */
	top: 55px !important;
	/* Without top Alert or Notice bar. Subtract 40 px from with */
	/*top: 15px !important;
	background-color: lime !important;*/
}
@media screen and (max-width: 1087px) {
/*	Correct position of search pop down after header modifications */
div.nav-search-container {
	top: 32px !important;
/*	background-color: lime !important;*/
	}
}
@media screen and (max-width: 730px) {
/*	Correct position of search pop down after header modifications */
div.nav-search-container {
	top: 32px !important;
/*	background-color: lime !important; */
	}
}
@media screen and (min-width: 768px), print {
    .container-special, .catfish-container, .container {
        padding-left: px !important; 
    }
}
/********************** To move main nav down when optional announcement bar wraps to 2 lines of text ***********************/
/********************** the max-width value will depend on at what width the text wraps to the second line  ***********************/
@media screen and (max-width: 635px) {
section#main-nav-holder {
    top: 98px !important;
	}
.nav-search-container.two-tier-search.is-active {
    transform: translatey(148px) !important;
	}
div.generalPageWrapper.layout--columnOne {
	 margin-top: 188px !important;
	}
}
/********************** End 2 line text wrap of optional announcement bar ***********************/

/********************** Navigation Customization End ***********************/


/********************** Custom Currency converter ***********************/
div.currency-selector {
	font-size: .8rem !important;
	background-color: transparent !important;
    /* No DEFAULT flag image in order to avoid flash glimpse of CA flag when USD is selected. Flags set with javascript in PCA-custom.js */
	/*background-image: url(https://premierprinting2.ca/infigo_assets/premier/images/css-images/CAD-currency-40px.png);*/
	background-position: 6px center !important;
	background-repeat: no-repeat !important;
	background-size: 24px 24px !important;
	padding: 4px 10px 4px 40px !important; 
}
select#customerCurrency.catfish-select, select#customerCurrency.catfish-select.correct {
    border: 0 !important;
  	height: auto !important;
    padding: 4px !important;
    background-color:  #FFF !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
}
/********************** Custom Currency converter ***********************/


/********************** Expanding Mobile drop down menu ***********************/

/*  This makes the whole width of the main nav clickable to spin the chevon to open sub nav otherwise you need to click the chevron specifically */
.ict-navbar span.mobile-dropdown-toggle {
    width: 100% !important;
    cursor: pointer !important;
}

@media screen and (max-width: 1087px) {

div.navbar-item a.navbar-item:hover {
	background-color: #ffc42c !important;
	color: #000 !important;
	}
	div.navbar-item a.navbar-item:last-child {
	color: #ffc42c !important;
	background-color: #202324 !important;
	}
.navbar-menu {
	background-color: #2f3436 !important;
	}
/*  Indent sub menu links */
div.navbar-dropdown {
	padding-left: 12px !important;
	}
/*  Yellow hover on mobile sub menu links */
div.navbar-dropdown a.navbar-item:hover {
/*	background-color: #ffc42c !important;
	color: #000 !important;*/
	padding-left: 36px !important;
	transition: all .3s !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease !important;
    transition-delay: 0s !important;
    transition-property: all !important;
	}
div.navbar-dropdown a.navbar-item:last-child:hover {
	background-color: #f05323 !important;
	color: #FFF !important;
	}
/*  Orange hover over hamburger menu */
a.navbar-burger.burger:hover {
    background-color: #f05323 !important;
	transition: all .3s !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease !important;
    transition-delay: 0s !important;
    transition-property: all !important;
	}
}

/********************** End of Expanding Mobile drop down menu ***********************/


/* START CHRISTMAS BREAK ANNOUNCEMENT STYLES */
#xmasAnnouncement {
	/* Christmas Holly */
	background-image: 
		url(https://premierprinting2.ca/infigo_assets/premier/images/css-images/corner_holly_left.png),
		url(https://premierprinting2.ca/infigo_assets/premier/images/css-images/corner_holly_right.png);
	background-position: 
		4% center,
		96% center;	
	background-repeat: no-repeat;	
	background-color: #b2e291;
	color: #2b4f12;
	text-align: center;
}
#xmasAnnouncement h4 {
	color: #2b4f12;
	text-decoration: none;
	padding: 10px;
	font-size: 16px;
	margin: 0;
}
/* END CHRISTMAS BREAK ANNOUNCEMENT STYLES */

@keyframes moveTruck {
      0% {
        background-position: 4% 50%; /* Start at the left edge (0% horizontal, 50% vertical) */
      }
      100% {
        background-position: 96% 50%; /* End at the right edge (100% horizontal, 50% vertical) */
      }
}
/*
START GENERIC ANNOUNCEMENT STYLES 
Note: Also make changes on systemPages.css
*/
#genericAnnouncement {
	/* Christmas Holly */
	background-image: 
		url(https://premierprinting2.ca/infigo_assets/premier/images/css-images/delivery-truck.png);
    background-size: 80px 60px;
	background-position: 
		4% center,
		96% center;	
	background-repeat: no-repeat;
    /*Animate shipping truck graphic*/
    animation: moveTruck 10s ease-in-out forwards;    /* forwards prevents the animation from reseting to the start point */
	background-color: #ffc42c;
	color: #202324;
	text-align: center;
}

#genericAnnouncement h2 {
	color: #2b4f12;
	text-decoration: none;
	padding: 10px;
	font-size: 16px;
	margin: 0;
}
@media screen and (max-width: 800px) {
#genericAnnouncement h2 {
	font-size: 14px !important;
    /* Take up the extra 2px font size with adding to padding */
    padding: 12px 10px;
    }
}
/* Generic message pop up box */
div#genericMessage {
    margin: auto;
    text-align: center;
    width: 100%;
    padding: 80px;
    background-color: #ffc42c;
}
#deminimusMessage {
    color: #202324;
    text-align: left;
}
/* END GENERIC ANNOUNCEMENT STYLES */

/*select#customerCurrency.catfish-select.correct {
all: revert;
padding: 0 !important;
background-color: transparent !important;
}*/