:root {
	--primary-color: rgba(254, 254, 254, 1);			/* Body */
	--article-color: rgb(235, 237, 227);				/* Body on the articles */
	--header-color: rgba(254, 254, 254, .1);			/* Header */
	--text-color: #676469;
	--text-color2: #333333;
	--text-color3: #bbbbbb;
	--footer-color: #909090;
	--footer-color: #3F3E40;
	--green-header-color: #77B900;
	/* --header-color: rgba(254, 254, 254, 1); */
}

[data-theme="dark"] {
	--text-color: #FFF;
}


@font-face {
	font-family: 'Minion Pro';
	src: url('../fonts/Minion Pro/Minion Pro Regular/Minion Pro Regular.ttf');
}
@font-face {
	font-family: 'arialg2';
	src: url('../fonts/aria-text-g2.otf');
}
/* @font-face {
	font-family: 'Lucida Sans';
	src: url('../fonts/Lucida-Sans/Lucida Sans Regular.ttf');
} */


body {
	background-color: #ecf0f1;
	background-color: var(--primary-color);
	color: #000;
	font-family: 'Minion Pro', 'arialg2', 'Lucida Sans', helvetica, arial, sans-serif;
	font-size: 16px;
	/* padding-top: 330px; */
	/* -moz-transition: padding-top 0.5s ease;
	-o-transition: padding-top 0.5s ease;
	-webkit-transition: padding-top 0.5s ease;
	transition: padding-top 0.5s ease; */

	/* Para el footer, si rompe algo kitar siguietes 2 lineas*/
	position: relative;
	min-height: 100vh;
}

header, footer, body, body h1, body h2, body h3, body h4, body p, header p, footer p, body a{
	font-family: 'Minion Pro', 'arialg2', 'Lucida Sans', helvetica, arial, sans-serif;

	color: var(--primary-color);
	text-decoration: none;
}

/**********************			Header Start			**********************/

.NavBar {
	overflow: hidden;
	text-align: center;
	width: 100%;
	float: left;
	position: fixed;
	z-index: 9999999999;
	margin-top: 1%;

	height: 100px;
}

#rc_logo {
	left: 2.5%;
	position: absolute;
	background-color: white;
	border-radius: 37px;
	width: 10%;
	width: 250px;
	height: 80%;
	top: 7%;
}

#rc_logo a img{
	width: 70%;
	height: auto;
	margin-top: 1%;
}

.rc_nav {
	width: 93%;
	margin: 0 auto;
	margin-top: 0px;
	margin-top: -93px;
	display: flex;
	justify-content: flex-end;
}

.rc_nav a {
	display: inline-block;
	margin-right: -4px;
	padding: 25px 22px;
	font-size: 1.5rem;
	-webkit-transition: background 0.3s linear;
	-moz-transition: background 0.3s linear;
	-ms-transition: background 0.3s linear;
	-o-transition: background 0.3s linear;
	transition: background 0.3s linear;
	z-index: 9;
}

.rc_nav a:hover {
	text-decoration: underline;
}

.rc_nav .icon {
	display: none;
}

.rc_content {
	text-align: center;
	padding-left: 14px;
	font-family: 'Minion Pro', 'arialg2', 'Lucida Sans', helvetica, arial, sans-serif;
	margin-top: 100px;
	color: #8e909b;
}

@media screen and (max-width: 1400px) {
	#rc_logo{
		border-radius: 34px;
		left: 2%;
	}
}
/* @media screen and (max-width: 820px) { */
@media screen and (max-width: 1064px) {
	#rc_logo a h1{
		display: none;
	}

	.rc_nav a {
		display: none;
	}

	.rc_nav a.icon {
		float: right;
		display: block;
		/* Ahorita siempres es invisible porke solo hay un link, despues se activa y se programa el como se deberia de ver */
		display: none;
		width: 60px;
	}

	.rc_nav.responsive {
		position: relative;
		top: 73px;
	}

	.rc_nav.responsive .icon {
		position: fixed;
		right: 0;
		top: 0;
	}

	.rc_nav.responsive a {
		float: none;
		display: block;
		text-align: center;
	}
}
@media screen and (max-width: 1000px) {
	#rc_logo{
		height: 83%;
		top: 5%;
		left: 1.5%;
	}
	#rc_logo a img {
		margin-top: 3%;
	}
}
@media screen and (max-width: 650px) {
	#rc_logo {
		border-radius: 17px;
		height: 81%;
		left: 2.5%;
		top: 7%;
	}
}
@media screen and (max-width: 600px) {
	.NavBar {
		height: 80px;
	}
	.NavBar img{
		height: 80px !important;
	}
	.rc_nav a{
		padding: 36px 22px;
	}
	#rc_logo{
		width: 180px;
	}
	#rc_logo a img{
		width: 80%;
		height: auto !important;
		margin-top: 2.5%;
	}
}

