body {
 --layout-padding: 1.5rem;
 --image-size    : 100vw;
 background-color: #f7f8f7;
}

@media (min-width: 576px) {
 body {
  --layout-padding: 2rem;
  --image-size    : 17vw;
 }
}

@media (min-width: 1300px) {
 body {
  --layout-padding: 10vw;
  --image-size    : 15vw;
 }
}

@media (min-width: 1400px) {
 body {
  --layout-padding: 14vw;
  --image-size    : 17vw;
 }
}

@media (min-width: 1500px) {
 body {
  --layout-padding: 16vw;
  --image-size    : 16vw;
 }
}

@media (min-width: 1600px) {
 body {
  --layout-padding: 18.75vw;
  --image-size    : 18.75vw;
 }
}


.topbar-blu {
 display         : flex;
 align-items     : center;
 background-color: #004799;
 padding         : .5rem var(--layout-padding);
 color           : rgba(255, 255, 255, .9);
 font-size       : .85rem;
}

@media (min-width: 992px) {
 .topbar-blu {
  height   : 40px;
  font-size: .9rem;
 }
}

.topbar-white {
 display         : flex;
 align-items     : center;
 background-color: #FFF;
 padding         : 1.8rem var(--layout-padding);
 font-size       : .95rem;
 flex-direction  : column;
}

.header-slogan {
 font-size: .85rem;
}

@media (min-width: 576px) {
 .header-slogan {
  font-size: .95rem;
 }
}

@media (min-width: 992px) {
 .topbar-white {
  height        : 5.5rem;
  padding       : 1.2rem var(--layout-padding) 1rem;
  flex-direction: row;
 }
}

.topbar-white .logo {
 max-height    : 4.5rem;
 max-width     : 100%;
 padding-bottom: 1rem;
}

@media (min-width: 992px) {
 .topbar-white .logo {
  height        : 2rem;
  margin-right  : .5rem;
  padding-top   : .2rem;
  padding-bottom: 0;
 }
}

@media (min-width: 1200px) {
 .topbar-white .logo {
  height: 2.5rem;
 }
}

.topbar-white span {
 color      : #004899;
 line-height: 1.1rem;
}

.topbar-white i {
 color    : #0072bb;
 font-size: 1.1rem;
}

.social-mobile i {
 font-size: 1.7rem;
}

.text-light-blue {
 color: #0072bb;
}

header {
 padding: 2.5rem var(--layout-padding) 0;
 color  : #004899;
}

@media (min-width: 992px) {
 header {
  padding: 3.5rem var(--layout-padding) 0;
  color  : #004899;
 }
}

.sottotitolo {
 text-shadow: 1px 1px 2px rgba(128, 128, 128, .15);
}

@media (min-width: 1300px) {
 .titolo {
  font-size: 2.7rem
 }

 .sottotitolo {
  font-size: 1.9rem
 }
}

@media (min-width: 1890px) {
 .titolo {
  font-size: 3.2rem
 }

 .sottotitolo {
  font-size: 2.5rem
 }
}

main {
 padding-bottom     : 6rem;
 color              : #004899;
 background-image   : url("../images/background.png");
 background-repeat  : no-repeat;
 background-size    : 50%;
 background-position: left bottom;
}

@media (min-width: 576px) {
 main {
  background-size: 35%;
 }
}

@media (min-width: 992px) {
 main {
  background-size: 25%;
 }
}

.flex-box {
 display       : flex;
 flex-direction: column-reverse;
}

@media (min-width: 992px) {
 .flex-box {
  flex-direction: row;
 }
}

.flex-box .colonna-sx {
 flex      : 0 0 var(--layout-padding);
 text-align: right;
 visibility: hidden;
 display   : none;
}

@media (min-width: 992px) {
 .flex-box .colonna-sx {
  display: block;
 }
}

@media (min-width: 1300px) {
 .flex-box .colonna-sx {
  flex      : 0 0 var(--image-size);
  text-align: right;
  visibility: visible;
 }
}


@media (min-width: 992px) {
 .flex-box .colonna-dx {
  flex: 0 0 calc(var(--image-size) * 2.75);
 }
}

.flex-box .omini-sx,
.flex-box .omini-dx {
 margin-top: -30px;
}

@media (min-width: 1092px) {
 .flex-box .omini-sx,
 .flex-box .omini-dx {
  margin-top: -90px;
 }
}

@media (min-width: 1600px) {
 .flex-box .omini-sx,
 .flex-box .omini-dx {
  margin-top: -40px;
 }
}

.flex-box .omini-sx {
 width: 100%;
}

.flex-box .omini-dx {
 width: 100%;
}

.omini-background-wrapper {
 position: relative;
}

