/* CSS RESET */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*Empieza CSS general proyecto Lina Useche */
* {
  box-sizing: border-box;
}

body {
  background-color: whitesmoke;
  width: 100%;
  height: 100%;
}


/* loading */

.loading {
		display: flex;
		justify-content: center;
		align-items: center; 
    position: fixed;
    z-index: 10001;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    background: #232240;
    font-family: 'Fira Mono', monospace;
    font-size: 72px;
		text-align: center;
}

.loading-content {
		display: inline-block;
	  margin: 0 auto;
}

.loading-text {
		display: inline-block;
	  margin: 0 auto;
	  color: whitesmoke;
		text-align: center;
		vertical-align: middle;
    animation: glitch 1s linear infinite;
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
}

.loading-text:before,
.loading-text:after{
  content: attr(title);
  position: absolute;
  left: 0;
}

.loading-text:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg); 
  }
}

.loading-text:after{
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg); 
  }
}


.loading-bar {
    position: absolute;
    bottom: 48px;
    left: calc(50% - 70px);
    height: 4px;
    width: 140px;
    background-color: #201e1e;
    overflow: hidden;
}



/*seccion 1 inicio*/
.sec1 {
  width: 100%;
  height: 800px;
}

.sec1 #videoFondo {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -4;
}

/*.sec1 #imgFondo {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -2;
}*/

.sec1 #fondoMov {
  z-index: -2;
  display: none;
}

.sec1 #videoFondoMov {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  display: none;
}

.sec1 .header {
	position: relative;
  width: 100%;
  height: 150px;
  font-family: "Roboto", sans-serif;
  color: whitesmoke;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size: 2vw;
  letter-spacing: 1px;
  word-spacing: -5px;
}

/*
.sec1 .header div.menu {
  width: 5%;
  display: flex;
  margin: 0 auto;
  cursor: pointer;
  text-align: center;
}

.sec1 .header div.menu .material-icons {
  font-size: 5vw;
}

.sec1 .header #idioma {
  display: flex;
  float: right;
}
*/

.sec1 .header div.menu {
    width: 100%;
    display: grid;
    grid-template-columns: 90% 10%;
    margin: 0 auto;
    cursor: pointer;
    text-align: center;
}

.sec1 .header div.menu .material-icons {
    font-size: 50pt;
    grid-column: 1/2;
    padding-left: 11%;
}

.sec1 .logo {
  width: 25%;
  display: block;
  margin: auto;
  padding: 1%;
}

.sec1 .logo h1 {
  display: none;
}

.sec1 .sdown {
  width: 100%;
  padding-top: 10%;
  text-align: center;
}

.sdown i {
  width: 4%;
  display: block;
  margin: auto;
  animation-name: chevron1;
  animation-duration: 1s;
  animation-delay: 3s;
  animation-iteration-count: 3;
}

/*Keyframes*/

@keyframes chevron1 {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0px);
  }
}

.sec2 {
  background-color: whitesmoke;
  width: 100%;
  height: 1080px;
  position: relative;
}

.sec2 .titular {
  width: 30%;
  font-size: 4vw;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  position: absolute;
  left: 15%;
  top: 10%;
  color: #333366;
}

.sec2 .subtitular {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  font-family: "Roboto Mono", monospace;
  font-size: 2vw;
  color: #ff3300;
  font-weight: 500;
  float: left;
  margin-top: 40%;
}

.sec2 .container {
  width: 90%;
  max-width: 900px;
  height: 40%;
  margin-left: 25%;
  overflow: hidden;
  position: relative;
  top: 36%;
}

.sec2 .container .slider {
  width: 400%;
  height: 100%;
  display: flex;
  text-align: center;
  margin-left: -100%; /*Para que enfoque la priemra imagen en el carrusel*/
}

#slide1 {
  width: 100%;
  height: 100%;
  background-image: url(/resources/media/img/SE.jpg);
  background-size: 500px auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: whitesmoke;
  background-blend-mode: luminosity;
  position: relative; /*funciona el absolute abajo*/
}

#slide1 .servicio a {
  text-decoration: none;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 2.5vw;
  color: #ff3300;
  text-align: left;
  position: absolute;
  right: 5%;
  top: 3%;
}

#slide1 .descrip {
  width: 70%;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  color: #333366;
  font-size: 1.5vw;
  position: absolute;
  bottom: 0%;
  left: 22%;
  text-align: left;
}

