@charset "utf-8";
/* CSS Document */
/** Hand coded by Rose Williams BA(Hon's), Copyright 2025 Brighter Applications Ltd. for Goxhill IT ( a local trading name for Brighter Applications Ltd), Arkle House, Chapel Street, Goxhill, DN19 7JJ**/
.container, .sparkcontainer {width: 100%;}
header, main, footer {width: 100%;}

/* LAYER CONTROL */
.overlay-cookie-container {z-index: 300;}
.burger-nav {z-index: 200;}
.overlay-container {z-index: 100;}
.spark {z-index: 50; }
.spark2 {z-index: 49;}
.overlay-container {z-index: 15;}
.CTA {z-index:8;}
.Main-Content {z-index:7;}
.Cat-display {z-index:6;}
footer {z-index:5;}

  .spark {position: relative; animation: sparkLoop 60s linear infinite; }
  .spark {width: 55px; top:-19px; left:75%;}
  .spark2 {position: absolute;animation: sparkLoopLong 45s ease-in-out infinite;}
  .spark2 {width: 55px;  margin-top:-21px; left:10%;}
  @keyframes sparkLoop {
    0% {-webkit-transform: translateX(-100vw) scale(1) rotate(0deg);transform: translateX(-100vw) scale(1) rotate(0deg);}
    5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
    9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
    11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
    20% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    67% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    68% {-webkit-transform: translateX(0px) scale(0.4) rotate(-75deg);transform: translateX(0px) scale(0.4) rotate(-75deg);}
    69% {visibility: hidden; -webkit-transform: translateX(0px) scale(0) rotate(360deg);transform: translateX(0px) scale(0) rotate(360deg);}
    100% {visibility: hidden; -webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}}
  @-webkit-keyframes sparkLoop {
    0% {-webkit-transform: translateX(-100vw) scale(1) rotate(0deg);transform: translateX(-100vw) scale(1) rotate(0deg);}
    5% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    7% {-webkit-transform: translateX(0px) scale(0.8) rotate(5deg);transform: translateX(0px) scale(0.8) rotate(5deg);}
    9% {-webkit-transform: translateX(0px) scale(1.2) rotate(5deg);transform: translateX(0px) scale(1.2) rotate(5deg);}
    11% {-webkit-transform: translateX(0px) scale(0.8) rotate(-10deg);transform: translateX(0px) scale(0.8) rotate(-10deg);}
    20% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    67% {-webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}
    68% {-webkit-transform: translateX(0px) scale(0.4) rotate(-75deg);transform: translateX(0px) scale(0.4) rotate(-75deg);}
    69% {visibility: hidden; -webkit-transform: translateX(0px) scale(0) rotate(360deg);transform: translateX(0px) scale(0) rotate(360deg);}
    100% {visibility: hidden; -webkit-transform: translateX(0px) scale(1) rotate(0deg);transform: translateX(0px) scale(1) rotate(0deg);}}
  @keyframes sparkLoopLong {
    0% {-webkit-transform: translateX(-100vw)  scale(0.8);transform: translateX(-100vw) scale(0.8) ;}
    0.05% {-webkit-transform: translateX(-50vw) scale(1.2);transform: translateX(-50vw)  scale(1.2) ;}
    20% {-webkit-transform: translateX(0px) scale(0.8);transform: translateX(0px) scale(0.8) ;}
    45% {-webkit-transform: translateX(0px) scale(1);transform: translateX(0px) scale(1);}
    70% {-webkit-transform: translateX(0px) scale(1);transform: translateX(0px) scale(1);}
    75% {visibility: visible; -webkit-transform: translateX(0px) scale(0.8);transform: translateX(0px) scale(0.8);}
    80% {visibility: hidden; -webkit-transform: translateX(50vw) scale(0);transform: translateX(50vw) scale(0);}
    82% {visibility: visible; -webkit-transform: translateX(-10vw) scale(0.5);transform: translateX(-10vw) scale(0.5);}
    85% {visibility: visible; -webkit-transform: scale(1);transform: scale(1);}
    100% {visibility: visible; -webkit-transform: translateX(-100vw) scale(1);transform: translateX(-100vw) scale(1);}}
  @-webkit-keyframes sparkLoopLong {
    0% {-webkit-transform: translateX(-100vw) translateY(150px) scale(0.8) rotate(540deg);transform: translateX(-100vw) translateY(150px) scale(0.8) rotate(540deg);}
    0.05% {-webkit-transform: translateX(-50vw) translateY(35px) scale(1.2) rotate(540deg);transform: translateX(-50vw) translateY(35px) scale(1.2) rotate(540deg);}
    20% {-webkit-transform: translateX(0px) scale(0.8) rotate(0deg);transform: translateX(0px) scale(0.8) rotate(0deg);}
    45% {-webkit-transform: translateX(0px) scale(1);transform: translateX(0px) scale(1);}
    70% {-webkit-transform: translateX(0px) scale(1);transform: translateX(0px) scale(1);}
    75% {visibility: visible; -webkit-transform: translateX(0px) scale(0.8);transform: translateX(0px) scale(0.8);}
    80% {visibility: hidden; -webkit-transform: translateX(50vw) scale(0);transform: translateX(50vw) scale(0);}
    82% {visibility: visible; -webkit-transform: translateX(-10vw) scale(0.5);transform: translateX(-10vw) scale(0.5);}
    85% {visibility: visible; -webkit-transform: scale(1);transform: scale(1);}
    100% {visibility: visible; -webkit-transform: translateX(-100vw) scale(1);transform: translateX(-100vw) scale(1);}}

