@charset "utf-8";

/* ----------- reglas generales y módulos ----------- */

* {
    box-sizing: border-box;
}

body {
    background: url("../imagenes/textmadera3.png") repeat;
    margin: 0;
    font-family: 'Patrick Hand', cursive;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between
}

header {
    max-width: 50rem;
    margin: 0 auto;
    width: calc( 100% - 2rem );
    z-index: 0;
}

footer {
    background: url("../imagenes/hip-square.png") repeat;
    max-width: 50rem;
    width: calc( 100% - 1em );
    margin: 0 auto;
    border-top-left-radius: 5%;
    border-top-right-radius: 25%;
    box-shadow: -2px 4px 5px 7px rgba(0, 0, 0, 0.125);
    margin-top: -2em;
    transform: rotate(-5deg);
    position: relative;
    z-index: 5;
}

img {
    max-width: 100%;
    height: auto;
}

.footerfin,
footer > section {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1rem;
    font-size: 0.8em;
    font-family: 'Shadows Into Light', cursive;
    text-transform: uppercase;
    color: #3b3b3b;
    font-weight: bold;
}


@media screen and (max-width: 33em) {
    .footerfin,
    footer > section{
        font-size: 0.6em;
    }
}




/* ----------- header ----------- */

#contenedor {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1rem 1rem 0 1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

nav {
    list-style: none;
    margin: 0 0 0 3em;
    padding: 0;
    width: 17%;
    position: relative;
    z-index: 4;
}

nav li a {
    background: #F34747;
    color: black;
    font-weight: bold;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 0.3em 0;
    margin: 0 0.5em;
    border-top-left-radius: 27%;
    border-top-right-radius: 27%;
    width: 9em;
    font-family: 'Rock Salt', cursive;
    font-size: 0.8em;
    box-shadow: 3px 0px 0px 0px rgba(0, 0, 0, 0.125);
}

@media screen and (max-width: 33em) {
nav li a{
    font-size: 0.5em;
}
}


nav li a:hover {
    color: black;
    position:absolute;
    text-transform: uppercase;
}

nav2 {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
    width: 17%;
    z-index: 3;
}

nav2 li a {
    background: #64a6e8;
    color: black;
    font-weight: bold;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 0.3em 0;
    margin: 0 0.5em;
    border-top-left-radius: 27%;
    border-top-right-radius: 27%;
    width: 9em;
    font-family: 'Rock Salt', cursive;
    font-size: 0.8em;
    box-shadow: 3px 0px 0px 0px rgba(0, 0, 0, 0.125), 0px -1px 1px 0px  rgba(0, 0, 0, 0.14) inset;
}

@media screen and (max-width: 33em) {
nav2 li a{
    font-size: 0.5em;
}
}


nav2 li a:hover {
    color: black;
    margin-top: 0.6em;
    position:absolute;
    transition: all .4s ease;
}

nav3 {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
    width: 17%;
    z-index: 2;
}

nav3 li a {
    background: #6dd09e;
    color: black;
    font-weight: bold;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 0.3em 0;
    margin: 0 0.5em;
    border-top-left-radius: 27%;
    border-top-right-radius: 27%;
    width: 9em;
    font-family: 'Rock Salt', cursive;
    font-size: 0.8em;
    box-shadow: 3px 0px 0px 0px rgba(0, 0, 0, 0.125), 0px -1px 1px 0px  rgba(0, 0, 0, 0.14) inset;
}

@media screen and (max-width: 33em) {
nav3 li a{
    font-size: 0.5em;
}
}


nav3 li a:hover {
    color: black;
    margin-top: 0.6em;
    position:absolute;
    transition: all .4s ease;
}

nav4 {
    list-style: none;
    margin: 0 0 0 0;
    padding: 0;
    width: 17%;
    z-index: 1;
}

nav4 li a {
    background: #f8ed66;
    color: black;
    font-weight: bold;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 0.3em 0;
    margin: 0 0.5em;
    border-top-left-radius: 27%;
    border-top-right-radius: 27%;
    width: 9em;
    font-family: 'Rock Salt', cursive;
    font-size: 0.8em;
    box-shadow: 3px 0px 0px 0px rgba(0, 0, 0, 0.125), 0px -1px 1px 0px  rgba(0, 0, 0, 0.14) inset;
}

