*{padding:0;
margin:0;
}
*{ 
	box-sizing: border-box;
	font-family: "Montserrat", sans-serif;
}
html, body {
  scroll-behavior: smooth;
       /*Comenta la línea (o dale el valor 'auto' a scroll behavior )
       para probar la diferencia con y sin scroll suavizado*/
}
/*-------------------INICIO ENTRADA MENU OCULTO------------------*/

.slide-in-left {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-12-16 9:25:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}


/*-------------------FIN ENTRADA MENU OCULTO------------------*/
/*-------------------INICIO FADE IN------------------*/
.fade-in {
	-webkit-animation: fade-in 0.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 0.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2025-3-13 11:31:34
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*-------------------FIN FADE IN------------------*/
/*-------------------INICIO EFECTO SUBRAYADO MENÚ------------------*/
.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-1-30 15:4:29
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
/*-------------------FIN EFECTO SUBRAYADO MENÚ------------------*/


.parte_webs, .parte_wordpress, .parte_tres_d, .parte_universidad, .parte_contacto {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid #cfd4da;
}
.parte_wordpress {
    padding-bottom: 0;
}
.parte_wordpress {
    border-bottom: 1px solid white;
}
.parte_webs {
    padding-bottom: 20px;
}
h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;  
    margin-bottom: 50px;
    width: 100%;
    font-size: 30px;
    line-height: 35px;
    color: #35343c;
    font-weight: bold !important;
}
h2 .adorno {
    width: 25px; 
    height: 1px;
    background: #35343c;
    margin-right: 20px;
    margin-left: 20px;
}
.parte_trabajos h2 {
    margin-bottom: 40px;
}
.parte_webs h2, .parte_wordpress h2, .parte_tres_d h2 {
    margin-bottom: 20px;
}
.parte_universidad h2 {
    margin-bottom: 35px;
}
.parte_contacto h2 {
    margin-bottom: 35px;
}
.cabecera {
    width: 100%;
    height: 380px;
    background-image: url(../img/ordenador.jpg);
    background-position: center;
    background-repeat: no-repeat;
}
.cabecera .nombre {
    width: 100%;
    height: 207px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.cabecera .nombre h1 {
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    color: white;
    font-weight: 100;
    font-family: 'Norican', sans-serif;  
    margin-left: 0;
}
.cabecera a {
    font-size: 15px;
    line-height: 20px;
    color: #10abfb;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 0;
    text-decoration: none;
}
.cabecera a i {
    font-size: 14px;
    color: #ca6fe6;
    margin-right: 6px;
}
.cabecera a:hover{
    color: #ca6fe6;
    text-decoration: none;
}
header {
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    background: transparent;
    padding-top: 5px;
    padding-bottom: 5px;
}
.navbar {
    margin-bottom: 0;
    min-height: auto;
}
header nav ul li {
    margin-right: 15px;
    margin-left: 15px;
}
header nav ul li a {
    font-size: 16px;
    line-height: 16px;
    color: #10abfb;
    text-decoration: none;
    font-weight: 600;
}
header nav ul li a i {
    font-size: 15px;
}
header nav ul li a:hover {
    color: #ca6fe6;
    text-decoration: none;
}
header nav ul li a:hover i {
    color: #ca6fe6;
}
header nav ul li:nth-of-type(1) a {
  color: #ca6fe6;
}
header nav ul li a span {
  display: none;
  width: 100%;
  height: 1px;
  background: #ca6fe6;
}
header nav ul li a:hover span {
  display: block;
}
header nav ul li a .invisible {
  display: block;
  width: 100%;
  height: 1px;
  background: transparent;
}
header nav ul li a:hover .invisible {
  display: none;
}
header .cabecera_moviles .alca {
        padding: 3px;
        padding-top: 5px;
        width: 27px;
        height: 37px;
        display: grid;
        grid-template: 1fr 1fr 1fr / 1fr;
        grid-row-gap: 3px;
        background-color: white;
        color: #fff;
        border: 1px solid black;
        border-radius: 10px;
        margin-right: 40px;
    }
 header .cabecera_moviles .alcach {
        background-color: rgb(2, 9, 74);
        margin: 0 auto;
        width: 70%;
        height: 5px;
}
header .cabecera_moviles {
    display: none;
}
header .cabecera_moviles h1 {
    margin-bottom: 0;
}
header .menu_oculto {
    display: none;
}
header a {
    text-decoration: none;
}
header a p {
    margin: 0;
    text-align: center;
    font-size: 23px;
    line-height: 23px;
    color: #ca6fe6;
    font-weight: 100;
    font-family: 'Norican', sans-serif;
    display: none;   
}
header .grande .josusanchez {
    top: 3px;
    right: 30px;
    z-index: 10;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
header .grande .josusanchez a {
    padding: 2px 10px 8px 10px;
}
header .grande .josusanchez a:hover {
    text-decoration: none;
}
header .grande .josusanchez a p {
    margin: 0;
    text-align: center;
    font-size: 21px;
    line-height: 21px;
    color: #ca6fe6;
    font-weight: 100;
    font-family: 'Norican', sans-serif;
}
/*---------------------------------------INICIO ANIMACIONES BORDER MOVIMIENTO HOVER----------------------------------------------------------------------------*/

:root {
  --body-bg-color: #927251;
  --text-color: #927251;
  --hr-color: #927251;
  --transition-duration: 0.3s;
  --transition-delay: 0.2s;
  --red: #927251;
}
header .grande .josusanchez a {
  position: relative;
}
header .grande .josusanchez .border {
  position: absolute;
  left: 0;
  transition: transform var(--transition-duration) ease-in-out;
  border: var(--bs-border-width) var(--bs-border-style) !important
}
header .grande .josusanchez .border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) !important;
}
header .grande .josusanchez .border-bottom {
  border-top: var(--bs-border-width) var(--bs-border-style) !important;
}
header .grande .josusanchez .border-left {
  
}
header .grande .josusanchez .border-right {
  
}
header .grande .josusanchez .border-top,
header .grande .josusanchez .border-bottom {
  width: 100%;
  height: 1px;
  transform: scaleX(0);
}
header .grande .josusanchez .border-top,
header .grande .josusanchez .border-bottom {
  color: #ca6fe6;
}
header .grande .josusanchez .border-left,
header .grande .josusanchez .border-right {
  width: 1px;
  height: 100%;
  transform: scaleY(0);
}
header .grande .josusanchez .border-right {
  border: 1px solid #ca6fe6 !important;
}
header .grande .josusanchez .border-left {
  border: 1px solid #ca6fe6 !important;
}
header .grande .josusanchez .border-top,
header .grande .josusanchez .border-left,
header .grande .josusanchez .border-right {
  top: 0;
}
header .grande .josusanchez .border-left,
header .grande .josusanchez .border-right {
  top: -1px;
}
header .grande .josusanchez .border-top {
  top: -2px;
}
header .grande .josusanchez .border-bottom {
  bottom: 0;
  transform-origin: bottom right;
}
header .grande .josusanchez .border-top {
  transform-origin: top left;
}
header .grande .josusanchez .border-left {
  transform-origin: bottom left;
}
header .grande .josusanchez .border-right {
  left: auto;
  right: 0;
  transform-origin: top right;
}
header .grande .josusanchez:hover .border-top,
header .grande .josusanchez:hover .border-bottom {
  transform: scaleX(1);
}
header .grande .josusanchez:hover .border-left,
header .grande .josusanchez:hover .border-right {
  transform: scaleY(1);
}
header .grande .josusanchez:hover .border-right {
  transition-delay: var(--transition-delay);
}
header .grande .josusanchez:hover .border-bottom {
  transition-delay: calc(var(--transition-delay) * 2);
}
header .grande .josusanchez:hover .border-left {
  transition-delay: calc(var(--transition-delay) * 3);
}

