#box {
    position: relative;
    width: 100%;
    height: 240px;
    background: #666;
    overflow: hidden;
    /*cursor: none;*/

    
    -webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
}

#box.linux {
	background-image: url(/images/fondoLinux.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}

#box.ubuntu {
	background-image: url(/images/fondoUbuntu.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}

#box.macos {
	background-image: url(/images/fondoMacos.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}

#box.miscelanea {
	background-image: url(/images/fondoMiscelanea.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}

#box.micro-pildoras {
	background-image: url(/images/fondoMicroPildoras.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}

.s_contenedor {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 300px;
}

#s_text {
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0%);
	width: 100%;
	max-width: 608px;
	max-height: 75px;
	padding: 0 30px;
}

.lenguaje #s_text {
	bottom: -8px;
	z-index: 5;
}

#s_text img {
	width: 100%;
	height: auto;
}

.s_box {
	position: absolute;
	background: #ececec;
	top: 125px;
	height: 175px;
}

#s-back {
    left: -5%;
    width: 110%;
}

#s-front {
    left: 0;
    width: 100%;
}

#s_spot {
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200%;
    height: 200%;

background: -moz-radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%);
background: -webkit-radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%);
background: radial-gradient(circle, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);


}

.slogan {
	width: 100%;
	max-width: 640px;
	/*height: 100px;*/
	margin: 0 auto;
	padding: 25px 20px 0;
	overflow: hidden;
	font-size: 18px;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
}

.slogan p {
	color: #222222;
	text-align: justify;
	padding: 0;
	margin: 0;
	font: 18px 'PT Sans', sans-serif;
}

.curiosus {
	position: relative;
	width: 100%;
	height: 125px;
}

@media (max-width:1024px) {

/*#box, .s_contenedor {
	height: 150px;
}

.slogan p {
	font-size: 16px;
	padding-right: 10px;
	padding-left: 10px;
}*/
	
#s_spot {
background: -moz-radial-gradient(ellipse, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
background: -webkit-radial-gradient(ellipse, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
background: radial-gradient(ellipse, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
	
}

@media (max-width:480px) {

#box {
    height: 180px;
}
.curiosus {
	height: 70px;
}
.s_box {
	top: 70px;

}
#s_spot {
background: -moz-radial-gradient(ellipse, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
background: -webkit-radial-gradient(ellipse, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
background: radial-gradient(ellipse, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}
.lenguaje #s_text {
	bottom: -15px;

}
/*#s_spot {
	width: 200%;
	height: 150%;
	left: -200px;
	top: 0;
}	
#s_text {

	padding: 0 30px;
}*/


.slogan {

	padding: 18px 20px 0;

}

}