:root {
  --color-main: #FFD200;
  --color-2: hsl(74, 90%, 48%);
  --color-3: #FF6C00;
  --color-3: #21FF0D;
  --color-4: #EB8D00;
  --color-loader: #5D8564;
  --color-bg: rgb(255, 253, 245);
  --color-link: #0275d8;
  --color-navbar-text: black;
}
html {
  height: 100%;
  padding: 0;
  margin: 0;  
  overflow-x: hidden;
  overflow-y: scroll;
}
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--color-bg);
}
p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding-left: 0.5%;
  padding-right: 0.5%;
  text-align: justify;
}

/* MENU NAVBAR PARA PC */
.navbar {
  width: 100%;
  display: inline-block;
  padding: 0;
  list-style: none;
  margin-left: 0px;
  text-align: center;
  background-color: var(--color-main);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);
  font: bold;
  margin-bottom: -3px;
  height: 52px;
}
.navbar li {
  display: inline-block;
  text-align: center;
}
.navbar li a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  /*-webkit-transition: .5s all;*/
  /*formato del texto para ambas navs*/
  font-family: 'Lato';
  font-weight: bold;
  font-size: medium;
  text-transform: uppercase;
  color: var(--color-navbar-text);
}
.navbar li a:hover {
  background-color: var(--color-4);
}
/*
.otras:hover {
  background-color: var(--color-main);
}
.otras {
  font-weight: initial;
  font-weight: bold;
}
*/

/* MENU SIDENAV PARA CELU*/
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  background-color: var(--color-main);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.5);
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
  /*formato del texto para ambas navs*/
  font-family: 'Lato';
  font-weight: bold;
  font-size: medium;
  text-transform: uppercase;
  color: var(--color-navbar-text);
}
.sidenav a:hover {
  color: #f1f1f1;
}
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Barra superior cuando la side esta cerrada */
.barramenu {
  background-color: var(--color-main);
  display: block;
  height: 43px;
  line-height: 1.3;
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 2;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.05);
}
.logosidenav {
  max-width: 80vw;
  position: absolute;
  right: 0;
  margin: 0 2px !important;
  display: block;
}
.burger {
  color:black;
  font-size: 32px;
  cursor: pointer;
  padding-left: 10px;
  color: var(--color-navbar-text);
}
.mobile-only {
  display: none;
}
/*para pantallas pequeñas*/
.desktop-only {
  height: 52px;
}
.col-xs {
  display: inline;
}
.row {
  margin-right: 0px;
  margin-left: 0px;
}

/*NAVBAR SEGÚN EL TAMAÑO DE PANTALLA */
/*solo se usa cuando es pantalla pequeña*/
@media (max-width: 1000px) {
  .mobile-only {
    display: block !important;
  }
  .desktop-only {
    display: none !important;
  }
}
/*Fin NAVBAR */


/* Parallax */
/*
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
*/
* {
  font-family: 'lato';
}
body {
  margin: 0;
}
a:not([href]):not([tabindex]) {
  color: #007bff;
  cursor: pointer;
}
.modal-header .close {
  margin: 0 !important;
}
.modal-title {
  padding-top: 9px;
}
.parallax-wrapper {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100%;
  overflow-x: scroll;
  overflow-y: scroll;
}
.background {
  background-position: center;
  background-size: cover;
  display: flex;
  flex: 1 0 auto;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
  min-height: 100vh;
  width: 100vw;
  align-items: center;
  align-content: center;
  transform: translateZ(-1px) scale(2); /*Da el efecto scroll*/
  background-image: url('informe_online_trigo.jpg');
}
.title {
/*
  position: absolute;
  margin: auto;
  top: calc(25% - 60px);
  top: calc(35% - 60px);
*/
  width: 75%;
  text-align: center;
  text-transform: uppercase;
  min-height: 100px;
  font-size: 3.0vw;
  vertical-align: middle;
  color: white;
  text-shadow: 2px 2px 5px black;   
}
.title-subtitle {
  width: 85%;
  min-height: 100px;
  color: white;
  vertical-align: middle;
  padding-top: 0%;
  padding-bottom: 10%; 
  color: white;
  text-shadow: 2px 2px 5px black, -2px -2px 5px black; 
}
.title-subtitle p{
  text-align: center;
  font-size: x-large;
  margin-bottom: 0%;
  margin-top: 0%;
  padding-right: 0%; 
  line-height: 1.5; 
  /*color: red;*/
}
.season-desc {
  z-index: 1;
  position: relative;
  background: black;
  color: white;
  font-size: 18px;
  letter-spacing: 2px;
  /*
  padding-left: 3rem;
  padding-right: 3rem;
  */
  width: 100vw;
  min-height: 105vh;
  margin: 0;
  display: flex;
}
.desc-wrapper {
  margin: auto;
  box-sizing: border-box;
  width: 90vw;
}
.title1 {
  font-size: 4vh;
  text-align: center;
  text-transform: uppercase;
  margin: 20px 0;
}
.title1-descripcion {
  font-size: 3vh;
  margin-top: 50px;
  padding: 0;
  text-align: justify;
}
.background2 {
  /*background-color:rgba(206, 253, 206, 0.683);*/
  background-color: var(--color-loader); 
  background-position: center;
  background-size: cover;
  /*min-height: 100vh;*/
  width: 100vw;
  display: flex;
  flex: 1 0 auto;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: center;  
  justify-content: space-evenly;
  position: relative;
  align-items: center;
  transform: translateZ(-1px) scale(2);
  z-index: -1;
  padding-bottom: 3%;
  padding-top: 3%;
}
.title2{
  font-weight: bold;
  text-align: center;
  font-size: large;
  margin-top: 2%;
  color: white;
}
.title2-descripcion{
  font-weight: normal;
  text-align: justify;
  font-size: medium;
  width: 90%;
  color: white;
}
.title2-descripcion-izquierda{
  text-align: justify;
}
.title2-descripcion-izquierda ul{
  text-align: justify;
  margin-left: -2%;
  margin-bottom: 0px;
  line-height: 1;
}
.title2-descripcion-izquierda li{
  padding-bottom: 5px;
}
.title2-descripcion-izquierda a{
  padding-bottom: 5px;
  /*color: lightgoldenrodyellow;*/
  color: white;
  text-decoration: underline;
}
.seleccion {
  text-align: left;
}
.analisis {
  padding-top: 50px;
  background-color: whitesmoke;
}
.container {
  margin-bottom: 2%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.gyt {
  margin-top: 5%;
}
#form3, #form5 {
  margin-top: 6%;
}
.linkform {
  padding: 0px !important;
  margin: 1rem 0 .5rem 0;
  font-weight: bold;
  line-height: 1.4;
}
.label1 {
  text-align: center;
  font-size: 120%;
  margin-top: 5%;
}
.tabla_lugar {
  background-color: #e8e8e8;
  padding: 1em 1em 2em 1em;
  margin: 16px;
  border: 1px solid #a9a9a9;
}
.figura, .tabla {
  margin: auto;
  width: max-content;
  border: 1px solid #a9a9a9;
  background: white;
  /*Para resolver problemas con Mozilla*/
}
.leyendas{
	text-align: left;
	padding-left: 0%;
}

