/*

PURPOSE OF THIS STYLESHEET: This allows for switching between themes on the Blackout Page through the provided switch, changing the styles to those in this file.

PLEASE NOTE: The majority of aspects do not have comments assigned but a few aspects do as this was undertaken at the start of the development process. The reason why comments haven't been included for the majority of sections was due to time constraints with other projects/processes being undertaken at the same time.

ALSO PLEASE NOTE: All sources utilised for this website have been included on the 'With Thanks' page through the link provided under the appropriate section.

*/

/* GENERAL STYLING FOR THE WEB PAGES START */

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

/* Blackout Page Switch Theme Animations Start */

.blackout_switch_fade {
  -webkit-animation-name: fade_switch;
  -webkit-animation-duration: 1s;
  -moz-animation-name: fade_switch;
  -moz-animation-duration: 1s;
  animation-name: fade_switch;
  animation-duration: 1s;
}

@-webkit-keyframes fade_switch {
	from {opacity: 0;}
	to {opacity: 1}
}

@-moz-keyframes fade_switch {
	from {opacity: 0;}
	to {opacity: 1}
}

@keyframes fade_switch {
	from {opacity: 0;}
	to {opacity: 1}
}

.blackout_switch_fade2 {
  -webkit-animation-name: fade_switch_two;
  -webkit-animation-duration: 1s;
  -moz-animation-name: fade_switch_two;
  -moz-animation-duration: 1s;
  animation-name: fade_switch_two;
  animation-duration: 1s;
}

@-webkit-keyframes fade_switch_two {
	from {opacity: 0;}
	to {opacity: 1}
}

@-moz-keyframes fade_switch_two {
	from {opacity: 0;}
	to {opacity: 1}
}

@keyframes fade_switch_two {
	from {opacity: 0;}
	to {opacity: 1}
}

/* Blackout Page Switch Theme Animations End */

/* Inline Text Links Section Start */

.blackout_text_link {
	color: #FFFFFF;
	font-style: italic;
}

.text_links {
	color: #000000;
	font-weight: italic;
}

/* Inline Text Links Section End */

/* Some 'Focus' and 'Active' Accessibility Aspects Section Start */

#toggle_icon_switch:active {
  color: #336600;
}

#toggle_icon_switch:focus {
  color: #55a901;
}

/* Some 'Focus' and 'Active' Accessibility Aspects Section End */

/* GENERAL STYLING FOR THE WEB PAGES END */

/* ----------------------------------------------------- */

/* TEXT/FONT STYLES START */

h1 {
    display: inline-block;
    font-family: 'Aleo', sans-serif;
    font-size: 90px;
}

h2 {
	font-family: 'Special Elite', sans-serif;
	font-size: 70px;
}

h3 {
	font-family: 'Aleo', sans-serif;
}

h4 {
	font-family: 'Montserrat', sans-serif;
}

p {
	font-family: 'Montserrat', sans-serif;
}

a {
	font-family: 'Montserrat', sans-serif;
}

a:focus {
  color: #336600!important;
}

a:active {
  background-color: #C0C080!important;
}

/* TEXT/FONT STYLES END */

/* ----------------------------------------------------- */

/* HEADER STYLES START */

/* Navigation and Responsive Navigation Start */

.navigation_bar {
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  background: #000000;
  z-index: 1;
}

.nb_logo_container {
  padding: 10px;
}

.nb_logo_container .nb_logo_image {
  width: 110px;
  height: auto;
}

.nb_hamburger_container {
  position: absolute;
  z-index: 3;
  right: 20px;
  top: 50px;
  cursor: pointer;
  transition: all 0.5s ease-out;
}

.nb_hamburger_container .nb_hamburger_line {
  width: 28px;
  height: 3px;
  margin: 0 0 5px 0;
  background: #FFFFFF;
  transition: all 0.5s ease-out; 
}

.nb_hamburger_container.close {
  transform: rotate(90deg);
  top: 40px;
  right: 40px;
}

.nb_hamburger_container.close .nb_hamburger_line:nth-child(1) {
  transform: rotate(45deg) translate(15px, 15px);
  background-color: #FFFFFF;
}
    
.nb_hamburger_container.close .nb_hamburger_line:nth-child(2) {
  border-radius: 50%;
  background: none;
  border: 2px solid #FFFFFF;
  height: 30px;
}

.nb_hamburger_container.close .nb_hamburger_line:nth-child(3) {
  transform: rotate(-45deg) translate(15px, -15px);
  background-color: #FFFFFF;
}

.nb_menu_container {
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 1;
  visibility: hidden;
}

.nb_menu_container.show {
  visibility: visible;
}

.nb_menu_navigation_container {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 30px;
  background: #000000;
  list-style: none;
  margin-top: -632px;
  transition: all 0.5s ease-out;
  opacity: 0;
}

.nb_menu_navigation_container h3 {
  font-size: 35px;
  margin: 0;
  color: #FFFFFF;
}

.nb_menu_navigation_container h4 {
  margin: 10px 0px 10px 0px;
}

.nb_menu_navigation_container hr {
  width: 100%;
  height: auto;
  border: 2px solid #FFFFFF;
  background-color: #FFFFFF;
}

.nb_menu_navigation_container.show {
  margin-top: 0px;
  opacity: 1;
  display: flex;
  align-items: center;
}

.nb_menu_container .nb_menu_transition {
  transform: scale(0);
  transition: all 0.5s ease-out;
}

.nb_menu_container .navigation-items hr {
  border: 2px solid #FFFFFF;
  background-color: #FFFFFF;
}

.nb_menu_container .nb_menu_transition.show {
  transition-delay: 0.5s;
  transform: scale(1);
}

.nb_menu_container .navigation-links {
  display: inline-block;
  position: relative;
  color: #008080;
  text-decoration: none;
  transition: all 0.5s ease-out; }

.nb_menu_container .navigation-links:hover {
  color: #FFFFFF;
}

.nb_menu_container .navigation-links:focus {
  color: #C0C080!important;
}

