@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.bienvenida{
	background: #3375ec;
	display: flex;
	flex-wrap: wrap;
	flex-flow: row nowrap;
	justify-content: space-around;
	padding-top: 40px;
	padding-bottom: 100px;
	margin: -20px 0 0px 0;
	padding-top: 30px;
}
html, body
{
	height: 100%;
}
/* Estilo modal */
.aux-modal{
	position: fixed;
	/* top: 0;
	bottom: 0;
	right: 0;
	left: 0; */
  }
  #smart-button-container{
    width: 80%;
    margin-inline: auto;
}
dialog {
    position: relative;
    top: 45%;
    width: 60%;
    height: 300px;
    border-radius: 15px;
    background: #fff;
    margin: auto;
    z-index: 1;
    margin-top: -100px;
    border: 2px solid #3375ec;
	/* background-color: #3375ec; */

	  }
  dialog::backdrop {
	background: rgba(51, 116, 236, 0.292);
  }
  dialog button {
	box-shadow: 0px 0px 0 #df5228;
  }
  
  dialog button:hover {
	box-shadow: 2px 2px 0 #df5228;
  }
  .paypal-button-container{
	min-height: 350px;
  }
  .costo{
	font-size: 18px;
  }
  /* .btn-dander{
	margin-right: 50px;
  } */
  .btn-close{
	display: flex;
    justify-content: center;
	font-size: 22px;
  }
.img-icon{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}

	.img-inicio{

		background: url(../imagenes/web-app-1-650x500.png);
		background-position: center center;
		background-repeat: no-repeat;
 		/* background-size: cover; */
		 background-size: contain; 
		display: flex;
		height: 350px;
		/* width: 45%; */
		justify-content: center;
		padding: 20px;
	}
		.img-inicio img{
		    max-width: 90%;
		    max-height: 90%;
			width: auto;
			height: auto;
		}
	.intro{
		width: 45%;
		color: white;
	}
	.link-cursos{
		display: flex;
		margin: 30px auto;
		flex-direction: column;
		width: 100%;				
	}	
		.link-cursos a{
			margin-left: auto;
			margin-right: auto;
			width: 150px;
			padding: 12px;
			text-align: center;
			flex: 1 1 auto;
			color: white;
			border: white 2px solid;
			border-radius: 20px;
		}
			.link-cursos a:hover{
				background: #F05941;
				border: #F05941 2px solid;
				color:white;
			}
	.contenedor-imageneshorizontal {
		display: flex;
	}			
	.contenedor-imageneshorizontal img:first-child {
		margin-right: 10px;
	}
.section{
	background: #f7f7f7;
	display: flex;
	padding: 10px;
	justify-content: center;		
}
	.article{
		border-radius: 20px;
		font-size: 13px;
		letter-spacing: 1px;
		margin: 10px 10px 0 0px;
		background: #bbccee28; 
		display: flex;
		justify-content: center;		
		}
		.article img{
			width: 100%;
		}
		.article a{
			color: #fff;
			font-size: 13px;
			padding: 10px 10px;
			background: #000;
			margin: 10px 0;
			display: inline-block;
		}		
		.article a:hover{
			background: #F05941;
		}
		.article h5{
			text-align: center;
			color: black;
			font-size: 25px;
			 text-transform: uppercase; 
			padding:10px 0px;
		}
		.article p{
			color: black;
			font-size: 12px;
			/* text-transform: uppercase; */
			padding:10px 0px;
			
		}
		.article form{
			display: flex;
			justify-content: center;
		}
		.navegacion{
			background: #E55604;
			flex: 1 1 100%;
			margin: 10px 10px 0 0px;
			display: flex;
			justify-content: space-between;
		}

		.navegacion a{
			color: #fff;
			font-size: 14px;
			text-transform: uppercase;
			padding: 0 10px;
			letter-spacing: 2px;
		}
		.navegacion a:hover{
			color: black;
		}

		#carousel-container {
			max-width: 600px;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
			flex-flow: row wrap;
		  }
		  .carousel-content {
			display: none;
		  }
		  .active {
			display: block;
		  }
		  .prev, .next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 24px;
			cursor: pointer;
		  }
		  .prev {
			left: 10px;
		  }
		  .next {
			right: 10px;
		  }
		  .redes{
			padding: 15px;
			display: flex;
			justify-content: center;
		}	
			.redes a{
				padding-left: 20px;
				padding-right: 20px;
				color: white;
				font-size: 25px;
			}
				.redes a:hover{
					color: #F05941;
				}				
			
		.footer{
			border-top: 3px solid #F05941;
			flex-direction:row ;
			justify-content: center;
		}
		
			.pie{
				text-align: center;
			}
			
	.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
		border-color: #ffffff !important;
	}

