body{background-image: url('../images/fondos/marron.jpg'); margin:auto;
	background-size:100%; text-align: center;
	background-attachment:fixed;}

.wrapper {width: 950px; height:720px;/*contenedor ROJO*/
	margin:auto;
	text-align:left;
        margin-top:10px;
	}


a {text-decoration:none;}


#contenido {width:900px; height:200px;/*contenedor VERDE*/
            position:absolute; opacity:1;
            margin-top:-300px;
           }

#fondoresumen {width:650px; height:180px; background-color:beige;
		position:absolute;
		padding:15px;
                margin-top:48px; margin-left:310px;
                border:3px solid orange;}
#fondoresumen h3{color:black;}
#fondoresumen h5{color:brown;}
#fondoresumen p{font-size:14px;}

#fondoderecha {width:250px; height:100px;
		position:absolute;
		margin-top:120px; margin-left:0px;
                }


#contenidopuntos {width:270px; height:540px;
            position:absolute;
            background-color:beige;
            margin-left:0px;
            margin-top:-550px;
            border:10px solid orange;}

    .datos {width:280px; height:380px;
            text-align:center; margin-left:-20px;}
    .datos a {text-decoration:none;
            font-family: ÔMetrophobicÕ, Arial, serif;
            font-size:10px;
            color:black;
            }
    .datos a:hover {color:orange;}

    .dos{margin-top:0px;}

    h1 {font-family: ÔMetrophobicÕ, Arial, serif;
        font-size:17px;
        margin-top:10px;
        margin-left:60px;
        color:black;}
    h2 {margin-top:12px;
        font-family: ÔMetrophobicÕ, Arial, serif;
	font-size:12px;
        color:brown;}
#volver img {width:55px; height:50px;
            margin-top:10px;
            margin-left:100px;}




/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