/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.wrapper .acceso .entrar[data-animation="diagonal"] .border-left {
  transform-origin: top left;
}

.wrapper .acceso .entrar[data-animation="diagonal"] .border-right,
.wrapper .acceso .entrar[data-animation="diagonal"] .border-bottom {
  transform-origin: bottom right;
}

.wrapper .acceso .entrar[data-animation="diagonal"] a:hover [class^=border]{
  transition-delay: 0s;
}

/*--------------------------------------------FIN ANIMACIONES BORDER MOVIMIENTO HOVER--------------------------------------------------*/
.trabajos {
    background: black;
    padding-top: 25px;
}
.bloque_trabajos {
    background: black;
    padding-bottom: 40px;
    padding-top: 25px;
}
.bloque_trabajos h2 {
    text-align: center;
    font-size: 25px;
    line-height: 25px;
    color: white;
    font-weight: 300 !important;
    font-family: "Montserrat", sans-serif !important;
    margin-bottom: 0;
}
.trabajos {
    padding-left: 100px;
    padding-right: 100px;
}
.trabajos ul {
    width: 100%;
    padding-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    list-style: none;
    flex-wrap: wrap;
}
.trabajos ul li {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    width: 30%;
    padding-top: 3px;
    padding-bottom: 3px;
    border-top: 1px solid #10abfb;
    border-bottom: 1px solid #10abfb;
}
.trabajos ul li:hover {
    border-top: 1px solid #ca6fe6;
    border-bottom: 1px solid #ca6fe6;
}
.trabajos ul li a {
    text-decoration: none;
}
.trabajos ul li a .imagen {
    overflow: hidden;
    position: relative;
    height: 100%;
}
.trabajos ul li a .imagen img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/*PARA QUE LA IMAGEN QUEDE DENTRO DE UN DIV  DETERMINADO Y SI SOBRA ALGO NO SE VEA*/
/*PARA EL EFECTO ZOOM PONEMOS LOS TRANSITION Y LOS TRANSFORM, SIN OLVIDAR EL OVERFLOW:HIDDEN EN EL DIV QUE CONTIENE LA FOTO */

@supports(object-fit: cover) {
    .trabajos ul li a .imagen img{
	  cursor: pointer;
      object-fit: cover;
      object-position: center center;
        
        
      -webkit-transition:all .9s ease; /* Safari y Chrome */
      -moz-transition:all .9s ease; /* Firefox */
      -o-transition:all .9s ease; /* IE 9 */
      -ms-transition:all .9s ease; /* Opera */
    }
}

 .trabajos ul li a:hover .imagen img{
      -webkit-transform:scale(1.05);
      -moz-transform:scale(1.05);
      -ms-transform:scale(1.05);
      -o-transform:scale(1.05);
      transform:scale(1.05);
}
/*-----------------------*/
.trabajos ul li a p {
    font-size: 17px;
    line-height: 17px;
    color: #10abfb;
    font-weight: 300;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    background: black;
    padding: 5px 10px;
    margin-top: 0;
    margin-bottom: 0;
}
.trabajos ul li a:hover p {
    color: #ca6fe6;
}
.trabajos ul li a .imagen .capa {
    z-index: 7;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #10abfb;
    opacity: 0.3;
}
.trabajos ul li a .imagen .icono {
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.trabajos ul li a .imagen .icono i {
    font-size: 28px;
    color: black;
}
ul.pagination {
    padding-left: 0;
}
ul.pagination li {
    margin-left: 5px;
    margin-right: 5px;
}
ul.pagination li a {
    background: black;
    border-radius: 50%;
    width: 29px;
    height: 29px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
ul.pagination li.active a {
    background: black;
}
ul.pagination .page-item:last-child .page-link, ul.pagination .page-item:first-child .page-link {
    border-radius: 50%;
}
ul.pagination li a {
    border: 1px solid #10abfb;
    font-size: 17px;
    line-height: 17px;
    font-weight: 400;
}
ul.pagination li a span {
    font-size: 24px;
    line-height: 18px;
    font-weight: 300;
    padding-bottom: 3px;
}
ul.pagination li a:hover {
    color: #ca6fe6;
    border: 1px solid #ca6fe6;
    background: black;
}
ul.pagination li.active a {
    border: 1px solid white;
}
ul.pagination li.active a:hover {
    color: white;
    border: 1px solid white;
}
.bloque_webs {
    border-top: 1px solid #0a125d;
    background: black;
    padding-top: 50px;
    padding-left: 130px;
    padding-right: 130px;
}
.bloque_webs ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    list-style: none;
    flex-wrap: wrap;
    padding-top: 25px;
}
.bloque_webs ul li {
    width: 40%;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 30px;
}
.bloque_webs ul li a:hover .imagen {
    background: #0a125d;
}
.bloque_webs ul li .imagen .info {
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.bloque_webs ul li .imagen .info p {
    font-size: 17px;
    line-height: 17px;
    color: white;
    font-weight: 300;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
    background: #0a125d;
    padding: 5px 10px;
}
.bloque_webs ul li .imagen .info i {
    font-size: 28;
    color: white;
    margin-right: 5px;
}
.bloque_webs ul li a:hover .imagen p {
    color: #ca6fe6;
}
.bloque_webs ul li a:hover .imagen i {
    color: #ca6fe6;
}
.parte_webs, .parte_wordpress, .parte_universidad {
    background: #f6f6f8;
}
.parte_wordpress {
    background: white;
}
.parte_webs .webs, .parte_wordpress .webs {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 40px;
}
.parte_webs a, .parte_wordpress a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 30%;
    text-decoration: none;
    margin: 0 30px 15px 30px;
    border: 1px solid #f6f6f8;
}
.parte_webs a {
    width: 33%;
    margin: 0 40px 40px 40px;
}
.parte_wordpress a {
    border: 1px solid #cfd4da;
    box-shadow: 7px 7px 0px 0px #cfd4da;
    background: #e9e9e9;
    align-self: stretch;
}
/*------------Inicio Efecto iconos wordpress---------------*/
.parte_wordpress a {
    position: relative;
}
.parte_wordpress a p, .parte_wordpress a span {
    transition: transform 0.6s ease-out;
}
.parte_wordpress a span {
    position: absolute;
    top: 300px;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-30%);
    z-index: -1;
}
.parte_wordpress a span i {
    font-size: 60px; 
    color: #02094a;
}
.parte_wordpress a:hover p {
    transform: translateY(30%);
    z-index: -1;
}
.parte_wordpress a:hover span {
    z-index: 5;
}
.parte_wordpress a:hover span,
.parte_wordpress[data-animation] a:hover span {
  transform: none;
}
.parte_wordpress[data-animation="to-top"] a span {
  transform: translateY(30%);
}
/*------------Fin Efecto iconos wordpress---------------*/
.parte_wordpress a:hover {
    border: 1px solid #02094a;
    box-shadow: 7px 7px 0px 0px #02094a;
}
.parte_webs p.parallax {
    font-size: 26px;
    line-height: 31px;
    color: #35343c;
    font-weight: 400;
    text-align: center;
    margin-bottom: 30px;
}
.parte_webs a.parallax {
    display: block;
    margin: 0 auto;
}
.parte_webs span.rayaparallax {
    display: block;
    width: 800px;
    height: 1px;
    background:#35343c;
    margin-top: 50px;
    margin-bottom: 30px;
}
.parte_webs a.parallax {
    border: 1px solid rgb(2, 9, 74);
    padding: 10px;
}
.parte_webs a.parallax:hover {
    border: 1px solid #ca6fe6;
}
/*------Inicio Efecto iconos web----------*/

