@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400';
@import 'menu.css';


/* CORE STYLES */
:root {
    --blue: #095b9d;
    --alternate: #ffbf14;
    --white: #fff;
    --grey: #444;
    --lightblue: #81B4FC;
    --pastel: #e3f0f2;
    --lightgrey: #999;
    --lightergrey: #eee;
    --vvvlight: #f6f6f6;
    --vvvvlight: #f9f9f9;
    --red: #aa0000;
    --transwhite: rgba(255,255,255,0.9); 
    --transred: rgba(237, 28, 36, 0.9);
    --shadow: rgba(0,0,0,0.05);
    --black: #000; 
    --notasdark: #bbb;
  }
html {
	scroll-behavior: smooth;
}
.cantsee6{
    display: none;
}
.sample{
    position: fixed;
    inset: 0;
    display: grid;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    pointer-events: none;
}
.sample h1{
    font-size: 10rem;
    color: rgba(50,50,50, 0.4);
    text-transform: uppercase;
    transform: rotate(30deg); 
}
body{
    background-color: var(--white);
    margin: 0; 
    font-family:  'Open Sans', sans-serif, sans;
    overflow-x: hidden;
    position: relative;
}
img{
    max-width: 100%; 
}
input, textarea {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif,
    Open Sans, Arial, Helvetica, sans-serif;
	font-size: 1rem;
	padding: 7px;
	background-color: #fff;
	max-width: 80vw;
	width: 250px; 
}
input[type=radio]{
    width: unset;
}

ol > li{
    padding-left: 1rem;
}
a{
    text-decoration: none;
}
td {
    vertical-align: top;
}
h6{
    font-size: 1.1rem;
    margin-block: 1rem;
}
h1, 
h2,
h3,
h4,
p {
    text-wrap: pretty;
  }
  
