:root {
	
	/* Colours to change */
	
	--primary: #FF0A00;
	--secondary: #000000;
	--button-main: #21145F;
	--button-hover: #1A104C;
	--black: #000000;
	--white: #FFFFFF;
	
	/* Elements to change */
	
	/* Navbar */
	--navbar-background: var(--secondary);
	--navbar-text: var(--white);
	--navbar-text-mobile: var(--secondary);
	--navbar-text-hover: var(--primary);
	--navbar-icon: var(--white);
	--navbar-burger: var(--white);
	--navbar-arrows: var(--primary);
	
	/* Searchbar */
	--search-background: var(--primary);
	--search-button-background: var(--button-main);
	--search-button-color: var(--white);
	--search-button-hover: var(--button-hover);
	--search-text: var(--button-main);
	
	/* Breadcrumbs */
	--breadcrumb-background: var(--primary);
	--breadcrumb-text: var(--secondary);
	--breadcrumb-text-hover: var(--primary);
	
	/* Banner Text */
	--banner-begin-text: var(--primary);
	
	/* Featured Categories */
	--featcat-background: var(--primary);
	
	/* Categories */
	--cat-item-background: var(--primary);
	--cat-title-background: var(--white);
	--cat-title-text: var(--secondary);
	
	/* Sub-Categories */
	--subcat-item-background: var(--primary);
	--subcat-title-background: var(--white);
	--subcat-title-text: var(--secondary);
	
	/* Footer */
	--footer-background: var(--black);
	--footer-text: var(--white);
	--footer-text-hover: var(--primary);
	--footer-copyright-background: var(--primary);
	--footer-copyright-text: var(--white);
	
	/* Buttons */
	--buttons-color: var(--white);
	--buttons-hover-color: var(--white);
	--buttons-hover-background: var(--button-hover);
	
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Login Page */

/* Amend login background by moving the background image */
.login__wrapper {
	background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)), url('/-1329565212/Handler/Picture/GU/F/ThemeImages/tgif_login_v2.png');
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
    min-height: 85vh;
    background-color: var(--white);
    position: relative;
}

/* Amend login details section to centre */
.login__wrapper>.catfish-container {
    float: none;
    min-height: auto;
    margin-top: 3rem;
	opacity: 0.96;
}

/* Remove logo from login page above the welcome text */
.login__wrapper .page-title:before {
    display: none;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Header */

/* Change navbar background-color to black */
#main-nav {
	background-color: var(--navbar-background);
}

a.navbar-text {
	color: var(--navbar-text-mobile);
}

a.navbar-icon {
	color: var(--navbar-icon);
}

a.navbar-text:hover {
	color: var(--navbar-text-hover);
}

.navbar-burger span {
	background-color: var(--navbar-burger);
}

/* Change colour of dropdown arrows */
.content-field-navbar .navbar-link:not(.is-arrowless)::after {
    border-color: var(--navbar-arrows);
}

/* Navigation Dropdown
Static Start */

/* Change the padding and font size for the categories navigation dropdown menu */
.header-categories .navbar-dropdown .navigationmenu {
    padding-top: 0;
    padding-bottom: 0;
	font-size: 0.875rem;
	padding-left: 0.875rem;
}

/* Change the padding on the categories navigation dropdown menu */
.column .navigationmenu {
	padding-top: 3rem;
}

/* Remove the title categories from the categories navigation dropdown menu */
.header-categories .navbar-dropdown .navigationmenu .navigationmenu--title {
    display: none;
}

/* Change the colors for when selecting a category in the categories navigation dropdown menu */
.header-categories .navbar-dropdown .navigationmenu ul li.active>a {
    background-color: inherit;
    color: inherit;
}

/* Navigation Dropdown
Static End */


.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover {
    background-color: #F5F9FB;
    color: #312783;
}

.navigationmenu ul a:hover {
    background-color: #F5F9FB;
    color: #312783;
}

.homepage-banner {
	height: 600px;
	opacity: 0.6;
	background-position: right;
}

.homepage-banner-title {
	font-size: 5em;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Searchbar */

#navlower {
	background: var(--search-background);
}

#navlower .catfish-button {
    background: var(--search-button-background);
    color: var(--search-button-color);
	border: 0px;
	box-shadow: none;
}

#navlower .catfish-button:hover {
    background-color: var(--search-button-hover);
}

.search-box {
    max-width: 400px;
}

