.duo-tone {
  position: relative;
  /* width: 900px; */
  /* height: 700px; */
  margin: 0 auto;
}

.duo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.screen {
  mix-blend-mode: screen;
}

.base-01 {
  height: 100%;
  width: 100%;
  background-color: blue;
}

.base-02 {
  height: 100%;
  width: 100%;
  background-color: hotpink;
}

/* COLORES DUOTONOS */
/*
C-Green-Red       #5fc387  #b42d37
C-Purple-Yellow   #8250c8  #e6c846
B-C-Blu           #004bc8  #dcdcdc
B-C-Red           #ff374b  #dcdcdc
B-C-Pur           #dcdcdc  #b414b4
B-Y-Red           #ff374b  #ffd778
B-Y-Pur           #ffd778  #b414b4
GREY-H-Red        #eb3c4b  #323232
GREY-H-Orange     #eb7846  #323232
GREY-H-Blue       #46d2c8  #323232
GREY-H-Purple     #c86ec8  #323232
RED-H-Orange      #eb7846  #5a0000
RED-H-Yellow      #ffe65a  #5a0000
RED-H-Green       #82e682  #5a0000
RED-H-Blue        #46d2c8  #5a0000
RED-H-Purple      #c86ec8  #5a0000
GREEN-H-Red       #eb3c4b  #193c28
GREEN-H-Orange    #eb7846  #193c28
GREEN-H-Yellow    #ffe65a  #193c28
GREEN-H-Purple    #c86ec8  #193c28
BLUE-H-Red        #eb3c4b  #001e50
BLUE-H-Orange     #eb7846  #001e50
BLUE-H-Yellow     #ffe65a  #001e50
BLUE-H-Green      #82e682  #001e50
BLUE-H-Purple     #c86ec8  #001e50
*/

.C-Green-Red-01{
  height: 100%;
  width: 100%;
  background-color: #5fc387;
}
.C-Green-Red-02{
  height: 100%;
  width: 100%;
  background-color: #b42d37;
}

.C-Purple-Yellow-01{
  height: 100%;
  width: 100%;
  background-color: #8250c8;  
}
.C-Purple-Yellow-02{
  height: 100%;
  width: 100%;
  background-color: #e6c846;
}

.B-C-Blu-01{
  height: 100%;
  width: 100%;
  background-color: #004bc8;
}
.B-C-Blu-02{
  height: 100%;
  width: 100%;
  background-color: #dcdcdc;
}

.B-C-Red-01{
  height: 100%;
  width: 100%;
  background-color: #ff374b; 
}
.B-C-Red-02{
  height: 100%;
  width: 100%;
  background-color: #dcdcdc;
}

.B-C-Pur-01{
  height: 100%;
  width: 100%;
  background-color: #dcdcdc;
}
.B-C-Pur-02{
  height: 100%;
  width: 100%;
  background-color: #b414b4;
}

.B-Y-Red-01{
  height: 100%;
  width: 100%;
  background-color: #ff374b;
}
.B-Y-Red-02{
  height: 100%;
  width: 100%;
  background-color: #ffd778;
}

.B-Y-Pur-01{
  height: 100%;
  width: 100%;
  background-color: #ffd778;
}
.B-Y-Pur-02{
  height: 100%;
  width: 100%;
  background-color: #b414b4;
}

.GREY-H-Red-01{
  height: 100%;
  width: 100%;
  background-color: #eb3c4b;
}
.GREY-H-Red-02{
  height: 100%;
  width: 100%;
  background-color: #323232;
}

.GREY-H-Orange-01{
  height: 100%;
  width: 100%;
  background-color: #eb7846;
}
.GREY-H-Orange-02{
  height: 100%;
  width: 100%;
  background-color: #323232;
}

.GREY-H-Blue-01{
  height: 100%;
  width: 100%;
  background-color: #46d2c8;
}
.GREY-H-Blue-02{
  height: 100%;
  width: 100%;
  background-color: #323232;
}