.nb_menu_container .navigation-links:active {
  color: #000000!important;
}

.nb_menu_transition {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
}

.nb_navigation_contents_container {
	width: 33.33%;
	height: auto;
	padding: 30px;
}

.nb_ncc_main_content_container {
	display: flex;
	flex-direction: row;
}

.nb_ncc_mcc_links_container1, .nb_ncc_mcc_links_container2 {
	width: 50%;
	height: auto;
}

.nb_navigation_miscellaneous_container {
	display: flex;
	flex-direction: column;
	width: 33.33%;
	height: auto;
	padding: 30px;
}

.nb_nmc_publicity_container, .nb_nmc_contact_container, .nb_nmc_websites_container, .nb_nmc_thanks_container, .nb_nmc_copyright_container {
	width: 100%;
	height: auto;
}

.nb_navigation_know_container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 33.33%;
	height: auto;
}

.nb_navigation_know_container h2, .nb_navigation_know_container h3 {
	color: #000000;
}

.nb_nkc_circle_container {
	width: 450px;
	height: 450px;
	border-radius: 50%;
	background-color: #FFFFFF;
}

.nb_nkc_circle_content_container {
	width: 100%;
	height: auto;
	text-align: center;
}

/* Navigation and Responsive Navigation End */

/* HEADER STYLES END */

/* ----------------------------------------------------- */

/* FOOTER STYLES START */

.footer_container { /* This relates to the parent container/whole container of the footer section */
	display: flex;
	flex-direction: row; /* Flexbox will allow for displaying the items inside this container in a horizontal format */
	width: 100%; /* This will make the container fill the page's whole width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	border: 2px solid #000000; /* This will add a border that is black and 2px in width to the container */
	background-color: #000000;
}

.footer_container a {
	color: #FFFFFF;
	font-style: italic;
	text-decoration: none;
	transition: 0.5s;
}

.footer_container a:hover {
	color: #FFFFFF;
	transition: 0.5s;
}

.fc_logo_container { /* This will style the section of the footer that contains the logo */
	width: 15%; /* This container will use 15% of its parent container's width which is the footer_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding: 10px;
}

.fc_logo_sub_container {
	width: 100%;
	height: auto;
}

.fc_logo_image { /* This will style the actual logo image in the footer section */
	width: 100%; /* This image's width will be 100% of its container's width */
	height: auto; /* This will make the height of the image adjust to its change in width */
}

.fc_page_links_container { /* This will style the section of the footer that contains the page links */
	display: flex;
	flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
	width: 35%; /* This container will use 35% of its parent container's width which is the footer_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	color: #FFFFFF;
	text-align: center;
	justify-content: center;
}

.fc_page_links_container h4 { /* This will style the h4 element(s) of the page links section of the footer */
	font-family: 'Aleo', sans-serif; /* This sets the font for the h4 element(s) to Aleo, a Google Font and if that cannot be loaded, then a default sans-serif font will load instead */
}

.fc_page_links_container ul { /* This will style the ul elements contained within the fc_page_links_container class */
	list-style: none; /* This removes the bullets from the ul elements */
	padding: 0;
}

.fc_page_links_title_container { /* This will style the title of the page links section of the footer */
	width: 100%; /* This container will use 100% of its parent container's width which is the fc_page_links_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	text-align: center; /* This will position the text and any other content centrally within this container */
}

.fc_page_links_title_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
}

.fc_page_links_parent_sub_container {
	width: 100%; /* This container will use 100% of its parent container's width which is the fc_page_links_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	display: flex;
	flex-direction: row; /* Flexbox will allow for displaying the items inside this container in a horizontal format */
}

.fc_page_links_sub_container1 {
	width: 25%;
	height: auto;
	font-size: 13px;
}

.fc_page_links_sub_container2 {
	width: 25%;
	height: auto;
	font-size: 13px;
}

.fc_page_links_sub_container3 {
	width: 25%;
	height: auto;
	font-size: 13px;
}

.fc_page_links_sub_container4 {
	width: 25%;
	height: auto;
	font-size: 13px;
}

.footer_hr_container {
	width: 5%;
	height: auto;
	padding: 20px;
}

.footer_vertical_line { /* This will style the hr in the footer section to be vertical */
	width: 1%;
	height: 100%;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
	transform: rotate(180deg);
}

.fc_legal_policies_container { /* This will style the section of the footer that contains the other links */
	display: flex;
	flex-direction: column;
	width: 20%; /* This container will use 20% of its parent container's width which is the footer_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	text-align: center;
	justify-content: center;
}

.fc_legal_policies_container h4 { /* This will style the h4 element(s) of the other links section of the footer */
	font-family: 'Aleo', sans-serif; /* This sets the font for the h4 element(s) to Aleo, a Google Font and if that cannot be loaded, then a default sans-serif font will load instead */
}

.fc_legal_policies_container ul { /* This will style the ul elements contained within the fc_legal_policies_container class */
	list-style: none; /* This removes the bullets from the ul elements */
	padding: 0;
}

.fc_legal_policies_title_container { /* This will style the title of the other links section of the footer */
	width: 100%;
	height: auto;
	text-align: center; /* This will position the text and any other content centrally within this container */
	color: #FFFFFF;
}

.fc_legal_policies_title_container hr { /* This will style the hr elements contained within the other links section of the footer */
	width: 100%;
	height: auto;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
}

.fc_legal_policies_parent_sub_container {
	width: 100%; /* This container will use 100% of its parent container's width which is the fc_legal_policies_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	display: flex;
	flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
}

.fc_legal_policies_sub_container1 {
	width: 100%; /* This container will use 100% of its parent container's width which is the fc_legal_policies_parent_sub_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	font-size: 13px;
}

.fc_contact_container { /* This will style the section of the footer that contains the contact information */
	display: flex;
	flex-direction: column;
	width: 20%; /* This container will use 20% of its parent container's width which is the footer_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding-right: 30px;
	justify-content: center;
}

.fc_contact_container h4 { /* This will style the h4 element(s) of the contact section of the footer */
	font-family: 'Aleo', sans-serif; /* This sets the font for the h4 element(s) to Aleo, a Google Font and if that cannot be loaded, then a default sans-serif font will load instead */
}

