.disable-click {
pointer-events: none;
}
.mobile-only {
display: none;
}
@media (max-width: 900px) {
.mobile-only {
display: block;
}
}
.gs-back {
position: relative;
color: #00b5cc;
margin: 0;
font-weight: 500;
font-size: 13px !important;
line-height: 1.4 !important;
cursor: pointer;
-webkit-transition: ease .2s;
transition: ease .2s;
background: #f5f5f5;
padding: 5px 10px;
border-radius: 5px;
-webkit-box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05);
box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05);
z-index: 9;
}
.gs-back i {
font-size: 14px;
}
.gs-back:hover {
color: #fff;
background: #00b5cc;
}
.gs-disclaimer {
margin: 0 auto;
text-align: center;
}
.gs-disclaimer p {
font-size: 12px !important;
margin: 15px 0;
}
@media (max-width: 900px) {
.gs-disclaimer {
margin: 10px;
}
}
.item-tag {
padding: 4px 6px;
background: #eee;
display: inline-block;
border-radius: 3px;
border: none;
margin: 5px 5px 0 0 !important;
cursor: pointer;
-webkit-transition: ease .1s;
transition: ease .1s;
}
.item-tag:hover {
background: #00b5cc;
color: #fff;
}
.veg-name {
text-transform: lowercase;
}
#veg-list {
height: auto;
max-width: 940px;
min-width: 940px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
grid-gap: 7px;
padding: 0;
-webkit-transition: ease .5s;
transition: ease .5s;
-ms-flex-flow: wrap;
flex-flow: wrap;
overflow-y: auto;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0;
}
#veg-list ul {
list-style-type: none;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
}
#veg-list ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100px;
height: 100px;
background: #fff;
border-radius: 100px;
}
@media (max-width: 900px) {
#veg-list {
min-width: auto;
padding: 10px;
min-height: 100px;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
max-height: -webkit-fit-content;
max-height: -moz-fit-content;
max-height: fit-content;
margin: 0 auto;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
grid-gap: 0;
}
#veg-list ul {
grid-gap: 0;
}
}
#veg-list::-webkit-scrollbar {
display: none;
}
.grid-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
-webkit-transition: ease .2s;
transition: ease .2s;
}
.grid-item:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.sixty-cm {
width: 254px;
height: auto;
margin: auto;
-webkit-animation: pointer ease 0.5s;
animation: pointer ease 0.5s;
}
@media (max-width: 900px) {
.sixty-cm {
width: 140px;
}
}
.fifty-cm {
width: 170px;
height: auto;
margin: auto;
-webkit-animation: pointer ease 0.5s;
animation: pointer ease 0.5s;
}
@media (max-width: 900px) {
.fifty-cm {
width: 100px;
}
}
.fourty-cm {
width: 169px;
height: auto;
margin: auto;
-webkit-animation: pointer ease 0.5s;
animation: pointer ease 0.5s;
}
@media (max-width: 900px) {
.fourty-cm {
width: 95px;
}
}
.thirty-cm {
width: 127.5px;
height: auto;
margin: auto;
-webkit-animation: pointer ease 0.5s;
animation: pointer ease 0.5s;
}
@media (max-width: 900px) {
.thirty-cm {
width: 75px;
}
}
.twenty-cm {
width: 85px;
height: auto;
margin: auto;
-webkit-animation: pointer ease 0.5s;
animation: pointer ease 0.5s;
}
@media (max-width: 900px) {
.twenty-cm {
width: 53px;
}
}
.ten-cm {
width: 42.5px;
height: auto;
margin: auto;
-webkit-animation: pointer ease 0.5s;
animation: pointer ease 0.5s;
}
@media (max-width: 900px) {
.ten-cm {
width: 28px;
}
}
@-webkit-keyframes pointer {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
60% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
80% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pointer {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
60% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
80% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.large-template {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 510px;
min-height: 342px;
left: 138px;
top: 140px;
}
@media (max-width: 900px) {
.large-template {
width: 318px;
min-height: 210px;
left: 26px;
top: 78px;
}
}
.small-template {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 342px;
min-height: 254px;
left: 224px;
top: 183px;
}
@media (max-width: 900px) {
.small-template {
width: 212px;
min-height: 157px;
left: 79px;
top: 103px;
}
}
.herbSmall-template {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 340px;
min-height: 170px;
left: 224px;
top: 228px;
}
@media (max-width: 900px) {
.herbSmall-template {
width: 212px;
min-height: 106px;
left: 79px;
top: 130px;
}
}
.herbLarge-template {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: 508px;
min-height: 170px;
left: 138px;
top: 228px;
}
@media (max-width: 900px) {
.herbLarge-template {
width: 313px;
min-height: 105px;
left: 28px;
top: 131px;
}
}
.scroll-section {
display: block;
max-height: 70px;
overflow-y: scroll;
scroll-behavior: smooth;
}
@media (max-width: 900px) {
.scroll-section {
max-height: 40px;
}
}
.gs-reset {
text-decoration: none;
color: #222;
cursor: pointer;
-webkit-transition: ease .2s;
transition: ease .2s;
}
.gs-reset:hover {
color: #00b5cc;
}
.gs-veg-selection {
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: top;
-ms-flex-pack: top;
justify-content: top;
width: 100%;
height: 100%;
border-radius: 10px;
background: #ffffff;
-webkit-transition: ease 0.3s;
transition: ease 0.3s;
z-index: 999;
padding-top: 40px;
}
.gs-veg-selection .gs-inputs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: left;
margin: 0 0 30px 0;
width: 78%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.gs-veg-selection .gs-inputs h1,
.gs-veg-selection .gs-inputs h2,
.gs-veg-selection .gs-inputs h3 {
color: #333333;
margin: 0;
font-weight: 500;
}
.gs-veg-selection .gs-inputs h1 {
font-weight: 600;
font-size: 2rem;
}
.gs-veg-selection .gs-inputs h2 {
font-weight: 300;
font-size: 1.5rem;
}
.gs-veg-selection .gs-inputs select {
display: block;
margin: 5px 0;
width: 220px;
text-align-last: center;
border-radius: 5px;
}
.gs-veg-selection .gs-inputs label {
padding: 15px 0 0 0;
font-weight: 500;
}
@media (max-width: 900px) {
.gs-veg-selection {
border-radius: 0;
padding: 10px 0 0 0;
}
.gs-veg-selection .gs-inputs {
margin: 10px auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
text-align: center;
}
.gs-veg-selection .gs-inputs h1 {
font-size: 26px;
margin: 0 60px;
}
.gs-veg-selection .gs-inputs h2 {
font-size: 18px;
margin: 5px 0;
}
.gs-veg-selection select {
font-size: 16px;
}
}
.gs-options {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
margin: 20px 0 0 0;
min-height: 500px;
}
@media (max-width: 900px) {
.gs-options {
width: 100%;
margin: 0;
}
}
.btnWrapper {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 100px;
width: 176px;
color: #fff;
-webkit-box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0.4);
cursor: pointer;
border-radius: 5px;
font-size: 20px;
-webkit-transition: ease .2s;
transition: ease .2s;
margin: 2px;
height: 100px;
opacity: 0;
-webkit-animation: grow .5s ease forwards;
animation: grow .5s ease forwards;
}
.btnWrapper:hover,
.btnWrapper:focus {
-webkit-box-shadow: inset 0 0 100px 20px rgba(0, 181, 204, 0.7);
box-shadow: inset 0 0 100px 20px rgba(0, 181, 204, 0.7);
}
@media (max-width: 900px) {
.btnWrapper {
width: 100px;
margin: 8px;
font-size: 18px;
-webkit-animation: growMobile .5s ease forwards;
animation: growMobile .5s ease forwards;
}
}
.next-button {
display: none;
margin: 20px auto;
font-size: 15px;
font-weight: 600;
width: 120px;
height: 30px;
border-radius: 5px;
line-height: 1;
background: #00b5cc;
color: #ffffff;
}
@media (max-width: 900px) {
.next-button {
display: block;
}
}
.search-type {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #222;
}
.search-type .switch-view {
position: absolute;
right: -40px;
top: 27px;
font-size: 18px;
-webkit-transition: ease .3s;
transition: ease .3s;
cursor: pointer;
}
.search-type .switch-view:hover {
color: #00b5cc;
}
.search-type .switch-view-2 {
right: -80px;
}
.search-type .reset-search {
position: absolute;
right: 10px;
top: 28px;
font-size: 13px;
cursor: pointer;
-webkit-transition: ease .3s;
transition: ease .3s;
}
@media (max-width: 900px) {
.search-type {
width: 100%;
}
.search-type .switch-view {
display: none;
}
}
.select-options {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 78%;
z-index: 9999;
top: 20px;
}
@media (max-width: 900px) {
.select-options {
width: 90%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 10px 0;
}
}
.dropdown {
position: relative;
}
.dropdown::after {
content: "\f107";
font-family: "Font Awesome 5 Pro";
font-size: 18px;
font-weight: 100;
position: absolute;
right: 15px;
top: 22px;
color: #000;
pointer-events: none;
}
@media (max-width: 900px) {
.dropdown::after {
display: none;
right: -150px;
top: -30px;
}
}
.select-options select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: #fff;
}
.season-btn {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
height: 30px;
width: 70px;
color: #222;
background: transparent;
cursor: pointer;
border-radius: 5px;
-webkit-transition: ease .2s;
transition: ease .2s;
font-size: 12px;
font-weight: 400;
}
.season-btn img {
-webkit-transition: ease .5s;
transition: ease .5s;
margin-bottom: 10px;
}
.season-btn:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 1 !important;
}
.season-btn:hover {
opacity: 1 !important;
}
@media (max-width: 900px) {
.season-btn {
width: 100%;
}
}
.select-size {
margin-left: 10px;
}
.select-size select {
display: block;
}
@media (max-width: 900px) {
.select-size {
width: 100%;
margin-left: 0;
}
.select-size select {
width: 100%;
}
}
.gs-seasons {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
padding: 0;
margin: 0px;
margin-top: -20px;
}
.gs-seasons img {
max-width: 40px;
}
@media (max-width: 900px) {
.gs-seasons {
-ms-grid-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
margin: 20px 0;
grid-gap: 0;
}
} .tooltip {
position: relative;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #00b5cc;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 15px;
left: 50%;
margin-left: -60px;
font-size: 11px;
line-height: 1.2;
-webkit-transform: translateY(15px);
transform: translateY(15px);
opacity: 0;
-webkit-transition: ease .3s;
transition: ease .3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #00b5cc transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.reset-animation {
-webkit-animation: reset ease 1s;
animation: reset ease 1s;
}
@-webkit-keyframes reset {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-359deg);
transform: rotate(-359deg);
}
}
@keyframes reset {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-359deg);
transform: rotate(-359deg);
}
}
@media (max-width: 900px) {
.select-type {
width: 100%;
margin-right: 10px;
}
}
#selectType {
width: 226px;
display: block;
}
@media (max-width: 900px) {
#selectType {
width: 100%;
}
}
.gs-container {
display: block;
position: relative;
max-width: 1200px;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
-webkit-transition: ease .3s;
transition: ease .3s;
font-size: 13px !important;
}
.gs-container input[type="text"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
padding: 5px;
border: none;
border: solid 1px #ccc;
border-radius: 5px;
width: 240px;
height: 30px;
font-size: 14px;
outline: none;
margin: 5px 0;
text-indent: 4px;
}
.gs-container label {
color: #222;
font-size: 0.75em;
font-weight: 800;
font-family: 'Söhne Mono';
text-transform: uppercase;
letter-spacing: 2px;
}
.gs-container button {
padding: 6px;
border: none;
border-radius: 1px;
background: #fff;
width: 100px;
cursor: pointer;
-webkit-transition: ease .2s;
transition: ease .2s;
outline: none;
}
.gs-container button:hover {
background: #00b5cc;
color: #fff;
}
.gs-container h1,
.gs-container h2,
.gs-container h3,
.gs-container h4,
.gs-container h5 {
margin: 0;
}
.gs-container h4 {
font-weight: 500;
font-size: 0.95em;
text-transform: uppercase !important;
}
.gs-container .gs-background,
.gs-container .gs-plot {
position: absolute;
width: 1200px;
height: 600px;
background: url();
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 10px;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.gs-container .gs-plot {
background: url(https://www.strol.co.nz/img/small-plot.png);
background-size: contain;
background-position: center left;
background-repeat: no-repeat;
}
.gs-container .gs-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
position: absolute;
width: 360px;
max-height: 95%;
background: #f4f4f4;
border-radius: 10px;
padding: 0;
top: 50%;
right: 15px;
opacity: 0;
z-index: 9;
-webkit-transform: translate(60px, -50%);
transform: translate(60px, -50%);
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 10px 20px -10px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 10px 20px -10px;
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.gs-container .gs-info-header {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
padding: 5%;
height: 100px;
border-radius: 10px 10px 0 0;
background: #eee;
background-size: cover;
background-repeat: no-repeat;
-webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
}
.gs-container .gs-info-header::after {
content: "";
position: absolute;
border: solid 10px transparent;
border-bottom: solid 10px #f4f4f4;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.gs-container .gs-info-header .gs-item-icon {
width: 60px;
height: 60px;
margin-right: 20px;
background: url();
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 10px;
}
.gs-container .gs-info-header .gs-item-name h2 {
margin: 0;
font-size: 24px;
color: #fff;
text-transform: none;
}
.gs-container .gs-info-header .gs-item-name h4 {
margin: 0;
color: #fff;
text-transform: none;
}
.gs-container .gs-info-content {
position: relative;
width: 100%;
border-radius: 10px;
margin: 10px 0;
}
.gs-container .gs-info-card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 5px 17px 5px 0;
}
.gs-container .gs-info-card i {
font-size: 20px;
padding: 0 20px;
}
.gs-container .gs-info-card p {
margin: 0 0 10px 0;
font-size: 13px !important;
line-height: 1.4 !important;
}
.gs-container .gs-info-footer {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
background: #fff;
-webkit-box-shadow: inset 0 20px 15px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 20px 15px rgba(0, 0, 0, 0.1);
width: 100%;
border-radius: 0 0 10px 10px;
padding: 10px 0;
}
@media (max-width: 900px) {
.gs-container {
width: auto;
max-width: 100%;
border-radius: 0;
margin: 0 auto;
overflow: hidden;
}
.gs-container input[type="text"] {
width: 98%;
font-size: 16px;
}
.gs-container input[type="text"]::-webkit-input-placeholder {
font-size: 14px;
}
.gs-container input[type="text"]:-ms-input-placeholder {
font-size: 14px;
}
.gs-container input[type="text"]::-ms-input-placeholder {
font-size: 14px;
}
.gs-container input[type="text"]::placeholder {
font-size: 14px;
}
.gs-container label {
width: 99%;
}
.gs-container .gs-info {
height: 585px;
max-height: 100%;
margin: 0 -8px;
-webkit-transform: translate(0px, 115%);
transform: translate(0px, 115%);
}
.gs-container .gs-info-header {
border-radius: 10px;
}
.gs-container .gs-background,
.gs-container .gs-plot {
border-radius: 0;
height: 500px;
left: -15%;
}
.gs-container .gs-info-content {
margin: 5px 0;
}
.gs-container .gs-info-card {
padding: 5px;
}
.gs-container .gs-info-card i {
padding: 0 10px;
}
}
.gs-measurements {
position: relative;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: ease 1s;
transition: ease 1s; }
.gs-measurements img {
position: absolute;
}
.gs-measurements .measure-line-horizontal {
position: absolute;
border-top: dashed 2px #fff;
width: 45%;
left: 140px;
}
.gs-measurements .measure-line-vertical {
position: absolute;
border-right: dashed 2px #fff;
height: 72%;
top: 51%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
@-webkit-keyframes target {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(1.3);
transform: rotate(180deg) scale(1.3);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
@keyframes target {
0% {
-webkit-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
50% {
-webkit-transform: rotate(180deg) scale(1.3);
transform: rotate(180deg) scale(1.3);
}
100% {
-webkit-transform: rotate(360deg) scale(1);
transform: rotate(360deg) scale(1);
}
}
.gs-measurements .planting-point {
-webkit-animation: target 6s infinite;
animation: target 6s infinite;
}
@media (max-width: 900px) {
.gs-measurements .measure-line-vertical {
height: 55%;
}
.gs-measurements .measure-line-horizontal {
width: 90%;
}
.gs-measurements .vertical-measure {
display: none;
}
.gs-measurements .horizontal-measure {
display: none;
}
}
.accordion {
display: none;
color: #fff !important;
background: #00b5cc !important;
}
@media (max-width: 900px) {
.accordion {
display: block;
margin-top: 10px;
}
}
.panel {
max-height: 0;
overflow: hidden;
border-radius: 10px;
-webkit-transition: max-height .4s ease-out;
transition: max-height .4s ease-out;
}
.buy-now {
position: absolute;
z-index: 1;
top: 40px;
left: 320px;
background: #fff;
font-size: 14px;
font-weight: 600;
color: #00b5cc;
opacity: 0;
padding: 10px;
border-radius: 10px;
text-align: center;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-box-shadow: 0 5px 20px -10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 20px -10px rgba(0, 0, 0, 0.2);
text-decoration: none !important;
cursor: pointer;
-webkit-transition: ease .4s;
transition: ease .4s;
}
.buy-now i {
margin-right: 10px;
}
.buy-now::after {
content: "";
position: absolute;
border: solid 10px transparent;
border-top: solid 10px #fff;
bottom: -20px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: ease .2s;
transition: ease .2s;
}
.buy-now:hover {
background: #f4f4f4;
}
.buy-now:hover::after {
border-top: solid 10px #f4f4f4;
}
@media (max-width: 900px) {
.buy-now {
font-size: 13px;
top: 18px;
left: 110px;
padding: 10px;
border-radius: 5px;
}
}
.dropdown-options {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.dropdown-options select[name="sizes"] {
padding: 5px;
border: none;
border: solid 1px #ccc;
border-radius: 5px;
width: 226px;
height: 31px;
font-size: 14px;
outline: none;
margin: 5px 0;
text-indent: 4px;
}
@media (max-width: 900px) {
.dropdown-options {
width: 100%;
margin-top: 10px;
}
.dropdown-options select[name="sizes"] {
width: 100%;
font-size: 14px;
}
}
.notice {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 380px;
margin: 0 auto;
font-size: 13px;
text-align: center;
}
@media (max-width: 900px) {
.notice {
max-width: 310px;
}
}
@-webkit-keyframes renderList {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
@keyframes renderList {
0% {
opacity: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
}
.list-view {
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 2fr 3fr 2fr 2fr 2fr;
grid-template-columns: 1fr 2fr 3fr 2fr 2fr 2fr;
grid-gap: 10px;
background: #f4f4f4;
width: 100%;
height: 60px;
border-radius: 10px;
-webkit-animation: 1s ease 0s 1 normal forwards running renderList;
animation: 1s ease 0s 1 normal forwards running renderList;
border: solid 1px transparent;
-webkit-transition: ease .3s;
transition: ease .3s;
cursor: pointer;
}
.list-view:hover {
-webkit-transition: ease .3s;
transition: ease .3s;
background: rgba(0, 181, 204, 0.2);
}
.list-view i {
color: #00b5cc;
font-size: 18px;
}
.list-view .list-view-img {
width: 50px;
height: 50px;
border-radius: 10px;
margin: 5px;
}
.list-view .list-view-heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 15px;
font-weight: 700;
}
.list-view .list-view-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 14px;
}
.list-view .list-view-text p {
margin: 0;
font-size: 13px;
}@keyframes grow {
0% {
opacity: 0;
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes growMobile {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.beansBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/beans.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.dwarfBeansBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/dwarfbeans.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cucumberBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/cucumber.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.tomatoBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/tomatoes.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.chilliBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/chilli-peppers.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.broccoliBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/broccoli.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.lettuceBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/lettuce.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.carrotBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/carrot.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.brussel-sproutsBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/brussel-sprouts.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.beetrootBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/beetroot.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.leekBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/leeks.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cabbageBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/cabbage.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cauliflowerBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/cauliflower.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.kumaraBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/kumara.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.parsnipBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/parsnip.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cornBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/corn.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.cabbageBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/cabbage.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.asparagusBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/asparagus.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.onionBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/onion.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.capsicumBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/capsicum.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.pumpkinBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/pumpkin.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.peasBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/peas.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.courgetteBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/courgette.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.parsleyBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/parsley.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.silverbeetBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/silverbeet.jpg);
background-size: cover;
background-position: center;
}
.spinachBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/spinach.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.eggplantBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/eggplant.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.radishBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/radish.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.turnipBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/turnip.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.spring-onionBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/spring-onions.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.basilBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/basil.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.chivesBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/chives.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.garlicBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/garlic.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mintBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/mint.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.corianderBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/coriander.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.dillBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/dill.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.oreganoBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/oregano.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.rosemaryBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/rosemary.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.strawberryBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/strawberries.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.potatoBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/potato.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.rhubarbBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/rhubarb.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.thymeBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/thyme.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.celeryBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/celery.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.fennelBtn {
background: url(https://www.strol.co.nz/calculators/GardenStax%20Veggie%20Planter/img/veggies/fennel.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}