.omini-background {
 position        : absolute;
 width           : 100vw;
 left            : 0;
 top             : 0;
 background-color: #62c8ff;
 background-image: linear-gradient(to top, #d3fee2, #9ff0e6, #70dff5, #62c8ff, #88abfc);
 z-index         : -1;
 opacity         : .85;
}

.flex-box .form {
 background-color: #004899;
 border-radius   : 1rem;
 min-width       : 30%;
 flex-grow       : 1;
 overflow        : hidden;
 margin          : 0 var(--layout-padding);
 display:flex;
 flex-direction: column;
}

@media (min-width: 992px) {
 .flex-box .form {
  margin: 0;
 }
}

.flex-box .form .top {
 background-color: #0072bb;
 color           : #FFF;

 /* To prevent a buggy line between elements in some browser*/
 padding-bottom: 1rem !important;
 margin-bottom: -.65rem;
}

.flex-box .form .inner-triangle {
 width           : 100%;
 height          : 4rem;
 clip-path       : polygon(0 0, 100% 0, 100% .6rem, 50% 100%, 0 .6rem);
 background-color: #0072bb;
 color           : #FFF;
}

.flex-box .form .outer-triangle {
 width           : 100%;
 height          : 5rem;
 clip-path       : polygon(0 0, 100% 0, 100% 1.6rem, 50% 100%, 0 1.6rem);
 background-color: #0057a6;
}

.flex-box .form .form-content {
 padding: 0 1.5rem;
 display: flex;
 flex-direction: column;
 flex-grow: 1;
}

@media (min-width: 576px) {
 .flex-box .form .form-content {
  padding: 0 2.3rem;
 }
}

.flex-box .form label {
 color        : #FFF;
 font-size    : .9rem;
 margin-bottom: .4rem;
}

.flex-box .form .textarea-wrapper {
 display:flex;
 flex-direction: column;
 flex-grow: 1;
}

.flex-box .form textarea {
 resize: none;
 flex-grow: 1;
}

.flex-box .text-dx {
 padding: 1.3rem var(--layout-padding) 1.5rem 2.2rem;
}

.flex-box .text-dx p {
 font-size    : .9rem;
 margin-bottom: .5rem;
}

.flex-box .text-dx li {
 margin-bottom: .7rem;
 position     : relative;
 padding-left : 1.7rem;
}

.flex-box .text-dx li::before {
 content  : '\f00c';
 font     : var(--fa-font-solid);
 font-size: 1.3rem;
 position : absolute;
 top      : 2px;
 left     : 0;
 width    : 1.7rem;
 height   : 100%;
}

.flex-box .text-dx li.star::before {
 content: '\f621';
}

.checkboxs {
 padding  : 2.5rem var(--layout-padding) 0;
 color    : #111;
 font-size: .9rem;
}

.footer-top {
 display         : flex;
 align-items     : center;
 background-color: #004899;
 color           : #FFF;
 padding         : 1.2rem var(--layout-padding);
 font-size       : .95rem;
 flex-direction  : column;
}

@media (min-width: 992px) {
 .footer-top {
  flex-direction: row;
  height        : 6.5rem;
 }
}

.footer-top .logo {
 height      : 2rem;
 margin-right: 1rem;
 padding-top : .2rem;
}

@media (min-width: 1200px) {
 .footer-top .logo {
  height: 2.2rem;
 }
}

.footer-bottom {
 background-color: #0072bb;
 padding         : .6rem var(--layout-padding);
 color           : rgba(255, 255, 255, .9);
 font-size       : .85rem;
 text-align      : center;
}

.form .btn {
 position   : relative;
 width      : 100%;
 font-weight: bold;
 padding    : .8rem;
 transition : box-shadow .2s ease-in-out;
 font-size  : 1.1rem;
}

.button-video {
 background-color: #61cae5;
 background      : linear-gradient(180deg, #61cae5 0%, #61cae5 52%, #00bff3 53%, #00bff3 100%);
}

.button-video:hover {
 box-shadow: rgba(97, 202, 229, .8) 0px 0px 8px;
}

.button-wa {
 background-color: #03c100;
 background      : linear-gradient(180deg, #03c100 0%, #03c100 52%, #00a651 53%, #00a651 100%);
}

.button-wa:hover {
 box-shadow: rgba(3, 193, 0, .8) 0px 0px 8px;
}

@media (min-width: 576px) {
 .button-wa:before {
  content         : "";
  width           : 1.5rem;
  height          : 4.5rem;
  display         : block;
  position        : absolute;
  top             : 50%;
  left            : -.5rem;
  transform       : translateY(-50%);
  background-color: #004799;
 }

 .button-wa:after {
  content         : '\f232';
  font            : var(--fa-font-brands);
  font-size       : 2.8rem;
  width           : 4.4rem;
  height          : 4.4rem;
  display         : grid;
  place-content   : center;
  position        : absolute;
  top             : 50%;
  left            : 0;
  transform       : translateY(-50%);
  border-radius   : 50%;
  border          : 2px solid white;
  background-color: #03c100;
 }
}

.fw-800 {
 font-weight: 800;
}

.move-icon-down {
 transform: translateY(.1rem);
}

.social {
 font-size: 1.2rem !important;
}