*
{
	margin: 0px; /* Margen de la pagina web */
}
body
{
	background: url(../imagenes/fondo.jpg); /* Fondo de la pagina web, si se utiliza texto toma el formato cabezera definido en fuentes.css */
	background-size:  100%;
	background-attachment: fixed;
	font-family:titulo;
}
header /* Espacio Superior donde está el logo del Real Madrid*/
{
	background: black; 
	height: 140px;
	width: 100%;
	color: black;
	text-align: center;
	font-family: titulo;
	font-size: small;
} 
#contenedor /* Contenedor color gris donde está contenido el texto */
{
	background: gray; 
	width: 100%;
	padding: 5px;
}
#caja /* Fondo blanco de cada artículo tamaño 1 */
{
	background: url(../imagenes/fondo2.jpg); 
	background-size: 100%;
	width: 28%;
	display: inline-block;
	vertical-align: top;
	padding: 5px;
	margin: 10px;
}
#caja1 /* Fondo blanco de cada artículo tamaño 2 */
{
	background: url(../imagenes/fondo2.jpg);  
	background-size: 640px;
	background-repeat:no-repeat;
	width: 46%;
	display: inline-block;
	vertical-align: top;
	padding: 5px;
	margin: 10px;
}
#caja2 /* Fondo blanco de cada artículo tamaño 2 */
{
	background: url(../imagenes/fondo2.jpg);  
	background-size: 100%;
	width: 48%;
	display: inline-block;
	vertical-align: top;
	padding: 5px;
	margin: 10px;
}
#caja3 /* Caja Sin color para artículo video.html */
{
	background-size: 100%;
	width: 20%;
	display: inline-block;
	vertical-align: top;
}
#caja4 /* Caja blanca que contiene el video en la página video.html */
{
	background: url(../imagenes/fondo2.jpg); 	
	background-size: 100%;
	width: 48%;
	display: inline-block;
	vertical-align: top;
	padding: 10px;
	margin: 10px;
}
#texto /* Formato de la fuente utilizada en el texto */
{
	background: #dcdcdc;  
	width: 90%;
	margin: 5px;
	padding: 10px;
	display: inline-block;
	font-size: small;
}
#txtprecio /* Formato de la fuente utilizada en el texto */
{
	background: #dcdcdc;  
	width: 90%;
	margin: 5px;
	padding: 10px;
	display: inline-block;
	font-size: large;
}
#titulo /* Formato de la fuente utilizada en el título de los artículos */
{
	background: #FFFFFF;  
	width: 90%;
	margin: 0px;
	margin-top: 0px;
	padding: 10px;
	display: inline-block;
	font-family: titulo;
	font-size: 14pt;
}
#titulo1 /* Formato de la fuente utilizada en el título ejemplo: Biográfía */
{
	width: 90%;  
	margin: 5px;
	padding: 5px;
	text-align: center;
	display: inline-block;
	font-family: titulo;
	font-size: 25pt;
}
#imagen /* Fondo degradado de negro a blanco utilizado detrás de las fotos */
{
	padding: 10px; 
	margin: 5px;
	width: 90%;
	background:-webkit-linear-gradient(top,black 0%, gray 50%, white 100%);
}
#imagen2 /* Fondo utilizado para el artículo en la página realmadrid.html */
{
	padding: 10px; 
	margin: 5px;
	width: 100%;
}
#pelicula /* Tamaño del video en la página video.html */
{
	width: 100%;
}
#video_fondo /* video de fondo en la página video.html */
{
	position: fixed;
	left: 0;
	top: 0;
	min-height: 100%;
	min-width: 100%;
	width: auto;
	height: auto;
	z-index: -10;
}
#menu /* Color de la barra de menú */
{
	background: black; 
	padding: 0px;
	width: 100%;
}
#lista /* Formato del menú */
{
list-style: none;
	color: #737373;
}
#item /* Formato del menú */
{
	color: white; 
	background: black;
	width: 10%;
	display: inline-block;
	padding: 3px;
	border-radius: 0px 0px 0px 0px;
}
#boton /* Formato del menú */
{
	text-decoration: none;
}
#item:hover /* Formato del menú*/
{
	background: #2e2e2e;
	color: #FFFFFF;
	box_shadow: 0px 0px 15px white;
} 
a:link /* color de la fuente del item en el menú */
{
	text-decoration: none;
	color: #999999;
}
a:visited /* color de la fuente del item visitado en el menú */
{
	text-decoration: none;
	color: #999999;
}
a:hover /* color de la fuente del item cuando el mouse está sobre en el menú */
{
	text-decoration: none;
	color: #FF8000;
}
a:active /* color de la fuente del item cuando está activo en el menú */
{
	text-decoration: none;
}
body,td,th /* Formato fuente del menú */
{
	font-family: titulo;
	font-size: 15px;
	color: #000000;
}
#logo /* Tamaño de la imagen superior con el logo*/
{ 
	width: 950px;
	height: 191px;
}
#foto /* Formato Foto */
{ 
	width: 100%;
	height: 100%;
	border-radius:  5px;
	box-shadow: 1px 1px 1px black;
}
#foto2 /* Formato Foto2 */
{ 
	width: 100%;
	height: 100%;
	border-radius:  5px;
	box-shadow: 1px 1px 1px black;
}
#foto3 /* Formato Foto3 */
{ 
	width:  100%;
	height: 100%;
	border-radius:  5px;
	box-shadow: 1px 1px 1px black;
}
#foto4 /* Formato Foto4 */
{ 
	width:  95%;
	height: 95%;
	border-radius:  5px;
	box-shadow: 1px 1px 1px black;
}
#footer /* Formato Pie de Página */
{
	height: 110px;
	margin-top: 50px;
	background: #141414;
	text-align: center;
	color: #949697;
	font-family: titulo;
	font-size: medium;
}