/* PEA: misma altura y color para todos los controles desplegables*/
.lugar, .anios, .manejos, .epocas {
  height: 26px;
  border: 1px solid #a9a9a9;
}
.epocas {
  /*PEA: Definen el ancho de los controles antes de que se carguen*/
  width: 110px;
}
.charts-menu-button-inner-box {
  /*background: #fefefe;  */
  background: white;
}
.botonmodal {
  padding: 0 1%;
  height: 24px;
  font-size: small;
  display: block;
  margin: auto;
  margin-top: 5%;
  margin-bottom: 2%;
}
.botoninmodal {
  padding: 0 1%;
  height: 24px;
  font-size: small;
  display: block;
  margin: auto;
}
.tabla1 {
  background: #fefefe;
  border: 1px solid #a9a9a9;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
}
.tabla1 .table {
  border-collapse: collapse;
}
.tabla_anios {
  background: #fefefe;
  border: 1px solid #a9a9a9;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  font-size: medium;
  /*Para alinear con los otros controles*/
}
.tabla_anios th{
  /*border-collapse: collapse;*/
  /*border: 1px solid #a9a9a9;*/
  font-weight: normal;
}
.tabla_anios td{
  text-align: center;
}

:focus {
  outline: none;
}
.images {
  display: inline-block;
  margin: 0 2.10%;
}
#paginas{
	width: 100vw; /* usar "vW" para ocultar la barra scrolle. */
	height: 100vh; /* usar "vh" para que el iframe ocupe el 100% de la altura. */
	text-align: left;
	padding-left: 1%;
	padding-right: 1%;
	border: none;
	display:block;
}
.ultima_actualizacion {
  width: 100%;
  height: auto;
  background-color: #00577B;
  padding-left: 0.5%;
  padding-right: 0.5%;
  padding-top: 0.5%;
  padding-bottom: 6%;
  color: white;
  margin-bottom: 0%;
  line-height: 1.1;
  text-align:left;
}

/* VERSION MOVIL */
@media (max-width: 450px) { /* Hasta 300px */
	.parallax-wrapper {
	height: 100%;
	}
	.season-desc {
		height: auto;
	}
	.lugar, .tabla1 {
	/*PEA: Define el ancho de los controles antes de que se carguen*/
	width: 100%;
	}
	.tabla_anios{
	font-size: x-small;
	}
	.title, .title1{
		font-size: small;
	}
	.title-subtitle p{
		font-size: smaller;
	}
	.title1-descripcion {
		font-size: smaller;
		text-align: left;
		font-weight: normal;
		/*
    margin-left: -2em;
		margin-right: -2em;
    */
	}
	.title2{
		font-size: medium;
	}
	.title2-descripcion{
		text-align: left;
		font-size: smaller;
	}
  .title2-descripcion-izquierda ul {
    text-align: justify;
    margin-left: -7%;
  }
	h3 {
		text-align: left;
		font-size: smaller;
	}
  .ultima_actualizacion {
    padding-bottom: 0.5%;
  }
}

