/*
Theme Name: Armour Edge
Theme URI: https://www.45b.co.uk/
Author: 45b
Version: 1.0
*/

@import "style-base.css"; 

html {overflow-x: hidden;}

/*--------------------------------------------------------------
# Body
--------------------------------------------------------------*/

body {
position: relative;
  background: #fff;
  color: #000;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
}

.container {max-width: 100%;}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
  font-family: 'VinilaCompressedExtraboldOblique', Helvetica, Arial, sans-serif;
  clear: both;
  line-height: 1.2em;
  margin-bottom: 1em;}

h1 {font-size: 3em; color: #1EA2DC;}
h2 {font-size: 1.6em; color: #1EA2DC;}
h3 {font-size: 1.4em; color: #1EA2DC;}
h4 {font-size: 1.2em; color: #1EA2DC;}
h5 {font-size: 1.1em; color: #1EA2DC;}

.brand {color: #f5c76a;}
.blue {color: #1EA2DC;}

p {margin-bottom: 1.5em; font-weight: 300;}
.main-copy ul, .main-copy ol {font-weight: 300; color: #000; margin-bottom: 1.5em;}

a {text-decoration: none; color: #f5c76a;}
a:hover {text-decoration: none; color: #121414;}

strong {font-weight: bold;}

.cta-button {display: inline-block; background: #1EA2DC; color: #fff; text-transform: uppercase; border-radius: 25px; padding: 0.5em 1em; font-weight: bold;
-moz-transition: all 0.4s; 
transition: all 0.4s; 
transform: 0.4s;}
.cta-button:hover {background: #fff; color: #1EA2DC;}

html {
  margin-top: 0 !important;
}

body.admin-bar header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar header {
    top: 46px;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header {position: absolute; top: 0; left: 0; width: 100%; z-index: 2000;}

.logo {margin-top: 2em; margin-bottom: 2em; text-align: center;}
.logo img {max-width: 175px;}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

.main-menu-container {display: none; text-align: right; padding-top: 2.5em;}
.main-menu-container ul {list-style: none; margin:0; padding: 0; font-size: 1.4em; font-weight: bold;}
.main-menu-container ul li {display: inline-block; margin: 0; padding: 0.75em;}
.main-menu-container ul li a {text-transform: uppercase; color: #fff; padding: 0; margin: 0;}
.main-menu-container ul li a:hover {border-bottom: 3px solid #fff;} 
.main-menu-container ul li.current-menu-item a {border-bottom: 3px solid #fff;} 

/* The <a> inside the flag menu item */
.menu-flag > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 44px;
  height: 44px;

  padding: 0;
  font-size: 0; /* hides the text */
  line-height: 0;
}

/* Add the flag image */
.menu-flag-uk > a::before {
  content: "";
  display: block;
  width: 30px;
  height: 19px;
  background-image: url("assets/images/flag-uk.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-menu-container ul li.menu-flag a:hover {border-bottom: none;} 




/* Mobile */
.menu-wrapper {
    position: absolute;
    display: block;
	top: 20px;
	right: 0;
}

.hamburger-menu {
    position: absolute;
	top: 20px;
    right: 20px;
    z-index: 1000;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 30px;
}

body.logged-in .hamburger-menu {top: 30px;}
body.logged-in .hamburger-menu.active {top: 30px;}



/* Full-page menu styles */
.full-page-menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
	text-align: center;
    z-index: 999;
    transition: top 0.5s ease-in-out;
}

.full-page-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.full-page-menu ul li {
    margin: 0.2em 0;
}

.full-page-menu ul li a {
  	font-family: 'VinilaCompressedExtraboldOblique', Helvetica, Arial, sans-serif;
  	clear: both;
 	line-height: 1.2em;
 	margin-bottom: 1em;
	text-transform: uppercase;
    font-size: 3em;
    color: #fff;
    transition: color 0.3s;
	
}

.full-page-menu ul li a:hover {
    color: #1EA2DC;
}

.full-page-menu img.mob-logo {width: 200px; margin-bottom: 4em; margin-top: 30px;}
.full-page-menu .social {color: #fff; font-size: 1.2em;}
.full-page-menu .social a {color: #fff;}
.full-page-menu .social a:hover {color: #1EA2DC;}

/* Active menu styles */
.full-page-menu.active {
    top: 0;
}

.hamburger-menu {
  position: relative;
  width: 25px;
  height: 20px;
}

.hamburger-menu span {
  position: absolute;
  left: 0;
  width: 25px;
  height: 3px;
  background: #fff;
  border-radius: 2px;
  transition: 0.3s;
}

.hamburger-menu span:nth-child(1) { top: 0; }
.hamburger-menu span:nth-child(2) { top: 8px; }
.hamburger-menu span:nth-child(3) { top: 16px; }

/* Active */
.hamburger-menu.active span:nth-child(1) {
  top: 8px;
  transform: rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
  top: 8px;
  transform: rotate(-45deg);
}





button:focus {outline: none;}

.hero-mobile {display: block;}
.hero-desktop {display: none;}

/* MOBILE */
.mobile-hero-image {position: relative; height: 400px;background-position: center center; background-repeat: no-repeat; background-size: cover;}



/* MASK LAYER */
.mobile-mask {	
  position: absolute;
  top: 0;
  inset: 0;
  /*height: 500px;*/
  z-index: 2;
  /*background-color: #161616;*/
  -webkit-background-image: url('assets/images/mask-system2.png');
  -webkit-background-repeat: no-repeat;
  -webkit-background-size: cover;
  -webkit-background-position: top center;
  background-image: url('assets/images/mask-system2.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}


.mobile-mask-home {
  -webkit-background-image: url('assets/images/mobile-mask-home.png');
  background-image: url('assets/images/mobile-mask-home.png');
}
.mobile-mask-about {
  -webkit-background-image: url('assets/images/mobile-mask-about.png');
  background-image: url('assets/images/mobile-mask-about.png');
}
.mobile-mask-system {
  -webkit-background-image: url('assets/images/mobile-mask-system2.png');
  background-image: url('assets/images/mobile-mask-system2.png');
  -webkit-background-size: contain;
  background-size: contain;
}

.mobile-hero-content {background: #212121; color: #fff; padding: 2em; text-align: center;}

.hero-mask-layer {display: none;}
.hero-content-box {position: relative; margin-top: 200px; width: 105%; background: #212121; padding: 2em!important; text-align: center;}

.hero-content-box::before {
  content: "";
  position: absolute;
  top: 0;              /* anchor to the top of the box */
  left: 0;
  width: 100%;
  height: 50px;
  transform: translateY(-100%); /* pulls it above the box */
  pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,64 C240,0 480,120 720,64 C960,8 1200,120 1440,48 L1440,120 L0,120 Z' fill='%23212121'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


/* BACKGROUND SLIDER */
/* BACKGROUND SLIDER WRAPPER */
.hero {
  position: relative;
}

.hero-bg-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
  min-height: 500px;
}

/* EACH SLIDE */
.hero-bg {
  position: absolute;
  inset: 0;
  /*background-size: cover;
  background-position: center;*/
  background-position: top right;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 1.1s ease, opacity 1.1s ease;
}

/* STATES */
.hero-bg.pos-right { transform: translateX(100%); opacity: 0; }
.hero-bg.pos-center { transform: translateX(0); opacity: 1; z-index: 2; }
.hero-bg.pos-left { transform: translateX(-100%); opacity: 0; z-index: 1; }

/* TEMP: disable transitions when snapping */
.hero-bg.no-trans { transition: none !important; }


/* Background image (slides underneath) */
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* MASK LAYER */
.hero-mask-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  /*background-color: #161616;*/
  -webkit-background-image: url('assets/images/mask-system.png');
  -webkit-background-repeat: no-repeat;
  -webkit-background-size: cover;
  -webkit-background-position: left center;
  background-image: url('assets/images/mask-system.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
}
.hero-mask-layer {
/* Shift left more as screen gets smaller */
  background-position: clamp(0, -10vw, 0%) 50%;
}


.hero-mask-layer-home {
  -webkit-background-image: url('assets/images/mask-home.png');
  background-image: url('assets/images/mask-home.png');
}
.hero-mask-layer-default {
  -webkit-background-image: url('assets/images/mask-default.png');
  background-image: url('assets/images/mask-default.png');
}


/* Content above everything */


/* SLIDE CONTENT */
.hero-content {
  position: relative;
  z-index: 5;
  height: 100%; 
  padding-top: 40px;
}

.hero-title {
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 0.9;
  color: #fff;
  margin-bottom: 0;
}
.hero-text h1 {
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 0.9;
  color: #fff;
  margin-bottom: 0.5em;
}

.hero-text h1 span {
  color: #1EA2DC;
}

.hero-text {
  max-width: 620px;
  font-size: 1.1em;
  line-height: 1.6;
  opacity: 0.9;
}

h4.hero-subtext {
  color: #fff;
}
.hero-subtext a {
  color: #fff;
}
.hero-subtext a:hover {
  color: #1EA2DC;
}


.hero-eyebrow-icon img {max-height: 100px; max-width: 100px; margin: 0 0 2em 0; padding: 0;}


/* TEXT FADE TRANSITION */
.hero-content .fade-text {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.hero-content .is-fading-out {
  opacity: 0;
  transform: translateY(6px);
}

.hero-content .is-fading-in {
  opacity: 1;
  transform: translateY(0);
}


/* PAGINATION */
.hero-pagination {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}

.dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 15px;
  height: 15px;
  border: 1px solid #f5c76a;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.dot.active {
  background: #f5c76a;
}

/* MOBILE */
@media (max-width: 768px) {
  .hero-mask {
    display: none;
  }

  .hero {
    background: #111;
  }

  .hero-content {
    text-align: left;
  }

  .hero-text {
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .hero-mask-layer {
    -webkit-mask-position: center;
    mask-position: center;
  }
}


/* Mobile only */
@media (max-width: 767.98px) {

  /* Make the hero column a flex stack */
  .hero-content .col-lg-6 {
    display: flex;
    flex-direction: column;
  }

  /* Put pagination above the fade-text block */
  .hero-content .col-lg-6 .hero-pagination {
    order: 1;
    margin-top: 0 !important;
    margin-bottom: 1rem;
  }

  .hero-content .col-lg-6 .fade-text {
    order: 2;
  }
}




/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
.static-header-about {width: 100%; height: 400px; text-align: center; background-image: url("assets/images/head-about.png"); background-position: center center; background-repeat: no-repeat; background-size: cover;}
.static-header-about-mask {width: 100%; height: 400px; text-align: center; background-image: url("assets/images/mobile-mask-about.png"); background-position: center center; background-repeat: no-repeat; background-size: cover;}
.about-page-content {width: 100%; padding-top: 4em; padding-bottom: 4em; background: #212121; color: #fff;}
.about-page-content h1 {font-size: clamp(2.4rem, 5vw, 5rem); color: #1EA2DC; ; text-transform: uppercase; margin-bottom: 1rem;}
.about-page-content a {display: inline-block; background: #1EA2DC; color: #fff; text-transform: uppercase; border-radius: 25px; padding: 0.5em 1em; font-weight: bold;}
.about-page-content a:hover {background: #fff; color: #1EA2DC;}


.static-header {width: 100%; text-align: center; background-image: url("assets/images/head-default.png"); background-position: center center; background-repeat: no-repeat; background-size: cover;}
.static-page-title {width: 100%; margin-top: 200px;}
.static-page-title h1 {font-size: clamp(2.4rem, 5vw, 5rem); color: #1EA2DC; ; text-transform: uppercase; margin-bottom: 1rem;}

.hero-text a {display: inline-block; background: #1EA2DC; color: #fff; text-transform: uppercase; border-radius: 25px; padding: 0.5em 1em; font-weight: bold;}
.hero-text a:hover {background: #fff; color: #1EA2DC;}

.block-contact {background: #EEF1F0; color: #1b1b1b; padding-top: 4em; padding-bottom: 4em; font-size: 1.1em;}
.block-contact h2 {font-size: clamp(2.4rem, 5vw, 5rem); color: #1EA2DC; ; text-transform: uppercase; margin-bottom: 0.5em;}
.block-contact img, .page-image img {border-radius: 25px; margin-bottom: 2em;}
.block-contact a {color: #1b1b1b;}
.block-contact a:hover {color: #1EA2DC;}

.main-content {padding-top: 4em; padding-bottom: 4em; font-size: 1.1em;}

/* News */
.news-container {background: #EEF1F0; padding: 1em; padding-top: 4em; padding-bottom: 4em;}


.news-panel {background: #212121; border-radius: 20px; height: 100%;
-moz-transition: all 0.4s; 
transition: all 0.4s; 
transform: 0.4s;}
.news-panel:hover {transform: scale(1.02);}

.news-panel-text {padding: 1em 2em; color: #fff;}
.news-panel-text h4 {font-family: "Barlow Condensed", sans-serif; color: #fff; margin: 0; line-height: 1; font-size: 2em;}

.news-image {position: relative; height: 400px; width: 100%; margin: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 20px;}

.news-page-title {width: 100%; margin-top: 200px; margin-bottom: 2em; text-align: left;}
.news-page-title h1 {font-size: clamp(2rem, 4vw, 4rem); color: #1EA2DC; ; text-transform: uppercase; margin-bottom: 0;}


/* Pagination */
.pagination ul {padding: 3em 0 3em 0;}
.pagination ul li.page-item {padding: 0; border: 0;}
.pagination ul li.page-item {margin-right: 5px;}
.pagination ul li.page-item .page-link {font-weight: bold; background: #ddd; color: #1b1b1b; border: none; margin-left: 0; height: 50px; width: 50px; border-radius: 10px; text-align: center; display: flex; justify-content: center; align-items: center;}
.pagination ul li.page-item .page-link:hover {background: #ccc; color: #1b1b1b;}
.pagination ul li.page-item .prev, .pagination ul li.page-item .next {width: auto;} 
.pagination ul li.page-item.active span {background: #1EA2DC; color: #1b1b1b; border: none; margin-left: 0;}
.pagination ul li.page-item.active span:hover {background: #1EA2DC; color: #1b1b1b; border: none; margin-left: 0;}


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

footer {background: #212121;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  padding-top: 4em; padding-bottom: 4em;
}

footer p {font-size: 1em; line-height: 1.2em; margin-bottom: 0.5em;}
footer a {color: #fff; text-decoration: none;}
footer a:hover {color: #1EA2DC;}
footer h3 {color: #1EA2DC;}

footer ul {list-style: none; margin: 0; padding: 0;}
.footer-col {margin-bottom: 3em;}


.footer-logo, .copyright {text-align: left;}
.footer-logo img {max-width: 200px; margin-bottom: 2em;}

.footer-social {}
.footer-social i {margin-right: 5px;}

.legal {text-align: center; font-size: 0.8em;}


/* Form */
label {font-family: "Barlow Condensed", sans-serif; width: 100%;}
.wpcf7-submit {background: #1EA2DC; color: #fff; padding: 0.5em 2em; border-radius: 20px; border: 0; text-transform: uppercase; font-weight: bold;}
.wpcf7-submit:hover {color: #1EA2DC; background: #fff;}
.grecaptcha-badge {visibility: hidden !important;}

.form-control {border: 0;}
.wpcf7-text {border: none!important; color: #fff;}
input[type="text"], input[type="email"], textarea {width: 100%; font-family: "Barlow Condensed", sans-serif; height: auto; font-size: 1.0em; padding: 0.5em; background-color: #fff!important; color: #1b1b1b!important; border: 0; border-radius: 20px;}
textarea.form-control {height: 100px!important; border-radius: 20px;font-size: 1.0em;}
.wpcf7-not-valid-tip {color: #f00; font-family: "Barlow Condensed", sans-serif;}
.wpcf7-spinner {display: block; margin: 0 auto;}

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

footer {background: #212121;
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  padding-top: 4em; padding-bottom: 4em;
}

footer p {font-size: 1em; line-height: 1.2em; margin-bottom: 0.5em;}
footer a {color: #fff; text-decoration: none;}
footer a:hover {color: #1EA2DC;}
footer h3 {color: #1EA2DC;}

footer ul {list-style: none; margin: 0; padding: 0;}
.footer-col {margin-bottom: 3em;}


.footer-logo, .copyright {text-align: left;}
.footer-logo img {max-width: 200px; margin-bottom: 2em;}

.footer-social {}
.footer-social i {margin-right: 5px;}

.legal {text-align: center; font-size: 0.8em;}


/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/* MEDIA QUERIES */

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

}

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

}

@media screen and (min-width: 640px) {
.hero-content-box {margin-top: 400px;
}

@media screen and (min-width: 960px) {
.container {max-width: 90%;}
.logo img {max-width: 250px;}
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.hero-bg {
  background-position: right;
	background-size: cover;}
.hero-mobile {display: none;}
.hero-desktop {display: block;}
.main-menu-container {display: block;}
.menu-wrapper {display: none;}
.main-menu {display: block;}
.hero-content {margin-left: 4em; margin-right: 2em; margin-top: 0;}	
.hero-content-box {height: 100%; align-items: center; background: transparent; text-align: left; margin: 0; padding: 0!important;}
.hero-content-box::before {
  display: none;
}
h4.hero-subtext {
  position: absolute;
  bottom: 50px;
}
.static-header-about {height: 70vh;}
.static-header-about-mask {height: 70vh;}
.hero-pagination {
  justify-content: flex-start;
}
.mobile-mask {display: none;}
.hero-mask-layer {display: block;}
.logo {text-align: left;}
.footer-logo, .copyright {text-align: right;}

}

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

}

@media screen and (min-width: 1700px) {
.hero-bg {
  background-size: contain;
}
}

@media print {
/* Print CSS rules go here */

}