@charset "utf-8";



@font-face {
    font-family: letterGothic;
    src: url(..//tipografia/LetterGothicStd-Bold.otf);
}

* {
    font-family: letterGothic;
}

body	{
		color: #cccccc;
		font-size:13px;
		text-align:center;
		background-color: #0000FF;
		margin: 0px;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		}

#info 	{
		position: absolute;
		top: 0px; width: 100%;
		padding: 5px;
		}

a 		{
		color: #0080ff;
		}

#caleidoscopioTitle {
	position: absolute;
    top: 8.2vh;
	font-size: 3.2vw;
	font-family: letterGothic;
	color: black;
	text-align:center;
	
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#preloader {
	position: absolute;
    top: 50%;
	font-size: 2.2vw;
	font-family: letterGothic;
	color: black;
	text-align:center;
	
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#avisoPantalla {
	position: absolute;
    bottom: 5.0vmin;
	font-size: 100%;
	font-family: letterGothic;
	color: black;
	text-align:center;
	max-width: 70%;
	
	
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#categories {

	top: 0px;
	left: 0px;
	
	width: 100%;
	height: 40px;
	border: 0px;	
	
	padding: 5px;  
    position: fixed;
    z-index: 1;
   
}

#categoryControlUnselected {
	opacity: 1.0;
	cursor: pointer;
	color: #999999;
  	font-size: 4.5vmin;
  	font-family: letterGothic;
  	text-align: center;
	font-weight:bold;	
}

#categoryControlSelected {
	opacity: 1.0;
	cursor: pointer;
	color: #bf0811;
  	font-size: 5.1vmin;
  	font-family: letterGothic;
  	text-align: center;
	font-weight:bold;	
}

#categoryControlActived {
	opacity: 1.0;
	cursor: pointer;
	color: #bf0811;
  	font-size: 5.1vmin;
  	font-family: letterGothic;
  	text-align: center;
	font-weight:bold;	
}

#categoryControlHide {
	
	opacity: 0.0;
	cursor:none;
	color: #00ff00;
  	font-size: 28px;
  	font-family: letterGothic;
  	text-align: center;
}



#main {
    transition: margin-left .5s;
    padding: 16px;
}


#carrouselContainer
{
	padding: 5px; 	 
    position: fixed;
    z-index: 1;
    background-color: #911;
}
#categoriesControlsContainer
{
	
	top: 20px;
	left: 20px;
	bottom: 20px;
	width: 160px;
	border: 20px;
	textAlign: left;
	overflow:scroll;
	overflow-x: hidden;
	overflow-y: auto;
	
	
	padding: 5px; 
	 
    position: fixed;
    z-index: 1;
   
    background-color: #111;
   
    transition: 0.5s;
  
}

::-webkit-scrollbar {
	
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#prev, #next {
  cursor: pointer;
  position:absolute;
  top: 50%;
  width: auto;
  
    
}
#prev {
	left:5%;
}

#next {
	right:5%;
}


/*Estilos para contenido de nodo*/

#nodeContentContainer {
	position:fixed;
	background-color: rgba(0,0,0,0.3);
	width:100%;
	height:100%;
	left: 0px;
    top: 0%;
}


#floatingContainer {
	position:absolute;
	top: 50%;
	left: 50%;
	/*background-color:#FC0;*/
	width:90%;
	height:95%;
	transform: translate(-50%, -40%);
	display: block;
  	
}

#mediaContainer {
	/*position:absolute;*/
	width:100%;
	height:90%;
	/*background-color:#9FC;*/
	display: flex;
  	justify-content: center;
	align-items: center;
}

#nodeContentImage {
	
	object-fit: contain;
	max-width:90%;
	max-height:90%;
	order: 1;
}

#nodeContentText
{
	display: flex;
 	align-items: center;
  	justify-content: center;
  	max-width: 1000px;
	max-height: 80%;
	background-color: rgba(0,0,0,0.8);
	padding: 10px;
	/*background-color:rgba(255,0,0,0.4);
	color: #f2f2f2;*/
}

