#tabs {
  overflow: hidden;
  margin-top: -3rem;
  padding-top: 3rem;
}
#tabs .bg {
  z-index: 3;
}

#tabs .bg::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  z-index: -2;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
#tabs .bg.red::before {
  background: var(--red);
}
#tabs .bg.blue::before {
  background: var(--blue);
}
#tabs .bg.cream::before {
  background: var(--cream);
}
#tabs .bg.lightblue::before {
  background: var(--lightblue);
}

#tabs .bg::after{
  content: "";
  position: absolute;
  width: 100vw;
  height: 3vw;
  z-index: -1;
  top: -2vw;
  left: 50%;
}
#tabs .bg.blue::after {
  background: var(--blue);
}
#tabs .bg.cream::after {
  background: var(--cream);
}
#tabs .bg.blue::after,
#tabs .bg.cream::after {
  -webkit-transform: translate(-50%, 0) rotate(-.7deg);
  -moz-transform: translate(-50%, 0) rotate(-.7deg);
  -ms-transform: translate(-50%, 0) rotate(-.7deg);
  -o-transform: translate(-50%, 0) rotate(-.7deg);
  transform: translate(-50%, 0) rotate(-.7deg);
  -webkit-transform-origin: bottom right;
  -moz-transform-origin: bottom right;
  -ms-transform-origin: bottom right;
  -o-transform-origin: bottom right;
  transform-origin: bottom right;
}

#tabs .bg.red::after {
  background: var(--red);
}
#tabs .bg.lightblue::after {
  background: var(--lightblue);
}
#tabs .bg.red::after,
#tabs .bg.lightblue::after {
  -webkit-transform: translate(-50%, 0) rotate(.7deg);
  -moz-transform: translate(-50%, 0) rotate(.7deg);
  -ms-transform: translate(-50%, 0) rotate(.7deg);
  -o-transform: translate(-50%, 0) rotate(.7deg);
  transform: translate(-50%, 0) rotate(.7deg);
  -webkit-transform-origin: bottom left;
  -moz-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  -o-transform-origin: bottom left;
  transform-origin: bottom left;
}
.titleTab{
  position: relative;
}

#tabs .bg:nth-child(3) .leggidipiu{
  color: var(--blue);
}
/* .titleTab::after{
  content: "";
  position: absolute;
  right: -.5rem;
  top: 50%;
  width: 1em;
  height: 1.2em;
  background: black;
  display: inline-block;
  opacity: 0;
  -webkit-transform: translate(100%, -50%);
  -moz-transform: translate(100%, -50%);
  -ms-transform: translate(100%, -50%);
  -o-transform: translate(100%, -50%);
  transform: translate(100%, -50%);
  -webkit-transition: opacity .2s;
  -moz-transition: opacity .2s;
  -ms-transition: opacity .2s;
  -o-transition: opacity .2s;
  transition: opacity .2s;
} */

#tabs .bg:nth-of-type(1) .titleTab::after,
#tabs .bg:nth-of-type(3) .titleTab::after {
  -webkit-transform: translate(100%, calc(-50% - 1vw));
  -moz-transform: translate(100%, calc(-50% - 1vw));
  -ms-transform: translate(100%, calc(-50% - 1vw));
  -o-transform: translate(100%, calc(-50% - 1vw));
  transform: translate(100%, calc(-50% - 1vw));
}
.titleTab:hover::after {
  opacity: 1;
}
#tabs .bg:nth-of-type(1) ,
#tabs .bg:nth-of-type(3) ,
#tabs .bg:nth-of-type(2) {
  padding-bottom: 2vw;
}
#tabs .bg:last-of-type{
  padding-bottom: 1rem;
}

.buttonClear{
  cursor: pointer;
  width: 100%;
  background: none;
  border-radius: 0;
  border: none;
}

.single .imgContainer{
  padding-top: 45%;
}
.double .imgContainer{
  padding-top: 140%;
}

@media(max-width: 1799px){
  .leggidipiu{
    height: 1.2em;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
  }


  .buttonClear[aria-expanded=true] + .leggidipiu{
    height: 0;
    overflow: hidden;
  }
}

@media (max-width: 1199px){

}
@media (max-width: 991px){
}
@media (max-width: 767px) {
  .headerGuy img {
    width: 100%;
  }

  .titleTab{
    padding: 1rem 0 !important;
  }
}
@media (max-width: 575px){
}

@media (min-width: 576px){
}
@media (min-width: 768px) {
  #header {
    min-height: 80vh;
  }

  .headerGuy img {
    width: 70vw;
    max-width: 70rem;
  }

  .headerGuy {
    position: absolute;
    bottom: 0;
    right: 3%;
  }

  #tabs p {
    column-count: 2;
    column-gap: 2rem;
  }

  #tabs .bg:nth-of-type(1), #tabs .bg:nth-of-type(3), #tabs .bg:nth-of-type(2) {
    padding: 5vw 0 ;
  }
}
@media (min-width: 992px){
  .double .imgContainer {
    padding-top: 100%;
  }
  #header {
    min-height: 70vh;
  }
  .double .resizer {
    margin-top: 2rem;
  }
}
@media (min-width: 1200px){
  .double .resizer {
    margin-top: 0;
  }
  .double .imgContainer {
    padding-top: 140%;
}
  #tabs .bg:nth-of-type(1), #tabs .bg:nth-of-type(3), #tabs .bg:nth-of-type(2) {
    padding: 0 0 2vw 0;
  }
  .headerGuy img {
    width: 36vw;
    max-width: 36rem;
  }
  #header {
    min-height: calc(83vh - var(--menuh));
  }

  .buttonClear:not([aria-expanded=true]):hover + .leggidipiu{
    height: 1.2em;
    margin-top: .7rem;
  }

}
@media (min-width: 1800px){
  .leggidipiu{
    height: 0;
    overflow: hidden;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
  }

  #header {
    min-height: calc(90vh - var(--menuh));
  }
}
@media (min-width: 2600px){
  .container-fluid {
    max-width: 2300px;
  }
}