@import "lesshat";

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.container{   
  width: 200px;
  height: 200px;
  position: absolute;
  //left: 0;
  right: 60px;
  margin: 0 auto;
  top:20px;
}



* {
			margin:0px;
			padding:0px;
			}
			
			#header {
				margin:auto;
				width:100%;
				font-family:titulo;
				font-size: 12pt;				
			}
			
			ul, ol {
				list-style:none;
			}
			
			.nav > li {
				float:left;
			}
			
			.nav li a {
				background-color:#ffffff;
				color:#8d8d8d;
				text-decoration:none;
				padding:10px 22px;
				display:block;
				display: inline-block;
				font-family:titulo;
				font-size: 13.5pt;
			}

			.nav li a:hover
			{
				background: #FFFFFF;
				color: #cc9833;
				box_shadow: 0px 0px 15px white;

			}
			.nav li ul {
				display:none;
				position:absolute;
				min-width:140px;
			}


			.nav li:hover > ul {
				display:block;
			}
			
			.nav li ul li {
				position:relative;
			}
			
			.nav li ul li ul {
				right:-118px;
				top:0px;
			}

.imgbanner{
	background-image:url(../images/banner.jpg);
	background-repeat:no-repeat;
	margin-bottom: 10px;
	width: 950px;
	height: 191px;
	display:block;
}

.imgagendas{
	background-image:url(../images/agendas.jpg);
	background-repeat:no-repeat;
	margin-top: 20px;
	margin-bottom: 5px;
	width: 950px;
	height: 52px;
	display:block;
}