@media screen and (max-width: 33em) {
nav4 li a{
    font-size: 0.5em;
}
}

nav4 li a:hover {
    color: black;
    margin-top: 0.6em;
    position:absolute;
    transition: all .4s ease;
}

header > div.carpeteria {
    position: relative;
    z-index: 3;
}

#baseseparador {
    background: #F34747;
    margin-left: 2.9em;
    margin-bottom: -44.5em;
    margin-right: -1em;
    max-width: 46em;
    height: 45em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    z-index: 5;
}

#carpeta {
    background: url("../imagenes/irongrip.png") repeat;
    margin-left: 1em;
    margin-bottom: -66.6em;
    margin-right: -1em;
    max-width: 50em;
    height: 67em;
    border-radius: 1.5em;
    box-shadow: 1px 4px 5px 4px rgba(0, 0, 0, 0.125);
}

@media screen and (max-width: 33em) {
    
#carpeta {
    height: 79em;
    margin-bottom: -79em;
    border-radius: 0em;
    border-top-left-radius: 1.5em;
    border-bottom-left-radius: 1.5em;
}
    
#baseseparador {
    border-top-right-radius: 0em;
}
    
}


/* ----------- main ----------- */

main {
    flex-grow: 1;
    position: relative;
}

main > tiza {
    z-index: 6;
}

main > section {
    background: url("../imagenes/lined_paper.png") repeat;
    border: none;
    box-shadow: 0 4px 5px 5px rgba(0, 0, 0, 0.125);
    max-width: 50rem;
    margin: 0 auto;
    margin-top: 2em;
    margin-bottom: 1.5em;
    padding: 1.3rem;
    width: calc( 100% - 2rem );
    z-index: 5;
}

main > section > h1,
main > section > h2 {
    font-family: 'Rock Salt', cursive;
    border-bottom: groove 0.40em gray;
    margin-top: 0em;
    margin-bottom: 1.2em;
    padding-bottom: .45em;
    color: black;
    font-size: 0.9em;
    line-height: 1.8em;
}
main > section > h3 {
    color: #585858;
}


/* ----------- main/profile/equipo ----------- */

#profile {
    }

#marcador img{
    width: 3.75em;
    float: left;
    position: absolute;
    margin-left: 53.81em;
    margin-top: 0.87em;
    border: none;
    transform: rotate(-3deg);
}

#marcador img:hover{
    width: 3.75em;
    float: left;
    position: absolute;
    margin-left: 53.84em;
    margin-top: 0.85em;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 1s ease-in-out; /** Firefox **/
    -o-transition: all 1s ease-in-out; /** Opera **/
    transform: translate(0,-70px);
    -webkit-transform: translate(0,-70px);
    -o-transform: translate(0,-70px); 
    -moz-transform: translate(0,-70px);
}

@media screen and (max-width: 57em) {
#marcador img{
display:none;
}
}

#marcadorfondo img{
    width: 3.75em;
    float: left;
    position: absolute;
    margin-left: 53.81em;
    margin-top: 0.87em;
    border: none;
    transform: rotate(-3deg);
}

@media screen and (max-width: 57em) {
#marcadorfondo img{
display:none;
}
}

#profileemanu {
    text-align: center;
    width: 40%;
    float:left;
    padding-right: 1.2em;
    padding-bottom: 2.5em;
    margin-right: 2.2em;
    border-right: 0.1em solid silver;
    font-size: 0.8em;
}

#profileemanu a {
    color:black;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
}

#profileemanu a:hover {
    box-shadow: .0em .0em .2em rgba(255, 245, 0, 0.88);
    background: rgba(255, 245, 0, 0.88);
    border-radius: 15%;
}

#profileemanu img {
    border-radius: 10px;
    display: flex;
    margin: auto;
    justify-content: center;
    max-height: 500px;

}

main > section > div.profileema h2 {
    font-family: 'Rock Salt', cursive;
    font-size: 1.35em;
    border-bottom: none;
    margin-top: 0.35em;
    margin-bottom: .6em;
    margin-left: -10%;
    color: black;
    line-height: 1.8em;
    width: 120%;
}

