/*
##############################
Created by Jonathan Caputo
Last update: 05/03/2021
Design by prof. Mastrandrea
##############################
*/
body{
  margin: 0px;
}

.wrapper{
  width: 85.4%;
	margin-left: auto;
	margin-right: auto;
	max-width: 1640px;
	position: relative;
}

/* NAVBAR */
table{
	width: 100%;
  position: absolute;
  top: 34px;
  left: 0;
}

table td:last-child {
  text-align: right;
}

.link{
  font-family: "NHaasGroteskTXPro";
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: #000;
  text-decoration: none;
}

.pr-55{
  padding-right: 55px;
}

/* HOME */
.yellow-bg{
  background-color: #FDDFAE;
}

.home{
  padding: 270px 0;
}

.title{
  font-family: Arial;
  font-weight: normal;
  font-size: 60px;
  letter-spacing: -0.01em; /*-0.01% del font*/
  line-height: 75px;
  text-align: left;
  color: #000;
}

.subtitle{
  font-family: Arial;
  font-weight: normal;
  font-size: 25px;
  line-height: 35px;
  text-align: left;
  color: #636363;
}

/* DESCRIPTION */
.news-title{
  margin-top: 100px;
  margin-bottom: 37px;
  font-family: Arial;
  font-weight: normal;
  font-size: 30px;
  line-height: 40px;
  text-align: left;
  color: #000;
}

.news-body{
  width: 75%;
  font-family: Arial;
  font-weight: normal;
  font-size: 20px;
  line-height: 30px;
  text-align: left;
  color: #000;
  margin-bottom: 100px;
}

.red{
  color:red;
}

/* IMAGE */
.image{
  width: 100%;
  background-image: url(../img/Race-to-change_2x.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 605px;
  position: relative;
}

.image::before{
  content: "";
  width: 100%;
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #000 100%);
  background-size: cover;
  background-repeat: no-repeat;
  padding-top: 650px;
  position: absolute;
  top: 0;
  margin-bottom: 100px;
}

.image h4{
  margin-top: 0;
  margin-bottom: 0;
  font-family: Arial;
  font-weight: bold;
  font-size: 60px;
  line-height: 45px;
  text-align: left;
  color: #fff;
  bottom: 44px;
}

/* FORM */
.form-header{
  font-family: Arial;
  font-weight: bold;
  font-size: 28px;
  line-height: 45px;
  text-align: left;
  color: #000;
  text-transform: uppercase;
  padding-bottom: 15px;
  margin-bottom: 0px;
  position: relative;
  margin-top: 100px;
}

.form-header::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: #343434;
}

.formRow{
  margin-top: 20px;
}

.firstRow{
  padding-top: 15px;
}

.bold{
  font-weight: bold;
}

label{
  font-family: Arial;
  font-weight: normal;
  font-size: 22px;
  line-height: 45px;
  text-align: left;
  color: #000000;
  display: block;
}

input{
  width: 536px; /*Oppure 33%, ma troppo piccolo su telefoni */
  height: 61px;
  background: #fff;
  border: 1px solid #000;
  font-family: Arial;
  font-weight: normal;
  font-size: 21px;
  line-height: 45px;
  text-align: left;
  color: black;
  padding-left: 15px;
}

input[type=text]::placeholder{
  font-family: Arial;
  font-weight: normal;
  font-size: 21px;
  line-height: 45px;
  text-align: left;
  color: #c3c3c3;
  padding-bottom: 19px;
  padding-top: 19px;
}

input:focus{
  order: 1px solid blue;
}

.error{
  margin-top: 5px;
  font-family: Arial;
  font-weight: bold;
  font-size: 14px;
  text-align: left;
  color: #f00;
}

input[type=checkbox]{
  display: none;
}

label[for=privacy]{
  margin-left: 41px;
}

input[type="checkbox"] + label{
  position: relative;
  font-family: Arial;
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  text-align: left;
  color: #000;
}

input[type="checkbox"]:checked + label{
  text-decoration: underline;
}

input[type="checkbox"] + label::before{
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 1px solid #000;
  top: 1px;
  left: -41px;
}

input[type="checkbox"]:checked + label::after{
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background-color: black;
  top: 5px;
  left: -37px;
}

.btn{
  margin-top: 37px;
  width: 260px;
  height: 59px;
  background: #2c25de;
  border: 1px solid #707070;
  font-family: Arial;
  font-weight: bold;
  font-size: 22px;
  line-height: 28px;
  text-align: left;
  color: #fff;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-left: 92px;
}

/* FOTTER */
footer{
  padding-top: 38px;
  padding-bottom: 38px;
  padding-left: 14px;
  margin-top: 100px;
  display: block;
}

footer span{
  font-family: Arial;
  font-weight: normal;
  font-size: 20px;
  text-align: left;
  color: #707070;
}

footer .wrapper a + a{
  padding-left: 28px;
  padding-right: 40px;
}