@media screen and (max-width: 600px) {
	#rc_logo{
		height: 83%;
		top: 5%;
		border-radius: 14px;
	}
}
/**********************			Header End			**********************/


/**********************			Home Start			**********************/
.MainSplash{
	position: relative;
	text-align: center;
	color: white;
}
.MainSplash h1{
	width: 100%;
	font-size: 8rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}



.WoodenTexture{
	margin-top: -5px;
	height: 80px;
}
.BlogCardContainer{
	display: flex;
	flex-flow: row wrap;
	justify-content: left;
	justify-content: center;
	align-items: baseline;
	align-items: center;
	align-items: flex-start;
	align-content: flex-start;

	margin-top: -4px;

	/* background-color: #332E2E; */
	background-color: var(--primary-color);

	height: 180vh;
	min-height: 1450px;

	background: url( '../img/Fondo.png') no-repeat;
	background-size: 100% 100%;
}


.Card{
	width: calc(80%/3);
	height: 75vh;
	min-height: 600px;
	margin: 2% 3.3% 0;
	/* margin: 0 3.3%; */

	background-color: var(--primary-color);
	border-radius: 21px;

	display: flex;
	align-items: center;
	justify-content: center;
}
.Card p, .Card h1, .Card h2, .Card h3{
	color: var(--text-color);
	color: #4f4f4f;
	color: #494949;
}

.Card .Wrapper{
	width: 93%;
	height: 95%;
	border: 2px solid #707070;
	border-radius: 25px;
	position: relative;		/*Esto es para poder poner absolute en el ".Card .Wrapper .footer"*/
}

.Card .Wrapper .header .HojaCard{
	margin: 3%;
}
.Card .Wrapper .header .Title{
	text-align: center;
	font-size: 2rem;
	width: 74%;
	margin: -12% auto 0;
}

.Card .Wrapper .header .Rallita{
	border-bottom: 2px solid var(--text-color);
	width: 60%;
	margin: 3% auto;
}

.Card .Wrapper .body .image{
	position: relative;
	width: 80%;
	height: 280px;
	margin: 0 auto;
	/* border: 2px solid #707070; */
}
.Card .Wrapper .body .ShortContent{
	width: 90%;
	margin: 5% auto 0;
	text-align: justify;
	font-size: 1.5rem;
}

