/*
*
*	Author: David Pizalez
*	Date: 30 abr.2023
*	Project: One Media MX
__________________________________________
*
* CONFIGURATION
__________________________________________
*/
:root {
  --body-color: #e5e5e5;
  --text-color: #6a6f80;

  --logo-height: 4.875;/*78 px*/
  --logo-width: 9.75rem; /*156 px*/
}
@font-face {
    font-family: 'poppinslight';
    src: url('../fonts/poppins-light-webfont.eot');
    src: url('../fonts/poppins-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/poppins-light-webfont.woff2') format('woff2'),
         url('../fonts/poppins-light-webfont.woff') format('woff'),
         url('../fonts/poppins-light-webfont.ttf') format('truetype'),
         url('../fonts/poppins-light-webfont.svg#poppinslight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinsmedium';
    src: url('../fonts/poppins-medium-webfont.eot');
    src: url('../fonts/poppins-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/poppins-medium-webfont.woff2') format('woff2'),
         url('../fonts/poppins-medium-webfont.woff') format('woff'),
         url('../fonts/poppins-medium-webfont.ttf') format('truetype'),
         url('../fonts/poppins-medium-webfont.svg#poppinsmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinsregular';
    src: url('../fonts/poppins-regular-webfont.eot');
    src: url('../fonts/poppins-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/poppins-regular-webfont.woff2') format('woff2'),
         url('../fonts/poppins-regular-webfont.woff') format('woff'),
         url('../fonts/poppins-regular-webfont.ttf') format('truetype'),
         url('../fonts/poppins-regular-webfont.svg#poppinsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinssemibold';
    src: url('../fonts/poppins-semibold-webfont.eot');
    src: url('../fonts/poppins-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/poppins-semibold-webfont.woff2') format('woff2'),
         url('../fonts/poppins-semibold-webfont.woff') format('woff'),
         url('../fonts/poppins-semibold-webfont.ttf') format('truetype'),
         url('../fonts/poppins-semibold-webfont.svg#poppinssemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'poppinsthin';
    src: url('../fonts/poppins-thin-webfont.eot');
    src: url('../fonts/poppins-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/poppins-thin-webfont.woff2') format('woff2'),
         url('../fonts/poppins-thin-webfont.woff') format('woff'),
         url('../fonts/poppins-thin-webfont.ttf') format('truetype'),
         url('../fonts/poppins-thin-webfont.svg#poppinsthin') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
*	RESET CSS BROWSER ELEMENTS
________________________________
*/
*, *:after, *:before {
	box-sizing: border-box;
	font-size: 100%;
	font: inherit;
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	background-color: var(--body-color);
	color: var(--text-color);
    font-family: 'poppinsmedium';
    line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
label, input, select {
	display: block;
}
input[type=submit],
button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: 0;

	transition: opacity 0.2s;
}
input[type=submit]:hover,
button:hover {
	opacity: 0.8;
}
a {
	display: table;
	color: var(--text-color);
	font-size: 0.9rem;
	opacity: 1;
	text-decoration: none;
	
	transition: opacity 0.2s;
}
a:hover {
	opacity: 0.8;
}
img {
    pointer-events: none;
}
/*
*	GRID
___________________________________
*/
.wrapper {
	margin: 0 auto;
	max-width: 80rem; /*1280 px*/
	padding: 0 2.5rem;/*40 px * 2*/
}
/*
*	ELEMENTS
___________________________________
*/
.app-btn-gradient {
	background: rgb(7,7,79);
	background: linear-gradient(0deg, rgba(7,7,79,1) 0%, rgba(41,59,178,1) 50%, rgba(7,7,79,1) 100%);
	border-radius: 4rem;
	color: #ffffff;
}

/*
*   HEADER
___________________________________
*/
#app-header {
	background-color: #FFFFFF;
	padding: 3rem 0 4rem 0;
}
#app-header .wrapper {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 2rem;
}

#app-header .wrapper .app-leading-logo {
	background: url(../img/logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	color: transparent;
	display: table;
	font-size: 100%;
	padding: 2rem 0;
	margin: auto;
	overflow: hidden;
	height: var(--logo-height);
	width: var(--logo-width);
}

#app-header .wrapper .app-header-menu {
	border-bottom: 0.1rem solid;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: auto;
	gap: 2rem;
}
#app-header .wrapper .app-header-menu li a {
	font-weight: 600;
}

#app-header .wrapper .app-btn-suscribe {
	align-self: center;
	font-weight: 600;
	margin: auto;
	padding: 0.2rem;
}
#app-header .wrapper .app-btn-suscribe span {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	border: 0.1rem solid #FFFFFF;
	border-radius: 2rem;
	font-family: 'poppinsregular';
	font-size: 0.7rem;
	padding: 0.2rem 1.1rem;
	width: 8rem;
}
#app-header .wrapper .app-btn-suscribe i {
	font-family: 'poppinsthin';
	font-size: 1.5rem;
}

