*:focus { outline: none; }

@font-face { font-family: "Raleway"; src: url('static/Raleway-Bold.ttf') format('truetype'); }
  
:root {
  --gen_trans: 0.35s ease-in-out;
  --fast_trans: 0.25s ease-in-out;
  --side-size:200px;
  --gen-border-radius:2.7em;--gen-border-radius-sm:1.5em; --gen-border-radius-exsm:0.7em;
  --cc-modal-border-radius:.5rem; --cc-btn-border-radius:.5rem;
 --cc-modal-transition-duration:.25s; --cc-modal-margin:1rem; --cc-z-index:2147483647; --cc-cookie-category-expanded-block-bg:transparent; --cc-overlay-bg:rgba(0,0,0,.65); --cc-pm-toggle-border-radius:4em; 
 
  --timing: 400ms;
  --rotation: 43deg;
  --imgcolour: grayscale(80%);
  --main-rt-margin: 130px;
}
  :root, [data-theme="light"] { --error-color: #c30; --error-bkgrnd: #ffe6ee; --success-color: #008040;--success-bkgrnd: #ccffe6; --warning-color: #ff0; --diasbledbg: #e6e6e6; 

    --hoverred:#f00;  /* done */
    --basehover:#d9b3ff; /* done */
    --hoversecond:#90c;  /* done */
    --basebrtyell: #ff0; /* done - not used yet*/
    --basewhite:#fff; /*done */
    --basetxt:#400080; /*done */
    --baseltorange:#fff2cc; /*done */
    --basebody:#ffc; /*done */
    --almostblack: #1a0033; /* done */
    --ltpurp: #93f; /*done */
    --tempnote: #9cf; /* done */
    --buttonhover: #283B61;
    --xtradark: #2952a3; /* done */
    }
    [data-theme="dark"] { --error-color: #f99; --error-bkgrnd: #600; --success-color: #ccffe6;--success-bkgrnd: #008042; --warning-color: #ff0; --diasbledbg: #e6e6e6; 

      --hoverred:#9cf;
      --basehover:#f2f2f2; /*done */
      --hoversecond:#69f; /* done */
      --basebrtyell: #ff0; 
      --basewhite:#fff; 
      --basetxt:#f2f2f2; /* done */
      --baseltorange:#fff2cc; 
      --basebody:#171736; /* done */
      --almostblack: #99f; /* done */
      --ltpurp: #cdf; /* done */
      --tempnote: #9cf; /* done */
      --buttonhover: #283B61; /* done */
    }    

    #prnttxtratop, .prnt {display:none !important}