#slide2 {
  width: 100%;
  height: 100%;
  background-image: url(/resources/media/img/App-mov.jpg);
  background-size: 500px auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: whitesmoke;
  background-blend-mode: luminosity;
  position: relative; /*funciona el absolute abajo*/
}

#slide2 .servicio a {
  text-decoration: none;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 2.5vw;
  color: #ff3300;
  text-align: left;
  position: absolute;
  right: 12%;
  top: 3%;
}

#slide2 .descrip {
  width: 70%;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  color: #333366;
  font-size: 1.5vw;
  position: absolute;
  bottom: 0%;
  left: 22%;
  text-align: left;
}

#slide3 {
  width: 100%;
  height: 100%;
  background-image: url(/resources/media/img/BI.jpg);
  background-size: 500px auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: whitesmoke;
  background-blend-mode: luminosity;
  position: relative; /*funciona el absolute abajo*/
}

#slide3 .servicio a {
  text-decoration: none;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 2.5vw;
  color: #ff3300;
  text-align: left;
  position: absolute;
  right: 9%;
  top: 3%;
}

#slide3 .descrip {
  width: 70%;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  color: #333366;
  font-size: 1.5vw;
  position: absolute;
  bottom: 0%;
  left: 22%;
  text-align: left;
}

#slide4 {
  width: 100%;
  height: 100%;
  background-image: url(/resources/media/img/Data.jpg);
  background-size: 500px auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: whitesmoke;
  background-blend-mode: luminosity;
  position: relative; /*funciona el absolute abajo*/
}

#slide4 .servicio a {
  text-decoration: none;
  cursor: pointer;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  font-size: 2.5vw;
  color: #ff3300;
  text-align: left;
  position: absolute;
  right: 12%;
  top: 3%;
}

#slide4 .descrip {
  width: 70%;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 600;
  color: #333366;
  font-size: 1.5vw;
  position: absolute;
  bottom: 0%;
  left: 22%;
  text-align: left;
}

.sec2 .fas.fa-chevron-right {
  font-size: 3vw;
  color: #9999ff;
  width: 3%;
  position: absolute;
  cursor: pointer;
  bottom: 0;
  right: 0;
  z-index: 10;
}

.sec2-2 {
  background-color: whitesmoke;
  width: 100%;
  height: 500px;
  position: relative;
}

.sec2-2 .lugar i.fas.fa-map-marker-alt {
  font-size: 4vw;
  color: #333366;
  width: 5%;
  position: absolute;
  top: 10%;
  left: 25%;
  animation-name: lugar;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes lugar {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-40px);
  }
  100% {
    transform: translateY(0px);
  }
}

.sec2-2 .lugartxt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 2vw;
  font-weight: 500;
  color: #333366;
  width: 15%;
  position: absolute;
  left: 19%;
  top: 25%;
  text-align: center;
}

.sec2-2 .mundo i.fas.fa-globe-americas {
  font-size: 4vw;
  color: #333366;
  width: 3.9%;
  position: absolute;
  top: 50%;
  right: 26%;
  animation-name: mundo;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes mundo {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.sec2-2 .mundotxt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 2vw;
  font-weight: 500;
  color: #333366;
  width: 15%;
  position: absolute;
  right: 21%;
  top: 65%;
  text-align: center;
}

.sec3 {
  width: 100%;
  height: 250px;
  background-image: url(/resources/media/img/footer-gr1.png);
  display: block;
  position: relative;
}

.sec3 .material-icons {
  font-size: 6vw;
  color: #333366;
  position: absolute;
  left: 28%;
  top: 40%;
}

.sec3 a {
  min-width: 50%;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8vw;
  font-weight: 400;
  position: absolute;
  right: 10%;
  top: 35%;
  color: #333366;
  text-decoration: none;
}

.sec3 a:hover {
  font-style: italic;
}

/*Media queries MOVIL SECCION1*/

@media screen and (max-width: 900px) {
	.sec1 {
		height: 100vh;
	}
	
  .sec1 .header {
    height: 20%;
  }

  .sec1 #videoFondo {
    display: none;
  }

  .sec1 #fondoMov {
    width: 100%;
    height: 100vh;
    display: block;
    position: absolute;
  }

  .sec1 #videoFondoMov {
    display: flex;
    width: 100%;
  }

  .sec1 .header p.menu .material-icons {
    font-size: 15vw;
  }

  .sec1 .header p.menu {
    width: 22%;
    display: block;
    margin: 0 auto;
  }

  .sec1 .header span {
    visibility: hidden;
  }

  .sec1 .logo {
    width: 50%;
    height: 35%;
    display: block;
    margin: auto;
    margin-top: 15%;
    background-image: url(/resources/media/img/logo-movil-bl.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: 0%;
    position: relative;
    text-align: center;
  }

  .logo img {
    visibility: hidden;
  }

  .sec1 .logo h1 {
    display: inline;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    color: whitesmoke;
    letter-spacing: 6px;
    position: relative;
    bottom: -50%;
    font-size: 8vw;
  }

  .sec1 .sdown {
    width: 100%;
    padding-top: 20%;
  }

  .sdown i {
    width: 12%;
  }
}

