BODY{
background-color:rgb(40 40 40);
text-align:center;
}

/*	******************************************************************
				PANTALLAS GRANDES
	****************************************************************** */

@media ( min-width:600px ){
	#bodyframe{
		background-color:rgb( 240 240 240 );
		min-width:450px;
		width:80vw;
		max-width:1200px;
		
		height:85vh;
		margin:auto;
		border-radius:1vw;
		
		display:block;
		display:grid;
		grid-template-columns:repeat(5,20%);
		overflow:hidden;
		user-select:none;
	}
	
	
	.brochureTab{
		justify-content:center;
		position:relative;
		display:flex;
		overflow:hide;
		width:100%;
		height:85vh;
		cursor:pointer;
		transition:0.5s all;
		/*opacity:0.6;*/
		overflow:hide;
		user-select:none;
	}
	
	.vacantTitle{
		color:white;
		font-family:'century Gothic';
		font-size:3vw;
		/*margin-left:4vw;*/
		opacity:0;
		white-space:nowrap;
		transition:0.3s all;
		text-shadow:2px 2px 2px black;
		user-select:none;
	}
	
	.brochureTab:hover {
		
		/*width:100%;  opacity:1;*/
		width:80vw;
		z-index:999;
		margin-left: var(--tooltip-item);
	}
	.brochureTab:hover .vacantTitle{
		opacity:1;	
	}

	#bt1{	background:url('cgiworker0.jpeg'); background-size:140vh 85vh; background-position:30%; background-repeat:repeat; --tooltip-item: 0%; 	}
	#bt2{	background:url('cgiworker1.jpeg');  background-size:140vh 85vh; background-position:30%;  background-repeat:no-repeat; --tooltip-item: -100%; }
	#bt3{	background:url('cgiworker4.jpeg'); background-size:160vh 85vh;  background-position:left; background-repeat:no-repeat; --tooltip-item: -200%; }
	#bt4{	background:url('cgiworker3.jpeg'); background-size:160vh 85vh; background-position:center; background-repeat:no-repeat; --tooltip-item: -300%;}
	#bt5{	background:url('cgiworker5.jpeg'); background-size:130vh 85vh; background-position:center; background-repeat:no-repeat;  --tooltip-item: -400%;}

	#floatFrame{
		display:flex; 
		position:fixed; 
		z-index:9999; 
		left:0px; top:0px; 
		width:75vw; height:100vh; 
		background:black; color:white;
		opacity:0.9;  
		font-family:sans serif; 
		overflow-y:scroll; 
		padding-left:15vw; padding-right:10vw;
	}
	#intvw_left{
		width:25%;
		height: 90vh;
		padding-right: 2vw;
		background: linear-gradient(0deg, rgb(0, 43, 68) 0%, rgb(0, 159, 207) 100%);		
		font-size: 1vw;
		font-family: "century Gothic";
		}
	#intvw_left p[selected='selected']{
		color:white;
		font-weight: bold;
	}
	#intvw_left p[selected='CANCEL']{
		padding: 1vw;
		color:rgb(216, 62, 62);
		font-weight: bold;
		cursor: pointer;
		transition: 0.5s all ;
	}#intvw_left p[selected='CANCEL']:hover{ background: red; color:white }
	#intvw_left p{
		color:rgb(50 50 50);
		font-style: normal;
	}

	#intvw_right{
		display: block;
		font-family: "century Gothic";
		padding-top: 5vh;
		max-height: 85vh;
		height: 90vh;	width:85%;
		color: black;
		background: linear-gradient(0deg, rgb(195, 195, 195) 0%, rgb(240, 240, 240) 100%);		
		font-size: 1vw;
		overflow-y: scroll;
		}
	#intvw_right textarea{
		width: 80%;
		font-size: 1vw;
		}
	#intvw_right input[type='date']{
		width: 30%;
		font-size: 1.5vw;
		}

	#intvw_right p, #intvw_right div{
		font-size: 1.2vw; color: black;
		}

	div[tipo='navBtns']{	margin-top: 5vh;	}

	.intvwButton{
		display:flex;
		justify-content: center;
		align-items: center;
		width:50%;	 height: 4vw;
		background: rgb(255, 254, 207) 50%;
		filter:saturate(0.05);
		transition: 0.5s all;
		cursor: pointer;
		}
	.intvwButton:hover{	
		background:rgb(0, 159, 207); 
		filter:saturate(1);	
		}
	.referenceItem{
		display:grid;
		grid-template-columns: 15% 20% 20% 15% 15% 10%;
		grid-auto-rows: 3vw;
		width:100%;
		}
}

/*	******************************************************************
				PANTALLAS PEQUEÑAS
	****************************************************************** */
