@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');

.bg-banner{

	background: linear-gradient(360.08deg, rgba(255, 255, 255, 0.64) 15.03%, rgba(178, 130, 235, 0.04) 1.83%, #2844F3 236.89%);

}

.bg-banner-2{

	background: linear-gradient(360.08deg,rgba(178, 130, 235, 0.04) 1.83%, #2844F3 236.89%);

}

.body-terms{
	padding-right: 12px; 
	padding-left: 12px; 
	padding-top: 30px; 
	background: rgba(255, 255, 255, 0.64) 15.03%
}

.mt-39{

	margin-top: 39px

}

.navbar-dark .navbar-toggler {
    color: transparent !important;
    border-color: transparent !important;
    border: 0px !important;
}


.separador{

	padding-top: 50px;

}

.alto-banner-principal{

	padding-top: 200px;
	padding-bottom: 200px;

}

.boton-purpura{

	background: #B282EB;
	box-shadow: 0px 0px 31px #B282EB;
	border-radius: 83px;
	color: #fff;
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 700;
	font-size: 19px;
	padding: 15px;
	border-color: #B282EB;
	border: 0px;
	width: 300px;
	margin-top: 120px;

}

.navbar-light .navbar-nav .nav-link{

	color: #fff !important;
	padding: 10px 30px;

}

.navbar{

	padding-top: 30px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
    padding-bottom: 0px !important;

}

.font-menu{

	font-family: 'Rubik';
	font-weight: 700;
	font-size: 18px;
	color: #FFFFFF !important;

}

.boton-violeta{

	background: #5D53EE;
	box-shadow: 0px 0px 42.1669px rgba(178, 130, 235, 0.5);
	border-radius: 83px;
	color: #fff;
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 700;
	font-size: 19px;
	padding: 15px;
	border-color: #B282EB;
	border: 0px;
	width: 300px;
	margin-left: 30px;

}

.titulos{

	color: rgba(115, 110, 228, 0.2);
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 800;
    font-size: 85px;
	text-align: center;

}

.titulos-2{

	color: rgba(115, 110, 228, 0.2);
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 600;
    font-size: 100px;
	text-align: center;

}


.titulo-card{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 800;
	font-size: 23px;
	line-height: 31px;
	text-align: center;
	color: #5C5B5B;

}

.precio{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 600;
	font-size: 30px;
	text-align: center;
	color: #3C44FF;
	border-top: solid 1px #5C5B5B;
	margin: 10px 0px 10px 0px;

}

.card{

	margin: 0px !important;
	padding: 0px !important;
	filter: drop-shadow(0px 5.80635px 5.80635px rgba(0, 0, 0, 0.35));
	border-radius: 21px;

}

.boton-card{

	padding: 11px 30px;
	background: #3C44FF;
	border-radius: 15px;
	color: #fff;
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300;
	font-size: 15px;
	text-decoration: none;

}

.boton-card:hover{

	color: #fff;
	text-decoration: none;

}

.texto-derecha{

	text-align: right;

}

.background-footer{


	background-image: url("../img/bf_footer.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding-top: 100px;
}

.col-sub-footer{

	margin-bottom: 30px;
	margin-top: 30px;
	text-align: right;

}

.titulo_footer{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 800;
	font-size: 70px;
	color: #FFFFFF;
	text-shadow: 2.81113px 2.81113px 1.40556px rgba(0, 0, 0, 0.25);
	margin-left: 230px;

}

.contenedor_form{

	padding: 50px 36px;
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), linear-gradient(180deg, rgba(255, 255, 255, 0.8) -5.25%, rgba(255, 255, 255, 0) 110.98%);
	border-radius: 29px;
	width: 500px;

}

.titulo_form{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 800;
	font-size: 25px;
	color: #333333;

}

.sub-titulo_form{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 800;
	font-size: 20px;
	color: #333333;

}

.boton-form{

	background: #5D53EE;
	box-shadow: 0px 5.62225px 5.62225px rgba(0, 0, 0, 0.35);
	border-radius: 59.0337px;
	color: #fff;
	border: 1px solid #5D53EE;
	margin-top: 20px;
	padding: 10px 50px 10px 50px;
	margin-top: 40px;

}

.form-control{

	background-color: transparent !important;
	border: transparent !important;
	color: #000 !important;
	border-bottom: 1px solid #000 !important;
	margin-top: 40px;
}

.footer-minitxt{

	color: #fff;
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 600;
	font-size: 20px;

}

.sub-footer-minitxt{

	color: #fff;
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	margin-top: 20px;

}

.border-blanco{

	border-bottom: 1px solid #fff;
	color: #fff;

}

.links_footer{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	text-decoration: none;
	color: #C4C4C4;
	text-align: right;
	margin-bottom: 70px;


}

.links_footer:hover{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	text-decoration: none;
	color: #C4C4C4;
	text-align: right;

}

.end { margin-right: 0 !important; }

.wrapper{ 

	width: 200px;
	height: 500px;
	margin: 50px 10px;
	background-color: #fff;
	hoverflow: hidden;


}

.panel {
	margin: 0 auto;
	height: 130px;  
	position: relative;
	-webkit-perspective: 600px;
	-moz-perspective: 600px;
}

.panel .front,
.panel .back {
	text-align: center;
}
	
.panel .front {
	height: inherit;
	position: absolute;
	top: 0;
	z-index: 900;
	text-align: center;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	   -moz-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		 -o-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
}

.panel .back {
	height: inherit;
	position: absolute;
	top: 0;
	z-index: 1000;
	-webkit-transform: rotateY(-180deg);
	   -moz-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	-webkit-transition: all .4s ease-in-out;
	   -moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		 -o-transition: all .4s ease-in-out;
			transition: all .4s ease-in-out;
}
.panel.flip .front {
	z-index: 900;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
}
.panel.flip .back {
	z-index: 1000;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
}
.box1{
	background: #FFFFFF;
	box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.12);
	border-radius: 44.0088px;
	width: 272px;
	height: 500px;
	margin: 0 auto;
	padding: 20px;
	height: 400px;
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 700;
	font-size: 35px;
	line-height: 44px;
	text-align: center;
	box-shadow: 72.6146px 72.6146px 52.0177px rgb(0 0 0 / 0%), inset 4.40088px 4.40088px 35.6079px #e4ceff;;
}
.box2{
	background: #5D53EE;
	box-shadow: 20px 20px 20px rgba(0, 0, 0, 0.12);
	border-radius: 41.8662px;
	width: 272px;
	height: 500px;
	margin: 0 auto;
	padding: 20px;
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 700;
	font-size: 35px;
	text-align: center;
	filter: drop-shadow(35.5862px 43.9595px 138.158px rgba(0, 0, 0, 0.0));
	box-shadow: inset 4.18662px 8.37323px 113.039px #C6A9ED;
}

.hover-title{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 700;
	font-size: 25px;
	text-align: center;
	color: #FFFFFF;

}


.title-card-no-hover{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 700;
	font-size: 25px;
	text-align: center;
	color: #B282EB;

}

.hover-sub-title{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 500;
	font-size: 13px;
	text-align: center;
	color: #FFFFFF;

}

.content_img{

	    float: left;

}

.content_img div{
    position: absolute;
    bottom: 0;
    background: transparent;
    color: white;
    margin-bottom: 20px;
    font-family: 'Rubik';
    opacity: 0;
    visibility: hidden;
    -webkit-transition: visibility 0s, opacity 0.5s linear;  
    transition: visibility 0s, opacity 0.5s linear;
    font-family: 'Quicksand';
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	text-shadow: 0px 3px 14px #B282EB;
}

.content_img:hover{
    cursor: pointer;
}    

.content_img:hover div{
    width: 80%;
    padding: 8px 15px;
    visibility: visible;
    opacity: 1; 
    background: linear-gradient(7.02deg, #000000 17%, rgba(0, 0, 0, 0) 56%);
    border-radius: 20px 20px 59px 4px;
    margin-left: 14px;
}

.content_img:hover div img{
    width: 25px;        
    float: left;
    font-size: 22px;
	color: #FFFFFF;
	text-shadow: 0px 3px 14px #B282EB;

}

/*Burbujas*/

.burbuja-1{

	position: absolute;
	top: 300px;
	right: 0px;
	opacity: 0.9;
	z-index: -1;

}

.burbuja-2{

	position: absolute;
	top: 0px;
	left: 0px;
	z-index: -10;
	opacity: 0.5;

}

.burbuja-3{

	position: absolute;
	top: 200px;
	left: 0px;
	opacity: 0.5;
	z-index: -1;

}

.burbuja-4{

	position: absolute;
    top: 175px;
    left: 200px;
    opacity: 0.8;
    z-index: -1;

}

.burbuja-5{

	position: absolute;
    top: -100px;
    right: 0px;
    opacity: 1;
    z-index: -1;

}


.burbuja-6{

    position: absolute;
    top: 250px;
    right: 350px;
    opacity: 0.7;
    z-index: -1;

}

.burbuja-7{

    position: absolute;
    top: 1772px;
    left: 0px;
    opacity: 1;
    z-index: 100;

}

.burbuja-8{

    position: absolute;
    top: 1800px;
    right: 100px;
    opacity: 0.4;
    z-index: -1;

}

.burbuja-9{

    position: absolute;
    top: 2309px;
    left: 100px;
    opacity: 1;
    z-index: -1;

}

.espacio-div-footer{

	padding-left: 170px;

}

.espacio-div-subfooter{

	padding-left: 50px;

}


.img-titulo-desarrollo{

  	width: 238px !important;
    margin-top: 60px;

}

.img-titulo-automatizacion{

  	width: 238px !important;
    margin-top: 60px;

}

.img-titulo-diseño{

    width: 190px !important;
    margin-left: 30px;
    margin-top: 51px;

}

.img-titulo-cursos{

    width: 238px !important;
    margin-top: 70px;

}

.img-titulo-inge{

	width: 187px !important;
    margin-left: 20px;
    margin-top: 60px;

}


@media only screen and (max-width: 1374px) {


	.mt-31-tablet {
    margin-top: 39px;

}
	.mt-39 {
    margin-top: 70px;


}

.box1 {
    width: 253px !important;
}

.box2 {
    width: 253px !important;
}
}

@media only screen and (max-width: 1184px) {


	.mt-37-tablet{
		margin-top: 37px !important;

	}


}


/*Laptop*/
@media only screen and (max-width: 1440px) {

	.img-titulo-desarrollo{

		width: 185px !important;
		margin-left: 20px;

	}

	.img-titulo-automatizacion{

		width: 185px !important;
		margin-left: 20px;

	}

	.img-titulo-diseño{

		width: 190px !important;
		margin-left: 20px;

	}

	.img-titulo-cursos{

		width: 200px !important;
		margin-left: 20px;

	}

	.img-titulo-inge{

		width: 197px !important;
		margin-left: 0px;

	}

	.box1 {
	    width: 268px !important;
	}
	.box2 {

		width: 268px !important;

	}

	.burbuja-6 {
    position: absolute;
    top: 250px;
    right: 115px;
    opacity: 0.7;
	}

	.burbuja-4 {
    position: absolute;
    top: 244px;
    left: 115px;
    opacity: 0.8;
	}

	.burbuja-7 {
    position: absolute;
    top: 1543px;
    left: 0px;
    opacity: 1;
    z-index: 100;
}

.burbuja-8 {
    position: absolute;
    top: 1745px;
    right: 0px;
    opacity: 0.4;
    z-index: -1;
}


}


.ver-servicios{

	font-family: 'Rubik';
	font-style: normal;
	font-weight: 900;
	font-size: 20px;
	line-height: 24px;
	text-align: center;
	color: #B282EB;
	margin-top: 50px;


}

/*LAPTOP PEQUEÑA*/

@media only screen and (max-width: 1024px) {

.mt-39 {
    margin-top: 70px;
}
	.titulo-card {
    font-size: 18px;
	}

	.mt-37-tablet {
    margin-top: 69px !important;
}

	.mt-31-tablet{

		margin-top: 39px;

	}


	.box1 {

	    width: 233px !important;
	    box-shadow: 72.6146px 72.6146px 88.0177px rgba(0, 0, 0, 0.0), inset 4.40088px 4.40088px 39.6079px #E4CEFF;

	}

	.box2 {

		width: 233px !important;
		box-shadow: inset 2.8867px 5.7734px 77.9409px #C6A9ED;
		filter: drop-shadow(24.5369px 30.3103px 95.2611px rgba(0, 0, 0, 0.0));

	}


.burbuja-1 {
    position: absolute;
    top: 300px;
    right: 0px;
    opacity: 0.9;
    z-index: 10;
}

.burbuja-6 {
	display: none;
}

.burbuja-2 {
    position: absolute;
    top: -150px;
    left: -184px;
    z-index: -10;
    opacity: 0.5;
}

.burbuja-5 {
    position: absolute;
    top: -200px;
    right: 0px;
    opacity: 1;
    z-index: -1;
}

	.burbuja-4 {
		display: none;
}

	.burbuja-3 {
    position: absolute;
    top: 200px;
    left: -63px;
    opacity: 0.5;
	}

	.burbuja-8 {
		display: none;
	}

	.burbuja-7 {
    position: absolute;
    top: 1543px;
    left: 0px;
    opacity: 1;
    z-index: -1;
	}

	.contenedor_form {

		width: 420px;

	}

	.espacio-div-footer {

		padding-left: 64px;

	}

	.titulos-2{

		font-size: 77px;

	}

	.img-titulo-desarrollo{

		width: 185px !important;
		margin-left: 0px;

	}

	.img-titulo-automatizacion{

		width: 185px !important;
		margin-left: 0px;

	}

	.img-titulo-diseño{

		width: 190px !important;
		margin-left: 0px;

	}

	.img-titulo-cursos{

		width: 200px !important;
		margin-left: 0px;

	}

	.img-titulo-inge{

		width: 197px !important;
		margin-left: 0px;

	}

}

/*TABLET*/
@media only screen and (max-width: 768px) {

	.solapar-header-carrusel{

		margin-top: -240px;

	}

	.mt-39-t{

		margin-top: 39px;

	}

	.mt-31-tablet {
    margin-top: 39px;
}

	.border-blanco{

	border-bottom: 0px solid #fff;
	color: transparent;

	}

	.titulo_footer{

		font-size: 60px;
		text-align: center;
		margin: 20px 20px;
		margin-left: 20px;

	}

	.col-sub-footer{

		text-align: center;

	}

	.footer-minitxt{

		margin: 5px 5px;
		text-align: center;

	}

	.sub-footer-minitxt{

		text-align: center;

	}

	.titulos{

		font-size: 100px;
		text-align: center;

	}

	.boton-violeta{

		margin: 20px 0px 0px 0px;

	}



	.burbuja-1 {
    position: absolute;
    top: 400px;
    right: 0px;
    opacity: 0.9;
    z-index: -1;
	}

	.burbuja-4 {
    position: absolute;
    top: 453px;
    left: 136px;
    opacity: 0.8;
    z-index: -1;
	}

	.burbuja-3 {
    position: absolute;
    top: 200px;
    left: -95px;
    z-index: -1;
    opacity: 1;
	}

	.burbuja-9 {
    position: absolute;
    top: 2443px;
    left: 100px;
    opacity: 1;
    z-index: -1;
	}

	.burbuja-7 {
    position: absolute;
    top: 1851px;
    left: 0px;
    opacity: 1;
    z-index: -1;
	}

.alto-banner-principal {
    padding-top: 100px;
    padding-bottom: 430px;
}

	.contenedor_form {

		width: 100%;

	}

	.espacio-div-footer {
    padding-left: 0px;
}

	.titulos-2{

		font-size: 70px;

	}

	.box2{

		width: 343px;
		box-shadow: inset 2.8867px 5.7734px 77.9409px #C6A9ED;
		filter: drop-shadow(24.5369px 30.3103px 95.2611px rgba(0, 0, 0, 0.0));

	}

	.box1{

		width: 343px;
	box-shadow: 72.6146px 72.6146px 88.0177px rgba(0, 0, 0, 0.0), inset 4.40088px 4.40088px 39.6079px #E4CEFF;

	}

	.img-titulo-desarrollo{

	    width: 185px !important;
	    margin-left: 6px;
	    margin-top: 95px;

	}

	.img-titulo-automatizacion{

	    width: 185px !important;
	    margin-left: 6px;
	    margin-top: 95px;

	}

	.img-titulo-diseño {
	    width: 161px !important;
	    margin-left: 14px;
	    margin-top: 77px;
	}

	.img-titulo-cursos{

		width: 200px !important;
		margin-left: 0px;
		margin-top: 95px;


	}

	.img-titulo-inge{

		width: 197px !important;
	    margin-left: 0px;
	    margin-top: 59px;
	}


	.background-footer{


	background-image: url("../img/bf_footer_mb.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding-top: 100px;
	}

	.navbar-dark .navbar-nav .nav-link{

		color: rgba(255,255,255,1) !important;

	}

	.hover-sub-title {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    color: #FFFFFF;
}

}

/*CELU*/

@media only screen and (max-width: 425px) {

	.title-card-no-hover {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    color: #B282EB;
    line-height: 22px;
}

	.mt-39-t {
    margin-top: 38px;
	}

	.mt-31-tablet {
	    margin-top: 70px;
	}

	.border-blanco{

	border-bottom: 0px solid #fff;
	color: transparent;

	}

	.box1{

		width: 375px !important;
		box-shadow: 49.9464px 49.9464px 60.541px rgba(0, 0, 0, 0.0), inset 3.02705px 3.02705px 27.2435px #E4CEFF;
	}

	.box2{

		width: 375px !important;
		box-shadow: inset 2.8867px 5.7734px 77.9409px #C6A9ED;
		filter: drop-shadow(24.5369px 30.3103px 95.2611px rgba(0, 0, 0, 0.0));

	}

	.titulo_footer {
	    font-size: 42px;
	    text-align: center;
	    margin: 20px 20px;
	}

	.espacio-div-subfooter {
    padding-left: 35px;
    padding-right: 30px;
	}


	.footer-minitxt{

		margin: 5px 5px;
		text-align: center;

	}

	.sub-footer-minitxt{

		text-align: center;

	}


	.burbuja-7{

		display: none;

	}

	.burbuja-9{
		display: none;

	}

	.burbuja-1{

		display:  none;

	}

	.alto-banner-principal{

		padding-top: 100px;
		padding-bottom: 330px;


	}

	.contenedor_form {

		width: 100%;

	}

	.espacio-div-footer {
    padding-left: 0px;
}


	.titulos-2{

		font-size: 59px;

	}


	.navbar{

		padding: 10px 10px;

	}

	.img-titulo-desarrollo{

		width: 100% !important;
		margin-left: 0px;

	}

	.img-titulo-automatizacion{

		width: 100% !important;
		margin-left: 0px;

	}

	.img-titulo-diseño{

		width: 100% !important;
		margin-left: 0px;

	}

	.img-titulo-cursos{

		width: 100% !important;
		margin-left: 0px;

	}

	.img-titulo-inge{

		width: 100% !important;
		margin-left: 0px;

	}

	.titulos{

		font-size: 70px;
		text-align: center;

	}

	.hover-sub-title {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    color: #FFFFFF;
}

.hover-title {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-size: 19px;
    text-align: center;
    color: #FFFFFF;
}

}

@media only screen and (max-width: 375px) {

	.mt-31-tablet {
    margin-top: 39px;
}


	.border-blanco{

	border-bottom: 0px solid #fff;
	color: transparent;

	}


	.box1 {
    width: 283px !important;
    box-shadow: 49.9464px 49.9464px 60.541px rgba(0, 0, 0, 0.0), inset 3.02705px 3.02705px 27.2435px #E4CEFF;
	}

	.box2 {
    width: 283px !important;
	}

	.contenedor_form {

		width: 100%;

	}	

	.espacio-div-footer {

    padding-left: 0px;

	}

		.burbuja-1{

		display:  none;

	}

	.navbar{

		padding: 10px 10px;

	}


	.footer-minitxt{

		margin: 5px 5px;
		text-align: center;

	}

	.sub-footer-minitxt{

		text-align: center;

	}

	.hover-sub-title {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    text-align: center;
    color: #FFFFFF;
}

.hover-title {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-size: 19px;
    text-align: center;
    color: #FFFFFF;
}

}