/* =====================================================
   GLOBAL BRAND COLOR + MOTION
===================================================== */

:root {
  --brand-blue: #1E54FF;
  --brand-blue-light: #D8E9FF;
  --brand-dark: #000000;
  --brand-page-bg: #f2f2f2;
  --brand-footer: #262626;
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =====================================================
   PAGE BACKGROUND
===================================================== */

body,
html,
.master-wrapper-page,
.master-wrapper-content,
.content,
.page,
.section,
.section.has-background-default,
.has-background-default {
  background-color: var(--brand-page-bg) !important;
}


/* =====================================================
   HEADER / NAVBAR BRAND COLOURS
===================================================== */

.header-spacer,
.ict-header-spacer,
#main-nav,
nav#main-nav,
.navbar.ict-navbar,
.content-field-navbar {
  background-color: var(--brand-dark) !important;
  border: none !important;
  box-shadow: none !important;
}

#main-nav::before,
#main-nav::after,
.navbar.ict-navbar::before,
.navbar.ict-navbar::after,
.content-field-navbar::before,
.content-field-navbar::after {
  background-color: var(--brand-dark) !important;
}

#main-nav .container,
#main-nav .navbar-brand,
#main-nav .navbar-menu,
#main-nav .navbar-start,
#main-nav .navbar-end,
#main-nav .navbar-item,
#main-nav .navbar-link {
  background-color: var(--brand-dark) !important;
}

#main-nav .navbar-item,
#main-nav .navbar-link,
#main-nav a.navbar-item,
#main-nav .navbar-item > a {
  color: #ffffff !important;
}

#main-nav .navbar-item:hover,
#main-nav .navbar-link:hover,
#main-nav a.navbar-item:hover,
#main-nav .navbar-item > a:hover {
  color: #ffffff !important;
  background-color: var(--brand-dark) !important;
}

#main-nav .navbar-item:focus,
#main-nav .navbar-link:focus,
#main-nav a.navbar-item:focus {
  color: #ffffff !important;
  background-color: var(--brand-dark) !important;
}

#main-nav .navbar-item.is-active,
#main-nav .navbar-link.is-active,
#main-nav a.navbar-item.is-active {
  color: #ffffff !important;
  background-color: var(--brand-dark) !important;
}


/* =====================================================
   CART / ADMIN BUTTONS
===================================================== */

#main-nav .buttons,
#main-nav .navbar-item.is-hidden-touch,
#main-nav .navbar-item.is-hidden-touch .buttons {
  background-color: var(--brand-dark) !important;
}

#main-nav .button,
#main-nav a.button,
#main-nav .basket-link,
#main-nav .admin-link,
#main-nav a.basket-link,
#main-nav a.admin-link,
#main-nav .button.is-primary,
#main-nav .button.is-small.is-primary {
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#main-nav .button:hover,
#main-nav a.button:hover,
#main-nav .basket-link:hover,
#main-nav .admin-link:hover,
#main-nav a.basket-link:hover,
#main-nav a.admin-link:hover,
#main-nav .button.is-primary:hover,
#main-nav .button.is-small.is-primary:hover {
  background-color: #003bd6 !important;
  border-color: #003bd6 !important;
  color: #ffffff !important;
}

#main-nav .button i,
#main-nav .basket-link i,
#main-nav .admin-link i {
  color: #ffffff !important;
}


/* =====================================================
   DROPDOWN MENU
===================================================== */

#main-nav .has-dropdown .navbar-dropdown,
#main-nav .navbar-dropdown {
  background-color: #ffffff !important;
  border-top: none !important;
}

#main-nav .has-dropdown .navbar-dropdown .navbar-item,
#main-nav .navbar-dropdown .navbar-item,
#main-nav .navbar-dropdown a.navbar-item {
  color: var(--brand-dark) !important;
  background-color: #ffffff !important;
}

#main-nav .has-dropdown .navbar-dropdown .navbar-item:hover,
#main-nav .navbar-dropdown .navbar-item:hover,
#main-nav .navbar-dropdown a.navbar-item:hover {
  color: var(--brand-dark) !important;
  background-color: var(--brand-blue-light) !important;
}


/* =====================================================
   NAVBAR BURGER / MOBILE MENU
===================================================== */

#main-nav .navbar-burger {
  color: #ffffff !important;
  background-color: transparent !important;
}

#main-nav .navbar-burger span {
  background-color: #ffffff !important;
}

@media (max-width: 1023px) {
  #main-nav,
  #main-nav .navbar-menu,
  #main-nav .navbar-brand,
  #main-nav .navbar-start,
  #main-nav .navbar-end {
    background-color: var(--brand-dark) !important;
  }

  #main-nav .navbar-item,
  #main-nav .navbar-link,
  #main-nav a.navbar-item {
    color: #ffffff !important;
  }

  #main-nav .navbar-dropdown {
    background-color: #ffffff !important;
  }

  #main-nav .navbar-dropdown .navbar-item,
  #main-nav .navbar-dropdown a.navbar-item {
    color: var(--brand-dark) !important;
  }
}


/* =====================================================
   BANNER - FULL WIDTH RESPONSIVE
===================================================== */

.homebanners,
.banner.banners1,
.banner.banners1 .row_container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.banner.banners1 .flexslider,
.banner.banners1 .flex-viewport {
  height: 450px !important;
  min-height: 450px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.banner.banners1 .slides > li {
  height: 450px !important;
  background-size: cover !important;
  background-position: center center !important;
}

.banner.banners1 .slides > li a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.banner.banners1 .slides > li img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.banner.banners1 .slides > li.section,
.banner.banners1 .slides > li.is-large,
.banner.banners1 .slides > li.is-medium {
  padding: 0 !important;
}


/* Large screens */

@media (min-width: 1400px) {
  .banner.banners1 .flexslider,
  .banner.banners1 .flex-viewport {
    height: 600px !important;
    min-height: 600px !important;
  }

  .banner.banners1 .slides > li {
    height: 600px !important;
  }
}


/* Medium screens */

@media (max-width: 1199px) {
  .banner.banners1 .flexslider,
  .banner.banners1 .flex-viewport {
    height: 380px !important;
    min-height: 380px !important;
  }

  .banner.banners1 .slides > li {
    height: 380px !important;
  }
}


/* Tablets */

@media (max-width: 768px) {
  .banner.banners1 .flexslider,
  .banner.banners1 .flex-viewport {
    height: 280px !important;
    min-height: 280px !important;
  }

  .banner.banners1 .slides > li {
    height: 280px !important;
  }
}


/* Mobile */

@media (max-width: 480px) {
  .banner.banners1 .flexslider,
  .banner.banners1 .flex-viewport {
    height: 180px !important;
    min-height: 180px !important;
  }

  .banner.banners1 .slides > li {
    height: 180px !important;
  }
}


/* =====================================================
   HOMEPAGE PRODUCT CATEGORY HOVER (ZOOM + BRAND BLUE)
===================================================== */

.ict-left-column .block.has-text-inherit,
.ict-right-column .block.has-text-inherit {
  overflow: hidden !important;
}

.ict-left-column .ict-sub-title,
.ict-right-column .ict-sub-title {
  transition: color 0.35s ease !important;
}

.ict-left-column .ict-image img,
.ict-right-column .ict-image img {
  transition: transform 0.35s ease !important;
}

.ict-left-column:hover .ict-sub-title,
.ict-right-column:hover .ict-sub-title {
  color: var(--brand-blue) !important;
}

.ict-left-column:hover .ict-image img,
.ict-right-column:hover .ict-image img {
  transform: scale(1.08) !important;
}