@charset 'UTF-8';

@import url("https://fonts.googleapis.com/css?family=Bubblegum+Sans&subset=latin,latin-ext");

@import url("https://fonts.googleapis.com/css?family=Great+Vibes&subset=latin,latin-ext");

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

body,input,select,textarea

	{

		font-family: 'Open Sans', sans-serif;

		font-size: 12pt;

		color: #696969;

		font-weight: 300;

	}

	

	a

	{

		color:#FF0;

		text-decoration: underline;

	}

	

		a:hover

		{

			text-decoration: none;

		}

	

	h2, h3, h4, h5, h6

	{

	color: #444;

	font-weight: 800;

	font-family:  'Baloo', cursive;

	text-transform: uppercase;

	}

	

	h2 a, h3 a, h4 a, h5 a, h6 a

	{

		color: inherit;

		text-decoration: none;

		outline: 0;

	}

	

	



	b, strong

	{

	font-weight: 600;

	color:#FF0;

	}

	

	i, em

	{

		font-style: italic;

	}

	

	br.clear

	{

		clear: both;

	}



	sub

	{

		position: relative;

		top: 0.5em;

		font-size: 0.8em;

	}

	

	sup

	{

		position: relative;

		top: -0.5em;

		font-size: 0.8em;

	}

	

	hr

	{

		border: 0;

		border-top: solid 1px #eee;

	}

	

	blockquote

	{

		border-left: solid 0.5em #eee;

		padding: 1em 0 1em 2em;

		font-style: italic;

	}	

	

	p, ul, ol, dl, table

	{

		margin-bottom: 1em;

		font-size:1.2em;

	

    color: #8b512c;

	}

	

body{

	margin:auto;

	text-align:center;

	background-image:url(images/body.jpg);

}



#main{

	width:1024px;

	text-align:center;

	margin:auto;

	background-color:#FFF;

}



#content{

	width:1024px;

	text-align:center;

	margin:auto;

	background-image:url(images/fondo-principal.png);

	background-repeat:repeat-y;

}





#header{

	width:1024px;

	background-image:url(images/header.png);

	background-repeat:no-repeat;

	height:195px;



}



#logo{

	width: 355px;

	float: left;

	margin-left: 25px;

	margin-top: 12px;

}



#seguinos{

	width:150px;

	height:21px;

	float:right;

	margin-right:31px;

	text-align:right;

	margin-top:18px;

}







#clear{

	clear:both;

}



#content-principal{

	width:993px;

	margin-left:31px;

}



#sidebar{

	width: 200px;

	float: left;

	position: relative;

	z-index: 2;

}





#derecha{

	width: 740px;

	float: right;

	text-align: left;

	

	

}



#contenido-derecha{

	width:632px;

	margin-left:46px;

	text-align:left;

	

	

}



#novedades{

	width:632px;

	text-align:left;

	margin-bottom:30px;

}



h1{

		color:#F63 !important;

		font-size:3em !important;

		font-weight: 800;

	font-family:  'Baloo', cursive;

	text-transform: uppercase;

	}



#afiches{

	width:332px;

	float:left;

	text-align:left;

}







#pensamientos{

	width: 231px;

	float: right;

	text-align: left;

	margin: 0px;

}



#pensamientos p{

	text-align: left;



	color: #666666;

	}



#footer{

	width:1024px;

	margin:auto;

	text-align:center;

	background-image:url(images/fondo-principal.png);

	background-repeat:repeat-y;

}

#creditos{

	width:1004px;

	margin:auto;

	text-align:center;

	background-color:#EB7C15;

	padding:10px;

	color:#FFF;

	

}

#onda_footer{

	width: 1024px;

	height: 50px;

	text-align: right;

}