#nodeContentText p
{
	/*background-color:rgba(0,255,0,0.4);*/
	text-align:justify;
	font-size:130%;
	font-weight:normal;
	
	color: #f2f2f2;
	
	max-height: 80%;
	max-width: 95%;
}

#nodeContentVideo
{
	object-fit: contain;
	width:90%;
	height:90%;
	/*max-width:100%;
	max-height:100%;
	position:relative;*/
	
	/*position: fixed;
	max-width:80%;
	max-height:90%;
	top: 50%;
  	left: 50%;
 	transform: translate(-50%, -50%);*/
}



/*#contentControlsUpContainer {
	
	width:100%;
	height:10%;
	display:flex;
	position:absolute;
	top: 40%;
}*/


#initButton {
	height: 8vmin;
    width: 8vmin;
    background-image: url(../images/interface/VideoNode.png);
    background-size: 100%;
    cursor: pointer;
    z-index: 2;
	
	position: absolute;
    
}

#closeContentControl {

	position: absolute;
	top:0px;
	height: 8vmin;
    width: 8vmin;
    background-image: url(../images/interface/ContentClose.png);
    background-size: 100%;
    cursor: pointer;
    z-index: 2;
	
}

#prevContentControl {

	height: 8vmin;
    width: 8vmin;
    background-image: url(../images/interface/ContentPrev.png);
    background-size: 100%;
    cursor: pointer;
    z-index: 2;
}

#nextContentControl {

	height: 8vmin;
    width: 8vmin;
    background-image: url(../images/interface/ContentNext.png);
    background-size: 100%;
    cursor: pointer;
    z-index: 2;
}
#categoryLabelControl {
  color: #f2f2f2;
  font-size: 23px;
  font-family: Verdana, sans-serif;
  text-align: center;
}


.slider {
        width: 88vw;
        /*margin: 0px auto;*/
		left: 6vw;
		top: 3vmin;
		background-color: rgba(0,0,0,0.5);
		
}

.slick-slide {
      /*margin: 3vmin 0vmin;*/
	  margin-left:1.5vw;
	  margin-right:1.5vw;
	  color: white;
    }

.slick-prev:before,
.slick-next:before {
  color: yellow;
}




    .slick-active {
      opacity: .5;
	  transition-duration:1;
    }

    .slick-current {
      opacity: 1;
	  transition-duration:1;
    }

#about-button {
    position: absolute;
    bottom: 3vmin;
    left: 3vmin;
    height: 8vmin;
    width: 8vmin;
    background: url(../images/interface/about.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    z-index: 2;
}

#uv-logo {
    position: absolute;
    top: 3vmin;
    left: 3vmin;
    height: 16vmin;
    width: 12vmin;
    background: url(../images/institucional/logounivalle-blancoynegro128.jpg) no-repeat;
    background-size: 100%;
	cursor: pointer;
    z-index: 2;
}


#ui-controls {
    position: absolute;
    bottom: 3em;
    right: 2.75em;
}

#sound-control {
	position: absolute;
    bottom: 3vmin;
    right: 3vmin;
    height: 8vmin;
    width: 8vmin;
    background-image: url(../images/interface/sound_active.png);
    background-size: 100%;
    cursor: pointer;
    z-index: 2;
}

#prevCarrousel-control {
	position: absolute;
    top: 3vmin;
    left: 3vmin;
    height: 8vmin;
    width: 8vmin;
    background-image: url(../images/interface/CategoryPrev.png);
    background-size: 100%;
    cursor: pointer;
    z-index: 2;
}

#nextCarrousel-control {
	position: absolute;
    top: 3vmin;
    right: 3vmin;
    height: 8vmin;
    width: 8vmin;
    background-image: url(../images/interface/CategoryNext.png);
    background-size: 100%;
    cursor: pointer;
    z-index: 2;
}