.carrousel{
	position: relative;
	cursor: grab;
	overflow: hidden;
	box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
	background-color: var(--white);
}.carrousel:active{
	cursor: grabbing;
}

.cont-article, .cont-article-1, .cont-article-2{
	display: none;
	width: 100%;
	height: 45rem;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.cont-article{
	background-image: url('../images/carrousel-0.png');
}

.cont-article-1{
	background-image: url('../images/carrousel-1.png');
}

.cont-article-2{
	background-image: url('../images/carrousel-2.png');
}

.visible-fondo, .visible-header{
	display: block;
	animation-name: fondo;
	animation-duration: 0.9s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}.visible-header{
	animation-name: fondo-header;
}

	.sub-cont{
		width: 100%;
		height: 45rem;
		background-image: linear-gradient(
			to right,
			rgba(255,255,255,1) 20%,
			rgba(255,255,255,0.1) 70%
		);
	}

		.article-0{
			width: 60%;
			padding: 6rem 0 6rem 9rem;
		}

			.article-0 > h3{
				color: #303036;
				font-size: 3.6rem;
				margin-bottom: 3rem;
				letter-spacing: 0.3rem;
				font-family: "Arial";
				font-weight: bold;
				user-select: none;
			}

			.article-0 > p{
				font-size: 1.4rem;
				line-height: 2.3rem; letter-spacing: 0.1rem;
				color: var(--black);
				font-family: "RobotoThin";
				font-weight: bold;
				text-align: left;
				user-select: none;
			}

			.btn-article{
				padding: 6rem 0;
			}.btn-article > button{
				padding: 1.3rem 2.6rem;
				border: none;
				background-color: #3A88F6;
				color: #fff;
				border-radius: 0.6rem;
				text-align: center;
				transition: 0.4s all ease;
				cursor: pointer;
			}.btn-article > button:hover{
				background-color: #3584F1;
			}.btn-article > button > a{
				text-decoration: none;
				color: var(--white);
			}

.cont-circles{
	position: relative;
}

.circles{
	position: absolute;
	top: -7.5rem;
	width: 100%;
	text-align: center;
	padding: 3rem;
	user-select: none;
}

	.circle{
		display: inline-block;
		margin: 0 1rem;
		padding: 1.2rem;
		border: 0.1rem solid var(--brown1);
		background-color: var(--brown-1);
		border-radius: 50%;
		transition: 400ms all ease;
		cursor: pointer;
	}.circle:hover{
		background-color: var(--brown-2);
	}

	.select{
		background-color: var(--brown-2);
	}

.services-title > h3{
	width: 30%;
	margin: 3rem auto;
	font-size: 3rem;
	text-align: center;
	color: var(--gray-1);
	border-bottom: 0.1rem solid var(--gray-1);
	letter-spacing: 0.3rem;
	line-height: 3.9rem;
}

.cont-services{
	width: 90%;
	margin: 3rem auto;

	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

	.sub-cont-services{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		flex-basis: 50%;
	}

		.service{
			text-align: center;
			padding: 6rem 3rem;
			background-color: var(--white);
			flex-basis: 50%;
			opacity: 0;
			box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
		}

		.service-0{
			border-radius: 0.6rem 0 0 0;
			border-bottom: 0.1rem solid var(--gray-1);
			border-right: 0.1rem solid var(--gray-1);
		}

		.service-1{
			border-radius: 0 0.6rem 0 0;
			border-bottom: 0.1rem solid var(--gray-1);
		}

		.service-2{
			border-radius: 0 0 0 0.6rem;
			border-right: 0.1rem solid var(--gray-1);
		}

		.service-3{
			border-radius: 0 0 0.6rem 0;
		}

			.service > figure{
				width: 100%;
				margin: 1rem 0;
				padding: 3rem;
			}

				.service figure picture{
					width: 70%;
					margin: 0 auto;
					padding: 3.3rem 3.9rem;
					cursor: pointer;
					transition: 400ms all ease;
					background-repeat: no-repeat;
					background-position: center;
					background-size: 100% 100%;
				}

				.service > a{
					text-decoration: none;
				}

				.service figure picture:hover, .service > a > h3:hover{
					opacity: 0.6;
					user-select: none;
					cursor: pointer;
				}

				.service-0 figure picture{
					background-image: url('../images/icon.png');
				}

				.service-1 figure picture{
					background-image: url('../images/icon-2.png');
				}

				.service-2 figure picture{
					background-image: url('../images/icon-3.png');
				}

				.service-3 figure picture{
					background-image: url('../images/icon-1.png');
				}

			.service > a > h3{
				font-size: 3rem;
				font-family: RobotoThin;
				color: rgba(0, 0, 0, 0.8);
				margin: 3rem 0;
				transition: 500ms all ease;
			}

			.service > p{
				margin: 0.6rem 0 2.3rem 0;
				color: var(--gray);
				text-align: left;
			}

			.service > ol{
				list-style-position: inside;
				color: var(--gray);
			}.service > ol > li{
				text-align: left;
				display: list-item;
				margin-left: 3rem;
			}

			.service > div{
				width: 50%;
				margin: 0 auto;
				text-align: center;
				padding: 0.6rem;
			}

				.service > div > a{
					display: block;
					color: var(--brown-1);
					text-decoration: none;
					font-weight: bold;
					letter-spacing: 0.6rem;
					font-family: Courier;
					user-select: none;
					transition: 400ms all ease;
				}.service > div > a:hover > div{
					margin-top: 0.3rem;
					height: 1.3rem;
					border-radius: 0.6rem 0.6rem 0 0;
				}

				.service > div > a div{
					width: 100%;
					height: 0.3rem;
					margin-top: 1.3rem;
					background-color: var(--brown-1);
					transition: 400ms all ease;
				}

.main{
	margin: 3rem 0;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}

	.sub-main{
		position: relative;
		background-color: var(--white);
		padding: 9rem 1rem;
		overflow: hidden;
	}

		.main-section, .main-section-1{
			width: 50%;
			margin: 0 auto;
			float: left;
		}

			.main-section > h2{
				font-size: 1.6rem;
				text-align: center;
				font-family: IbmPlexMono;
			}

			.main-section > h3{
				font-size: 3.6rem;
				text-align: center;
				margin-bottom: 3rem;
			}

			.main-section > h3 > span{
				font-family: IbmPlexMono;
				font-size: 3.3rem;
			}

			.main-section > p{
				margin: 1rem 0;
				letter-spacing: 0.1rem;
				line-height: 3rem;
				text-align: justify;
				color: var(--gray);
			}

			.main-section div{
				text-align: center;
				padding: 1.3rem 0;
				margin: 1rem 0;
			}

			.main-section div > span{
				font-size: 1.9rem;
				font-weight: bold;
			}.main-section div > span a[up],
			 .main-section div > span a[down]{
				display: inline-block;
				color: var(--brown-1);
				text-decoration: none;
				transition: 400ms all ease;
				background-color: var(--white);
			}.main-section div > span a[up]:hover{
				color: var(--brown);
				transform: translateY(-0.6rem);
			}.main-section div > span a[down]:hover{
				color: var(--brown);
				transform: translateY(0.6rem);
			}

		.main-section-1 > img{
			display: block;
			width: 90%;
			margin: 0 auto;
			box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
			border-radius: 0.6rem;
		}.main-section-1::before, .main-section-1::after{
			content: '';
			position: absolute;
			left: 6rem; top: 2rem; right: 0; bottom: 0;
			display: block;
			width: 36rem;
			height: 31rem;
			border: 0.3rem solid rgba(0, 0, 0, 0.1);
			z-index: -1;
		}.main-section-1::after{
			left: 1rem; top: -1.3rem;
		}.main-section-1{
			position: relative;
		}

		@media screen and (max-width: 840px){
			.main-section > p{
				padding: 0.9rem;
			}

			.main-section-1::before{
				left: 0;
			}.main-section-1::after{
				left: 3rem; top: -1.3rem;
			}
		}

.scale{
	animation-name: scaleAnimation;
	animation-duration: 0.8s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: linear;
}

@keyframes fondo{
	from{
		opacity: 0;
		filter: saturate(0);
		transform: translateX(30rem);
	}

	to{
		opacity: 1;
		filter: saturate(1);
		transform: translateX(0);
	}
}

@keyframes fondo-header{
	from{
		opacity: 0; filter: saturate(0);
		transform: translateX(-9rem);
	}

	to{
		opacity: 1; filter: saturate(1);
		transform: translateY(0);
	}
}

@keyframes scaleAnimation{
	from{
		transform: scale(0.6);
		opacity: 0;
	}

	to{
		transform: scale(1);
		opacity: 1;
	}
}

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

	.cont-services{
		flex-wrap: wrap;
	}

	.sub-cont-services{
		flex-wrap: wrap;
		flex-basis: 100%;
		flex-direction: column;
	}

		.service-2{border-right: none;}
}

@media screen and (max-width: 750px){
	.header{justify-content: center;}
		.header-nav{display: none;}

	.figure{padding: 2rem 0;}

	.form{
		width: 100%;
		padding: 1rem 0;
	}

		.form > div{
			width: 90%;
		}

	.model-text{padding: 3.6rem 1.6rem;}
	.model-text > p{width: 80%;}

	.article-0{
		width: 80%;
	}

	.cont-services{
		display: block;
	}

		.sub-cont-services{
			margin: 0 auto;
		}.hr{border: none;}

			.service-0{
				border: none;
				border-bottom: 0.1rem solid var(--gray-1);
			}

			.service-1, .service-2{
				border-bottom: 0.1rem solid var(--gray-1);
			}

	.main-section, .main-section-1{
		width: 100%;
		margin: 0; padding: 0;
		float: none;
	}

	.main-section-1::before{
		width: 50rem; height: 40rem;
	}.main-section-1::after{
		left: 20rem; top: -1.3rem;
	}
}

@media screen and (max-width: 690px){
	.article-0{
		width: 100%;
		text-align: center;
		padding: 2.3rem 1.3rem;
	}.article-0 > p{text-align: center;}

		.btn-article{text-align: center;}

	.services-title > h3{
		font-size: 2rem;
	}
}

@media screen and (max-width: 490px){
	.article-0 > h3{
		font-size: 2.6rem;
	}

	.services-title > h3{
		width: 60%;
	}

	.main-section > h2{
		font-size: 1.6rem;
	}

	.main-section > h3{
		font-size: 2.9rem;
	}

	.main-section > h3 > span{
		font-size: 2.6rem;
	}
}

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

	.cont-services{
		width: 100%;
	}

	.main-section > h2{
		font-size: 1.3rem;
	}

	.main-section > h3{
		font-size: 2.6rem;
	}

	.main-section > h3 > span{
		font-size: 2.3rem;
	}
}