@charset "utf-8";
/* CSS Document */

.container, .sparkcontainer {width: 98vw;}
header, main, footer {width: 100vw;}




/* ANIMATED SPARKS */
  .spark {position: relative; animation: sparkLoop 120s ease-in-out infinite; z-index: 12; }
  .spark {width: 55px; top:-21px; left:75%;}
  .spark2 {position: absolute;z-index: 1; animation: sparkLoopLong 45s ease-in-out infinite; z-index: 11;}
  .spark2 {width: 55px;  margin-top:-22px; left:10%;}
  .spark3 {position: relative; animation: sparkLoopONCE 60s ease-in-out;animation-iteration-count: 1;}
  .spark3 {width: 55px;  top:-22px; left:80%;}
  .spark4 {position: relative; top:-34px; left:80%; display: none;}
  .spark4 {width: 55px;  top:-20px; left:80%;}

  @keyframes sparkLoop {
    /* Start off-screen left */
    0% {transform: translateX(-100vw) scale(1) rotate(0deg);}
    /* Move to settled position and pulse */
    5% {transform: translateX(0px) scale(1) rotate(0deg);}
    7% {transform: translateX(0px) scale(0.8) rotate(5deg);}
    9% {transform: translateX(0px) scale(1.2) rotate(5deg);}
    11% {transform: translateX(0px) scale(0.8) rotate(-10deg);}
    50% {transform: translateX(0px) scale(1) rotate(0deg);}
    65% {transform: translateX(50vw) scale(1) rotate(0deg);}
    70% {transform: translateX(75vw) scale(1);}
    75% {transform: translateX(100vw) scale(1);}
    80% {transform: translateX(150vw) scale(1);}
    85% {transform: translateX(200vw) scale(1);}
    90% {transform: translateX(300vw) scale(1);}
    /* Move off-screen right */
    98% {transform: translateX(800vw) scale(1) rotate(0deg);}
    /* Stay off-screen briefly before loop restarts */
    100% {transform: translateX(-200vw) scale(1);}}

  /* Alternative version with longer pauses */
  @keyframes sparkLoopLong {
   /* 0% {transform: translateX(-200vw) translateY(150px) scale(1) rotate(540deg);}
    0.02% {transform: translateX(-150vw) translateY(150px) scale(1) rotate(540deg);}*/
    0% {transform: translateX(-100vw) translateY(150px) scale(0.8) rotate(540deg);}
    0.05% {transform: translateX(-50vw) translateY(35px) scale(1.2) rotate(540deg);}
    20% {transform: translateX(0px) scale(0.8) rotate(0deg);}
    45% {transform: translateX(0px) scale(1);}
    70% {transform: translateX(0px) scale(1);}
    85% {transform: translateX(600vw) scale(1);}
    100% {transform: translateX(-200vw) scale(1);} }

  /**** makes it come in fast and STAY .... and only ONCE ****/
  @keyframes sparkLoopONCE {
    /* Start off-screen left */
    0% {transform: translateX(-200vw) scale(1) rotate(0deg);}
    /* Move to settled position and pulse */
    5% {transform: translateX(0px) scale(1) rotate(0deg);}
    15% {transform: translateX(0px) scale(1) rotate(0deg);}
    100% {transform: translateX(0px) scale(1) rotate(0deg);}  }

    /*** Gently enlarge image ***/
  @keyframes shrink {
    0% {background-size: 115% ;}
    100% {background-size: 100% ;}}

    /**** slide down cookie banner ****/
  @keyframes slidedown {
    /* Start off-screen top */
    0% {transform: translateY(-200vh);}
    100% {transform: translateY(0px);}}

/* Brand Colour Reference
.dark-Blue {color: #26315E;} 38 49 94
.Light-Blue {color: #266EAE;}
.Dark-Green {color: #41800E;} 65 128 14
.Light-Green {color: #C1C954;} 193 201 84
.Deep-Pink {color: #EA435A;} 234 67 90
.Black-6C {color: #101820;}16 24 32
.Light-Grey {color: #B3C5CD;} 179 197 205
.Off-White {color: #EBECEC;} 235 236 236
.Yellow {color: #DEDC6F;}
*/


