h1,.h1, h2,.h2, h3,.h3, h4,.h4, h5,.h5, h6,.h6
{ font-family: Oswald,sans-serif; 
color:var(--color-blue);
margin-bottom:0.3em;
}

h1,.h1 { font-size:3.2rem;}
h2,.h2 { font-size:3.1rem;}
h3,.h3 { font-size:2.4rem;}
h4,.h4 { font-size:2.0rem;}
h5,.h5 { font-size:1.6rem;}
h6,.h6 { font-size:1.2rem;}

sup {vertical-align:super; font-size:0.6em;}

.white {color:white;}

p {margin-bottom:0.825rem; line-height: 1.625rem; }

.fullWidthHeight{
  position:relative;
  z-index: 1;
  width:100%;
  min-height:100vh;
  background: url("../../img/background.jpg")no-repeat center center/cover, radial-gradient(circle at 30% 100%,var(--color-orange) 0% ,var(--color-blue) 40%);
  background-blend-mode: soft-light;
  background-attachment:fixed;
  padding:1rem 2rem;
}

.fullWidthHeight::before{
  content:" ";
  position:absolute;
  z-index:0;
  width:60%;
  height:100%;
  /* top:0; */
  bottom:-1px;
  left:0;
  background:url(../../img/path-white.svg) no-repeat center bottom/contain;
}

#first-section { height: 100%;  column-gap: 2rem; padding:0 4rem; position:relative; z-index: 1;}
#first-section>article { flex:1; max-width:800px; 
display: flex;
flex-flow: column;
padding-top:4rem;
/* justify-content: center; */
}
#first-section>aside { flex:1; }

#stramoLandingForm {
  max-width:500px; 
  background: rgba(255,255,255,0.85);
  padding: 2rem 2rem 0;
  border-radius: 2rem;
  box-shadow: 0px 0 0 2rem rgba(255,255,255,0.2);
  margin: 2rem auto;
}

#stramoLandingForm label {
  color: var(--color-blue);
  font-weight: 300;
  margin-bottom: 0.265rem;
  display: inline-block;
}

#stramoLandingForm input[name="url"] { display: none;}
#stramoLandingForm .form-row { margin-bottom:1rem; }
#stramoLandingForm .form-row.flx { justify-content: space-between; }
/* #stramoLandingForm .form-row.flx>div {flex:1 } */
#stramoLandingForm .checkboxWrapper{
  flex:1;
  & label { 
    display:flex;
    align-items;center;
    justify-content:center;
    background:#ffffff;
    padding:1rem;
    margin:0.5rem;
    border:1px solid #dadada;
    border-radius:100vw;
    box-shadow: var(--color-shadow-blue) 0 0 5px;
    cursor:pointer;
/* font-weight:bold; */
  }
  & input[type="radio"]{ display:none; }
  
}
#stramoLandingForm .checkboxWrapper input[type="radio"]:checked + label{ 
background: var(--color-blue); color: #ffffff;
font-weight:bold;
}

#stramoLandingForm input[type="text"],#stramoLandingForm textarea {
  padding:0.2rem;
  width:100%;
  height:2rem;
  border-radius:100vw;
  border:1px solid #dadada;
  box-shadow: var(--color-shadow-blue) 0 0 5px;
}
#stramoLandingForm textarea{
  height:initial;
  border-radius:4px;
}
#stramoLandingForm .gdpr { display:flex;}
#stramoLandingForm .gdpr a {font-size:0.625rem; color:red;}

.alert {
  padding: 0.5rem;
  color: white;
  font-size: 0.675rem;
  border-radius:8px;
}

.alert p { line-height: 1;}
.alert ol { list-style: none; margin:0; padding:0;}
.alert ol li { border-bottom:1px solid white; padding:0.265rem 0;}

.alert-danger{
  background:red;
}

.alert.alert-success {
  background: #7fea7f;
  font-size:1.175rem;
}

.btn {
  position:relative;
  z-index:1;
  cursor:pointer;
  display:flex;
  margin:0 auto;
  justify-content: center;
  align-items: center;
  color:#ffffff;
  background:var(--color-blue);
  border:0;
  padding:1rem 1rem;
  width:300px;
  font-size:1.625rem;
  line-height:2;
  border-radius:100px;
  transition:all 0.2s ease-out;
}
.btn:hover,.btn.btn.arrowDown:hover::after {
  color:var(--color-blue);
  background:#ffffff;
}


.btn.arrowDown::after{
  position:absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  content:"";
  bottom:0;
  background:var(--color-blue);
  border-radius:50px;
  width:48px; height:48px;
  font-family:'FontAwesome';
  transform:translateY(50%);
  transition:all 0.2s ease-out;

  z-index:-1;
  animation: arrowUpDown ease 4s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  animation-fill-mode:both;
}
@keyframes arrowUpDown{
  0%   { transform:  translateY(50%); }
  33% { transform:  translateY(10%); }
  66% { transform:  translateY(50%); }
  100% { transform:  translateY(50%); }
}