.parte_webs a {
    position: relative;
}
.parte_webs a p, .parte_webs a span {
    transition: transform 0.6s ease-out;
}
.parte_webs a span {
    position: absolute;
    top: 220px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-30%);
    z-index: -1;
    background: #cfd4da;
    border: 1px solid white;
    width: 140px;
    height: 97px;
    margin-top: 10px;
}
.parte_webs a span i {
    font-size: 47px; 
    color: #02094a;
}
.parte_webs a:hover p {
    transform: translateX(30%);
    z-index: -1;
}
.parte_webs a:hover span {
    z-index: 5;
}
.parte_webs a:hover span,
.parte_webs[data-animation] a:hover span {
  transform: none;
}
.parte_webs[data-animation="to-right"] a span {
  transform: translateX(30%);
}

/*------Fin Efecto iconos web----------*/

.parte_webs a:hover {
    background: #e5e9ed;
    border: 1px solid #cfd4da;
    transition: all 0s;
}
.parte_webs a p, .parte_wordpress a p {
    font-size: 22px;
    line-height: 27px;
    color: #35343c;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
    text-shadow: 0 0 0.3em white, 0 0 0.3em white;
}
.parte_webs a p {
    top: 220px;
    right: 40px;
    z-index: 5;
    font-size: 17px;
    line-height: 22px;
    color: #35343c;
    background: #cfd4da;
    border: 1px solid white;
    font-weight: bold;
    margin-top: 10px;
    padding: 10px 10px;
    width: 140px;
    text-shadow: 0 0 0.3em white, 0 0 0.3em white;
}
.parte_webs a:hover p, .parte_wordpress a:hover p {
  color: #2a498e;
}
.parte_ventana {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
.ventana {
    width: 100%;
    height: 360px;
    background-attachment: fixed;
    top: 0px;
    left: 0px;
    background-image: url(../img/josu-portfolio-patio-tbk.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto;
    position: relative;
    border-right: 1px solid white;
}
.ventana .ondulacion {
    width: 100%;
    height: 19px;
    top: 0;
    left: 0;
    z-index: 5;
    background-image: url(../img/ondulacion.png);
    background-position: 0 0;
    background-repeat: repeat-x;
}
.ventana .ondulacion_abajo {
    width: 100%;
    height: 19px;
    bottom: 0;
    left: 0;
    z-index: 5;
    background-image: url(../img/ondulacion_abajo.png);
    background-position: 0 0;
    background-repeat: repeat-x;
}
.parte_tres_d .museo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-right: 150px;
    padding-left: 150px;
    margin-bottom: 15px;
}
.parte_tres_d .fotos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}
/*-----------------------------------------INICIO EFECTO SCROLL--------------------------------*/

.animado{
    opacity:0;
    transition: all 2s;
}


.mostrarArriba{
    animation: mostrarArriba 2s;
}

@keyframes mostrarArriba{
    0%{
        transform: translateY(120px);
    }
    100%{
        transform: translateY(0);
    }
    
}

/*-----------------------------------------FIN EFECTO SCROLL--------------------------------*/
/*-----------------------------------------INICIO EFECTO SCROLL--------------------------------*/

.animado_dos{
    opacity:0;
    transition: all 4s;
}


.mostrarArriba_dos{
    animation: mostrarArriba_dos 4s;
}

@keyframes mostrarArriba_dos{
    0%{
        transform: translateY(400px);
    }
    100%{
        transform: translateY(0);
    }
    
}

/*-----------------------------------------FIN EFECTO SCROLL--------------------------------*/
/*-----------------------------------------INICIO EFECTO SCROLL--------------------------------*/

.animado_tres{
    opacity:0;
    transition: all 2s;
}


.mostrarArriba_tres{
    animation: mostrarArriba_tres 2s;
}

@keyframes mostrarArriba_tres{
    0%{
        transform: translateY(300px);
    }
    100%{
        transform: translateY(0);
    }
    
}

/*-----------------------------------------FIN EFECTO SCROLL--------------------------------*/
/*-----------------------------------------INICIO EFECTO SCROLL--------------------------------*/

.animado_cuatro{
    opacity:0;
    transition: all 2s;
}


.mostrarArriba_cuatro{
    animation: mostrarArriba_cuatro 2s;
}

@keyframes mostrarArriba_cuatro{
    0%{
        transform: translateY(400px);
    }
    100%{
        transform: translateY(0);
    }
    
}

/*-----------------------------------------FIN EFECTO SCROLL--------------------------------*/

