#universo{
    position: relative;

    width: 100vw;
    height: 100vh;

    background: #111;

    overflow: hidden;
}

#universo body {
    
}

#universo .nodo{
    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;

    color: white;
}

#universo .nodo:hover span{
 	opacity: 1;
}

#universo .nodo svg{
    width: 140px;
    height: 140px;

    transition:
        transform 0.4s,
        filter 0.4s;

}

#universo .nodo:hover svg{
    transform: scale(1.06);

    filter:
        drop-shadow(0 0 8px #fff)
        drop-shadow(0 0 18px #5dade2);
}

#universo .nodo span{
    opacity: 0;

    transition: 0.3s;

    margin-top: 12px;
}

#universo .subnodos{

    opacity:0;

    pointer-events:none;

    transition:0.4s;

    position:absolute;

    top:-80px;
    left:-80px;

    width:340px;
    height:340px;
}


#universo .linea{

	position:absolute;

	width:2px;
	height:80px;
	background:#5dade2;
	opacity:0.5;
	transform-origin:top center;
}

#universo .subnodo:nth-child(1) .linea{

	    transform:
	            rotate(0deg);

		        top:55px;
}

#universo .subnodo:nth-child(2) .linea{

	    transform:
	            rotate(90deg);

		        top:-5px;
			    left:-35px;
}

#universo .subnodo:nth-child(3) .linea{

	    transform:
	            rotate(180deg);

		        top:-25px;
}

#universo .subnodo:nth-child(4) .linea{

    	transform:
		rotate(-90deg);
			top:-5px;
			left:35px;
}


@media (hover:hover){

    #universo .ciencia:hover .subnodos{
        opacity:1;
        pointer-events:auto;
    }

}

#universo .ciencia.activo .subnodos{
    opacity:1;
    pointer-events:auto;
}
@media (hover:hover){

    #universo .humanidades:hover .subnodos{
        opacity:1;
        pointer-events:auto;
    }

}

#universo .humanidades.activo .subnodos{
    opacity:1;
    pointer-events:auto;
}

@media (hover:hover){

    #universo .arte:hover .subnodos{
        opacity:1;
        pointer-events:auto;
    }

}

#universo .arte.activo .subnodos{
    opacity:1;
    pointer-events:auto;
}



#universo .subnodo{

    position:absolute;

    display:flex;
    flex-direction:column;
    
    align-items:center;
    justify-content:center;

    color:white;

    font-size:12px;
}

#universo .subnodo verso .conexiones{
	
	position:absolute;    
	inset:0;
	width:100%;
        height:100%;
	pointer-events:none;
}
		    
svg{

	width:70px;
	height:70px;

	transition:0.3s;

}

#universo .subnodo:hover svg{
	
	transform:scale(1.1);

	filter:
		drop-shadow(0 0 10px #5dade2);

}


#universo .subnodo:nth-child(1){
    top:0;
    left:175px;
}

#universo .subnodo:nth-child(2){
    top:175px;
    right:0;
}

#universo .subnodo:nth-child(3){
    bottom:0;
    left:175px;
}

#universo .subnodo:nth-child(4){
    top:175px;
    left:0;
}

#universo .ciencia{
    left: 18%;
    top: 58%;
}

#universo .humanidades{
    left: 58%;
    top: 18%;
}


#universo .arte{
    left: 18%;
    top: 58%;
}


#universo .arte{
    left: 68%;
    top: 62%;
}

#universo .ciencia > svg{
    width: 180px;
}

#universo .humanidades > svg{
    width: 150px;
}

#universo .arte > svg{
    width: 165px;
}