:root {
  --text-font-size: 22px;
  --title-font-size: 28px;
  --standard-line-height: 1.5;
  --main-color:#f55b23;
  --secondary-color:#ececee;
  --line-color:#939393;
  --standard-font:circular-book;
  --bold-font:circular-medium;
}

@font-face {
  font-family: circular-book;
  src: url(../fonts/cp_book.ttf);
}

@font-face {
  font-family: circular-medium;
  src: url(../fonts/cp_medium.ttf);
}

*{font-family:var(--bold-font); box-sizing: border-box;}

body{margin:0; padding:0; background:none !important;}

/*HEADER*/

header{display:block; padding:0; position:sticky; top:0; width:100%; z-index:2; box-shadow:0 0 20px var(--line-color);}

header .headerBox{width:100%; flex-direction:column;}

.headerDiv{display:flex;}

.topBar{text-align: center; padding: 6px; background: #ff3600; color: white; z-index: 999; position: relative;}

.logo{position:relative; padding:15px 30px; background:#f1ede7; z-index:999; align-items:center; justify-content:center;}

.md_Logo {padding: 7px 25px; background: white; display: inline-flex; border-radius: 50px; justify-content: center;}

.menuLogoContainer{display:flex; width:100%; max-width:1600px; align-items:center;}

.logo img{width: 100%; max-width:242px;}

.menu{position:absolute; border-top: 1px solid var(--line-color); box-shadow: 0 0 20px var(--line-color); width:100%; justify-content:center; flex-direction:column; background:#ffffff; margin-top:-800px; height:auto; padding:30px;}

.menu .divContenido{display: flex; flex-direction: column; align-items: center; width:100%; max-width: 1600px; margin:0 auto;}

.menu .divContenido a{display:block; width:100%; transition:all .2s ease-in-out; padding:12px 0 0 0; font-size:16px;}

.menu .divContenido a:hover{color:var(--line-color);}

.menu .divContenido a:after {border-top: solid 1px; width: 30px; content: ""; display: block; margin: 12px 0 0;}

.menu .divContenido a:last-child::after{border:none !important; margin:none !important;}

.burger{display:block !important; margin-left:auto; font-size:30px; color:#000000; transition:all .3s ease-in-out;}

.burger:hover{color:var(--line-color); cursor:pointer;}

.slide .background{width:100%; padding-bottom:65px;}

.logoAnim{animation-name:headerAnim1; animation-duration:.7s; animation-fill-mode: forwards;}

.menuAnim{animation-name:headerAnim2; animation-duration:.7s; animation-fill-mode: forwards;}

.logoAnimClose{animation-name:headerAnim3; animation-duration:.7s; animation-fill-mode: forwards;}

.menuAnimClose{animation-name:headerAnim4; animation-duration:.7s; animation-fill-mode: forwards;}  

@keyframes headerAnim1 {0% {box-shadow:none;} 66% {box-shadow: 0px 12px 10px #00000080;} 100% {box-shadow: 0px 0px 0px #00000080;}}
@keyframes headerAnim2 {0% {margin-top:-800px;} 66% {background:#ffffff; margin-top:0px;} 100% {background:#ffffff; margin-top:0px;}}
@keyframes headerAnim3 {0% {box-shadow: 0px 0px 0px #00000080;} 66% {box-shadow: 0px 12px 10px #00000080;} 100% {box-shadow:none;}}
@keyframes headerAnim4 {0% {background:#ffffff; margin-top:0px;} 66% {background:#ffffff; margin-top:0px;} 100% {margin-top:-800px;}}

/*FIN HEADER*/

.contenedor{width:100%; max-width:1280px; display:block; margin:0 auto;}

.box{width:100%; display:block; padding:30px 0;}

h1.tituloPrincipal{font-family:var(--bold-font) !important; font-size:150px; line-height:0.8; margin:40px 0; text-transform: none;}

.tituloPrincipal em{text-shadow: -1px -1px 0 #ff3600, 1px -1px 0 #ff3600, -1px 1px 0 #ff3600, 1px 1px 0 #ff3600; color:#ffffff; font-style:normal;}

.tituloPrincipal strong{color:#ff3600;}

.rankingTitulo, .rankingTitulo-2{scroll-margin:120px; font-family:var(--bold-font); color:#ffffff; background:var(--main-color); width:max-content; max-width:100%; padding:10px 30px; font-size:var(--title-font-size); margin:0; line-height:var(--standard-line-height);border-radius:40px;}

.rankingTitulo-2{margin-top: 30px; font-size:18px;}

.rankingTexto{font-family:var(--bold-font); margin:0; padding:15px 20px; font-size:var(--text-font-size); line-height:var(--standard-line-height); /*background:var(--secondary-color);*/}

.rankingTexto a {padding:0px; font-size:var(--text-font-size); display:inline; text-decoration:underline;}

.rankingLista{/*background:var(--secondary-color);*/ margin:0; padding:15px 7%;}

.rankingLista li{font-family:var(--bold-font); font-size:var(--text-font-size); line-height:var(--standard-line-height);}

.troquelado{font-size:30px; border-width:2px 0 0 0; border-color:#ffffff; border-style:dashed;}

.inTextImg{width:40%; padding:20px; min-width:200px;}

.rankingTarjetas{display: flex; justify-content: space-between; flex-wrap: wrap;}
.rankingTarjeta{display: flex; align-items: center; /*background: #ececee;*/ width: calc(33.33% - 10px); margin-top: 10px; flex-wrap: nowrap; flex-direction: row;}
.rankingTarjeta .tarjetaTitulo{width:calc(100% - 130px);}
.rankingTarjeta .tarjetaTitulo p{margin:0; font-size:var(--text-font-size); line-height:var(--standard-line-height); font-family:var(--bold-font);}
.rankingTarjeta .tarjetaImg{ display:flex; justify-content: center; align-items: center; align-self: stretch; padding:0 15px; margin-right:30px; background:var(--main-color);}
.rankingTarjeta .tarjetaImg img{height:120px;}

.rankingTarjetas.rtBig{flex-direction:column;}
.rankingTarjetas.rtBig .rankingTarjeta{width:100%;}
.rankingTarjetas.rtBig .rankingTarjeta .tarjetaImg{padding:30px 15px; margin-right:0; width:25%; max-width:200px; border-radius:40px;}
.rankingTarjetas.rtBig .rankingTarjeta .tarjetaImg img{width:100%; height: auto;}
.rankingTarjetas.rtBig .rankingTarjeta .tarjetaTitulo{padding:30px;}
.rankingTarjetas.rtBig .rankingTarjeta .tarjetaTitulo p.pBottom{padding-bottom:30px;}
.rankingTarjetas.rtBig .rankingTarjeta .tarjetaTitulo p em{background:#cfcfcf; padding:2px 10px; font-style: normal;}

.tabVariables{width:100%; border-collapse:collapse;}
.tabVariables th, .tabVariables td{padding:10px 20px;}
.tabVariables th:first-child, .tabVariables td:first-child{text-align:left;}
.tabVariables th:last-child, .tabVariables td:last-child{text-align:center;}
.tabVariables thead tr{background:var(--main-color);}
.tabVariables th{color:#ffffff; font-size:20px;}
.tabVariables tbody{background:var(--secondary-color);}
.tabVariables tbody tr{border-bottom:solid 1px var(--main-color);}

.enlace{color:#ff3600 !important;}

#form{margin: auto !important;}

#form-text{text-align: center;}

@media all and (max-width: 1280px){
  :root {
    --text-font-size: 20px;
    --title-font-size: 24px;
  }

  .contenedor{padding:0 20px;}
  h1.tituloPrincipal{font-size:80px !important;}
  .rankingTarjetas{flex-direction:column;}
  .rankingTarjeta{width:100%;}
  .troquelado{font-size:var(--title-font-size);}
}

@media all and (max-width: 768px){
  :root {
    --text-font-size: 16px;
    --title-font-size: 20px;
  }

  h1.tituloPrincipal{font-size:40px !important; margin:30px 0 0 0;}
}

#footer{margin:0 auto;}

img.logo-footer{height:auto !important;}


/* Cambios CTA */

.cta-investigacion{
	margin: 30px 0px 50px 0px;
	display: flex;
	align-items: center;
	transition: transform 0.5s ease;
}

.cta-investigacion .texto{
	border: none;
	background: var(--main-color);  
	font-size: 25px;
	line-height: 100%;
	padding: 17px 50px;
	border-radius: 50px;
	width: 560px;
	text-align: center;
	font-family: 'Helvetica';
	color: #ffffff;
}

.cta-investigacion .flecha{
	border: none;
	background: var(--main-color);  
	padding: 20px 40px;
	border-radius: 50px;
	vertical-align: bottom;
	margin-left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 84px;
	width: 130px;
}

.cta-investigacion .flecha img{
	height: 30px;
}

.imgRanking{
	width: 100%;
	height: auto;
	max-width: 720px;
}

.inv-autor {
	font-size: 14px;
	color: #000000;
	display: flex;
	align-items: center;
	padding: 0px 8px;
}

.inv-autor .autor{
	font-size: 14px;
}

.inv-autor .fecha{
	padding: 0px 8px;
}

.inv-autor .separador {
	height: 1px;
	width: 25px;
	background-color: #000000;
	margin: 0 2px;
}

.inv-autor span {
	white-space: nowrap;
}

.ranking-img{
	margin-left: 20px;
}

/****************** RESPONSIVE CTA ******************/

@media only screen and (min-width: 1000px) and (max-width: 1650px){
	.cta-investigacion .texto{
		font-size: 21px;
		width: 550px;
		padding: 18px 10px;
	}
	
	.cta-investigacion .flecha{
		padding: 20px 35px;
		height: 78px;
	}
	
	.cta-investigacion .flecha img{
		height: 27px;
	}
}

@media only screen and (max-width: 999px){
	.cta-investigacion .texto{
		border-radius: 50px;
		width: 500px;
		padding: 20px 20px;
		font-size: 18px;
	}
	
	.cta-investigacion .flecha{
		padding: 20px 25px;
		height: 76px;
	}
	
	.cta-investigacion .flecha img{
		padding: 2px 10px;
		height: 28px;
	}
}

@media only screen and (max-width: 439px){
	.cta-investigacion .flecha{
		height: 80px;
		border-radius: 40px;
	}
}