.parte_tres_d .museo a {
    width: 33.3%;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    position: relative;
}
.parte_tres_d .museo a .capa {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: none;
    background: rgb(255,255,255);
    background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0.875770376509979) 80%);  
    border: 1px solid #cfd4da;
}
.parte_tres_d .museo a:hover .capa {
    display: block;
}
.parte_tres_d .museo a i {
    position: absolute;
    top: 7px;
    left: 7px;
    z-index: 7;
    color: white;
    font-size: 24px;
}
.parte_tres_d .museo a:hover i {
    color: #02094a;
}
.parte_tres_d .museo p, .parte_universidad p {
    font-size: 26px;
    line-height: 31px;
    color: #35343c;
    font-weight: 400;
    text-align: center;
}
.parte_universidad p {
    margin-bottom: 30px;
}
.parte_tres_d .museo p {
    margin-bottom: 40px;
}
.parte_tres_d .museo .video {
    width: 50%;
    margin-top: 40px;
}
.parte_tres_d .museo .video .contenido_video {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
.parte_tres_d .museo .video .contenido_video i {
    color: #cfd4da;
    font-size: 70px;
}
.parte_tres_d .museo .video .contenido_video .camara {
    width: 80%;
}
.carousel {
    max-width: 1000px !important;
}
.carousel .titular {
    width: 100%;
    z-index: 5;
    bottom: 30px;
    left: 0;
    padding-right: 30px;
    padding-left: 30px;
}
.carousel p {
    font-size: 30px;
    line-height: 35px;
    color: #35343c;
    font-weight: bold;
    text-shadow:
       0 0 0.2em white,
       0 0 0.2em white;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 2rem;
    height: 2rem;
    opacity: 1 !important;
    border: 1px solid white;
    background: #35343c;
    box-shadow: 0 0 15px white;
}
.carousel-control-next, .carousel-control-prev {
    opacity: 1 !important;
}
.carousel-control-prev .oculto, .carousel-control-next .oculto {
    width: 2rem;
    height: 2rem;
    background: #2a498e;
    box-shadow: 0 0 15px white;
    border: 1px solid white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    display: none;
}
.carousel-control-next .oculto-dos {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-control-next:hover .oculto, .carousel-control-prev:hover .oculto {
    display: block;
}
.carousel-control-next:hover .carousel-control-next-icon, .carousel-control-prev:hover .carousel-control-prev-icon {
    display: none;
}
.parte_universidad .logo_uni {
    margin-bottom: 30px;
}
.parte_universidad .logo_uni img {
    width: 70%;
    display: block;
    margin: 0 auto;
}
.parte_contacto {
    padding-left: 450px;
    padding-right: 450px;
}
form {
    width: 100%;
}
#nombre, #email, #mensaje {
    width: 100%;
    height: 40px;
    background-color: rgba(0,0,0,0);
    color: #35343c;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 25px;
    font-weight: 400;
    border: 1px solid #cfd4da;
    padding-left: 10px;
}
#mensaje {
    height: 200px;
}
#noValid1, #noValid2, #noValid3, #noValid4 {
    display: none;
    font-size: 22px;
    color: #ca6fe6;
    text-align: center;
    margin-bottom: 20px;
}
form ul li {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
form a {
    text-decoration: none;
    font-size: 22px;
    line-height: 27px; 
    color: #35343c;
    font-weight: 400;
    border: 1px solid #cfd4da;
    border-radius: 5px;
    padding: 10px 30px;
}
/*---------Inicio Efecto botón envío------------*/
:root {
  --body-bg-color: #1a1c1d;
  --text-color: #02094a;
  --hr-color: #26292a;
  --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);
  --red: #e74c3c;
}
hr {
  border-color: var(--hr-color);
  margin: 20px 0;
}
ul#envio {
  padding-left: 0;
}
form a {
  position: relative;
  display: block;
  padding: 10px 40px;
  overflow: hidden;
  transition: color 0s 0.25s var(--timing-function);
}

form a::before,
form a::after {
  position: absolute;
  left: 0;
  width: 100%;
}

form a::before {
  content: '';
  top: 50%;
  transform: translate(-101%, -50%);
  height: 50%;
  z-index: 1;
  background: var(--text-color);
  transition: transform 0.5s var(--timing-function);
}

form a::after {
  content: attr(data-icon);
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-color);
  opacity: 0;
  transition: opacity 0s 0.25s var(--timing-function);
}
form a:hover {
  color: transparent;
}
form a:hover::before {
  transform: translate(101%, -50%);
}