.fc_contact_title_container { /* This will style the title of the contact section of the footer */
	width: 100%;
	height: auto;
	text-align: center; /* This will position the text and any other content centrally within this container */
	color: #FFFFFF;
	margin-top: -10px;
}

.fc_contact_title_container hr { /* This will style the hr elements contained within the contact section of the footer */
	width: 100%;
	height: auto;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
	padding-right: 20px;
}

.fc_contact_parent_sub_container {
	width: 100%; /* This container will use 100% of its parent container's width which is the fc_contact_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	display: flex;
	flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
}

.fc_contact_sub_container1 {
	display: flex;
	flex-direction: column;
	width: 100%; /* This container will use 100% of its parent container's width which is the fc_contact_parent_sub_container class */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	color: #FFFFFF;
}

.fc_csc1_icon_container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 80px;
}

.fc_csc1_icon_container a {
  color: #FFFFFF;
}

/* FOOTER STYLES END */

/* ----------------------------------------------------- */

/* BLACKOUT PAGE START */

/* Blackout Page Heading Section Start */

.blackout_page_heading_container {
	display: flex;
	flex-direction: row; /* Flexbox will allow for displaying the items inside this container in a horizontal format */
	align-items: center;
	width: 100%; /* This will make the container fill the page's whole width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding: 100px; /* This will help to place spacing around the elements inside the container */
	border: 2px solid #000000; /* This will add a border that is black and 2px in width to the container */
	margin-top: 122px;
}

.blackout_phc_title_container {
	width: 80%;
	height: auto;
}

.blackout_phc_title_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #000000;
	background-color: #000000;
}

.blackout_phc_switch_container {
	width: 20%;
	height: auto;
	text-align: center;
}

.blackout_phc_switch_container hr {
	display: none;
}

.blackout_phc_switch_container i {
	font-size: 100px;
	color: #000000;
	cursor: pointer;
}

/* Blackout Page Heading Section End */

/* Blackout Introduction Section Start */

.blackout_introduction_container {
	display: flex;
	flex-direction: row; /* Flexbox will allow for displaying the items inside this container in a horizontal format */
	width: 100%; /* This will make the container fill the page's whole width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	border: 2px solid #000000;
	align-items: center;
}

.blackout_ic_text_container1 {
	width: 50%; /* This container will use 50% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	background-color: #000000;
	color: white;
	padding: 100px;
}

.blackout_ic_text_container2 {
	width: 50%; /* This container will use 50% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding: 100px;

}

/* Blackout Introduction Section End */

/* Blackout Britain Prepares Section Start */

.britain_prepares_container {
	display: flex;
	flex-direction: row; /* Flexbox will allow for displaying the items inside this container in a horizontal format */
	align-items: center;
	width: 100%; /* This will make the container fill the page's whole width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding: 100px; /* This will help to place spacing around the elements inside the container */
}

.britain_prepares_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #000000;
	background-color: #000000;
}

.bp_images_container {
	display: flex;
	flex-direction: column;
	width: 30%; /* This container will use 30% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding-left: 20px;
}

.bp_images_sub_container1 {
	width: 100%;
	height: auto;
}

.bp_image1 {
	width: 100%;
	height: auto;
}

.bp_images_sub_container2 {
	width: 100%;
	height: auto;
}

.bp_image2 {
	width: 100%;
	height: auto;
}

.bp_text_container {
	width: 70%; /* This container will use 70% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
}

/* Blackout Britain Prepares Section End */

/* Blackout Households in the Blackout Section Start */

.households_blackout_container {
	display: flex;
	flex-direction: row; /* Flexbox will allow for displaying the items inside this container in a horizontal format */
	width: 100%; /* This will make the container fill the page's whole width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding: 100px;
	background-color: #000000;
	color: #FFFFFF;
}

.households_blackout_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
}

.hb_image_container {
	width: 40%; /* This container will use 50% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
}

.hb_image {
	width: 100%;
	height: auto;
}

.hb_text_container {
	width: 60%; /* This container will use 50% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding-left: 20px;
}

/* Blackout Households in the Blackout Section End */

/* Blackout Put out that Light! Section Start */

.put_out_light_container {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
	padding: 100px;
}

.put_out_light_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #000000;
	background-color: #000000;
}

.polc_text_container {
	width: 100%;
	height: auto;
}

/* Blackout Put out that Light! Section End */

/* Blackout Businesses are Hit Hard Section Start */

.businesses_container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	padding: 100px;
	background-color: #000000;
	color: #FFFFFF;
}

.businesses_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
}

.bc_title_container {
	width: 100%;
	height: auto;
}

.bc_text_container {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: auto;
}

.bc_text_container hr {
	width: 0.1%;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
	transform: rotate(180deg);
}

.bc_sub_text_container1 {
	width: 50%;
	height: auto;
	margin-right: 20px;
}

.bc_sub_text_container2 {
	width: 50%;
	height: auto;
	margin-left: 20px;
}

/* Blackout Businesses are Hit Hard Section End */

/* Blackout Road Accidents Section Start */

.road_accidents_container {
	display: flex;
	flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
	width: 100%; /* This will make the container fill the page's whole width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding: 100px; /* This will help to place spacing around the elements inside the container */
}

.road_accidents_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #000000;
	background-color: #000000;
}

.ra_images_container {
	display: flex;
	flex-direction: row;
	width: 100%; /* This container will use 100% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
}

.ra_images_sub_container1 {
	width: 25%;
	height: auto;
	order: 2;
	padding-left: 20px;
}

.ra_image1 {
	width: 100%;
	height: auto;
}

.ra_images_sub_container2 {
	width: 25%;
	height: auto;
	order: 1;
}

.ra_image2 {
	width: 100%;
	height: auto;
}

.ra_text_container {
	width: 100%; /* This container will use 100% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
}

/* Blackout Road Accidents Section End */

/* Blackout Crime During the Blackout! Section Start */

.crime_container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	padding: 100px;
	color: #FFFFFF;
	background-color: #000000;
}