html { -webkit-font-smoothing: antialiased !important;height: 100%; overflow: hidden;}
html, body { padding:0; margin:0;scroll-behavior:smooth; font-size: 18px; }
    body { color: var(--basetxt); background: var(--basebody); font-family: Verdana, Geneva, sans-serif; width:100%; word-wrap:break-word; -webkit-overflow-scrolling: touch; min-width:330px; letter-spacing:0.02em; -webkit-perspective: 1px; perspective: 1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; height: 100%;overflow-x: hidden;} 

    a:not(a.noxtralnk) {color:var(--ltpurp); position: relative; display: inline; padding: 2px 0; margin-bottom: 0.5em;
    &:hover, &:focus, &:visited:hover  {color:var(--basehover); cursor: pointer;
          &::after, &::before { width: 100%; left: 0; }
    }
    &::after, &::before { content: ''; position: absolute; top: calc(100% + 5px); width: 0; right: 0; height: 3px; }
    &::before { transition: width .4s cubic-bezier(0.51, 0.18, 0, 0.88) .1s;
      background: var(--hoversecond); }
    &::after { transition: width .2s cubic-bezier(0.29, 0.18, 0.26, 0.83);
      background: var(--hoverred);    }
  }
   a:not(nav a):visited {color:var(--almostblack); }
    /* a[href*="//"]::after {content: "\279A"; display: inline-block; padding-left: 0.5em; vertical-align: top; font-size:0.8em;}
    a[href*="//"]:hover {color:var(--basehover); border-bottom:1px solid var(--basehover)}*/
    .miniinst {font-size: 0.7em;}
    .clear {clear:both}
    .centr {text-align:center}
    .rtalign {text-align:right}
    .privactitle {background:transparent; border-bottom:1px solid var(--basegrey); font-size:1.5em; padding:0.5em; margin:0.5em 0 0.5em 0;line-height:1.2em; text-align:left}
    p  { margin-bottom: 1rem; } 
 /*   p {&:not(:last-child)  { margin-bottom: 2rem; }}       too large on provacy policy   */
   li:not(#cooky li):before /*a:not(a.noxtralnk)*/{content:"\273F"; margin-right: 0.5em;}

  a, button, .imghover .img-second, .switcher  {-webkit-transition:var(--gen_trans); -moz-transition: var(--gen_trans); -o-transition: var(--gen_trans); transition: var(--gen_trans); text-decoration:none; text-transform: uppercase}


  nav {position: sticky; width: 100%; top: 0; z-index: 7575676;}
  .topmenuuu {background: var(--basebody);border-bottom: 5px double var(--baseltorange); height: 70px; padding: .5em 1em; }
  [data-theme="dark"]  .topmenuuu  {border-bottom: 5px double var(--buttonhover);}
  .toplogo {height:100%; width:auto; }
  nav h1 {font-size: 3em; display: inline-block; position: relative; top: 0; margin:0; top: -.25em;}
  nav a {color:var(--basetxt); text-decoration: none}
  nav a:hover {color: var(--ltpurp)}
  .switcher { position: sticky;top:0; z-index: 75756769; font-size: 0.7em; opacity: 0.7;}
 .switcher button, .switcher button:focus, .switcher button:active {color:var(--almostblack); background:var(--basehover); border:1px solid var(--basetxt); position: absolute; top: 1em; right: 1em;}
 .switcher button:hover {background:var(--hoversecond)}

  .parrlx.header {padding: 25vh 10%;}
  .parrlx { position: relative; padding: /*25vh*/1em 10%; min-height: 100vh; width: 100vw; box-sizing: border-box; transform-style: inherit; }
  .parrlx:not(.parrlx.noshadw) {box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);}
  .parrlx:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0;  }
  /*.parrlx:not(.parrlx.header):before {box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);}*/
 /* .parrlx:nth-child(2n) .parrlxnfo { margin-left: 0; margin-right: auto; }   
  .parrlx:nth-child(2n+1) .parrlxnfo { margin-left: auto; margin-right: 0; }  DO NOT DELETE THIS   */
  .parrlx, .parrlx:before { background: 50% 50% / cover; }

  #title, .dayhead {width: calc(100% + 90px);}
  #title {z-index:2;left: -45px; right: -90px; top: -90px; bottom: -90px; background: url(../code_baseimages/indexherobg-dark.svg) center center no-repeat;background-size: cover;border-bottom: 20px double #202060;}
  .dayhead {background: url(../code_baseimages/indexherobg.svg) center center no-repeat; background-size: cover; position: absolute;left: 0; right: 0; top: 0; bottom: 0;transition: opacity 1s;border-bottom: 20px double var(--basetxt);}
  [data-theme="dark"] .dayhead {opacity: 0;}
  /*#title h1 { transform: translateZ(.25px) scale(.75); transform-origin: 50% 100%; }*/
  .header { text-align: center; font-size:2em; color: #fff; text-shadow: 0 2px 2px #000; }
  .hero-text { color: var(--hoverred);position: inherit;width: 95%; margin: 0 auto; }
  [data-theme="dark"]  .hero-text { color: var(--basewhite); }
  .hero-text h1 {margin:0}
  .thevan { position:absolute; bottom:12%; right:0; width:90%; display:flex}
  .thevan img {height:50px; width:auto; }

  #parrlx1:before {background-color:var(--basebody); background-image: url("../code_baseimages/batthern.png");background-size: auto;transform: translateZ(-1px) scale(2); }
  #parrlx1 {top:-90px}
  #parrlx2, #parrlx4, #parrlx5  {background:var(--basebody); z-index:2;}
  #parrlx2 .reviws {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap;width: auto;justify-content: space-around; padding: 0; margin: 0; list-style: none;}
  .parrlx h2 {font-weight: bold; font-size: 1.3em; margin-bottom: 1em;/* text-align:left;*/}
  .parrlxnfo {flex: 1 0 40%; /*margin: 1em;*/}

  #parrlx3:before {background-image: url("../code_baseimages/aboutbg.jpg");transform: translateZ(-1px) scale(2); }
  #parrlx6:before {background-image: url("../code_baseimages/emaillst.jpg");transform: translateZ(-1px) scale(2); }
  #parrlx3, #parrlx6 {background: rgba(255, 242, 204, .4);}
  [data-theme="dark"] #parrlx3, [data-theme="dark"] #parrlx6 {background: rgba(23, 23, 54, .5);}
  #parrlx4 { background:  var(--basebody) }
  .parrlxnfo {  background: rgba(255, 255, 255, .7); padding:2em; box-shadow: 0 0 8px rgba(0, 0, 0, .7);border: 5px double var(--basehover); flex-grow: 1; text-align:center;  border-radius:var(--gen-border-radius-sm)}
  [data-theme="dark"] .parrlxnfo {background: rgba(15, 22, 36, .7);border: 5px double var(--hoverred);}
.content {padding-top:90px;}
main, .allcontctstuff {margin: 2em auto;width:90%;max-width: 1080px;}
.parrlx:not(.parrlx.header) h1 {text-align: center; font-size:3.7em; margin:1em 0;position:relative}
.productarea {display: flex; align-items: center; /* add from here */ flex-direction: row;justify-content:space-between; align-items:flex-start; gap:2em}
.productarea:nth-child(3n) {flex-direction: row-reverse;}
.productarea:not(:last-child) { padding-bottom:5em;}
 .imghover {width: 30%;max-width: 300px; height:auto; margin: 0; position: relative; background:var(--basewhite); border-radius: 5px;box-shadow: 0 0 8px rgba(0, 0, 0, .7);}
 .imghover img {width:100%; height:100%;}
 .imghover .img-first { position: relative;  }
 .imghover .img-second { position: absolute; opacity: 0; -webkit-transition: opacity 0.7s ease; transition: opacity 0.7s ease; }
 .imghover .img-first, .imghover .img-second {top: 0; right: 0; bottom: 0; left: 0; padding:7px;}
 .imghover:hover > .img-second { opacity: 1; }
 /*.prodinfo {background:var(--basewhite); border: 5px double var(--basehover); flex-grow: 1; margin-left: 2em; padding:1em; text-align:center;  border-radius:var(--gen-border-radius-sm)}*/
.productarea h2 { font-size:1.5em; margin-bottom:1.5em;}
 a.buton2buy {color: var(--almostblack); background: var(--basehover);font-size: 1.25em; padding: 0.5em 1.5em; border: 2px solid var(--basetxt);border-radius: 40px; display:block; width: fit-content;margin: 1em auto;}
 a.buton2buy:hover,  a.buton2buy:focus,  a.buton2buy:visited:hover { color:var(--basewhite); background:var(--hoversecond); }

 button {color: var(--hoversecond); background: var(--basehover);font-size: 1.25em; padding: 0.5em 1.5em; border: 2px solid var(--basetxt);border-radius: 40px;}
 /*[data-theme="dark"] button {border: 2px solid var(--hoversecond);}*/
 button#ihavecookiesBtn, button#gdpr-cookie-advanced {font-size: 0.8em; padding: 7px 11px; border-radius: 20px; margin-left: 15px;}#cooky button {color: var(--hoversecond); background: var(--basewhite);}[type="reset"]:hover, [type="submit"]:hover, button:hover, html [type="button"]:hover, [type="reset"]:active, [type="submit"]:active, button:active, html [type="button"]:active, [type="reset"]:focus, [type="submit"]:focus, button:focus, html [type="button"]:focus, button#ihavecookiesBtn:hover, button#ihavecookiesBtn:focus, button#ihavecookiesBtn:active {color: var(--basewhite); background: var(--hoversecond);}#cooky button:hover {color: var(--basewhite); background: var(--hoversecond);}
 button:hover, button#ihavecookiesBtn:hover, button:focus, button#ihavecookiesBtn:focus, button:visited:hover, button#ihavecookiesBtn:visited:hover  { color:var(--basewhite); background:var(--hoversecond); }

 #parrlx5 img { padding: 1.5em 0;}
 
footer {display: flex; padding:2em}
footer div {flex: 2 1 auto;}
footer .legalnks a {position: relative; display: block; }
.botminfo {font-size:0.6em; text-align:right; margin-top: auto;}

.contct button {  font-weight: bold;position: absolute;right: 0;bottom: 0;}
*:disabled, input[type="checkbox"]:disabled + label::before{ cursor: default; -webkit-filter: blur(2px); filter: blur(2px); }input[type="checkbox"] + label::before, .contct input[type="checkbox"] + label::after { -webkit-transition:var(--gen_trans); -moz-transition: var(--gen_trans); -o-transition: var(--gen_trans); transition: var(--gen_trans);} #cooky {z-index:2000; background-color:var(--basehover);  position: sticky; margin-right: 2em; margin-left: 2em;bottom: 0;  padding: 1.3em; border-radius: 5px; box-shadow: 0 6px 6px rgba(0,0,0,0.7); } #cooky h4, #cooky h5 { color:var(--basewhite); }
[data-theme="dark"] #cooky, [data-theme="dark"] #cooky h4, [data-theme="dark"] #cooky h5 {color:#333}
#cooky h4 { font-size: 1.3em; margin-bottom: .5em; } #cooky h5 {font-size: 1.1em; margin: 0.4em 0; } #cooky p, #cooky ul { font-size: 0.9em; } #cooky p:last-child { margin-bottom: 0; text-align: right; } /*#cooky a { color: #7485AB; }*/ #cooky a:hover { color:var(--basewhite); }[data-theme="dark"] #cooky a:hover { color:var(--tempnote); }

button:disabled { opacity: 0.3; } #cooky input[type="checkbox"] { float: none; margin-top: 0; margin-right: 5px; } #cooky li { width: 100%; display: inline-block; padding: 0.2em 0; } #cooky input[type="checkbox"] { display: none; } #cooky input[type="checkbox"] { float: none; margin-top: 0; margin-right: 5px;} #cooky input[type="checkbox"] + label { display: block; position: relative; padding-left: 35px;} #cooky input[type="checkbox"] + label::before { content: ''; display: block; width: 20px; height: 20px; border: 1px solid var(--hoversecond); position: absolute; left: 0; top: 0; opacity: .6; } #cooky input[type="checkbox"]:checked + label::before { border: 2px solid #093; border-top-color: rgb(0, 153, 51); border-left-color: rgb(0, 153, 51); width: 10px; top: -5px; left: 5px; border-radius: 0; opacity: 1; border-top-color: transparent; border-left-color: transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); } :disabled, #cooky input[type="checkbox"]:disabled + label::before { cursor: default; -webkit-filter: blur(2px); filter: blur(2px); }#cooky ul {text-indent: 0;} 
[data-theme="dark"] #cooky button {border: 2px solid var(--hoversecond);}

  .animatable { visibility: hidden; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; }
  .animate-in { visibility: visible; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 5s; -moz-animation-duration: 5s; -ms-animation-duration: 5s; -o-animation-duration: 5s; animation-duration: 5s; -webkit-animation-play-state: running; -moz-animation-play-state: running; -ms-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; }
  .animate-out { visibility: visible; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 5s; -moz-animation-duration: 5s; -ms-animation-duration: 5s; -o-animation-duration: 5s; animation-duration: 5s; -webkit-animation-play-state: running; -moz-animation-play-state: running; -ms-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; -webkit-animation-direction: reverse; -moz-animation-direction: reverse; -ms-animation-direction: reverse; -o-animation-direction: reverse; animation-direction: reverse; } 
 /* .animate-out:after {
    content ''
    letter-spacing: inherit;
  }*/
  @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 20%{opacity: 1;} 60% { -webkit-transform: translateX(-20px); } 80% { -webkit-transform: translateX(5px); } 100% { -webkit-transform: translateX(0); } }
  @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 20%{opacity: 1;} 60% { -moz-transform: translateX(-20px); } 80% { -moz-transform: translateX(5px); } 100% { -moz-transform: translateX(0); } }
  @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 20%{opacity: 1;} 60% { -o-transform: translateX(-20px); } 80% { -o-transform: translateX(5px); } 100% { -o-transform: translateX(0); } }
  @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 20%{opacity: 1;} 60% { transform: translateX(-20px); } 80% { transform: translateX(5px); } 100% { transform: translateX(0); } }
  .animate-in.bounceInRight, .animate-out.bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; }

