/*descripcion y area usuario*/
.lightboxtxt {
	position: relative;
	top: 0%;
	}


/*Basic defs*/
div[lightbox]{
	position: fixed;
	left: 100vw;
	width: 100%;
	background: rgba(0, 0, 0, 0.0);
	height: 100%;
	z-index: 999999999;
	top: 0;
-o-transition:transition: .6s ease-out 0s,background .2s linear .6s;							-webkit-transition: .6s ease-out 0s,background .6s linear 0s;
	-moz-transition: .6s ease-out 0s,background .2s linear .6s;
	transition: .6s ease-out 0s,background .2s linear .6s;
}
div[lightbox]:target {
	background: rgba(0, 0, 0, 0.75);
	left: 0%!important;
	z-index: 9999999999;
	top: 0!important;
}
div[lightbox] > article,div[lightbox] > iframe,div[lightbox] > video,div[lightbox] > canvas,div[lightbox] > img {
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 5px solid rgba(255,255,255,1.00);
	border-radius: 3px;
	max-width: 70%;
	max-height: 70%;
	background: black;
}
div[lightbox] > article{
	width: 100%;
	height: 100%;
	color: rgba(255,255,255,1.00);
	overflow-y: auto;
	padding: 5px
}
div[lightbox] > iframe{background:snow;padding:0;color:snow;overflow-y:auto}
div[lightbox] > article audio{}
/*Directional buttons*/
div[lightbox] button{cursor:pointer;text-align:center;font:4em helvetica,arial,freesans,clean,sans-serif;color:snow;border:1px solid snow;background:#000;height:70%;width:10%;position:absolute;top:15%}
div[lightbox] button[lbleft]{left:5%}
div[lightbox] button[lbright]{right:5%}
div[lightbox] button[lbup]{top:5%;height:10%;width:70%}
div[lightbox] button[lbdown]{bottom:5%;height:10%;width:70%}

div[lightbox] button[lbleft]:before{content:"\0021DA"}
div[lightbox] button[lbright]:before{content:"\0021DB"}
div[lightbox] button[lbup]:before{content:"\00290A"}
div[lightbox] button[lbdown]:before{content:"\00290B"}
/*The meat of the point.*/
div[lightbox] > h1,div[lightbox] > h2,div[lightbox] > h3{position:absolute;left:15%;right:15%;top:25;color:snow;text-shadow: -2px -2px red, 2px 2px red, 2px -2px red, -2px 2px red, -1px -1px red;}

/*Use your GPU mate*/
div[lightbox],div[lightbox] *{transform:translate3D(0,0,0);}
/*Closing and screenarea*/
/*div[lightbox] > a[href="#screenarea"]:not(:first-child) {width: 120px;height: 240px;background: white;position: absolute;top:-85px;right:-20px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);nav-index:-1}*/
div[lightbox] > a[href="#screenarea"]/*:first-child*/{width: 0%;height:100%;background:0 0;background:-moz-linear-gradient(315deg,rgba(0,0,0,0) 90%,rgb(255,255,255) 0);background:-webkit-linear-gradient(315deg,rgba(0,0,0,0) 90%,rgb(255,255,255) 0);background:-o-linear-gradient(315deg,rgba(0,0,0,0) 90%,rgb(255,255,255) 0);background:-ms-linear-gradient(315deg,rgba(0,0,0,0) 90%,rgb(255,255,255) 0);background:linear-gradient(45deg,rgba(0,0,0,0) 90%,rgb(255,255,255) 0);position: absolute;top:0;right:0;nav-index:-1;cursor:context-menu;transition:0s .6s}
div[lightbox]:target > a[href="#screenarea"]/*:first-child*/{width:100%;}
div[lightbox] > a[href="#screenarea"]/*:first-child*/:after{content:"Close";position:absolute;top:-40px;right:-50px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);font-size:36px;color:black;text-align:right;cursor:pointer;display:none;padding:80px}
div[lightbox]:target > a[href="#screenarea"]/*first-child*/:after{display:block}
/*div[lightbox] > a[href="#screenarea"]:not(:first-child):after {content:"Close";position:absolute;top:85px;left:8px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);font-size:36px;color:black;text-align:right}*/

#screenarea{z-index:-1000000;width:1px;height:1px;visibility:hidden;position:fixed;top:0;left:0;color:rgba(255,255,255,0);opacity:0}

/*Starting conditionals*/
div[lightbox~=left],div[lightbox][id$="-l"]{left:-100vw}
div[lightbox~=top],div[lightbox][id$="-t"]{left:0;top:-100vh}
div[lightbox~=bottom],div[lightbox][id$="-b"]{left:0;top:100vh}

div[lightbox~=left]:target,div[lightbox][id$="-l"]:target{left:0vw}
div[lightbox~=top]:target,div[lightbox][id$="-t"]:target{left:0;top:0vw}
div[lightbox~=bottom]:target,div[lightbox][id$="-b"]:target{left:0;top:0vw}

div[lightbox~=left] a[href~="#screenarea"],div[lightbox][id$="-l"] a[href~="#screenarea"],div[lightbox~=bottom] a[href~="#screenarea"],div[lightbox][id$="-b"] a[href~="#screenarea"]
{background: rgba(0,0,0,0);background: -moz-linear-gradient(45deg, rgba(0, 0, 0,0) 90%, white 0%);background: -webkit-linear-gradient(45deg, rgba(0, 0, 0,0) 90%, white 0%);background: -o-linear-gradient(45deg, rgba(0, 0, 0,0) 90%, white 0%);background: -ms-linear-gradient(45deg, rgba(0, 0, 0,0) 90%, white 0%);background: linear-gradient(45deg, rgba(0, 0, 0,0) 90%, white 0%);}
div[lightbox~=left] a[href~="#screenarea"]:after,div[lightbox][id$="-l"] a[href~="#screenarea"]:after,div[lightbox~=bottom] a[href~="#screenarea"]:after,div[lightbox][id$="-b"] a[href~="#screenarea"]:after 
{;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);text-align:right}
div[lightbox~=left] a[href~="#screenarea"]:after,div[lightbox][id$="-l"] a[href~="#screenarea"]:after,div[lightbox~=bottom] a[href~="#screenarea"]:after,div[lightbox][id$="-b"] a[href~="#screenarea"]:after*/


/*Unselectable*/
div[lightbox~="nosel"]{-moz-user-select: none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;cursor:context-menu}
div[lightbox~="inst"]{transition:0s 0s}
div[lightbox~="fast"]{transition-duration:.3s}div[lightbox~="fast"]>a[href~="#screenarea"]{transition-delay:.3s}
div[lightbox~="slow"]{transition-duration:1s}div[lightbox~="slow"]>a[href~="#screenarea"]{transition-delay:1s}
/*div[lightbox]:target > a[href="#screenarea"]{transition:0s 0s}*/