.crime_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
}

.cc_text_container {
	width: 100%;
	height: auto;
}

	/* Blackout Quotation 1 Section Start */

	.blackout_quotation_container1 {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
		padding: 100px;
		background-color: #D9D9D9;
		color: #000000;
		border: 40px solid #FFFFFF;
		margin-top: 20px;
	}

	.blackout_quotation_container1 h4 {
		font-size: 30px;
	}

	.bqc1_hr_container {
		width: 10%;
		height: auto;
	}

	.bqc1_hr_container hr {
		width: 1%;
		height: 100%;
		border: 2px solid white;
		background-color: white;
		transform: rotate(180deg);
	}

	.bqc1_overview_container {
		display: flex;
		align-items: center;
		width: 45%;
		height: auto;
		text-align: right;
	}

	.bqc1_quotation_container {
		width: 45%;
		height: auto;
	}

	.bqc1_quotation_sub_container {
		width: 100%;
		height: auto;
		display: block;
		margin: auto;
	}

	/* Blackout Quotation 1 Section End */

/* Blackout Crime During the Blackout! Section End */

/* Blackout The Using of Torches Permitted Section Start */

.torches_permitted_container {
	display: flex;
	flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
	width: 100%; /* This will make the container fill the page's whole width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding: 100px; /* This will help to place spacing around the elements inside the container */
}

.torches_permitted_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #000000;
	background-color: #000000;
}

.tpc_content_wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: auto;
}

.tpc_image_container {
	display: flex;
	flex-direction: column;
	width: 30%; /* This container will use 30% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
}

.tpc_image_sub_container {
	width: 100%;
	height: auto;
	padding-left: 20px;
}

.tpc_image {
	width: 100%;
	height: auto;
}

.tpc_text_container {
	width: 70%; /* This container will use 70% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
}

	/* Blackout Quotation 2 Section Start */

	.blackout_quotation_container2 {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: auto;
		padding: 100px;
		background-color: #D9D9D9;
		color: #000000;
		border: 40px solid #000000;
		margin-top: 20px;
	}

	.blackout_quotation_container2 h4 {
		font-size: 30px;
	}

	.bqc2_hr_container {
		width: 10%;
		height: auto;
	}

	.bqc2_hr_container hr {
		width: 1%;
		height: 100%;
		border: 2px solid white;
		background-color: white;
		transform: rotate(180deg);
	}

	.bqc2_overview_container {
		display: flex;
		align-items: center;
		width: 45%;
		height: auto;
		text-align: right;
	}

	.bqc2_quotation_container {
		width: 45%;
		height: auto;
	}

	.bqc2_quotation_sub_container {
		width: 100%;
		height: auto;
		display: block;
		margin: auto;
	}

	/* Blackout Quotation 2 Section End */

.tpc_images_container2 {
	display: flex;
	flex-direction: row;
	width: 100%; /* This container will use 100% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	margin-top: 20px;
}

.tpc_images_sub_container21 {
	width: 30%;
	height: auto;
}

.tpc_image21 {
	width: 100%;
	height: auto;
}

.tpc_images_sub_container22 {
	width: 30%;
	height: auto;
	padding-left: 20px;
}

.tpc_image22 {
	width: 100%;
	height: auto;
}

.tpc_text_container2 {
	width: 100%; /* This container will use 100% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	margin-top: 20px;
}

/* Blackout The Using of Torches Permitted Section End */

/* Blackout Driving in the Blackout Section Start */

.driving_blackout_container {
	display: flex;
	flex-direction: row; /* Flexbox will allow for displaying the items inside this container in a horizontal format */
	align-items: center;
	width: 100%; /* This will make the container fill the page's whole width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding: 100px;
	background-color: #000000;
	color: #FFFFFF;
}

.driving_blackout_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
}

.dbc_image_container {
	width: 50%; /* This container will use 50% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
}

.dbc_image {
	width: 100%;
	height: auto;
}

.dbc_text_container {
	width: 50%; /* This container will use 50% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding-left: 20px;
}

/* Blackout Driving in the Blackout Section End */

/* Blackout Other Posters Section Start */

.other_posters_container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	padding: 100px;
}

.opc_text_container {
	width: 100%;
	height: auto;
}

.opc_text_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #000000;
	background-color: #000000;
}

.opc_line_breaks {
	width: 100%;
	height: auto;
	border: 2px solid #000000;
	background-color: #000000;
	margin-top: 30px;
}

.poster_container1 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
}

.pc1_image_container {
	width: 25%;
	height: auto;
}

.pc1_image {
	width: 100%;
	height: auto;
}

.pc1_caption_container {
	width: 25%;
	height: auto;
	padding-left: 20px;
}

.poster_container2 {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
	margin-top: 20px;
}

.pc2_image_container {
	width: 25%;
	height: auto;
	padding-left: 20px;
}

.pc2_image {
	width: 100%;
	height: auto;
}

.pc2_caption_container {
	width: 25%;
	height: auto;
	text-align: right;
}

.poster_container3 {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin-top: 20px;
}

.pc3_image_container {
	width: 25%;
	height: auto;
}

.pc3_image {
	width: 100%;
	height: auto;
}

.pc3_caption_container {
	width: 25%;
	height: auto;
	padding-left: 20px;
}

/* Blackout Other Posters Section End */

/* Blackout A Light Hearted View of the Blackout Section Start */

