@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
	--main-color: #417abf;
}

button:active,
a:active,
a:active * {
	outline: none !important;
	-moz-outline-style: none !important;
}
button:focus,
a:focus,
a:focus * {
	outline: none !important;
	-moz-outline-style: none !important;
}

html,
body {
	height: 100%;
	scroll-behavior: smooth !important;
}
body {
	font-family: "Poppins", sans-serif;
	font-size: 15px;
	color: #3f4254;
	margin: 0;
	background-color: #fff;
	overflow-y: scroll;
}
a,
a:hover {
	text-decoration: none;
	color: inherit;
} 

b {
	font-weight: bold;
}

#app {
	height: 100%;
}
#area-login {
	width: 580px;
	display: inline-block;
	box-sizing: border-box;
	padding: 35px 60px;
	height: 100%;
	background-color: white;
}

#area-back {
	width: calc(100% - 580px);
	float: right;
	background-color: #4f4dee;
	height: 100%;
	position: relative;
	color: white;
}
#area-back .img {
	background-image: url('../../img/convocatoria/bg3.png');
	background-size: cover;
	width: 100%;
	height: 100%;
	opacity: 0.2;
	position: absolute;
	top: 0;
	left: 0;
}
#area-back .network {
	position: absolute;
	top: 30px;
	right: 60px;
}
#area-back .network a {
	margin: 2px 7px;
	font-size: 18px;
}
#area-back .area-text {
	position: absolute;
	top: 20%;
	left: 180px;
	font-size: 35px;
}

#area-back .area-textx {
	position: absolute;
	top: 55%;
	left: 180px;
	font-size: 18px;
	text-align: justify;
	width: 80%;
}

#area-back .area-text h1 {
	font-size: 67px;
	font-weight: 600;
}

.valign {
	display: flex;
	align-items: center;
	position: relative;
	height: 100%;
}

.button-right{
	background-color: #01CBD2;
	color: white;
	border: none;
	box-shadow: none;
}

.button-right:hover, .button-right:active {
	background-color: #03b3b9;
	color: white;
	border: none;
	box-shadow: none;
}

.btn-etapa2{
	background-color: #D4D4D4;
	color: #004A8F;
	border: none;
	box-shadow: none;
}
.btn-etapa2:hover, .btn-etapa2:active{
	background-color: #dedcdc;
	color: #004A8F;
	border: none;
	box-shadow: none;
}

.btn-etapa1{
	background-color: #01CBD2;
	color: #000000;
	border: none;
	box-shadow: none;
}
.btn-etapa1:hover, .btn-etapa3:active{
	background-color: #0fe5ec;
	color: #000000;
	border: none;
	box-shadow: none;
}

.btn-etapa3{
	background-color: #4F4DEE;
	color: white;
	border: none;
	box-shadow: none;
}
.btn-etapa3:hover, .btn-etapa1:active{
	background-color: #5f5df7;
	color: white;
	border: none;
	box-shadow: none;
}

#etapas-menu .prim-etapa {
	background-color: #d4d4d4;
	color: #004a8f;
}

#etapas-menu .segun-etapa {
	background-color: #4f4dee;
	color: white;
}

#etapas-menu .ter-etapa {
	background-color: #01cbd2;
}

#etapas-menu .prim-etapa,
.segun-etapa,
.ter-etapa {
	padding-top: 3%;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 1%;
}

#barra {
	background-color: #2b3147;
	padding: 3%;
}

#barra a {
	text-decoration: none;
	font-weight: bold;
	color: #d6e4f1;
	font-size: calc(0.7em + 0.6vw);
}

#barra .req,
.ins,
.becas {
	border-right: 2px solid #d6e4f1;
}

#etapas {
	margin-top: 5%;
	padding-bottom: 5%;
}

#etapas h1 {
	font-weight:900 !important;
	font-family: "Montserrat", sans-serif;
	font-size: calc(1.6em + 1vw);
	color: #212529;
}

#etapas .uno {
	display: inline;
	font-weight: 900;
	color: #00cbd2;
}

#etapas .number {
	font-size: 5em;
	font-weight: 900;
	display: inline;
	font: normal normal 800 115px/140px Montserrat;
	letter-spacing: 0px;
	opacity: 1;
	color: white;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #00cbd2;
}

#etapas .uno-card {
	background-color: #00cbd2;
	border-radius: 8px;
	padding: 5%;
	font-size: 0.9em;
	padding-bottom: 5%;
	color: black;
}