.btn.orange { background:var(--color-orange); }
.btn.orange:hover,.btn.orange.btn.arrowDown:hover::after { background:#ffffff; color:var(--color-orange); }
.btn.orange.arrowDown::after{ background:var(--color-orange); }

.btn.richiediInfo{
  position:fixed;
  top:-100px;
  right:0;
  background-color:var(--color-orange);
  width:auto;
  padding:0.5rem 1rem 0.5rem 2rem;
  font-size:1rem;
  border-radius: 0 0 0 30px;
  &:hover{
    background-color:var(--color-orange-dark);
    color:white;
  }
}

.btn.richiediInfo.active{
  top:0;
}

.stickyTop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5rem;
  position:fixed;
  z-index:9999;
  top:-100px;
  left:50%;
  /* background-color:var(--color-blue); */
  background-color:#ffffff;
  width:auto;
  padding:0.265rem 0.5;
  font-size:0.85rem;
  border-radius: 30px;
  & .btn {
    font-size:1rem;
    padding:0.5rem;
  }
  translate:-50% 0;
}

.stickyTop.active{
  top:2px;
  box-shadow:rgba(0,0,0,0.225) 0 0 8px;
}


.btn.richiediInfo::after{
  margin-left:8px;
  content:"";
  font-family:'FontAwesome';
}

#stramoLandingForm button#submitMessage {
  color:#ffffff;
  background:var(--color-orange);
  transform:translateY(50%);
  text-transform: uppercase;
  letter-spacing:0.1rem;
}

#stramoLandingForm button#submitMessage:hover {
color:var(--color-orange);
background:white;
}

#second-section {
display:flex;
flex-wrap:wrap;
justify-content:space-between;
max-width:1440px;
margin:2rem auto;
}

#second-section>h2 { margin-bottom:2rem;}


#third-section {
  background:radial-gradient(circle at left top,#ffffff 20%,#e8f2f9 70%, #fff1e9 100%);
  background-attachment: fixed;
  padding:2rem 0;
}

#third-section .riga1440 {
  display:flex;
  flex-wrap: wrap;
}

#third-section .box { max-width:480px; margin:0 auto;}

#fourt-section {
  background:radial-gradient(circle at left top,#ffffff 20%,#ffe8d9 70%, #fff1e9 100%);
  background-attachment: fixed;
  padding:2rem 0;
}

/* #fourth-section .riga1440 { */
/*   display:flex; */
/*   flex-wrap: wrap; */
/* } */

#fourth-section .box { max-width:480px; margin:0 auto;}

#five-section { 

  background:radial-gradient(circle at left top,#ffffff 20%,#ffe8d9 70%, #fff1e9 100%);
  background-attachment: fixed;
  padding:2rem 0;

}

#faq{

  & details{
    padding:1rem;
    
    & .question {}
    & .answer {
      margin-left:2rem;
      background: white;
      border-radius:0.5rem;
      padding:1.5rem 1rem;
      line-height:1.625;
      box-shadow: #fff1e9 0 0 1rem;

    }
  }

}

#last-section {
  display:flex;
  align-items: center;
  background: url("../../img/background.jpg")no-repeat center center/cover,linear-gradient(#ffffff,#efefef);
  background-blend-mode: soft-light;
  background-attachment: fixed;
  padding:2rem 0;
  min-height: 50vh;
}

#windowWrapper {
  margin:0 auto;
  max-width:600px;
  display:flex;
  position:sticky;
  top:10%;
  flex-flow:column;
  height:calc(100vh - 10%);
  background-color:#e1eaf1;
  padding: 1rem;
  border-radius:16px;
  box-shadow:var(--color-shadow-blue) 0 0.5rem 16px;
}

#windowWrapper header{
display:flex;
justify-content:flex-end;
align-items: center;
width:100%;
padding:0.265rem 0.625rem;
border-radius: 8px 8px 0 0;
background: #c6d8e4;
margin-bottom:0.625rem;
}

#windowWrapper header .point{
  border-radius:30px;
  width:1rem;
  height:1rem;
  background: #e1eaf1;
  margin-left:0.5rem;
}

#windowWrapper .content {
background:white url("../../img/prototype.webp") no-repeat top center/cover;
animation: prototype 50s infinite linear;
border-radius: 0 0 8px 8px;
flex:1;
width:100%;
}

#windowWrapper.affiliazioni {
aspect-ratio:1;
height:auto;

}

#windowWrapper.affiliazioni .content {
background:white url("../../img/prototype-affiliazioni.webp") no-repeat top center/cover;
animation: prototype 50s infinite linear;

border-radius: 0 0 8px 8px;
flex:1;
width:100%;
}


@keyframes prototype {
  0%   { background-position:center top;}
  /* 10%  { background-position:center 5%;} */
  /* 15%  { background-position:center 5%;} */
  /* 25%  { background-position:center 25%;} */
  /* 30%  { background-position:center 25%;} */
  /* 40%  { background-position:center bottom;} */
  50%  { background-position:center bottom;}
  100% { background-position:center top;}
}



#footer {
padding:2rem;
text-align: center;
background: var(--color-blue);
color:white;
font-size:0.875rem;
}