body{font-family: 'Inter', sans-serif; font-size: 16px; background: #DCDCDC;}

a{text-decoration: none;}

h1,h2,h3,h4,h5{color: #666666; padding-bottom: 25px}
P{color: #000; padding-bottom: 30px}

button{font-size: 20px; font-weight: 900; color: #fff; background: blue;}

select{font-size: 16px; margin-bottom: 5px;margin-top: 5px;}

input {font-size: 16px;}

img {max-width: 100%; max-height: 100%;}

.big-text{font-size: 70px; font-weight: 900}
.med-text{font-size: xx-large;; font-weight: 900}
.nor-text{font-size: 20px}
.small-text{font-size: 14px}

.int-text{text-transform: uppercase; font-size: 20px; font-weight: bold;}
.int-textnero{text-transform: uppercase; font-size: 20px; font-weight: 900;color: #000;}

.button{padding: 18px 28px; background: blue; color: #fff; display: inline-block; border-radius: 4px}

table, th, td {border: 1px solid black; padding: 5px 5px}

/* heder */

.header
{
    width: 100%;
    position: absolute;
    /* top: 0; */
    padding: 30px;
    max-width: 100%;
    display: flex;
    text-align: end;
}

.logo
{
}

.menu
{
width: 100%;
    float: right;
}

.menu li {display : inline-block; padding : 30px;color: #fff}

/*menu li a{ display: block;}*/

.cta{}

.intro-textnero{
	width: max-content;
	font-size:smaller;
}

.hero{
    height: 50vh;
    display: flex; width: 100%; align-items: flex-end;
    background: linear-gradient(0deg, rgba(0,0,0,.3), rgba(0,0,0,.9)),
    url('drivein.jpg') no-repeat center center;
    background-size: cover;
    box-shadow: 0 5px 10px;
    margin-bottom: 20px;
}

.hero__content{
    width: 100%;
    margin: 0px 0px 0px 15%;
    text-align: start;
}
.hero__content h1,
.hero__content p{color: #fff;}

/*grid*/
.grid{
    display: flex;
    flex-wrap: wrap;
    max-width: 90%;
    margin: auto auto 10px auto;
    box-shadow: 0 5px 10px;
}
.grid .col {width: 100%;}

.col{width: 250px;max-width: 250px ; padding: 10px; margin: 0 auto;

}
/*grid*/

/*grid1*/
.grid1{
    display: flex;
    flex-wrap: wrap;
    max-width: 90%;
    margin: auto auto 10px auto;
    box-shadow: 0 5px 10px;
}
.grid1 .col1 {width: 100%;}

.col1{max-width: 200px ;width: 200px; height: 250px; padding: 10px; margin: 0 auto;}

/*grid1*/

/*grid2*/
.grid2{
    display: flex;
    flex-wrap: wrap;
    max-width: 90%;
    margin: auto auto 10px auto;
    box-shadow: 0 5px 10px;
}

.grid2 .col2 {width: 100%;}
.col2{width: 300px; max-width: 300px;height: 750px; padding: 10px; margin: 0 auto;}

.grid2 .col3 {width: 100%;}
.col3{
    width: 950px;
    max-width: 950px;
    height: 750px;
    padding: 10px;
    margin: 0 auto;
}
/*grid*/

/*grid3*/

.grid3{
    display: flex;
    flex-wrap: wrap;
    max-width: 90%;
    margin: auto auto 10px auto;
    box-shadow: 0 5px 10px;
}

.grid3 .col4 {width: 100%;}
.col4{width: 320px; max-width: 320px; height: 400px; padding: 10px; margin: 0 auto;}

.grid3 .col5 {width: 100%;}
.col5{width: 320px; max-width: 320px; height: 400px; padding: 10px; margin: 0 auto;}

.grid3 .col6 {width: 100%;}
.col6{width: 620px; max-width: 620px; height: 400px;padding: 10px; margin: 0 auto;}
/*grid*/


.imgscelta{border: 1px solid red; position: relative;}

/* fine grid*/


*,
*:before,
*:after {

    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
    -box-sizing : border-box;


}
/* label color */
.input-field label {
    color: #000;
  }
  /* label focus color */
  .input-field input[type=text]:focus + label {
    color: #000;
  }
  /* label underline focus color */
  .input-field input[type=text]:focus {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #000;
  }
  /* valid color */
  .input-field input[type=text].valid {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #000;
  }
  /* invalid color */
  .input-field input[type=text].invalid {
    border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 0 #000;
  }
  /* icon prefix focus color */
  .input-field .prefix.active {
    color: #000;
  }
  @media screen and (max-width: 1225px) {
    .grid1 .col1:not(.col1:first-child){
        display: none;
        }
      .grid .col:not(.col:first-child){
          display: none;
      }
      .hero {
          height: 100vh;
      }
      .hero__content {
          margin: 0 0 0 3%;
      }
      .menu{
          display: none;
      }
      .logo{
          width: 50%;
          margin: auto;
      }
  }