#etapas .uno-card li::before {
	content: "\2022";
	color: black;
	font-weight: bold;
	display: inline-block;
	width: 18px;
	margin-left: -1em;
	font-size: 20px;
}

#etapas .col-uno {
	margin-top: 12%;
}

#etapas .col-dos {
	margin-top: 6.2%;
}

#etapas .uno-card .meses {
	font-size: 1.7em;
	margin-bottom: 2%;
}

#etapas a {
	text-decoration: none;
	color: white;
}

#etapas hr {
	border: 1px solid #090e18;
}

#etapas .uno-card button {
	background-color: #090e18;
	border-radius: 4px;
	color: white;
	border: none;
	padding: 4%;
}

#etapas .uno-card h3 {
	font-weight: bold;
	font-size: 1.5em;
}

#etapas .dos {
	display: inline;
	font-weight: 900;
	color: #4f4dee;
}

#etapas ul {
	margin-left: 20px;
	padding: 0;
	list-style: none;
}
#etapas li {
	padding: 0;
}
#etapas li::before {
	content: "\2022";
	color: white;
	font-weight: bold;
	display: inline-block;
	width: 18px;
	margin-left: -1em;
	font-size: 20px;
}

#etapas .number-dos {
	font-size: 5em;
	font-weight: 900;
	display: inline;
	font: normal normal 800 115px/140px Montserrat;
	letter-spacing: 0px;
	opacity: 1;
	color: white;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #4f4dee;
}

#etapas .dos-card {
	background-color: #4f4dee;
	color: white;
	border-radius: 8px;
	padding: 5%;
	font-size: 0.9em;
	padding-bottom: 9%;
}

#etapas .dos-card h3 {
	font-size: 1.5em;
	font-weight: bold;
}

#etapas .dos-card .meses-dos {
	font-size: 1.5em;
}

#etapas .tres {
	display: inline;
	font-weight: 900;
	color: #576078;
}

#etapas .number-tres {
	font-size: 5em;
	font-weight: 900;
	display: inline;
	font: normal normal 800 115px/140px Montserrat;
	letter-spacing: 0px;
	opacity: 1;
	color: white;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #576078;
}

#etapas .tres-card {
	background-color: #576078;
	color: white;
	border-radius: 8px;
	padding: 5%;
	font-size: 0.9em;
	padding-bottom: 25%;
}

#etapas .tres-card h3 {
	font-size: 1.5em;
	font-weight: bold;
}

#etapas .tres-card .meses-tres {
	font-size: 1.5em;
}

#proposito .text {
	text-align: right;
	padding-right: 5%;
}

#proposito .text h1 {
	font-weight:900 !important;
	font-family: "Montserrat", sans-serif;
	font-size: calc(1.6em + 1vw);
	color: #212529;
}

#metodo {
	margin-top: 10%;
}

#metodo .text {
	text-align: left;
	padding-left: 5%;
}

#metodo .text h1 {
	font-weight:900 !important;
	font-family: "Montserrat", sans-serif;
	font-size: calc(1.6em + 1vw);
	color: #212529;
}

#becas {
	margin-top: 10%;
}

#becas .text {
	text-align: right;
	padding-right: 5%;
}

#becas .text h1 {
	font-weight: 900;
	margin-top: 13%;
	font-size: calc(1.5em + 1vw);
}

footer {
	background-color: #303444;
	margin-top: 5%;
	color: rgb(187, 184, 184);
	padding-top: 3%;
	padding-bottom: 3%;
}

footer h3 {
	color: #487de7;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 15%;
}

footer i {
	color: #487de7;
	direction: rtl;
}

footer a {
	text-decoration: none;
	color: rgb(187, 184, 184);
}

footer p {
	font-size: 0.9em;
}

footer .social {
	/* margin-top: 10%; */
}

footer button {
	padding: 5% !important;
}

#timeline-psu .wrapper {
	display: flex;
	align-items: center;
	column-gap: 10px;
	flex-wrap: wrap;
    row-gap: 1rem;
}
#timeline-psu .divider {
	flex-grow: 1;
	border-color: #d6e4f1;
}

#timeline-psu .circle {
	width: 90px;
	height: 90px;
	line-height: 90px;
	border-radius: 50%;
	font-size: 50px;
	color: #d6e4f1;
	text-align: center;
	background: #236fd1;
}

#timeline-psu .center {
	background-color: #236fd1;
	border-radius: 10px;
	padding: 1%;
	color: #5cc8d0;
	font-weight: bold;
	font-size: 1.2em;
	width: 200px;
    flex-grow: 1;
}