@media only screen and (min-device-height: 812px) and (max-device-height: 926px) and (orientation: portrait) {
  .sec1 #fondoMov {
    width: 100%;
    height: 150vh;
    display: inline;
    overflow: hidden;
  }

  .sec1 #imgFondoMov {
    display: flex;
    width: 122%;
  }

  .sec1 .logo {
    height: 40%;
    margin-top: 25%;
  }

  .sec1 .sdown {
    padding-top: 40%;
  }
}

/*Media queries MOVIL SECCION2*/

@media screen and (max-width: 900px) {
  .sec2 {
    background-color: whitesmoke;
    width: 100%;
    height: 700px;
    position: relative;
  }

  .sec2 .titular {
    width: 60%;
    font-size: 10vw;
    display: block;
    margin: 20% auto;
    position: relative;
    left: 0;
    top: 0;
  }

  .sec2 .subtitular {
    display: none;
  }

  .sec2 .container {
    width: 75%;
    height: 40%;
    margin: 30% auto;
    top: 0;
  }

  .sec2 .container .slider {
    width: 400%;
    height: 75%;
    margin: 10% auto;
  }

  #slide1 {
    background-size: 300px auto;
  }

  #slide1 .servicio a {
    font-size: 7vw;
    top: -10%;
  }

  #slide1 .descrip {
    width: 70%;
    font-size: 3.5vw;
    line-height: 1.2;
    left: 1%;
    bottom: -12%;
	padding-top: 2%;
  }

  #slide2 {
    background-size: 300px auto;
  }

  #slide2 .servicio a {
    font-size: 7vw;
    top: -10%;
  }

  #slide2 .descrip {
    width: 70%;
    font-size: 3.5vw;
    line-height: 1.2;
    left: 1%;
    bottom: -12%;
	padding-top: 2%;
  }

  #slide3 {
    background-size: 300px auto;
  }

  #slide3 .servicio a {
    font-size: 7vw;
    top: -10%;
  }

  #slide3 .descrip {
    width: 70%;
    font-size: 3.5vw;
    line-height: 1;
    left: 1%;
    bottom: -12%;
	padding-top: 2%;
  }

  #slide4 {
    background-size: 300px auto;
  }

  #slide4 .servicio a {
    font-size: 7vw;
    top: -10%;
  }

  #slide4 .descrip {
    width: 70%;
    font-size: 3.5vw;
    line-height: 1.2;
    left: 1%;
    bottom: -12%;
	padding-top: 2%;
  }

  .sec2 #flecha .fas.fa-chevron-right {
    font-size: 8vw;
    color: #9999ff;
    width: 5%;
    right: 3%;
  }
}

/*Media queries MOVIL SECCION-2-2*/
@media screen and (max-width: 900px) {
  .sec2-2 {
    height: 250px;
  }

  .sec2-2 .lugar i.fas.fa-map-marker-alt {
    font-size: 8vw;
    top: 10%;
    left: 25%;
  }

  .sec2-2 .lugartxt {
    font-size: 3.3vw;
    width: 25%;
    left: 15%;
  }

  .sec2-2 .mundo i.fas.fa-globe-americas {
    font-size: 8vw;
    width: 8%;
    top: 50%;
    right: 26%;
  }

  .sec2-2 .mundotxt {
    font-size: 3.3vw;
    width: 25%;
    right: 18%;
  }
}

/*Media queries MOVIL SECCION-2-2*/
@media screen and (max-width: 900px) {
  .sec3 {
    display: none;
  }
}