*{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;font-weight:normal;}
:focus{outline:0}
body{background:url(../images/bg-site.jpg) top center no-repeat;line-height:1;color:#333;font:12px/120% Arial,Verdana,Tahoma,'Sans-serif';text-align:center;-webkit-font-smoothing: antialiased }
a{color:#6A6A6A;text-decoration:none}
li{list-style:none}
blockquote:before, blockquote:after,
q:before, q:after {content:""}
blockquote, q{quotes:"" ""}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
button {border:medium none;overflow:visible}
button, input[type="reset"], input[type="button"], input[type="submit"] { line-height:10px !important; cursor: pointer}
@-moz-document url-prefix() { button span{position:relative;top:-2px} }
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
caption,th{text-align:left}
abbr,acronym {border:0;font-variant:normal}
textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt}
*:link, *:visited, *:hover, *:active, *:focus {  -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ display: block; }
.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0 }
.clearfix { display:inline-block }
html[xmlns] .clearfix { display:block }
* html .clearfix { height:1% }

.main { width: 950px; margin: 10px auto }

/* header */
.main header { position: relative; clear: left; background: url(../images/bg-nav.png) 50% 45% no-repeat; background-size: 70% auto; margin: 0 -100px; z-index: 2 }
.main header h1 { position: relative; float: left; display: block; background: url(../images/pony.png) 0 0 no-repeat; width: 253px; height: 187px; margin: 0 -30px 0 40px; text-indent: -9000px; z-index: 3 }
.main header h1 a { display: block; width: 100%; height: 100% }
.main .explore { float: right; display: block; background: url(../images/explore.png) 0 0 no-repeat; width: 245px; height: 240px; margin: -15px 30px 0 -30px; text-indent: -9000px }


/* nav */
.navbar-nav { width: 62%; }
.main header nav { margin-top: 20px }
.main header nav li { float: left; margin-top: 10px; width: 20%}
.main header nav li.even { margin-top: 55px; }
.main header nav li a { position: relative; display:block; background: url(../images/nav.png) 50% 0 no-repeat; min-width: 110px;  width: 100%; height: 110px; padding: 40px 0 0; font: 26px/27px 'Slackey'; color: #fff; letter-spacing: -0.05em; }
.main header nav li:nth-child(1) a { padding: 25px 0 0 }
.main header nav li:hover a,
.main header nav li.active a { background-color: transparent; font-size: 29px }
.main header nav li a span { position: relative; left: 50%; min-width: 100%; display: inline-block; z-index: 2; transform:translateX(-50%);
-ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); }
.main header nav li a small { position: absolute; top:0; left:0; display:block; height:101px; width:100%; background: url(../images/nav.png) no-repeat 50% -114px; opacity: 0; z-index: 1; -webkit-transition: -webkit-transform 0.2s, opacity 0.3s; -moz-transition: -moz-transform 0.2s, opacity 0.3s; transition: transform 0.2s, opacity 0.3s; }
.main header nav li:hover a small,
.main header nav li.active a small { opacity: 1; -webkit-animation-name:pulse; 
			-webkit-animation-duration:250ms; 
			-webkit-animation-timing-function: ease-out;
			
			-moz-animation-name:pulse; 
			-moz-animation-duration:250ms; 
			-moz-animation-timing-function: ease-out; }

