@charset "utf-8";
@import url("navigation.css");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');
/* GENERALES*/
#fouc {
    visibility: hidden;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 22px;
    background: #fff;
    overflow: hidden;
}
img,
svg {
  vertical-align: middle;
}
strong {
    font-weight: 700;
}
img {
  border: none;
}
header {
    position: fixed;
    z-index: 9;
    top: 0;
    width: 100%;
}
.bg-home {
/*    background: url(../img/portada.jpg) right top / cover no-repeat;*/
    background: url(../img/bg-home.jpg) center center / cover no-repeat;
    height:100vh;
    display: flex;
    align-items: center;
/*    padding-left: 60px;*/
    overflow: hidden;
}
.t-informe {
    color: #0C4B8B;
    font-size: 60px;
    line-height: 66px;
    font-weight: 700;
    margin: 0;
    padding-left: 60px;
}
.bg-home img {
    align-self: flex-end;
    right: 0;
}
.t-informe span {
    font-size: 81px;
}


.cuadro1 {
    position: absolute;
    width: 160px;
    height:160px;
    background:#57B6B2;
    right: 0;
    bottom: 0;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.cuadro2 {
    position: absolute;
    width: 160px;
    height:160px;
    background:#F5CE3E;
    right: 160px;
    bottom: 0;
}
.cuadro3 {
    position: absolute;
    width: 160px;
    height:160px;
    right: 320px;
    bottom: 0;
}
.cuadro3 path {
    fill:#6CCA98;
}
.cuadro4 {
    position: absolute;
    width: 160px;
    height:160px;
    background:#F5CE3E;
    right: 480px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cuadro4 div {
    background: #E87200;
    width: 90px;
    height: 90px;
}
.cuadro5 {
    position: absolute;
    width: 160px;
    height:160px;
    background:#57B6B2;
    right: 640px;
    bottom: 0;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.cuadro6 {
    position: absolute;
    width: 160px;
    height:160px;
    background:#EA6852;
    right: 800px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cuadro6 div {
    background: #7564A0;
    width: 90px;
    height: 90px;
}
.cuadro7 {
    position: absolute;
    width: 160px;
    height:160px;
    background:#57B6B2;
    right: 960px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cuadro7 div {
    background: #7564A0;
    width: 110px;
    height: 53.3px;
    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
}
.cuadro8 {
    position: absolute;
    width: 160px;
    height:160px;
    background:#F5CE3E;
    right: 1120px;
    bottom: 0;
}
.cuadro8 div {
    background: #E87200;
    width: 80px;
    height: 80px;
}
.cuadro8 div:nth-of-type(2) {
    margin-left: 80px;
}
.cuadro9 {
    position: absolute;
    width: 160px;
    height:160px;
    background:#6CCA98;
    right: 1280px;
    bottom: 0;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.cuadro10 {
    position: absolute;
    width: 160px;
    height:160px;
    background:#F5CE3E;
    right: 1440px;
    bottom: 0;
}

.cuadro1b {
    position: absolute;
    width: 160px;
    height:160px;
    background:#6CCA98;
    right: 0;
    bottom: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cuadro1b div {
    background: #F5CE3E;
    width: 110px;
    height: 110px;
    border-radius: 50%;
}
.cuadro2b {
    position: absolute;
    width: 160px;
    height:160px;
    background:#EA6852;
    right: 320px;
    bottom: 160px;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.cuadro3b {
    position: absolute;
    width: 160px;
    height:160px;
    background:#57B6B2;
    right: 480px;
    bottom: 160px;
}
.cuadro3b div {
    background: #F5CE3E;
    width: 160px;
    height: 160px;
    clip-path: circle(50% at 0 50%);
}
.cuadro4b {
    position: absolute;
    width: 160px;
    height:160px;
    background:#EA6852;
    right: 640px;
    bottom: 160px;
}
.cuadro4b div {
    background: #7564A0;
    width: 160px;
    height: 160px;
    clip-path: circle(50% at 100% 50%);
}



.cuadro1c {
    position: absolute;
    width: 160px;
    height:160px;
    background:#F5CE3E;
    right: 160px;
    bottom: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cuadro1c div {
    background: #E87200;
    width: 90px;
    height: 90px;
}