/***** COLOUR CONTROL ******/
/** Blossom pic matched gradient background vertical**/
body {background: #bbdeed; background: linear-gradient(180deg, #f9f4fa 0%, #a4dbef 80%);}
/** fade white to light blue horizontal **/
a.page-banner:hover .page-banner-content, div.page-banner .page-banner-content{background: linear-gradient(90deg, #f9f4fa 0%, rgba(185,226,246,0.99) 100%);}

/** green yellow green **/
.GradientH-Mid-Green, .main-nav a:hover, .burger-nav a:hover,  a.page-banner:hover .page-banner-foot
 {background: linear-gradient(90deg,rgba(65, 128, 14, 1) 0%, rgba(222, 220, 111, 1) 50%, rgba(65, 128, 14, 1) 100%);}

 /** yellow to green **/
.GradientH-Green, .page-banner-foot, a.gallery-foot:hover, a.gallery-foot.active
{ background: linear-gradient(90deg,rgba(193, 201, 84, 1) 0%, rgba(65, 128, 14, 1) 100%);}

/** green to yellow **/
.main-nav a, .burger-nav a
{background: #41800E; background: linear-gradient(0deg,rgba(65, 128, 14, 1) 87%, rgba(193, 201, 84, 1) 100%);}

/*.GradientH-Blue */
.iconblue svg , .GradientV-Blue, header, #FooterLinks, a.page-banner:hover .PinkLink, .headedpanel h1, .burger-nav
{background: linear-gradient(90deg,rgba(38, 49, 94, 1) 0%, rgba(38, 110, 174, 1) 100%); }

/** filtered background **/
.box-filter, .Carousel2
{background: #EBECEC; background: linear-gradient(90deg, rgba(235,235,236,1) 20%, rgba(235,235,236,0.50) 100%);}

/** luminous hover **/
a.databutton:hover, a.Adpanel:hover, .nominee-option label:hover, .nominee-option.selected label, .green
{background: #96f2b0;  background: linear-gradient(180deg, #bbecbc 0%, #eeec91 80%);}

/** could deal with box shadow not gradient **/
.iconwhite:hover svg, .iconwhite:hover img, .close-menu-btn:hover
{background: linear-gradient(0deg,rgba(222, 220, 111, 1) 87%, rgb(148, 148, 150) 100%);}
/** grey button **/
.svgcontrol svg
{background: #bcc6ca; background: linear-gradient(0deg,rgb(212, 212, 212) 87%, rgb(105, 107, 107) 100%);}
/** white icon backgrounds **/
.iconwhite svg,.iconwhite img
{background: #EBECEC; background: linear-gradient(0deg,rgba(235, 236, 236) 87%, rgb(148, 148, 150) 100%); }
.left-only { background: radial-gradient(at 0% 100%, #fefdfd 12%, rgba(132,179,205,0) 62%); }

/******* Fonts ******/
h1{ font-family: "Play", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: #101820;}
h2, h3, h4, .heading {font-family:"Montserrat", sans-serif; }
h2 {font-weight: 400;  letter-spacing: 0.04em;}
h3, h4, .heading {font-weight: 500;  letter-spacing: 0.04em;}
p, h2, h3,h4 {margin-bottom: 20px;}
b, strong {font-weight: 600;}
h1{font-size: 2em; line-height: normal;}
h2 {font-size: 1.5em; line-height: normal;}
h3, h4, .heading {font-size:1.3em; line-height: normal;}
body {font-size: 0.9em;  }
footer .bottom, small, .breadcrumb {font-size: 0.7em;}
header, footer{font-weight: 400;}
.phone {font-family:"Merriweather", serif; font-weight: 600;  letter-spacing: 0.05em; font-size: 2em;}
footer, header{color: #EBECEC;}

/******* Lists and tables  ******/
ul {margin:0;padding-left: 20px;}
li {margin:0; padding-left: 10px;}
th, td {padding:5px;}
tr th[scope="row"]{font-weight: 600; text-align: right; vertical-align: top;}


/******* Reset  ******/
* {margin: 0; padding: 0; box-sizing: border-box;}
*:before, *:after { box-sizing: border-box;}
img, svg {max-width: 100%;}
a {text-decoration: none; }
.hide, .hidden {display: none;}
.show  {display:block;}


/******* CORE  ******/
body {min-height: 100vh;display: grid; grid-template-rows: auto 1fr auto; color:#26315E;	margin:0; position: relative;
  font-family: 'Montserrat', sans-serif; letter-spacing: 0.03em; font-weight: 500;  line-height: 1.5; overflow-x: hidden;}
.container  {overflow: hidden; margin-left: auto;  margin-right: auto;  padding: 10px 10px; align-content: start;}
.sparkcontainer   { margin-left: auto;  margin-right: auto; height: 2px; }
.bottom .container {padding: 10px 10px;}



/******* tools  ******/
.floatright {float: right;}
.textmid {text-align: center;}
.textright {text-align: right;}
.flright{float:right; margin: 20px 0 20px 20px;}
.flleft{float:left; margin: 10px 10px 10px 0;}
.no-blur {backdrop-filter: blur(0px);}
.blur {backdrop-filter: blur(15px); }
.top {align-self: start;}
.botright {align-self: end; align-items: end;}
.rounded {border-radius: 10px; border:1px solid #26315E; overflow: hidden;}
.indent {padding-left:12px;} /*** lines text up with service heading****/


/**** force central ***/
.vcenter {align-content: center; }
.hcenter {justify-content: center;}

/* force bottom right */
footer .bar .container .right, .inputright,
footer .bar .container {display: flex; justify-content: flex-end;align-items: center;}
.botright {display:grid; justify-content: flex-end; align-items: end;}



/****** changed content according to screen size ******/
 .switch {display: inline};
.bot {display:grid; align-self: end; grid-gap:10px; }
#Home-banner .bot{ display: flex; align-items: center; align-content: center; grid-gap:10px;}
.faff  {display: flex; flex-direction: column; flex:1; justify-content: end; align-items: center;}
.bannerlinks {display: grid; grid-template-columns: auto auto; align-items: end;}
.bannerlinks p {margin: 0;}
.Carousel2 .Ticklink {display: none;}
.panel-call-light,.panel-call-dark {align-items: center; grid-gap:10px; }
.panel-call-dark, .panel-call-light {display: block;}
.Servicelinks {display: none;}
footer .cyberbottom {display: none;}
footer .itpro {display: none;}
.foot .cyberbottom {display: block;}
.foot .itpro {display: block;}
.articlecontact {display: grid;}
.fl {display: none;}
.tagline {display: none;}


/****** ICONS ******/
svg.svgblue path, .svgcontrol {fill: rgb(38, 49, 94);}
svg.svgwhite path {fill: rgb(235, 236, 236);}
.iconlink:hover svg.svgwhite path {fill: rgb(193, 201, 84);}
.iconwhite svg, .iconwhite img, .iconblue svg, .svgcontrol svg{border: 1px solid #26315E; border-radius: 5px; overflow: hidden;}
.iconwhite.close-menu-btn {border-radius: 5px; overflow: hidden;}
.iconlink svg, .iconblue svg, .iconwhite svg,.iconwhite img, .svgcontrol svg
{display: flex; align-items: center; justify-content: center; padding: 0px;  object-fit: contain;}
.iconlink, a.whapp-but, footer .bar .container, .iconbannerlink,  .split,  .Servicelinks a, .topcnrlink, .editlink
{align-items: center;display: flex; grid-gap:10px; }/* force vertical aligned in a row */
.foot-left-links .iconlink, .main-nav a, .Servicelinks a, a.whapp-but{min-width: max-content;}
.Serviceslinks a{max-width: max-content;}
.iconwhite svg,.iconwhite img, .iconblue svg, .iconbannerlink svg {height: 2em; width:2em; }
.iconlink svg, .editlink svg, .iconlink img, .editlink img {height: 1.5em; width:1.5em; }
.iconbannerlink{padding-bottom: 10px; display:grid; grid-template-columns: 30px auto; grid-gap:10px;}
.burger-nav .iconwhite.close-menu-btn {position: absolute; top: 29px; right: 20px; cursor: pointer;}



/********************* HEADER *******************/
header a {color: #EBECEC;}
.top-corner a:hover, footer a:hover {color: #C1C954;}
header .logo {text-transform: uppercase; font-weight: 400; font-size: 0.8em; }
header .top {display: grid; grid-template-columns: 1fr auto; grid-row-gap: 0; align-items: center; column-gap: 20px;}
header .bar {height:7px} .bar {border: 1px solid #26315E; box-shadow:0 7px 9px -7px #192733;}
/********************* NAV ******************/
nav .top-corner  {display: none;}
.main-nav{display: none;}
.main-nav a, .burger-nav a { padding: 11px 15px; border: 1px solid #26315E;   border-radius: 6px;
  color: #EBECEC; text-align: center;  text-transform: uppercase;  font-weight: 600;   font-size: 0.8em;
  max-width: 150px;display: flex;  align-items: center;  justify-content: center;   transition: all 0.5s ease;}
.main-nav a:hover, .burger-nav a:hover{color: #26315E; box-shadow: inset 0 7px 7px -7px #2d1630;}
.burger-nav a {font-size: 1.2em; }
.burger-nav a {margin: 0 0 15px 0; padding: 15px 20px; text-align: left; 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 #26315E; border-radius: 5px;}
.burger-line {width: 100%;  height: 4px;background: #26315E;  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: 100vw; right: -100%;padding: 18px 20px;
      position: fixed !important; top: 0;  height: 100vh;
      box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); border-left: 2px solid #C1C954;
      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; z-index: 1000; opacity: 0;}
.burger-nav a:last-child {margin-bottom: 0;}
.burger-nav .logo {width: 70%; margin:0 0 20px 0; display: block;}
.burger-nav.active {right: 0; opacity: 1; visibility: visible; }
/********************* FOOTER ******************/
footer .bottom{background-color:#26315E; }
footer .left {align-content: end;}
footer a{color: #EBECEC;}
footer .bar .container{display: grid; grid-template-columns: 3fr 1fr; font-weight: 600; padding-top: 3px; padding-bottom: 3px;}
footer .bar .container .right {grid-gap: 30px; }
footer .bar .container .right img {height: 40px;}
/**.FooterLinks **/
footer .mid.show { display: grid; grid-template-columns: 1fr; column-gap: 20px; padding-top:30px; padding-bottom: 30px;}
footer .heading {text-transform: uppercase; }
.foot-Right-links, .foot-left-links { margin-right: auto; align-content: end;}
.foot-left-links, .foot-Right-links { line-height: 2em;}
.foot-left-links, .foot-Right-links {border-bottom: 1px solid #EBECEC; padding-bottom: 20px;}
.foot-Right-links {padding-top: 20px;}
.foot-mid-links { margin-right: auto; line-height: 1.8em; align-content: end; }
.foot-mid-links .panel {padding: 10px 0;}
/** Call and mailing list panels **/
.panel-call-light, .panel-call-dark { font-weight: 600; grid-gap: 10px; }
.panel-call-light, .panel-call-dark {width: max-content;}
.panel-call-light {margin-top: 8px;}
.panel-call-light{color: #C1C954;}
.panel-call-dark{color: #26315E;}
.split {gap: 15px}; /*** split call panel on low res**/
.panel-mail-list {padding: 30px 0;}
.foot-mid-links .split {margin-top: 8px;}
/** bottom copyright bar etc **/
.bottom {box-shadow: inset 0 7px 3px -7px #558dc2; border-top: 2px solid #26315E; }
.bottom .container {display: block;}
.bottom .container .right { text-align: left; justify-content: left;}
#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;}
footer .bottom {padding-bottom: 30px;} /*** STOPS ROTATING SPARK MAKING SCROLL BAR ****/
.container.foot {padding: 0 20px ;}







/********************* MAIN ******************/
main, .banner {display: grid; grid-template-rows: auto; }
.breadcrumb a {color: #26315E;} .breadcrumb a.active {font-weight: 600; color: #41800E;}.breadcrumb {margin-bottom: 10px;}

.triplecols {display: grid; grid-template-columns: 1fr; grid-gap:10px;}
.twocolA {display: grid; grid-template-columns: 1fr; grid-gap:10px;}
.twocolB {display: grid; grid-template-columns: 1fr;grid-gap:10px;}
.twocolA-Head, .twoevencols { grid-template-columns: 1fr; grid-gap:10px;}
.twocolA-Head {align-items: center; margin-top: 30px; margin-bottom: 20px;}
.triplecols.servicegrid {grid-gap:15px;}

.page-banner.page-head {margin-bottom: 30px;}
a.page-banner {color:#26315E; display: flex; flex-direction: column;}
.page-banner {border: 2px solid #26315E !important; overflow: hidden; }
.page-banner-image .iconblue svg {height:70px; width:70px; border-radius: 10px; }
.page-banner-image {min-height: 130px;padding:20px 0 0 30px;}
.page-banner-content {padding:10px 20px; border-right: 10px solid; border-left: 10px solid;  background-color: #EBECEC;flex: 1;
display: flex; flex-direction: column;}
.page-banner-content h1 {font-size: 1.9em; }
.page-banner-content h2 {font-size: 1.5em; margin-top: 0.5em; font-weight: 500; line-height: 1.5em;}
.page-banner-foot {height: 22px;}
a.page-banner:hover img {display: block; animation: sparkLoopONCE 5s ease-in-out; animation-iteration-count: 1;}
.vendorlogos {display: grid; grid-template-columns: 1fr 1fr 1fr;grid-gap:10px;backdrop-filter: blur(15px);}
.vendorlogos img {width:100%;}

.itpro {font-size: 1.5em; color: #26315E; font-weight: 800; }
.foot .itpro {margin-left: auto;}
.foot .cyberbottom {margin-left:0;}
.foot {display: grid; grid-template-columns: 1fr;}


/********************* CONTENT PANELS ** BIG corners and padding intended for large/ full areas **************/
.boxcenter {text-align: center; align-content: center; align-items: center; align-content: center;}
.boxcenter svg {display: block; margin-right: auto; margin-left: auto;}
.page-heading {padding:20px 0;}
.box-filter {padding:20px 20px; }
.boxcenter, .boxleft { padding:10px 10px; }
.boxcenter, .boxleft, .box-filter{margin-bottom: 20px;}


/**** GALLERY ****/
.triplecols.gallerygrid, .twoevencols.gallerygrid {grid-gap:5px; grid-auto-flow: dense;}
.gallery-border {display: flex; flex-direction: column; flex:1; justify-content: end; align-items: center; grid-auto-flow: dense;}
.gallery-border.active {border-color: #C1C954 !important;}
.gallery-row-fit {flex: 1; display: flex; flex-direction: column;}
.gallery-image {max-height: 300px; overflow: hidden;}
.gallery-image img {width: 100%;}
.gallery-image .overlaybutton img {width: auto;}
.gallery-title {padding:3px 10px; flex: 1;display: flex; flex-direction: column; width: 100%;}
.gallery-title p {margin: 0px 0 0 20px;}
a.gallery-foot, .gallery-foot,a.gallery-foot.nolink:hover,a.gallery-foot.nolink {height: 22px; width: 100%; display: grid; align-content: center; justify-items: center; }
a.gallery-foot.nolink:hover, a.gallery-foot.nolink {cursor: default;}
.gallery-breakgrid.rounded, .gallery-breakgrid {border: 3px solid #C1C954; background-color:#EBECEC;}
.gallery-breakgrid p{padding:10px 10px 5px 10px; margin-bottom: 5px;}
.gallery-border.active .gallery-foot { background: linear-gradient(90deg,rgba(193, 201, 84, 1) 0%, rgba(65, 128, 14, 1) 100%);}
.gallery-border, .imgcard img, article img.mugshot, .overlay.rounded {border: 3px solid #B3C5CD !important; }


article .imggroup {max-width: 100%; }
article img.mugshot {max-width: 100%; }
.imgcard {display: grid; grid-template-rows: auto;margin: 0 0 10px 0;}
.imgcard img { max-width: 100%;}
.imgcard.noborder img {border: none !important;}
.imgcard small {padding: 2px 10px; margin:0;}
article img.transpimg, article img.mugshot {max-width: 100%; float: none; margin: 0 0 10px 0;}
article .imggroup {max-width: 100%; float: none; margin: 0 0 10px 0;}


.gallery-border, .overlay, .overlay-cookie-text, .overlay-cookie-button, .gallery-breakgrid .gallery-foot, .brushedsteel
{background-color: #B3C5CD; background: url(../images/portfolio/stainless-steel.jpg) no-repeat;background-size:cover; background-position: center; }
.overlay-cookie-text, .overlay-cookie-button {filter: drop-shadow(11px 13px 10px #000000);}


/**** OVERLAYS ****/
.overlay-image, .gallery-image, .overlay{position: relative;}
.overlaybutton {position:absolute; top:15px; right:15px;}
.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:0; left:0;z-index: 15; display: block;background-color: rgba(0,0,0,0.5);width: 100%; height: 100%; overflow-y: auto;}
.overlay-container .gallery-title{text-align: center;}
.noscroll {overflow: hidden;}
.overlay-cookie-container {position: fixed; top:0;  margin-left: auto; margin-right: auto; display: block; z-index: 20;background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; overflow-y: auto;}
.overlay-cookies { width: 80%; top:0; margin: auto; display: grid; grid-template-rows: auto; justify-items: center;animation: slidedown 1s }
.overlay-cookie-text {width: 100%;padding:20px 40px;}
.overlay-cookie-button {width:200px; justify-items: center; padding: 0 30px 20px 30px;}
.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%}



/**** Colour picked from main banner images ***/
a.page-banner .page-banner-content.upgrades-accents,
a.page-banner .page-banner-content.design-accents,
a.page-banner .page-banner-content.app-accents,
a.page-banner .page-banner-content.cloud-accents,
a.page-banner .page-banner-content.network-accents,
a.page-banner .page-banner-content.shop-accents
{border-color: #B3C5CD ;}
div.page-banner .page-banner-content.upgrades-accents,
a.page-banner:hover .page-banner-content.upgrades-accents {border-color: #546DF2;}
div.page-banner .page-banner-content.design-accents,
a.page-banner:hover .page-banner-content.design-accents{border-color: #EDA387;}
div.page-banner .page-banner-content.app-accents,
a.page-banner:hover .page-banner-content.app-accents{border-color: #C5A93D;}
div.page-banner .page-banner-content.cloud-accents,
a.page-banner:hover .page-banner-content.cloud-accents{border-color: #1F5F23;}
div.page-banner .page-banner-content.network-accents,
a.page-banner:hover .page-banner-content.network-accents{border-color: #FD4D81;}
div.page-banner .page-banner-content.shop-accents,
 a.page-banner:hover .page-banner-content.shop-accents{border-color: #759ED2;}



/****** PAGE SPECIFIC ******/
.profile .profiletitle {padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #26315E;}
.directions {grid-area: 2 / 1;}
a.Adpanel{ grid-template-columns: auto; grid-gap: 0px; display: grid; color:#26315E; align-items: center;}
a.Adpanel h1 {font-size:x-large;} a.Adpanel h2 {font-size:x-large;}
a.Adpanel p {line-height: normal; margin-bottom: 0; margin-top: 5px;}
.loginform {max-width: max-content;}
/*** this will be converted into a modal overlay with background-color: rgba(0,0,0,0.5); and drop shadow filter: drop-shadow(11px 13px 10px #000000);**/



article {border-bottom: 1px solid #26315E; padding:15px 0;}
article:last-child{border-bottom: none;}
article a {text-decoration: underline;}


/******** Gander Short Award Modal *************/
#previous-winners, #hall-of-fame {
    position: fixed; /* Position relative to the viewport, covering the screen */
    top: 5vh;
    left: 5vw;
    right: 0x;
    bottom: 0;
    width: 90vw;
    height: 90vh;
    background-color: rgba(4, 20, 36, 0.85); /* Semi-transparent dark background */
    z-index: 2000; /* High z-index to ensure it's on top of everything */
    display: flex; /* Use flexbox to easily center the content box */
    align-items: center;
    justify-content: center;
    padding: 5vh 3vw;
    box-sizing: border-box;
    overflow: auto;
    max-height: max-content;
    height: -moz-max-content;
    /* The 'display: none;' from the inline style will be toggled by your JS */
}

#previous-winners h2, #hall-of-fame h2 {
  color: #EBECEC;
  font-size: 1.5em;
  text-align: center;
}

#previous-winners p, #hall-of-fame p {
    color: #EBECEC;
}

#previous-winners ul, #hall-of-fame ul {
    list-style-type: none; /* Remove default list styling */
    padding: 0;
    margin: 0;
    max-height: 60vh; /* Limit height to 60% of viewport height */
    overflow-y: auto; /* Enable vertical scrolling if content exceeds max height */
    color: #EBECEC;
}
/******** Gander Short Award Modal *************/






/********************* 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 #26315E; border-radius: 6px; margin:0px 8px 0px 0;padding:8px 8px 8px 10px;
  box-sizing: border-box;border-radius: 5px 5px 5px 5px;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: #41800E;}
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 #41800E;}
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:0 7px 9px -7px #192733;}
input[type="button"],input[type="submit"]{ text-transform: uppercase; padding-left:25px; padding-right: 25px;}
fieldset { margin:0 0 20px 0; display: grid; grid-template-rows: auto; border: none; grid-gap:8px;}
legend {font-weight: 600; font-size: 1em; padding: 0 20px;}
label {width: 100%; padding: 3px 10px;}
label, label strong, label b {display: block;}
.formleftlabel {display: grid; grid-template-columns: 1fr; grid-gap: 8px; }
.formleftlabel label {padding: 3px 10px 3px 0; }
.formerror, .formleftlabel label { text-align: left; padding: 0 0 0 10px; }
.formleftlabel p.formerror{margin: 0;}
.formerror {color: #EA435A; font-weight: 600;}

#g-recaptcha-response{   margin: -78px 0 0 0 !important; height: 76px !important;z-index: -999999; opacity: 0;display: block !important;  position: absolute;  }
.g_recaptcha, #id_captcha {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; width:200px;}
#rc-imageselect {transform:scale(0.95);-webkit-transform:scale(0.95);transform-origin:0 0;-webkit-transform-origin:0 0; }

/* Password Toggle Styles */
.password-toggle { margin: 2px 0; display: flex; align-items: center; gap: 8px; }
.password-checkbox { display: none; }
.eye-checkbox { cursor: pointer; display: flex; align-items: center; gap: 8px; user-select: none; font-size: 14px; color: #333; }
.eye-icon { width: 17px;  height: 17px;  position: relative;  display: inline-block; }
.eye-icon svg { width: 100%; height: 100%; fill: #666; transition: all 0.2s ease; }
.eye-closed { display: block; }
.eye-open { display: none; }
.password-checkbox:checked + .eye-checkbox .eye-closed { display: none; }
.password-checkbox:checked + .eye-checkbox .eye-open { display: block; }
.eye-checkbox:hover .eye-icon svg { fill: #007bff; }

/* Text switching for show/hide passwords */
.show-text { display: inline; }
.hide-text { display: none; }
.password-checkbox:checked + .eye-checkbox .show-text { display: none; }
.password-checkbox:checked + .eye-checkbox .hide-text { display: inline; }
.button-container { display: flex; gap: 15px; align-items: center; }
.password-reset-button { padding: 10px 15px; display: inline-flex; align-items: center; text-decoration: none; font-size: 0.9em; font-weight: 600; }

/********************* GANDER FORMS ******************/
a.Adpanel #thegandersvg, a.Adpanel #villagemagsvg {max-width: 300px;}
a.Adpanel .top {max-width: 300px;}#thegandersvg {max-width: 500px;}#villagemagsvg {max-width: 400px;}
form.shortnom25 .nominee-option label strong, form.shortnom25 .nominee-option label b {text-transform: initial;}
.nominee-option{display: grid; align-items: center;}
.nominee-option {grid-template-columns: 30px auto;grid-gap: 5px; }
.nominee-option label {background: #ffffff;  border: 1px solid #494848; border-radius: 10px; padding:10px 20px; }
.nominee-option label:hover{box-shadow:0 7px 9px -7px #192733; cursor: pointer;}
fieldset h3 {font-weight: 600;}
form.shortnom25 input[type="radio"] {width: 30px; height:30px;}


/********************* DATA TABLES ******************/
.datagroup {border: 1px solid #41800E; border-radius: 13px; background-color: #fff; margin-bottom: 20px;}
.databutton {width: 100%;display: grid;align-items: center;padding: 10px 10px;;grid-gap:3px;}
.data2col {grid-template-columns: 1fr 1fr;}
.data3col {grid-template-columns: 1fr 1fr 1fr;}
.databutton:nth-child(odd), .databutton:nth-child(even){border: 1px solid #000;}
.databutton:first-child { border-top-right-radius: 13px; border-top-left-radius: 13px;}
.databutton:last-child { border-bottom-right-radius: 13px; border-bottom-left-radius: 13px;}
.databutton .datanumber {text-align: center;}
.datagroup a {color: #26315E;}
a.databutton:hover, a.Adpanel:hover{box-shadow:0 7px 9px -7px #192733; cursor: pointer;}
a.databutton.nohover:hover{background: #fff; cursor: default; box-shadow: none;}


/********************* BUTTONS ******************/
.panel-call-light a.whapp-but:hover, a.whapp-but:hover,
.PinkButton:hover, .PinkLink:hover {background:#41800E;  box-shadow: inset 0 7px 7px -7px #163020;  color: #EBECEC; transition: all 0.5s ease;}
.panel-call-dark a.whapp-but:hover {background:#26315E;  box-shadow: inset 0 7px 7px -7px #141531;  color: #EBECEC; transition: all 0.5s ease;}
a.whapp-but, form .PinkButton, .PinkLink {font-weight: 600;}
a.whapp-but{padding: 3px 15px; }
a.whapp-but,
form .PinkButton, .PinkLink {background: #EA435A; box-shadow: inset 0 7px 7px -7px #2d1630;
  border:1px solid #26315E; border-radius: 6px;  color: #EBECEC;}
.Servicelinks .PinkLink, .articlecontact .PinkLink {text-transform: uppercase; font-weight: 600;}
.Servicelinks .PinkLink:hover {color: #EBECEC; }
.Servicelinks .PinkLink:hover svg path, .articlecontact .PinkLink:hover svg path
 {transform: rotate(360deg);  transform-origin: 70% 70%; transition: all 0.3s ease; }
.articlecontact {grid-gap:15px;}
.Servicelinks .heading {margin-bottom: 15px; border-bottom: 1px solid #EBECEC; padding-bottom: 10px;}

a.PinkLink { text-decoration: none; }
.PinkLink, .PinkButton {font-family: "Play", sans-serif;text-transform: uppercase;font-size:  1.2em; text-align: center;
   max-width: max-content;max-width: fit-content;
   max-height: fit-content;height: max-content;
   align-content: center;justify-content: center;align-items: center;
   line-height: 1.5em;
   padding:5px 20px 5px 20px; margin:10px 0;
   display: flex; grid-gap:10px;
  border-radius: 10px; flex-direction: row;}
  .PinkLink.PinkMax {width: 100% !important;; max-width: 100% !important;}
  .PinkLink.WithIcon {padding:5px 20px 5px 5px !important;}


/********************* CAROUSEL ************overflow: hidden; ******/
.banner {position: relative; }
.banner [id$="-banner"] {position: absolute; top: 0; left: 0;opacity: 0; z-index: 1; transition: opacity 0.8s ease-in-out; visibility: hidden; height: 100%;}
.banner [id$="-banner"].carousel-panel-active {position: relative; opacity: 1; z-index: 2; visibility: visible;}
.carousel-container { position: relative; margin-top: 20px; border:3px solid #26315E;width: 100%; min-height: 350px; }
.Carousel2 {display: grid; grid-template-rows: auto;border-radius: inherit;  color: #26315E;
  font-weight: 500; background: linear-gradient(90deg, rgba(235,235,236,1) 20%, rgba(235,235,236,0.50) 100%); }
.Carousel2 {padding:20px 25px 10px 25px;height: 100%;}
.Carousel2 h1 {color: #101820;}
.Carousel2 h2 {font-weight: 500;}
.Carousel-container .bot {display: grid;}
.Carousel2 p, .Carousel2 .extra {display: none;}
.carousel-buttons {width: 100%;text-align: center; position: relative; z-index: 6; padding: 15px 0;}
.carousel-nav {position: absolute; background: #B3C5CD;color: white; border: none; cursor: pointer; font-size: 1.5em; z-index: 2; transition: background 0.3s ease;opacity: 0.8;
  display: flex; align-items: center; justify-content: center;}
.carousel-nav:hover {background: rgba(234, 67, 90, 0.8);}
.carousel-indicator { border-radius: 50%; background: rgba(38, 49, 94, 0.4); border: 2px solid rgba(38, 49, 94, 0.6); cursor: pointer; transition: all 0.3s ease;}
.carousel-indicators {justify-content: center; gap: 10px;display: inline-flex;}
.carousel-nav {top: 200px; }
.carousel-nav {width: 15px; height: 40px;}
.carousel-nav.prev {left: 2px;}
.carousel-nav.next {right: -6px;}
.carousel-indicator.active {background: #B3C5CD;border-color: #266EAE;}
.carousel-indicator:hover {background: #EA435A; border-color: #EA435A;}
.carousel-nav {top: 180px; width: 20px; height: 40px;}
button.carousel-nav.prev {left: 2px; border-radius: 0 5px 5px 0;}
button.carousel-nav.next {right: -6px; border-radius: 5px 0 0 5px;}
button.carousel-nav.next:focus, button.carousel-nav.prev:focus, button.burger-menu{outline:none; border: none;}


/********************* BANNERS ******************/
#Home-banner, .Home-banner{ background: url(../images/banners/blossom-sml.jpg) no-repeat;background-size:cover; background-position: center;}
#AppDev-banner, .AppDev-banner { background: url(../images/banners/bulbhead-sml.jpg) no-repeat;background-size:cover; background-position: center;}
#Cloud-banner, .Cloud-banner { background: url(../images/banners/cloudgreen-sml.jpg) no-repeat;background-size:cover; background-position: center; }
#Network-banner, .Network-banner { background: url(../images/banners/network-sml.jpg) no-repeat;background-size:cover; background-position: center;}
#Design-banner, .Design-banner { background: url(../images/banners/design-sml.jpg) no-repeat;background-size:cover; background-position: center;}
#Repair-banner, .Repair-banner { background: url(../images/banners/repair-sml.jpg) no-repeat;background-size:cover; background-position: center; }
#Shop-banner, .Shop-banner { background: url(../images/banners/handsun.jpg) no-repeat;background-size:cover; background-position: center; }

#Home-banner .tagline {text-transform: uppercase; font-weight: 400; font-size: 1.6em;}
.banner-left{display: grid; grid-gap: auto; grid-template-rows: auto;}
.tagline2 {text-transform: uppercase; font-weight: 600; font-size: 1.3em; }







@media (min-width: 1250px)

{  .container, .sparkcontainer {width: 80vw !important;}
  .triplecols{ grid-template-columns: 1fr 1fr 1fr !important; }
  .box-filter, .boxcenter, .boxleft {padding:20px 50px !important;}
  .rounded {border-radius: 25px;}
  .formleftlabel {grid-template-columns: max-content auto;}
  .formleftlabel label, .formleftlabel .formerror {padding: 3px 10px 3px 0;}
  article .imggroup{max-width: 30%;}
  article .imggroup .gallery-image{max-height: 250px;}
  .gallery-breakgrid.rounded, .gallery-breakgrid {grid-column-end: span 3 !important ; grid-row-end: span 4 !important; }
}

@media (min-width: 1024px)
{
  body {background: url(../images/banners/blossom-big.jpg) no-repeat; background-size:cover; background-position: center;}
  h3,  .heading {font-size:1.5em;}
  h4 {font-size: 1.2em; }
  #AppDev-banner{background: url(../images/banners/bulbhead.jpg) no-repeat;background-size:cover; background-position: center;}
  #Cloud-banner, .Cloud-banner {background: url(../images/banners/cloudgreen.jpg) no-repeat;background-size:cover; background-position: center; }
  #Network-banner, .Network-banner {background: url(../images/banners/network.jpg) no-repeat;background-size:cover; background-position: center;}
  #Design-banner, .Design-banner {background: url(../images/banners/design.jpg) no-repeat;background-size:cover; background-position: center;}
  #Repair-banner, .Repair-banner {background: url(../images/banners/repair.jpg) no-repeat;background-size:cover; background-position: center;}
  #Shop-banner{background: url(../images/banners/handsun.jpg) no-repeat;background-size:cover; background-position: center;}
  .Shop-banner {background: url(../images/banners/handsun.jpg) no-repeat;background-size:cover; background-position: center;}
  .AppDev-banner  {background: url(../images/banners/bulbhead.jpg) no-repeat;background-size:cover; background-position: center;}
  .Shop-banner,  .AppDev-banner { background-position: center center; animation: shrink 8s infinite alternate;}
  .Carousel2 {padding:40px 60px 20px 60px !important;  min-height: 480px !important; }
  .carousel-container {min-height: 480px !important;}
  .carousel-nav {top: 240px !important;}
  .Carousel2 .banner-left, .carousel-logo {width: 70%;}
  .indent {padding-left:32px;} /*** lines text up with service heading****/
  .foot .cyberbottom {display: none;}
  .foot .itpro {display: none;}
  footer .cyberbottom {display: block;}
  footer .itpro {display: block;}
  footer .mid.show { grid-template-columns: 1fr 1fr 1fr!important;column-gap: 30px; padding-top:40px; padding-bottom: 30px;}
  #short-list { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  #short-list article .short-list { column-count: 3 !important; column-gap:20px; }
}

@media (min-width: 900px)
{
  .spark {width: auto !important; top:-34px !important; left:90% !important;}
  .spark2 {width: auto !important;  margin-top:-34px !important; left:30% !important;}
  .spark3 {width: auto !important;  top:-34px!important; left:80%!important;}
  .spark4 {width: auto !important;  top:-34px!important; left:75%!important;}
  .container, .sparkcontainer {width:90vw;}
  body {font-size: 0.9em;}
  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;}
  .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;}
  .Carousel2 { padding:20px 30px 10px 30px; min-height: 450px;}
  .carousel-container {min-height: 450px;}
  .Carousel2 .banner-left {width: 80%;}
  .carousel-logo img {max-width: 450px;}
  .carousel-nav {top: 240px;}
  .Carousel2 .Ticklink {display: flex; grid-gap:10px; align-items: center;}
  .fl {display:grid; justify-content: flex-end; align-items: end;}
  .triplecols{ grid-template-columns: 1fr 1fr; }
  .twocolA {display: grid; grid-template-columns: 1fr 2fr; }
  .twocolB {display: grid; grid-template-columns: 3fr 1fr;}
  .twoevencols {display: grid; grid-template-columns: 1fr 1fr;}
  .twocolA-Head {display: grid; grid-template-columns: 1fr 2fr; margin-bottom: 0;}
  .twoevencols, .triplecols, .twocolA, .twocolB, .twocolA-Head { grid-column-gap: 20px;}
  .triplecols.servicegrid {grid-gap:30px;}
  .foot {display: grid; grid-template-columns: 1fr auto;  justify-content: end; align-items: baseline;}
  a.Adpanel{ grid-template-columns: 300px auto auto;  grid-gap: 20px;}
  a.Adpanel .top {max-width: 500px;}
  #thegandersvg {max-width: 500px;}
  #villagemagsvg {max-width: 400px;}
  .rounded {border-radius: 25px;}
  h1 {font-size: 2.5em;}
  h2 {font-size: 1.8em;}
  .burger-nav {display: none!important; visibility: hidden; }
  .burger-menu {display: none!important;}
  .nav-header .logo {display: none;}
  .Servicelinks {display: block;}
  .Servicelinks { line-height: 2.8em; padding:20px 15px 30px 15px; color:#EBECEC; height: max-content; margin-top:50px; }
  .Servicelinks a, footer .iconlink {color:#EBECEC;  font-weight: 400;}
  .Servicelinks a:hover {color: #DEDC6F;}
  .page-heading {padding:10px 0;}
  .directions {grid-area: 1 / 1;}
  form.shortnom25 input[type="radio"] {width: 40px; height: 40px;}
  .nominee-option{grid-template-columns: 50px auto; grid-gap: 20px;}
  .gallery-image {max-height: 250px;}
  .gallery-breakgrid.rounded, .gallery-breakgrid {grid-column-end: span 2; grid-row-end: span 2 ;}
  .overlay{width:80%;}
  article img.mugshot {max-width: 30%; }
  article .imggroup, article img.transpimg, article img.mugshot {max-width: 30%; float: right; margin: 0 0 10px 15px;}
  .articlecontact {display: none;}
    .box-filter, .boxcenter, .boxleft {padding:20px 20px;}
  .bottom .container {display: grid; grid-template-columns: 1fr 3fr;}
  .bottom .container .right {display: flex; justify-content: flex-end; text-align: right;}
  .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;}
  #short-list { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  #short-list article .short-list { column-count: 3 !important; column-gap:20px; }
}

@media (min-width: 700px)
{
  #short-list { display: grid; grid-template-columns: 1fr 1fr; }
  #short-list article .short-list { column-count: 2; column-gap:20px; }

}

@media (min-width: 480px)
{
  #short-list { display: grid; grid-template-columns: 1fr !important; }
  #short-list article .short-list ul { column-count: 1; }
  .spark {width: 75px; top:-27px; left:70%;}
  .spark2 {width: 75px;  margin-top:-30px; left:20%;}
  .spark3 {width: 75px;  top:-28px; left:70%;}
  .spark4 {width: 75px;  top:-28px; left:70%;}
  .tagline {display: block;}
  .rounded {border-radius: 20px;}
  .burger-nav {right: -300px; width: 280px; padding: 20px 20px 20px 20px; }
  .burger-nav a {font-size: 1em;}
  .Carousel2 p, .Carousel2 .extra {display: inline;}
  .carousel-container {min-height: 420px;}
  .switch {display: none}; /* Show switch content on small screens */
  .carousel-logo img {max-width: 350px;}
  .carousel-nav {top: 180px;}
  .panel-call-light,.panel-call-dark {display: flex; }
  .foot-left-links, .foot-Right-links { line-height: 2.5em;}
  .foot-mid-links .split {margin-top: 0px;}
}