@media all and (max-width: 940px){
	.bienvenida{
		align-items: center;
		justify-content: space-evenly;
	}
	.img-inicio{
		height: 250px;
	}
}
@media all and (max-width: 820px){
	.section{
		flex-direction: column;	
		width: 100%;
	}

	.aside{
		display: flex;
		justify-content: center;
	}
	.bienvenida{
		flex-direction: column;
		width: 100%;
		justify-content: center;
	}
		.img-inicio, .article img{
		width: 100%;
		height: 480px;
	}
	.intro{
		width: 100%;
		
	}

}
@media all and (max-width: 600px){
	.articulos{
		flex-direction: column;
	}
	.bienvenida{
		flex-direction: column;	
		width: 100%;
		justify-content: center;	
	}
	.img-inicio, .article img{
		width: 100%;
		height: 300px;
	}
	.intro{
		width: 100%;
	}
}
@media all and (max-width: 450px){
	.aside{
		flex-direction: column;
	}
	.bienvenida{
		width: 100%;
		flex-direction: column;
		justify-content: center;
	}
	.img-inicio, .article img{
		width: 100%;
		height: 190px;
	}
	.intro{
		width: 100%;
	}
	.contenedor-imageneshorizontal{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.iconos{
		display: flex;
    	justify-content: center;
		width: 40%;
	}


}





.bienvenida{
	background: #3375ec;
	display: flex;
	flex-wrap: wrap;
	flex-flow: row nowrap;
	justify-content: space-around;
	padding-top: 40px;
	padding-bottom: 100px;
	margin: -20px 0 0px 0;
	padding-top: 30px;
}
html, body
{
	height: 100%;
}
/* Estilo modal */
.aux-modal{
	position: fixed;
	/* top: 0;
	bottom: 0;
	right: 0;
	left: 0; */
  }
  #smart-button-container{
    width: 80%;
    margin-inline: auto;
}
dialog {
    position: relative;
    top: 45%;
    width: 60%;
    height: 300px;
    border-radius: 15px;
    background: #fff;
    margin: auto;
    z-index: 1;
    margin-top: -100px;
    border: 2px solid #3375ec;
	/* background-color: #3375ec; */

	  }
  dialog::backdrop {
	background: rgba(51, 116, 236, 0.292);
  }
  dialog button {
	box-shadow: 0px 0px 0 #df5228;
  }
  
  dialog button:hover {
	box-shadow: 2px 2px 0 #df5228;
  }
  .paypal-button-container{
	min-height: 350px;
  }
  .costo{
	font-size: 18px;
  }
  /* .btn-dander{
	margin-right: 50px;
  } */
  .btn-close{
	display: flex;
    justify-content: center;
	font-size: 22px;
  }



	.img-inicio{

		background: url(../imagenes/web-app-1-650x500.png);
		background-position: center center;
		background-repeat: no-repeat;
 		/* background-size: cover; */
		 background-size: contain; 
		display: flex;
		height: 350px;
		/* width: 45%; */
		justify-content: center;
		padding: 20px;
	}
		.img-inicio img{
		    max-width: 90%;
		    max-height: 90%;
			width: auto;
			height: auto;
		}
	.intro{
		width: 45%;
		color: white;
	}
	.link-cursos{
		display: flex;
		margin: 30px auto;
		flex-direction: column;
		width: 100%;				
	}	
		.link-cursos a{
			margin-left: auto;
			margin-right: auto;
			width: 150px;
			padding: 12px;
			text-align: center;
			flex: 1 1 auto;
			color: white;
			border: white 2px solid;
			border-radius: 20px;
		}
			.link-cursos a:hover{
				background: #F05941;
				border: #F05941 2px solid;
				color:white;
			}
	.contenedor-imageneshorizontal {
		display: flex;
	}			
	.contenedor-imageneshorizontal img:first-child {
		margin-right: 10px;
	}
