* {
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-weight: normal;
    list-style: none;
    box-sizing: border-box;
}

h2 {
    font-size: 3rem;
    font-weight: bold;
    transition: 0.3s;
    padding-bottom: 10px;
}

h3 {
    font-size: 1.6rem;
    color:#ce314c;
    font-weight: lighter;
    transition: 0.3s;
}

h4 {
    font-size: 1.3rem;
    transition: 0.3s;
}

h5 {
    font-size: 1.2rem;
    transition: 0.3s;
}

/************************************
                MENU
************************************/

.enlace {
    position: absolute;
    display: flex;
    padding: 20px 20px;
}

.checkbtn {
    display: none;
    float: right;
    align-items: center;
    align-content: center;
    height: 80px;
    font-size: 30px;
    color:#fff;
    padding: 25px;
    cursor: pointer;
}

#check {
    display: none;
}

.logo {
    height: 60px;
    margin: 20 0;
}

.isologo {
    color:#000;
    margin-left: 10px;
    font-size: 2rem;
    display: flex;
    align-items: center;
}

.tipo {
    color: #ce314c;
    margin-left: 10px;
    font-size: 1rem;
}

nav {
    height: 100px;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    background: #fff;
    font-family: Belanosima-Regular, sans-serif;
}

nav > ul {
    display: flex;
    height: 100px;
    float: right;
    align-items: center;
    padding: 20 0px;
}

nav > ul > li {
    display: inline-block;
    margin: 0 0;
    position: relative;
}

nav > ul > li a {
    color: #000;
    font-size: 18px;
    padding: 41px 13px 40px 13px;
    text-transform: capitalize;
}

nav > ul > li a.active {
    background:#ce314c;
}

nav > ul > li a:not(.active):hover {
    color: #fff;
    transition: 0.5s;
    background:#ed6d3e;
}

/************************************
                SUBMENU
************************************/

.submenu {
    display: none;
}

nav ul li ul {
    width: 220px;
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    position: absolute;
    top: 60px;
    padding: 14px 0px;
    visibility: hidden;
    opacity: 0;
    z-index: 10;
}

nav ul li ul a {
    display: block;
    color:#000;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    font-size: 14px;
    border-radius: 6px;
    text-transform: uppercase;
    transition: all 0.5s ease;
}

nav ul li ul a:hover {
    background: #ce314c;
    color: #fff;
}

/************************************
                ASIDE
************************************/

aside {
    width: 100%;
    letter-spacing: 2px;
    font-family: Belanosima-Regular, sans-serif;
    background-color: #ce314c;
}