/**used on the main banner CTA buttons**/
.BigButton{opacity:0; animation: scale 7s forwards;   animation-delay: 2s; animation-iteration-count: 1;}
  @keyframes scale {
    0% {transform: scale(0.5) ; opacity:0;}
    100% {transform: scale(1,1); opacity:1;}}
  @-webkit-keyframes scale {
    0% {transform: scale(0.5) ; opacity:0;}
    100% {transform: scale(1,1); opacity:1;}}

  /*** Cookie banner slides in - also need to make it exit more gracefully**/
  .overlay-cookies { width: 80%; top:0; margin: auto; display: grid; grid-template-rows: auto; justify-items: center;animation: slidedown 1s }
  @keyframes slidedown {
    0% {-webkit-transform: translateY(-200vh);transform: translateY(-200vh);}
    100% {-webkit-transform: translateY(0px);transform: translateY(0px);}}
  @-webkit-keyframes slidedown {
    0% {-webkit-transform: translateY(-200vh);transform: translateY(-200vh);}
    100% {-webkit-transform: translateY(0px);transform: translateY(0px);}}

/** Banner and form slide in behaviour **/
  .slide-in-left {opacity:0; -webkit-animation: slide-in-left 1s ease-in 0.5s forwards; animation: slide-in-left 2s cubic-bezier(0.230, 1.000, 0.320, 1.000) both; }
@keyframes slide-in-left {
  0% {-webkit-transform: translateX(-1000px); transform: translateX(-1000px) ;
    -webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 0;}
  100% {-webkit-transform: translateX(0);transform: translateX(0) ;
    -webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-filter: blur(0);filter: blur(0); opacity: 1;}}
    @-webkit-keyframes slide-in-left {
  0% {-webkit-transform: translateX(-1000px); transform: translateX(-1000px) ;
    -webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-filter: blur(20px);filter: blur(20px); opacity: 0;}
  100% {-webkit-transform: translateX(0);transform: translateX(0) ;
    -webkit-transform-origin: 50% 50%;transform-origin: 50% 50%;-webkit-filter: blur(0);filter: blur(0); opacity: 1;}}

.GradientH-Green
{ background: linear-gradient(90deg,rgba(1, 244, 159, 1) 0%, rgba(185, 110, 217, 1) 100%);}
header, #FooterLinks, .burger-nav
{background: linear-gradient(90deg,rgba(3, 8, 50, 1) 0%, rgba(1, 127, 238, 1) 100%); }