@media screen and (max-width: 26.9em) {
#profileemanu h2{
    font-size: 1.15em;
}
}

main > section > div.profileema h4 {
    font-size: 1.3em;
    margin-top: 0.9em;
    margin-bottom:-0.1em;
    color: black;
    font-weight:normal;
}

#datospersonales {
    font-size: 1.0em;
    text-align: left;
    color: #585858;
    padding-bottom: 1.5em;
    max-height: 32.5em;
}

#datospersonales img {
    max-width: 4%;
    min-width: 0.9em;
    margin-right: .3em;
    vertical-align: middle;
}

#datospersonales a {
    color:black;
    text-decoration: none;
    font-weight: normal;
}

#datospersonales a:hover {
    box-shadow: .0em .0em .2em rgba(255, 245, 0, 0.88);
    background: rgba(255, 245, 0, 0.88);
    border-radius: 15%;
}

main > section > div.datospersonales h2 {
    font-family: 'Rock Salt', cursive;
    font-size: 0.8em;
    border-bottom: none;
    color: #454545;
    margin-top: 0.3em;
    margin-bottom: 1.9em;
    line-height: 1.8em;
    padding: 0.2em 0;
    
}

main > section > div.datospersonales h3 {
    margin-bottom: -0.6em;
}

#dptitle {
background: url("../imagenes/5.png") repeat;
margin-left: calc( 40% + 1rem );
margin-top: 0.45em;
margin-bottom: 1.5em;
max-width: 9.5em;
max-height: 2.2em;
box-shadow: 0px -1px 3px 0px  rgba(0, 0, 0, 0.14) inset;
border-top: 1px white outset;
border-right: 1px outset;
border-bottom: 1px outset;
border-left: 1px white outset;
}

@media screen and (max-width: 26.9em) {
#dptitle {
font-size: 62%;
max-width: 10.2em;
}
}

#arrastrar {
	position:relative;
	cursor:pointer;
    width: 34%;
    margin-left: -1.8em;
    right: 100em;
}

#otrosintegrantes {
    text-align: center;
    font-size: 0.7em;
    background: url("../imagenes/1.png") repeat;
    background-size:auto;
    width: 100%;
    max-width: 56em;
    min-width: 15em;
    float: left;
    position:absolute;
    box-shadow: 2px 9px 6px 2px rgba(0, 0, 0, 0.125);
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-top: -5.5em;
}

main > section > div.otrosintregrantes h2 {
    font-family: 'Rock Salt', cursive;
    font-size: 1.0em;
    border-bottom: none;
    color: black;
    text-align: left;
    padding-left: 1em;
    padding-right: 1em;
}

#otrosintegrantes ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

#otrosintegrantes ul li {
    margin: 1.3em;
    font-size: 0.8em;
}

#otrosintegrantes ul li a {
    color: black;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    flex-direction:column;
}

#otrosintegrantes ul li a:hover {
    color: #0b46b7;
    text-decoration: none;
    background: none;
    box-shadow: none;
}

#otrosintegrantes ul li a img {
    filter: grayscale(100%);
    border: none;
    border-radius: 15%;
    margin-bottom: .65em;
    width: 100%;
    background: white;
}

#otrosintegrantes ul li a:hover img {
    filter: grayscale(0%);
    transform: rotate(25deg);
    transition: all .4s ease;
}

#clip img {
    width: 1.5em;
    margin-top:-5.5em;
    margin-left:.5em;
    position:absolute;
    float: left;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    transform: rotate(-15deg);
}


/* ----------- main/materias ----------- */

#materias {
    font-size: 1.0em;
    text-align: left;
    color: #585858;
    height: auto;
}

@media screen and (max-width: 33em) {
    
#materias {
    font-size: 0.9em;
    line-height: 1.1em;
}
#materias li {
padding-bottom: .35em;
}
    
}

#materias h2{
margin-bottom: .2em;
}

@media screen and (max-width: 43.04em) {
#materias h2 {
margin-bottom: .4em;
}
}


#esquinadob{
    float:right;
    margin-right: -2.2em;
    margin-top: -6.71em;
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 33em) {
#esquinadob{
    margin-right: -2.45em;
    margin-top: -7.48em;
}
}