aside > ul {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

aside > ul > li {
    display: inline-block;
    position: relative;
    padding: 10px 30px;
}

aside >ul> li a {
    color:#000;
}

aside > ul > li a:hover {
    color: #fff;
    transition: 0.5s;
    background-color: none;
}

/************************************
                MAIN
************************************/

.inicio {
    height: calc(100vh - 100px);
    width: 100%;
    margin: auto;
    background: url(../img/fondo2.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
}

/************************************
        ESTILOS GENERALES
************************************/

.seccActive {
    color:#fff;
}

.mesadetrabajo {
    height: calc(100vh - 100px);
    width: 90%;
    display: flex;
    flex-direction: row;
    max-width: 1200px;
    margin: auto;
    background-color: #fff;
}

.grupo {
    width: 65%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grupoan {
    width: 35%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
}

.contenedorProyecto {
    position: relative;
    margin: 5px;
    background: #e9e9e9;
    height: 250px;
    border-radius: 10px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.trabajoProyecto {
    width: 100%;
    min-height: 200px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.trabajoProyecto::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 200px;
    background: rgba(255, 255, 255, 0);
    transition: background 0.3s ease;
}

.trabajoProyecto:hover::after {
    background: rgba(0, 0, 0, 0.3);
}

.imagenProyecto {
    max-height: 200px;
    max-width: 100%;
    padding: 10px;
}

.textoProyecto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    background: #fff;
    color:#000;
    font-family: Belanosima-Regular, sans-serif;
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.empresa {
    color: #ce314c;
}


/********** div contenido **********/

.contenidoProyecto {
    width: 35%;
    font-family: Belanosima-Regular, sans-serif;
    padding: 10px;
    grid-area: contenidoProyecto;
}

.contenidoProyecto p {
    color: #000;
}

.contenidoProyectoan {
    width: 65%;
    font-family: Belanosima-Regular, sans-serif;
    padding: 10px;
    grid-area: contenidoProyecto;
}

.contenidoProyectoan p {
    color: #000;
}

.contenidoProyecto > div > div > h5 > p {
    padding-top: 18px;
}

.contenidoProyectoan > div > div > h5 > p {
    padding-top: 18px;
}

.modificadorProyecto {
    display: block;
}

.imagenesContenido {
    min-height: 300px;
}

.imgSize {
    width: 100%;
}

.contenidoElementos {
    display: none;
}

.contenidoSeleccionado {
    display: block;
}

/************************************
        ESTILOS PARTICULARES
************************************/

/********** div packaging **********/

.packaging {
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
      "packaging02 packaging01"
      "packaging04 packaging03"
      "packaging06 packaging05"
      "packaging08 packaging07";
}

    .p01 {grid-area: packaging01;}
    .p02 {grid-area: packaging02;}
    .p03 {grid-area: packaging03;}
    .p04 {grid-area: packaging04;}
    .p05 {grid-area: packaging05;}
    .p06 {grid-area: packaging06;}
    .p07 {grid-area: packaging07;}
    .p08 {grid-area: packaging08;}
    .p09 {grid-area: packaging09;}
    .p10 {grid-area: packaging10;}


/************ div logos ************/

.logos {
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      "logo02 logo01"
      "logo04 logo03"
      "logo06 logo05"
      "logo08 logo07"
      "logo10 logo09";
}

    .l01 {grid-area: logo01;}
    .l02 {grid-area: logo02;}
    .l03 {grid-area: logo03;}
    .l04 {grid-area: logo04;}
    .l05 {grid-area: logo05;}
    .l06 {grid-area: logo06;}
    .l07 {grid-area: logo07;}
    .l08 {grid-area: logo08;}
    .l09 {grid-area: logo09;}
    .l10 {grid-area: logo10;}


/*********** div publicidad ************/

.publicidad {
    grid-template-rows: repeat(5, auto);
    grid-template-areas:
      "publicidad02 publicidad01"
      "publicidad04 publicidad03"
      "publicidad06 publicidad05"
      "publicidad08 publicidad07"
      "publicidad10 publicidad09";
}

    .ip01 {grid-area: publicidad01;}
    .ip02 {grid-area: publicidad02;}
    .ip03 {grid-area: publicidad03;}
    .ip04 {grid-area: publicidad04;}
    .ip05 {grid-area: publicidad05;}
    .ip06 {grid-area: publicidad06;}
    .ip07 {grid-area: publicidad07;}
    .ip08 {grid-area: publicidad08;}
    .ip09 {grid-area: publicidad09;}
    .ip10 {grid-area: publicidad10;}


/*********** div anuncios ***********/

.anuncios {
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
      "anuncio02 anuncio01"
      "anuncio04 anuncio03"
      "anuncio06 anuncio05"
      "anuncio08 anuncio07";
}

    .a01 {grid-area: anuncio01;}
    .a02 {grid-area: anuncio02;}
    .a03 {grid-area: anuncio03;}
    .a04 {grid-area: anuncio04;}
    .a05 {grid-area: anuncio05;}
    .a06 {grid-area: anuncio06;}
    .a07 {grid-area: anuncio07;}
    .a08 {grid-area: anuncio08;}


/************ div webs ************/

.web {
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
      "web02 web01"
      "web04 web03"
      "web06 web05"
      "web08 web07";
}

    .w01 {grid-area: web01;}
    .w02 {grid-area: web02;}
    .w03 {grid-area: web03;}
    .w04 {grid-area: web04;}
    .w05 {grid-area: web05;}
    .w06 {grid-area: web06;}
    .w07 {grid-area: web07;}
    .w08 {grid-area: web08;}


/*********** div animación **********/

.animacion {
    grid-template-rows: repeat(4, auto);
    grid-template-areas:
      "animacion01"
      "animacion02"
      "animacion03"
      "animacion04";
}

    .an01 {grid-area: animacion01;}
    .an02 {grid-area: animacion02;}
    .an03 {grid-area: animacion03;}
    .an04 {grid-area: animacion04;}

/************************************
        SCROLL BAR LEFT
************************************/

div.grupo, div.grupoan {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    direction: rtl;
}

div.grupo::-webkit-scrollbar, div.grupoan::-webkit-scrollbar {
    width: 20px;
}

div.grupo::-webkit-scrollbar-track, div.grupoan::-webkit-scrollbar-track {
    background-color: #e9e9e9;
}

div.grupo::-webkit-scrollbar-thumb, div.grupoan::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 30%, rgba(233,233,233,1) 50%, rgba(237,237,237,1) 70%, rgba(255,255,255,1) 100%);
    border-radius: 10px;
    border: #e9e9e9 solid 2px;
}

div.grupo::-webkit-scrollbar-thumb:hover, div.grupoan::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(237,237,237,0.75) 30%, rgba(206, 49, 76,0.6) 50%, rgba(237,237,237,0.75) 70%, rgba(255,255,255,0.75) 100%);
}