.arbtext{
	background-image:url(../images/arbtext.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 250px;
	height: 279px;
	display:block;
}

.madera{
	background-image:url(../images/madera.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 200px;
	height: 220px;
	display:block;
}

.madera2{
	background-image:url(../images/madera02.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 300px;
	height: 200px;
	display:block;
}

.img2{
	background-image:url(../images/slide_03.jpg);
	background-repeat:no-repeat;
	margin-top: 7px;
	margin-bottom: 5px;
	width: 950px;
	height: 372px;
	display:block;
}
.img3{
	background-image:url(../images/slide_02.jpg);
	background-repeat:no-repeat;
	margin-top: 7px;
	margin-bottom: 5px;
	width: 950px;
	height: 372px;
	display:block;
}
.img4{
	background-image:url(../images/portavelas_S.png);
	background-repeat:no-repeat;
	margin-top: 30px;
	margin-bottom: 5px;
	width: 500px;
	height: 304px;
	display:block;
}
.img5{
	background-image:url(../images/portalapices.jpg);
	background-repeat:no-repeat;
	margin-top: 7px;
	margin-bottom: 5px;
	width: 950px;
	height: 372px;
	display:block;
}
.img6{
	background-image:url(../images/portavelas.jpg);
	background-repeat:no-repeat;
	margin-top: 30px;
	margin-bottom: 5px;
	width: 950px;
	height: 379px;
	display:block;
}
.img7{
	background-image:url(../images/cajitas.jpg);
	background-repeat:no-repeat;
	margin-top: 30px;
	margin-bottom: 5px;
	width: 950px;
	height: 379px;
	display:block;
}
.img8{
	background-image:url(../images/5_materias.jpg);
	background-repeat:no-repeat;
	margin-top: 30px;
	margin-bottom: 5px;
	width: 700px;
	height: 279px;
	display:block;
}
.img9{
	background-image:url(../images/libretas.jpg);
	background-repeat:no-repeat;
	margin-top: 30px;
	margin-bottom: 5px;
	width: 700px;
	height: 279px;
	display:block;
}
.imgenv{
	background-image:url(../images/envios.png);
	background-repeat:no-repeat;
	margin-top: 10px;
	margin-bottom: 30px;
	width: 950px;
	height: 314px;
	display:block;
}
.imgped{
	background-image:url(../images/tupedido.png);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 30px;
	width: 950px;
	height: 369px;
	display:block;
}
.imgwp{
	background-image:url(../images/whatsapp.png);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 180px;
	height: 60px;
	display:block;
}
.limit{
	background-image:url(../images/limit.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 60px;
	width: 950px;
	height: 1px;
	display:block;
}	
		
img:hover{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}



/* @import url(http://fonts.googleapis.com/css?family=Varela+Round); */

/* html, body { background: #333 url("http://codepen.io/images/classy_fabric.png"); } */

.slides {
    padding: 0;
    width: 609px;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

.slide-container { display: block; }

.slide {
    top: 0;
    opacity: 0;
    width: 609px;
    height: 420px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
}

.nav label {
    width: 200px;
    height: 100%;
    display: none;
    position: absolute;

	  opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.5; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }

input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

.nav-dots {
	width: 100%;
	bottom: 9px;
	height: 11px;
	display: block;
	position: absolute;
	text-align: center;
}

.nav-dots .nav-dot {
	top: -5px;
	width: 11px;
	height: 11px;
	margin: 0 4px;
	position: relative;
	border-radius: 100%;
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots .nav-dot:hover {
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6 {
	background: rgba(0, 0, 0, 0.8);
}




#navegador ul{
   list-style-type: none;
   text-align: center;
}
#navegador li{
   display: inline;
   text-align: center;
   margin: 0 10px 0 0;
}
#navegador li a {
   padding: 2px 7px 2px 7px;
   color: #666;
   background-color: #eeeeee;
   border: 1px solid #ccc;
   text-decoration: none;
}
#navegador li a:hover{
   background-color: #333333;
   color: #ffffff;
}



* {
    box-sizing: border-box;
}

body {
    text-align: center;
}

input[name="slider-select-element"] {
    display: none;
}

#slider-arrows {
    margin: -10% auto 0 auto;
    width: 80%;
}

#slider-box {
    -moz-animation: autoSlider 15s infinite linear;
    -o-animation: autoSlider 15s infinite linear;
    -webkit-animation: autoSlider 15s infinite linear;
    animation: autoSlider 15s infinite linear;

    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    transition: all 0.75s ease;

    height: 100%;
    width: 300%;
}

#slider-container2 {
    height: 279px;
    margin: 0 auto;
    margin-top: 7px;
    margin-bottom: 10px;
    overflow: hidden;
    text-align: left;
    width: 700px;
    border: 1px solid #ccc;
}

#slider-container {
    height: 379px;
    margin: 0 auto;
    margin-top: 7px;
    margin-bottom: 20px;
    overflow: hidden;
    text-align: left;
    width: 950px;
    border: 1px solid #ccc;
}

.element-blue,
.element-green,
.element-red,
.element-barro01,
.element-barro02,
.element-cajitas01,
.element-alcancias01 {
    min-height: 400px;
    max-height: 100%;
    width: 100%;
}