#spidey{
    float:right;
    margin-left: 60%;
    margin-right: 1em;
    margin-top: -6.5em;
    margin-bottom: -4em;
    padding-left: 1em;
    position: relative;
    z-index: 1;
    width: 8em;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

@media screen and (min-width: 43.05em) {
#spidey{
display:none;
}
}

@media screen and (max-width: 27.05em) {
#spidey{
display:none;
}
}

#lapicin{
    float:right;
    margin-left: 3.0em;
    margin-top: -9em;
    position: absolute;
    z-index: 2;
    width: 8.6em;
}

#lapicin :hover{
    transform: rotate(360deg);
    transition: all .4s ease;
}

@media screen and (min-width: 43.05em) {
#lapicin{
    margin-left: -10em;
    margin-right: 15em;
    transform: rotate(-40deg);
}
}

#2columnas{
text-align: left;
width: auto;
margin: auto;
}

#textoiz{
margin-left: 1em;
margin-right: 4%;
padding-bottom:1em;
width: 33%;
float:left;
}



@media screen and (max-width: 43em) {
#textoiz {
margin-right: 10%;
}
}


#textoder{
margin-left: 0.6em;
margin-right: 2em;
padding-bottom:1em;
width: 33%;
float:left;
}


@media screen and (max-width: 33em) {
#textoder {
margin-right: 1.2em;
}
}


#textoderder{
margin-bottom:4.1em;
margin-left: 1em;
text-decoration: line-through;
display: flex;
flex-wrap: wrap;
min-width: 6.7em;
position: relative;
z-index: 1;
text-align: left;
}


@media screen and (max-width: 43.04em) {
#textoderder {
margin-bottom:.6em;
top: -1.1em;
}
}


#textoderder li{
width: 500px;
}

#textoderder h3{
width: 500px;
}


/* ----------- main/comitente ----------- */

#comitente {
}

@media screen and (max-width: 33em) {
#comitente {
        line-height: 1.3em;
        font-size: .95em;
}
}

#mapa {
    height: 18.7em;
    margin-bottom: 1.5em;
}

@media screen and (max-width: 33em) {
#mapa {
        height: 13.7em;
}
}

@media screen and (max-width: 33em) {
#comitente h2 {
        font-size: 0.9em;
}
}

#comitente img {
}

#comitentecuerpo {
    padding-bottom: .5em;
}

#comitentecuerpo img {
    width: 52%;
    max-width: 13.5em;
    float: left;
    padding-right: .8em;
}

#manchataza img{
    width: 15em;
    position: absolute;
    margin-left: -8em;
    margin-top: -7.5em;
    border: none;
    opacity: 0.4;
    filter: alpha(opacity=40); /* IE8 and lower */
}

#taza img{
    width: 22em;
    min-width: 19.4em;
    position: absolute;
    margin-left: -10em;
    margin-top: -10em;
    border: none;
}

#taza img:hover{
    float: left;
    position: absolute;
    transition: all 2s ease-in-out forwards;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
    transform: translate(-160px,0px) rotate(-145deg);
    -webkit-transform: translate(-160px,0px) rotate(-145deg);
    -o-transform: translate(-160px,0px) rotate(-145deg); 
    -moz-transform: translate(-160px,0px) rotate(-145deg);
}

#taza img:hover:onclick{
    float: left;
    position: absolute;
    transform: translate(-160px,0px) rotate(-145deg);
    -webkit-transform: translate(-160px,0px) rotate(-145deg);
    -o-transform: translate(-160px,0px) rotate(-145deg); 
    -moz-transform: translate(-160px,0px) rotate(-145deg);
}

/* ----------- Comitente/App ----------- */

.slider {
    height: 4.4em;
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
  }

@media screen and (max-width: 36em) {
.slider {
  height: 4.3em;
}
}

 
#galeria {
  padding: 0;
  margin:24px auto 0 auto;
  list-style-type: none;
  width: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  }

#galeria li {
  width: 8em;
  height: 4em;
  margin: 2px;
  padding: 0;
  float: left;
  -webkit-filter: brightness(90%);
  filter: brightness(90%);
  object-fit:cover;
  object-position: top left;
  }