.search-box .searchbox {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    padding-left: 1rem;
	color: var(--search-text);
	border: 0px;
	box-shadow: none;
	font-weight: 500;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Breadcrumb */

section.section.breadcrumb-section.is-small {
	background-color: none;
	box-shadow: none;
}

.breadcrumb .breadcrumb-item, .breadcrumb a {
    color: var(--breadcrumb-text);
	font-weight: 500;
}

.breadcrumb a:hover {
    color: var(--breadcrumb-text-hover);
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Home */

h1.banner-title {
	font-weight: 600;
	font-size: 3rem;
}

p.banner-welcome {
	font-weight: 500;
	font-size: 2rem;
}

p.banner-begin {
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--banner-begin-text);
}

section.featured-cat {
    background: var(--featcat-background);
    height: 4rem;
    display: flex;
    align-items: center;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

section.featured-cat h2 {
    font-size: 1.5rem;
    font-weight: 500;
}

.homeFeaturedCategoriesWrapper .bestsellers h3 {
    display: none;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Categories */

.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item {
    filter: drop-shadow(2px 4px 6px rgb(151,131,120,0.2));
    -webkit-filter: drop-shadow(2px 4px 6px rgb(151,131,120,0.2));
	border-top: 0px;
}

.homeFeaturedCategoriesWrapper .category-item {
    background: var(--cat-item-background);
}

.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .product-title {
    padding: 1.5rem 0.5rem;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    background: var(--cat-title-background);
}

.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .product-title a {
    color: var(--cat-title-text);
	font-size: 1.2rem;
	font-weight: 600;
}

.homePageCategories.clearfix .listItem.grid_3.column.is-6-mobile.is-6-tablet.is-3-widescreen:hover, .sub-category-grid .listWrapper .item-box:hover {
    transition: 0.2s;
    transform: scale(1.05);
}

.homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .picture img {
    object-fit: fill;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Sub-Categories */

.sub-category-grid .listWrapper .item-box {
    filter: drop-shadow(2px 4px 6px rgb(151,131,120,0.2));
    -webkit-filter: drop-shadow(2px 4px 6px rgb(151,131,120,0.2));
	border-top: 0px;
}

.sub-category-grid .listWrapper .item-box .sub-category-item {
    background: var(--subcat-item-background);
}

.sub-category-grid .listWrapper .item-box .sub-category-item .category-title {
    padding: 1.5rem 0.5rem;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    background: var(--subcat-title-background);
}

.sub-category-grid .listWrapper .item-box .sub-category-item .category-title a {
    color: var(--subcat-title-text);
	font-size: 1rem;
	font-weight: 600;
}

.category-subcategory-section.section .listItem.grid_3.column.is-6-mobile.is-6-tablet.is-3-widescreen:hover {
	transition: 0.2s;
    transform: scale(1.01);
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Sharepoint Banner */

.share-section {
	padding-top: 0 !important;
}

.share-content-block {
    padding: 30px;
    border-radius: 6px;
}

.share-content-title {
    color: var(--primary);
}

.share-content-subtitle {
    margin-bottom: 0 !important;
	font-size: 1.44em;
}

.share-content-text {
    font-size: 16px;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Footer */

.catfish-footer {
	background-color: var(--footer-background);
	padding-top: 3rem;
	padding-bottom: 0px;
}

.catfish-footer #footerrow {
	margin-bottom: 1rem;
}

.catfish-footer ul a{
	font-weight: 500;
	padding-bottom: 0.25rem;
	color: var(--footer-text);
}

.catfish-footer ul a:hover {
    color: var(--footer-text-hover);
}

.footercopyrightrow {
	background-color: var(--footer-copyright-background);
	margin-top: 3rem;
}

.footer-copyright-text {
	font-weight: 500;
}

.footer-copyright-text a {
	color: var(--footer-copyright-text);
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Buttons */

.catfish-button, .button {
    color: var(--buttons-color);
    font-weight: bold;
	border: 0px;
	border-radius: 8px;
}

.catfish-button:active, .catfish-button.is-active, .button:active, .button.is-active,
.catfish-button:hover, .catfish-button.is-hovered, .button:hover, .button.is-hovered {
    border: 0px;
    color: var(--buttons-hover-color);
    background: var(--buttons-hover-background);
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Misc */

/* Amend the width of the reference text box on the order reference page */
.payment-info .body table tbody tr td {
	width: 200px;
	width: 100%;
}

/* --------------------------------------------------------------------------------------------------------------------------------------------- Media Queries */

@media screen and (max-width: 767px) {
	.is-header-logo {
		height: 2.6rem;
	}
	
	.column.is-6-mobile {
		width: 100%;
	}
	
	.footer-content {
		justify-content: center!important;
	}
	
	.share-content-subtitle {
		font-size: 1.2em;
	}

	.share-content-text {
		font-size: 14px;
	}
	
}

@media screen and (min-width: 1088px) {
	a.navbar-text {
		color: var(--navbar-text);
	}	
	
	.header-categories .navbar-dropdown .navigationmenu {
		padding-left: 0;
	}
	
}