@charset "UTF-8";
/* CSS Document */

.notice-container {
	color: #202324;
    /*padding: 12px; Not required with grid / place-items: center */
	text-align: center;
    border-bottom: 2px solid #202324;
    height: 60px;
    display: grid;
    place-items: center;   /* Centers vertically and horizontally */
    position: relative !important; /* position relative in order to apply z-index */
    z-index: 1010; /*same z-index as div#top-orange-strip, higher than search bar */
}

a .notice-container h4, .notice-container h4 {
	text-decoration: none;
	font-size: 18px;
    text-transform: uppercase;
	margin: 0;
    color: #202324;
    letter-spacing: 2px;
    line-height: 1.4rem;
}


/* Shipments bar with animated truck */
#shipments {
	background-image: url(https://assets.premier.ca/images/css-images/delivery-truck.png);
    background-size: 80px 60px;
	background-position: 50% 50%;	
	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;
	text-align: center;
}
/* shipping message pop up box */
div#shipping-message-box {
    margin: auto;
    text-align: center;
    width: 100%;
    padding: 80px;
    background-color: #ffc42c;
}
#shipping-message {
    color: #202324;
    text-align: left;
}

/* Louis Riel Day */
#louis-riel-bar {
	background-image: url(https://assets.premier.ca/images/seasonal/louis-riel.png), url(https://assets.premier.ca/images/seasonal/louis-riel.png);
	background-position: 
		4% top,
		96% top;	
	background-size: contain, contain;
	background-color: #fdedd3 !important;
	background-repeat: no-repeat;
}
h4#louis-riel-message {
	text-align: center;
	color: #3b3130;
	margin: 0 90px;
}
/* Restrict width of text message when window gets smaller */
@media all and (max-width: 558px) {
	h4#louis-riel-message {
	max-width: 400px !important;
    margin: 0 10px 0 120px;
    text-align: left;
	}
    #louis-riel-bar {
    /*Make right/second background graphic disappear with 1000px*/
	background-position: 
		4% top,
		96% 1000px;	
    }
}
/* Good Friday */
#good-friday-bar {
	background-image: url(https://assets.premier.ca/images/seasonal/rabbit-left.png), url(https://assets.premier.ca/images/seasonal/rabbit-right.png);
	background-position: 
		4% -10px,
		96% -62px;	
	background-size: 60px, 90px;
	background-color: #652d81 !important;
	background-repeat: no-repeat;
}
h4#good-friday-message {
	text-align: center;
	color: #beff84;
	margin: 0 120px;
}
/* Restrict width of text message when window gets smaller */
@media all and (max-width: 558px) {
	h4#good-friday-message {
        max-width: 400px !important;
        margin: 0 10px 0 120px;
        text-align: left;
	}
    #good-friday-bar {
        background-image: url(https://assets.premier.ca/images/seasonal/rabbit-left.png), url(https://assets.premier.ca/images/seasonal/rabbit-right.png);
        /*Make right/second background graphic disappear with 1000px*/
        background-position: 
            4% -60px,
            96% 1000px;	
        background-size: 90px, 90px;
    }
}

/* Victoria Day */
#victoria-day-bar {
	background-image: url("https://assets.premier.ca/images/seasonal/victoria-day-left.jpg"), url("https://assets.premier.ca/images/seasonal/victoria-day-right.jpg");
	background-position: 
		left -30px top,
		right -30px top;	
	background-size: contain, contain;
	background-color: #36685d;
	background-repeat: no-repeat;
}
h4#victoria-day-message {
	text-align: center;
	color: #fef9d7;
	color: #fff;
	margin: 0 180px;
}
/* Restrict width of text message when window gets smaller */
@media all and (max-width: 780px) {
	h4#victoria-day-message {
    margin: 0 80px;
	}
#victoria-day-bar {
	background-image: url("https://assets.premier.ca/images/seasonal/victoria-day-left.jpg"), url("https://assets.premier.ca/images/seasonal/victoria-day-right.jpg");
	background-position: 
		left -120px top,
		right -120px top;
    }
}

/* Canada Day */
#canada-day-bar {
	background-color: #d10200;
	background: url("https://assets.premier.ca/images/seasonal/canada-day-badge.png"), url("https://assets.premier.ca/images/seasonal/corner-flag.png"), linear-gradient(to bottom, #d10200, #8a0100);
	background-position: 
		left 20px top -40px,
		right center,
        center;
	background-size: 140px, 30%, cover;
	background-repeat: no-repeat;
}
h4#canada-day-message {
	text-align: center;
	color: #202324;
	color: #FFF;
	margin: 0 140px;
}
/* Restrict width of text message when window gets smaller */
@media all and (max-width: 780px) {
	h4#canada-day-message {
        margin: 0 10px 0 160px;
        text-align: left;
	}
    #canada-day-bar {
    /*Make right/second background graphic disappear with 1000px*/
	background-position: 
		left 10px top -25px,
		right -1000px top,
        center;
    background-size: 110px, 30%, cover;
    }
}