form a:hover::after {
  opacity: 1;
}
/* ANIMATIONS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
form[data-animation="to-left"] a::before {
  transform: translate(101%, -50%);
}

/*----------Fin Efecto botón envío------------*/
footer {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    padding-right: 450px;
    padding-left: 450px;
    background: #f6f6f8;
}
footer p, footer a {
    font-size: 20px;
    line-height: 25px;
    color: #35343c;
    font-weight: 500;
    margin-bottom: 0;
}
footer p.titulo {
    font-weight: bold;
}
footer .borde {
    border: 1px solid #35343c;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
footer .nombres p {
    margin-top: 4px;
    margin-bottom: 4px;
}
footer .borde i {
    font-size: 40px;
    color: #35343c;
}
footer .borde .datos p i {
    font-size: 22px;
    color: #35343c;
    padding-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}
footer .borde .datos p:nth-of-type(1) i:nth-of-type(1) {
    margin-left: 3px;
}
footer .borde .datos a {
    margin-top: 8px;
    margin-bottom: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    text-decoration: none;
}
footer .borde .datos .email a {
    text-decoration: underline;
}
footer .borde .datos .email a i {
    text-decoration: none;
}
footer .borde .datos .email a:hover {
    text-decoration: none;
    color: rgb(2, 9, 74);
}
footer .parte_datos {
    background: white;
}
footer .datos {
    padding-left: 10px;
}
footer .icono_direccion {
    height: 80px;
    border-right: 1px solid #35343c;
    padding-right: 10px;
}
#inicio, #trabajos, #webs, #wordpress, #tres_d, #universidad, #contacto {
  top: -43px;
  left: 0;
  width: 100%;
  height: 1px;
  z-index: -1;
}
#trabajos {
  top: -90px;  
}
#inicio {
    top: -1000px;
}
iframe {
    height: 300px;
}
.mensaje_final {
    background: black;
    padding-top: 40px;
    padding-bottom: 40px;
}
.mensaje_final h2 {
    color: white;
    font-size: 28px;
    line-height: 33px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 130px;
    margin-top: 40px;
}
.mensaje_final p {
    color: white;
    font-size: 24px;
    line-height: 29px;
    font-weight: 400;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
.mensaje_final .volver {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-top: 40px;
    text-decoration: none;
}
.mensaje_final .volver a {
    color: rgb(2, 9, 74);
    background: white;
    font-size: 18px;
    line-height: 23px;
    font-weight: 400;
    text-align: center;
    padding: 5px 10px;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #ca6fe6;
}
.mensaje_final a:hover {
    color: #ca6fe6;
    background: rgb(2, 9, 74);
    border: 1px solid white;
}
/*-----------------------------INICIO RESPONSIVO----------------------*/

@media (max-width: 1950px){
    .parte_webs a p {
       top: 215px;
    }
    .parte_webs a span {
       top: 215px;
    }
}
@media (max-width: 1900px){
    .parte_webs a p {
       top: 208px;
    }
    .parte_webs a span {
       top: 208px;
    }
}
@media (max-width: 1850px){
    .parte_contacto {
       padding-left: 425px;
       padding-right: 425px;
    }
    footer {
       padding-right: 425px;
       padding-left: 425px;
    }
    .ventana {
       background-position: -30px 0;
    }
    .parte_wordpress a span {
       top: 290px;
    }
    .parte_webs a p {
       top: 199px;
    }
    .parte_webs a span {
       top: 199px;
    }
}
@media (max-width: 1800px){
    .parte_contacto {
       padding-left: 400px;
       padding-right: 400px;
    }
    footer {
       padding-right: 400px;
       padding-left: 400px;
    }
    .parte_tres_d .museo .video {
       width: 54%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -60px 0;
    }
    .parte_wordpress a span {
       top: 260px;
    }
    .parte_webs a p {
       top: 190px;
    }
    .parte_webs a span {
       top: 190px;
    }
    .parte_trabajos a h3 {
       margin-top: 25px;
       margin-bottom: 25px;
    }
}
@media (max-width: 1750px){
    .parte_contacto {
       padding-left: 375px;
       padding-right: 375px;
    }
    footer {
       padding-right: 375px;
       padding-left: 375px;
    }
    .parte_tres_d .museo .video {
       width: 56%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -90px 0;
    }
    .parte_wordpress a span {
       top: 260px;
    }
    .parte_webs a p {
       top: 181px;
    }
    .parte_webs a span {
       top: 181px;
    }
}
@media (max-width: 1700px){
    .parte_contacto {
       padding-left: 350px;
       padding-right: 350px;
    }
    footer {
       padding-right: 350px;
       padding-left: 350px;
    }
    .parte_tres_d .museo .video {
       width: 58%;
       margin-top: 40px;
    }
    .parte_tres_d .museo {
       padding-right: 100px;
       padding-left: 100px;
    }
    .ventana {
       background-position: -120px 0;
    }
    .parte_wordpress a span {
       top: 310px;
    }
    .parte_webs a, .parte_wordpress a {
       width: 35%;
    }
    .parte_webs a p {
       top: 209px;
    }
    .parte_webs a span {
       top: 209px;
    }
}
@media (max-width: 1650px){
    .parte_contacto {
       padding-left: 325px;
       padding-right: 325px;
    }
    footer {
       padding-right: 325px;
       padding-left: 325px;
    }
    .parte_tres_d .museo {
       padding-right: 7%;
       padding-left: 7%;
    }
    .ventana {
       background-position: -150px 0;
    }
    .parte_wordpress a span {
       top: 310px;
    }
    .parte_webs a p {
       top: 200px;
    }
    .parte_webs a span {
       top: 200px;
    }
    h1 .title {
       font-size: 70px;
    }
    h1 .descripcion {
       font-size: 40px;
       color: white;
    }
}
@media (max-width: 1600px){
    .parte_contacto {
       padding-left: 300px;
       padding-right: 300px;
    }
    footer {
       padding-right: 300px;
       padding-left: 300px;
    }
    .parte_tres_d .museo {
       padding-right: 5%;
       padding-left: 5%;
    }
    .ventana {
       background-position: -180px 0;
    }
    .parte_wordpress a span {
       top: 300px;
    }
    .parte_webs a p {
       top: 191px;
    }
    .parte_webs a span {
       top: 191px;
    }
    .parte_trabajos .trabajos a {
       width: 29%;
    }
    .foreground {
       right: 0;
    }
}
@media (max-width: 1550px){
    .parte_contacto {
       padding-left: 275px;
       padding-right: 275px;
    }
    footer {
       padding-right: 275px;
       padding-left: 275px;
    }
    .ventana {
       background-position: -210px 0;
    }
    .parte_wordpress a span {
       top: 300px;
    }
    .parte_webs a p {
       top: 181px;
    }
    .parte_webs a span {
       top: 181px;
    }
}
@media (max-width: 1500px){
    .trabajos ul li a .imagen .icono i {
      font-size: 25px;
    }
    .trabajos ul li a p {
      font-size: 15px;
      line-height: 15px;
    }
    .trabajos {
       padding-left: 70px;
       padding-right: 70px;
    }
    .parte_contacto {
       padding-left: 250px;
       padding-right: 250px;
    }
    footer {
       padding-right: 250px;
       padding-left: 250px;
    }
    .parte_tres_d .museo {
       padding-right: 2%;
       padding-left: 2%;
    }
    .ventana {
       background-position: -240px 0;
    }
    .parte_wordpress a span {
       top: 280px;
    }
    .parte_webs a p {
       top: 171px;
    }
    .parte_webs a span {
       top: 171px;
    }
}
@media (max-width: 1450px){
    .parte_contacto {
       padding-left: 225px;
       padding-right: 225px;
    }
    footer {
       padding-right: 225px;
       padding-left: 225px;
    }
    .ventana {
       background-position: -270px 0;
    }
    .parte_webs a p {
       top: 162px;
    }
    .parte_webs a span {
       top: 162px;
    }
    h1 .title {
       font-size: 50px;
    }
    h1 .descripcion {
       font-size: 28px;
       color: white;
    }
    .foreground {
       right: 5%;
    }
}
@media (max-width: 1400px){
    .parte_contacto {
       padding-left: 200px;
       padding-right: 200px;
    }
    footer {
       padding-right: 200px;
       padding-left: 200px;
    }
    .ventana {
       background-position: -300px 0;
    }
    .parte_webs a, .parte_wordpress a {
       width: 37%;
    }
    .parte_webs a.parallax {
       width: 47%;
    }
    .parte_webs a p {
       top: 168px;
    }
    .parte_webs a span {
       top: 168px;
    }
    .foreground {
       width: 100%;
    }
}
@media (max-width: 1350px){
    .parte_contacto {
       padding-left: 175px;
       padding-right: 175px;
    }
    footer {
       padding-right: 175px;
       padding-left: 175px;
    }
    .ventana {
       background-position: -330px 0;
    }
    .parte_webs a p {
       top: 158px;
    }
    .parte_webs a span {
       top: 158px;
    }
}
@media (max-width: 1300px){
    .parte_wordpress a p {
       font-size: 15px;
       line-height: 20px;
    }
    .parte_webs a p {
       font-size: 15px;
       line-height: 20px;
    }
    .trabajos ul li a .imagen .icono i {
       font-size: 23px;
    }
    .trabajos ul li a p {
       font-size: 14px;
       line-height: 14px;
    }
    .trabajos {
       padding-left: 40px;
       padding-right: 40px;
    }
    .parte_contacto {
       padding-left: 150px;
       padding-right: 150px;
    }
    footer {
       padding-right: 150px;
       padding-left: 150px;
    }
    .parte_tres_d .museo .video {
       width: 64%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -360px 0;
    }
    .parte_wordpress a span {
       top: 260px;
    }
    .parte_webs a p {
       top: 148px;
    }
    .parte_webs a span {
       top: 148px;
    }
}
@media (max-width: 1250px){
    .parte_contacto {
       padding-left: 125px;
       padding-right: 125px;
    }
    footer {
       padding-right: 125px;
       padding-left: 125px;
    }
    .ventana {
       background-position: -390px 0;
    }
    .parte_webs a p {
       top: 138px;
    }
    .parte_webs a span {
       top: 138px;
    }
    .parte_trabajos a h3 {
       margin-top: 20px;
       margin-bottom: 20px;
    }
    .parte_trabajos a h3 {
       font-size: 18px;
       line-height: 23px;
    }
}
@media (max-width: 1200px){
    header .grande .josusanchez {
      right: 15px;
    }
    header nav ul li {
      margin-right: 10px;
      margin-left: 10px;
    }
    .parte_contacto {
       padding-left: 100px;
       padding-right: 100px;
    }
    footer {
       padding-right: 100px;
       padding-left: 100px;
    }
    .parte_tres_d .museo .video {
       width: 67%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -400px 0;
    }
    .parte_wordpress a span {
       top: 230px;
    }
    .parte_webs a p {
       top: 128px;
    }
    .parte_webs a span {
       top: 128px;
    }
    .foreground {
       right: 2%;
    }
}
@media (max-width: 1160px){
    h1 {
       margin-left: 15px;
    }
     .foreground {
       width: 110%;
       right: 0;
    }
}
@media (max-width: 1150px){
    .parte_contacto {
       padding-left: 75px;
       padding-right: 75px;
    }
    footer {
       padding-right: 75px;
       padding-left: 75px;
    }
    .parte_tres_d .museo .video {
       width: 69%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -400px 0;
    }
    .parte_webs a p {
       top: 118px;
    }
    .parte_webs a span {
       top: 118px;
    }
}
@media (max-width: 1100px){
    .trabajos ul li a p {
      font-size: 13px;
      line-height: 13px;
    }
    .parte_universidad {
        padding-right: 50px;
        padding-left: 50px;
    }
    .parte_contacto {
       padding-left: 50px;
       padding-right: 50px;
    }
    footer {
       padding-right: 50px;
       padding-left: 50px;
    }
    .parte_tres_d .museo .video {
       width: 72%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -420px 0;
    }
    .parte_wordpress a span {
       top: 210px;
    }
    .parte_webs a, .parte_wordpress a {
       margin: 0 20px 15px 15px;
    }
    .parte_webs a {
       margin: 0 15px 25px 15px;
    }
    .parte_webs a, .parte_wordpress a {
       width: 40%;
    }
    .parte_webs a p {
       top: 126px;
    }
    .parte_webs a span {
       top: 126px;
    }
    .foreground {
       width: 110%;
       right: 0;
    }
    h1 .title {
       font-size: 40px;
    }
    h1 .descripcion {
       font-size: 26px;
    }
}
@media (max-width: 1050px){
    .parte_tres_d .museo .video {
       width: 75%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -450px 0;
    }
    .parte_webs a p {
       top: 116px;
    }
    .parte_webs a span {
       top: 116px;
    }
    .parte_trabajos .trabajos a {
       width: 42%;
    }
    .parte_trabajos a h3 {
       margin-top: 20px;
       margin-bottom: 20px;
    }
    .parte_trabajos a .pintura_trabajo {
       bottom: 6px;
    }
    header nav a {
       font-size: 15px;
       line-height: 20px;
    }
}
@media (max-width: 1000px){
    .carousel .titular {
       bottom: 20px;
    }
    .parte_tres_d .museo .video {
       width: 80%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -470px 0;
    }
    .parte_webs a p {
       top: 104px;
    }
    .parte_webs a span {
       top: 104px;
    }
    .foreground {
       width: 110%;
       right: 3%;
    }
    h1 .title {
       font-size: 36px;
    }
    h1 .descripcion {
       font-size: 22px;
    }
}
@media (max-width: 991px){
    .cabecera .nombre {
       height: 105px;
    }
    .parte_webs span.rayaparallax {
       width: 600px;
    }
    .parte_tres_d .museo p, .parte_universidad p {
       font-size: 24px;
       line-height: 29px;
    }
    .parte_webs p.parallax {
       font-size: 24px;
       line-height: 29px;
    }
    .mensaje_final h2 {
      margin-top: 90px;
    }
    header .menu_oculto {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;
      width: 200px;
      background: rgb(2, 9, 74);
      opacity: 0.9;
      padding-top: 20px;
      padding-bottom: 15px;
    }
    header .menu_oculto .cierre {
      position: absolute;
      top: 5px;
      right: 10px;
      z-index: 15;
      color: white;
      font-size: 20px;
    }
    header .menu_oculto ul li {
      padding-top: 5px;
      padding-bottom: 5px;
    }
    header .menu_oculto ul li a {
      color: white;
    }
    header .menu_oculto ul li a i {
      color: white;
    }
    header .menu_oculto nav ul li:nth-of-type(1) a i {
      color: #ca6fe6;
    }
    header {
      padding-top: 5px;
      padding-bottom: 5px;
    }
    .cabecera {
      height: 280px;
    }
    .trabajos ul li {
       width: 45%;
    }
    header .cabecera_moviles {
       display: flex;
       justify-content: space-between;
       align-items: center;
       flex-direction: row;
       padding-left: 40px;
       padding-right: 40px;
    }
    header .cabecera_moviles a {
       text-decoration: none;
    }
    header .cabecera_moviles a p {
       margin: 0;
       text-align: center;
       font-size: 23px;
       line-height: 23px;
       color: #ca6fe6;
       font-weight: 100;
       font-family: 'Norican', sans-serif;
    }
    header .grande {
        display: none;
    }
}
@media (max-width: 950px){
    .cabecera .nombre h1 {
       padding-bottom: 0;
    }
    .parte_tres_d .museo .video {
       width: 88%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -500px 0;
    }
    .parte_webs a p {
       top: 94px;
    }
    .parte_webs a span {
       top: 94px;
    }
    .parte_trabajos a .pintura_trabajo {
       bottom: 10px;
    }
    .efecto_parallax {
       height: 500px;
    }
    .wrapper {
        height: 1000px;
    }
    .background {
        bottom: 175px;
    }
    .foreground {
       width: 100%;
       right: 0;
       position: absolute;
        bottom: 125px;
    }
    h1 {
       padding-bottom: 80px;
    }
     header nav a {
       font-size: 14px;
       line-height: 19px;
    }
    header nav {
       margin-left: 0;
       margin-right: 0;
    }
}
@media (max-width: 900px){
    .carousel .titular {
       bottom: 10px;
    }
    .parte_tres_d .museo .video {
       width: 85%;
       margin-top: 40px;
    }
    .ventana {
       background-position: -530px 0;
    }
    .parte_webs a p {
       top: 83px;
    }
    .parte_webs a span {
       top: 83px;
    }
    .parte_trabajos a h3 {
       margin-top: 18px;
       margin-bottom: 22px;
    }
}
@media (max-width: 850px){
    .parte_tres_d .museo .video {
       width: 95%;
       margin-top: 40px;
    }
    .parte_tres_d .museo a {
       width: 50%;
    }
    .parte_tres_d .museo {
       padding-right: 15px;
       padding-left: 15px;
    }
    .ventana {
       background-position: -550px 0;
    }
    .parte_webs a p {
       top: 73px;
    }
    .parte_webs a span {
       top: 73px;
    }
    .parte_trabajos a h3 {
       margin-top: 21px;
       margin-bottom: 19px;
    }
}
@media (max-width: 820px){
    header {
        justify-content: flex-start;
        position: relative;
    }
    header .tactil {
        min-width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
    }
    header .tactil .telemail {
        display: flex;
        justify-content: flex-end;
        align-items: end;
        flex-direction: column;
        margin-right: 15px;
    }
    header .tactil .telemail p {
        display: block;
        font-size: 14px;
        line-height: 17px;
        font-weight: bold;
        color: #2a498e;
        margin-bottom: 0;
    }
    header .minimenu {
        min-width: 35px;
        min-height: 35px;
        max-width: 35px;
        max-height: 35px;
        margin-left: 15px;
        padding: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid #35343c;
        position: relative;
        z-index: 15;
    }
    header .minimenu .linea {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: #2a498e;
        width: 100%;
        height: 5px;
        margin-top: 2px;
        margin-bottom: 2px;
    }
    header .closed {
        background: #2a498e;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        border-bottom: 1px solid white; 
        padding-top: 10px;
        padding-bottom: 10px;
    }
    header .closed i {
        font-size: 23px;
    }
    header #panel {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
        width: 100%;
        height: 365px;
        background: #2a498e;
    }
    header #panel nav {
        padding-top: 15px;
    }
    header nav.contact {
        display: none;
    }
    header #panel nav ul {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    header #panel nav ul li {
        padding: 0;
        width: 100%;
    }
    header #panel nav ul li a {
        height: 42px;
        color: white;
        font-size: 17px;
        line-height: 22px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }
    header #panel nav ul li a i {
        color: white;
        margin-right: 0;
    }
    header #panel nav ul li a i.fa-id-card-alt {
        margin-right: 5px;
    }
    header #panel nav ul li a span {
        margin-left: 5px;
        width: 0;
    }
    header .grande a {
        display: none !important;
    }
    .ventana {
       background-position: -570px 0;
    }
    .parte_webs a p, .parte_webs a span {
       transition: none;
    }
    .parte_wordpress a p, .parte_wordpress a span {
       transition: none;
    }
    .parte_wordpress a:hover p {
       transform: none;
    }
    .parte_wordpress a:hover p {
       z-index: 5;
    }
    .parte_wordpress a:hover span {
       z-index: -1;
    }
    .parte_webs a:hover p {
       transform: none;
    }
    .parte_webs a:hover p {
       z-index: 5;
    }
    .parte_webs a:hover span {
       z-index: -1;
    }
    .parte_webs a span {
       display: none;
    }
}
@media (max-width: 800px){
    .carousel .titular {
       bottom: 0;
    }
    .carousel-control-next-icon, .carousel-control-prev-icon {
       width: 1.5rem !important;
       height: 1.5rem !important;
    }
    .carousel-control-prev .oculto, .carousel-control-next .oculto {
       width: 1.5rem;
       height: 1.5rem;
    }
    .parte_tres_d .museo .video .contenido_video i {
       font-size: 50px;
    }
    .parte_tres_d .museo .video .contenido_video img {
       width: 61px;
    }
    .parte_trabajos a h3 {
       font-size: 16px;
       line-height: 21px;
    }
}
@media (max-width: 767px){
    #campObli {
        margin-bottom: 20px;
    }
    #noValid1, #noValid2, #noValid3, #noValid4 {
        font-size: 20px;
    }
}
@media (max-width: 750px){
    .parte_tres_d .museo .video .contenido_video i {
       font-size: 40px;
    }
    .parte_tres_d .museo .video .contenido_video img {
       width: 50px;
    }
    .ventana {
       background-position: -590px 0;
    }
    .parte_webs a p, .parte_wordpress a p {
       font-size: 16px;
       line-height: 21px;
    }
    .parte_webs a p {
       top: 63px;
       padding: 5px 5px;
       width: 125px;
    }
    .parte_webs a span {
       top: 63px;
    }
}
@media (max-width: 700px){
    .parte_webs span.rayaparallax {
      width: 400px;
    }
    .trabajos {
      padding-left: 15px;
      padding-right: 15px;
    }
    .trabajos ul li {
      width: 70%;
    }
    .carousel p {
       font-size: 25px;
       line-height: 30px;
    }
    #nombre, #email, #mensaje {
       font-size: 17px;
       line-height: 22px;
    }
    form a {
       font-size: 19px;
       line-height: 24px;
       padding: 7px 30px;
    }
    footer p {
       font-size: 18px;
       line-height: 23px;
    }
    footer .nombres p {
       margin-top: 2px;
       margin-bottom: 2px;
    }
    footer .borde i {
       font-size: 30px;
    }
    footer .borde .datos i {
       font-size: 20px;
       padding-right: 8px;
    }
    iframe {
       height: 270px;
    }
    .ventana {
       background-position: -620px 0;
    }
    .parte_webs a p {
       top: 52px;
    }
    .parte_webs a span {
       top: 52px;
    }
    .parte_webs a {
       margin: 0 15px 30px 15px;
    }
    .parte_trabajos .trabajos a {
       width: 60%;
    }
    .parte_trabajos a h3 {
       font-size: 19px;
       line-height: 24px;
    }
    .parte_trabajos a .pintura_trabajo {
       bottom: 8px;
    }
    h1 .descripcion {
       width: 70%;
    }
    .foreground {
       width: 100%;
       right: 20%;
    }
}
@media (max-width: 650px){
    footer p, footer a {
       font-size: 16px;
       line-height: 21px;
    }
    footer .borde i {
       font-size: 25px;
    }
    footer .borde {
       padding: 5px 10px;
    }
    .parte_universidad {
       padding-right: 15px;
       padding-left: 15px;
    }
    .parte_contacto {
       padding-left: 15px;
       padding-right: 15px;
    }
    .ventana {
       background-position: -650px 0;
    }
    .foreground {
       width: 120%;
       right: 20%;
    }
}
@media (max-width: 600px){
     header .cabecera_moviles a p {
      font-size: 21px;
      line-height: 21px;
    }
    .cabecera h1 {
      font-size: 25px;
      line-height: 25px;
    }
    .bloque_trabajos h2 {
      font-size: 21px;
      line-height: 26px;
    }
    .trabajos ul li {
       width: 80%;
    }
    footer {
       padding-right: 25px;
       padding-left: 25px;
    }
    iframe {
       height: 230px;
    }
    .ventana {
       background-position: -680px 0;
    }
    .parte_webs .webs, .parte_wordpress .webs {
       flex-direction: column;
    }
    .parte_webs a, .parte_wordpress a {
       width: 94%;
       margin-bottom: 30px;
    }
    .parte_webs a.parallax {
       width: 94%;
    }
    .parte_webs a p {
       top: 200px;
    }
    .parte_webs a span {
       top: 200px;
    }
    .parte_trabajos .trabajos a {
       width: 70%;
    }
}
@media (max-width: 550px){
   .carousel p {
       font-size: 22px;
       line-height: 27px;
    }
    .ventana {
       background-position: -710px 0;
    }
    .parte_webs a {
       width: 93%;
    }
    .parte_wordpress a {
       width: 92%;
    }
    .parte_webs a p {
       top: 180px;
    }
    .parte_webs a span {
       top: 180px;
    }
    .foreground {
       width: 130%;
       right: 10%;
    }
    h1 .title {
       font-size: 30px;
    }
    h1 .descripcion {
       font-size: 18px;
    }
}
@media (max-width: 530px){
    footer {
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       padding-top: 25px;
       padding-bottom: 35px;
    }
    footer .nombres {
        margin-bottom: 25px;
    }
    footer .borde .datos a {
        margin-top: 5px;
        margin-bottom: 5px;
    }
}
@media (max-width: 500px){
    .parte_webs span.rayaparallax {
        width: 300px;
        margin-top: 30px;
        margin-bottom: 18px;
    }
    #noValid1, #noValid2, #noValid3, #noValid4 {
        font-size: 17px;
        margin-bottom: 15px;
    }
    .mensaje_final h2 {
      font-size: 21px;
      line-height: 26px;
      margin-bottom: 100px;
      margin-top: 50px;
    }
    .mensaje_final p {
      font-size: 17px;
      line-height: 22px;
      margin-top: 30px;
      margin-bottom: 30px;
    }
    .mensaje_final .volver {
      margin-top: 30px;
    }
    .mensaje_final .volver a {
      font-size: 16px;
      line-height: 21px;
    }
    header .cabecera_moviles {
      padding-left: 15px;
      padding-right: 15px;
    }
    .bloque_trabajos h2 {
      font-size: 18px;
      line-height: 23px;
    }
    .trabajos ul li {
      width: 100%;
      margin-right: 0;
      margin-left: 0;
    }
    #campObli {
        font-size: 14px;
    }
    #nombre, #email, #mensaje {
        margin-bottom: 5px;
    }
    .parte_trabajos, .parte_webs, .parte_wordpress, .parte_tres_d, .parte_universidad, .parte_contacto {
        padding-top: 25px;
        padding-bottom: 0;
    }
    .parte_tres_d h2 {
        margin-bottom: 15px;
    }
    ul#envio {
        margin-top: 10px;
    }
    .carousel p {
        font-size: 19px;
        line-height: 24px;
    }
    .parte_universidad p.proyecto {
        font-size: 18px;
        line-height: 23px;
    }
    .parte_contacto h2 {
        margin-bottom: 20px;
    }
    .parte_universidad h2 {
        margin-bottom: 22px;
    }
    iframe {
       height: 210px;
    }
    .parte_tres_d .museo p, .parte_universidad p {
       font-size: 18px;
       line-height: 23px;
    }
    .parte_webs p.parallax {
       font-size: 18px;
       line-height: 23px;
       margin-bottom: 25px;
    }
    .parte_tres_d .museo a {
       width: 100%;
    }
    .parte_universidad p {
       margin-bottom: 20px;
    }
    .parte_universidad .logo_uni {
       margin-bottom: 20px;
    }
    .parte_tres_d .museo p {
       margin-bottom: 25px;
    }
    .parte_tres_d .museo .video {
       margin-top: 20px;
    }
    .ventana {
       background-position: -740px 0;
       height: 240px;
    }
    .parte_webs .webs, .parte_wordpress .webs {
       margin-top: 5px;
       margin-bottom: 15px;
    }
    .parte_webs a p {
       top: 150px;
    }
    .parte_webs a span {
       top: 150px;
    }
    .parte_trabajos .trabajos a {
       width: 92%;
    }
    .parte_trabajos a .pintura_trabajo {
       bottom: 6px;
    }
    .foreground {
       width: 150%;
       right: 10%;
    }
    .parte_trabajos h2 {
       margin-bottom: 25px;
    }
}
@media (max-width: 470px){
    .foreground {
       width: 150%;
       right: 15%;
    }
}
@media (max-width: 450px){
    .cabecera .nombre h1 {
       font-size: 26px;
       line-height: 26px;
    }
    .cabecera a {
       font-size: 14px;
       line-height: 19px;
    }
    #nombre, #email, #mensaje {
       font-size: 15px;
       line-height: 20px;
    }
    #nombre, #email {
       height: 30px;
    }
    .parte_webs a p, .parte_wordpress a p {
       font-size: 15px;
       line-height: 20px;
    }
    .trabajos {
        padding-top: 15px;
    }
    .trabajos ul li {
        margin-bottom: 15px;
    }
    .bloque_trabajos {
        padding-bottom: 12px;
    }
    ul.pagination li a {
        width: 24px;
        height: 24px;
        font-size: 15px;
        line-height: 15px;
    }
    .carousel .titular {
        padding-right: 15px;
        padding-left: 15px;
    }
    .carousel p {
        font-size: 17px;
        line-height: 22px;
        margin-bottom: 10px;
    }
    .parte_tres_d .museo .video .contenido_video i {
        font-size: 33px;
    }
    .parte_tres_d .museo .video .contenido_video img {
        width: 37px;
    }
    .parte_tres_d .museo a i {
        font-size: 21px;
    }
    .parte_webs a {
        width: 95%;
        margin-left: 5px;
    }
    .parte_webs a p {
       top: 120px;
    }
    .parte_webs a span {
       top: 120px;
    }
    .parte_trabajos a .pintura_trabajo {
       bottom: 10px;
    }
    .foreground {
       width: 150%;
       right: 20%;
    }
}
@media (max-width: 430px){
    iframe {
       height: 200px;
    }
    .ventana {
       background-position: -760px 0;
       height: 240px;
    }
    .parte_webs a p {
       top: 100px;
    }
    .parte_webs a span {
       top: 100px;
    }
    .foreground {
       width: 190%;
       right: 5%;
    }
    .parte_wordpress a {
       width: 91.5%;
    }
}
@media (max-width: 400px){
     .parte_wordpress a {
       width: 90.5%;
    }
     .carousel .titular {
        padding-right: 10px;
        padding-left: 10px;
     }
    .carousel p {
        font-size: 16px;
        line-height: 21px;
        margin-bottom: 5px;
     }
     .parte_contacto h2 {
        margin-bottom: 18px;
     }
    iframe {
       height: 180px;
    }
    .ventana {
       background-position: -770px 0;
       height: 240px;
    }
    .parte_webs a p {
       top: 80px;
    }
    .parte_webs a span {
       top: 80px;
    }
}
@media (max-width: 395px){
    .foreground {
       width: 200%;
       right: 5%;
    }
    h1 .title {
       font-size: 28px;
    }
    h1 .descripcion {
       font-size: 16px;
    }
}
@media (max-width: 385px){
    h1 .title {
        font-size: 27px;
    }
    h1 .descripcion {
       font-size: 15px;
    }
    .foreground {
       width: 200%;
       right: 14%;
    }
}
@media (max-width: 370px){
    iframe {
       height: 170px;
    }
    .ventana {
       background-position: -790px 0;
       height: 240px;
    }
}

/*-----------------------------FIN RESPONSIVO----------------------*/