.light_hearted_view_container {
	display: flex;
	flex-direction: row; /* Flexbox will allow for displaying the items inside this container in a horizontal format */
	align-items: center;	
	width: 100%; /* This will make the container fill the page's whole width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding: 100px;
	background-color: #000000;
	color: #FFFFFF;
}

.light_hearted_view_container hr {
	width: 100%;
	height: auto;
	border: 2px solid #FFFFFF;
	background-color: #FFFFFF;
}

.lhv_image_container {
	width: 35%; /* This container will use 50% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
}

.lhv_image {
	width: 100%;
	height: auto;
}

.lhv_text_container {
	width: 65%; /* This container will use 50% of its parent container's width */
	height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	padding-left: 20px;
}

/* Blackout A Light Hearted View of the Blackout Section End */

/* Blackout Blackout Turns to Dim-Out Section Start */

.dim-out_container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	padding: 100px;
	background-color: #D9D9D9;
	border: 40px solid #FFFFFF;
}

.doc_title_container {
	width: 100%;
	height: auto;
	text-align: center;
}

.doc_text_container {
	width: 100%;
	height: auto;
	text-align: center;
}

/* Blackout Blackout Turns to Dim-Out Section End */

/* BLACKOUT PAGE END */

/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */
/* ----------------------------------------------------- */

/* RESPONSIVE CODE SECTION START */

/* MEDIA QUERY FOR DEVICES WITH SCREEN WIDTHS OF 2200px OR HIGHER START */

@media screen and (min-width: 2200px) {

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION START */

	.nb_nkc_circle_container {
		display: flex;
	    align-items: center;
    	width: 600px;
    	height: 600px;
	}

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION END */

/* ----------------------------------------------------- */

}

/* MEDIA QUERY FOR DEVICES WITH SCREEN WIDTHS OF 2200px OR HIGHER END */

/* MEDIA QUERY FOR DEVICES WITH SCREEN WIDTHS OF 2300px OR HIGHER START */

/* ------------------------------------------------------ */

@media screen and (min-width: 2300px) {

/* GENERAL STYLING FOR THE WEB PAGES START */

  body {
    background-color: grey;
  }

/* GENERAL STYLING FOR THE WEB PAGES END */

/* ----------------------------------------------------- */

/* FOOTER STYLES START */

  .fc_logo_container {
    width: 10%;
  }

  .fc_page_links_container {
    width: 36%;
  }

  .footer_hr_container {
    width: 6%;
  }

  .fc_legal_policies_container, .fc_contact_container {
    width: 21%;
  }

/* FOOTER STYLES END */

/* ----------------------------------------------------- */

/* STYLES RELATING TO ALL CONTAINERS ON THE BLACKOUT PAGE START */

  .blackout_page_heading_container {
    width: 60%;
    margin: 122px auto auto auto;
    padding: 50px;
    background-color: #FFFFFF;
  }

  .britain_prepares_container, .put_out_light_container, .road_accidents_container, .torches_permitted_container, .other_posters_container {
    width: 60%;
    margin: auto;
    padding: 50px;
    background-color: #FFFFFF;
  }

  .households_blackout_container, .businesses_container, .crime_container, .driving_blackout_container, .light_hearted_view_container, .dim-out_container {
    width: 60%;
    margin: auto;
    padding: 50px;
  }

  .blackout_introduction_container {
    width: 60%;
    margin: auto;
    background-color: #FFFFFF;
  }

  .blackout_ic_text_container1 {
    padding: 50px;
  }

  .blackout_ic_text_container2 {
    padding: 50px;
  }

/* STYLES RELATING TO ALL CONTAINERS ON THE BLACKOUT PAGE END */

}

/* MEDIA QUERY FOR DEVICES WITH SCREEN WIDTHS OF 2300px OR HIGHER END */

/* ------------------------------------------------------ */

/* MEDIA QUERY FOR DEVICES WITH SCREEN WIDTHS OF 1800px TO 2299px START */

@media screen and (min-width: 1800px) and (max-width: 2299px) {

/* GENERAL STYLING FOR THE WEB PAGES START */

  body {
    background-color: grey;
  }

/* GENERAL STYLING FOR THE WEB PAGES END */

/* ----------------------------------------------------- */

/* FOOTER STYLES START */

	.fc_logo_container {
		width: 10%;
	}

	.fc_page_links_container {
		width: 36%;
	}

	.footer_hr_container {
		width: 6%;
	}

	.fc_legal_policies_container, .fc_contact_container {
		width: 21%;
	}

/* FOOTER STYLES END */

/* ----------------------------------------------------- */

/* STYLES RELATING TO ALL CONTAINERS ON THE BLACKOUT PAGE START */

  .blackout_page_heading_container {
    width: 70%;
    margin: 122px auto auto auto;
    padding: 50px;
    background-color: #FFFFFF;
  }

  .britain_prepares_container, .put_out_light_container, .road_accidents_container, .torches_permitted_container, .other_posters_container {
    width: 70%;
    margin: auto;
    padding: 50px;
    background-color: #FFFFFF;
  }

  .households_blackout_container, .businesses_container, .crime_container, .driving_blackout_container, .light_hearted_view_container, .dim-out_container {
    width: 70%;
    margin: auto;
    padding: 50px;
  }

  .blackout_introduction_container {
    width: 70%;
    margin: auto;
    background-color: #FFFFFF;
  }

  .blackout_ic_text_container1 {
    padding: 50px;
  }

  .blackout_ic_text_container2 {
    padding: 50px;
  }

/* STYLES RELATING TO ALL CONTAINERS ON THE BLACKOUT PAGE END */

}

/* MEDIA QUERY FOR DEVICES WITH SCREEN WIDTHS OF 1800px TO 2299px END */

/* ------------------------------------------------------ */

/* ----------------------------------------------------- */

/* MEDIA QUERY FOR TABLET DEVICES START */