#galeria li img {
  width: 8em;
  height: 4em;
  border: none;
  object-fit:cover;
  object-position: top left;
  }


@media screen and (max-width: 36em) {
#galeria li, #galeria li img {
  height: 4.5em;
  margin-top: -.1em;
}
}

#galeria li:hover {
  background: none;
  width: 50%;
  height: auto;
  -webkit-filter: brightness(100%);
  filter: brightness(100%);
  transition: all 1.0s ease;
  object-fit:cover;
  object-position: top left;
  }

#galeria li:hover img {
  width: auto;
  height: auto;
  box-shadow: 1px 0px 9px 4px rgba(0, 0, 0, 0.125);
  }

.imgapp1 {
    transform: rotate(-5deg);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.125);
  }

.imgapp1:hover {
    transform: rotate(0deg);
    transition: all .8s ease;
  }

.imgapp2 {
    transform: rotate(-2deg);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.125);
  }

.imgapp2:hover {
    transform: rotate(0deg);
    transition: all .8s ease;
  }

.imgapp3 {
    transform: rotate(2deg);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.125);
  }

.imgapp3:hover {
    transform: rotate(0deg);
    transition: all .8s ease;
  }

.imgapp4 {
    transform: rotate(-7deg);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.125);
  }

.imgapp4:hover {
    transform: rotate(0deg);
    transition: all .8s ease;
  }

.imgapp5 {
    transform: rotate(-4deg);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.125);
  }

.imgapp5:hover {
    transform: rotate(0deg);
    transition: all .8s ease;
  }

.imgapp6 {
    transform: rotate(2deg);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.125);
  }

.imgapp6:hover {
    transform: rotate(0deg);
    transition: all .8s ease;
  }

.imgapp7 {
    transform: rotate(5deg);
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.125);
  }

.imgapp7:hover {
    transform: rotate(0deg);
    transition: all .8s ease;
  }

@media screen and (max-width: 36em) {
#galeria li:hover, #galeria li:hover img {
  width: 500%;
  transition: all 1.3s ease;
}
}


/* ----------- main/pertenencia ----------- */

#pertenencia {
    font-size: 1.0em;    
}


@media screen and (max-width: 33em) {
#pertenencia {
    font-size: 0.8em;
}
}

@media screen and (max-width: 33em) {
#pertenencia h2 {
    font-size: 1.1em;
}
}


#pertenencia a:hover {
 box-shadow: .0em .0em .2em rgba(255, 245, 0, 0.88);
 background: rgba(255, 245, 0, 0.88);
 border-radius: 15%;
}

#pertenencia a:hover img{
}

#pertenenciaorden {
text-align: left;
margin-top: 2.5em;
margin-left: -2.5em;
width: auto;
display: flex;
flex-wrap: wrap-reverse;
margin-bottom: -2em;
}

#pertenenciaiz{
margin-top: -1.5em;
margin-bottom: 2em;
padding: 0 4%;
float:left;
text-align: left;
width: 43%;
}

#pertenenciaiz img{
}

#pertenenciamedborde{
border-right: 2px dotted black;
margin-top: -1.5em;
margin-bottom: 1.5em;
}

#pertenenciader{
margin-top: 0.5em;
margin-bottom:3.0em;
padding: 0 4%;
width: 56%;
}

#pertenenciaimages{
margin-top: -1.5em;
margin-bottom:2.5em;
}

#pertenenciaderimg1 img{
 float: left;
 width: 22%;
}

#pertenenciaderimg2 img{
 margin-top: -3%;
 width: 64%;
}

#pertenenciaiz > li {
    list-style:none;
}

#pertenenciatext{
    margin-top: -1.2em;
    text-align: left;
}

#pertenenciatext > li {
    list-style: none;
}

tiza {
    border: none;
    margin: 0 auto;
    margin-top: -5em;
    max-width: 87rem;
    z-index: 2;
}

#tiza{
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin-top: -9.9em;
}

#tiza img{
    width: 12em;
    margin-right: 0em;
}

#tiza img:hover{
    transform: rotate(-20deg);
    transition: all .4s ease;
}

@media screen and (max-width: 57em) {
#tiza{
display:none;
}
}