html { height: 100%; }
*, *:after, *:before { -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

a {color: pink; text-decoration: none;}

.bk-list { width:370px; height:800px; /*contenedor VERDE*/
	list-style: none;
        margin-left:600px;
        margin-top:150px;
	position: relative;
}
.bk-list li { /*contenedor ROSA*/
	position: relative;
 margin-top:100px;
	width: 340px;
	float:left;
	z-index: 1;
	margin: 0px 0px 20px 30px;
	-webkit-perspective: 1800px;
	-moz-perspective: 1800px;
	perspective: 1800px;
}


.bk-info {position: relative; margin-top: 440px;}

.bk-info h3 { width:325px; height:100px;
                margin-top:110px;/* Abajo, titulo informativo y color de la linea de separacion del titulo y texto*/
	font-family: Metrophobic, Arial, serif;
        color:brown;
        padding: 25px 10px 10px 20px;
        margin-left:-10px;
	margin-bottom: 10px;
	border-bottom: 2px solid orange;
	font-size: 20px;
}

.bk-info h3 span:first-child { /* Abajo, autor*/

        font-size: 20px;
	font-weight: 400;
        margin-top:0px;
	padding: 5px 5px 5px 0px;
	display: block;
	color: black;
}

.bk-info p { line-height: 18px; text-align:justify;
            font-family:Metrophobic, Arial, serif;
            font-size:12px;
            padding: 5px 50px 5px 10px;
            color: black;
            min-height: 150px;}/* Abajo,texto informativo*/

.bk-info button {  /* cuadraditos*/
	background:none;
	border: none;
	color: white;
	display: inline-block;
	padding: 3px 15px;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	cursor: pointer;
	margin-right:30px;
	box-shadow: ; /* sombra cuadraditos*/
}

.no-touch .bk-info button:hover, .bk-info button.bk-active {background:;} /* cuadraditos q al ticar se queda de color marron*/

.bk-list li .bk-book {
	position: absolute;
	width: 100%;
	height: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
}

.bk-list li .bk-book.bk-bookdefault:hover {
	-webkit-transform: rotate3d(0,1,0,35deg);
	-moz-transform: rotate3d(0,1,0,35deg);
	transform: rotate3d(0,1,0,35deg);
}

.bk-list li .bk-book > div, .bk-list li .bk-front > div { display: block; position: absolute;}

.bk-list li .bk-front {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform-origin: 0% 50%;
	-moz-transform-origin: 0% 50%;
	transform-origin: 0% 50%;
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
	-webkit-transform: translate3d(0,0,20px);
	-moz-transform: translate3d(0,0,20px);
	transform: translate3d(0,0,20px);
	z-index: 10;
}

.bk-list li .bk-front > div {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.bk-list li .bk-page {
	-webkit-transform: translate3d(0,0,19px);
	-moz-transform: translate3d(0,0,19px);
	transform: translate3d(0,0,19px);
	display: none;
	width: 295px;
	height: 390px;
	top: 5px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 9;
}

.bk-list li .bk-front,
.bk-list li .bk-back,
.bk-list li .bk-front > div {width: 280px; height: 400px;} /* tama–o de la portada*/

.bk-list li .bk-left,
.bk-list li .bk-right { width: 40px; left: -20px;} /* linea rar del libro*/

.bk-list li .bk-top,
.bk-list li .bk-bottom {width: 295px; height: 40px; /* ni idea*/
	top: -15px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bk-list li .bk-back {
	-webkit-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	-moz-transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	transform: rotate3d(0,1,0,-180deg) translate3d(0,0,20px);
	box-shadow: 10px 10px 30px rgba(0,0,0,0.3);
	border-radius: 3px 0 0 3px;
}

.bk-list li .bk-cover-back {
	background-color: #000;
	-webkit-transform: rotate3d(0,1,0,-180deg);
	-moz-transform: rotate3d(0,1,0,-180deg);
	transform: rotate3d(0,1,0,-180deg);
}

.bk-list li .bk-right {
	height: 390px;
	top: 5px;
	-webkit-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
	-moz-transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
	transform: rotate3d(0,1,0,90deg) translate3d(0,0,295px);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bk-list li .bk-left {
	height: 400px;
	-webkit-transform: rotate3d(0,1,0,-90deg);
	-moz-transform: rotate3d(0,1,0,-90deg);
	transform: rotate3d(0,1,0,-90deg);
}

.bk-list li .bk-top {
	-webkit-transform: rotate3d(1,0,0,90deg);
	-moz-transform: rotate3d(1,0,0,90deg);
	transform: rotate3d(1,0,0,90deg);
}

.bk-list li .bk-bottom {
	-webkit-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
	-moz-transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
	transform: rotate3d(1,0,0,-90deg) translate3d(0,0,390px);
}

/* Transform classes */

.bk-list li .bk-viewinside .bk-front {
	-webkit-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
	-moz-transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
	transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
}

.bk-list li .bk-book.bk-viewinside {
	-webkit-transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
	-moz-transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
	transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
}
/* CONTRAPORTADA CONTRAPORTADA CONTRAPORTADA CONTRAPORTADA CONTRAPORTADA CONTRAPORTADA CONTRAPORTADA*/
.bk-list li .bk-book.bk-viewback {
	-webkit-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
	-moz-transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
	transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
}

.bk-list li .bk-viewback .bk-back {z-index: 10; background-image: url(../images2/contraportada.png);}

/* Main colors and content */
.bk-list li .bk-front > div {border-radius: 0 3px 3px 0; box-shadow:inset 4px 0 10px black; /* sombra del libro*/}

.bk-list li .bk-front:after {
	content: '';
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: -1px;
	width: 1px;
}

.bk-list li .bk-cover:after,
.bk-list li .bk-back:after { /* linea del lomo*/
	content: '';
	position: absolute;
	top: 0;
	left: 10px;
	bottom: 0;
	width: 3px;
	background: rgba(0,0,0,0.06);
	box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}

.bk-list li .bk-back:after { left: auto; right: 10px;}

.bk-left h2 { /* LOMOLOMOLOMOLOMOLOMOLOMOLOMOLOMOLOMOLOMOLOMOLOMOLOMOLOMO */
	width: 400px;
	height: 40px;
        margin-top:-1px;
        background-color:black;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotate(90deg) translateY(-40px);
	-moz-transform: rotate(90deg) translateY(-40px);
	transform: rotate(90deg) translateY(-40px);
}

.bk-content { height:389px; /* color de hoja por dentro */
	position: absolute;
	top: 5px;
	left: 15px;
	bottom: 20px;
	right: 20px;
	overflow: hidden;
	background: white;
	opacity: 0;
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
	cursor: default;
}
.bk-content-current { opacity: 1; pointer-events: auto;}

.bk-page nav { /* pasadores de pagina */
	display: block;
	text-align: center;
	margin-top: 370px;
	position: relative;
	z-index: 100;
	cursor: pointer;
}

.bk-page nav span { /* circulos */
	display: inline-block;
	width: 20px;
	height: 20px;
	color:white ;
	background: brown;
	border-radius: 50%;
}

/* Portada Portada Portada Portada Portada Portada Portada Portada Portada*/
.book-1 .bk-front > div,
.book-1 .bk-back,
.book-1 .bk-left, .book-1 .bk-front:after {background-image: url(../images2/portada2.png);}
.book-1 .bk-content img {height:390px;}

.book-1 .bk-left h2 { /* texto del lomo */
	color: white;
	font-size: 15px;
	line-height: 40px;
	padding-right: 30px;
	text-align: right;
}


/* Fallbacks */
.no-csstransforms3d .bk-list li .bk-book > div,
.no-csstransforms3d .bk-list li .bk-book .bk-cover-back { display: none;}

.no-csstransforms3d .bk-list li .bk-book > div.bk-front { display: block;}

.no-csstransforms3d .bk-info button,
.no-js .bk-info button { display: none;}








#telefono {width:100px; height:100px;
		float:left;
		margin-top:8px; margin-left:200px;
		}
#telefono img {width:50px; height:50px;}


.circulo {width:150px; height:150px;
			position:absolute;
			margin-top:0px;
			margin-left:110px;
			z-index:5
			}
.circulo img {width:70px; height:70px;}

.circulo2 {width:70px; height:70px;
			position:absolute;
			margin-top:0px;
			margin-left:20px;
			z-index:5;
			}
.circulo2 img {width:70px; height:70px;}






#pie {width:300px; height:20px; position:absolute; margin-top:-85px; margin-left:-11px;}
#pie p {font-family:verdana; font-size:10px; color:orange; text-align:center; }
#pie a {text-decoration:none; text-align:center;
             font-size:8px;
            color:white;}