@media screen and (min-width: 961px) and (max-width: 1300px) {

/* FOOTER STYLES START */

	.fc_logo_container { /* This will style the section of the footer that contains the logo */
		display: flex;
		align-items: center;
	}

/* FOOTER STYLES END */

/* ----------------------------------------------------- */

/* BLACKOUT PAGE START */

	/* Blackout Page Heading Section Start */

	.blackout_page_heading_container {
		padding: 50px; /* This will help to place spacing around the elements inside the container */
	}

	/* Blackout Page Heading Section End */

	/* Blackout Introduction Section Start */

	.blackout_ic_text_container1 {
		padding: 50px;
	}

	.blackout_ic_text_container2 {
		padding: 50px;
	}

	/* Blackout Introduction Section End */

	/* Blackout Britain Prepares Section Start */

	.britain_prepares_container {
		padding: 50px; /* This will help to place spacing around the elements inside the container */
		align-items: center;
	}

	.bp_images_container {
		width: 50%; /* This container will use 50% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	}

	.bp_text_container {
		width: 50%; /* This container will use 50% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	}

	/* Blackout Britain Prepares Section End */

	/* Blackout Households in the Blackout Section Start */

	.households_blackout_container {
		padding: 50px;
		align-items: unset;
		flex-direction: column;
	}

	.hb_text_container {
		width: 100%; /* This container will use 50% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		padding-left: 0px;
		order: 1;
	}

	.hb_image_container {
		order: 2;
		width: 45%;
	}

	/* Blackout Households in the Blackout Section End */

	/* Blackout Put out that Light! Section Start */

	.put_out_light_container {
		padding: 50px;
	}

	/* Blackout Put out that Light! Section End */

	/* Blackout Businesses are Hit Hard Section Start */

	.businesses_container {
		padding: 50px;
	}

	/* Blackout Businesses are Hit Hard Section End */

	/* Blackout Road Accidents Section Start */

	.road_accidents_container {
		padding: 50px; /* This will help to place spacing around the elements inside the container */
	}

	/* Blackout Road Accidents Section End */

	/* Blackout Crime During the Blackout! Section Start */

	.crime_container {
		padding: 50px;
	}

	/* Blackout Crime During the Blackout! Section End */

	/* Blackout The Using of Torches Permitted Section Start */

	.torches_permitted_container {
		padding: 50px; /* This will help to place spacing around the elements inside the container */
	}

	.tpc_image_container {
		justify-content: center;
	}

	/* Blackout The Using of Torches Permitted Section End */

	/* Blackout Driving in the Blackout Section Start */

	.driving_blackout_container {
		padding: 50px;
		align-items: center;
	}

	/* Blackout Driving in the Blackout Section End */

	/* Blackout Other Posters Section Start */

	.other_posters_container {
		padding: 50px;
	}

	/* Blackout Other Posters Section End */

	/* Blackout A Light Hearted View of the Blackout Section Start */

	.light_hearted_view_container {
		padding: 50px;
	}

	/* Blackout A Light Hearted View of the Blackout Section End */

	/* Blackout Blackout Turns to Dim-Out Section Start */

	.dim-out_container {
		padding: 50px;
	}

	/* Blackout Blackout Turns to Dim-Out Section End */

/* BLACKOUT PAGE END */

}

/* MEDIA QUERY FOR TABLET DEVICES END */

/* ----------------------------------------------------- */

/* MEDIA QUERY FOR DEVICES FROM SCREEN WIDTHS OF 961px TO 1250px START */

@media screen and (min-width: 961px) and (max-width: 1250px) {

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION START */

	.nb_nkc_circle_container {
		width: 350px;
		height: 350px;
	}

	.nb_nkc_circle_container h2 {
		font-size: 50px;
	}

	.nb_nkc_circle_container h3 {
		font-size: 30px;
	}

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION END */

/* ----------------------------------------------------- */

}

/* MEDIA QUERY FOR DEVICES FROM SCREEN WIDTHS OF 961px TO 1250px END */

/* ----------------------------------------------------- */

/* MEDIA QUERY FOR GENERIC MOBILE DEVICES START */

@media screen and (min-width: 0px) and (max-width: 960px) {

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION START */

	.nb_menu_navigation_container.show {
	  align-items: unset;
	}

	.nb_menu_transition.show {
	  overflow: scroll;
	}

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION END */

/* PAGE ELEMENTS SECTION START */

	h1 {
		font-size: 50px;
	}

	h2 {
		font-size: 40px;
	}

/* PAGE ELEMENTS SECTION END */

/* ----------------------------------------------------- */

/* FOOTER STYLES START */

	.footer_container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.fc_logo_container {
		width: 40%;
		height: auto;
		justify-content: center;
	    margin-top: 20px;
	}

	.fc_logo_image {
		width: 100%;
		height: auto;
	}

	.fc_page_links_container {
		width: 100%;
		height: auto;
	}

	.fc_page_links_container hr {
		width: 80%;
		height: auto;
	}

	.fc_page_links_parent_sub_container {
	    display: grid;
	    grid-template-columns: repeat(4, 1fr);
	    width: 100%;
	    height: auto;
	}

	.fc_page_links_sub_container1 {
		width: 100%;
		height: auto;
	}

	.fc_page_links_sub_container2 {
		width: 100%;
		height: auto;
	}

	.fc_page_links_sub_container3 {
		width: 100%; 
		height: auto;
	}

	.fc_page_links_sub_container4 {
	    width: 100%; 
	    height: auto;
	}

	.footer_hr_container {
		display: none;
	}

	.fc_legal_policies_container {
		width: 100%;
		height: auto;
	}

	.fc_legal_policies_title_container hr {
		width: 80%;
		height: auto;
	}

	.fc_contact_container {
		width: 100%;
		height: auto;
		padding-right: 0px;
	}

	.fc_contact_container h4 {
		font-family: 'Aleo', sans-serif;
	}

	.fc_contact_title_container hr {
		width: 80%;
		height: auto;
		padding-right: 0px;
	}

	.fc_contact_sub_container1 {
		padding-top: 0px;
	}

/* FOOTER STYLES END */

/* ----------------------------------------------------- */

/* BLACKOUT PAGE START */

	/* Blackout Page Heading Section Start */

	.blackout_page_heading_container {
		display: flex;
		flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
		padding: 20px; /* This will help to place spacing around the elements inside the container */
	}

	.blackout_phc_title_container {
		width: 100%;
		height: auto;
	}

	.blackout_phc_title_container hr {
		display: none;
	}

	.blackout_phc_switch_container {
		width: 100%;
		height: auto;
		text-align: left;
		margin-top: -50px;
	}

	.blackout_phc_switch_container hr {
		display: block;
		width: 100%;
		height: auto;
		border: 2px solid #000000;
		background-color: #000000;
	}

	/* Blackout Page Heading Section End */

	/* Blackout Introduction Section Start */

	.blackout_introduction_container {
		display: flex;
		flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
	}

	.blackout_ic_text_container1 {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		padding: 10px;
		text-align: center;
	}

	.blackout_ic_text_container2 {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		padding: 10px;

	}

	/* Blackout Introduction Section End */

	/* Blackout Britain Prepares Section Start */

	.britain_prepares_container {
		display: flex;
		flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
		padding: 10px; /* This will help to place spacing around the elements inside the container */
	}

	.bp_images_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		padding-left: 0px;
	}

	.bp_images_sub_container1 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.bp_images_sub_container2 {
		padding-left: 0px;
		padding-right: 0px;
	}

	.bp_text_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	}

	/* Blackout Britain Prepares Section End */

	/* Blackout Households in the Blackout Section Start */

	.households_blackout_container {
		display: flex;
		flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
		padding: 10px;
	}

	.hb_image_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		padding: 0px;
		order: 2;
	}

	.hb_text_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		order: 1;
		padding-left: 0px;
	}

	/* Blackout Households in the Blackout Section End */

	/* Blackout Put out that Light! Section Start */

	.put_out_light_container {
		padding: 10px;
	}

	/* Blackout Put out that Light! Section End */

	/* Blackout Businesses are Hit Hard Section Start */

	.businesses_container {
		display: flex;
		flex-direction: column;
		padding: 10px;
	}

	.businesses_container h3 {
		font-size: 30px;
	}

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

	.bc_text_container hr {
		width: 100%;
		height: auto;
		transform: rotate(0deg);
	}

	.bc_sub_text_container1 {
		width: 100%;
		height: auto;
		margin-right: 0px;
	}

	.bc_sub_text_container2 {
		width: 100%;
		height: auto;
		margin-left: 0px;
	}

	/* Blackout Businesses are Hit Hard Section End */

	/* Blackout Road Accidents Section Start */

	.road_accidents_container {
		padding: 10px; /* This will help to place spacing around the elements inside the container */
	}

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

	.ra_images_sub_container1 {
		width: 100%;
		padding-left: 0px;
	}

	.ra_images_sub_container2 {
		width: 100%;
	}

	/* Blackout Road Accidents Section End */

	/* Blackout Crime During the Blackout! Section Start */

	.crime_container {
		padding: 10px;
	}

		/* Blackout Quotation 1 Section Start */

		.blackout_quotation_container1 {
			display: flex;
			flex-direction: column;
			padding: 20px;
			border-width: 20px;
		}

		.blackout_quotation_container1 h4 {
			font-size: 25px;
		}

		.bqc1_hr_container {
			width: 100%;
			height: auto;
		}

		.bqc1_hr_container hr {
			width: 100%;
			transform: rotate(0deg);
		}

		.bqc1_overview_container {
			width: 100%;
			height: auto;
		}

		.bqc1_quotation_container {
			width: 100%;
			height: auto;
		}

		/* Blackout Quotation 1 Section End */

	/* Blackout Crime During the Blackout! Section End */

	/* Blackout The Using of Torches Permitted Section Start */

	.torches_permitted_container {
		padding: 10px; /* This will help to place spacing around the elements inside the container */
	}

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

	.tpc_image_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	}

	.tpc_image_sub_container {
		padding-left: 0px;
	}

	.tpc_text_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
	}

		/* Blackout Quotation 2 Section Start */

		.blackout_quotation_container2 {
			display: flex;
			flex-direction: column;
			width: 100%;
			height: auto;
			padding: 20px;
			border-width: 20px;
		}

		.blackout_quotation_container2 h4 {
			font-size: 25px;
		}

		.bqc2_hr_container {
			width: 100%;
			height: auto;
		}

		.bqc2_hr_container hr {
			width: 100%;
			height: auto;
			transform: rotate(0deg);
		}

		.bqc2_overview_container {
			width: 100%;
			height: auto;
		}

		.bqc2_quotation_container {
			width: 100%;
			height: auto;
		}

		/* Blackout Quotation 2 Section End */

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

	.tpc_images_sub_container21 {
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
	}

	.tpc_images_sub_container22 {
		width: 100%;
		padding-left: 0px;
	}

	/* Blackout The Using of Torches Permitted Section End */

	/* Blackout Driving in the Blackout Section Start */

	.driving_blackout_container {
		display: flex;
		flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
		padding: 10px;
	}

	.dbc_image_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		order: 2;
	}

	.dbc_text_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		padding-left: 0px;
		order: 1;
	}

	/* Blackout Driving in the Blackout Section End */

	/* Blackout Other Posters Section Start */

	.other_posters_container {
		padding: 10px;
	}

	.opc_line_breaks {
		width: 100%;
		height: auto;
		border: 2px solid #000000;
		background-color: #000000;
		margin-top: 0px;
	}

	.poster_container1 {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
	}

	.pc1_image_container {
		width: 100%;
		height: auto;
	}

	.pc1_image {
		width: 100%;
		height: auto;
		float: none;
	}

	.pc1_caption_container {
		width: 100%;
		height: auto;
		padding: 0px;
	}

	.pc2_image_container {
		width: 100%;
		height: auto;
		order: 1;
		padding-left: 0px;
	}

	.poster_container2 {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		margin-top: 0px;
	}

	.pc2_image {
		width: 100%;
		height: auto;
		float: none;
	}

	.pc2_caption_container {
		width: 100%;
		height: auto;
		text-align: left;
		padding: 0px;
		order: 2;
	}

	.poster_container3 {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		margin-top: 0px;
	}

	.pc3_image_container {
		width: 100%;
		height: auto;
		order: 1;
	}

	.pc3_image {
		width: 100%;
		height: auto;
		float: none;
	}

	.pc3_caption_container {
		width: 100%;
		height: auto;	
		padding: 0px;
		order: 2;
	}

	/* Blackout Other Posters Section End */

	/* Blackout A Light Hearted View of the Blackout Section Start */

	.light_hearted_view_container {
		display: flex;
		flex-direction: column; /* Flexbox will allow for displaying the items inside this container in a vertical format */
		padding: 10px;
	}

	.lhv_image_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		order: 2;
	}

	.lhv_text_container {
		width: 100%; /* This container will use 100% of its parent container's width */
		height: auto; /* This will make the height of the container adjust both to the screen resolution as well as the content */
		padding-left: 0px;
		order: 1;
	}

	/* Blackout A Light Hearted View of the Blackout Section End */

	/* Blackout Blackout Turns to Dim-Out Section Start */

	.dim-out_container {
		padding: 10px;
		border-width: 20px;
	}

	/* Blackout Blackout Turns to Dim-Out Section End */