.section{
	background: #f7f7f7;
	display: flex;
	padding: 10px;
	justify-content: center;		
}
	.article{
		border-radius: 20px;
		font-size: 13px;
		letter-spacing: 1px;
		margin: 10px 10px 0 0px;
		background: #bbccee28; 
		display: flex;
		justify-content: center;		
		}
		.article img{
			width: 100%;
		}
		.article a{
			color: #fff;
			font-size: 13px;
			padding: 10px 10px;
			background: #000;
			margin: 10px 0;
			display: inline-block;
		}		
		.article a:hover{
			background: #F05941;
		}
		.article h5{
			text-align: center;
			color: black;
			font-size: 25px;
			 text-transform: uppercase; 
			padding:10px 0px;
		}
		.article p{
			color: black;
			font-size: 12px;
			/* text-transform: uppercase; */
			padding:10px 0px;
			
		}
		.article form{
			display: flex;
			justify-content: center;
		}
		.navegacion{
			background: #E55604;
			flex: 1 1 100%;
			margin: 10px 10px 0 0px;
			display: flex;
			justify-content: space-between;
		}

		.navegacion a{
			color: #fff;
			font-size: 14px;
			text-transform: uppercase;
			padding: 0 10px;
			letter-spacing: 2px;
		}
		.navegacion a:hover{
			color: black;
		}

		#carousel-container {
			max-width: 600px;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
			flex-flow: row wrap;
		  }
		  .carousel-content {
			display: none;
		  }
		  .active {
			display: block;
		  }
		  .prev, .next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 24px;
			cursor: pointer;
		  }
		  .prev {
			left: 10px;
		  }
		  .next {
			right: 10px;
		  }
		  .redes{
			padding: 15px;
			display: flex;
			justify-content: center;
		}	
			.redes a{
				padding-left: 20px;
				padding-right: 20px;
				color: white;
				font-size: 25px;
			}
				.redes a:hover{
					color: #F05941;
				}				
			
		.footer{
			border-top: 3px solid #F05941;
			flex-direction:row ;
			justify-content: center;
		}
		
			.pie{
				text-align: center;
			}
			
	.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
		border-color: #ffffff !important;
	}

@media all and (max-width: 940px){
	.bienvenida{
		align-items: center;
		justify-content: space-evenly;
	}
	.img-inicio{
		height: 250px;
	}
}
@media all and (max-width: 820px){
	.section{
		flex-direction: column;	
		width: 100%;
	}

	.aside{
		display: flex;
		justify-content: center;
	}
	.bienvenida{
		flex-direction: column;
		width: 100%;
		justify-content: center;
	}
		.img-inicio, .article img{
		width: 100%;
		height: 480px;
	}
	.intro{
		width: 100%;
		
	}

}
@media all and (max-width: 600px){
	.articulos{
		flex-direction: column;
	}
	.bienvenida{
		flex-direction: column;	
		width: 100%;
		justify-content: center;	
	}
	.img-inicio, .article img{
		width: 100%;
		height: 300px;
	}
	.intro{
		width: 100%;
	}
}
@media all and (max-width: 450px){
	.aside{
		flex-direction: column;
	}
	.bienvenida{
		width: 100%;
		flex-direction: column;
		justify-content: center;
	}
	.img-inicio, .article img{
		width: 100%;
		height: 190px;
	}
	.intro{
		width: 100%;
	}
	.contenedor-imageneshorizontal{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.iconos{
		display: flex;
    	justify-content: center;
		width: 40%;
	}


}