/*
##############################
Created by Jonathan Caputo
Last update: 23/04/2021
##############################
*/

body{
  margin: 0px;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

/* HERO */
#hero{
  background-image: url('../img/Hero_img_2x.png');
  background-size: cover;
  min-height: 75vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

#hero::before{
  content: "";
  position: absolute;
  width: 100%;
  min-height: 75vh;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%); /* Modifica Volontaria */
}

/* HEADER */
#hero header {
  border-bottom: 1px solid rgba(255,255,255,50);
  z-index: 1;
}

#hero .layout {
  padding: 20px 30px;
  display: flex;
}

#hero header .title{
  font-family: "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 21px;
}

#hero header .title a{
  color: #fff;
  text-decoration: none;
}

#hero header .logo_e_ricerca{
  display: flex;
  flex-grow: 1;
}

#hero header .search{
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid rgba(255,255,255,50); /*FIX: Non occupa tutto */
}

#hero header .search span{
  font-family: "SF Pro Text", serif;
  font-size: 14px;
  color: #fff;
  opacity: 0.8;
  padding-left: 15px;
}

#hero header ul{
  display: flex;
}

#hero header ul li a{
  font-family: "SF Pro Text", serif;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}

/* HERO CONTENTS */
#hero .container{
  z-index: 1;
  padding-left: 10%;
  margin-bottom: 40px;
}

#hero .bgWhite{
  background-color: #fff;
}

#hero .bgWhite img{
  padding: 30px 20px;
}

#hero .container > .row > .col-2{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#hero h3{
  font-family: "SF Pro Text", serif;
  font-size: 32px;
  color: #fff;
}

#hero h2{
  font-family: "SF Pro Display", sans-serif;
  font-weight: bold;
  font-size: 64px;
  color: #fff;
}


/* MENU */
#menu{
  border-bottom: 1px solid rgba(0,0,0,.1);
}
#menu ul{
  display: flex;
}

#menu ul li a{
  font-family: "SF Pro Text", serif;
  font-size: 18px;
  color: #000;
  opacity: 0.25;
  text-decoration: none;
}

#menu ul li .active{
  opacity: 1;
  position: relative;
  padding-bottom: 30px;
  border-bottom: 3px solid #000;
}


/* INIZIATIVA */
#iniziativa h2{
  font-family: "SF Pro Display", sans-serif;
  font-weight: 300;
  font-size: 76px;
  line-height: 82px;
  color: #682237;
}

#iniziativa p{
  font-family: "SF Pro Display", sans-serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 49px;
  color: #000;
}


/* PROGETTI */
#progetti h3{
  font-family: "SF Pro Display", sans-serif;
  font-weight: bold;
  font-size: 42px;
  line-height: 46px;
  color: #000;
}

#progetti .card{
  position: relative;
}

#progetti .card img{
  width: 100%;
}

#progetti .card .content{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#progetti .card .content::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 100%);
  opacity: 0.6;
}

#progetti .card .title{
  font-family: "SF Pro Display", sans-serif;
  font-size: 34px;
  line-height: 40px;
  font-weight: bold;
  color: #fff;
  margin-top: 21px;
  z-index: 1;
  position: relative;
}

#progetti .card .occhiello{
  font-family: "SF Pro Display", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}


/* PARTECIPA */
#partecipa{
  padding: 150px 0;
  background: #FAFAFA;

}

#partecipa h3{
  font-family: "SF Pro Display", sans-serif;
  font-weight: bold;
  font-size: 42px;
  line-height: 46px;
  color: #682237;
}

#partecipa h5{
  font-family: "SF Pro Display", sans-serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 46px;
  color: #000;
}

#partecipa .btn{
  background: #682237;
  font-family: "SF Pro Text", serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 30px;
  color: #fff;
  padding: 20px 40px;
}


/* CONTACTS */
#contacts p{
  font-family: "SF Pro Text", serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 30px;
  color: #707070;
}

#contacts p .title{
  color: #682237;
}

#contacts h4{
  font-family: "SF Pro Text", serif;
  font-weight: bold;
  font-size: 18px;
  line-height: 30px;
  color: #682237;
}

#contacts img{
  width: 60%;
  margin-left: 25%;
}


/* IMPRESA */
#impresa img{
  width: 100%;
}

#impresa h4{
  font-family: "SF Pro Display", sans-serif;
  font-weight: 300;
  font-size: 36px;
  line-height: 46px;
  color: #000;
}