/* BLACKOUT PAGE END */

/* MEDIA QUERY FOR GENERIC MOBILE DEVICES END */

/* ----------------------------------------------------- */

/* MEDIA QUERY FOR DEVICES FROM SCREEN WIDTHS OF 425px TO 960px START */

@media screen and (min-width: 425px) and (max-width: 960px) {

/* FOOTER STYLES START */

.fc_logo_container {
  width: 30%;
}

.fc_page_links_title_container hr {
  width: 95%;
}

.fc_legal_policies_title_container hr, .fc_contact_title_container hr {
  width: 30%;
}

/* FOOTER STYLES END */

/* ----------------------------------------------------- */

}

/* MEDIA QUERY FOR DEVICES FROM SCREEN WIDTHS OF 425px TO 960px END */

/* ----------------------------------------------------- */

/* MEDIA QUERY FOR DEVICES FROM SCREEN WIDTHS OF 750px TO 960px START */

@media screen and (min-width: 750px) and (max-width: 960px) {

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION START */

	.nb_menu_navigation_container {
	  padding: 10px;
	}

	.nb_menu_navigation_container h3 {
	  font-size: 30px;
	}

	.nb_menu_navigation_container hr {
		width: 90%;
	}

	.nb_menu_transition {
		display: grid;
    	grid-template-columns: 50% 50%;
	}

	.nb_navigation_contents_container {
		width: 100%;
		padding: 10px;
		text-align: center;
		order: 2;
	}

	.nb_ncc_main_content_container {
		flex-direction: row;
	}

	.nb_ncc_mcc_links_container1, .nb_ncc_mcc_links_container2 {
		width: 100%;
	}

	.nb_navigation_miscellaneous_container {
		width: 100%;
		padding: 10px;
		text-align: center;
		order: 3;
	}

	.nb_navigation_know_container {
		width: 100%;
		grid-column: span 2;
		order: 1;
		margin: 50px 0px 50px 0px;
	}

	.nb_nkc_circle_container {
		display: flex;
		align-items: center;
		width: 300px;
		height: 300px;
	}

	.nb_nkc_circle_container h2 {
		font-size: 30px;
	}

	.nb_nkc_circle_container h3 {
		font-size: 25px;
	}

	.nb_nkc_circle_content_container {
		width: 100%;
	}

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION END */

/* ----------------------------------------------------- */

}