.connntact {margin-top:3em;}
form {position:relative;}
input[type="checkbox"] { display: none; }

.flexxy { display: flex; justify-content: space-between; width: 95%; margin: 0 auto; text-align: center; align-items: center; }
.flexxy div { padding: 0.5em; width: inherit; max-width: 45%; }
.emailsignupform .flexxy div { max-width: 90%; margin: 0 auto}
#parrlx6 p {padding-bottom:1em}

input[type="checkbox"] + label { display: block; position: relative; padding-left: 35px; margin-bottom: 20px; user-select: none;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; line-height: 1.6; }
input[type="checkbox"] + label:hover {cursor: pointer;}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before { content: ''; display: block; width: 20px; height: 20px; border: 1px solid var(--baselink); position: absolute; left: 0; top: 0; opacity: .8; }
input[type="checkbox"]:checked + label:before {  border: 2px solid var(--baselink); width: 10px; top: -5px; left: 5px; border-radius: 0; opacity: 1; border-top-color: transparent; border-left-color: transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
input[type="checkbox"] + label:before, .contct input[type="checkbox"] + label::after { -webkit-transition: all .7s, border-color .7s; transition: all .7s, border-color .7s; }
.contct input[type="checkbox"], .emailsignup input[type="checkbox"] { position: absolute; left: -9999px; }
.contct input[type="checkbox"] + label, .emailsignup input[type="checkbox"] + label { position: relative; display: inline-block; padding-left: 2.7em;}
.contct input[type="checkbox"] + label::before, .contct input[type="checkbox"] + label::after, .emailsignup input[type="checkbox"] + label::before, .emailsignup input[type="checkbox"] + label::after { content: ''; position: absolute; }
.contct input[type="checkbox"] + label::before, .emailsignup input[type="checkbox"] + label::before { background:var(--basehover); border: 2px solid var(--hoversecond); ; left: 0;width: 1.7em; height: 1.7em;top: 0; bottom: 0; margin: auto 0; }
[data-theme="dark"] .contct input[type="checkbox"] + label::before, [data-theme="dark"] .emailsignup input[type="checkbox"] + label::before {background:var(--tempnote); border: 2px solid var(--hoversecond);}
.contct input[type="checkbox"]:checked + label::before, .emailsignup input[type="checkbox"]:checked + label::before {background:transparent; border-radius:30px; border:none; height: 2.2em; width: 2.2em ; left: -3px;}
.contct input[type="checkbox"]:checked + label::after, .emailsignup input[type="checkbox"]:checked + label::after { background-image: url(../code_baseimages/check.svg);background-size: contain; height: 1.7em; width: 1.7em; background-repeat: no-repeat; filter: invert(14%) sepia(78%) saturate(7322%) hue-rotate(286deg) brightness(82%) contrast(119%);left:0.1em; top: 0.2em; bottom: 0; margin: auto 0; }
[data-theme="dark"] .contct input[type="checkbox"]:checked + label::after, [data-theme="dark"] .emailsignup input[type="checkbox"]:checked + label::after  { filter: invert(56%) sepia(10%) saturate(6091%) hue-rotate(198deg) brightness(102%) contrast(102%);left:0.1em; top: 0.2em; bottom: 0; margin: auto 0; }
.emailsignup input {width: 90%; max-width: 600px;}
#emailgroupresult {margin:0 auto; width:fit-content;padding: 0.7em; border-radius: 3em; font-weight: bold;}
.contct .form-field {width: 96%; margin: 0 auto; padding-left: 0.6em; margin-bottom:1em;}
input { line-height: 1.5; padding: 0.6em 1.3em;  width: inherit;border-radius:var(--gen-border-radius);}
form textarea { width: inherit; border-radius: var(--gen-border-radius-sm); padding: 0.6em 1.3em; margin: 0 auto; margin-top:0.5em; display:block}
input, form textarea { color:var(--almostblack); background:var(--basehover); border: 1px solid var(--hoversecond); }
[data-theme="dark"] input, [data-theme="dark"] form textarea { color:var(--basetxt); background:var(--buttonhover); border: 1px solid var(--hoversecond); }
input.buttn {font-weight:bold;width: fit-content;}
[data-theme="dark"] input.buttn {color:var(--almostblack); background:var(--basetxt); font-weight:bold;}
input.buttn:hover {cursor: pointer;}
[data-theme="dark"] input.buttn:hover {color:var(--basetxt); background:var(--hoversecond);}
input:disabled {filter: blur(2px);}
input:disabled:hover {color: var(--almostblack); background: var(--basehover);;cursor: not-allowed;}
[data-theme="dark"] input:disabled:hover {color:var(--almostblack); background:var(--basetxt);}
::-webkit-input-placeholder {color: var(--basegrey); } :-moz-placeholder {color: var(--basegrey); opacity:  1; } ::-moz-placeholder {color: var(--basegrey); opacity:  1; } :-ms-input-placeholder {color: var(--basegrey); } ::-ms-input-placeholder { color: var(--basegrey); }::placeholder { color: var(--basegrey); }
.switch { position: relative; top: 1em; left: 50%; width: 170px; height: 50px; text-align: center; margin: -30px 0 2em -75px; background: var(--success-bkgrnd); border-radius: var(--gen-border-radius); }
.switch span { position: absolute; width: 20px; height: 4px; top: 50%; left: 50%; margin: -2px 0px 0px -4px; background:var(--success-color); display: block; transform: rotate(-45deg); }
.switch span:after { content: ""; display: block; position: absolute; width: 4px; height: 12px; margin-top: -8px; background: var(--success-color); }
input[type=radio] { display: none; }
.switch label { cursor: pointer; color: rgba(0,0,0,0.2); width: 60px; line-height: 50px; }
label[for=yes] { position: absolute; left: 10px; height: 20px; }
label[for=no] { position: absolute; right: 10px; }
#no:checked ~ .switch { background: var(--error-bkgrnd); }
#no:checked ~ .switch span { background: var(--error-color); margin-left: -8px; }
#no:checked ~ .switch span:after { background: var(--error-color); height: 20px; margin-top: -8px; margin-left: 8px; }
#yes:checked ~ .switch label[for=yes] { color:var(--success-color); }
#no:checked ~ .switch label[for=no] { color:var(--error-color); }
.optiongrp, .emailresp {margin:2rem 0}
.optiongrp p {margin-bottom: 0.5em;}
.optiongrp div {text-align:left; margin:0 auto;width: fit-content;}
.optiongrp label {display:block; margin: 0.4em 0;}
.btn-radio { cursor: pointer; -webkit-user-select: none; user-select: none; }
.btn-radio svg { fill: none; vertical-align: middle;display: initial; margin-right: 0.5em;}
.btn-radio svg circle { stroke-width: 2; stroke: var(--basewhite); }
.btn-radio svg path { stroke: var(--basehover); }
.btn-radio svg path.inner { stroke-width: 6; stroke-dasharray: 19; stroke-dashoffset: 19; }
.btn-radio svg path.outer { stroke-width: 2; stroke-dasharray: 57; stroke-dashoffset: 57; }
.btn-radio input:checked + svg path.inner { stroke-dashoffset: 38; transition-delay: 0.3s; } .btn-radio input:checked + svg path.outer { stroke-dashoffset: 0; } 
.btn-radio span { display: inline-block; vertical-align: middle; }  
.successmsg, .nosendmsg {position:absolute; top:30%; padding: 1em; border-radius: var(--gen-border-radius-exsm); width: 80%; left:0;  right:0;  margin-left: auto;  margin-right: auto; text-align:center; font-size:0.7em; text-shadow: none;}
.successmsg.newslett, .nosendmsg.newslett {position: initial;margin-bottom: 1.5em; font-size:1em}
/*.successmsg {-webkit-text-stroke: 1px #060;}
.nosendmsg {-webkit-text-stroke: 1px #600;}*/
.successmsg, .inplacsuccess {color: var(--success-color); z-index: 44564;font-size:1.3em}
.form small, .nosendmsg, .inplacnosend {color: var(--error-color);}
.success input, .successmsg, .form-field.success textarea {border:1px solid var(--success-color); background: var(--success-bkgrnd);}
.error input, .nosendmsg, .form-field.error textarea {border:1px solid var(--error-color); background: var(--error-bkgrnd);}
.successmsg h1 {color: var(--offcolour)}
.nosendmsg h1 {color: var(--warning-color)}

#backtotopbut {position: sticky; bottom: 0; z-index: 545453;}
#scrollTopBtn {font-size: 2em;rotate: -90deg;width: fit-content; display:block; padding: 0.2em 0.4em; background-color: var(--hoversecond); color: var(--baseltorange); border: none; border-radius: var(--gen-border-radius); opacity: 0; position: absolute; bottom: 20px; right: 20px;}
#scrollTopBtn.show {opacity:0.7}
#scrollTopBtn.show:hover {background-color:var(--hoverred); opacity:1}

@media (max-width : 1150px) /* slightly smaller*/{
body {font-size:0.9em}
}

@media (max-width : 850px) /* tablets - switch to mobile menu*/{
  .topmenuuu {height:50px}
  nav h1 {font-size:1.7em;top: -.35em;}
  .parrlx {padding:1.5em}
  .productarea {display:block; padding: 2em 0;}
  .productarea:not(:last-child) { padding-bottom: 2em; border-bottom: 5px double var(--basehover);}
  [data-theme="dark"] .productarea:not(:last-child)  {border-bottom: 5px double var(--xtradark);}
  .imghover {margin:0 auto; width:100%; margin-bottom:1.5em}
  .flexxy {display:block; width:97%; margin: 0;}
  .flexxy div {max-width:100%}
  .contct .form-field {width:95%;margin: 0;}
  footer { display: block; text-align: center;}
  .botminfo { text-align: center; margin-top: 3em;} }
  @media (max-width : 700px) /* tablets - switch to mobile menu*/{
    .flexxy {width:96%; }
    .contct .form-field {width:94%;}
  }
@media (max-width : 550px) /* phone */ {
  .topmenuuu {height:40px}
  nav h1 {font-size:1.4em;top: -.4em;}
  .topmenuuu.smalr { padding: 0.5em;}
  .switcher button, .switcher button:focus, .switcher button:active { top: 0.8em;padding: 0.5em 0.7em;right: 0.5em;}
  .flexxy {width:94%; }
  .contct .form-field {width:91%;}
}

@media print {
  * {transition: none !important;box-sizing: border-box; -moz-box-sizing: border-box;  margin: 0; padding:0; overflow-y: initial; overflow-x: initial; background-image: none !important;font-family: serif !important; font-size: 12pt !important; line-height: 1.3 !important; color: black !important; background-color: white !important; background-image: none !important;}

  @page { color:black; size: auto portrait; margin: 1.5cm 0.5cm 1.5cm 0.5cm; -webkit-print-color-adjust: exact; print-color-adjust: exact; padding-top:1cm; }
  body {color:black;background: white; font: 12pt "Georgia", Times New Roman, Serif;line-height: 1.3; font-weight: normal; overflow-x: hidden; margin:0; height: auto;width:100%; max-width:100% !important; }
  .prnt, #prnttxtratop {display: block !important; width:100%; max-width:100%; height:auto; text-align:left;}
  .noprnt, nav, .buton2buy {display:none !important;}	
  ul, img, a, table, a[href*="//"]::after, #prntxtrabotnfo {page-break-inside: avoid; -webkit-region-break-inside: avoid;}
  h1, h2, h3, h4, h5 { page-break-after: avoid; }
  img { -webkit-filter: grayscale(100%); filter: grayscale(100%); }

  h1, h3, h4, .flexxy h5, .legaltitle {color:black; font-size: 18pt !important; }
 /* .mainstuf {width:100%; height: auto;}*/
  a:link, a:visited, a { color:black; background:transparent; font-weight:bold; text-decoration:underline; border-bottom: none; box-shadow: none; color: inherit; padding:0; text-transform:uppercase; }
  /*a[href*="//"]::after{ color:#06c; content:"[ link: " attr(href) "] "; vertical-align: baseline; font-size:0.8em; top:0; text-decoration:none !important;}*/
  .parrlx { width: 100%; min-height: auto; border-bottom:1px solid black;}
  #parrlx1 { top: 0;}
  .parrlx:not(.parrlx.noshadw) { box-shadow: 0; }
  #parrlx1:before, #parrlx3:before {background-image: none;}
  .parrlx:not(.parrlx.noshadw) { box-shadow: none; }
  [data-theme="dark"] .parrlxnfo, .parrlxnfo { background: none; border:none; box-shadow: none;}
  .imghover {width:20%; max-width:20%;background: none; box-shadow: none; }
  #prnttxtratop:after, #prntxtrabotnfo:after {display: block; width:100%; text-align:center; padding:0.5cm; white-space: pre; }
  #prnttxtratop:after {content: "Travel Nerd"; font-size:30pt !important; border-bottom: 1pt solid black; padding-bottom: 0.5cm;}
  /*#prntxtrabotnfo {border-top:1pt solid black;  0; width:100%; }*/
  #prntxtrabotnfo:after { content: "Thank you for printing our content at travel-nerd.com. \A Please contact us via the website for more information."; font-size:1.2em;margin-top: 0.5cm; border-top: 1pt solid black;  font-style: italic; }
  @page:right{ @bottom-right { content: "Page " counter(page) " of " counter(pages); } }
  @page:left{ @bottom-left { content: "Page " counter(page) " of " counter(pages); } }
}