body {background: #081d47; background: linear-gradient(90deg, #1761EE 0%, #0D3788 80%);}
.dark {background: #081d47; background: linear-gradient(90deg, #160428 11%, #21226B 48%, #091F41 76%);}

.Top-Title, fieldset {background: linear-gradient(90deg,rgba(77, 14, 139, 1) 20%, rgba(32, 99, 201, 0.5) 76%); }

/***** COLOUR CONTROL ******/
.iconwhite:hover svg, .iconwhite:hover img
{ background: #01F49F;}
.close-menu-btn:hover {}
/** grey drag button **/
.svgcontrol svg
{background: #bcc6ca; background: linear-gradient(0deg,rgb(212, 212, 212) 87%, rgb(105, 107, 107) 100%); min-width: max-content;}
/** white icon backgrounds **/
.iconwhite svg,.iconwhite img
{background: #EBECEC; background: linear-gradient(0deg,rgba(235, 236, 236) 87%, rgb(148, 148, 150) 100%); }

/******* Fonts ******/
h1{  font-weight: 400; letter-spacing: 0.08em;}
h2 {font-weight: 400;  letter-spacing: 0.04em;}
h3, h4, .heading {font-weight: 400;  letter-spacing: 0.04em;}
p, h1, h2, h3,h4,h5 {margin-bottom: 10px;}
b, strong {font-weight: 600;}
h1{font-size: 1.9em; line-height: normal;}
h2 {font-size: 1.6em; line-height: normal}
h3 {font-size: 1.4em; line-height: normal}
h4, h5, .heading {font-size:1.3em; line-height:normal;}
body {font-size: 0.9em; color:#ffffff; font-family: "Roboto", sans-serif;}
footer .bottom, small, /*.breadcrumb,*/ .overlay-cookie-text {font-size: 0.7em;}
header, footer{font-weight: 400;}
.phone {font-weight: 600;  letter-spacing: 0.0em; font-size: 1.7em; color:#01F49F;}

/******* Lists and tables  ******/
ul {margin:0;padding-left: 20px;}
li {margin:0; padding-left: 10px;}

/******* Reset  ******/
* {margin: 0; padding: 0; box-sizing: border-box;}
*:before, *:after { box-sizing: border-box;}
img, svg {max-width: 100%;}
a {text-decoration: none; color:#01F49F; font-weight: 500; }
.hide, .hidden {display: none;}

.show  {display:block;}
.showflex  {display:flex;}

/******* CORE  ******/
body {min-height: 100vh;display: grid; grid-template-rows: auto 1fr auto; 	margin:0; position: relative;
  font-family: 'Montserrat', sans-serif; letter-spacing: 0.03em; font-weight: 300;  line-height: 1.5; overflow-x: hidden;}

.top {padding:10px 20px;}
.wrap {padding:3px 20px;}
.bottom {padding:10px 20px;}
.sparkcontainer   { margin-left: auto;  margin-right: auto; height: 2px; }
.noscroll {overflow: hidden;}
.lock-scroll {overflow: hidden;}
.flex {display: flex; grid-gap:10px;}

/******* tools  ******/
.textmid {text-align: center;}
.no-blur {backdrop-filter: blur(0px);}
.blur {backdrop-filter: blur(15px); }
.top {align-self: start;}

/****** changed content according to screen size ******/
.panel-call {align-items: center; grid-gap:10px; display: block;}
.PayKlarna {display:none;}
.Klarna {display:block;}

/****** ICONS ******/
svg.svgblue path, .svgcontrol {fill: rgb(3, 8, 50);}
svg.svgwhite path {fill: rgb(236, 236, 236);}
.iconlink:hover svg.svgwhite path {fill: rgb(1, 244, 159);} /*01F49F*/
.iconwhite svg, .iconwhite img, .svgcontrol svg{border: 1px solid #030C38; border-radius: 5px; overflow: hidden;}
.iconwhite.close-menu-btn {border-radius: 5px; overflow: hidden;}
.iconlink svg, .iconwhite svg,.iconwhite img, .svgcontrol svg
{display: flex; align-items: center; justify-content: center; padding: 0px;  object-fit: contain;}
.iconlink, a.whapp-but, .split, .topcnrlink
{align-items: center;display: flex; grid-gap:10px; }/* force vertical aligned in a row */
.foot-left-links .iconlink, .main-nav a, a.whapp-but{min-width: max-content; }
.foot-left-links{display: grid; grid-gap:10px;}

.iconwhite svg,.iconwhite img{height: 2em; width:2em; }
.iconlink svg, .iconlink img {height: 1.5em; width:1.5em; }
.burger-nav .close-menu-btn {position: absolute; top: 29px; right: 20px; cursor: pointer;}

/********************* HEADER *******************/
header a {color: #EBECEC;}
.top-corner a:hover, footer a:hover {color: #01F49F;}
header .logo img {height:40px;}
header .top {display: grid; grid-template-columns: 1fr auto; grid-row-gap: 0; align-items: center; column-gap: 20px;}
header .bar, main .bar {height:5px}
/********************* NAV ******************/
nav .top-corner  {display: none;}
.main-nav{display: none;}
.burger-nav .mainlinks a, .burger-nav .othlinks a {font-size: 1.2em; }
.burger-nav .mainlinks a, .burger-nav .othlinks a {margin: 0 0 15px 0; padding: 15px 20px; max-width: none; width: 100%;}
.burger-menu {display: flex !important;flex-direction: column;
  cursor: pointer;  padding: 8px;  margin: 0; width: 40px;  height: 40px;
  justify-content: space-between;  align-self: flex-end;
  margin-bottom: 20px;  order: 2;
  border: 1px solid #030C38; border-radius: 5px;}
.burger-line {width: 100%;  height: 4px;background: #030C38;  border-radius: 2px;transition: all 0.6s ease;}
.burger-menu.active .burger-line:nth-child(1) {transform: rotate(360deg);}
.burger-menu.active .burger-line:nth-child(2) {transform: rotate(-360deg);}
.burger-menu.active .burger-line:nth-child(3) {transform: rotate(360deg);}
.burger-nav .mainlinks {border-bottom: 1px solid #EBECEC; padding: 0 0 20px 0; margin: 0 0 20px 0;}
.burger-nav {width: 100%; right: -100%;padding: 18px 20px;
      position: fixed !important; top: 0;  height: 100%;
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); border-left: 2px solid #C95BE4;
      flex-direction: column; justify-content: flex-start; align-items: stretch;
      grid-template-columns: none !important; grid-column-gap: 0; justify-self: stretch;
      transition: right 0.6s ease 0.5s, opacity 0.6s ease 0.5s, visibility 0.6s ease 0.5s; opacity: 0;
    box-shadow:-7px 7px 6px rgba(32,5,58,0.3), rgba(32,5,58,0.3) -7px 7px 15px;}
.burger-nav .mainlinks a:last-child {margin-bottom: 0;}
.burger-nav .logo {height: 40px; margin:0 0 20px 0; display: block;}
.burger-nav.active {right: 0; opacity: 1; visibility: visible; }

/********************* FOOTER ******************/
footer .bar {border-bottom: 1px solid #fff;}
footer .bar .wrap{display: grid; grid-template-columns: auto auto; font-weight: 600; }
footer .bar .right
{display: flex; justify-content: flex-end;align-items: center; grid-gap:10px;}
footer .bar .right {grid-gap: 10px; }
footer .bar .right img {height: 30px;}
footer .bottom, footer .bar{background-color:#030C38; }
footer a{color: #EBECEC;}

/**.FooterLinks **/
footer .mid.show { display: grid; grid-template-columns: 1fr; grid-gap: 30px; padding-top:30px; padding-bottom: 30px;}
.foot-Right-links, .foot-left-links { margin-right: auto; align-content: center;}
.foot-Right-links {display: grid; grid-gap:20px;}
/** Call and mailing list panels **/
.panel-call { font-weight: 600; grid-gap: 10px; color: #01F49F;width: max-content;margin-top: 8px;}
.split {gap: 15px}; /*** split call panel on low res**/
.panel-mail-list {padding: 30px 0;}
/** bottom copyright bar etc **/
.bottom {box-shadow: inset 0 7px 3px -7px #558dc2; border-top: 2px solid #030C38; }
.bottom  {display: grid;grid-gap:10px;}
  .bottom .right {display: flex; text-align: left; align-items: center; grid-gap:30px; justify-content:start;}
#FooterLinks {overflow: hidden;transition: max-height 1.2s ease-in-out, visibility 1.2s ease-in-out;
    max-height: 0; display: block !important; visibility: hidden;}
#FooterLinks.visible {max-height: 1000px; visibility: visible;}
.container.foot {padding: 0 20px ;}

/********************* MAIN ******************/
main {display: grid; grid-template-rows: auto; }
.foot {display: grid; grid-template-columns: 1fr;}

/********************* CONTENT PANELS ** about to die **************/

.overlay, .overlay-cookie-text, .overlay-cookie-button
{background-color: #B3C5CD; background: url(../images/portfolio/stainless-steel.avif );background-size:cover;}
.overlay-cookie-text, .overlay-cookie-button {filter: drop-shadow(3px 3px 3px #000000); color:#030832; font-weight: 500;}
.overlay-cookie-text a {color:#030832; font-weight: 500;}
.overlay-cookie-text a {text-decoration: underline;}

/**** OVERLAYS - to replace with mr transit vers ****/
.overlay-image, .overlay{position: relative;}
.overlaybutton {position:absolute; top:15px; right:15px; display: none;}
.overlay-image{display: grid; justify-content: center;}
.overlay-image img {max-width: 100%; }
.overlay { width: 94%; top:30px; margin: auto;}
.overlay-container {position: fixed; top:20vh; left:0; display: block;background-color: rgba(0,0,0,0.5); width: 100%; max-height: fit-content; overflow-y: auto;}
.overlay-cookie-container {position: fixed; top:0;  margin-left: auto; margin-right: auto; display: block;  width: 100%; height: 100%; overflow-y: auto;}
.overlay-cookie-text {width: 100%;padding:10px 20px;}
.overlay-cookie-button {width:200px; justify-items: center; padding: 0 0px 15px 0px;}
.overlay-cookie-text p {margin: 0; text-align: center;}
.overlay-cookie-text{border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;}
.overlay-cookie-button {border-bottom-left-radius: 50%; border-bottom-right-radius: 50%}

/****** PAGE SPECIFIC ******/
.directions {grid-area: 2 / 1;}
.directions2 {grid-area: 2 / 1;}
article{padding:40px 20px; }/* privacy and short only*/
article:last-child{border-bottom: none;}
section{ padding-bottom: 30px;}

/********************* GOXIT FORMS ******************/
/* form inline is one field one button*/
form.inline {width: 100%; display: flex; grid-template-columns: auto auto; align-items: center;}
form.inline input, form.inline textarea, form.inline button{display: inline-block;}
form.inline input[type="submit"] {width: max-content;}

input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select,button
{display: block; width: 100%;border:1px solid #030C38; border-radius: 13px; margin:0px 8px 0px 0;padding:10px;
  box-sizing: border-box;margin-left :0; color:#192733; -webkit-appearance: none;}
input[type="text"],input[type="email"],input[type="tel"],input[type="password"],textarea,select{background-color: #ffffff;}
input[type="radio"], input[type="checkbox"]  {accent-color: #030832;}
input[type="text"]:focus,input[type="email"]:focus,input[type="tel"]:focus,input[type="password"]:focus,textarea:focus,select:focus,button:focus{outline:none; border: 2px solid #01F49F; box-shadow:0 7px 9px -7px #030832;}
input[type="text"]:disabled, input[type="email"]:disabled  {background-color: #B3C5CD;}
input[type="text"]:hover,input[type="email"]:hover,input[type="tel"]:hover,input[type="password"]:hover,select:hover,textarea:hover,button:hover{box-shadow:7px 7px 5px rgba(32,5,58,0.3), rgba(32,5,58,0.3) 7px 7px 5px;}
input[type="button"],input[type="submit"]{ padding-left:25px; padding-right: 25px;}
input.PinkButton[type="submit"]:disabled  {color:#9E9999; pointer-events: none; background:linear-gradient(0deg,rgba(36, 39, 55, 1) 60%, rgba(36, 39, 55, 1) 100%); }

/********************* BUTTONS ******************/
.BigButton{
  padding: 15px 60px;
  width: max-content;
  border: 1px solid #030C38;
  border-radius: 13px;
  color: #030C38 !important;
  text-align: center;
  font-weight: 600;   font-size: 1.2em;
  display: flex;  align-items: center;  justify-content: center;
  transition: all 0.5s ease; box-shadow: inset 0 -10px 10px 10px #20053A;
  box-shadow:7px 7px 5px rgba(32,5,58,0.3), rgba(32,5,58,0.3) 7px 7px 5px;
  background:linear-gradient(0deg,rgba(1, 244, 159, 1) 60%, rgba(0, 252, 252, 1) 100%);
  cursor: pointer; transition: all 1s ease;
}
.Top-Title .BigButton { width: 80%;}

.main-nav a {max-width: 150px;}
.main-nav a, .burger-nav .mainlinks a, .burger-nav .othlinks a, a.PinkLink, .PinkLink, .PinkButton, a.whapp-but  {
  padding: 11px 18px;
  border: 1px solid #030C38;
  border-radius: 13px;
  color: #030C38 !important;
  text-align: center;
  font-weight: 600;   font-size: 0.8em;
  display: flex;  align-items: center;  justify-content: center;
  transition: all 0.5s ease; box-shadow: inset 0 -10px 10px 10px #20053A;
  box-shadow:7px 7px 5px rgba(32,5,58,0.3), rgba(32,5,58,0.3) 7px 7px 5px;
background:linear-gradient(0deg,rgba(1, 244, 159, 1) 60%, rgba(0, 252, 252, 1) 100%); }

 .main-nav a:hover, .burger-nav .mainlinks a:hover, .burger-nav .othlinks a:hover,.panel-call a.whapp-but:hover, a.whapp-but:hover,
.PinkButton:hover, .PinkLink:hover, .BigButton:hover
 { border:1px solid #030C38; border-radius: 28px; background:linear-gradient(0deg,rgba(201, 91, 228, 1) 80%, rgba(0, 252, 252, 0.8) 100%);background-color: #C95BE4; color: #ffffff !important ;text-shadow: 2px 2px 2px black;}
  .PinkLink, .PinkButton, .BigButton {min-width: max-content;min-width: fit-content; display: flex; grid-gap:10px;}
a.whapp-but{padding: 3px 20px 3px 15px; }


/**** DISPLAY BANNERS ******/
.Home-display {background: url(../images/banners/web-banner3.avif) no-repeat;  ;
  background-size: auto 100%; background-position: right; background-color: #6546ac; }
.Cat-display {background: url(../images/banners/cat-banner3.avif) no-repeat;  box-shadow:inset 0px -15px 25px rgba(32,5,58,1);
  background-size: auto 100%; background-position: right; background-color: #888c97; width:100vw;}
.Dev-display {background: url(../images/banners/dev-banner3.avif) no-repeat;  ;
  background-size: auto 100%; background-position: right; background-color: #200056; }
 .Brain-display {background: url(../images/banners/brain-banner3.avif) no-repeat;  ;
  background-size: auto 100%; background-position: right; background-color: #0f198a; }
.Home-display, .Cat-display, .Dev-display, .Brain-display, .Top-Title, .Top-display .container {min-height: 751px; max-height: 751px;}
.Top-display .container {display: grid; grid-template-columns: 1fr; justify-content: center; padding: 0 0 0 0; }
.Top-Title {position:absolute; padding:0 0 70px 0;  box-shadow:15px 0px 15px rgba(255,255,255,0.3);  border-radius: 0;
display: flex; flex-direction: column; justify-content: center; }
.Top-display .container {min-height: 751px; max-height: 751px;/*most popular mobile*/}
.Top-Title{top:85px; width: 100%; left:0px; grid-gap:30px; align-items: center;}
.Top-Title-Contents {display: grid; grid-gap:30px;width: 90%;}


/************ BLOCK STRUCTURE **************/
.Main-Content {box-shadow:0px -15px 25px rgba(32,5,58,1); display: grid; grid-gap:50px; padding:0 0 0 0; }
.Main-Content.nogap {grid-gap:0px;}
.container  {margin-left: auto;  margin-right: auto;  padding: 30px 30px; align-content: start; display:grid; grid-gap:10px;}

.fluid2cols {display:grid; grid-auto-columns: auto; grid-gap:30px; grid-template-areas: "a"; justify-content: space-between;}
.fluid3cols {display:grid; grid-auto-columns: auto; grid-gap:30px; grid-template-areas: "a"; justify-content: space-between;}

.spacer {padding-bottom:100px;}
.padtop {padding-top: 60px;}

.panel-dispimg{margin-left: auto;  margin-right: auto;   align-content: start; display:flex; flex-direction:column;  width:100%; grid-gap:30px;}
.dispcontent{width:100%; padding: 50px 30px 30px 30px;}
.dispimg-artist img, .dispimg-bulb img, .dispimg-cloud img { width:100%; height:250px;object-fit: cover;border-radius: 0px; overflow:hidden; margin-top:0px; }

.imgcred {padding-left: 20px;}
.buttonright{width: 100%; display: flex; justify-content: right; align-items: center; grid-gap:10px;}

.panel-port { width:100%;}
.glow {filter: drop-shadow(0px 0px 6px #01F49F) drop-shadow(0px 0px 6px #01F49F); }/**deliberately doubled**/
.panel-port {display:flex; flex-direction:column; background: linear-gradient(180deg, rgba(15, 26, 119, 1) 0%,  rgba(46, 60, 186, 1) 77%); }
.panel-port{border: 2px solid #01F49F; box-shadow:0px 0px 15px rgba(1,244,159,0.9); border-radius: 13px;  overflow:hidden;}
.panel-info{border: 2px solid #01F49F; box-shadow:0px 0px 15px rgba(1,244,159,0.9); border-radius: 13px;  overflow:hidden;}
.port-desc {padding:25px 15px; border-top:3px solid #C73FAD; display: grid; align-content: space-between; height: 100%;}
.fullpanel {border: 2px solid #01F49F; box-shadow:0px 0px 15px rgba(1,244,159,0.9); border-radius: 13px; margin: 0 0 20px 0;
background: linear-gradient(180deg, rgba(15, 26, 119, 1) 0%,  rgba(46, 60, 186, 1) 77%); padding:30px;}

.scapebg h4 {margin-bottom: 0px;}
.scapebg {background: url(../images/banners/scape.avif) no-repeat; background-size:cover;   }
.lighten {background: rgba(255, 255, 255, 0.15);padding:25px 0; grid-gap:15px; text-shadow: 0px 0px 5px black; display:flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; min-width: max-content;}

.scapecontent {padding:25px 15px; border-top:3px solid #C73FAD; display: grid; align-content: space-between; height: 100%;}
.bigicon {background-color:#030832; border-radius: 13px; display:flex; justify-content: center; align-items: center; width:max-content; height:max-content;}
.portrait img { border-radius: 13px; overflow: hidden; width: 60%;}
.highlight {color: #C7C23F; font-weight: 600;}
.three{display:flex; flex-direction: column; grid-gap:10px; justify-content:space-around; }
.onetwothree h4, .dottext {display: flex; grid-gap:8px; margin-bottom: 0px; align-items: center;}
.dottext h3 {margin-bottom: 0px;}
.onetwothree {width:100%; display:flex; flex-direction: column; grid-gap:5px;}
.onetwothree p, .dotdesc p {padding-left: 28px;}
.bulletdesc p{padding-left: 18px;}
.bulletdesc {padding-bottom: 15px;}
.bulletdesc .dottext {padding-bottom: 5px;}
.dot {width:20px; height:20px;}
.panel-info, .panel-port {display:flex; flex-direction:column; background: linear-gradient(180deg, rgba(15, 26, 119, 1) 0%,  rgba(46, 60, 186, 1) 77%); }
.CTA { background: url(../images/banners/dev-banner3.avif) no-repeat;background-size:cover; background-position: center; padding: 150px 0;box-shadow:0px -15px 25px rgba(32,5,58,1); }

@media (min-width: 2000px)
{
  .top {padding:20px 150px !important;}
  .wrap {padding:3px 150px !important;}
  .bottom {padding: 10px 150px !important;}
  .container, .sparkcontainer {width: 65% !important;}
  .panel-dispimg, .dispcontentwrap {width:65% !important;}
  .Home-display {background-image: url(../images/banners/web-banner.avif) !important; background-repeat:  no-repeat; background-size: auto !important; background-position: right !important; background-color: #6546ac !important; }
  .Cat-display {background-image: url(../images/banners/cat-banner.avif) !important; background-repeat:  no-repeat; background-size: auto !important; background-position: right !important; background-color: #888c97 !important; }
  .Dev-display {background-image: url(../images/banners/dev-banner.avif) !important; background-repeat:  no-repeat; background-size: auto !important; background-position: right !important; background-color: #200056 !important; }
  .Brain-display {background-image: url(../images/banners/brain-banner.avif) !important; background-repeat:  no-repeat; background-size: auto !important; background-position: right !important; background-color: #0f198a !important; }
  .Top-Title-Contents {width:80% !important;padding:0 80px !important;}
  footer .mid.show { grid-template-columns: 1fr 1fr!important;column-gap: 30px; padding-top:40px; padding-bottom: 30px;}
}

@media (min-width: 1400px)
{
  .container  { padding: 60px 60px; }
  .panel-dispimg{ padding: 100px 60px 60px 60px !important;}
  .dispcontent{padding: 0px 0 30px 60px !important;}
  .twocols {grid-gap: 60px !important;}
  .fluid3cols, .fluid2cols {grid-gap:60px !important;}
  fieldset {display: flex; }
  .overlaybutton {position:absolute; top:15px; right:15px; display: block;}
  .overlay-container { max-width: fit-content; }
}

@media (min-width: 1023px)
{
  .Top-display .container {grid-template-columns: 1fr 1fr !important;}
  .Home-display, .Cat-display, .Dev-display, .Brain-display,  .Top-Title, .Top-display .container {min-height: 500px !important; max-height: 500px !important;}
  .Top-Title {padding:0 0 10px 0;}
  .lighten {min-width: max-content !important;}
  .CTA {padding: 70px 0; }
 .fluid3cols {display:grid; grid-gap:30px; grid-template-areas: "a a a" !important;}
 .fluid3cols .panel-info {display:flex; flex-direction:column !important; }
 .fluid3cols .scapecontent{padding:30px 25px; border-top:3px solid #C73FAD !important; border-left:0px solid #C73FAD !important;}
 .fluid3cols .port-desc {padding:30px 25px; border-top:3px solid #C73FAD !important; border-left:0px solid #C73FAD !important;}
  h3,  .heading {font-size:1.5em;}
  h4 {font-size: 1.2em; }
}

@media (min-width: 913px)
{
  .Top-Title{top: 129px !important; width: 50vw !important; left:0px; grid-gap:30px; align-items: end; }
  .Top-Title .BigButton {padding: 15px 45px; width: max-content;}
  .fieldcontent { min-width: 433px; max-width:433px;}
  .three{flex-direction: row;}
  .portimg {min-height: 600px;}
  .portdesc {padding:60px 60px;}
  .onetwothree {width:33.3%; grid-gap:20px;}
  .onetwothree p, .dotdesc p {padding-left: 33px !important;}
  .dot {width:25px; height:25px;}
   .Top-Title-Contents {width: 95% ; padding:0 50px;}
  .Top-display .container {min-height: 931px; max-height: 931px;}
  .Home-display, .Cat-display,.Dev-display, .Brain-display,.Top-Title, .Top-display .container {min-height: 931px ; max-height: 931px;}
  .CTA p{max-width: 65%;}
  .dispcontent{padding: 0 0 30px 40px;}
  
  .panel-dispimg{ width:90% ;padding: 100px 40px 40px 40px; display:flex; flex-direction:row;  grid-gap:40px; }
  .dispimg-artist {width:50%; height:100% !important; }
  .dispimg-bulb {width:50%; height:100% !important; }
  .dispimg-artist img { width:100%; height:100%; max-height:300px; object-fit: cover;border-radius: 13px; overflow:hidden; }
  .dispimg-bulb img {width:100%; height:100%; max-height:550px; object-fit: cover;border-radius: 13px; overflow:hidden;}

  .spark {left:90% !important;}
  .spark2 {left:30% !important;}
  
  header .top {display: grid;  grid-template-columns: 1fr 2.5fr; grid-row-gap: 0; align-items: center; column-gap: 50px;}
  .top-corner, .topcnrlink {line-height: 2em; }
  .top-corner {display: flex!important; justify-content: flex-end;align-items: center;}
  .topcnrlink { margin-left: 10px;}
  .top-corner p {padding:0 5px; margin: 0;}
  .burger-nav {display: none!important; visibility: hidden; }
  .burger-menu {display: none!important;}
  .main-nav { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr ; grid-column-gap: 10px;  justify-self: right; padding-top:15px; width:max-content; }
  nav { justify-content: right; display: grid;}
  .foot {display: grid; grid-template-columns: 1fr auto;  justify-content: end; align-items: baseline;}
  .nav-header .logo {display: none;}
  .directions {grid-area: 1 / 1;}
  .overlay{width:80%;}
  header .logo img {height:60px !important; }
  .overlay-container { overflow-y: auto; top: 10vh !important; left: 10vw !important; max-height: 90vh; }
}

@media (min-width: 900px)
{
  .Top-Title{top:105px;}
  .top {padding: 20px 40px;}
  .wrap {padding:3px 40px;}
  .bottom {padding: 10px 40px;}
  .container, .sparkcontainer {width:90%;}
  .dispcontentwrap {width:90%; margin-right: auto; margin-left: auto;}
.panel-port {max-width:max-content; }
 .fluid2cols {display:grid; grid-gap:30px; grid-template-areas: "a a" !important;}
 .fluid2cols .panel-info {display:flex; flex-direction:column !important; }
 .fluid2cols .scapecontent {padding:30px 25px; border-top:3px solid #C73FAD !important; border-left:0px solid #C73FAD !important;}
 
  h1{font-size: 1.9em; line-height: normal;}
  h2 {font-size: 1.9em; line-height: normal}
  h3 {font-size: 1.5em; line-height: normal}
  h4, h5, .heading {font-size:1.5em; line-height:normal;}
  body {font-size: 0.9em;}
  .bottom  {display: flex; flex-direction: row; justify-content: space-between ; }
  .bottom .right { text-align: right !important;justify-content:end !important;}
  .bottom .left {align-content: center; }
  .bottom .left {margin-top: auto; margin-bottom: auto;}
  .phone {font-size: 2em;}
  .foot-Right-links {padding-top: 0px;}
  .foot-left-links, .foot-Right-links {border-bottom: none; padding-bottom: 0;}
  footer .mid.show { grid-template-columns: 1fr 1fr; gap: 20px; padding-top:30px; padding-bottom: 20px;}
}
@media (min-width: 760px){.directions2 {grid-area: 1 / 1;} }
@media (min-width: 600px)
{
  .fluid2cols {display:grid; grid-template-areas: "a";}
  .fluid2cols .panel-info {display:flex; flex-direction:row; }
  .fluid2cols .scapecontent {padding:25px 25px; border-top:0px solid #C73FAD; border-left:3px solid #C73FAD;}
  .fluid3cols {display:grid; grid-template-areas: "a";}
  .fluid3cols .panel-info {display:flex; flex-direction:row; }
  .fluid3cols .scapecontent {padding:25px 25px; border-top:0px solid #C73FAD; border-left:3px solid #C73FAD;}
  .lighten {min-width: 250px;}
  .Home-display {background-image: url(../images/banners/web-banner2.avif); background-repeat:  no-repeat; background-size: auto 100%; background-position: right; background-color: #6546ac; }
    .Cat-display {background-image: url(../images/banners/cat-banner2.avif); background-repeat:  no-repeat; background-size: auto 100%; background-position: right; background-color: #888c97; }
  .Dev-display {background-image: url(../images/banners/dev-banner2.avif); background-repeat:  no-repeat; background-size: auto 100%; background-position: right; background-color: #200056; }
  .Brain-display {background-image: url(../images/banners/brain-banner2.avif); background-repeat:  no-repeat; background-size: auto 100%; background-position: right; background-color: #0f198a; }
  .CTA { background: url(../images/banners/CTA1.avif) no-repeat;background-size:cover; background-position: center; padding: 150px 0;box-shadow:0px -15px 25px rgba(32,5,58,1); }
  .Top-display .container {grid-template-columns: 2fr 1fr;}
  .Top-Title{width: 75%; left:0px; }
  .Top-Title-Contents {grid-gap:25px;}
  .overlay-container { top: 10vh; left: 2.5vw; max-width: 95vw; }
  .PayKlarna {display:block;}
  .Klarna {display:none;}
  footer .bar .right {grid-gap: 30px; }
}
@media (min-width: 480px)
{
  .burger-nav {right: -300px; width: 280px; padding: 20px 20px 20px 20px; }
  .burger-nav .mainlinks a, .burger-nav .othlinks a {font-size: 1em;}
  .panel-call {display: flex; }
  .overlaybutton {position:absolute; top:15px; right:15px; display: block;}
}