#timeline-psu .right {
	font-size: 1.2em;
	background-color: #d6e4f1;
	border-radius: 60px;
	padding: 1%;
	width: 300px;
    padding: 1%;
    flex-grow: 1;
}

#timeline-psu {
	display: block;
}

#timeline-phone {
	display: none;
}

/*LINEA DE TIEMPO*/

.timeline {
	white-space: nowrap;
	overflow-x: hidden;
}

.timeline ol {
	font-size: 0;
	width: 100vw;
	padding: 250px 0;
	transition: all 1s;
	margin-top: 1%;
	margin-bottom: 10%;
}

.timeline ol li {
	position: relative;
	display: inline-block;
	list-style-type: none;
	width: 190px;
	height: 2px;
	background: #727272;
}

.timeline ol li:last-child {
	width: 280px;
}

.timeline ol li:not(:first-child) {
	margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(100% + 1px);
	bottom: 0;
	width: 20px;
	height: 20px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: #727272;
}

.timeline ol li div {
	position: absolute;
	left: calc(20% + 7px);
	width: 280px;
	padding: 15px;
	font-size: 1rem;
	white-space: normal;
	color: black;
	color: white;
	border-radius: 20px;
}

.timeline ol li div::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid;
}

.timeline ol li:nth-child(odd) div {
	top: -16px;
	transform: translateY(-100%);
}

.timeline ol li:nth-child(odd) div::before {
	top: 100%;
}

.timeline ol li:nth-child(even) div {
	top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
	top: -8px;
}

.timeline time {
	display: block;
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 8px;
}

.timeline button {
	background: transparent;
	border: none;
	cursor: pointer;
	outline: none;
}

.timeline .arrows {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.timeline .arrows .arrow__prev {
	margin-right: 20px;
}

.timeline .disabled {
	opacity: 0.5;
}

.timeline .arrows img {
	width: 45px;
	height: 45px;
}



.accordion-button {
    font-weight: bold !important;
    font-size: 18px;
}



/*RESPONSIVE*/
@media (max-width: 1400px) {
}

@media (max-width: 1280px) {
}

/* LG */
@media (max-width: 1199px) {
	#area-back .area-text {
		left: 52px;
	}
	#area-back .area-text h1 {
		font-size: 50px;
	}
}

/* MD */
@media (max-width: 991px) {
	#area-back .area-text {
		left: 38px;
	}
	#area-back .area-text h1 {
		font-size: 31px;
	}
}

/* SM */
@media (max-width: 767px) {
	#area-back .area-text,
	#area-back .network {
		display: none;
	}
	#area-back {
		display: none;
	}
	#area-login {
		width: 100%;
	}
	.phone-center{
		text-align: center !important;
		justify-content: center !important;
	}
	footer .social {
		margin-top: 10% !important;
	}
	#etapas-menu .prim-etapa {
		padding-top: 2rem;
	}
	#etapas-menu .segun-etapa {
		padding-top: 2rem;
	}
	#etapas-menu .ter-etapa {
		padding-top: 2rem;
	}
}

@media screen and (max-width: 650px) {
	#timeline-psu {
		display: none;
	}
	#timeline-phone {
		display: block;
	}
	.timeline ol,
	.timeline ol li {
		width: auto;
	}

	.timeline ol {
		padding: 0;
		transform: none !important;
	}

	.timeline ol li {
		display: block;
		height: auto;
		background: transparent;
	}

	.timeline ol li:first-child {
		margin-top: 25px;
	}

	.timeline ol li:not(:first-child) {
		margin-left: auto;
	}

	.timeline ol li div {
		width: 94%;
		height: auto !important;
		margin: 0 auto 25px;
	}

	.timeline ol li div {
		position: static;
	}

	.timeline ol li:nth-child(odd) div {
		transform: none;
	}

	.timeline ol li:nth-child(odd) div::before,
	.timeline ol li:nth-child(even) div::before {
		left: 50%;
		top: 100%;
		transform: translateX(-50%);
		border: none;
		border-left: 1px solid #727272;
		height: 55px;
	}

	.timeline ol li:last-child,
	.timeline ol li:nth-last-child(2) div::before,
	.timeline ol li:not(:last-child)::after,
	.timeline .arrows {
		display: none;
	}
	#timeline-phone {
		display: block;
	}
	#timeline-psu {
		display: none;
	}
}

/* XS */
@media (max-width: 575px) {
}

/* XS */
@media (max-width: 360px) {
}