.app-btn-mobile-menu {
    display: none;
    position: absolute;
    top: 4.5rem;
    right: 1rem;
    cursor: pointer;
}
.app-btn-mobile-menu img {
    width: 100%;
}

/*
*   HEADER
___________________________________
*/
#app-footer {
	background: rgb(53,93,165);
	background: linear-gradient(180deg, rgba(53,93,165,1) 0%, rgba(17,19,132,1) 100%);
	color: #ffffff;
	font-family: 'poppinslight';
}
#app-footer .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding-top: 3rem;
	padding-bottom: 3rem;
}
#app-footer .wrapper div {
	width: 80%;
}
#app-footer .wrapper div p {
	text-align: right;
}
#app-footer .wrapper div ul {
	display: flex;
    padding-top: 2.5rem;
    padding-bottom: 0.5rem;
}
#app-footer .wrapper div ul li a {
	color: #ffffffb0;
	font-size: 0.9rem;
}
#app-footer .wrapper div ul li a i {
	padding: 0 1rem;
}
#app-footer .wrapper div ul li:nth-of-type(1) a i {
	display: none;
}
#app-footer .wrapper div small {
	font-size: 0.9rem;	
}
/*
*   RESPONSIVE
___________________________________
*/
/*1440 px*/
@media (max-width: 90rem) {
	
}
/*1280 px*/
@media (max-width: 80rem) {
	
}
/*1200 px*/
@media (max-width: 75rem) {
	.rc-rcbrand-nav-left, .rc-rcbrand-nav-right {
		display: none;
	}
}
/*1024 px*/
@media (max-width: 64rem) {
	#app-header .wrapper .app-header-menu {
		justify-content: center;
	}
}
/*960 px*/
@media (max-width: 60rem) {
	#app-header .wrapper {
		flex-direction: column;
		gap: 3rem;
	}
	#app-header .wrapper .app-header-menu {
		padding-bottom: 2rem;
		width: fit-content;
		margin: auto;
	}

	#app-footer .wrapper {
		flex-direction: column-reverse;
		align-items: center;
		gap: 3rem;
	}
	#app-footer .wrapper div {
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 100%;
	}
	#app-footer .wrapper div p {
		text-align: center;
	}
	#app-footer .wrapper div ul {
		justify-content: center;
	}
}
/*768 px*/
@media (max-width: 48rem) {
	#app-header .wrapper .app-header-menu {
		display: none;
		/*width: 80%;*/
	}
	#app-header .wrapper .app-header-menu li {
		text-align: center;
	}
	#app-header .wrapper .app-header-menu li a {
		padding: 1rem;
		margin: auto;
	}

	.app-btn-mobile-menu {
	    display: block;
	}

	#app-footer .wrapper div p {
		margin-bottom: 0.5rem;
		margin-left: auto;
		margin-right: auto;
	}
	#app-footer .wrapper div ul {
		justify-content: center;
		flex-wrap: wrap;
		gap: 0.7rem;
		padding-top: 1rem;
		padding-bottom: 3rem;
		order: -1;
	}
	#app-footer .wrapper div ul li:nth-of-type(1) a i {
		display: inline-block;
	}
}
/*460 px*/
@media (max-width: 28.75rem) {
	#app-header .wrapper .app-leading-logo {
		padding: 1.7rem 0;
		height: auto;
		width: 8.5rem;
	}

	#app-footer .wrapper div p {
		margin-bottom: 1.5rem;
		max-width: 16rem;
	}
	#app-footer .wrapper div ul {
		flex-direction: column;
		margin: auto;
	}
}
/*425 px*/
@media (max-width: 26.563rem) {

}
/*375 px*/
@media (max-width: 23.438rem) {
	
}
/*320 px*/
@media (max-width: 20rem) {
	
}