/* Terry Fox Day */
#terry-fox-bar {
	background-image: url("https://assets.premier.ca/images/seasonal/terry-fox-logo.png"), url("https://assets.premier.ca/images/seasonal/terry-fox-statue.png");
	background-position: 
		20px -4px,
		right 50px top;	
	background-size: 80px, 8%;
	background-color: #202324 !important;
	background-repeat: no-repeat;
}
h4#terry-fox-message {
	text-align: center;
	color: #ff5a5a;
	margin: 0 120px;
}
/* Restrict width of text message when window gets smaller */
@media all and (max-width: 780px) {
	h4#terry-fox-message {
		margin: 0 10px 0 120px;
        text-align: left;
	}
    #terry-fox-bar {
    /*Make right/second background graphic disappear with 1000px*/
    background-position: 10px -4px, right 1000px;
    }
}

/* Labour Day */
#labour-day-bar {
	background: linear-gradient(to top, #e680ca, #8a0100);
}
h4#labour-day-message {
	text-align: center;
	color: #fff;
    margin: 0;
}

/* Truth and Reconciliation Day */
#TandR-bar {
	background-image: url(https://assets.premier.ca/images/seasonal/every-child-matters-orange.png), url(https://assets.premier.ca/images/seasonal/every-child-matters-orange.png);
	background-position: 
		4% top,
		96% top;	
	background-size: 80px, 80px;
	background-color: #ffe4d1 !important;
	background-repeat: no-repeat;
}
h4#TandR-message {
	text-align: center;
	color: #9f4000;
	margin: 0 130px;
}
/* When Remembrance Day text wraps to 2 lines and poppy images get larger add more end margins */
@media all and (max-width:740px) {
#TandR-bar {
    /*Make right/second background graphic disappear with 1000px*/
	background-position: 
		4% top,
		96% 1000px;	
}
	h4#TandR-message {
        text-align: left;
		margin: 0 10px 0 120px;
	}
}


/* Thanksgiving */
#thanksgiving-bar {
	background-image: url(https://assets.premier.ca/images/seasonal/thanksgiving-2026-left.png), url(https://assets.premier.ca/images/seasonal/thanksgiving-2026-right.png);
	background-position: bottom left, bottom right;
	background-size: contain, contain;
	background-color: #4E2500 !important;
	background-repeat: no-repeat;
}
h4#thanksgiving-message {
	text-align: center;
	color: #FFF;
	width: 80% !important;
	margin: 0 auto !important;
}
/* When Remembrance Day text wraps to 2 lines and poppy images get larger add more end margins */
@media all and (max-width:720px) {
	h4#thanksgiving-message {
	    max-width: 240px !important;
        text-align: right;
		margin: 0 10px 0 210px !important;
	}
    #thanksgiving-bar {
        background-position: bottom left, 1000px 1000px;
        background-size: contain, 100px;
    }
}



/* Remembrance Day */
#remembrance-bar {
	background-image: url(https://assets.premier.ca/images/seasonal/corner-poppies-left.png), url(https://assets.premier.ca/images/seasonal/corner-poppies-right.png);
	background-position: bottom left, bottom right;
	background-size: 100px, 100px;
	background-color: #bde6ed !important;
	background-repeat: no-repeat;
}
h4#remembrance-message {
	text-align: center;
	color: #00415c;
	width: 80% !important;
	margin: 0 auto !important;
}
/* When Remembrance Day text wraps to 2 lines and poppy images get larger add more end margins */
@media all and (max-width:660px) {
	h4#remembrance-message {
	max-width: 300px !important;
	}
}

/* Christmas */
div#xmas{
	background-image: 
		url(https://assets.premier.ca/images/seasonal/corner-holly-left.png),
		url(https://assets.premier.ca/images/seasonal/corner-holly-right.png);
	background-position: 
		4% center,
		96% center;
    background-size: 140px, 140px;
	background-repeat: no-repeat;	
	background-color: #b2e291;
	color: #2b4f12;
	text-align: center;
}
div#xmas h4 {
    color: #2b4f12;
}
@media all and (max-width:660px) {
    div#xmas {
    /*Make right/second background graphic disappear with 1000px*/
	background-position: 4% center, 96% 1000px;
}
	div#xmas h4 {
        text-align: left;
		margin: 0 10px 0 100px;
	}
}

/* Christmas message pop up box */
div.centerPopHolder {
    text-align: center;
}
div.imgPopHolder {
    margin: auto;
}
div.imgPopHolder img {
    width: 100%;
    max-width: 600px;
    height: auto;
}
div#xmas-message-box {
    max-width: 600px;
    margin: auto;
}
/*	make X close button white for dark images and larger */
div#xmas-message-box button.mfp-close {
    color: white !important;
    opacity: 0.8;
}
    
    
/* COMMON STYLES */
/*	make X close button larger*/
button.mfp-close {
    height: 64px !important;
    width: 64px !important;
    font-size: 100px !important;
}
@media screen and (max-width: 800px) {
a .notice-container h4, .notice-container h4 {
	font-size: 14px !important;
    line-height: 1.2rem !important;
    }
.notice-container {
     /*padding: 12px; Not required with grid / place-items: center */
    }
}