.main header nav .menu-mobile { display: none }
.main article { position: relative; display: block; clear: left; top: -35px; z-index: 1 }
.main article .title { background: url(../images/title/juegos.png) 50% 0 no-repeat; max-width: 556px; width: 100%; height: 181px; font: 60px/58px 'Slackey'; color: #fff; margin: 0 auto 35px; padding-top: 30px;}
.main article .title small { display: block; font-size: 48px; color: #fff }
.main article .box { display: block; border-radius: 10px; border: 6px solid #e9b425; overflow: hidden; margin-bottom: 15px; max-height: 550px; behavior: url(../css/PIE.htc); }
.main article .boxx { position: relative; margin: 0 auto; display: block; border-radius: 10px; border: 6px solid #e9b425; overflow: hidden; max-height: 100%; max-width:900px; behavior: url(../css/PIE.htc); }
.main article .boxx-top { background: url(../images/marco2.png) 0 0 no-repeat; background-size: container;  margin: 0 auto 15px; padding: 10px; max-height: 570px; max-width:920px; display: block }
.main article .box-bg { display: block; border-radius: 10px; overflow: hidden; margin-bottom: 15px; height: 501px; background: url(../images/bg-box.png) 0 0 no-repeat; padding: 15px 0; text-align: center; behavior: url(../css/PIE.htc); background-size: 100% auto; }
.main article .box-bg div { margin: 0 auto; text-align: center }
.main article .downloads .personaje2,
.main article .downloads .personaje3,
.main article .downloads .personaje4,
.main article .downloads .personaje5,
.main article .downloads .personaje6,
.main article .downloads .personaje7,
.main article .downloads .personaje8,
.main article .downloads .personaje9,
.main article .downloads .personaje10,
.main article .downloads .personaje11,
.main article .downloads .personaje12,
.main article .downloads .personaje13,
.main article .downloads .personaje14,
.main article .downloads .personaje15,
.main article .downloads .personaje16,
.main article .downloads .personaje17,
.main article .downloads .personaje18,
.main article .downloads .personaje19,
.main article .downloads .personaje20 { display: none }

.main article a.link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 3; }

/* banners */
aside.top { display: block; background: rgba(0,0,0,0.2); font: 700 17px/24px Arial; color: #fff; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px }
aside.banner { position: relative; clear: left; display: block; margin-bottom: 15px; z-index: 10; }
aside.banner img { position: relative; width: 100%; display: inherit; z-index: 0; -webkit-transform: scale(1, 1); -webkit-transition-duration: 250ms; -webkit-transition-timing-function: ease-out; -moz-transform: scale(1, 1); -moz-transition-duration: 250ms; -moz-transition-timing-function: ease-out; -ms-transform: scale(1, 1); -ms-transition-duration: 250ms; -ms-transition-timing-function: ease-out; }
aside.banner:hover img { -webkit-transform: scale(1.03, 1.03);
        -webkit-transition-duration: 250ms;
        -webkit-transition-timing-function: ease-out;
        -moz-transform: scale(1.03, 1.03);
        -moz-transition-duration: 250ms;
        -moz-transition-timing-function: ease-out;
        -ms-transform: scale(1.03, 1.03);
        -ms-transition-duration: 250ms;
        -ms-transition-timing-function: ease-out; }

aside.banner div { position: absolute; left: 40px; top: 30px; text-align: left; width: 100%; z-index: 2; }
aside.banner h2 { font: 46px/46px 'Slackey'; color: #fff; margin-bottom: 20px; cursor: pointer }
aside.banner h2 big { display: block; font: 55px/53px 'Slackey' }
aside.banner-small div { left: auto; right: 25px; top: 10px; text-align: right }
aside.banner-bottom div { left: auto; right: 25px; top: auto; bottom: 15px }
aside.banner-small h2,
aside.banner-medium h2,
aside.banner-bottom-small h2 { font: 35px/36px 'Slackey'; margin-bottom: 10px; }
aside.banner h2 small,
aside.banner-small h2 small,
aside.banner-medium h2 small { display: block; font: 28px/29px 'Slackey'; color: #fff }
aside.banner-small h2 small small { font: 22px/24px 'Slackey' }
aside.banner-bottom h2 small { font: 22px/24px 'Slackey'; color: #fff }
aside.banner-medium { clear: none; float: left  }
aside.banner-medium div { left: 15px; top: 10px }
aside.banner-top div { left: auto; right: 35px; top: 5px; bottom: auto; text-align: right }
aside.banner-bottom-small div { left: 40px; top: 15px }

/* btn */
.btn { position: relative; background: url(../images/btn/btn01.png) 0 0 no-repeat; font: 24px/45px 'Slackey'; text-transform: uppercase; display: inline-block; width: 280px; height: 58px; color: #fff; -webkit-transform: scale(1, 1);
        -webkit-transition-duration: 250ms;
        -webkit-transition-timing-function: ease-out;
        -moz-transform: scale(1, 1);
        -moz-transition-duration: 250ms;
        -moz-transition-timing-function: ease-out;
        -ms-transform: scale(1, 1);
        -ms-transition-duration: 250ms;
        
}
.btn:hover,
aside.banner:hover .btn,
.flexslider .slides li:hover .btn,
.flexslider.carousel .slides li:hover .btn { -webkit-transform: scale(1.1, 1.1);
        -webkit-transition-duration: 250ms;
        -webkit-transition-timing-function: ease-out;
        -moz-transform: scale(1.1, 1.1);
        -moz-transition-duration: 250ms;
        -moz-transition-timing-function: ease-out;
        -ms-transform: scale(1.1, 1.1);
        -ms-transition-duration: 250ms;
        -ms-transition-timing-function: ease-out; }

@-webkit-keyframes pulse {
	0% { -webkit-transform:scale(1) }
	50% { -webkit-transform:scale(1.25) }
	100% { -webkit-transform:scale(1) }
	}
	@-moz-keyframes pulse {
	0% { -moz-transform:scale(1) }
	50% { -moz-transform:scale(1.25) }
	100% { -moz-transform:scale(1) }
}
.btn-02 { background-image: url(../images/btn/btn02.png); width: 98px }
.btn-03 { background-image: url(../images/btn/btn03.png); width: 118px }
.btn-04 { background-image: url(../images/btn/btn04.png); width: 180px }
.btn-05 { background-image: url(../images/btn/btn05.png); width: 468px }

.productos h2 { position: relative; margin: 0 0 -70px; background: url(../images/title/productos.png) top center no-repeat; background-size: cover; width: 108%; min-height: 180px; text-indent: -9000px; left: 50%; transform:translateX(-50%);
-ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); }
.productos section { background: url(../images/bg-products.png) bottom center no-repeat #63328e; background-size: 100%; padding-bottom: 32px; padding-top: 40px; margin-bottom: 40px }
.productos section ul ul { padding: 22px 11px }
.productos section ul ul li { float: left; width: 25%; padding: 25px; margin-right: 0; margin-bottom: 22px; overflow: hidden; background: url(../images/container01.png) 50% no-repeat; background-size: contain;  }
.productos section ul ul li:nth-child(even) { background: url(../images/container02.png) 50% no-repeat; background-size: contain;  }
.productos section ul ul li img { width: 100% }
.productos section ul ul li a { position: relative; display: block; padding: 15px; min-height: 60px; background: #d1b9dc }
.productos section ul ul li a:after { position: absolute; top: -20px; left: 0; content: ""; display: block; width: 100%; height: 20px; border-style: solid; border-width: 15px 0 0 194px; border-color: transparent transparent transparent #6b3585; z-index: 2 }
.productos section ul ul li a big { position: absolute; bottom: 10px; left: 0; display: block; font: 18px/22px 'Slackey'; color: #fff; text-align: center; width: 100% }
.productos section ul ul li a span { display: none!important; position: absolute; top: auto; bottom: 15px; right: 20px; display: block; color: #652384; width: 30px; height: 30px; margin: 0; background: #FFF; border-radius: 20px; -webkit-box-shadow: 0 3px 3px 0 rgba(0,0,0,0.5); box-shadow: 0 3px 3px 0 rgba(0,0,0,0.5); behavior: url(../css/PIE.htc); }
.productos section ul ul li a .glyphicon-share-alt:before { font-size: 20px; line-height: 30px; }
.productos section .flex-control-nav { right: 50%; bottom: 5px; margin-right: -40px; }

.movie h2 { position: absolute; top: -45px; left: 20px; font: 35px/55px 'Slackey'; color: #fff; margin-bottom: 20px; z-index: 2 }
.movie h2 big { font-size: 55px }
.movie iframe { padding: 50px }
.movie-video h2 { left: auto; right: 80px }
.movie-video { min-height: 555px; background: url(../images/movie/video.png) 0 0 no-repeat; background-size: contain }
.movie-historia { margin: 40px 0 0; min-height: 481px; width: 100%; background: url(../images/movie/historia.png) 0 0 no-repeat; background-size: contain }
.movie-historia img { position: absolute; right: -45px; top: 50%; transform:translateY(-60%); -ms-transform:translateY(-60%); -webkit-transform:translateY(-60%);}
.movie-amigos { position: relative; margin-top: -60px; margin-bottom: 30px; min-height: 323px; background: url(../images/movie/amigos.png) 0 0 no-repeat; background-size: contain }
.movie-amigos ul { width: 100% }
.movie-amigos ul li { position: relative; float: left; width: 12.5%; display: inline-block; text-align: center }
.movie-amigos ul li a { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; outline:0; z-index: 10 }
.movie-amigos ul li img { position: relative; margin: -40px 0 -60px; left: 50%; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); z-index: 1 }
.movie-amigos ul li strong { display: block; font: 18px/20px 'Slackey'; color: #fff; margin-top: -7px; text-shadow: 0 0 3px rgba(0,0,0,0.9);  -webkit-transition-duration: 250ms;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-duration: 250ms;
        -moz-transition-timing-function: ease-out;
        -ms-transition-duration: 250ms; }
.movie-amigos ul li:hover strong { font-size: 20px }
.movie-amigos ul li:nth-child(1) { margin: 30px 0 0 -20px; }
.movie-amigos ul li:nth-child(2) { margin: 80px 0 0; }
.movie-amigos ul li:nth-child(3) { margin: 15px 0 0; }
.movie-amigos ul li:nth-child(4) { margin: 35px 13px 0; }
.movie-amigos ul li:nth-child(5) { margin: 100px 0 0; }
.movie-amigos ul li:nth-child(6) { margin: 20px 0 0 -10px; }
.movie-amigos ul li:nth-child(7) { margin: 100px 0 0; }
.movie-amigos ul li:nth-child(8) { margin: 0 -10px 0 0; }
.movie-historia h2 { top: 35px; left: 40px }
.movie-historia p { width: 45%; text-align: left; padding-top: 100px; margin-left: 5%; font: 20px/22px 'Slackey'; color: #fff; }


/*.modal.in .modal-dialog {
    position: absolute;
    left: 50%;
    top: 50% !important;
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	-ms-transform:translate(-50%,-50%);
}*/

.modal-dialog { background: url(../images/marco3.png) 0 0 no-repeat; background-size: 100% 100% }
.modal-content { background-color: transparent; border: 0; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
} 
.modal-header { border: 0 }
.modal-body img.big { position: absolute; left: 0; top: 50%;
    -moz-transform: translate(-65%, -50%);
    -webkit-transform: translate(-65%, -50%);
    -o-transform: translate(-65%, -50%);
    transform: translate(-65%, -50%);
	-ms-transform:translate(-65%, -50%);
}	
.modal-dialog, 
.modal-content,
.modal-body { width: 711px; min-width: 711px; min-height: 657px }
.modal-body h2 { font: 55px/60px 'Slackey'; color: #fff; white-space: nowrap; margin-top: 0; }
.modal-body .actor { position: absolute; left: -15%; top: 10%; }
.modal-body .actor img { display: block; margin: 10px auto }	
.modal-body .actor h3 { width: 280px; font: 30px/32px 'Slackey'; color: #fff; }	
.modal-body p { font: 20px/22px 'Slackey'; color: #fff; text-align: left; padding: 5% 10% 0 27%; }	
.modal-body #personajes-movie { position: absolute; right: 25px; bottom: 120px;}	
.modal-body #personajes-movie .flex-direction-nav .flex-prev { left: -40px; margin: 0 }
.modal-body #personajes-movie .flex-direction-nav .flex-next { right: -40px; margin: 0 }
.modal-body #personajes-movie ul li strong { display: block; font: 18px/20px 'Slackey'; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,0.9) }
.modal-body #personajes-movie ul li a,
.modal-body #personajes-movie ul li a:hover { text-decoration: none }
.modal-header .close { position: relative; font-size: 45px; padding: 10px; color: #fff; opacity: 1; z-index: 200 }
.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: bottom;
}
#modal-alert .modal-dialog { background: url(../images/marco4.png) 0 0 no-repeat; background-size: 100% 100% }
#modal-alert .modal-dialog, 
#modal-alert .modal-content,
#modal-alert .modal-body { width: 983px; min-width: 983px; min-height: 444px }
#modal-alert .modal-body h2 { font: 55px/60px 'Slackey'; color: #000 }
#modal-alert .modal-body p { font: 20px/22px 'Slackey'; color: #000; text-align: center; padding: 5% }	
#modal-alert .modal-body .btn { color: #000 }	
#modal-alert .vertical-alignment-helper {
    height: 95%;
}
#modal-alert .vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: bottom;
}
/* 1440 */
@media (min-width: 1441px) {
	.main { 
		width: 1190px 
	}
	.main article {
		display: block;
		width: 997px;
		margin: 0 auto;
	}
	.main header {
		margin: 0 -97px;
	}/*
	aside.banner-small {
		width: 323px;
		margin: 0 15px 15px 0;
	}	
	aside.banner-medium,
	#biblio.biblio3 { 
		width: 483px; 
		margin: 0 21px 15px 0;
		padding-right: 0
	}
	aside.banner-small h2,
	aside.banner-medium h2,		
	#biblio h4 big,
	#biblio.biblio2 h4 big,
	#biblio.biblio3 h4 big { 
		font-size: 42px;
		line-height: 48px;
	}
	aside.banner-small h2 small,
	aside.banner-medium h2 small { 
		font-size: 37px;
		line-height: 40px
	}*/
	.flexslider {
		margin: 0 0 15px;
	}
	#download .flex-viewport { 
		height: 838px 
	}
	#download .slides img {
		height: 732px
	}
	.main article .boxx { 
		max-width: 997px;
		margin-bottom: 15px;
	}
	.main article .box {
		max-height: 608px; 
	}
	.main article .box iframe,
	.main article .boxx #content {
		width:997px !important; 
	}
	#biblio .slides div {
		width: 90%
	}
	/*#biblio h4
	#biblio.biblio2 h4
	#biblio.biblio3 h4 { 
		font-size: 31px;
		line-height: 40px
	}*/
	#biblio h4 br {
		display: none
	}
	#biblio.biblio2 .slides img { 
		width: 100% 
	}
	.flexslider.carousel {
		/*width: 810px;*/
	}
	#download a.flex-down {
		bottom: -93px
	}
}

/* 1440 */
@media (max-width: 1440px) and (min-width: 1025px) {
	.navbar-nav { 
		width: 57%;
	}	
	.main .explore { 
		/*margin: 0;  */
	}
	.productos section ul ul li a:after { border-width: 15px 0 0 182px }

}

/* 1024 */
@media (max-width: 1024px) and (min-width: 992px) {
	.navbar-nav { 
		width: 57%;
	}	
	.main { 
		width: 970px 
	}		 
	.main header h1 {
		margin: 0 -50px 0 80px;
		background-size: contain;
		width: 250px; 
		height: 160px;
	}
	.main .explore {
		margin-right: 70px;
		background-size: contain;
		width: 200px;
		height: 193px;
	}
	
	.main header nav li a { 
		font-size: 20px;
		width: 110px;
	}
	.modal-body img.big {
		moz-transform: translate(-70%, -50%) scale(0.6, 0.6);
		-webkit-transform: translate(-70%, -50%) scale(0.6, 0.6);
		-o-transform: translate(-70%, -50%) scale(0.6, 0.6);
		transform: translate(-70%, -50%) scale(0.6, 0.6);
		-ms-transform: translate(-70%, -50%) scale(0.6, 0.6);
	}
	.modal-body .actor {
		 left: -2%;
	}
	.modal-body .actor img {
		background-size: contain;
		width: 230px;
		height: 230px;
	}
	.modal-body .actor h3 {
		width: 230px;
	}
	.modal-body p {
		padding-left: 35%
	}
	.modal-body h2 {
		font-size: 45px
	}
}
/* 800 */
@media (max-width: 991px) and (min-width: 768px) {
	.navbar-nav { 
		width: 57%;
	}	
	.main { 
		width: 745px 
	}	
	.main header {
		margin: 0;
	}	 
	.main header h1 {
		margin: 0 -15px 0 -20px;
		background-size: contain;
		width: 200px; 
		height: 160px;
	}
	.main .explore {
		margin-right: -40px;
		background-size: contain;
		width: 200px;
		height: 193px;
	}
	.main header nav li a { 
		font-size: 20px;
		width: 110px;
	}
	.main header nav li:hover a,
	.main header nav li.active a { 
		font-size: 22px
	}

	.main header nav li.even {
		margin-top: 70px;
	}	
	
	.flexslider .slides h2,
	#biblio h4 {
		font-size: 25px;
		line-height: 25px;
	}
	.flexslider .slides h2 big {
		font-size: 30px;
		line-height: 30px;
	}
	aside.banner-small {
		width: auto;
	}
	aside.banner-small h2,
	aside.banner-medium h2 { 
		font-size: 22px;
		line-height: 22px;
	}
	aside.banner h2 small,
	aside.banner-small h2 small,
	aside.banner-medium h2 small {
		font-size: 20px
	}
	aside.banner h2,
	aside.banner-small h2,
	aside.banner-medium h2,
	aside.banner-bottom-small h2{
		font-size: 25px;
		line-height: 25px;
	}
	aside.banner h2 big {
		font-size: 40px;
		line-height: 40px;
	}
	aside.banner-small div {
		width: 245px !important;	
	}

	.main .productos h2 {
		margin: 0 0 -60px;
		width: 110%;
		min-height: 135px;
	}
	footer a { right: 15px }
	
	.movie-historia p {
		width: 49%;
		padding-top: 80px;
		font: 16px/18px 'Slackey';
	}
	.movie h2 big { font-size: 45px; }
	.movie-historia img { right: -100px; -webkit-transform: translateY(-60%) scale(0.6, 0.6); -moz-transform: translateY(-60%) scale(0.6, 0.6); -ms-transform: translateY(-60%) scale(0.6, 0.6); }
	.movie-amigos { background-size: cover; }
	.movie-amigos ul li img { -webkit-transform: translateX(-50%) scale(0.8, 0.8); -moz-transform: translateX(-50%) scale(0.8, 0.8); -ms-transform: translateX(-50%) scale(0.8, 0.8); }
	.movie-amigos ul li strong { font: 15px/18px 'Slackey'; }

	.btn { 
		font-size: 18px;
		height: 40px;
		line-height: 27px;
		background-size: contain;
		background-position: 50%;
		width: auto
	  }

	.modal-dialog, .modal-content, .modal-body { width: 74%; min-width: 74%; min-height: 760px }
	.modal-body .actor img,
	.modal-body .actor h3 {  width: 200px; }
	.modal-body img.big {
		moz-transform: translate(-60%, -65%) scale(0.6, 0.6);
		-webkit-transform: translate(-60%, -65%) scale(0.6, 0.6);
		-o-transform: translate(-60%, -65%) scale(0.6, 0.6);
		transform: translate(-60%, -65%) scale(0.6, 0.6);
		-ms-transform: translate(-60%, -65%) scale(0.6, 0.6);
	}
	.modal-body .actor {
		 left: 3%;
	}
	.modal-body .actor img {
		background-size: contain;
		width: 200px;
		height: 200px;
	}
	.modal-body p {
		padding-left: 40%
	}
	.modal-body #personajes-movie {
		bottom: 40px
	}	
	.modal-body h2 {
		font-size: 45px
	}
	#modal-alert .modal-dialog, 
	#modal-alert .modal-content,
	#modal-alert .modal-body { width: 100%; min-width: 100%; min-height: 444px }
	#modal-alert .modal-body p { font-size: 14px; padding-left: 5% }	

	
}
/* 400 */
@media (max-width: 767px) {
	
	.main header h1 { 
		background-size: contain;
		width: 137px; 
		height: 121px;
		margin: 0;
	}
	.main { 
		width: 320px 
	}
	.main header {
		margin: 0;
		background: none
	}
	.main header nav {
		position: relative;
	}
	.main .navbar-header {
		margin: 0 10px
	}
	.main .navbar-header:before { 
		position: relative;
		z-index: -1;
		top: 50px;
		display: block;
		background: #442d66;
		width: 100%;
		height: 18px;
		content: "";
		border-bottom: 6px solid #332151;
	}
	.main .navbar-toggle { 
		position: relative;
		top: 23px;
		right: -5px;
		margin: 0;
		padding: 0;
		background: #442d66;
		border-radius: 17px;
		width: 34px;
		height: 34px;
		z-index: 2000
	}
	.main .navbar-toggle:focus { 
		background: #6d3cab;
	}	
	.main .navbar-toggle .icon-bar {
		background: #fff;   
		border-radius: 2px;
		height: 2px;
		display: block;
		margin: 3px 5px;
	}
	.main .navbar-collapse { 
		position: absolute;
		right: 0;
		top: 53px;		
		width: 185px;
		z-index: 1000
	}
	.main .navbar-nav {
		margin: 7.5px 0;
		width: 100%
	}
	.main header nav li { 
		background: #442d66;
		float: none;
		margin: 0 !important;
		width: 100%
	}
	.main header nav li.even { 
		margin: 0 !important
	}
	.main header nav li a { 
		background: none;
		width: auto !important;
		height: auto !important; 
		padding: 12px 0 !important;
		text-align: center;
		margin: 0 12px;
		font: 20px/19px 'Slackey' !important;
		border-bottom: 1px solid #6d3cab;
	}
	.main header nav li:hover,
	.main header nav li a:hover,
	.main header nav li:hover a,
	.main header nav li.active a { 
		background-color: #442d66 !important
	}
	.main header nav li:last-child a { 
		border-bottom: 0
	}
	.main header nav li a small { 
		display: none
	}
	.main article {
		top: 5px
	}		
	.main article .title { 
		background-size: contain; 
		background-position: center center;
		font: 30px/40px 'Slackey'; 
		margin-top: 20px;	
		height: 100%;
		padding: 30px 0;
	}
	.main article .title small { 
		font-size: 22px
	}
	.flexslider .slides h2,
	#biblio h4 {
		font-size: 14px;
		line-height: 19px;
		padding-bottom: 0;
		margin-top: 0;
	}
	.flexslider .slides h2 br,
	#biblio h4 br {
		display: none
	}
	.flexslider .slides h2 big {
		font-size: 20px;
		line-height: 20px;
	}
	.flexslider .slides h2 big big {
		font-size: 25px	
	}
	.flexslider .slides div {
		right: 15px;
		top: 10px;
	}
	.flex-control-nav {
		right: 10px;
		bottom: 8px;
	}
	.flex-control-paging li a {
		width: 15px;
		height: 15px;
		border: 3px solid #d29c2d;
	}
	aside.banner-small {
		width: 100%;
		height: 127px;
	}
	aside.banner-small img {   
		position: absolute; 
		bottom: 0;
	}
	aside.banner-small div {
		width: 96% !important;
	}
	aside.banner-small h2, 
	aside.banner-medium h2,
	aside.banner h2 {
		font-size: 16px;
		line-height: 18px;
	}
	aside.banner h2 small, 
	aside.banner-small h2 small,
	aside.banner-medium h2 small {
		font-size: 14px;
		line-height: 16px;	
	}
	aside.banner div {
		top: 0;
		width: 320px;
		left: 0;
		right: 0;
		padding: 0 20px;
	}
	aside.banner h2 {
		margin-bottom: 10px;
	}
	aside.banner h2 big {
		display: block;
		font-size: 16px;
		line-height: 18px;
	}
	aside.banner h2 br {
		display: none
	}
	.main .productos h2 { margin-bottom: -95px }
	.main .productos section ul ul li { position: relative; width: 264px; height: 133px; background-image: url(../images/container-mobile.png); margin: 0 0 15px; }
	.main .productos section ul ul li img { width: 50%; float: left; }
	.main .productos section ul ul li a { position: absolute; padding: 15px 0; width: 50%; right: 0; background: transparent }
	.main .productos section ul ul li a:after { margin-left: -21px; top: -12px; left: 0; content: ""; display: block; width: 28px; height: 100%; border-style: solid; border-width: 0 6.5px 108px 15.5px; border-color: transparent transparent #6b3585 transparent; z-index: 2 }
	.main .productos section ul ul li a big { position: relative; padding: 5px 10px; font: 16px/18px 'Slackey'; }
	.main .productos section ul ul li a span { width: 40px; height: 40px; }
	.main .productos section ul ul li a .glyphicon-share-alt:before { line-height: 40px; }
	.main .productos section ul ul li a:hover { text-decoration: none }
	.main .productos .btn { font-size: 14px }

  .btn { 
	font-size: 18px;
	height: 40px;
	line-height: 27px;
	background-size: contain;
	background-position: 50%;
	width: auto
  }
  .main article .boxx { margin-bottom: 30px }

  .movie h2 { top: -29px; font: 14px/22px 'Slackey' }
  .movie h2 big { font-size: 22px }
  .movie-video h2 { right: 40px }
  .movie-historia h2 { top: 15px; left: 100px }

  .movie-video {
    min-height: 180px;
  }
  .movie-historia { background: url(../images/movie/historia-mobile.png) 0 0 no-repeat }
  .movie-historia img {
    position: relative;
    width: 100%;
    height: auto;
    right: 0;
	top: auto;
	transform: translateY(0);
	-ms-transform: translateY(0);
	-webkit-transform: translateY(0);
  }
  .movie-historia p {
    width: 100%;
    text-align: center;
    padding: 35px 15px;
    margin-left: 0;
    font: 14px/16px 'Slackey';
  }
  .movie-amigos { background: url(../images/movie/amigos-mobile.png) 0 0 no-repeat; background-size: 100% 100% !important; margin-top: 0; padding-bottom: 35px }
  .movie-amigos ul { margin: 0 auto;}
  .movie-amigos ul li {  position: relative; overflow: hidden; float: none; margin-bottom: -25px !important; margin-top: -10px !important; width: 28.3%; }
  .movie-amigos ul li img { margin-bottom: -85px; -webkit-transform: translateX(-50%) scale(0.4, 0.4); -moz-transform: translateX(-50%) scale(0.4, 0.4); -ms-transform: translateX(-50%) scale(0.4, 0.4); }
  .movie-amigos ul li strong { font-size: 14px; line-height: 16px; min-height: 40px }
  .movie-amigos ul li:nth-child(1) { margin: 0 }
  .movie-amigos ul li:nth-child(2) { margin: 0 }
  .movie-amigos ul li:nth-child(3) { margin: 0 }
  .movie-amigos ul li:nth-child(4) { margin: 0 0 0 16%; }
  .movie-amigos ul li:nth-child(5) { margin: 0 8% 0; }
  .movie-amigos ul li:nth-child(6) { margin: 0 }
  .movie-amigos ul li:nth-child(7) { margin: 0 }
  .movie-amigos ul li:nth-child(8) { margin: 0 }
  .movie iframe { padding: 25px; }

  .main .explore { float: none; margin: 0 auto }
  footer a { position: relative; bottom: auto; right: auto; margin: 0 auto }
  footer a.amigas { left: auto; width: 90%; min-height: 250px }

  /*.modal.in .modal-dialog {
    position: absolute;
    left: 0;
    top: 0;
    -moz-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
	-ms-transform:translate(0,0);
  }*/
  .modal-dialog { background-size: 95% 100% !important; background-position: top center; }
  .modal-body img.big { position: absolute; width: 160px; height: auto; left: -3%; top: -25px;
	-moz-transform: translate(0, 0);
	-webkit-transform: translate(0, 0);
	-o-transform: translate(0, 0);
	transform: translate(0, 0);
	-ms-transform:translate(0, 0);
  }	
  .modal-dialog, 
  .modal-content,
  .modal-body { width: 100%; min-width: 100%; min-height: 390px; margin: 0 }
  .modal-body h2 { font: 22px/30px 'Slackey'; margin-top: -45px; margin-left: 20px }
  .modal-body .actor { position: relative; float: left; display: flex; flex-direction: column; left: 15%; top: 6%; margin-right: 55px }
  .modal-body .actor img { max-width: 115px }	
  .modal-body .actor h3 { width: 115px; display: block; font: 13px/15px 'Slackey' }	
  .modal-body p { font: 12px/15px 'Slackey'; padding: 5% 10% 0 30%; overflow-wrap: break-word;}	
  .modal-body #personajes-movie { right: 50%; bottom: 0; width: 240px; margin: -40px -120px 25px 0; }
  .flexslider#personajes-movie .flex-viewport { width: 240px }	
  .modal-body #personajes-movie ul li strong { font: 12px/15px 'Slackey'; top: -35px; position: relative; }
  .modal-body #personajes-movie ul li img { -webkit-transform: translateX(-50%) scale(0.4, 0.4) !important; -moz-transform: translateX(-50%) scale(0.4, 0.4) !important; -ms-transform: translateX(-50%) scale(0.4, 0.4) !important; }
  .modal-body #personajes-movie .flex-direction-nav .flex-next { right: -60px }
  .modal-body #personajes-movie .flex-direction-nav .flex-prev { left: -60px }

  
	#modal-alert .modal-dialog, 
	#modal-alert .modal-content,
	#modal-alert .modal-body { width: 100%; min-width: 100%; min-height: 444px }
	#modal-alert .modal-body h2 { margin: 0 }	
	#modal-alert .modal-body p { font-size: 14px }	
}

@media (max-width: 640px) {
  .main .productos { width: calc(100% - 16px); margin: 8px }
  .main .productos section { padding-bottom: 55px }
  .main .productos section ul ul { padding: 22px 0 22px 22px }
  .main .productos h2 { background: url(../images/title/productos-mobile.png) top center no-repeat; background-size: contain; width: 106%; margin: 0 0 -55px; min-height: 105px; }
}
@media (max-width: 399px) {
  .main .productos h2 { min-height: 95px; margin-bottom: -50px }

  .modal-body .actor img {
    max-width: 95px;
  }
  .modal-body p {
    padding: 5% 10% 0 11%;
  }
}