/*********************************************************************************************/
/* CROMER PIER MAIN CSS            																 */ 
/*********************************************************************************************/
:root {
	
	/*--color-primary-blue: #3B4496;*/
	/*--color-accent-gold: #CEA939; */
	
	--color-white: #fff;
	--color-black: #212121;
	
	/* neutrals */
	--CP-neutral-200: #fffdf8;
	--CP-neutral-300: #FFFAF0;
	--CP-neutral-400: #DEE2E6;
	--CP-neutral-500: #AAABA5;
	--CP-neutral-700: #625C59;
	
	/* gold */
	--CP-accent-500: #F1C231;
	--CP-accent-700: #CEA939;

	/* blues */
	--CP-primary-100: #f5f6fa;
	--CP-primary-500: #EBECF5;
	--CP-primary-800: #4F57A1;
	--CP-primary-900: #3B4496;
	
	--blue-button-hover: #2E3870;
	--blue-button-active: #2E3870;
	
		
	--link-color: #3A468C;
	--link-color-visited: #551A8B;
	--link-color-active: #551A8B;
	
	--default-border-radius: 20px;
		
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
}

.shadow {
	box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .2);
}

.shadow-sm {
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* OVERRIDE EXISTNG STYLES *******************************************************************/
/*********************************************************************************************/
/* hide announcement and original page-header */

.announcement, header.page-header {
    display: none;
}

.contentpage-top {
 	margin-top: 0; 
}


/* reset page margins and padding */
.large-content-block {
	width: 100%;
	padding: 0;
	margin-left: 0;
	margin-right: 0;
}

.article-container {
	margin-top: 0;
}


/* apply new colours to existing elements */

.global-header {
	border-bottom: 5px solid var(--CP-accent-700);
}

.global-breadcrumb, .footer {
	background-color: var(--CP-primary-900);
}

.global-breadcrumb  ol li:nth-child(3) {
     display: none;
}

.page-header {
	background: var(--CP-primary-800);
}

.related-box:nth-child(1) {
	border-color: var(--CP-accent-700);
}

/* LOGOS *************************************************************************************/
/*********************************************************************************************/

.CP-logo {
	width: 230px;
	padding-bottom: 1rem;
}

/* PAGE HEADING WITH IMAGE BACKGROUND ********************************************************/
/*********************************************************************************************/

.section-header .container {
	padding-left: 0;
	padding-right: 0;
}

/* add black overlay so text stands out */
.section-header:before {
	position: absolute;
   	content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: var(--color-black);
    opacity: 0.6;
}

.section-header .page-heading {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 6rem 0;
}

.page-heading .text-box {
	position: relative;
}

.page-heading .text-box h1 {
	margin-bottom: 0;
}

.page-heading .text-box p {
	font-size: 20px;
	color: var(--color-white);
	font-weight: 400;
}

/* introductory text underneath page heading */
.section-leading {
      padding: 2rem;
}

/* VIDEO AND IMAGE CONTAINERS ****************************************************************/
/*********************************************************************************************/

.img-frame {
	padding: 5rem 2.5rem;
	border-radius: var(--default-border-radius);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	margin: 4rem 1rem;
}

.video-frame {
	padding: 5rem 2.5rem;
	border-radius: var(--default-border-radius);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
	margin: 4rem 1rem;
}

.video-frame-portrait {
	padding: 5rem 1.5rem;
}

.player {
    overflow: hidden;
    z-index: 1;
    height: 315px;
    width: 100%;
    border-radius: var(--default-border-radius);
    border: 3px solid var(--color-white);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.player-portrait {
	height: 560px;
	width: 100%;
}

/* CARDS AND TEXT BOXES **********************************************************************/
/*********************************************************************************************/
.section-card-group .column-6,
.section-card-group .column-4 {
        margin: 2rem 1rem;
}

.section-card-group {
	padding: 4rem 0;
}

.card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 2.5rem;
	height: 100%;
	border-radius: var(--default-border-radius);
	position: relative;
}

.card .card-bg {
	height: 100%;
	display: flex;
	background: rgba(59, 68, 150, .9);
}

.card .card-body {
   	padding: 3rem 2rem;
	box-shadow: 15px 0 25px -5px rgba(0, 0, 0, .2);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;  
}

.card-body p, .card-body h3 {
	color: var(--color-white) !important;
}

.card-body .btn {
	width: fit-content;
	margin-top: auto;
}

.section .text-box {
	height: 100%;
    margin: 4rem 0;
    background-color: var(--CP-neutral-200);
    padding: 0 3rem;
    border-radius: var(--default-border-radius);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* FLEXBOX UTILITIES *************************************************************************/
/*********************************************************************************************/

.d-flex {
	display: flex;
}

.flex-column {
	flex-direction: column;
}

.align-items-center {
	align-items: center;
}

.justify-content-center {
	justify-content: center;
}

/* FOOTER - NNDC AND CROMER PIER *************************************************************/
/*********************************************************************************************/

.section-logos {
	padding: 4rem 1rem 0 1rem;
	border-top: 15px solid var(--CP-accent-700);
}

.section-logos-text {
	padding: 0 15rem;
}

.section-logos-grid {
    display: flex;
    align-items: center;
	justify-content: center;
	column-gap: 30px;
	margin-bottom: 15px;
}

img.logo-NNDC {
	width: 220px;
}

.section-logos p {
	font-size: 20px;
	text-align: center;
}

.section-logos p, .section-logos h3 {
	color: var(--color-white);
}

img.logo-CP {
	width: 255px;
}

/* hide the feedback container */
.feedback-container {
	display: none;
}

.section-logos hr {
	border-color: var(--color-white);
	margin: 60px 0 0 0;
	opacity: .25;
}

/* TYPOGRAPHY ********************************************************************************/
/*********************************************************************************************/

.rich-text h1, .rich-text h2, .rich-text h3 {
	margin: 0 0 1rem 0;
	font-weight: 900;
	color: var(--CP-primary-900);

}

/* H1 for home page */
h1.heading-primary {
    font-weight: 900;
    color: var(--color-white);
    font-size: 2.7rem;
}

.rich-text h2 {
	font-size: 2rem;
}

.rich-text h3 {
	font-size: 1.5rem;
}

.related-box h2, .feedback h2  {
	font-size: 1.5rem;
}

.feedback h2 a {
	color: var(--CP-primary-900);
}

h2.heading-secondary, .info-notice h2 {
	font-size: 26px;
}

.sub-heading {
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: 2px;
	font-weight: 700;
	margin-bottom: 10px;
	margin-top: 0;
	color: var(--CP-accent-700);
}

.section-header .sub-heading {
	color: var(--CP-accent-500);
}

.rich-text p {
	color: var(--CP-neutral-700);
}

.leading-paragraph {
	font-size: 20px;
}

p.leading-paragraph {
	margin: 0;
}

.fw-semibold {
	font-weight: 600;
}

.rich-text a {
	color: var(--link-color);
	border-bottom: 1px solid var(--link-color);
}

.rich-text a:focus {
	color: var(--color-white);
}

.caption {
    padding: 5px 0 5px 10px;
    color: #545454;
    background: unset;
    border: unset;
    border-left: 1px solid #8cbbe6;
    display: block;
    font-size: .8em;
    margin-top: 10px;
}

.text-center {
	text-align: center;
}

.display-4 {
	line-height: 1.2;
	font-weight: 300;
    font-size: calc(1.475rem + 2.7vw);
}

/** BUTTONS AND LINKS ************************************************************************/
/*********************************************************************************************/
a:focus {
	background-color: var(--CP-primary-900);
	outline: 3px solid #f1c231;
	
}

a.link-underline-light {
	border-bottom: none;
}

.rich-text a.btn {
	color: var(--color-white);
	border: 2px solid var(--color-white);
}

.btn {
	box-shadow: none;
	transition: 0.3s all;
}

.btn-transparent, .btn-blue {
    border-radius: 80px;
	padding: .9rem 2rem;
    font-weight: 600;
}

.btn-blue {
	background: var(--CP-primary-900);
	box-shadow: #737373 0 10px 20px -10px;
}

.btn-blue:hover, .btn-transparent:hover {
	background-color: var(--blue-button-hover);
	transform: translateY(-0.25em);
}

.btn-blue:hover {
	box-shadow: 0 0.25em 0.25em -0.1em #8b8b8b; 
}

.btn-blue:active, .btn-transparent:active {
	background-color: var(--blue-button-hover);
}

/** BORDERS **********************************************************************************/
/*********************************************************************************************/
.br-rounded {
	border-radius: 20px;
}

.br-rounded-small {
	border-radius: 10px;
}

.border {
	border: 1px solid var(--CP-accent-700);
}

/** BACKGROUNDS ******************************************************************************/
/*********************************************************************************************/
.bg-hero {
	position: relative;
	height: 100%;
}

.overlay:after {
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-color: #fff;
    opacity: .8;
}

.bg-accent {
	background: var(--CP-accent-500);
}

.bg-primary {
	background: var(--CP-primary-900);
}

.bg-sand {
	background: var(--CP-neutral-300);
}

.bg-light-blue {
	background: var(--CP-primary-500);
}

.bg-light-blue-2 {
	background: var(--CP-primary-100);
}

.bg-blue {
	background: var(--CP-primary-900);
}

.bg-white {
	background: var(--color-white);
}

/** UTILITIES *******************************************************************************/
/*********************************************************************************************/
.z-1 {
	z-index: 1;
}

.mb-6 {
	margin-bottom: 6rem;
}

.w-100 {
	width: 100%;
}

/** MEDIA QUERIES ****************************************************************************/
/*********************************************************************************************/
@media (max-width: 1300px) {
	
	.section-header .page-heading {
		padding-left: 1rem;
	}
	
}
@media (max-width: 990px) {

	.section-header .page-heading {
		width: 100%;
	}
	
	/* video and image frames used on present and future pages */
	.img-frame {
		/* remove shadow at tablet and mobile */
		margin: 0;
		box-shadow: none;
	}
	
	.video-frame {
		margin: 1rem 0 4rem 0;
	}
	
	.section-logos-text {
		padding: 0 1rem;
	}
	       
   	.section-card-group .column-6,
	.section-card-group .column-4 {
        margin: 0;
    	margin-left: .2rem;
	}
	
	.card {
		margin-bottom: 1.25rem;
	}
	
}

@media (max-width: 600px) {
	
	.rich-text h2 {
		font-size: 1.6rem;
	}
	
	.display-4 {
		font-size: 2.375rem;
		text-align: center;
	}
	
	.img-frame {
		padding: 3rem 1.5rem;
	}
	
	.video-frame {
		padding: 4rem 1.5rem;
		margin: 1rem 0 2rem 0;
	}
	
	.section-logos {
		padding: 4rem 1rem;
	}
	
	.section-logos-grid {
		column-gap: 15px;
	}
	
	img.logo-CP {
		width: 50%;
	}
	
	img.logo-NNDC {
		width: 43%;
	}

}	

@media (max-width: 400px) {

	.rich-text h2 {
		font-size: 1.8rem;
	}
	
	.img-frame {
		padding: 3rem 1rem;
	}
	
	p.leading-paragraph {
		font-size: 1.125rem;
	}
	
	.section-logos-text p {
		font-size: 1rem;
	}
	
	.card {
		padding: 0 1rem;
		font-size: 1rem;
	}
	
}