/* Image */



		.image

		{

			display: inline-block;

			outline: 0;

			-webkit-border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px;

		}

		

			.image img

			{

				display: block;

				width: 100%;

				border-radius: 8px;

			}



			.image.fit

			{

				display: block;

				width: 100%;

			}

		

			.image.featured

			{

				display: block;

				width: 100%;

				margin: 0 0 2.5em 0;

			}

		

			.image.left

			{

				float: left;

				margin: 0 2em 2em 0;

			}

		

			.image.centered

			{

				display: block;

				margin: 0 0 2.5em 0;

			}



				.image.centered img

				{

					margin: 0 auto;

					width: auto;

				}

				



	/* Button */



		input[type="button"],

		input[type="submit"],

		input[type="reset"],

		.button

		{

			font-family:  'Baloo', cursive;

			-webkit-appearance: none;

			position: relative;

			font-size: 1.35em;

			text-transform:uppercase;

			

			display: inline-block;

			background-color:#FFC;

			color:#F63;

			text-decoration: none;

			border-radius: 6px;

			font-weight: 800;

			outline: 0;

			border: 0;

			cursor: pointer;

			width:100%;

			-moz-transition: background-color .25s ease-in-out;

			-webkit-transition: background-color .25s ease-in-out;

			-o-transition: background-color .25s ease-in-out;

			-ms-transition: background-color .25s ease-in-out;

			transition: background-color .25s ease-in-out;

			line-height: 25px;
    padding: 5px;

		}

		

			input[type="button"]:hover,

			input[type="submit"]:hover,

			input[type="reset"]:hover,

			.button:hover

			{

				background: #fff;

		

			}

		

			input[type="button"]:active,

			input[type="submit"]:active,

			input[type="reset"]:active,

			.button:active

			{

				background: #fff;

				

			}

		

			.button.icon

			{

			}

			

				.button.icon:before

				{

					position: relative;

				}

		

			input[type="button"].alt,

			input[type="submit"].alt,

			input[type="reset"].alt,

			.button.alt

			{

				background: #f1f1f1;

				background: rgba(0,0,0,0.05);

				color: #444;

			}



				input[type="button"].alt:hover,

				input[type="submit"].alt:hover,

				input[type="reset"].alt:hover,

				.button.alt:hover

				{

					background: #e8e8e8;

					background: rgba(0,0,0,0.085);

				}



				input[type="button"].alt:active,

				input[type="submit"].alt:active,

				input[type="reset"].alt:active,

				.button.alt:active

				{

					background: #e4e4e4;

					background: rgba(0,0,0,0.15);

				}



/* GRID DE TEXTOS */

.grid {

  background: white;

  margin: 0 0 $pad 0;

  

  &:after {

    /* Or @extend clearfix */

    content: "";

    display: table;

    clear: both;

  }

}



[class*='col-'] {

	float: left;

  padding-right: $pad;

  .grid &:last-of-type {

  	padding-right: 0;

  }

}

.col-2-3 {

	width: 66.66%;

}

.col-1-3 {

	width: 33.33%;

}

.col-1-2 {

	width: 50%;

}

.col-1-4 {

	width: 25%;

}

.col-1-8 {

	width: 12.5%;

}



.module {

  padding: $pad;

/*  background: #eee;*/

  text-align: center;

}



.grid-pad {

  padding: $pad 0 $pad $pad;

  [class*='col-']:last-of-type {

    padding-right: $pad;

  }

}





#carousel {

  position: relative;

  height: 445px;

/*  top: 50%;

  transform: translateY(-50%);*/

  overflow: hidden;

}

#carousel div {

  position: absolute;

  transition: transform 1s, left 1s, opacity 1s, z-index 0s;

  opacity: 1;

  

}

#carousel div img {

  width: 296px;

  transition: width 1s;

  -webkit-box-shadow: 0 0 30px 1px #000;

box-shadow: 0 0 30px 1px #000;

}

#carousel div.hideLeft {

  left: 0%;

  opacity: 0;

  transform: translateY(50%) translateX(-50%);

}

#carousel div.hideLeft img {

  width: 200px;

}

#carousel div.hideRight {

  left: 100%;

  opacity: 0;

  transform: translateY(50%) translateX(-50%);

}

#carousel div.hideRight img {

  width: 200px;

}

#carousel div.prev {

  z-index: 5;

  left: 30%;

  transform: translateY(20%) translateX(-50%);

}

#carousel div.prev img {

  width: 300px;

}

#carousel div.prevLeftSecond {

  z-index: 4;

  left: 15%;

  transform: translateY(50%) translateX(-50%);

  opacity: 0.7;

}

#carousel div.prevLeftSecond img {

  width: 200px;

}

#carousel div.selected {

  z-index: 10;

  left: 50%;

  transform: translateY(10%) translateX(-50%);

}

#carousel div.next {

  z-index: 5;

  left: 70%;

  transform: translateY(20%) translateX(-50%);

}

#carousel div.next img {

  width: 300px;

}

#carousel div.nextRightSecond {

  z-index: 4;

  left: 85%;

  transform: translateY(50%) translateX(-50%);

  opacity: 0.7;

}

#carousel div.nextRightSecond img {

  width: 200px;

}



.buttons {

 /* position: fixed;

  left: 50%;

  transform: translateX(-50%);

  bottom: 10px;*/

  

}



.botonlibro{

position: absolute;

    top: 80%;

    left: 50%;

    transform: translate(-50%, -50%);

	width:40%;

	padding:10px;

	text-align:center;

	-webkit-box-shadow: 0 0 30px 1px #000;

box-shadow: 0 0 30px 1px #000;

	

}

.botonlibro a{

	text-align:center;

	color:#F63;

	

}



.siguiente {

	font-family:  'Baloo', cursive;

    -webkit-appearance: none;

    font-size: 1.05em;

    position: relative;

    padding: 10px;

    text-align: center;

  margin-top:10px;

	width:200px;

	float:right;

}

.anterior {

	font-family:  'Baloo', cursive;

    -webkit-appearance: none;

    font-size: 1.05em;

    position: relative;

    padding: 10px;

    text-align: center;

	margin-top:10px;

	width:200px;

	float:left;

}