/*
Theme Name: Visivart
Theme URI:
Description: Child theme per Visivart landing by Care
Author: Care srl
Author URI: https://www.carecom.it
Template: care-boilerplate
Version: 1.0.0
*/

/* jost-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/Jost-Light.ttf') format('truetype'); /* .ttf version */
}

/* jost-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Jost-Regular.ttf') format('truetype'); /* .ttf version */
}

/* jost-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/Jost-Medium.ttf') format('truetype'); /* .ttf version */
}

/* jost-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/Jost-SemiBold.ttf') format('truetype'); /* .ttf version */
}

/* jost-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Jost-Bold.ttf') format('truetype'); /* .ttf version */
}

/* jost-900 - latin */
@font-face {
  font-display: swap;
  font-family: 'Jost';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/Jost-Black.ttf') format('truetype'); /* .ttf version */
}


:root {
  --font: 'Jost', sans-serif;
  --base-font-size: 16px;
  --title-color: #2a2a2a;
  --desc-color: #000;
  --orange: #f18842;
  --orange-shadow: #ca6d2f;
  --pad-v: 60px;
  --pad-h: 60px;
}

html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font);
  font-style: var(--base-font-size);
}
.post, .page {
  margin: 0 !important;
}
.page-content, .entry-content, .entry-summary {
  margin: 0 !important;
}
.entry-content {
  padding: var(--pad-v) 0 0;
}
.row {
  padding: 0 var(--pad-h);
}

.header-actions {
  text-align: center;
}
.header-actions.initial-load {background: #020202;}
.header-actions .logo {
  display: inline-block;
  line-height: 0;
  height: 109px;
  padding: 35px 30px 10px;
}
.header-actions .logo img {
  height: 100%;
}


.hero--overlay img {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 2351px;
  right: -700px;
  top: -350px;
  max-width: none;
}

.hero {
  max-width: 1420px;
  margin: 0 auto;
}

.hero--content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: var(--pad-h);
}

.hero--text h1 {
  font-size: 46pt;
  line-height: 45pt;
  margin: 0;
}

.hero--text h1 b {
  text-transform: uppercase;
  display: block;
}

.hero--text p {
  font-size: 20pt;
  line-height: 26pt;
}

a.cta:visited {
  color: #fff;
}
a.cta {
  font-size: 20pt;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 25px;
  background: var(--orange);
  border-radius: 8px;
  border-bottom: 4px solid var(--orange-shadow);
  text-shadow: 1px 3px 0px var(--orange-shadow);
  position: relative;
  transition: .5s top;
  display: inline-block;
}
a.cta:active {
  border-bottom: none;
  top: 4px;
  transition: .5s all;
}

.row.row-gallery {
  background: var(--title-color);
  margin-top: calc(var(--pad-v) * 2);
}
.gallery {
  position: relative;
  top: calc(var(--pad-v)* -1);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: calc(1420px - (var(--pad-h) * 2));
  margin: 0 auto;
  padding: 0;
}


form.wpcf7-form {
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
  margin: 0 auto;
  background: #eeeeee;
  padding: 32px;
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

span.wpcf7-form-control-wrap {
  width: 100%;
  display: block;
}

.form--row span input, .form--row span textarea {
  width: 100%;
  padding: 6px;
  color: #000;
  font-family: var(--font);
}
.form--row span input[type=checkbox]{
  width:20px;
}
.send-btn input {
  background: var(--orange);
  color: #fff;
  font-weight: bold;
  padding: 12px 32px;
}

.form--row.form--checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  font-size: 12px;
  align-items: center;
}

.form--row.form--checkbox a {
  color: #000;
}

.send-btn {
  padding-top: 16px;
}

::placeholder {
  color: var(--title-color);
  opacity: 1; /* Firefox */
  font-family: var(--font);
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: var(--title-color);
  font-family: var(--font);
}


.hero--text p span {
  font-size: 18pt;
  line-height: 20pt;
  display: block;
}
.hero--text .price {
  font-weight: normal;
  display: block;
}
.hero--text .price.price-old {
  font-size: 30pt;
  position: relative;
  width: auto;
  width: fit-content;
}
.price u {
  font-size: 20pt;
  text-decoration: none;
}

.date {
  display: block;
  margin-top: 12px;
  font-size: 16pt;
  line-height: 18pt;
  font-style: normal;
}

.price.price-old svg {
  position: absolute;
  left: 0;
  width: 105%;
}

b.price.price-new {
  background: var(--orange);
  color: #fff;
  padding: 16px 0 16px 32px;
  margin-left: -32px;
  border-bottom: 2px solid var(--orange-shadow);
  text-shadow: 0 2px 1px var(--orange-shadow);
  font-size: 50pt;
  font-weight: bold;
  clip-path: polygon(100% 0%, 83.5% 100%, 0% 100%, 0% 0%);
}

b.price.price-new i {
  display: block;
  font-style: normal;
  text-shadow: 0 2px 1px var(--orange-shadow);
  font-size: 20pt;
  font-weight: normal;
  margin-bottom: 16px;
}