header{
    display: grid;
    margin: 5px auto;
}
header a{
    text-transform: uppercase;
    text-decoration: none;
}
header a:first-child{
    margin: auto;
}
header img{
    width: 400px;
    margin: 10px auto; 
}
header, 
.main{
    background-color: var(--white);
}
abbr{
    border-bottom: 0;
    text-decoration: none;
}
sup{
    font-size: 0.6em; 
}
h2 sup{
    font-size: 0.5em; 
}
h2 u{
    position: relative;
    text-decoration: none;
}
/* h2 u:after{
    content: "";
    position: absolute;
    inset: 45px -5px auto -5px;
    background-color: var(--alternate);
    height: 6px;
    transform: rotate(-3deg);
    display: block;
}
h2 u.elf:after{
    transform: rotate(3deg);
    inset: 50px -5px auto -5px;
} */
.main{
    margin: auto;
    padding: 1rem 3vw;
    line-height: 1.7;
    color: var(--grey);
}
.main > div,
.main > h2,
.main > h1{
    max-width: 1000px;
    margin-inline: auto;
}
.main a{
    color: var(--blue);
    transition: color 0.4s;
}
.main a:hover{
    color: var(--alternate);
}
.main p a {
    border-bottom: 1px dashed var(--blue);
}
.main h1,
.main h2{
    color: var(--black);
    font-weight: 400;
    line-height: 1.2;
    font-size: 36px;
    /* text-transform: capitalize;     max-width: 650px;     margin-bottom: 0;*/
    padding-bottom: 0;


}
.main.full h1,
.main.full h2,
.main.full.centred h4,
.main.full.centred h3,
.main.full.centred p,
.centred h4{
    text-align: center;
    margin-inline: auto;
    max-width: none; 
}
.centred.padding h4{
    padding-block: 2rem; 
}
.main.full.centred h4,
.main.full.centred h3, 
.centred h4{
    margin-block: 0.5rem;
}
.main.full.examples h2{
    margin: 2rem auto;
}
.main img{
    display: block;
}
/* .main > h1:first-of-type{
    font-family: Audiowide;
    text-transform: uppercase;
} */
.main h3{
    font-weight: 400;
    line-height: 1.7;
    font-size: 26px; 
    color: var(--grey);
    max-width: 900px;
}
.main h4{
    color: var(--grey);
    font-weight: 400;
    line-height: 1.2;
    font-size: 24px;
    margin-bottom: 1rem;
}
.main h5{
    color: var(--red);
    font-weight: 400;
    line-height: 1.7;
    font-size: 26px;
    margin: 0;
    padding: 0;
}
.malsform input,
.malsform select{
    background-color: var(--alternate);
    border-radius: 1rem;
    margin: 2rem auto;
    border: 0;
    padding: 1rem 2rem;
    transition: 0.3s;
    color: var(--black);
    font-family:  'Open Sans', sans-serif, sans;
    font-size: 1.25rem;
    display: block;
    width: auto; 
    cursor: pointer;
    /* width: 100%;  */
}
.plangrid .malsform select{
    font-size: 0.8rem;
    line-height: 1.25rem;
    padding: 1rem 1rem;
}
/* .malsform option{
    background-color: var(--blue);
    color: var(--white); 
    cursor: pointer;
}
.malsform option:hover{
    background-color: var(--grey);
} */
.main button, 
.winter2025 button
{
    background-color: var(--alternate);
    border: 0;
    padding: 0;
    border-radius: 1rem;
    margin: 2rem auto;
    display: block;
    font-size: 1.3rem;
}
.main button a, 
.winter2025 button a{
    display: block;
    padding: 1rem 2rem;
    transition: background-color 0.3s;
    border-radius: 1rem;
    color: var(--black);
    border-bottom: 0;
}
.main button a:hover,
.winter2025 button a:hover, 
.malsform input:hover{
    background-color: var(--blue);
    color: var(--white);
    box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.1);
}
.main li::marker{
    color: var(--alternate);
}
.frontpic > div, 
.beach > div{
    padding: 3vw;
    font-size: 36px;
    color: var(--grey); 
    font-weight: 300;
}
.mainpic{
    display: block;
    margin: auto; 
}
.mainpicture .layer{
    display: none; 
}
footer{
    background-color: var(--lightergrey);
    color: var(--black);
    line-height: 160%;
    padding-block: 2rem;
    font-size: 0.9rem;
}
footer > div{
    max-width: 1200px;
    display: flex;
    margin: auto;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem; 
}
footer > div > div{
    flex: 1 1 250px;
}
footer .general{
    display: grid; 
    gap: 2rem;
}
footer h3{
    font-weight:400;
    font-size: 1.3rem;
}
footer a{
    color: var(--black);
    text-decoration: none;
}
footer a:hover{
    color: var(--alternate);
}
.iw {
	font-size: 11px;
	padding: 10px 100px 10px 10px;
	text-align: right;
    background-color: var(--grey);

} 
.iw a{
	color: var(--white); 
	text-decoration: none;
}
.picturegrid{
    margin-block: 1rem;
}
.picturegrid.first{
    align-items: center;
}
h1 ~ .picturegrid{
    margin-bottom: 3rem;
}
.picturegrid img{
    display: block;
    margin: auto; 
    margin-top: 1rem;
}
.pricegrid{
    display: grid;
    gap: 1rem;
}
.picturegrid .small{
    text-align: center;
    font-size: 0.8rem;
}
/* .picturegrid ~ .picturegrid {
    margin-top: 2rem; 
} */
.pricegrid .rounded{
    background-color: var(--blue);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    text-align: center; 
    display: grid;
    grid-template-rows: 2fr 3fr 1fr;
    gap: 0.15rem;
    margin: 1rem 0;
    transition: 0.4s;
}
.pricegrid h6,
.pricegrid .price{
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    font-weight: 800;
}
.pricegrid > * {
    padding: 0;
    margin: 0;
}
.pricegrid .arrows{
    display: grid;
    align-items: center;
    justify-content: center;
}
.oops {
	font-size: 250px;
	float: right;
	line-height: 250px;
	color:#000;
}
.contactform{
    /* max-width: 600px; */
	margin: 1rem auto;
	transition: 0.5s;
    text-align: center;
}
.contactform input[type=submit],
.contactform input[type=button],
.contactform input[type=text],
.contactform input[type=email],
.contactform input[type=tel],
.contactform textarea,
.contactform label
{
	font-family: 'Lato', sans-serif, sans;
    font-size: 16px;
	border: 2px solid var(--blue); 

}
.contactform label {
    display:block;
    margin-bottom: 10px;
}
.contactform label > span{
    display: inline-block;
    width: 350px;
}
.contactform input[type=text],
.contactform input[type=email],
.contactform input[type=tel]
{
    background: transparent;
    width: 375px;
    outline: none;
    padding: 10px;
}
.contactform textarea{
    padding: 10px;
    background: transparent;
    outline: none;
    width: 375px;
    overflow: hidden;
    resize:none;
    min-height:100px;
}

