/*=================================
Inicio de propiedades generales
==================================*/
 *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
	body {
	/*background: #001e15;*/
	font-family: sans-serif;
}

.wrapper {
	margin: 0 auto 100px auto;
	max-width: 960px;
}

.stage {
	list-style: none;
	padding: 0;
}
.row{
    margin-left: -90px!important;
}

/*************************************
rotar vista
**************************************/

.scene,.scenea {
	width: 260px;
	height: 400px;
	margin: 30px;
	float: left;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
}

.movie {
	width: 260px;
	height: 400px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translateZ(-130px);
	-moz-transform: translateZ(-130px);
	transform: translateZ(-130px);
	-webkit-transition: -webkit-transform 350ms;
	-moz-transition: -moz-transform 350ms;
	transition: transform 350ms;
}

.movie:hover {
	-webkit-transform: rotateY(-78deg) translateZ(20px);
	-moz-transform: rotateY(-78deg) translateZ(20px);
	transform: rotateY(-78deg) translateZ(20px);
}


/*=================================
Inicio de propiedades modal
==================================*/
.modal-backdrop{
    z-index:-6;
    position: relative;
}
.work .container-fluid .row{
    margin-left: 0px!important;
}
.modal-body {
    position: relative;
    padding: 15px;
}
.work {
    margin-top: -10px;
}

.mfp-wrap {
    z-index: 3001;
}
.mfp-bg {
    z-index: 3000;
}

.container-fluid{
    padding-left: 0px;
}

/*=================================
Fin de propiedades modal
==================================*/




/*************************************
estilo de los planos
**************************************/

.movie .poster, 
.movie .info {
	position: absolute;
	width: 260px;
	height: 400px;
	background-color: #fff;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.movie .poster  {
	-webkit-transform: translateZ(130px);
	-moz-transform: translateZ(130px);
	transform: translateZ(130px);
	background-size: cover;
	background-repeat: no-repeat;
}

.movie .info {
	-webkit-transform: rotateY(90deg) translateZ(130px);
	-moz-transform: rotateY(90deg) translateZ(130px);
	transform: rotateY(90deg) translateZ(130px);
	border: 3px solid #fff;
	font-size: 0.7em;
}

/*************************************
Sombras objetos 3d
**************************************/

.csstransforms3d .movie::after {
	content: '';
	width: 260px;
	height: 260px;
	position: absolute;
	bottom: 0;
	box-shadow: 0 30px 50px rgba(0,0,0,0.3);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	-webkit-transform: rotateX(90deg) translateY(130px);
	-moz-transform: rotateX(90deg) translateY(130px);
	transform: rotateX(90deg) translateY(130px);
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
}

.csstransforms3d .movie:hover::after {
	box-shadow: 20px -5px 50px rgba(0,0,0,0.3);
}

/*************************************
Información Obra
**************************************/

.info header {
	color: #FFF;
	padding: 5px 10px;
	font-weight: bold;
	height: 120px;
	/*background-size: cover;*/
	background-repeat: no-repeat;
	text-shadow: 0px 2px 2px rgba(0,0,0,1);
    font-size: 11px;
}

.info header h1 {
	margin: 0 0 2px;
	font-size: 1.5em;
    font-weight: bold;
}

.info header .rating {
	border: 1px solid #FFF;
	padding: 0px 3px;
}

.info p {
	padding: 0.3em 0.3em 0.3em 0.3em;
	margin: 1px 0 0 1px;
	line-height: 1.3em;
	font-weight: 500;
	color: #000;
    font-size: 11px;
    text-align: justify;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;	 
}

/*************************************
Generar luz usando cajas de sombras
**************************************/

.movie .poster,
.movie .info,
.movie .info header {
	-webkit-transition: box-shadow 350ms;
	-moz-transition: box-shadow 350ms;
	transition: box-shadow 350ms;
}

.movie{
    transition: all 0.6s ease-in;
}
.movie header{
    cursor: pointer;
    transition: box-shadow 350ms;
    overflow: hidden;
}

.movie header:hover{
    transform: scale(1.05);
    background: rgba(0,0,0,0.65);

}


.csstransforms3d .movie .poster {
	box-shadow: inset 0px 0px 40px rgba(255,255,255,0);
}

.csstransforms3d .movie:hover .poster {
	box-shadow: inset 300px 0px 40px rgba(255,255,255,0.8);
}

.csstransforms3d .movie .info, 
.csstransforms3d .movie .info header {
	box-shadow: inset -300px 0px 40px rgba(0,0,0,0.5);
}

.csstransforms3d .movie:hover .info, 
.csstransforms3d .movie:hover .info header {
	box-shadow: inset 0px 0px 40px rgba(0,0,0,0);
}

