@charset "utf-8";
/* CSS Document */


body{ margin:0; margin-top: 20px; background: #222; text-align: center; color: #aaa; font-family: 'Rubik', sans-serif;
	  background: radial-gradient(#222, hsl(200,30%,6%));
}

/* header */
#logo{ width:35%; margin:auto; padding: 15px 15px 5px 15px; display:block}
#mainmenu{ padding:0px; margin:0px; text-align:right}

li.nav-item {
	font-size:16px;
    display: inline-block;
    line-height: 1.7;
    padding: 3px 15px;
	cursor:pointer;	
	color:#999;
	vertical-align:top;
	height:40px;
	transition:all .5s linear;
	/*list-style:none;*/
    /* border-top: 1px solid #999;*/ 	
	/*border-bottom: 1px solid #999;*/
}

li.nav-item:hover{color:#fff; font-size:20px}

#mainmenu li a:hover {color:#fff;}
#mainmenu li a {
    text-decoration: none;
    color: #999;
}


/* main */
#vid-1:focus, #vid:focus, #vid-2:focus{outline:none}
/* #vid-1::-moz-focus-inner{ border: none;} */
#cajadevideos, #cajadeldemo { width: 75%; max-width: 75%; text-align: left; margin: 30px auto; position:relative; clear:both}
.video-js .vjs-control-bar { 
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

#showstop{ z-index: 1; position: absolute; right:-10px; top: -10px; cursor: pointer;}
.vidprevius, .vidnext{position:absolute;top:10%; cursor:pointer; width:18%; height:70%; opacity:0; z-index:100; background:#333 }

.vidprevius{left:0px;}
.vidnext{ right:0px;}

.vidprevius:hover, .vidnext:hover{opacity:.5; color:#fff; }
.vidprevius:hover{background:url(/imagenes/3anterior.png) no-repeat left center; background-size: 40px 40px }
.vidnext:hover{background:url(/imagenes/3siguiente.png) no-repeat right center; background-size: 40px 40px  }
	
.cajafoto{ display:inline-block; width:26%; position:relative;cursor:pointer; margin:2%;transition: all .8s; margin-bottom:6%; z-index:1}
.cajafoto img{ width:100%; display:block ;-webkit-box-shadow: 0 0 35px 5px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 35px 5px rgba(0, 0, 0, 0.6); }

.cajafoto:hover{ transform: scale(1.1); transition: all .8s; z-index:199}
/*
	.txttitle{transform: scale(0);display: inline-block; transition: all .8s; visibility:hidden;}	
	.cajafoto:hover .txttitle { color:#fff; display:inline-block;transition: all .8s; transform: scale(1.1); visibility:visible}
*/	

.txttitle{transform: scale(0);display: inline-block; transition: all .8s; visibility:hidden; height:1px; overflow:hidden;
			text-align:left;    margin: -2% 4%;	 position:absolute; bottom:0; left:0;}	
.cajafoto:hover .txttitle { color:#fff; display:inline-block;transition: all .8s; transform: scale(1.1); visibility:visible; font-size:inherit;
		overflow:visible;}



@media (max-width: 750px){	
	li.nav-item {padding:3px 10px}
	#cajadevideos, #cajadeldemo { width: 94%;max-width:94%}

}



.video-js .vjs-big-play-button{ border-radius:1.5em; width:1.5em; height:1.5em; line-height:1.4em; font-size:3em;
	top: 20%;
    left: 43%;
    margin-top: 0;
    margin-left: 0;
}

.video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus{ background-color:#666}

.vjs-icon-play:before{left:1px}

.video-js{-webkit-box-shadow: 0 0 35px 5px rgba(0, 0, 0, 0.6);  box-shadow: 0 0 35px 5px rgba(0, 0, 0, 0.6); width:70%;display:block}


.video-js.vjs-ended .vjs-poster {
  display: block;
}



#vid-2 {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
 
#vid-2 iframe,
#vid-2 object,
#vid-2 embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


#enlaces{display: inline-block; padding: 5px; }

#enlaces a {width: 24px;   height: 24px;   float:left; margin:0 7px; border-radius:4px;
	background: transparent url("/imagenes/footer-sprite/mvmsocialsprite-40.png") no-repeat;
	background-size: cover;	
	transition: transform .3s;
	opacity:.6;
}

#enlaces a.sptfacebook{  background-position: 0px 0px; }
#enlaces a.sptimbd{ background-position: -24px 0px; }
#enlaces a.sptlinkedin{ background-position: -48px -0px; }
#enlaces a.sptpixeltheory{ background-position: -72px -0px; }
#enlaces a.sptbehance{  background-position: -96px -0px; }
#enlaces a.sptpepo{ background-position: -121px -0px; }
#enlaces a.sptinstagram{ background-position: -144px -0px; }

#enlaces a:hover{opacity:1; transform:scale(1.2)}