<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dancing Rivers</title>
<script type="text/javascript" src="js/jquery/jquery.min.js"></script>
<!--JQuery JS Script-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!--Bootstrap CSS Style-->
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
<!--Bottom Cards section CSS Style-->
<link rel="stylesheet" href="css/bottom-cards-style.css">
<!-- Nav-Bar -->
<link rel="stylesheet" href="css/dancingRivers/dancing_rivers_navbar.css">
<!-- General CSS -->
<link rel="stylesheet" href="css/dancingRivers/dancing_rivers_general.css">
<!--Handling JS Scripts-->
<script src="./lib/CLDRPluralRuleParser/CLDRPluralRuleParser.js"></script>
<script src="./lib/jquery.i18n/jquery.i18n.js"></script>
<script src="./lib/jquery.i18n/jquery.i18n.messagestore.js"></script>
<script src="./lib/jquery.i18n/jquery.i18n.fallbacks.js"></script>
<script src="./lib/jquery.i18n/jquery.i18n.language.js"></script>
<script src="./lib/jquery.i18n/jquery.i18n.parser.js"></script>
<script src="./lib/jquery.i18n/jquery.i18n.emitter.js"></script>
<script src="./lib/jquery.i18n/jquery.i18n.emitter.bidi.js"></script>
<script src="./lib/history/jquery.history.js"></script>
<script src="./lib/url/url.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--New layout script-->
<script type="text/javascript" src="./js/dancingRivers/dancingRivers.js"></script>
<!--Language Handler Logic JS script-->
<script type="text/javascript" src="js/index/language_handler_dancingRivers.js"></script>
<script type="text/javascript" src="js/index/general_web_dancingRivers.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
::-webkit-scrollbar {
display: none;
}
body, html {
/*height: 100%;*/
width: 100vw;
/*position: absolute;*/
overflow-x: hidden;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: rgba(255,255,255,1);
scroll-behavior: smooth;
}
@font-face {
font-family: Museo-Sans-100;
src: url("./font/Museo Sans 100/MuseoSans-100.otf");
}
@font-face {
font-family: Museo-Sans-300;
src: url("./font/Museo Sans 300/MuseoSans-300.otf");
}
@font-face {
font-family: Museo-Sans-500;
src: url("./font/Museo Sans 500/MuseoSans-500.otf");
}
@font-face {
font-family: Museo-Sans-700;
src: url("./font/Museo Sans 700/MuseoSans-700.otf");
}
</style>
</head>
<style>
*:focus {
outline: 0 !important;
}
</style>
<body>
<div id="Header" style="position: fixed;">
<div class="upper-header" style="display: flex; align-items: center; justify-content: center;">
<div style="width: 74%; display: flex; align-items: center; justify-content: flex-start;">
<div style="width: 20%">
<a href="https://citautec.github.io/citaVisualizer/map.html#" target="_blank">
<button class="map-data-button" data-i18n="dancingR-button-mapData">Map Data</button>
</a>
</div>
<div style="width: 80%; display: flex; align-items: center; justify-content: flex-end;">
<button id="btn_es" class="idiom-btn-1" onclick="passLanguage('es')">Español</button>
<button type="button" disabled id="btn_en" class="idiom-btn-2" onclick="passLanguage('en')">English</button>
</div>
</div>
</div>
<div class="NavBar" style=" display: flex; justify-content: center; align-items: center;">
<div style="width: 74%; display: flex; align-items: center; justify-content: space-between;">
<div style="min-width: 18%; display: flex; justify-content: flex-start; align-items: center;">
<img id="logo-dancing-rivers" onclick="location.href='index.html'" src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/logo-rios-danzantes.png" >
</div>
<div style=" width: 74%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end;">
<div style="width: 100%; ">
<ul class="hList" style="display: flex; align-items: center; margin: 0;">
<li>
<a class="menu" >
<h2 class="menu-title" onclick="location.href='index.html';" data-i18n="amazon-home-tab">Inicio</h2>
<ul>
<li><a href='DancingRivers_Team.html' data-i18n="amazon-home-tab-team">Nuestro Equipo</a></li>
<li><a href='DancingRivers_Collaborations.html' data-i18n="amazon-home-tab-work">¿Con quienes trabajamos?</a></li>
</ul>
</a>
</li>
<li>
<a class="menu">
<h2 class="menu-title" onclick="location.href='DancingRivers_Research.html';" data-i18n="amazon-research-tab">Investigación</h2>
</a>
</li>
<li>
<a class="menu">
<h2 class="menu-title" style="color: #00BCD4; font-family: Museo-Sans-500; cursor: default;" data-i18n="amazon-methodology-tab">Metodología</h2>
<ul>
<li><a href='DancingRivers_RemoteSensing.html' data-i18n="amazon-methodology-tab-remote-sensing">Sensoramiento Remoto</a></li>
<li style="word-wrap: break-word;"><a href='DancingRivers_FieldMeasurements.html' data-i18n="amazon-methodology-tab-field-measurements">Mediciones de campo</a>
<ul>
<li><a href="DancingRivers_Hydrodynamic.html">Unidad Hidrodinámica</a></li>
<li><a href="DancingRivers_Hydrogeomorphological.html">Unidad Hidrogeomorfológica</a></li>
<li><a href="DancingRivers_Hydrosedimentological.html">Unidad Hidrosedimentológica</a></li>
</ul>
</li>
<li><a class="pointer_default" data-i18n="amazon-methodology-tab-numeric-modeling">Modelamiento numérico</a></li>
</ul>
</a>
</li>
<li>
<a class="menu">
<h2 class="menu-title" onclick="location.href='DancingRivers_DataAndTools.html';" data-i18n="amazon-data-tools-tab">Datos</h2>
</a>
</li>
<li>
<a class="menu">
<h2 class="menu-title" data-i18n="amazon-publications-tab" style="cursor: default;">Publicaciones</h2>
<ul>
<li><a href='DancingRivers_Newsletters.html' data-i18n="amazon-publications-tab-newsletters">Boletines</a></li>
<li><a href='DancingRivers_Tutorials.html' data-i18n="amazon-publications-tab-tutorials">Tutoriales</a></li>
<li><a class="pointer_default" data-i18n="amazon-publications-tab-infographics">Infografías</a></li>
<li><a class="pointer_default" data-i18n="amazon-publications-tab-handbooks">Handbooks</a></li>
<li><a class="pointer_default" data-i18n="amazon-publications-tab-papers">Papers</a></li>
</ul>
</a>
</li>
<li>
<a class="menu">
<h2 class="menu-title" onclick="location.href='DancingRivers_Workshops.html';" data-i18n="amazon-education-tab">Educación</h2>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<style>
#rSensing-intro-section{
width: 100vw;
height: 86vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
margin-top: 14vh;
/*'./img/dancingRivers/DSC_0103.jpg*/
/*background: linear-gradient( rgba(0,0,0,0.0), rgba(0,0,0,0.5)) , url('./img/dancingRivers/IMG_3883.jpg');*/
background: linear-gradient( rgba(0,0,0,0.0), rgba(0,0,0,0.2)) , url('https://citadancingrivers.s3-us-west-1.amazonaws.com/img/DSC01433_2.jpg');
/*background: linear-gradient( rgba(0,0,0,0.0), rgba(0,0,0,0.5)) , url('./img/dancingRivers/DSC01433_2.jpg');*/
/*background: linear-gradient( rgba(0,0,0,0.0), rgba(0,0,0,0.5)) , url('https://citadancingrivers.s3-us-west-1.amazonaws.com/img/IMG_3989_3.jpg');*/
/*background-image: url('./img/dancingRivers/IMG_3989_3.jpg');*/
background-size: cover;
}
</style>
<div id="rSensing-intro-section">
<div class="intro-container-out">
<div class="intro-container-in">
<div class="intro-text-container" >
<div class="intro-text-container-inner">
<p class="main-title-white-text" data-i18n="dancingR-rSensing-main-title"></p>
<p class="main-description-white-text" >Técnicas y procedimientos desarrollados para estudiar las variables físicas de los ríos amazónicos. </p>
</div>
</div>
</div>
</div>
</div>
<!-- 2 --->
<div style="width: 100%; min-height: 100vh; padding: 10vh 0; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 74%; height: 90%">
<div class="column-flex-center" style="width: 100%; height: 100%;">
<div style="align-self: flex-start">
<p class="rSensing-title-blue-text" style="margin-bottom: 36px;">Análisis Multitemporal</p>
<p class="rSensing-content-text" data-i18n="dancingR-rSensing-parameters-text"></p>
</div>
</div>
<div class="column-flex-center" style="width: 90%; height: 70%; margin-bottom: 40px; margin-top: 40px;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/river-gray-5.png" style=" height: auto; width: 100%" >-->
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/amazon-gif.gif" style=" height: auto; width: 100%" >
<p class="rSensing-content-text" style="font-family: Museo-Sans-500; font-size: 16px;">Río amazonas del 1987 al 2017</p>
</div>
<!--<div class="column-flex-center" style="width: 50%; height: 72%;">
<img src="./img/dancingRivers/river-gray-5.png" style=" height: 100%; width: auto" >
</div>-->
</div>
</div>
<!-- Criterios de analisis -->
<div style="width: 100%;
min-height: 40vh;
padding: 10vh 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #E6E6E6;">
<div class="column-flex-center" style=" width: 74%; height: 90%">
<div style="color: #6BBDDD; align-self: flex-start;">
<p style="font-size: 32px; color: #6BBDDD; font-family: Museo-Sans-300; margin-bottom: 36px;">Criterios de análisis</p>
<p class="rSensing-content-text">Para el análisis multitemporal de ríos amazónicos se deben de tener en cuenta ciertos criterios que garanticen que el análisis sea el más idóneo, acorde a los objetivos de la investigación, iniciativa o proyecto. Esto implica identificar el alcance espacial (delimitar el área de interés, identificar el tipo de río a analizar y ubicarlo dentro de la cuenca) y temporal (determinar el intervalo de estudio y considerar el ciclo hidrológico) del estudio, así como las actividades antrópicas que se desarrollan en la zona (deforestación, minería, entre otras). </p>
</div>
</div>
</div>
<!-- Parámetros Style -->
<style>
* {box-sizing: border-box}
/*body {font-family: Verdana, sans-serif; margin:0}*/
.mySlides {display: none}
.mySlidesAnabranching {display: none}
/*img {vertical-align: middle;}*/
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.meandricBoxLabel, .anabranchingBoxLabel {
/* cursor: pointer;
height: 30px;
!*width: 30px;*!
padding: 8px;
margin: 0 2px;
background-color: #bbb;
!*border-radius: 50%;*!
display: inline-block;
transition: background-color 0.6s ease;*/
position: relative;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
/*width: 30px;*/
padding: 6px;
height: 30px;
margin-right: 12px;
/*margin-left: 12px;
text-indent: 1px;*/
cursor: pointer;
/*font-family: Muse;*/
font-family: Museo-Sans-300;
font-size: 20px;
/*background-color: rg*/
/*text-decoration: none;*/
/*text-underline-position: none;*/
}
.activeRiver, .meandricBoxLabel:hover, .anabranchingBoxLabel:hover {
/*background-color: #717171;*/
background-color: transparent;
color: #25B3CF;
font-family: Museo-Sans-500;
/*text-decoration: underline;*/
border-bottom: 2px solid;
line-height: 20px;
/*padding-bottom: 10px;*/
/*margin-bottom: 10px;*/
/*text-decoration: underline;*/
/*text-underline-position: under;*/
}
/* Fading animation */
.fade_1 {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
<!-- Parametros -->
<div style="width: 100%;
min-height: 100vh;
padding: 10vh 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 74%; height: 90%">
<!--<div class="column-flex-center" style="width: 50%; height: 100%;">
<div style="align-self: flex-start">
<p class="rSensing-title-blue-text">Parámetros <span style="color: #333333; "></span> </p>
</div>
<p class="rSensing-content-text" data-i18n="dancingR-rSensing-processing-text"></p>
</div>
<div class="column-flex-center" style="width: 50%; height: 72%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/peru_white.png" style=" height: 100%; width: auto" >
</div>
</div>-->
<div style="align-self: flex-start;">
<p class="rSensing-title-blue-text">Parámetros <span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text">Los parámetros de análisis son elegidos de acuerdo al tipo de río, meándrico o multicanal, en la cuenca baja o alta. Algunos parámetros serán compartidos por ambos tipos de ríos, mientras que otros serán específicos para un solo tipo, variando el procesamiento y análisis que se vaya a realizar.
</p>
</div>
<!--<div id="MeandricBox" style="width: 100%; background-color: #F7F8F8; ">
<div id="Image_1" style="width: 100%">
<div id="demo_1" class="carousel slide" style="width: 50%" data-ride="carousel">
<!– Indicators –>
<ul class="carousel-indicators">
<li data-target="#demo_1" data-slide-to="0" class="active"></li>
<li data-target="#demo_1" data-slide-to="1"></li>
<li data-target="#demo_1" data-slide-to="2"></li>
</ul>
<!– The slideshow –>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">
</div>
</div>
<!– Left and right controls –>
<a class="carousel-control-prev" href="#demo_1" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo_1" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>-->
<style>
/*.ul_carousel{
position: absolute;
right: 0;
bottom: 10px;
left: 0;
z-index: 15;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
padding-left: 0;
margin-right: 15%;
margin-left: 15%;
list-style: none;"
}
.li_carousel{
position: relative;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
!*width: 30px;*!
padding: 6px;
height: 30px;
margin-right: 3px;
margin-left: 3px;
text-indent: 1px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
}*/
.ul_carousel{
position: absolute;
right: 0;
/*bottom: 10px;*/
left: 0;
z-index: 15;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: space-between;
padding-left: 0;
/*margin-right: 5%;
margin-left: 5%;*/
list-style: none;"
}
.li_carousel{
position: relative;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
/*width: 30px;*/
padding: 6px;
height: 30px;
margin-right: 12px;
/*margin-left: 12px;
text-indent: 1px;*/
cursor: pointer;
/*font-family: Muse;*/
font-family: Museo-Sans-300;
font-size: 20px;
/*background-color: rgba(255, 255, 255, 0.5);*/
}
</style>
<!-- MEANDRIC BOX -->
<!-- final -->
<!-- <div id="MeandricBox" style="width: 112%; background-color: #F7F8F8; padding: 30px 50px; ">
<p class="rSensing-title-blue-text">Río Meándrico<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<div id="Image_0" style="width: 100%">
<div id="demo_0" class="carousel slide" data-ride="carousel" style="width: 100%">
<!– Indicators –>
<!– <ul class="carousel-indicators">
<!–<li data-target="#demo_0" style="height: 30px; width: 50px; color: black; padding: 8px;" data-slide-to="0" class="active"><p style="color: black;">Ancho Promedio</p> </li>–>
<!–<li data-target="#demo_0" data-slide-to="0" class="active" style="height: 30px; width: 50px; color: black; padding: 8px;">Ancho Promedio</li>–>
<li data-target="#demo_0" data-slide-to="0" class="active" style="height: 30px; width: 50px; color: black; padding: 8px;">
ASFASFAFASFASsdasas
<!–<div style="width: 100%; height: 100%; z-index: 1000;">
<p>asdasas</p>
</div>
–>
</li>
<li data-target="#demo_0" data-slide-to="1">Sinuosidad</li>
<li data-target="#demo_0" data-slide-to="2"></li>
</ul>–>
<ul class="ul_carousel">
<!–<li data-target="#demo_0" style="height: 30px; width: 50px; color: black; padding: 8px;" data-slide-to="0" class="active"><p style="color: black;">Ancho Promedio</p> </li>–>
<!–<li data-target="#demo_0" data-slide-to="0" class="active" style="height: 30px; width: 50px; color: black; padding: 8px;">Ancho Promedio</li>–>
<!–<li data-target="#demo_0" data-slide-to="0" class="active" style="height: 30px; width: 50px; background-color: #34ce57; color: black; padding: 8px;">–>
<li data-target="#demo_0" data-slide-to="0" class="li_carousel active">
Ancho Promedio
<!–<div style="width: 100%; height: 100%; z-index: 1000;">
<p>asdasas</p>
</div>
–>
</li>
<!–font-family: Museo-Sans-300; font-size: 22px;–>
<li data-target="#demo_0" data-slide-to="1" class="li_carousel" style="">Sinuosidad</li>
<li data-target="#demo_0" data-slide-to="2" class="li_carousel">Migración</li>
<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud de la onda</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud del meandro</li>
</ul>
<!– The slideshow –>
<div class="carousel-inner" style="padding-top: 40px; padding-bottom: 80px">
<!–padding: 80px 60px–>
<div class="carousel-item active" >
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!– padding: 100px 0;–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Riverbox<span style="color: #333333; margin-bottom: 0px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Sinuosidad<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Migración<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Longitud de la onda<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Longitud del meandro<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
</div>
<!– Left and right controls –>
<!–<a class="carousel-control-prev" href="#demo_0" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo_0" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>–>
</div>
</div>
</div>-->
<!--
<div id="MeandricBox" style="width: 112%; background-color: #F7F8F8; padding: 30px 50px; ">
<p class="rSensing-title-blue-text">Río Meándrico<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<div id="Image_0" style="width: 100%">
<div id="demo_0" class="carousel slide" data-ride="carousel" style="width: 100%">
<!– Indicators –>
<!– <ul class="carousel-indicators">
<!–<li data-target="#demo_0" style="height: 30px; width: 50px; color: black; padding: 8px;" data-slide-to="0" class="active"><p style="color: black;">Ancho Promedio</p> </li>–>
<!–<li data-target="#demo_0" data-slide-to="0" class="active" style="height: 30px; width: 50px; color: black; padding: 8px;">Ancho Promedio</li>–>
<li data-target="#demo_0" data-slide-to="0" class="active" style="height: 30px; width: 50px; color: black; padding: 8px;">
ASFASFAFASFASsdasas
<!–<div style="width: 100%; height: 100%; z-index: 1000;">
<p>asdasas</p>
</div>
–>
</li>
<li data-target="#demo_0" data-slide-to="1">Sinuosidad</li>
<li data-target="#demo_0" data-slide-to="2"></li>
</ul>–>
<ul class="ul_carousel">
<!–<li data-target="#demo_0" style="height: 30px; width: 50px; color: black; padding: 8px;" data-slide-to="0" class="active"><p style="color: black;">Ancho Promedio</p> </li>–>
<!–<li data-target="#demo_0" data-slide-to="0" class="active" style="height: 30px; width: 50px; color: black; padding: 8px;">Ancho Promedio</li>–>
<!–<li data-target="#demo_0" data-slide-to="0" class="active" style="height: 30px; width: 50px; background-color: #34ce57; color: black; padding: 8px;">–>
<li data-target="#demo_0" data-slide-to="0" class="li_carousel active">
Ancho Promedio
<!–<div style="width: 100%; height: 100%; z-index: 1000;">
<p>asdasas</p>
</div>
–>
</li>
<!–font-family: Museo-Sans-300; font-size: 22px;–>
<li data-target="#demo_0" data-slide-to="1" class="li_carousel" style="">Sinuosidad</li>
<li data-target="#demo_0" data-slide-to="2" class="li_carousel">Migración</li>
<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud de la onda</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud del meandro</li>
</ul>
<!– The slideshow –>
<div class="carousel-inner" style="padding-top: 40px; padding-bottom: 80px">
<!–padding: 80px 60px–>
<div class="carousel-item active" >
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!– padding: 100px 0;–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Riverbox<span style="color: #333333; margin-bottom: 0px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Sinuosidad<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Migración<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Longitud de la onda<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text">Longitud del meandro<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
</div>
<!– Left and right controls –>
<!–<a class="carousel-control-prev" href="#demo_0" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo_0" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>–>
</div>
</div>
</div>
-->
<!-- meandering Box-->
<!--
<div id="MeandricBox" style="width: 112%; background-color: #F7F8F8; padding: 40px 60px; margin: 30px 0;position: relative;">
<p class="rSensing-title-blue-text" style="color: #434041; margin-bottom: 36px;">Río Meándrico<!–<span style="color: #333333; margin-bottom: 36px; "></span>–> </p>
<!–style="display: flex; flex-direction: column; justify-content: center; align-items: center;"–>
<div >
<div id="Container_carousel_1" style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
<div style="width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="100%" height="auto">
</div>
<div style="width: 50%;">
<div id="demo_0" class="carousel slide" data-ride="carousel" style="width: 100%">
<!–<div style="">
<ul class="ul_carousel">
<li data-target="#demo_0" data-slide-to="0" class="li_carousel active">Ancho Promedio</li>
<li data-target="#demo_0" data-slide-to="1" class="li_carousel" style="">Sinuosidad</li>
<li data-target="#demo_0" data-slide-to="2" class="li_carousel">Migración</li>
<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud de la onda</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud del meandro</li>
</ul>
</div>–>
<!–<ul class="ul_carousel">
<li data-target="#demo_0" data-slide-to="0" class="li_carousel active">Ancho Promedio</li>
<li data-target="#demo_0" data-slide-to="1" class="li_carousel" style="">Sinuosidad</li>
<li data-target="#demo_0" data-slide-to="2" class="li_carousel">Migración</li>
<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud de la onda</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud del meandro</li>
</ul>–>
<!– The slideshow –>
<div class="carousel-inner" style="padding-top: 40px; padding-bottom: 80px">
<!–padding: 80px 60px–>
<div class="carousel-item active" >
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!– padding: 100px 0;–>
<!– <div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Ancho Promedio<span style="color: #333333; margin-bottom: 0px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Nos da una idea del ancho de equilibrio para transportar el caudal de agua y sedimentos en cada río.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!–<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Sinuosidad<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Parámetro que determina si un canal es recto o curvilíneo. Indica la madurez del río y provee información acerca de cómo la geomorfología influye en la navegación.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!–<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Migración<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Indica la variación de la ubicación de la línea central del río, respecto a su dirección y distancia, de un periodo de tiempo respecto a otro. Muestra la actividad del río, proporcionando información para temas de planificación territorial de centros poblados y áreas productivas.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!–<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Longitud del meandro<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Indica la longitud de la curvatura que genera un meandro desde un punto de inflexión al otro.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!–<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Longitud onda del arco<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Indica la distancia de la curva de un meandro, calculada entre un punto de inflexión a otro.</p>
</div>
</div>
</div>
</div>
</div>
<!– Left and right controls –>
<!–<a class="carousel-control-prev" href="#demo_0" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo_0" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>–>
</div>
</div>
</div>
<div style="position: relative; width: 100%; padding: 10px 20px; margin: 20px;">
<ul class="ul_carousel">
<li data-target="#demo_0" data-slide-to="0" class="li_carousel active">Ancho Promedio</li>
<li data-target="#demo_0" data-slide-to="1" class="li_carousel">Sinuosidad</li>
<li data-target="#demo_0" data-slide-to="2" class="li_carousel">Migración</li>
<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud del meandro</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud de la onda</li>
</ul>
</div>
</div>
</div>
-->
<div id="meandering-box" style="width: 100%; background-color: #F7F8F8; padding: 40px 60px; margin: 30px 0;position: relative;">
<p class="rSensing-title-blue-text" style="color: #434041; margin-bottom: 36px;">Río Meándrico<!--<span style="color: #333333; margin-bottom: 36px; "></span>--> </p>
<!--<div id="SectionScroll" class="column-flex-center" style=" width: 74%;">-->
<div id="section-scrolling-meandering" class="column-flex-center" style=" width: 100%;">
<!--<style>
* {box-sizing: border-box}
/*body {font-family: Verdana, sans-serif; margin:0}*/
.mySlides {display: none}
/*img {vertical-align: middle;}*/
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.meandricBoxLabel {
/* cursor: pointer;
height: 30px;
!*width: 30px;*!
padding: 8px;
margin: 0 2px;
background-color: #bbb;
!*border-radius: 50%;*!
display: inline-block;
transition: background-color 0.6s ease;*/
position: relative;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
/*width: 30px;*/
padding: 6px;
height: 30px;
margin-right: 12px;
/*margin-left: 12px;
text-indent: 1px;*/
cursor: pointer;
/*font-family: Muse;*/
font-family: Museo-Sans-300;
font-size: 20px;
/*background-color: rg*/
/*text-decoration: none;*/
/*text-underline-position: none;*/
}
.active, .meandricBoxLabel:hover {
/*background-color: #717171;*/
background-color: transparent;
color: #25B3CF;
font-family: Museo-Sans-500;
/*text-decoration: underline;*/
border-bottom: 2px solid;
line-height: 20px;
/*padding-bottom: 10px;*/
/*margin-bottom: 10px;*/
/*text-decoration: underline;*/
/*text-underline-position: under;*/
}
/* Fading animation */
.fade_1 {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>-->
<div style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
<div style="width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/meandrico2_2.jpg" alt="" width="100%" height="auto">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="" width="100%" height="auto">-->
</div>
<div style="width: 50%;">
<div class="slideshow-container">
<div class="mySlides fade_1">
<!--<div class="numbertext">1 / 3</div>-->
<!--<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Text</div>-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Ancho Promedio<span style="color: #333333; margin-bottom: 0px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 18px;">Nos da una idea del ancho de equilibrio para transportar el caudal de agua y sedimentos en cada río.</p>
</div>
</div>
</div>
</div>
<div class="mySlides fade_1">
<!--<div class="numbertext">2 / 3</div>-->
<!--<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Two</div>-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<!--<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>-->
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Sinuosidad<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 18px;">Parámetro que determina si un canal es recto o curvilíneo. Indica la madurez del río y provee información acerca de cómo la geomorfología influye en la navegación.</p>
</div>
</div>
</div>
</div>
<div class="mySlides fade_1">
<!--<div class="numbertext">3 / 3</div>-->
<!--<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Three</div>-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<!--<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>-->
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Migración<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 18px;">Indica la variación de la ubicación de la línea central del río, respecto
a su dirección y distancia, de un periodo de tiempo respecto a otro. Muestra la actividad del río, proporcionando información para temas de planificación
territorial de centros poblados y áreas productivas.</p>
</div>
</div>
</div>
</div>
<div class="mySlides fade_1">
<!--<div class="numbertext">3 / 3</div>-->
<!--<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Three</div>-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<!--<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>-->
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Longitud del meandro<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 18px;">Indica la longitud de la curvatura que genera un meandro desde un punto de inflexión al otro.</p>
</div>
</div>
</div>
</div>
<div class="mySlides fade_1">
<!--<div class="numbertext">3 / 3</div>-->
<!--<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Three</div>-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<!--<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>-->
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Longitud onda del arco<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 18px;">Indica la distancia de la curva de un meandro, calculada entre un punto de inflexión a otro.</p>
</div>
</div>
</div>
</div>
</div>
<!--<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>-->
</div>
</div>
<br>
<!--<div style="text-align:center">
<span class="meandricBoxLabel" onclick="currentSlide(1)">Ancho Promedio</span>
<span class="meandricBoxLabel" onclick="currentSlide(2)"></span>
<span class="meandricBoxLabel" onclick="currentSlide(3)"></span>
</div>-->
<div style="position: relative; width: 100%; padding: 10px 20px; margin-bottom: 30px;">
<ul class="ul_carousel">
<span class="meandricBoxLabel" onclick="currentSlide(1)">Ancho Promedio</span>
<span class="meandricBoxLabel" onclick="currentSlide(2)">Sinuosidad</span>
<span class="meandricBoxLabel" onclick="currentSlide(3)">Migración</span>
<span class="meandricBoxLabel" onclick="currentSlide(4)">Longitud del meandro</span>
<span class="meandricBoxLabel" onclick="currentSlide(5)">Longitud de la onda</span>
<!--<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud del meandro</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud de la onda</li>-->
</ul>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("meandricBoxLabel");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" activeRiver", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " activeRiver";
}
</script>
</div>
</div>
<!-- ////////////////////////////////////////////////////////////////////////////////////////// -->
<!-- Anabranching -->
<!--
<div id="AnabranchingBox" style="width: 112%; background-color: #F7F8F8; padding: 40px 60px; margin: 30px 0;position: relative;">
<p class="rSensing-title-blue-text" style="color: #434041; margin-bottom: 36px;">Río Multicanal<!–<span style="color: #333333; margin-bottom: 36px; "></span>–> </p>
<!–style="display: flex; flex-direction: column; justify-content: center; align-items: center;"–>
<div>
<div id="Container_carousel_2" style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
<div style="width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="100%" height="auto">
</div>
<div style="width: 50%;">
<div id="demo_2" class="carousel slide" data-ride="carousel" style="width: 100%">
<!–<div style="">
<ul class="ul_carousel">
<li data-target="#demo_0" data-slide-to="0" class="li_carousel active">Ancho Promedio</li>
<li data-target="#demo_0" data-slide-to="1" class="li_carousel" style="">Sinuosidad</li>
<li data-target="#demo_0" data-slide-to="2" class="li_carousel">Migración</li>
<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud de la onda</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud del meandro</li>
</ul>
</div>–>
<!–<ul class="ul_carousel">
<li data-target="#demo_0" data-slide-to="0" class="li_carousel active">Ancho Promedio</li>
<li data-target="#demo_0" data-slide-to="1" class="li_carousel" style="">Sinuosidad</li>
<li data-target="#demo_0" data-slide-to="2" class="li_carousel">Migración</li>
<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud de la onda</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud del meandro</li>
</ul>–>
<!– The slideshow –>
<div class="carousel-inner" style="padding-top: 40px; padding-bottom: 80px">
<!–padding: 80px 60px–>
<div class="carousel-item active" >
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!– padding: 100px 0;–>
<!– <div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Ancho Promedio<span style="color: #333333; margin-bottom: 0px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Nos da una idea del ancho de equilibrio para transportar el caudal de agua y sedimentos en cada río.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!–<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Sinuosidad<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Parámetro que determina si un canal es recto o curvilíneo. Indica la madurez del río y provee información acerca de cómo la geomorfología influye en la navegación.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!–<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Erosion - deposición<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Muestra las dinámicas de erosión y deposición del río entre dos fechas.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!–<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Métricas de islas<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Las islas son barras transversales o longitudinales que sobresalen de la superficie del río y que, luego de su formación, se mantienen relativamente estables en comparación de ciertas barras que desaparecen entre un período y otro. Dentro de las métricas calculadas están el ancho promedio y los ángulos de bifurcación y confluencia de las islas, las cuales permiten conocer qué isla es más estable en el tiempo y qué actividades se podrían desarrollar en las mismas.</p>
</div>
</div>
</div>
</div>
<!–<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!–<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Longitud del meandro<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>–>
</div>
<!– Left and right controls –>
<!–<a class="carousel-control-prev" href="#demo_0" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo_0" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>–>
</div>
</div>
</div>
<div style="position: relative; width: 100%; padding: 10px 20px; margin: 20px;">
<ul class="ul_carousel">
<li data-target="#demo_2" data-slide-to="0" class="li_carousel active">Ancho Promedio</li>
<li data-target="#demo_2" data-slide-to="1" class="li_carousel">Sinuosidad</li>
<li data-target="#demo_2" data-slide-to="2" class="li_carousel">Erosion - deposición</li>
<li data-target="#demo_2" data-slide-to="3" class="li_carousel">Métricas de islas</li>
<!–<li data-target="#demo_2" data-slide-to="4" class="li_carousel">Longitud del meandro</li>–>
</ul>
</div>
</div>
</div>
-->
<div id="anabranching-box" style="width: 100%; background-color: #F7F8F8; padding: 40px 60px; margin: 30px 0;position: relative;">
<p class="rSensing-title-blue-text" style="color: #434041; margin-bottom: 36px;">Río Multicanal<!--<span style="color: #333333; margin-bottom: 36px; "></span>--> </p>
<!--<div id="SectionScroll" class="column-flex-center" style=" width: 74%;">-->
<div id="section-scrolling-anabranching" class="column-flex-center" style=" width: 100%;">
<style>
* {box-sizing: border-box}
/*body {font-family: Verdana, sans-serif; margin:0}*/
.mySlides {display: none}
/*img {vertical-align: middle;}*/
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.meandricBoxLabel {
/* cursor: pointer;
height: 30px;
!*width: 30px;*!
padding: 8px;
margin: 0 2px;
background-color: #bbb;
!*border-radius: 50%;*!
display: inline-block;
transition: background-color 0.6s ease;*/
position: relative;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
/*width: 30px;*/
padding: 6px;
height: 30px;
margin-right: 12px;
/*margin-left: 12px;
text-indent: 1px;*/
cursor: pointer;
/*font-family: Muse;*/
font-family: Museo-Sans-300;
font-size: 20px;
/*background-color: rg*/
/*text-decoration: none;*/
/*text-underline-position: none;*/
}
.activeRiver, .meandricBoxLabel:hover {
/*background-color: #717171;*/
background-color: transparent;
color: #25B3CF;
font-family: Museo-Sans-500;
/*text-decoration: underline;*/
border-bottom: 2px solid;
line-height: 20px;
/*padding-bottom: 10px;*/
/*margin-bottom: 10px;*/
/*text-decoration: underline;*/
/*text-underline-position: under;*/
}
/* Fading animation */
.fade_1 {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
<div style="width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;">
<div style="width: 50%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/multicanal1_1.jpg" alt="image" width="100%" height="auto">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="image" width="100%" height="auto">-->
</div>
<div style="width: 50%;">
<div class="slideshow-container">
<div class="mySlidesAnabranching fade_1">
<!--<div class="numbertext">1 / 3</div>-->
<!--<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Text</div>-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Ancho Promedio<span style="color: #333333; margin-bottom: 0px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 18px;">Nos da una idea del ancho de equilibrio para transportar el caudal de agua y sedimentos en cada río.</p>
</div>
</div>
</div>
</div>
<div class="mySlidesAnabranching fade_1">
<!--<div class="numbertext">2 / 3</div>-->
<!--<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Two</div>-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<!--<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>-->
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Sinuosidad<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 18px;">Parámetro que determina si un canal es recto o curvilíneo. Indica la madurez del río y provee información acerca de cómo la geomorfología influye en la navegación.</p>
</div>
</div>
</div>
</div>
<div class="mySlidesAnabranching fade_1">
<!--<div class="numbertext">3 / 3</div>-->
<!--<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Three</div>-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<!--<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>-->
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Erosión - Deposición<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 18px;">Muestra las dinámicas de erosión y deposición del río entre dos fechas.</p>
</div>
</div>
</div>
</div>
<div class="mySlidesAnabranching fade_1">
<!--<div class="numbertext">3 / 3</div>-->
<!--<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Three</div>-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<!--<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>-->
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Métricas de islas<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 18px; ">Las islas son barras transversales o longitudinales que sobresalen de la superficie del río y que,
luego de su formación, se mantienen relativamente estables en comparación de ciertas barras que desaparecen entre
un período y otro. Dentro de las métricas calculadas están el ancho promedio y los ángulos de bifurcación y confluencia
de las islas, las cuales permiten conocer qué isla es más estable en el tiempo y qué actividades se podrían desarrollar
en las mismas.</p>
</div>
</div>
</div>
</div>
<!--<div class="mySlidesAnabranching fade_1">
<!–<div class="numbertext">3 / 3</div>–>
<!–<img src="./img/dancingRivers/gota-background-3.png" style="width:100%">
<div class="text">Caption Three</div>–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<!–<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>–>
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 80%; width: 80%;">
<p class="rSensing-title-blue-text" style="color: #5C5B5F">Longitud onda del arco<span style="color: #333333; margin-bottom: 36px; "></span> </p>
<p class="rSensing-content-text" style="font-size: 20px;">Indica la distancia de la curva de un meandro, calculada entre un punto de inflexión a otro.</p>
</div>
</div>
</div>
</div>-->
</div>
<!--<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>-->
</div>
</div>
<br>
<!--<div style="text-align:center">
<span class="meandricBoxLabel" onclick="currentSlide(1)">Ancho Promedio</span>
<span class="meandricBoxLabel" onclick="currentSlide(2)"></span>
<span class="meandricBoxLabel" onclick="currentSlide(3)"></span>
</div>-->
<div style="position: relative; width: 100%; padding: 10px 20px; margin-bottom: 30px;">
<ul class="ul_carousel">
<span class="anabranchingBoxLabel" onclick="currentSlideAnabranching(1)">Ancho Promedio</span>
<span class="anabranchingBoxLabel" onclick="currentSlideAnabranching(2)">Sinuosidad</span>
<span class="anabranchingBoxLabel" onclick="currentSlideAnabranching(3)">Erosión - Deposición</span>
<span class="anabranchingBoxLabel" onclick="currentSlideAnabranching(4)">Métricas de islas</span>
<!--<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud del meandro</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud de la onda</li>-->
</ul>
</div>
<script>
var anabranchingSlideIndex = 1;
showSlidesAnabranching(anabranchingSlideIndex);
/*function plusSlides(n) {
showSlides(anabranchingSlideIndex += n);
}*/
function currentSlideAnabranching(n) {
showSlidesAnabranching(anabranchingSlideIndex = n);
}
function showSlidesAnabranching(n) {
var i;
var slidesAnabranching = document.getElementsByClassName("mySlidesAnabranching");
var dotsAnabranching = document.getElementsByClassName("anabranchingBoxLabel");
if (n > slidesAnabranching.length) {anabranchingSlideIndex = 1}
if (n < 1) {anabranchingSlideIndex = slidesAnabranching.length}
for (i = 0; i < slidesAnabranching.length; i++) {
slidesAnabranching[i].style.display = "none";
}
for (i = 0; i < dotsAnabranching.length; i++) {
dotsAnabranching[i].className = dotsAnabranching[i].className.replace(" activeRiver", "");
}
slidesAnabranching[anabranchingSlideIndex-1].style.display = "block";
dotsAnabranching[anabranchingSlideIndex-1].className += " activeRiver";
}
</script>
</div>
</div>
</div>
</div>
<!-- CAROUSEL -->
<style>
.ul_carousel_indicators_software{
position: absolute;
right: 0;
/*bottom: 10px;*/
bottom: -60px;
left: 0;
z-index: 15;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
padding-left: 0;
margin-right: 15%;
margin-left: 15%;
list-style: none;
}
.li_carousel_indicators_software{
position: relative;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
/*width: 30px;*/
/*padding: 6px;*/
height: 18px;
width: 18px;
border-radius: 50%;
margin-right: 12px;
margin-left: 12px;
/*text-indent: 1px;*/
cursor: pointer;
background-color: #C3C5CA;
/*font-family: Muse;*/
/*font-family: Museo-Sans-300;*/
/*font-size: 20px;*/
/*background-color: rgba(255, 255, 255, 0.5);*/
}
.li_carousel_indicators_software::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
.li_carousel_indicators_software::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: "";
}
.active {
background-color: transparent;
/*background-color: #25B3CF;*/
}
.activeSoftware {
/*background-color: transparent;*/
background-color: #25B3CF;
}
/*.ul_carousel_indicators_software .active {
background-color: black;
}*/
</style>
<!---->
<style>
</style>
<!---->
<!--Softwares-->
<!-- 5 -->
<!--<div style="width: 100%; min-height: 60vh; padding: 10vh 0; display: flex; flex-direction: column; justify-content: center;
align-items: center; background-color: #E6E6E6;">
<div class="column-flex-center" style=" width: 74%; height: 90%">
<div style="align-self: flex-start; margin-bottom: 0px;">
<p class="rSensing-title-blue-text">Softwares<span style="color: #333333;"></span> </p>
<!–<p style="font-size: 22px; color: #4D4D4D; font-family: Museo-Sans-100" data-i18n="dancingR-rSensing-mapData-text"></p>–>
</div>
<!–
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between;">
<div style="width: 65%;">
<p class="rSensing-title-blue-text">Riverbox</p>
<div style="width: 90%; display: flex; flex-direction: row; margin-top: 26px;">
<!–left arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/left-arrow.png" style=" height: auto; width: 70%" >
</div>–>
<!–<div id="Image" style="width: 80%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-3.png" style=" height: auto; width: 100%" >
</div>–>
<div id="Image" style="width: 80%">
<div id="demo" class="carousel slide" data-ride="carousel">
<!– Indicators –>
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!– The slideshow –>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">
</div>
</div>
<!– Left and right controls –>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!–right arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/right-arrow.png" style=" height: auto; width: 70%" >
</div>–>
</div>
</div>
<div style="width: 35%;">
<!–<p class="rSensing-title-blue-text">Descripción</p>–>
</div>
</div>
–>
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between;">
<div style="width: 100%;">
<!–<p class="rSensing-title-blue-text">Riverbox</p>–>
<div style="width: 100%; display: flex; flex-direction: row; margin-top: 26px;">
<!–left arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/left-arrow.png" style=" height: auto; width: 70%" >
</div>–>
<!–<div id="Image" style="width: 80%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-3.png" style=" height: auto; width: 100%" >
</div>–>
<div id="Image" style="width: 100%">
<div id="demo" class="carousel slide" data-ride="carousel" style="width: 100%">
<!– The slideshow –>
<!–style="transition: none !important;"–>
<div class="carousel-inner">
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 80%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<!–<div style="height: 80%; width: 80%;">–>
<div style="height: 100%; width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<!–<p class="rSensing-title-blue-text" style="color: #575756">Interfaz GEE<span style="color: #333333; margin-bottom: 36px; "></span> </p>–>
<p class="rSensing-title-blue-text" style="color: #575756; text-align: left; margin-bottom: 36px;">Interfaz GEE</p>
<p class="rSensing-content-text" style="font-size: 20px; margin: 0;">La plataforma de Google Earth Engine ha sido adaptada con una interfaz para la obtención de imágenes satelitales y aplicación de índices de detección de agua.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 80%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 100%; width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<!–<p class="rSensing-title-blue-text">Riverbox<span style="color: #333333; margin-bottom: 36px; "></span> </p>–>
<p class="rSensing-title-blue-text" style="color: #575756; text-align: left; margin-bottom: 36px;">Riverbox</p>
<p class="rSensing-content-text" style="font-size: 20px;">El Toolbox permite realizar el pre procesamiento de imágenes satelitales para la obtención de una capa vectorial correspondiente al río y su línea central.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 80%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 100%; width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<p class="rSensing-title-blue-text" style="color: #575756; text-align: left; margin-bottom: 36px;">MStaT – Meander Statistics Toolbox</p>
<!–<p class="rSensing-title-blue-text">MStaT – Meander Statistics Toolbox<span style="color: #333333; margin-bottom: 36px; "></span> </p>–>
<p class="rSensing-content-text" style="font-size: 20px;">MStat es una herramienta que permite la caracterización de ríos meándricos mediante la cuantificación de la longitud de onda, amplitud, sinuosidad y curvatura del canal.</p>
</div>
</div>
</div>
</div>
</div>
<!– Left and right controls –>
<a class="carousel-control-prev" style="left: -15%;" href="#demo" data-slide="prev" onclick="plusSlidesSoftware(-1)">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" style="right: -15%;" href="#demo" data-slide="next" onclick="plusSlidesSoftware(1)">
<span class="carousel-control-next-icon"></span>
</a>
<!–<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>–>
</div>
<!– Indicators –>
<!–<ul class="carousel-indicators">–>
<div style="position: relative; width: 100%; padding: 10px 10px; margin-bottom: 20px;">
<ul class="ul_carousel_indicators_software">
<li data-target="#demo" data-slide-to="0" class="li_carousel_indicators_software" onclick="currentSlidesSoftware(1)"></li>
<li data-target="#demo" data-slide-to="1" class="li_carousel_indicators_software" onclick="currentSlidesSoftware(2)"></li>
<li data-target="#demo" data-slide-to="2" class="li_carousel_indicators_software" onclick="currentSlidesSoftware(3)"></li>
</ul>
</div>
<!–<div style="position: relative; width: 100%; padding: 10px 20px; margin-bottom: 30px;">
<ul class="ul_carousel">
<span class="anabranchingBoxLabel" onclick="currentSlideAnabranching(1)">Ancho Promedio</span>
<span class="anabranchingBoxLabel" onclick="currentSlideAnabranching(2)">Sinuosidad</span>
<span class="anabranchingBoxLabel" onclick="currentSlideAnabranching(3)">Erosión - Deposición</span>
<span class="anabranchingBoxLabel" onclick="currentSlideAnabranching(4)">Métricas de islas</span>
<!–<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud del meandro</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud de la onda</li>–>
</ul>
</div>–>
<script>
var softwareSlideIndex = 1;
showSlidesAnabranching(softwareSlideIndex);
/*function plusSlides(n) {
showSlides(anabranchingSlideIndex += n);
}*/
function currentSlideAnabranching(n) {
showSlidesAnabranching(softwareSlideIndex = n);
}
function showSlidesAnabranching(n) {
var i;
var slidesAnabranching = document.getElementsByClassName("mySlidesAnabranching");
var dotsSoftware = document.getElementsByClassName("li_carousel_indicators_software");
if (n > slidesAnabranching.length) {softwareSlideIndex = 1}
if (n < 1) {softwareSlideIndex = slidesAnabranching.length}
for (i = 0; i < slidesAnabranching.length; i++) {
slidesAnabranching[i].style.display = "none";
}
for (i = 0; i < dotsSoftware.length; i++) {
dotsSoftware[i].className = dotsSoftware[i].className.replace(" activeRiver", "");
}
slidesAnabranching[softwareSlideIndex-1].style.display = "block";
dotsSoftware[softwareSlideIndex-1].className += " activeRiver";
}
</script>
<!––>
<!–<div style="position: relative; width: 100%; padding: 10px 20px; margin: 20px;">
<ul class="ul_carousel">
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(1)">Ancho Promedio</span>
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(2)">Sinuosidad</span>
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(3)">Erosión - Deposición</span>
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(4)">Métricas de islas</span>
<!–<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud del meandro</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud de la onda</li>–>
</ul>
</div>–>
<!–<script>
var softwareSlideIndex = 1;
showSlidesSoftware(softwareSlideIndex);
function plusSlidesSoftware(n) {
showSlidesSoftware(softwareSlideIndex += n);
}
function currentSlidesSoftware(n) {
showSlidesSoftware(softwareSlideIndex = n);
}
function showSlidesSoftware(n) {
var i;
var slidesSoftware = document.getElementsByClassName("carousel-item");
var dotsSoftware = document.getElementsByClassName("li_carousel_indicators_software");
if (n > slidesSoftware.length) {softwareSlideIndex = 1}
if (n < 1) {softwareSlideIndex = slidesSoftware.length}
/*for (i = 0; i < slidesSoftware.length; i++) {
slidesSoftware[i].style.display = "none";
}*/
for (i = 0; i < dotsSoftware.length; i++) {
dotsSoftware[i].className = dotsSoftware[i].className.replace("activeSoftware", "");
}
/*slidesSoftware[softwareSlideIndex-1].style.display = "block";*/
dotsSoftware[softwareSlideIndex-1].className += " activeSoftware";
}
/*function showSlidesSoftware(n) {
var i;
var slidesAnabranching = document.getElementsByClassName("mySlidesAnabranching");
var dotsSoftware = document.getElementsByClassName("li_carousel_indicators_software");
// if (n > slidesAnabranching.length) {anabranchingSlideIndex = 1}
// if (n < 1) {anabranchingSlideIndex = slidesAnabranching.length}
/!*for (i = 0; i < slidesAnabranching.length; i++) {
slidesAnabranching[i].style.display = "none";
}*!/
for (i = 0; i < dotsSoftware.length; i++) {
dotsSoftware[i].className = dotsSoftware[i].className.replace("activeSoftware", "");
}
// slidesAnabranching[anabranchingSlideIndex-1].style.display = "block";
dotsSoftware[anabranchingSlideIndex-1].className += " activeSoftware";
}*/
/*var dots = document.getElementsByClassName("meandricBoxLabel");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" activeRiver", "");
}*/
/*afafsafas*/
/*var dots = document.getElementsByClassName("li_carousel_indicators_software");
/!*if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}*!/
for (i = 0; i < slides.length; i++) {
if (dots[i].className === 'active') {
dots[i].className = dots[i].className.replace("activeSoftware", "");
dots[i].className += " activeSoftware";
}
}*/
var myVar = setInterval(myTimer, 1000);
function myTimer() {
/*var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();*/
var car_item = document.getElementsByClassName("carousel-item");
var dots = document.getElementsByClassName("li_carousel_indicators_software");
/*if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}*/
var i;
for (i = 0; i < car_item.length; i++) {
console.log("a");
if (car_item[i].className === " active") {
console.log("ga");
dots[i].className = dots[i].className.replace("activeSoftware", "");
dots[i].className += " activeSoftware";
}
}
}
/*var dots = document.getElementsByClassName("li_carousel_indicators_software");
/!*if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}*!/
for (i = 0; i < slides.length; i++) {
if (dots[i].className === 'active') {
dots[i].className = dots[i].className.replace("activeSoftware", "");
dots[i].className += " activeSoftware";
}
}*/
/*for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" activeRiver", "");
}*/
</script>–>
</div>
<!–right arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/right-arrow.png" style=" height: auto; width: 70%" >
</div>–>
</div>
</div>
<!–<div style="width: 35%;">
<!–<p class="rSensing-title-blue-text">Descripción</p>–>
</div>–>
</div>
<!–<div id="image-carousel" class="carousel-container">
<div class="cuadro1" id="scrolling-image-1" style="height: 100%; width: 100%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/DSC_0308.jpg" style=" width: 58vw; height: 100%; object-fit: cover;" >
</div>
<div class="cuadro1" id="scrolling-image-2" style="height: 100%; width: 100%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/river7.png" style=" width: 58vw; height: 100%; object-fit: cover;" >
</div>
<div class="cuadro1" id="scrolling-image-3" style="height: 100%; width: 100%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/DSC_0308.jpg" style=" width: 58vw; height: 100%; object-fit: cover;" >
</div>
</div>–>
</div>
</div>-->
<!--////////-->
<!--<div style="width: 100%; min-height: 60vh; padding: 10vh 0; display: flex; flex-direction: column; justify-content: center;
align-items: center; background-color: #E6E6E6;">
<div class="column-flex-center" style=" width: 74%; height: 90%">
<div style="align-self: flex-start; margin-bottom: 0px;">
<p class="rSensing-title-blue-text">Softwares<span style="color: #333333;"></span> </p>
<!–<p style="font-size: 22px; color: #4D4D4D; font-family: Museo-Sans-100" data-i18n="dancingR-rSensing-mapData-text"></p>–>
</div>
<!–
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between;">
<div style="width: 65%;">
<p class="rSensing-title-blue-text">Riverbox</p>
<div style="width: 90%; display: flex; flex-direction: row; margin-top: 26px;">
<!–left arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/left-arrow.png" style=" height: auto; width: 70%" >
</div>–>
<!–<div id="Image" style="width: 80%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-3.png" style=" height: auto; width: 100%" >
</div>–>
<div id="Image" style="width: 80%">
<div id="demo" class="carousel slide" data-ride="carousel">
<!– Indicators –>
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!– The slideshow –>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">
</div>
</div>
<!– Left and right controls –>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!–right arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/right-arrow.png" style=" height: auto; width: 70%" >
</div>–>
</div>
</div>
<div style="width: 35%;">
<!–<p class="rSensing-title-blue-text">Descripción</p>–>
</div>
</div>
–>
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between;">
<div style="width: 100%;">
<!–<p class="rSensing-title-blue-text">Riverbox</p>–>
<div style="width: 100%; display: flex; flex-direction: row; margin-top: 26px;">
<!–left arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/left-arrow.png" style=" height: auto; width: 70%" >
</div>–>
<!–<div id="Image" style="width: 80%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-3.png" style=" height: auto; width: 100%" >
</div>–>
<div id="Image" style="width: 100%">
<div id="demo" class="carousel slide" data-ride="carousel" style="width: 100%">
<!– The slideshow –>
<!–style="transition: none !important;"–>
<div class="carousel-inner">
<div class="carousel-item active">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 80%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<!–<div style="height: 80%; width: 80%;">–>
<div style="height: 100%; width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<!–<p class="rSensing-title-blue-text" style="color: #575756">Interfaz GEE<span style="color: #333333; margin-bottom: 36px; "></span> </p>–>
<p class="rSensing-title-blue-text" style="color: #575756; text-align: left; margin-bottom: 36px;">Interfaz GEE</p>
<p class="rSensing-content-text" style="font-size: 20px; margin: 0;">La plataforma de Google Earth Engine ha sido adaptada con una interfaz para la obtención de imágenes satelitales y aplicación de índices de detección de agua.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 80%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 100%; width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<!–<p class="rSensing-title-blue-text">Riverbox<span style="color: #333333; margin-bottom: 36px; "></span> </p>–>
<p class="rSensing-title-blue-text" style="color: #575756; text-align: left; margin-bottom: 36px;">Riverbox</p>
<p class="rSensing-content-text" style="font-size: 20px;">El Toolbox permite realizar el pre procesamiento de imágenes satelitales para la obtención de una capa vectorial correspondiente al río y su línea central.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">–>
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!–<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">–>
<div style="height: 80%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!–<p style="color: black">asda</p>–>
<div style="height: 100%; width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<p class="rSensing-title-blue-text" style="color: #575756; text-align: left; margin-bottom: 36px;">MStaT – Meander Statistics Toolbox</p>
<!–<p class="rSensing-title-blue-text">MStaT – Meander Statistics Toolbox<span style="color: #333333; margin-bottom: 36px; "></span> </p>–>
<p class="rSensing-content-text" style="font-size: 20px;">MStat es una herramienta que permite la caracterización de ríos meándricos mediante la cuantificación de la longitud de onda, amplitud, sinuosidad y curvatura del canal.</p>
</div>
</div>
</div>
</div>
</div>
<!– Left and right controls –>
<a class="carousel-control-prev" style="left: -15%;" href="#demo" data-slide="prev" onclick="plusSlidesSoftware(-1)">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" style="right: -15%;" href="#demo" data-slide="next" onclick="plusSlidesSoftware(1)">
<span class="carousel-control-next-icon"></span>
</a>
<!–<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>–>
</div>
<!– Indicators –>
<!–<ul class="carousel-indicators">–>
<div style="position: relative; width: 100%; padding: 10px 10px; margin-bottom: 20px;">
<ul class="ul_carousel_indicators_software">
<li data-target="#demo" data-slide-to="0" class="li_carousel_indicators_software" onclick="currentSlidesSoftware(1)"></li>
<li data-target="#demo" data-slide-to="1" class="li_carousel_indicators_software" onclick="currentSlidesSoftware(2)"></li>
<li data-target="#demo" data-slide-to="2" class="li_carousel_indicators_software" onclick="currentSlidesSoftware(3)"></li>
</ul>
</div>
<!––>
<!–<div style="position: relative; width: 100%; padding: 10px 20px; margin: 20px;">
<ul class="ul_carousel">
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(1)">Ancho Promedio</span>
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(2)">Sinuosidad</span>
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(3)">Erosión - Deposición</span>
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(4)">Métricas de islas</span>
<!–<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud del meandro</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud de la onda</li>–>
</ul>
</div>–>
<script>
var softwareSlideIndex = 1;
showSlidesSoftware(softwareSlideIndex);
function plusSlidesSoftware(n) {
showSlidesSoftware(softwareSlideIndex += n);
}
function currentSlidesSoftware(n) {
showSlidesSoftware(softwareSlideIndex = n);
}
function showSlidesSoftware(n) {
var i;
var slidesSoftware = document.getElementsByClassName("carousel-item");
var dotsSoftware = document.getElementsByClassName("li_carousel_indicators_software");
if (n > slidesSoftware.length) {softwareSlideIndex = 1}
if (n < 1) {softwareSlideIndex = slidesSoftware.length}
/*for (i = 0; i < slidesSoftware.length; i++) {
slidesSoftware[i].style.display = "none";
}*/
for (i = 0; i < dotsSoftware.length; i++) {
dotsSoftware[i].className = dotsSoftware[i].className.replace("activeSoftware", "");
}
/*slidesSoftware[softwareSlideIndex-1].style.display = "block";*/
dotsSoftware[softwareSlideIndex-1].className += " activeSoftware";
}
/*function showSlidesSoftware(n) {
var i;
var slidesAnabranching = document.getElementsByClassName("mySlidesAnabranching");
var dotsSoftware = document.getElementsByClassName("li_carousel_indicators_software");
// if (n > slidesAnabranching.length) {anabranchingSlideIndex = 1}
// if (n < 1) {anabranchingSlideIndex = slidesAnabranching.length}
/!*for (i = 0; i < slidesAnabranching.length; i++) {
slidesAnabranching[i].style.display = "none";
}*!/
for (i = 0; i < dotsSoftware.length; i++) {
dotsSoftware[i].className = dotsSoftware[i].className.replace("activeSoftware", "");
}
// slidesAnabranching[anabranchingSlideIndex-1].style.display = "block";
dotsSoftware[anabranchingSlideIndex-1].className += " activeSoftware";
}*/
/*var dots = document.getElementsByClassName("meandricBoxLabel");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" activeRiver", "");
}*/
/*afafsafas*/
/*var dots = document.getElementsByClassName("li_carousel_indicators_software");
/!*if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}*!/
for (i = 0; i < slides.length; i++) {
if (dots[i].className === 'active') {
dots[i].className = dots[i].className.replace("activeSoftware", "");
dots[i].className += " activeSoftware";
}
}*/
var myVar = setInterval(myTimer, 1000);
function myTimer() {
/*var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();*/
var car_item = document.getElementsByClassName("carousel-item");
var dots = document.getElementsByClassName("li_carousel_indicators_software");
/*if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}*/
var i;
for (i = 0; i < car_item.length; i++) {
console.log("a");
if (car_item[i].className === " active") {
console.log("ga");
dots[i].className = dots[i].className.replace("activeSoftware", "");
dots[i].className += " activeSoftware";
}
}
}
/*var dots = document.getElementsByClassName("li_carousel_indicators_software");
/!*if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}*!/
for (i = 0; i < slides.length; i++) {
if (dots[i].className === 'active') {
dots[i].className = dots[i].className.replace("activeSoftware", "");
dots[i].className += " activeSoftware";
}
}*/
/*for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" activeRiver", "");
}*/
</script>
</div>
<!–right arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/right-arrow.png" style=" height: auto; width: 70%" >
</div>–>
</div>
</div>
<!–<div style="width: 35%;">
<!–<p class="rSensing-title-blue-text">Descripción</p>–>
</div>–>
</div>
<!–<div id="image-carousel" class="carousel-container">
<div class="cuadro1" id="scrolling-image-1" style="height: 100%; width: 100%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/DSC_0308.jpg" style=" width: 58vw; height: 100%; object-fit: cover;" >
</div>
<div class="cuadro1" id="scrolling-image-2" style="height: 100%; width: 100%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/river7.png" style=" width: 58vw; height: 100%; object-fit: cover;" >
</div>
<div class="cuadro1" id="scrolling-image-3" style="height: 100%; width: 100%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/DSC_0308.jpg" style=" width: 58vw; height: 100%; object-fit: cover;" >
</div>
</div>–>
</div>
</div>-->
<!-- ------------------------------------------------ -->
<!--Sin indicadores-->
<div style="width: 100%; min-height: 60vh; padding: 10vh 0; display: flex; flex-direction: column; justify-content: center;
align-items: center; background-color: #E6E6E6;">
<div class="column-flex-center" style=" width: 74%; height: 90%">
<div style="align-self: flex-start; margin-bottom: 0px;">
<p class="rSensing-title-blue-text">Softwares<span style="color: #333333;"></span> </p>
<!--<p style="font-size: 22px; color: #4D4D4D; font-family: Museo-Sans-100" data-i18n="dancingR-rSensing-mapData-text"></p>-->
</div>
<!--
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between;">
<div style="width: 65%;">
<p class="rSensing-title-blue-text">Riverbox</p>
<div style="width: 90%; display: flex; flex-direction: row; margin-top: 26px;">
<!–left arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/left-arrow.png" style=" height: auto; width: 70%" >
</div>–>
<!–<div id="Image" style="width: 80%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-3.png" style=" height: auto; width: 100%" >
</div>–>
<div id="Image" style="width: 80%">
<div id="demo" class="carousel slide" data-ride="carousel">
<!– Indicators –>
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!– The slideshow –>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">
</div>
</div>
<!– Left and right controls –>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!–right arrow–>
<!–<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/right-arrow.png" style=" height: auto; width: 70%" >
</div>–>
</div>
</div>
<div style="width: 35%;">
<!–<p class="rSensing-title-blue-text">Descripción</p>–>
</div>
</div>
-->
<div style="display: flex; flex-direction: row; width: 100%; justify-content: space-between;">
<div style="width: 100%;">
<!--<p class="rSensing-title-blue-text">Riverbox</p>-->
<div style="width: 100%; display: flex; flex-direction: row; margin-top: 26px;">
<!--left arrow-->
<!--<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/left-arrow.png" style=" height: auto; width: 70%" >
</div>-->
<!--<div id="Image" style="width: 80%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-3.png" style=" height: auto; width: 100%" >
</div>-->
<div id="Image" style="width: 100%">
<div id="demo" class="carousel slide" data-ride="carousel" style="width: 100%">
<!-- The slideshow -->
<!--style="transition: none !important;"-->
<div class="carousel-inner">
<div class="carousel-item active">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="New York" width="1100" height="500">-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<div style="height: 50%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 80%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<!--<div style="height: 80%; width: 80%;">-->
<div style="height: 100%; width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<!--<p class="rSensing-title-blue-text" style="color: #575756">Interfaz GEE<span style="color: #333333; margin-bottom: 36px; "></span> </p>-->
<p class="rSensing-title-blue-text" style="color: #575756; text-align: left; margin-bottom: 36px;">Interfaz GEE</p>
<p class="rSensing-content-text" style="font-size: 20px; margin: 0;">La plataforma de Google Earth Engine ha sido adaptada con una interfaz para la obtención de imágenes satelitales y aplicación de índices de detección de agua.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<div style="height: 80%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 100%; width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<!--<p class="rSensing-title-blue-text">Riverbox<span style="color: #333333; margin-bottom: 36px; "></span> </p>-->
<p class="rSensing-title-blue-text" style="color: #575756; text-align: left; margin-bottom: 36px;">Riverbox</p>
<p class="rSensing-content-text" style="font-size: 20px;">El Toolbox permite realizar el pre procesamiento de imágenes satelitales para la obtención de una capa vectorial correspondiente al río y su línea central.</p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Chicago" width="1100" height="500">-->
<div style="height: 100%; width: 100% ;display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
<!--<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">-->
<div style="height: 80%; width: 50%;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-4.png" alt="Los Angeles" width="1100" height="500">
</div>
<div style="height: 50%; width: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<!--<p style="color: black">asda</p>-->
<div style="height: 100%; width: 80%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;">
<p class="rSensing-title-blue-text" style="color: #575756; text-align: left; margin-bottom: 36px;">MStaT – Meander Statistics Toolbox</p>
<!--<p class="rSensing-title-blue-text">MStaT – Meander Statistics Toolbox<span style="color: #333333; margin-bottom: 36px; "></span> </p>-->
<p class="rSensing-content-text" style="font-size: 20px;">MStat es una herramienta que permite la caracterización de ríos meándricos mediante la cuantificación de la longitud de onda, amplitud, sinuosidad y curvatura del canal.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" style="left: -15%;" href="#demo" data-slide="prev" onclick="plusSlidesSoftware(-1)">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" style="right: -15%;" href="#demo" data-slide="next" onclick="plusSlidesSoftware(1)">
<span class="carousel-control-next-icon"></span>
</a>
<!--<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>-->
</div>
<!--<ul class="carousel-indicators">-->
<!-- Indicators -->
<!--<div style="position: relative; width: 100%; padding: 10px 10px; margin-bottom: 20px;">
<ul class="ul_carousel_indicators_software">
<li data-target="#demo" data-slide-to="0" class="li_carousel_indicators_software" onclick="currentSlidesSoftware(1)"></li>
<li data-target="#demo" data-slide-to="1" class="li_carousel_indicators_software" onclick="currentSlidesSoftware(2)"></li>
<li data-target="#demo" data-slide-to="2" class="li_carousel_indicators_software" onclick="currentSlidesSoftware(3)"></li>
</ul>
</div>-->
<!--script-->
<!--<script>
var softwareSlideIndex = 1;
showSlidesSoftware(softwareSlideIndex);
function plusSlidesSoftware(n) {
showSlidesSoftware(softwareSlideIndex += n);
}
function currentSlidesSoftware(n) {
showSlidesSoftware(softwareSlideIndex = n);
}
function showSlidesSoftware(n) {
var i;
var slidesSoftware = document.getElementsByClassName("carousel-item");
var dotsSoftware = document.getElementsByClassName("li_carousel_indicators_software");
if (n > slidesSoftware.length) {softwareSlideIndex = 1}
if (n < 1) {softwareSlideIndex = slidesSoftware.length}
/*for (i = 0; i < slidesSoftware.length; i++) {
slidesSoftware[i].style.display = "none";
}*/
for (i = 0; i < dotsSoftware.length; i++) {
dotsSoftware[i].className = dotsSoftware[i].className.replace("activeSoftware", "");
}
/*slidesSoftware[softwareSlideIndex-1].style.display = "block";*/
dotsSoftware[softwareSlideIndex-1].className += " activeSoftware";
}
/*function showSlidesSoftware(n) {
var i;
var slidesAnabranching = document.getElementsByClassName("mySlidesAnabranching");
var dotsSoftware = document.getElementsByClassName("li_carousel_indicators_software");
// if (n > slidesAnabranching.length) {anabranchingSlideIndex = 1}
// if (n < 1) {anabranchingSlideIndex = slidesAnabranching.length}
/!*for (i = 0; i < slidesAnabranching.length; i++) {
slidesAnabranching[i].style.display = "none";
}*!/
for (i = 0; i < dotsSoftware.length; i++) {
dotsSoftware[i].className = dotsSoftware[i].className.replace("activeSoftware", "");
}
// slidesAnabranching[anabranchingSlideIndex-1].style.display = "block";
dotsSoftware[anabranchingSlideIndex-1].className += " activeSoftware";
}*/
/*var dots = document.getElementsByClassName("meandricBoxLabel");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" activeRiver", "");
}*/
/*------------------*/
/*var dots = document.getElementsByClassName("li_carousel_indicators_software");
/!*if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}*!/
for (i = 0; i < slides.length; i++) {
if (dots[i].className === 'active') {
dots[i].className = dots[i].className.replace("activeSoftware", "");
dots[i].className += " activeSoftware";
}
}*/
var myVar = setInterval(myTimer, 1000);
function myTimer() {
/*var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();*/
var car_item = document.getElementsByClassName("carousel-item");
var dots = document.getElementsByClassName("li_carousel_indicators_software");
/*if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}*/
var i;
for (i = 0; i < car_item.length; i++) {
console.log("a");
if (car_item[i].className === " active") {
console.log("ga");
dots[i].className = dots[i].className.replace("activeSoftware", "");
dots[i].className += " activeSoftware";
}
}
}
/*var dots = document.getElementsByClassName("li_carousel_indicators_software");
/!*if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}*!/
for (i = 0; i < slides.length; i++) {
if (dots[i].className === 'active') {
dots[i].className = dots[i].className.replace("activeSoftware", "");
dots[i].className += " activeSoftware";
}
}*/
/*for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" activeRiver", "");
}*/
</script>-->
<!---->
<!--<div style="position: relative; width: 100%; padding: 10px 20px; margin: 20px;">
<ul class="ul_carousel">
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(1)">Ancho Promedio</span>
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(2)">Sinuosidad</span>
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(3)">Erosión - Deposición</span>
<span class="anabranchingBoxLabel" onclick="currentSlidesSoftware(4)">Métricas de islas</span>
<!–<li data-target="#demo_0" data-slide-to="3" class="li_carousel">Longitud del meandro</li>
<li data-target="#demo_0" data-slide-to="4" class="li_carousel">Longitud de la onda</li>–>
</ul>
</div>-->
</div>
<!--right arrow-->
<!--<div style="width: 10%; display: flex; flex-direction: column; justify-content: center; align-items: center;">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/right-arrow.png" style=" height: auto; width: 70%" >
</div>-->
</div>
</div>
<!--<div style="width: 35%;">
<!–<p class="rSensing-title-blue-text">Descripción</p>–>
</div>-->
</div>
<!--<div id="image-carousel" class="carousel-container">
<div class="cuadro1" id="scrolling-image-1" style="height: 100%; width: 100%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/DSC_0308.jpg" style=" width: 58vw; height: 100%; object-fit: cover;" >
</div>
<div class="cuadro1" id="scrolling-image-2" style="height: 100%; width: 100%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/river7.png" style=" width: 58vw; height: 100%; object-fit: cover;" >
</div>
<div class="cuadro1" id="scrolling-image-3" style="height: 100%; width: 100%">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/DSC_0308.jpg" style=" width: 58vw; height: 100%; object-fit: cover;" >
</div>
</div>-->
</div>
</div>
<!--////////////////////-->
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
<!--<div style="width: 70vw;">
<div id="demo" class="carousel slide" data-ride="carousel">
<!– Indicators –>
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!– The slideshow –>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-3.png" alt="Los Angeles" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-3.png" alt="Chicago" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/gota-background-3.png" alt="New York" width="1100" height="500">
</div>
</div>
<!– Left and right controls –>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>-->
<!-- Footer Section -->
<div id="Footer">
<div class="footer-top-container">
<p class="footer-text" data-i18n="footer_address">Jr. Medrano Silva 165 Barranco</p>
<p class="footer-text" data-i18n="footer_phone_annex">P. (01) 2305020 Anexo 4295</p>
<p class="footer-text" data-i18n="footer_web">W. http://www.cita.utec.edu.pe/</p>
<p class="footer-text" data-i18n="footer_mail">C. cita@utec.edu.pe</p>
<div class="row-flex">
<div class="footer-logo-container" >
<a href="https://www.facebook.com/CITAUTEC/" target="_blank"><img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/facebook_circle_gray.png" width="100%" height="100%"></a>
</div>
<div class="footer-logo-container">
<a href="https://www.youtube.com/channel/UCwC0Nzlv29aYXlZSMwXqgqw" target="_blank"><img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/youtube_circle_gray.png" width="100%" height="100%" ></a>
</div>
<div class="footer-logo-container">
<a href="https://twitter.com/CITA_UTEC" target="_blank"><img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/twitter_circle_gray.png" width="100%" height="100%" ></a>
</div>
<div class="footer-logo-container">
<a href="https://www.instagram.com/cita_utec/" target="_blank"><img src="https://citadancingrivers.s3-us-west-1.amazonaws.com/img/instagram_circle_gray.png" width="100%" height="100%" ></a>
</div>
</div>
</div>
<div class="footer-bottom-container">
<p class="footer-text" data-i18n="footer_copy-logo">Copyright © 2019 CITA-UTEC.</p>
<span> </span>
<span class="footer-text" data-i18n="footer_copyright">All rights reserved.</span>
</div>
</div>
</body>
</html>