@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/* GENERAL */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  font-family: "Lato", sans-serif;
}

p,
span,
a,
h1,
h2,
h3,
h4,
h5 {
  font-family: "Lato", sans-serif;
}

.color-green {
  color: #94ca43;
}
.color-blue {
  color: #008dd2;
}
.color-navy {
  color: #01265d;
}

label {
  margin-bottom: 10px;
  font-family: "Lato", sans-serif;
  transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.form-input {
  font-family: "Lato", sans-serif;
  font-size: 16px;
  line-height: 28px;
  padding: 8px 16px;
  width: 100%;
  min-height: 44px;
  border: unset;
  outline-color: rgb(31 141 204 / 0.5);
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(60, 66, 87, 0.16) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

input[type="submit"] {
  font-family: "Lato", sans-serif;
  background-color: rgb(32, 141, 204);
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.12) 0px 1px 1px 0px,
    rgb(32, 141, 204) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
    rgba(60, 66, 87, 0.08) 0px 2px 5px 0px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  width: 50%;
  margin-top: 1rem;
  transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

input[type="submit"]:hover {
  background-color: #012459;
}

.error {
  color: red;
  transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.box-register {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.box-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.box-link p {
  color: #fff;
  font-size: 20px;
}

.half-background {
  background-color: #008dd2;
  width: 100%;
  min-height: 300px;
  height: 100%;
}

.c-btn {
  padding: 0.5rem 3rem;
  background: #fff;
  text-decoration: none;
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 3px;
  color: #008dd2;
  transition: all 0.3s ease-out;
}

a.c-btn:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

@media screen and (min-width: 1782px) {
  .body-text p {
    font-size: 2.5em;
  }
}

@media screen and (min-width: 1451px) and (max-width: 1781px) {
  .body-text p {
    font-size: 1.7em;
  }
}

/* DESKTOP & IPAD */
@media screen and (min-width: 665px) {
  .half-background {
    height: 100%;
  }

  .box-form {
    padding: 3rem 2rem 3rem 3rem;
  }
}

/* SMALL DESKTOP */
@media screen and (min-width: 1451px) {
  .desktop-image {
    /*non esiste*/
    /*background-image: url("/img/Copertina-edited-2.png");*/
  }

  .ipad,
  .mobile {
    display: none;
  }

  .c-row {
    padding: 5rem 0 0 5%;
  }

  .responsive {
    position: relative;
  }

  .background-image {
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    background-position-x: right;
    height: 100vh;
    position: absolute;
  }

  .c-container {
    padding-right: 5%;
    height: 100vh;
  }

  .logo-winsoft {
    width: 300px;
  }

  .text-height {
    height: 66.5%;
  }

  .logo-height {
    height: 33.5%;
    background-color: #01265d;
  }

  .img-container {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  .logo-wingate {
    width: 60%;
  }
}

/* IPAD */
@media screen and (min-width: 665px) and (max-width: 1450px) {
  .desktop,
  .mobile {
    display: none;
  }
}

/* MOBILE */
@media screen and (max-width: 664px) {
  .desktop,
  .ipad {
    display: none;
  }

  .mobile-image {
    position: relative;
  }
  .diagonal {
    width: 100%;
    height: 100.1%;
    background-color: #005b8999;
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 50% 100%);
    position: absolute;
  }

  /* Per creare l'effetto chiaro/scuro come nell'immagine */
  .diagonal:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-color: #0075aba2;
    clip-path: polygon(0% 100%, 0% 0%, 100% 100%);
  }
  .logo-winsoft {
    width: 175px;
  }
  .logo-wingate {
    width: 40%;
    margin-left: 2.4rem;
  }
  .image-footer {
    background-color: #01265d;
    display: flex;
    width: 100%;
    height: 130px;
    align-items: center;
  }
  .body-text p {
    font-size: 1.7em;
  }
  .c-con {
    padding-left: 2rem !important;
  }

  .box-form {
    padding: 1rem;
    padding-bottom: 3rem;
  }
}