/* Reset css :  Con este código eliminamos márgenes,
padding y otras propiedades que los navegadores
añaden automáticamente */
html,body,div,span,applet,object,iframe,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}


@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');


*{
    box-sizing: border-box;
}


h1 {
    font-size: 15px;
    color: white;
    padding:0;
    padding-top: 15%;



}


body{

     font-family: 'Inconsolata', monospace;
	 background-image: url("img/alex.jpg");
	 background-position: center center;

/* Para que la imagen de fondo no se repita */

background-repeat: no-repeat;

/* La imagen se fija en la ventana de visualización para que la altura de la imagen no supere a la del contenido */

background-attachment: fixed;

/* La imagen de fondo se reescala automáticamente con el cambio del ancho de ventana del navegador */

background-size: cover;font-size: 1.2em;
	 color: #333;
}


/*TITULO */


#titulo{
    	position: absolute;
    top: 500px;
    left: 100px;
}

/*PUNTOS SENSIBLES */


/*BOTON*/








/*PUNTO 1 */







#wrapper{
	padding: 100px 6%;
}

#wrapper > div{
	position: absolute;
    top: 250px;
    left: 410px;
}


/*PUNTO 2 */

#wrapper2{
	padding: 50px 25%;
}

#wrapper2 > div{
	position: absolute;
    top: 70px;
    left: 590px;
}

/*PUNTO 3 */

#wrapper3{
	padding: 50px 6%;
}

#wrapper3 > div{
	position: absolute;
    top: 270px;
    left: 740px;
}


/*PUNTO 4 */

#wrapper4{
	padding: 60px 6%;
}

#wrapper4 > div{
	position: absolute;
    top: 430px;
    left: 560px;
}

/*PUNTO 5 */

#wrapper5{
	padding: 60px 6%;
}

#wrapper5 > div{
	position: absolute;
    top: 240px;
    left: 580px;
}


/*PUNTO 6 */


#wrapper6{
	padding: 60px 6%;
}

#wrapper6 > div{
	position: absolute;
    top: 340px;
    left: 850px;
}



/*PUNTO 7 */


#wrapper7{
	padding: 60px 6%;
}

#wrapper7 > div{
	position: absolute;
    top: 300px;
    left: 650px;
}


/*PUNTO 8 */


#wrapper8{
	padding: 60px 6%;
}

#wrapper8 > div{
	position: absolute;
    top: 180px;
    left: 670px;
}


/*PUNTO 9 */


#wrapper9{
	padding: 60px 6%;
}

#wrapper9 > div{
	position: absolute;
    top: 410px;
    left: 350px;
}


/*PUNTO 10 */


#wrapper10{
	padding: 60px 6%;
}

#wrapper10 > div{
	position: absolute;
    top: 440px;
    left: 550px;
}








a.boton{
	position: relative;
	display: block;
	padding: 25px 10px;
	border-radius: 6px;
	text-align: center;
	font-weight: bold;
	max-width: 120px;
	height: 15px;
	margin-bottom: 60px;
	overflow: hidden;
	color:rgba(255,255,255,1);
	cursor: pointer;
	letter-spacing: 2px;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);
	text-decoration: none;
	transition: all ease 0.5s;
	background:#10B87B;
}

a.boton:after,
a.boton:before{
	width: 80px;
	height: 200px;
	content: '';
	display: block;
	background: rgba(255,255,255,0.5);
	transform: rotate(45deg);
	top: -60px;
	position: absolute;
	transition: none;
	right:-45%;
	cursor: pointer;
}

a.boton:before{
	left: -48%;
}

a.boton:hover{
	text-shadow: 0 1px 1px rgba(0,0,0,0.5);
	background:#12C987
}

a.boton:hover:after,
a.boton:hover:before{
	transform: rotate(45deg), scaleX(130%);
	background: rgba(255,255,255,0.1);
	transition: all ease 0.5s;
}

a.boton:hover:after{
	right: 130%;
}

a.boton:hover:before{
	left: 130%;
}




#activar {display: none;}
.inputlabel {display: inline-block;height: 20px;line-height: 20px;}
#activar ~ .inputlabel:before {content: ""; }
#activar ~ .desplegable {display: none;overflow: hidden; padding: 40px 80px; background: #000;color: #fff; margin-right: 800px;}
#activar:checked ~ .desplegable {display: block;}
#activar:checked ~ .inputlabel:before {content: "CERRAR"; position: absolute; }


/*BUQUE ZOOM */


.images-container {
  width: 90%;


}
.container-enlarge {
    display: inline-block;
    position: relative;
    z-index: 0;
    margin: 15px;
}
.container-enlarge > img {
    height: auto;
    max-width: 100%;
    width: 150px;
    border-radius: 5px;
}
.container-enlarge span {
    position: absolute;
    top: -9999em;
    left: -9999em;
}
.container-enlarge:hover span {
    top: -70px;
    left: -75px;
    width: 100px;
}


/* demo stuff */

.zoom-area {
  max-width: 690px;
  margin: 30px auto 30px;

}
.link-container {
  text-align: center;
}
a.more-link {

    display: inline-block;
    margin-right: 5px;
    margin-bottom: -5px;
    line-height: 1.5;
    text-decoration: none;
}