.Card .Wrapper .footer{
	width: 15%;
	margin: 0 auto;
	position: absolute;
	bottom: 4%;
	left: 40%;
}
/* .Card .Wrapper .footer .BotonLeer{ */
.BotonLeer{
	background: #8BA665;
	background-image: -webkit-linear-gradient(top, #8BA665, #94b563);
	background-image: -moz-linear-gradient(top, #8BA665, #94b563);
	background-image: -ms-linear-gradient(top, #8BA665, #94b563);
	background-image: -o-linear-gradient(top, #8BA665, #94b563);
	background-image: linear-gradient(to bottom, #8BA665, #94b563);
	-webkit-border-radius: 13;
	-moz-border-radius: 13;
	border-radius: 13px;
	font-family: 'Minion Pro', 'arialg2', 'Lucida Sans', helvetica, arial, sans-serif;
	color: #ffffff;
	font-size: 20px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
}
/* .Card .Wrapper .footer .BotonLeer:hover { */
.BotonLeer:hover {
	background: #76a333;
	background-image: -webkit-linear-gradient(top, #76a333, #83b833);
	background-image: -moz-linear-gradient(top, #76a333, #83b833);
	background-image: -ms-linear-gradient(top, #76a333, #83b833);
	background-image: -o-linear-gradient(top, #76a333, #83b833);
	background-image: linear-gradient(to bottom, #76a333, #83b833);
	text-decoration: none;
}

@media screen and (max-width: 1800px) {
	.Card .Wrapper .body .image{
		height: 240px;
	}
}
@media screen and (max-width: 1500px) {
	.MainSplash h1{
		width: 80%;
		font-size: 6rem;
	}

	.Card{
		margin: 2% 2% 0;
		width: calc(87%/3);
	}
	.Card .Wrapper .header .Title{
		font-size: 1.8rem;
		width: 72%;
	}
	.Card .Wrapper .body .image{
		height: 200px;
	}
	.Card .Wrapper .body .ShortContent{
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 1300px) {
	.Card .Wrapper .header .HojaCard{
		width: 13%;
	}
	.Card .Wrapper .header .Title{
		font-size: 1.6rem;
		width: 68%;
	}
	.Card .Wrapper .body .image{
		height: 190px;
	}
	.Card .Wrapper .body .ShortContent {
		font-size: 1.3rem;
	}
	.Card{
		min-height: 550px;
	}
}
@media screen and (max-width: 1100px) {
	/* Ya son 2 */
	.BlogCardContainer{
		background: url( '../img/Fondo2160.png') no-repeat;
		background-size: 100% 100%;
		height: 1938px;
	}
	.Card {
		margin: 2% 4% 0;
		width: calc(87%/2.2);
		max-height: 550px;
	}
}
@media screen and (max-width: 900px) {
	.Card {
		margin: 2% 2% 0;
		width: calc(87%/2);
	}
}
@media screen and (max-width: 800px) {
	.MainSplash h1{
		font-size: 5rem;
	}
}
@media screen and (max-width: 700px) {
	.BlogCardContainer {
		background: url( '../img/Fondo3240.png') no-repeat;
		background-size: 100% 100%;
		height: 3000px;
	}
	.Card {
		width: calc(87%/1.5);
		min-height: 300px;
		max-height: 460px;
		height: 65vh;
	}
	.Card .Wrapper .header .HojaCard {
		width: 11%;
	}
	/* .Card .Wrapper .header .Title {
		font-size: 1.4rem;
	} */
	.Card .Wrapper .body .image {
		height: 130px;
	}
	.Card .Wrapper .body .ShortContent {
		font-size: 1.25rem;
	}
}
@media screen and (max-width: 600px) {
	.WoodenTexture{
		margin-top: -6px;
	}
	.BlogCardContainer{
		margin-top: -5px;
	}

	.MainSplash h1{
		top: 60%;
		font-size: 3rem;
	}
	.Card {
		width: calc(87%/1.2);
	}
}
@media screen and (max-width: 500px) {
	.Card {
		width: calc(87%/1.1);
	}
	.Card .Wrapper .header .Title {
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 400px) {
	.MainSplash h1{
		top: 65%;
		font-size: 2.5rem;
	}
	.Card .Wrapper .body .ShortContent {
		font-size: 1rem;
	}
}
@media screen and (max-width: 350px) {
	.MainSplash h1{
		top: 70%;
		font-size: 2rem;
	}
}
/**********************			Home End			**********************/

/**********************			Articulo Start			**********************/
.BlogContainer{
	width: 70%;
	height: 100%;
	margin: 10% auto;
	text-align: center;
}
.BlogContainer .MainIMG{
	width: 100%;
	height: auto;
}
.SubBlogContainer{
	width: 90%;
	margin: 0 auto;
}
.BlogContainer p, .BlogContainer h1, .BlogContainer h2, .BlogContainer h3, .BlogContainer h4, .BlogContainer h5, .BlogContainer ul, .BlogContainer span, .BlogContainer a{
	color: var(--text-color);
	color: var(--text-color2);

	color: #111;
	font-family: "Open Sans";
}
.BlogContainer .z{
	/* width: 90%;
	height: auto; */
	max-height: 670px;
	height: 100%;
	width: auto;
}

.BlogContainer .Fecha{
	color: var(--text-color3);
	font-size: .85rem;
	margin: 3% 0 2%;
}
.BlogContainer .title{
	/* font-size: 3.5rem; */
	font-size: 60px;
}

.BlogContainer .Rallita {
	border-bottom: 1px solid #888;
	width: 50px;
	margin: 3% auto;
}


/* Aki deberian ir los estilos de los articulos pero se pasaron a su propio CSS */


.BlogContainer .SubBlogContainer .SocialShareText{
	margin-top: 3%;
	font-size: 25px;
	font-weight: bold;
}
.BlogContainer .SubBlogContainer .SocialShare{
	margin: 3% 0;
	margin-top: 1.5%;
}
.BlogContainer .SubBlogContainer .SocialShare a .fa{
	color: var(--text-color2);
	color: rgb(22, 22, 22);
	font-size: 2.5rem;
	margin: 0 2%;
}

@media screen and (max-width: 1500px) {
	.BlogContainer{
		width: 80%;
	}
}
@media screen and (max-width: 1200px) {
	.BlogContainer{
		margin: 15% auto;
		width: 85%;
	}
}
@media screen and (max-width: 900px) {
	.BlogContainer{
		margin: 18% auto;
		width: 90%;
	}
	.BlogContainer .SubBlogContainer .SocialShareText{
		margin-top: 5%;
	}
}
@media screen and (max-width: 600px) {
	.BlogContainer{
		margin: 20% auto;
	}
	.BlogContainer .SubBlogContainer .SocialShareText{
		margin-top: 12%;
	}
	.BlogContainer .SubBlogContainer .SocialShare{
		margin-top: 4%;
	}
}
@media screen and (max-width: 450px) {
	.BlogContainer{
		margin: 25% auto;
	}
}
@media screen and (max-width: 450px) {
	.BlogContainer{
		margin-top: 30%;
	}
}
/**********************			Articulo End			**********************/


/**********************			Footer Start			**********************/

footer {
	width: 100%;
	/* background: var(--footer-color); */
	background-color: var(--primary-color);
	background-repeat: no-repeat;
	color: #FFFFFF;

	margin: 0;
	margin-top: -6%;
	padding: 0;
	text-align: center;
}
footer .FHeader{
	padding-top: 5%;
}
footer h1{
	text-align: center;
	font-size: 3rem;
	margin: 0 auto;
	padding-top: 2%;
}
footer form{
	margin-top: 1%;
}
footer form input {
	background: var(--footer-color);
	outline: 0;
	border: 1px solid rgba(162, 160, 160, 0.3);
	border: 1px solid rgba(190, 190, 190, 0.3);

	height: 40px;
	width: 250px;
	font-size: 1rem;
	line-height: 40px;
	margin: 0 .5%;
	padding-left: .5%;
}
footer form .BotonLeer{
	border: 0;
	margin: 0 .5%;
}

.SocialIcons{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 2%;
	margin-bottom: 1%;
}
.SocialIcons li{
	margin: 0 1%;
	font-size: 2rem;
}
.SocialIcons li i{
	font-size: 2.5rem;
}
@media screen and (max-width: 1500px) {
	footer{
		margin-top: -8%;
	}
	footer .FHeader {
		padding-top: 7%;
	}
	.SocialIcons li i{
		font-size: 2rem;
	}
}

@media screen and (max-width: 1200px) {
	footer .FHeader {
		padding-top: 10%;
	}
	.SocialIcons li {
		margin: 0 2%;
	}
}
@media screen and (max-width: 1000px) {
	footer {
		margin-top: -12%;
	}
	footer .FHeader {
		padding-top: 8%;
	}
}
@media screen and (max-width: 700px) {
	footer h1 {
		font-size: 2.8rem;
	}

	footer form {
		margin-top: 5%;
	}
	footer form input{
		width: 190px;
		height: 37px;
		font-size: .9rem;
		line-height: 30px;
	}
	.BotonLeer{
		font-size: 15px;
		padding: 8px 15px 8px 15px;
	}

	.SocialIcons{
		margin-top: 6%;
		margin-bottom: 3%;
	}
	.SocialIcons li {
		margin: 0 3%;
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 550px) {
	footer h1{
		padding-top: 5%;
	}
	footer form input{
		width: 180px;
		height: 35px;
		font-size: .8rem;
		line-height: 30px;

		display: block;
		margin: 1% auto 2%;
	}
}
/**********************			Footer End			**********************/


/**********************			Polyglot start			**********************/
.MainLang {
}
.langContainer {
	position: absolute;
	position: fixed;
	top: 20px;
	right: 95px;
	right: 20vw;
	z-index: 999999999999;
}

.Langs {
	display: none;
	margin-top: 15px;
}
.Lang {
	position: absolute;
	position: relative;
	background-color: #f9f9f9;
	/* min-width: 160px; */
	width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.2);
	padding: 12px 16px;
}
.Lang a{
	text-decoration: none;
	color: #575b69;
}

.LangV2{
	display: inline;
	margin-right: 20px;
}

.langContainer:hover{
	/* translate: 85%; */
	/* translate: 85px; */
}
.langContainer:hover .Langs {
	display: block;
}

@media screen and (max-width: 1064px) {
	.langContainer {
		right: 50vw;
		right: 46vw;
	}
	.Langs {
		margin-top: 16px;
	}
}
/**********************			Polyglot End			**********************/