:root {
	--fondo: #f2f2f2;
	--color-temario: #c9c9c9;
	--temario-active: #ffbd86;
	--temario-active-border: #ff7300;
}

html {
	scroll-behavior: smooth;
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

#fondo{
	background-image: url(assets/images/ARC/fondo2.png);
	background-size: 100% 100%;
    background-repeat:no-repeat;
    background-position: center center;
    background-attachment: fixed;
}



aside {
	padding: 0 15px;
}

aside .titulo {
	margin-bottom: 10px;
}

aside .contenedor-temario {
	padding-top: 20px;
	position: sticky;
	top: 0;
}

aside .lista {
	list-style: none;
	border-left: 2px solid var(--color-temario);
	padding-left: 10px;
	margin-left: 10px;
}

aside .lista li {
	position: relative;
}

aside .lista li a {
	display: block;
	color: #5a5a5a;
	padding: 7px 10px;
	text-decoration: none;
	transition: .3s ease all;
}

aside .lista li.activo a,
aside .lista li a:hover {
	color: #000;
}

aside .lista li::before {
	content: "";
	display: block;
	height: 12px;
	width: 12px;
	background: var(--fondo);
	border: 2px solid var(--color-temario);
	position: absolute;
	left: -19px;
	top: calc(50% - 6px);
	transform: rotate(45deg);
	transition: .3s ease all;
}

aside .lista li.activo::before {
	background: var(--temario-active);
	border: 2px solid var(--temario-active-border);
}

aside .lista li:hover::before {
	border: 2px solid var(--temario-active-border);
}

main {
	min-height: 2000px;
}

.card {
	margin: 20px 0;
	padding: 40px;
	background: #fff;
}

@media screen and (max-width: 700px){
	.contenedor {
		grid-template-columns: 1fr;
	}

	aside {
		margin-bottom: 40px;
	}
}
#letras{
	color: #f2f2f2;
}

html,body{
    height:100%;
    }
    *{
    margin:0;
    padding:0;
    }
    #wrapper{
    height:100%;
    width:100%;
    display:table;
    overflow:hidden;
    }
    #contenedor{
    display:table-cell;
    width:100%;
    vertical-align:middle;
    text-align:center;
    }
    #contenido{
    display:inline-block;
    
    margin:0 auto;
    }