@media (min-width: 300px) and (max-width: 550px) { /* max-width => hasta y min-width => desde*/
  .parallax-wrapper {
    height: 100%;
  }
  .season-desc {
	height: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .lugar, .tabla1 {
    /*PEA: Define el ancho de los controles antes de que se carguen*/
    width: 100%;
  }
  .tabla_anios{
    font-size: x-small;
  }
  .title, .title1{
    font-size: medium;
  }
  .title-subtitle p{
    font-size: medium;
  }
  .title1-descripcion {
    font-size: medium;
    text-align: left;
    font-weight: normal;
    margin-top: 10px;
  }
  .background2 {
    transform: translateZ(0px) scale(1.0);
  }
  .title2{
    font-size: large;
  }
  .title2-descripcion{
    text-align: left;
    font-size: medium;
  }
  h3 {
    text-align: left;
    font-size: medium;
  }
  .ultima_actualizacion {
    padding-bottom: 0.5%;
  }  
}

@media (min-width: 551px) and (max-width: 800px) {
  /* NO CAMBIAR: 900px tamaño minimo del NAVBAR*/
  .background2 {
    transform: translateZ(-1px) scale(1.6);
  }
  .title, h3.title1 {
    font-size: large;
  }
  .title-subtitle p{
    font-size: large;
  }
  .title1{
    font-size: large;
  }
  .title1-descripcion{
    font-size: medium;
  }
  .title2 {
    width: 100%;
    height: 10vh;
    padding: 0 5%;
  }
  .title2-descripcion{
    font-size: medium;
  }
  .ultima_actualizacion {
    padding-bottom: 0.5%;
  }

}

@media (min-width: 801px) and (max-width: 1000px) {
  /* NO CAMBIAR: 900px tamaño minimo del NAVBAR*/
  .background2 {
    transform: translateZ(-1px) scale(1.8);
  }
  .title, h3.title1 {
    font-size: x-large;
  }
  .title-subtitle p{
    font-size: x-large;
  }
  .title1{
    font-size: large;
  }
  .title1-descripcion{
    font-size: medium;
  }
  .title2 {
    width: 100%;
    height: 10vh;
    padding: 0 5%;
  }
  .title2-descripcion{
    font-size: medium;
  }
  .figura, .tabla, .lugar {
    /*PEA: Define el ancho de los controles antes de que se carguen*/
    max-width: 100%;
    overflow-x: scroll;
  }
  .tabla_anios{
    font-size: medium;
  }
  #form3, #form5 {
    margin-top: 0%;
  }
  .ultima_actualizacion {
    padding-bottom: 0.5%;
  }  
}

/*LODER //Copiar tal cual está// */
.loader-out {
  background-color: var(--color-loader);
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 1s;
  opacity: 1;
  display: block;
  z-index: 500;
}
.loader-out-2 {
  background-color: var(--color-loader);
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 2s;
  opacity: 0;
  display: block;
  z-index: 500;
}
.loader-container {
  width: 150px;
  height: 150px;
  color: white;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: 5px solid white;
  border-radius: 50%;
  -webkit-animation: borderScale 1s infinite ease-in-out;
  animation: borderScale 1s infinite ease-in-out;
}
.loading-text {
 	/*controla texto "Cargando"*/ 
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 1.1em;
  
  position: absolute;
  top: 43%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

@-webkit-keyframes borderScale {
  0% {
    border: 5px solid white;
  }
  50% {
    border: 25px solid white;
  }
  100% {
    border: 5px solid white;
  }
}

@keyframes borderScale {
  0% {
    border: 5px solid white;
  }
  50% {
    border: 25px solid white;
  }
  100% {
    border: 5px solid white;
  }
}
/* FIN LODER*/

/* LOGOS */
.background {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: flex-start;
	justify-content: space-between;
	position: relative;
	align-items: center;
	align-content: center;
}
.title, .title-subtitle {
	position: relative;
	margin: inherit;
}
#logos {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	align-content: flex-start;
	justify-content: space-between;
	width: 85%;
}
#logo_INTA{
	height: 12vh; 
	width: auto;
	float: left;
}
#logo_IPADS{
	height: 16vh; 
	width: auto;
	float: right;
}
@media (orientation: portrait){
  #logos{
    margin-top: 55px;
  }
	#logo_INTA{
		height: auto; 
		width: 45vw;
	}
	#logo_IPADS{
		height: auto; 
		width: 35vw;
	}
}
@media (orientation: landscape) and (max-width: 1000px) {
    #logos{
      margin-top: 55px;
    }
    #logo_INTA{
      height: 12vh; 
      width: auto;
    }
    #logo_IPADS{
      height: 16vh; 
      width: auto;
    }
  }
  @media (orientation: landscape) and (min-width: 1001px) {
    #logo_INTA{
      height: 12vh; 
      width: auto;
    }
    #logo_IPADS{
      height: 16vh; 
      width: auto;
    }
  }
 /* FIN LOGOS */