.element-blue {
    	background-image:url(../images/slide_01.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 5px;
	width: 950px;
	height: 379px;
	display:block;
}

.element-green {
    	background-image:url(../images/slide_02.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 5px;
	width: 950px;
	height: 379px;
	display:block;
}

.element-red {
    	background-image:url(../images/slide_03.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 5px;
	width: 950px;
	height: 379px;
	display:block;
}

.element-barro01 {
    	background-image:url(../images/img01.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 5px;
	width: 700px;
	height: 279px;
	display:block;
}

.element-barro02 {
    	background-image:url(../images/img02.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 5px;
	width: 700px;
	height: 279px;
	display:block;
}

.element-barro03 {
    	background-image:url(../images/img03.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 5px;
	width: 700px;
	height: 279px;
	display:block;
}

.element-alcancias01 {
    	background-image:url(../images/alcancias01.jpg);
	background-repeat:no-repeat;
	margin-top: 0px;
	margin-bottom: 5px;
	width: 700px;
	height: 279px;
	display:block;
}

.slider-element {
    float: left;
    width: 33.333%;
}

@-moz-keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}

@-webkit-keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}

@keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}


.div-img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    .img{
        display:block;
        margin-left: auto;
        margin-right: auto;
        width: 200px;
        height: 200px;
        border-radius: 150px;
        -webkit-border-radius: 150px;
        -moz-border-radius: 150px;   
        transform:translate(0px);
        -ms-transform:translate(0px); // IE 9 
        -moz-transform:translate(0px); // Firefox 
        -webkit-transform:translate(0px); // Safari and Chrome 
        -o-transform:translate(0px); // Opera 
        -webkit-transition: all 500ms ease-in-out; // IE 9
        -moz-transition: all 500ms ease-in-out; // Firefox
        -ms-transition: all 500ms ease-in-out; // Safari and Chrome 
        -o-transition: all 500ms ease-in-out; // Opera    
    }      
    .text{
        font-family: 'Open Sans';
        position:absolute;
        z-index: -1;
        display:block;
        height: 50%;
        top:50%;
        right:0;
        padding-right:5px;
    }
    .txtprecio{
        font-family: titulo;
        position:absolute;
        z-index: -1;
        display:block;
        height: 150%;
        top:50%;
        right:0;
        padding-right:5px;
    }
    &:hover{
        .img{
            transform:translate(-90px,0px);
            -ms-transform:translate(-90px,0px); // IE 9 
            -moz-transform:translate(-90px,0px); // Firefox 
            -webkit-transform:translate(-90px,0px); // Safari and Chrome 
            -o-transform:translate(-90px,0px); // Opera
        }
     } 
}


/* http://www.menucool.com */

#sliderFrame, #sliderFrame div {
    box-sizing: content-box;
}
#sliderFrame 
{
    width:700px;
    margin:0 auto; /*center-aligned*/
}

#slider, #slider .sliderInner {
    width:700px;height:306px;/* Must be the same size as the slider images */
    border-radius:3px;
}

#slider {
    background-color:white;
    position:relative;
    margin:0 auto; /*center-aligned*/
    transform: translate3d(0,0,0);
    box-shadow: 0px 1px 5px #999999;
}

/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
    z-index:2;
    cursor:pointer;
    position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}
#slider .video {
    background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider .mc-caption {
    position:absolute;
    width:100%;
    height:auto;
    padding:10px 0;/* 10px will increase the height.*/
    left:0px;
    bottom:0px;top:auto;
    overflow:hidden;
    font: bold 14px/20px Arial;
    color:#EEE;
    text-align:center;
    background:rgba(0,0,0,0.3);
}
#slider .mc-caption a {
    color:#FB0;
}
#slider .mc-caption a:hover {
    color:#DA0;
}


/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper  {
    top:320px;
    text-align:center;
    background:none;
    position:relative;
    z-index:3;
}

/* each bullet */
#slider .navBulletsWrapper div 
{
    width:11px; height:11px;
    font-size:0;color:White;/*hide the index number in the bullet element*/
    background:transparent url(bullet.png) no-repeat 0 0;
    display:inline-block; *display:inline; zoom:1;
    overflow:hidden;cursor:pointer;
    margin:0 6px;/* set distance between each bullet*/
}

#slider .navBulletsWrapper .active {background-position:0 -11px;}


/* --------- Others ------- */

#slider img, #slider>b, #slider a>b {
    position:absolute; border:none; display:none;
}

#slider .sliderInner {
    overflow:hidden;
    position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}