div.grupo::-webkit-scrollbar-corner, div.grupoan::-webkit-scrollbar-corner {
    background: transparent;
}

/************************************
        SCROLL BAR RIGHT
************************************/

div.contenidoProyecto, div.contenidoProyectoan {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    direction: ltr;
}

div.contenidoProyecto::-webkit-scrollbar, div.contenidoProyectoan::-webkit-scrollbar {
    width: 20px;
}

div.contenidoProyecto::-webkit-scrollbar-track, div.contenidoProyectoan::-webkit-scrollbar-track {
    background-color: #e9e9e9;
}

div.contenidoProyecto::-webkit-scrollbar-thumb, div.contenidoProyecto::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 30%, rgba(233,233,233,1) 50%, rgba(237,237,237,1) 70%, rgba(255,255,255,1) 100%);
    border-radius: 10px;
    border: #e9e9e9 solid 2px;
}

div.contenidoProyecto::-webkit-scrollbar-thumb:hover, div.contenidoProyectoan::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(237,237,237,0.75) 30%, rgba(206, 49, 76,0.6) 50%, rgba(237,237,237,0.75) 70%, rgba(255,255,255,0.75) 100%);
}

div.contenidoProyecto::-webkit-scrollbar-corner, div.contenidoProyectoan::-webkit-scrollbar-corner {
    background: transparent;
}

/************************************
            CONTACTO
************************************/

#contactos {
    margin: auto auto;
    padding: 0px 0px;
    font-family: Belanosima-Regular, sans-serif;
}

.contactos {
    background: #ce314c;
    color:#000;
    font-family: Belanosima-Regular, sans-serif;
    text-align: center;
    margin: 0 auto;
    padding: 0px 0px;
}

.blanco {
    color: #fff;
}

.textoContactos {
    display: block;
}

.contenedorContactos {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
}

.s1 ,.s2, .s3, .s4 {
    text-align: center;
}