.row.footer {
  max-width: 1420px;
  margin: 0 auto;
  padding-top: calc(var(--pad-v) / 2);
  padding-bottom: calc(var(--pad-v) / 2);
}

footer {
  background: #000;
  color: #fff;
}

.company-info {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: var(--pad-h);
  padding-top: calc(var(--pad-v) / 2);
}

.company-info .col b {
  text-transform: uppercase;
  font-weight: 500;
}

.company-info .col a {
  color: #fff;
  text-decoration: none;
}

.company-info .col {
  font-size: 14px;
}

.company-name {
  font-weight: 500;
}
.company-name span a {
  color: #fff;
  text-decoration: none;
}

#cta-container {
  display: none;
}
@media screen and (max-width: 1024px) {
  .hero--content {
    grid-template-columns: 1fr;
    gap: 0;
  }
  #cta-container {
    display: block;
  }
}

@media screen and (max-width: 640px) {
  :root {
    --pad-v: 30px;
    --pad-h: 30px;
  }
  .row.footer {
    padding-top: calc(var(--pad-v));
    padding-bottom: calc(var(--pad-v));
  }
}
@media screen and (max-width: 580px) {
  .hero--text h1 {
    font-size: 35pt;
    line-height: 31.5pt;
  }
  .hero--text p {
    font-size: 16pt;
    line-height: 22pt;
  }
  a.cta {
    font-size: 14pt;
  }
  b.price.price-new {
    font-size: 40pt;
  }
  .gallery {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 480px) {
  .company-info {
    grid-template-columns: 1fr;
    gap: calc(var(--pad-h) / 2);
  }
}
@media screen and (max-width: 420px) {
  .hero--text h1 {
    font-size: 26pt;
    line-height: 23.4pt;
  }
  .hero--text p {
    font-size: 14pt;
    line-height: 19pt;
  }
  a.cta {
    font-size: 12pt;
  }
  b.price.price-new {
    font-size: 35pt;
  }
  .hero--text p span,
  b.price.price-new i {
    font-size: 17pt;
  }
}


/* To remove */
#wpadminbar {
  display: none !important;
}
html {
  margin-top: 0 !important;
}




span.price-tag {
  font-size: 84pt;
  font-weight: bold;
  color: var(--orange);
  font-weight: 900;
  text-shadow: 2px 2px #c7601b;
  line-height: 1;
}
span.price-tag-old {
  display: inline-grid;
  grid-template-columns: auto auto;
  height: fit-content;
  align-items: center;
  font-size: 30pt;
  gap: 14px;
  line-height: 1;
}
.promo-validity a {
  color: #fff;
  text-decoration: none;
}
.promo-validity {
  font-size: 30pt;
  text-transform: uppercase;
  background: var(--orange);
  border-radius: 8px;
  border-bottom: 3px solid #c7601b;
  color: #fff;
  text-decoration: none;
  padding: 16px 23px;
  margin-left: -23px;
  width: fit-content;
  transition: .5s;
}
.promo-validity a span {
  display: grid;
  height: fit-content;
  line-height: 1;
  text-shadow: 2px 2px #c7601b;
}
.promo-validity:hover {
  background: #ff7010;
}
.promo-validity a span b {
  font-size: 54.5pt;
  display: block;
  margin-top: -5px;
}
.promo-validity a span u {
  font-size: 40pt;
  font-weight: bold;
  display: block;
  margin-top: -10px;
}

.promo-info {
  font-size: 48pt;
  line-height: 1;
  margin-top: 20px;
}

.promo-info u {
  font-weight: bold;
  text-transform: uppercase;
  display: block;
  color: var(--orange);
  font-size: 45pt;
  margin-bottom: 35px;
}


@media screen and (max-width: 730px) {
  h1 {
    font-size: 31pt !important;
    line-height: 29pt !important;
  }

  span.price-tag {
    font-size: 56pt;
  }

  .promo-validity {
    font-size: 33px;
  }

  .promo-validity a span b {
    font-size: 45pt;
  }

  .promo-validity a span u {
    font-size: 35pt;
  }

  .promo-info {
    font-size: 29pt;
  }

  .promo-info u {
    font-size: 31pt;
  }
}
@media screen and (max-width: 500px) {
  h1 {
    font-size: 21pt !important;
    line-height: 25pt !important;
  }

  span.price-tag {
    font-size: 36pt;
  }

  .promo-validity {
    font-size: 20px;
  }

  .promo-validity a span b {
    font-size: 28pt;
    margin-top: 0px;
  }
  .promo-validity {
    padding: 16px;
  }
  .promo-validity a span u {
    font-size: 22pt;
    margin-top: -5px;
  }

  .promo-info {
    font-size: 21pt;
  }

  .promo-info u {
    font-size: 22pt;
  }
  span.price-tag-old {
    font-size: 26px;
  }
  .hero--text .price.price-old {
    font-size: 26px;
  }
  span.price-tag-old {
    gap: 8px;
  }
  .promo-validity {
    margin-left: 0;
  }
}