.contactform textarea:focus,
.contactform input[type=text]:focus,
.contactform input[type=email]:focus,
.contactform input[type=email] :focus
{
    border: 2px solid var(--alternate);
}

.contactform input[type=submit],
.contactform input[type=button]{
    background: var(--alternate);
    border: none;
    padding: 1rem 2rem;
    color: var(--black);;
	width: unset;
    border-radius: 1rem;
    margin: 2rem auto;
    display: block;
    transition: 0.4s;
}
.contactform input[type=submit]:hover,
.contactform input[type=button]:hover{
    background: var(--blue);
    color: var(--white); 
}
.contactform input:not([type="submit"]),
.contactform textarea {
    border: 2px solid var(--notasdark);

}
.contactform:focus-within input:not([type="submit"]):invalid,
.contactform:focus-within textarea:invalid {
	border: 2px solid red !important;

}
.contactform:focus-within input:not([type="submit"]):valid,
.contactform:focus-within textarea:valid {
	border: 2px solid green !important;

}
.contactform .subtitle{
    grid-column: span 2;
    background-color: var(--alternate);
    padding: 15px;
}
.contactform .contactline{
    grid-column: span 2;
    background-color: var(--vvvlight);
}
.contactform.newcustomer div {
	border-bottom: 1px solid var(--vvvlight);
    padding: 1rem;
}
.beach{
    background-image: url('images/beach.jpg');
    padding: 2vw;
}
.page.beach.twoladies{
    background-image: url('images/two-ladies.jpg');
}
.page.beach.kids{
    background-image: url('images/front.jpg');
}
.page.beach.couple{
    background-image: url('images/new-couple-3.jpg');
}
.page{
     height: calc(100svh - 4rem - 70px);  
    /* height: calc(80vh - 4rem); */
    background-size: cover;
    display: grid;
    /*    grid-template-columns: 1fr 2fr; */
    max-height: 1000px;
    background-position:  center center;
}
.page > div{
    padding: 5vw;
}
.beach > div{
    max-width: min(300px,70%);
    padding: 3vw;
    font-size: 32px;
    color: var(--black); 
}
blockquote{
    border-left: 5px solid var(--alternate);
    padding-left: 1rem;
    margin-left: 0;
}
blockquote:not(.reset) + p {
    text-align: right;
    font-style: italic;
} 
.therapy.gadget {
    padding: 6rem 1rem 1rem 1rem;
}
.fourgrid{
    display: grid;
    gap: 2rem;
    font-size: 0.9rem;
    color: var(--grey);
    padding: 1vw;
    background-color: var(--pastel);
}
.fourgrid h5{
    font-size: 1.1rem;
    line-height: 1;
    margin: 5px 0;
}
.fourgrid a{
    color: var(--blue);
    font-weight: bold;
    transition: 0.4s;
    font-size: 1rem;
}
.fourgrid a:hover{
    color: var(--grey);
    text-decoration: underline;
}
.fourgrid img{
    max-width: 200px;
    margin: auto; 
    display: block;
}
.empty{
    display: none;
}
.centrepicture img{
    margin: auto;
    display: block;
}
.centrepicture.grow img{
    width: auto;
}
.startup{
    text-align: center; 
    display: grid;
    line-height: 1;
}
.startup > div{
    margin-left: auto;
}
.startup img{
    vertical-align: middle;
}
.note{
    font-size: 0.8rem;
    line-height: 0.8rem;
}
.prices{
    display: grid;
    gap: 2rem;
    text-align: center;
}
.prices > div{
    border: 1px solid var(--lightgrey);
}
.prices > div > div:first-of-type{
    background-color: var(--alternate);
    color: var(--white);
    padding: 1rem;
}
.prices > div > div{
    padding: 0 1rem 1rem 1rem;
}
.prices .best{
    height: 30px;
    text-align: right;
    color: red;
    font-size: 0.9rem;
}
.prices h4{
    margin-top: 1rem;
}
.picturegrid.app{
    display: grid;
    grid-template-columns: 1fr;
}
.app h3{
    font-size:1.5rem;
    color: var(--blue);
}
.app > div:first-of-type img{
    width: 200px; 
}
.app > div:nth-of-type(3) h3{
    padding-left: 40px;
}
.gadgetgrid{
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.gadgetgrid > div{
    display: grid; 
    align-items: end;
    flex: 1 1 150px; 
}
.gadgetgrid > div > div{
    text-align: center;
    font-size: 0.8rem;
}
.gadgetgrid img{
    max-height: 200px;
    max-width: 200px;
    display: block;
    margin: auto;
}
.apps{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto; 
}
.apps > div{
    display: grid;    
    justify-content: center;
}
.apps img{
    display: block;
    width: 100px; 
}
.apps > div:first-of-type{
    grid-column: span 2;
}
.how{
    display: grid;
    gap: 1rem;
}
.how img{
    width: 166px; 
}
.how > div > div{
    text-align: center;
}
.thirds{
    display: grid;
    gap: 1rem;
}
.tube{
    margin: auto; 
    display: grid;
    align-items: center;
    justify-content: center;
    position: relative;
}
.tube button{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: white;
    font-size: 20px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    display: grid;
    align-items: center ;
    justify-content: center;
    width: 100%;
    background-color: transparent;
    pointer-events: none;
}
.tube button a{
    background-color: var(--transred);
    display: block;
    color: var(--white); 
    padding: 12px 24px;
    border-radius: 5px;
    pointer-events: auto;
}
.tube button a:hover{
    background-color: var(--alternate);
}
.picturegrid .icons{
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 5fr;
    align-items: center;
}
.terms ol {
    counter-reset: item
  }
 .terms ol li {
    display: block;
    padding-bottom: 1rem; 
  }
 .terms ol li:before {
    content: counters(item, ".") " ";
    counter-increment: item
  }
.terms > ol > li{
    margin-bottom: 1rem;
    font-weight: 800;
}
.terms > ol > li > ol {
    font-weight: 400;
}
.flexpics{
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center;
}
.flexpics > div{
    /* max-height: 250px;
    max-width: 250px; */
    flex: 1 1 auto;
    display: grid;
    justify-content: center;
    align-items: center;
}
.paypal .picturegrid .flexpics > div img, 
.flexpics.smaller img{
    object-fit: contain;
    width: 100%;
    max-height: 300px;
}
.flexpics.smaller > div.IGiveUp{
    justify-content: right;
}
.flexpics.smaller > div.NoReallyIDo{
    justify-content: left;
}
.flexpics.tyto > div{
    max-height: 400px;
    max-width: 250px;
}
.flexpics.tyto > div img{
    height: 400px;
}
.cart img{
    height: 26px; 
    width: auto; 
}
.cart{
    display: none; 
}
.personal{
    background-color: var(--vvvlight);
}
.umo img,
.picturegrid img.umo{
    max-height: 150px; 
    max-width: 150px; 
}
.youtube{
    max-width: 1000px;
    margin: auto;
}
iframe{
    max-width: 100%;
}
.blog{
    display: grid;
    gap: 2rem; 
}
.blog > div{
    padding: 1rem;
    border-radius: 4px;
    background-color: var(--white);
    display: grid;
    gap: 0.5rem; 
    grid-row: span 2;
    grid-template-rows: subgrid;
}
.shouty{
    display: none !important;
    margin-block: 2rem;
}
.plangrid{
    display: grid;
    gap: 1rem; 
    font-size: 0.8rem;
}
.plangrid > div:nth-child(8n+1),
.plangrid > div:nth-child(8n+2),
.plangrid > div:nth-child(8n+3),
.plangrid > div:nth-child(8n+4) {
	background-color: var(--vvvlight);
}
.plangrid > div:nth-child(8n+5),
.plangrid > div:nth-child(8n+6),
.plangrid > div:nth-child(8n+7),
.plangrid > div:nth-child(8n+8) {
	background-color: var(--lightergrey);
}
.plangrid > div{
    padding: 1rem; 
}
.plangrid img{
    max-width: 200px;
    max-height: 200px; 
    display: block;
    margin: auto;
}
.plangrid ul{
    margin-block-start: 0; 
    padding-inline-start: 0.5rem;
}
.plangrid.plangrid > div:has(img){
    background-color: var(--white);
}
.plangrid > div ul li:first-child{
    font-weight: 800;
}
.plangrid h3{
    font-size: 1.1rem; 
    margin-bottom: 0.5rem; 
    margin-top: 0;
    line-height: 1.4rem;
}
.plangrid h4{
    font-size: 1.1rem; 
    margin-block: 0.5rem; 
    line-height: 1.4rem;
    font-weight: 400;
}
.responsegrid{
    display: grid;
    gap: 1rem; 
}
.responsegrid img{
    max-width: 100px;
    max-height: 100px; 
}
.social img{
    width: 30px; 
    height: 30px;
    filter: brightness(0.9) saturate(0%);
}
.frontthree{
    display: grid;
    gap: 2rem; 
}
.frontthree > div{
    display: grid;
    gap: 1rem; 
}
.frontthree > div > div:first-of-type{
    border-radius: 0.5rem;
    border: 2px solid var(--alternate); 
    text-align: center;
}
.frontthree img{
    width: 200px; 
    margin: auto;
    padding: 1rem; 
}
.frontthree > div > div:nth-of-type(2){
    border-radius: 0.5rem;
    border: 2px solid var(--black); 
    padding: 1rem; 
}
.frontthree > div > div:nth-of-type(3){
    padding: 1rem; 
    text-align: center;
}
.frontthree > div > div:nth-of-type(3) a{
    text-align: center;
    background-color: var(--alternate);
    color: var(--black); 
    padding: 1rem; 
    border-radius: 0.5rem;
    transition: 0.4s;
}
.frontthree > div > div:nth-of-type(3) a:hover{
    background-color: var(--black);
    color: var(--white); 
}
.frontthree h4{
    font-size: 1.2rem;
    font-weight: 800;
}
.main:has(.frontthree)  > div:first-of-type{
    text-align: left;
    width: 100% ;
    width: -moz-available;
    width: -webkit-fill-available;
}
.centrep{
    padding: 2rem 0; 
    text-align: center;
}
.blockwithspace{
    margin: 2rem 1rem 2rem 1rem;
}
.kidsclub span:nth-of-type(1), 
.kidsclub span:nth-of-type(5){
    color: red; 
}
.kidsclub span:nth-of-type(2), 
.kidsclub span:nth-of-type(6){
    color: orange; 
}
.kidsclub span:nth-of-type(3), 
.kidsclub span:nth-of-type(7){
    color: green; 
}
.kidsclub span:nth-of-type(4), 
.kidsclub span:nth-of-type(8){
    color: blue; 
}
.serviceplans{
    display: grid;
    gap: 2px;
    border: 2px solid var(--alternate); 
    background-color: var(--alternate);
}
.serviceplans > div{
    padding: 1rem; 
    background-color: var(--white);
}
.general {
	text-align: center;
	font-size: 24px;
	line-height: 1.7;
	max-width: 800px;
	margin: auto;
}
.general img{
    margin: auto;
}
.main h3 span, 
.main h1 span, 
span.plus{
    color: var(--alternate); 
}
.threepictures{
    display: flex;
    justify-content: center;
    gap: 1rem; 
    flex-wrap: wrap;
}
span.m{
    color: var(--alternate); 
    font-weight: 700;  
}
span.m + span{
    font-weight: 700;
}
.winter2025{
    background-image: url('images/snowy.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
}
.winter2025 > div{
    display: grid;
    justify-content: center;
    gap: 1rem; 
    padding: 2rem; 
}
.winter2025 > div > div img {
    display: block;
    margin: auto;
}
.wintersale{
    width: 450px; 
}
.montage{
    width: 800px;
}
.winter2025 button{
    margin: 0; 
}
h3:has(+h3){
    margin-bottom: 0.25rem;
}
h3+h3{
    margin-top: 0.25rem;
}
.price{
    color: var(--alternate); 
    font-size: 2rem; 
}
.threegrid{
    display: grid;
    gap: 1rem;
}
.gadgetgrid{
    display: grid;
    gap: 1rem;
    justify-content: center;
}
.gadgetgrid > div{
    display: grid; 
    align-items: flex-start;
    grid-template-rows: 155px auto;
}
.singleimage .gadgetgrid img{
    margin: auto; 
    width: 85px; 
    color: var(--blue); 
}
.gadgetgrid p{
    margin-block: 0;
    line-height: 1.1;
}
h3.price, 
h3:has(.price){
    margin-bottom: 0;
    line-height: 1;
}
.vimeo-wrapper, .vimeo-wrapper2 {
    width: 100%;
    background-image: url('/images/just-turf.jpg'); 
    background-size: cover; 
    overflow: hidden;
    position: relative; 
  }
  .vimeo-wrapper:after {
      padding-top: 31.25%;
      display: block;
      content: ""; 
  }
  
  .vimeo-wrapper iframe, .vimeo-wrapper2 iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0; 
  }
  
  .vimeo-wrapper2:after {
      padding-top: 56.2%;
      display: block;
      content: ""; 
  }
.main.full:has(.vimeo-wrapper2){
    display: block;
}



/*




///////////////////////////////////////////////////

DESKTOPS 

/////////////////////////////////////////////////////

*/ 

@media only screen and ( min-width: 800px ) {
    .main > div{
        /* width: fill-available; 
        width: -webkit-fill-available;
        width: -moz-available; */
        padding-block: 2rem;
    }
    .picturegrid{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    .picturegrid.newfront{
        gap:3rem;
        margin-block: 3rem;
    }
    .picturegrid img{
        max-width: min(100%,450px);
    }
    .page.beach {
        grid-template-columns: 1fr 1fr;
    }
    .page.beach > div{
        margin-inline:  auto;
    }
    /* .picturegrid.app img{
        max-width: min(100%,350px);
    } */
   /* .picturegrid.app h3{
        width: 200px;
        margin-inline: auto;
    } */
    .picturegrid .vaccine img,
    .picturegrid img.vaccine{
        max-width: min(100%,350px);
    }

    .picturegrid.newfront img{
        max-width: 100%;
        margin-top: 1.5rem; 
    }
    .picturegrid.first{
        grid-template-columns: 200px auto;
      }
    .pricegrid{
        grid-template-columns: 3fr 1fr 3fr 1fr 3fr;
    }
    .picturegrid.mhealth{
        grid-template-columns: 3fr 2fr;
    }
    .pricegrid .rounded:hover{
        box-shadow: 2px 2px 10px rgba(50,50,50,0.8);
        transform: scale(1.05);
        transition: 0.4s;
    }
    .form{
        /* grid-template-columns: 1fr 1fr ; */
        display: grid;
        /* gap: 10px;  */
    }
    .form.questionnaire{
        max-width: none;
        gap: 0; 
        grid-template-columns: 2fr 3fr;
    }
    .form.questionnaire > div:nth-child(4n+3),
    .form.questionnaire > div:nth-child(4n+4){
        background-color: var(--vvvlight);
    }
    .form > div{
        padding-bottom: 4px; 
    }
    .form.questionnaire > div.colspan2{
    background-color: var(--lightgrey);
    color: var(--white); 
    } 
    .form.questionnaire.contactform input:not([type="submit"]),   
    .form.questionnaire.contactform textarea {
        width: calc(100% - 2rem); 
    }
    .form.questionnaire > div.colspan2:has(h3){
        grid-column: span 2;
    }
    .form.questionnaire > div.colspan2:has(h3) + div{
        grid-column: 2/3;
        display: none; 
    }
    .form.questionnaire > div{
        padding: 1rem; 
    }
    .colspan2 h3{
        margin-block: 0.5rem;
        color: var(--white); 

    }
    .vaccine{
        padding-top: 2rem;
    }
    .therapy{
        padding-top: 4rem;
    }
    .gadget{
        padding-top: 2rem;
    }
    .grow img{
		border-radius: 5px;
		transition:  1.5s ease;
		width: 100%;
		box-shadow: 3px 3px 30px transparent;
		}
	.grow img:hover{
		transform: scale(150%);
		box-shadow: 3px 3px 30px rgba(50,50,50, 0.7);
	}
    .grow p,
    .gadget p{
        text-align: center;
        color: var(--alternate);
    }
    .gadget img{
        margin: auto;
        display: block;
        width: 250px;
    } 
    .mainpicture{
        position: relative;
    }
    .mainpicture .layer{
        position: absolute;
        display: none; 
        top: 10vw;
        left: 10vw;
        color: var(--grey);
        font-weight: 300;
        font-size: 24px;
        max-width: 400px;
        display: block; 
    }
    .centre{
        display: grid;
        width: 100%;
        margin: auto;
        justify-content: center;
    }
    header img{
        width: 150px;
    }
    .frontpic{
        position: relative;
    }
    .frontpic > div{
        position: absolute;
        max-width: min(300px,50%);
        padding: 3vw;
        font-size: 32px;
        top: 2vw;
        left: 2vw;
        z-index: 2;
        color: var(--grey); 
    }
    .fourgrid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 2rem;
        margin: auto;
        padding: 2rem 0;
    }
    .threegrid{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
        margin: auto;
        padding: 2rem 0;
    }
    .threegrid img{
        max-height: 250px;
        display: block;
        margin: auto; 
       }
    .threegrid > div:nth-child(3) img{
        margin-inline: 3rem; 
        max-height: 150px;
    }
    .fourgrid img{
        max-width: 15vw;
    }
    .prices{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .picturegrid .small p{
        margin-top: -2rem; 
    }
    /* .main button{
        margin-left: auto; 
} */
.picturegrid.app{
    /* max-width: 800px; */
    margin-inline: auto;
    grid-template-columns: 1fr 3fr 2fr;
    gap:0;
}
.picturegrid.three{
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.picturegrid.three .span2{
    grid-column: span 2;
}
.picturegrid.app img{
    max-width: 100%;
}
.newheading{
    display: flex;
}
/* .picturegrid.app div:first-of-type{
    padding-top: 12px; 
} */
/* .gadgetgrid{
    grid-template-columns: 1fr 1fr 1fr;
} */
.main.full{
    display: grid;
    align-content: center;
}
.bullets{
    columns: 2;
    gap: 1rem;
    margin-top: 2rem;
}
.bullets ul{
    margin-top: 0;
}
.bullets ul > li{
    margin-left: 2rem;
}
.how{
    grid-template-columns: 1fr 1fr 1fr;
}
.how > div{
    display: grid;
    gap: 1rem;
    grid-template-rows: 1fr 1fr;
}
.how > div > div:first-of-type{
    align-self: end;
}
.picturegrid img{
    border-radius: 4px; 
}
.thumbnails{
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 1fr;

}
.thumbnails.two{
    grid-template-columns: 1fr 1fr;
    margin-top: 3rem; 
}
.thumbnails.two .spantwo{
    grid-column: span 2;
}
.picturegrid .thumbnails.two img{
    max-width: 100%;
    margin: auto; 
}
.thirds{
    grid-template-columns: 1fr 1fr 1fr;
}
.picturegrid .help{
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 2fr;
    align-items: center;
}
.social > div{
    display: grid;
    grid-template-columns: 30px auto ;
    gap: 0.5rem; 
}

.blog{
    display: grid;
    gap: 1rem; 
    grid-template-columns: 1fr 1fr;
    grid-auto-rows:  auto auto; 
}
.blog > div{
    border-radius: 0.5rem;
}
.blog img{
    width: 100%; 
}
.shouty{
    max-width: 300px;
    margin: 5rem auto;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    border: 4px solid var(--alternate); 
    text-align: center;
    color: var(--alternate); 
    font-size: 0.9rem ;
}
.subtext{
    font-size: 0.9rem;
    padding: 1rem 2rem; 
    text-align: center;
    margin: auto;
}
.plangrid{
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.responsegrid{
    grid-template-columns: 100px auto;
    gap: 2rem;
}
.responsegrid > div{
    display: grid;
    align-items: center;
}
.responsegrid img{
    display: block;
    margin: auto;
}
.crapicons img{
    display: inline-block;
}
.float{
    float: left; 
    margin: 0 2rem 2rem 0; 
}
.main .notice{
    text-align: center;
    font-size: 18px;
}
.frontthree{
    grid-template-columns: 1fr 1fr 1fr;
}
.frontthree > div{
    grid-row: span 3;
    grid-template-rows: subgrid;
}
.frontthree:not(.accessories) > div > div:nth-of-type(2){
    display: grid;
    grid-template-rows:  60px auto 60px;
}
.four04{
    font-size: 10rem;
}
.simonly{
    display: grid;
    gap: 1rem; 
}
.simonly > div{
    border-radius: 1rem;
    border: 0.25rem solid var(--alternate); 
    padding: 1rem; 
    display: grid;
    gap: 1rem; 
    grid-template-columns: 2fr 1fr;
    background-color: var(--white);
}
.simonly > div:nth-child(2n){
    background-color: var(--vvvlight);
}
a[name] {
    padding-top: 90px;
    margin-top: -90px;
    display: inline-block; 
  }
  .serviceplans{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .serviceplans > div{
    grid-template-rows: subgrid;
    grid-row: span 2;
    display: grid;
  }
  .threepictures img{
        height: 60px;

  }
  .footericons img{
    max-height: 80px;
    max-width: 150px;
    margin: 0.5rem; 
  }
  .footericons{
    text-align: center;
  }
  .cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    grid-auto-rows: auto auto auto;
  }
  .card{
    border: 2px solid var(--alternate); 
    border-radius: 0.5rem;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 0;
  }
  .card p,
  .card h3{
    margin: 1rem; 
    line-height: 1.6;
  }
  .card img{
    border-radius: 6px 6px 0 0 ;
    height: 200px;
    width: 100%; 
    object-fit: cover;
    object-position: center;
  }
  .gadgetgrid{
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.gadgetgrid > div img{
    aspect-ratio: 1/1;
}
}







@media only screen and ( min-width: 1200px ) {
    header img{
        width: 160px;
    }
    header{
        grid-template-columns: 200px auto 8vw;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 2;
        margin: auto;
        padding-block: 5px;
        background-color: var(--transwhite);
        backdrop-filter: blur(4px);
        box-shadow: 0 0 10px 10px var(--shadow);
    }
    header #nav > ul{
        background-color: transparent;
    }
    header nav{
        display: flex;
        margin-left: auto; 
    }
    header nav a{
        flex: 1 1 auto;
        text-align: center;
        padding: 20px; 
    }
    header nav a:hover{
        background-color: var(--alternate);
        color: var(--white);
    }
    .cart{
        display: block;
    }
.fourgrid .empty{
    display: block;
}
.fourgrid.fourgrid{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

}
footer .general{
    grid-template-columns: 2fr 1fr;
}
/* .gadgetgrid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.examples .gadgetgrid{
    grid-template-columns: 1fr 1fr 1fr ;
} */
body.homepage .main:nth-child(2n+1){
    background-color: var(--vvvlight);
}
body:not(.homepage) .main:nth-child(2n){
    background-color: var(--vvvlight);
}
.main{
    position: relative;
    display: grid;
    align-items: center;
    /* padding-bottom: 100px; */
}
.main:has(form){
    display: block;
}
.main{
    min-height: calc(80svh - 2rem);
}
/* .paypal .main:not(.noicons){
    padding-bottom: 100px;
} */
/* .main:not(.noicons)::after{
    content: url('/images/3icons.png');
    position: absolute;
    bottom: 1rem;
    right: 1rem; 
    z-index: 1;
} */
.paypalpaylater{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #023188;
}
.paypalpaylater > div{
    margin: auto; 
    max-width: 1000px;
}
/* .paypalpaylater *{
    max-width: none !important; 
} */
.doro{
    max-height: 750px; 
}
.paypal .picturegrid img.careium{
    max-height: 400px; 
}
.paypal .picturegrid img{
    max-height: 500px;
}
.pac{
    text-align: center;
    display: grid;
    justify-content: center;
}
.pac ol{
    display: grid;
    gap: 2rem; 
    grid-template-columns: 1fr 1fr 1fr;
    margin:  auto;
}
.pac ol li{
    max-width: 300px;
    margin: 1rem auto;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    border: 4px solid var(--alternate);
    text-align: center;
    list-style-position:inside;
    line-height: 2rem;
}
.pac ol li::marker{
    font-size: 2rem;
}

.winter2025 > div{
    grid-template-columns: 1fr 1fr 1fr;
}
.winter2025 > div > div:last-child{
    grid-column: span 3;
}
.winter{
    background-image: url('images/snow.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100svh;
    display: grid;
}
.winter > .main.full{
    background-color: transparent;

}
.winter > .main.full p{
    background-color: rgba(255,255,255,0.6);
    padding: 1rem; 
    border-radius: 1rem;
}
.winter2025 > div > div:nth-of-type(3){
    text-align: right;
}
.winter2025 > div > div:nth-of-type(3) button{
    margin-left: auto; 
}
.bottomleft{
    display: grid;
    align-content: flex-end;
}
.devices{
    background-image: url('/images/Montage-8.png');
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: right center;
}
.devices img{
    display: none;
}
}













@media only screen and ( min-width: 800px ) and (max-height: 1000px) {
    /* .page,
    .doc{
        background-attachment: fixed; 

    } */
    .onevp{
        min-height: 80vh;
        display: grid;
        align-items: center;
    }
   .homepage .main.full{
        min-height: 70vh;
}
.winter2025{
    background-attachment: fixed;
    min-height: calc(100svh - 88px) ;
} 
} 


@media only screen and ( max-width: 799px ) {
    .pricegrid .arrows{
    transform: rotate(90deg);
}   
.doctor2022{
    background-image: url('images/doctor-mobile-5.jpg');
    background-position: center center;

}
.page.beach.front{
    background-image: url('images/front-mo.jpg');
    background-position: center center;
}
 .page.beach{
    background-image: url('images/beach-small.jpg');
    background-position: center center;
}
.page{
    height: 70vh;
}

}







@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}