.centrarTexto a {
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

.centrarTexto a:hover {
    color: #fff;
}

.textoContacto {
    padding: 0 40px;
    text-align: center;
}

.centrado {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}



/************************************
            FOOTER
************************************/

.social-networks {
    font-family: Belanosima-Regular, sans-serif;
    font-weight: 200;
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: #ce314c;
}
  
.social-networks a {
    color: #fff;
    display: flex;
    align-content: center;
    align-items: center;
    padding: 5px;
}

.social-networks a:hover {
    color: #000;
}

/************************************
            TIPOGRAFIA
************************************/

@font-face {
    font-family: Belanosima-Regular;
    src: url(../Belanosima-Regular.ttf);
}




/************************************
            MEDIA MAX 1054px
************************************/

@media (max-width: 1054px){

h2 {
    font-size: 2.8rem;
}
    
h3 {
    font-size: 1.55rem;
}
        
h4 {
    font-size: 1.2rem;
}

h5 {
    font-size: 1.15rem;
}
    
/*********** div menú **********/

.inicio {
    height: calc(100vh - 100px);
    background: #fff;
}
        
.enlace {
    padding: 15px 15px;
}
    
.logo {
    height: 50px;
    margin: 15 0;
}
    
.isologo {
    margin-left: 10px;
    font-size: 24px;
}
    
nav {
    height: 80px;
}
    
nav > ul {
    height: 80px;
    padding: 20px 0;
}

/*********** div submenú **********/ 

nav ul li ul {
    top: 48px;
    padding: 14px 0px;
}
    
nav > ul > li a {
    padding: 32px 13px 31px 13px;
}
    
nav ul li a {
    font-size: 16px;
}
    
nav ul li ul:before {
    left: 34px;
}
    
aside > ul > li {
    padding: 10px 20px;
}

/*********** div contenido **********/        
        
.grupo {
    width: 60%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grupoan {
    width: 45%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
}

.mesadetrabajo {
    width: 100%;
}

.imagenProyecto {
    max-height: 200px;
    padding: 5px;
}

.contenidoProyecto {
    width: 50%;
    padding: 10px 10px 10px 16px;
}
        
.contenidoProyectoan {
    width: 55%;
}

.contenidoProyecto > div > div > h5 > p,
.contenidoProyectoan > div > div > h5 > p {
    padding-top: 16px;
}
}

/************************************
            MEDIA MAX 858px
************************************/

@media (max-width: 858px){

h2 {
    font-size: 2.5rem;
}
        
h3 {
    font-size: 1.5rem;
}
        
h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 1.1rem;
}

/*********** div menú **********/

.checkbtn {
    display: block;        
}
    
nav {
    height: 80px;
}
    
nav > ul {
    flex-direction: column;
    margin: 0 0;
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #ce314c;
    top: 80px;
    left: -100%;
    text-align: top;
    transition: all 0.5s ease; 
    text-align: center; 
    z-index: 10; 
}

nav > ul > li {
    margin: 20px 0px;
}
    
nav > ul > li a {
    font-size: 20px;
}

/*********** div submenú **********/        

nav ul li ul {
    display: none;
    height: 310px;
    top: 20px;
    position: relative;
    transition: all 0.3s ease;
}

nav ul li:hover ul {
    display: flex;
    visibility: visible;
    opacity: 1;
    flex-direction: column;
    justify-items: center;
}

nav ul li ul:before {
    top: -12px;
    left: 120px;
}

nav > ul > li a.active {
    color:#fff;
}

nav > ul > li a.active:hover {
    color:#ed6d3e;
}
    
li a.active {
    background:#ed6d3e;
    text-shadow: 1px 1px 4px #000;
}
    
li a:hover, li a.active {
    color: #000;
}
    
nav > ul > li a:not(.active):hover {
    background:#ce314c;
}

#check:checked ~ ul {
    left: 0;
}

.submenu {
    display: flex;
}

aside {
    height: 37px;
}
    
aside > ul {
    display: none;
}

.grupo {
    width: 50%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.grupoan {
    width: 45%;
}

/*********** div grid **********/  

.packaging {
    grid-template-rows: repeat(8, auto);
    grid-template-areas:
        "packaging01" "packaging02" "packaging03" "packaging04" "packaging05" "packaging06" "packaging07" "packaging08";
}

.logos {
    grid-template-rows: repeat(10, auto);
    grid-template-areas:
        "logo01" "logo02" "logo03" "logo04" "logo05" "logo06" "logo07" "logo08" "logo09" "logo10";
}

.publicidad {
    grid-template-rows: repeat(10, auto);
    grid-template-areas:
        "publicidad01" "publicidad02" "publicidad03" "publicidad04" "publicidad05" "publicidad06" "publicidad07" "publicidad08" "publicidad09" "publicidad10";
}

.anuncios {
    grid-template-rows: repeat(8, auto);
    grid-template-areas:
        "anuncio01" "anuncio02" "anuncio03" "anuncio04" "anuncio05" "anuncio06" "anuncio07" "anuncio08";
}

.web {
    grid-template-rows: repeat(8, auto);
    grid-template-areas:
        "web01" "web02" "web03" "web04" "web05" "web06" "web07" "web08";
}
}


/************************************
            MEDIA MAX 600px
************************************/

@media (max-width: 600px){

h2 {
    font-size: 2.2rem;
}
    
h3 {
    font-size: 1.4rem;
}

h5 {
    font-size: 1rem;
}

.contenedorProyecto {
    margin: 5px;
    height: 210px;
}

.trabajoProyecto {
    min-height: 170px;
}

.trabajoProyecto::after {
    height: 170px;
    min-height: 170px;
}

.imagenProyecto {
    max-height: 170px;
    padding: 5px;
}

.contenidoProyecto {
    width: 50%;
    padding: 10px 10px 10px 16px;
}
        
.contenidoProyectoan {
    width: 55%;
}

.textoProyecto {
    height: 40px;
    padding: 2px;
}

.go-top-container {
    bottom: 2rem;
    right: 2rem;
}

.show .go-top-button {
    width: 3rem;
    height: 3rem;
}

@keyframes popup {
    0%{
        width: 0rem;
        height: 0rem;
    }
    50%{
        width: 4.5rem;
        height: 4.5rem;
    }
    100%{
        width: 3rem;
        height: 3rem;
    }
}
}

/************************************
            MEDIA MAX 500px
************************************/

@media (max-width: 500px){

h2 {
    font-size: 1.7rem;
}
        
h3 {
    font-size: 1.2rem;
}
        
h4 {
    font-size: 1rem;
}

h5 {
    font-size: 0.9rem;
}

.contenidoProyecto {
    padding: 10px;
}

.contenidoProyecto > div > div > h5 > p,
.contenidoProyectoan > div > div > h5 > p {
    padding-top: 10px;
}
}

/************************************
            MEDIA MAX 400px
************************************/

@media (max-width: 400px){

h2 {
    font-size: 1.6rem;
}
    
h3 {
    font-size: 1.1rem;
}
    
h4 {
    font-size: 0.9rem;
}

h5 {
    font-size: 0.85rem;
}

.contenidoProyectoan {
    width: 55%;
    padding: 10px;
}
}