@media ( max-width:599px ){
	#bodyframe{
		background-color:black;
		min-width:350px;
		width:95vw;
		max-width:600px;
		
		height:95vh;
		margin:auto;
		margin-top:2vh;
		border-radius:1vw;
		
		user-select:none;
	}
	
	.brochureTab{
		background-size:100%;
		justify-content:center;
		margin-bottom:2vh;
		position:relative;
		display:flex;
		overflow:hide;
		width:100%;
		height:50vw;
		cursor:pointer;
		transition:0.5s all;
		/*opacity:0.6;*/
		overflow:hide;
		filter:saturate(0);
		user-select:none;
	}
	
	.vacantTitle{
		color:white;
		font-family:'century Gothic';
		font-size:2.5vh;
		/*margin-left:4vw;*/
		opacity:0.3;
		white-space:nowrap;
		transition:0.3s all;
		text-shadow:2px 2px 2px black;
		user-select:none;
	}
	.brochureTab:hover {
		
		filter:saturate(1);
	}
	
	.brochureTab:hover .vacantTitle{
		font-size:3vh;
		opacity:1;	
	}
	
	#bt1{	background:url('cgiworker0.jpeg'); background-size:100vw 50vw; background-position:30%; background-repeat:repeat; --tooltip-item: 0%; 	}
	#bt2{	background:url('cgiworker1.jpeg');  background-size:100vw 50vw; background-position:30%;  background-repeat:no-repeat; --tooltip-item: -100%; }
	#bt3{	background:url('cgiworker4.jpeg'); background-size:100vw 50vw;  background-position:left; background-repeat:no-repeat; --tooltip-item: -200%;}
	#bt4{	background:url('cgiworker3.jpeg');  background-size:100vw 50vw;  background-position:center; background-size:cover; background-repeat:no-repeat; --tooltip-item: -300%;}
	#bt5{	background:url('cgiworker5.jpeg'); background-size:100vw 50vw;  background-position:center;  background-size:cover;  background-repeat:no-repeat;  --tooltip-item: -400%;}

	#floatFrame{	
			display: block;
			position: fixed;	
			left:0px; top:0px;
			height: 90vh;	width:94vw;
			z-index:9099;
			overflow-y:scroll;
			height:100vh; 
			background-color:black; 
			opacity:1; 
			color:white;
			padding-left: 3vw;
			padding-right: 3vw;
			}
	#floatFrame div{
		/*display:grid;
		grid-template-columns: 90%;
		white-space: nowrap;*/
		}
	#intvw_left{
		width:95vw;
		height: 10vh;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background: linear-gradient(0deg, rgb(0, 43, 68) 0%, rgb(0, 159, 207) 100%);		
		font-family: "century Gothic";
		}
	#intvw_left p{
		color:rgb(50 50 50);
		font-style: normal;
		}
	#intvw_left p[class='lmenu_item']{	
		font-size: 0vw;
		display: block;
		margin: auto;
		cursor: pointer;
		}
	#intvw_left p[class='lmenu_item']:hover{	font-size: 3vw; width: 30vw; }
	#intvw_left p[class='lmenu_item']::before{
		height: 4vw;	width: 4vw;
		padding: 2vw;

		content: attr( vindex );
		font-size: 4vw;
		}
		#intvw_left p[class='lmenu_item']:hover:before{
			content: '';
			}
	#intvw_left p[selected='selected']{	font-size: 0vw;	color:white;	font-weight: bold;	}
	#intvw_left p[selected='CANCEL']{
		font-size: 3vw;	
		width: 90vw;
		padding: 1vw;
		color:rgb(216, 62, 62);
		font-weight: bold;
		cursor: pointer;
		transition: 0.5s all ;
	}#intvw_left p[selected='CANCEL']:hover{ background: red; color:white }


	#intvw_right{
		display: block;
		
		width:95vw;	height: 80vh;
		max-height: 85vh;
		margin-bottom: 5vh;

		background: linear-gradient(0deg, rgb(169, 169, 169) 0%, rgb(240, 240, 240) 100%);		
		font-family: "century Gothic";
		font-size: 3vw;
		overflow-y: scroll;
		}
	#intvw_right textarea{
		width: 80%;
		font-size: 2vw;
		}
	#intvw_right label{
		width: 30%;
		font-size: 2.5vw;
		}
	#intvw_right p, #intvw_right div{
		font-size: 3vw; color: black;
		}

	#intvw_right h1{	font-size: 5vw; color: black;	}
	#intvw_right h2{	font-size: 4vw; color: black;	}
	#intvw_right h3{	font-size: 3vw; color: black;	}

	#intvw_right input[type='date']{
		width: 30%;
		font-size: 3vw;
		}
	div[tipo='navBtns']{	margin-top: 5vh;	}

	.intvwButton{
		display:flex;
		justify-content: center;
		align-items: center;
		width:50%;	 height: 4vh;
		background: rgb(255, 254, 207) 50%;
		filter:saturate(0.05);
		transition: 0.5s all;
		cursor: pointer;
		}
	.intvwButton:hover{	
		background:rgb(0, 159, 207); 
		filter:saturate(1);	
		}
	.referenceItem{
		display:grid;
		grid-template-columns: 15% 20% 20% 15% 15% 10%;
		grid-auto-rows: 5vh;
		width:100%;
		}

}