/* MEDIA QUERY FOR DEVICES FROM SCREEN WIDTHS OF 750px TO 960px END */

/* ----------------------------------------------------- */

/* MEDIA QUERY FOR DEVICES UP TO 750px WIDE IN SCREEN RESOLUTION START */

@media screen and (min-width: 0px) and (max-width: 750px) {

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION START */

	.nb_menu_navigation_container {
	  padding: 10px;
	}

	.nb_menu_navigation_container h3 {
	  font-size: 30px;
	}

	.nb_menu_navigation_container hr {
		width: 90%;
	}

	.nb_menu_transition {
	    flex-direction: column;
	}

	.nb_navigation_contents_container {
		width: 100%;
		padding: 10px;
		text-align: center;
		margin-top: 60px;
	}

	.nb_ncc_main_content_container {
		flex-direction: column;
	}

	.nb_ncc_mcc_links_container1, .nb_ncc_mcc_links_container2 {
		width: 100%;
	}

	.nb_navigation_miscellaneous_container {
		width: 100%;
		padding: 10px;
		text-align: center;
	}

	.nb_navigation_know_container {
		width: 100%;
	}

	.nb_nkc_circle_container {
		display: flex;
		align-items: center;
		width: 300px;
		height: 300px;
	}

	.nb_nkc_circle_container h2 {
		font-size: 30px;
	}

	.nb_nkc_circle_container h3 {
		font-size: 25px;
	}

	.nb_nkc_circle_content_container {
		width: 100%;
	}

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION END */

/* ----------------------------------------------------- */

/* MEDIA QUERY FOR DEVICES UP TO 750px WIDE IN SCREEN RESOLUTION END */

}

/* ----------------------------------------------------- */

/* MEDIA QUERY FOR DEVICES FROM SCREEN WIDTHS OF 0px TO 600px START */

@media screen and (min-width: 0px) and (max-width: 600px) {

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION START */

  .nb_navigation_know_container {
    display: none;
  }

/* NAVIGATION AND RESPONSIVE NAVIGATION SECTION END */

/* ----------------------------------------------------- */

}

/* MEDIA QUERY FOR DEVICES FROM SCREEN WIDTHS OF 0px TO 600px END */

/* ----------------------------------------------------- */


/* RESPONSIVE CODE SECTION END */





/* THIS IS THE END OF THE STYLESHEET */



/*-------------------------------------------------------------------------------------------------------------------------------------*/