.GREY-H-Purple-01{
  height: 100%;
  width: 100%;
  background-color: #c86ec8;
}
.GREY-H-Purple-02{
  height: 100%;
  width: 100%;
  background-color: #323232;
}

.RED-H-Orange-01{
  height: 100%;
  width: 100%;
  background-color: #eb7846;
}
.RED-H-Orange-02{
  height: 100%;
  width: 100%;
  background-color: #5a0000;
}

.RED-H-Yellow-01{
  height: 100%;
  width: 100%;
  background-color: #ffe65a;
}
.RED-H-Yellow-02{
  height: 100%;
  width: 100%;
  background-color: #5a0000;
}

.RED-H-Green-01{
  height: 100%;
  width: 100%;
  background-color: #82e682;
}
.RED-H-Green-02{
  height: 100%;
  width: 100%;
  background-color: #5a0000;
}

.RED-H-Blue-01{
  height: 100%;
  width: 100%;
  background-color: #46d2c8;
}
.RED-H-Blue-02{
  height: 100%;
  width: 100%;
  background-color: #5a0000;
}

.RED-H-Purple-01{
  height: 100%;
  width: 100%;
  background-color: #c86ec8;
}
.RED-H-Purple-02{
  height: 100%;
  width: 100%;
  background-color: #5a0000;
}

.GREEN-H-Red-01{
  height: 100%;
  width: 100%;
  background-color: #eb3c4b;
}
.GREEN-H-Red-02{
  height: 100%;
  width: 100%;
  background-color: #193c28;
}

.GREEN-H-Orange-01{
  height: 100%;
  width: 100%;
  background-color: #eb7846;
}
.GREEN-H-Orange-02{
  height: 100%;
  width: 100%;
  background-color: #193c28;
}

.GREEN-H-Yellow-01{
  height: 100%;
  width: 100%;
  background-color: #ffe65a;
}
.GREEN-H-Yellow-02{
  height: 100%;
  width: 100%;
  background-color: #193c28;
}

.GREEN-H-Purple-01{
  height: 100%;
  width: 100%;
  background-color: #c86ec8;
}
.GREEN-H-Purple-02{
  height: 100%;
  width: 100%;
  background-color: #193c28;
}

.BLUE-H-Red-01{
  height: 100%;
  width: 100%;
  background-color: #eb3c4b;
}
.BLUE-H-Red-02{
  height: 100%;
  width: 100%;
  background-color: #001e50;
}

.BLUE-H-Orange-01{
  height: 100%;
  width: 100%;
  background-color: #eb7846;
}
.BLUE-H-Orange-02{
  height: 100%;
  width: 100%;
  background-color: #001e50;
}

.BLUE-H-Yellow-01{
  height: 100%;
  width: 100%;
  background-color: #ffe65a;
}
.BLUE-H-Yellow-02{
  height: 100%;
  width: 100%;
  background-color: #001e50;
}

.BLUE-H-Green-01{
  height: 100%;
  width: 100%;
  background-color: #82e682;
}
.BLUE-H-Green-02{
  height: 100%;
  width: 100%;
  background-color: #001e50;
}

.BLUE-H-Purple-01{
  height: 100%;
  width: 100%;
  background-color: #c86ec8;
}
.BLUE-H-Purple-02{
  height: 100%;
  width: 100%;
  background-color: #001e50;
}

.img-duotone {
  position: absolute;
  top: 0;
  left: 0;
  /*background-image: url( 'https://odisseia.pt/wp-content/uploads/2020/06/ff_Animais-Bebés-e-os-seus-.jpg' );*/
  background-size: cover;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  filter: grayscale(100%);
}

.invert {
  filter: invert(100%);
}

h1 {
  width: 110%;
  text-align: center;
  color: white;
  position: absolute;
  bottom: -70px;
  left: -55px;
  font-size: 160px;
  line-height: 0;
  mix-blend-mode: overlay;
  opacity: 0.75;
}