/*************************************
Posters and still images
**************************************/
.scenea:nth-child(1) .movie .poster {
  background-image: url(../img/oludicas/1.jpg);
}
.scenea:nth-child(1) .info header {
	background-image: url(../img/oludicas/s1.jpg);
}
.scenea:nth-child(2) .movie .poster {
  background-image: url(../img/oludicas/2.jpg);
}
.scenea:nth-child(2) .info header {
	background-image: url(../img/oludicas/s2.jpg);
}
.scenea:nth-child(3) .movie .poster {
  background-image: url(../img/oludicas/3.jpg);
}
.scenea:nth-child(3) .info header {
	background-image: url(../img/oludicas/s3.jpg);
}
.scenea:nth-child(4) .movie .poster {
  background-image: url(../img/oludicas/4.jpg);
}
.scenea:nth-child(4) .info header {
	background-image: url(../img/oludicas/s4.jpg);
}
.scenea:nth-child(5) .movie .poster {
  background-image: url(../img/oludicas/5.jpg);
}
.scenea:nth-child(5) .info header {
	background-image: url(../img/oludicas/s5.jpg);
}
.scenea:nth-child(6) .movie .poster {
  background-image: url(../img/oludicas/6.jpg);
}
.scenea:nth-child(6) .info header {
	background-image: url(../img/oludicas/s6.jpg);
}
.scenea:nth-child(7) .movie .poster {
  background-image: url(../img/oludicas/7.jpg);
}
.scenea:nth-child(7) .info header {
	background-image: url(../img/oludicas/s7.jpg);
}
.scenea:nth-child(8) .movie .poster {
  background-image: url(../img/oludicas/8.jpg);
}
.scenea:nth-child(8) .info header {
	background-image: url(../img/oludicas/s8.jpg);
}
.scenea:nth-child(9) .movie .poster {
  background-image: url(../img/oludicas/9.jpg);
}
.scenea:nth-child(9) .info header {
	background-image: url(../img/oludicas/s9.jpg);
}
.scenea:nth-child(10) .movie .poster {
  background-image: url(../img/oludicas/10.jpg);
}
.scenea:nth-child(10) .info header {
	background-image: url(../img/oludicas/s10.jpg);
}


/*************************************
Posters and still images
**************************************/

.scene:nth-child(1) .movie .poster {
  background-image: url(../img/oconvencionales/1.jpg);
}
.scene:nth-child(1) .info header {
	background-image: url(../img/oconvencionales/s1.jpg);
}

.scene:nth-child(2) .poster {
  background-image: url(../img/oconvencionales/2.jpg);
}
.scene:nth-child(2) .info header {
	background-image: url(../img/oconvencionales/s2.jpg);
}

.scene:nth-child(3) .poster {
  background-image: url(../img/oconvencionales/3.jpg);
}
.scene:nth-child(3) .info header {
	background-image: url(../img/oconvencionales/s3.jpg);
}

.scene:nth-child(4) .poster {
  background-image: url(../img/oconvencionales/4.jpg);
}
.scene:nth-child(4) .info header {
	background-image: url(../img/oconvencionales/s4.jpg);
}
.scene:nth-child(5) .poster {
  background-image: url(../img/oconvencionales/5.jpg);
}
.scene:nth-child(5) .info header {
	background-image: url(../img/oconvencionales/s5.jpg);
}
.scene:nth-child(6) .poster {
  background-image: url(../img/oconvencionales/6.jpg);
}
.scene:nth-child(6) .info header {
	background-image: url(../img/oconvencionales/s6.jpg);
}
.scene:nth-child(7) .poster {
  background-image: url(../img/oconvencionales/7.jpg);
}
.scene:nth-child(7) .info header {
	background-image: url(../img/oconvencionales/s7.jpg);
}
.scene:nth-child(8) .poster {
  background-image: url(../img/oconvencionales/8.jpg);
}
.scene:nth-child(8) .info header {
	background-image: url(../img/oconvencionales/s8.jpg);
}

/*************************************
Fallback
**************************************/
.no-csstransforms3d .movie .poster, 
.no-csstransforms3d .movie .info {
	position: relative;
}

/*************************************
Media Queries
**************************************/
/*@media screen and (max-width: 60.75em){
	.scene {
		float: none;
		margin: 30px auto 60px;
	}
}
*/
@media screen and (max-width: 60.75em){
  	 
  	 	.tabbed {
		max-width: 98%;
		}

		.tabs > div {
			width:94%;
			padding: 5px 15px 20px;

		}

		.scene, .scenea {
		float: none;
		margin: 30px -20px 60px;
		width: 50px;
	}
    
    .row {
        margin-left: 0px !important;
    }


 }

/*=================================
    Fin de propiedades generales
==================================*/