@charset "UTF-8";

@font-face{
	font-family: filefont;
	src: url(css_text/BauhausRegular.ttf);	
}
/*establece la fuente para la barra de navegacion top*/
html{
	overflow-x: hidden;
}
#pie_pagina{
	background-color: #4c94ed;

}
.dl-1{
    animation-delay: 0.5s;
}
.dl-2{
    animation-delay: 1s;
}
.dl-3{
    animation-delay:2s;
}
.dl-4{
    animation-delay: 3s;
}

[data-anim]{
	animation-duration: 1s;
	opacity: 0;
}
.barra-nav{	
    opacity: 0;
      -webkit-animation-delay: 0.5s;
      -webkit-animation-duration: 1s;
      animation-delay: 0.1s;
      animation-duration: 1s;
}
.navbar{
	font-family:filefont;

}

#navFile{
	background-color: #4c94ed;

}
/* Cambia estilo de links de top bar al hacer hover */
 #navbarSupportedContent li:hover{
	border-style: solid;
	border-color: white;	
	border-width: 0px;
	border-bottom-width: 1px;
	font-weight: bold;
}
/*agranda y engruesa letras de top bar*/
#navbarSupportedContent li{
	font-size: 135%;
	font-weight: 500;
}

#jumboAbout{
    background-image: url(css_images/about_jumno_.webp);
    background-position: top;
    background-size: cover;    
    animation-duration: 1.5s;
    
}
#textHead{
	opacity: 0;
}

.dpadre{
	position: relative;
	width: 100%;
	height: 200px;
	background-color: transparent;
}

div.dpadre.reves{
	transform: rotate(180deg);
}


.divisor{
	width: 0;
	height: 0;
	border-top: 200px solid transparent;
	position:absolute;
    right:0;
	top: 0;
	border-right: 800px ridge rgb(134, 181, 241);
	border-bottom: 0px solid white;    
}

.fondo{
	
	background-image: url(css_images/qsomos.png);			
	background-position-y: -100px;
	background-size: auto;
	background-repeat: repeat-y;
	background-attachment: fixed;	
	
}
.logoHead{

	filter: drop-shadow(10px 15px 3px);

}
  div.separador div.flechaA	 {
	content: '';
	position: absolute;
	top: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 30px 30px 30px;
	border-color: transparent transparent #004992 transparent;
	right: 0;
	transform: translateY(-100%);	
  }
.separador {
	position: relative;
	background: #004992 ;
	height: 5vh;
  }
  
  div.separador div.flechaB {
	content: '';
	position: absolute;
	bottom: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 0 30px;
	border-color: #004992 transparent transparent transparent;
	left: 0;
	transform: translateX(-50%) translateY(100%);	
  }


section:nth-child(odd):not(section:last-of-type) .carousel{

	box-shadow: 20px 20px 20px;
	
	
}
section:nth-child(even):not(section:last-of-type) .carousel{

	box-shadow: -20px 20px 15px;
	
}

.img-desc-id,.img-desc-id>div,.img-desc-id>div>div {
	border-radius: 100px;
}

.jumboHead{
    text-shadow: 4px 4px 3px black;
}
#navIcon:before {

	content: url(css_images/logo16.ico);
	position: relative;
	top: 7px;

}

.icon-promesa{
	width: 150px;
	height: 150px;
}

@-webkit-keyframes fadeInBottomLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInBottomLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fibl {
-webkit-animation-name: fadeInBottomLeft;
animation-name: fadeInBottomLeft;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-fill-mode: forwards;
}


@-webkit-keyframes fadeInBottomRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInBottomRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fibr {
-webkit-animation-name: fadeInBottomRight;
animation-name: fadeInBottomRight;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}

to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes backInDown {
0% {
-webkit-transform: translateY(-1200px) scale(0.7);
transform: translateY(-1200px) scale(0.7);
opacity: 0.7;
}

80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backInDown {
0% {
-webkit-transform: translateY(-1200px) scale(0.7);
transform: translateY(-1200px) scale(0.7);
opacity: 0.7;
}

80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}

100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.bkid {
-webkit-animation-name: backInDown;
animation-name: backInDown;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.back-o{
	background-color: #f8f9fa;
	background-image:  url(css_images/corriendo.webp);
	background-size: 150px;
	background-position: 0px;	
}

.back-e{
	background-color: white;
	background-image:  url(css_images/corriendo_inv.webp);
	background-size: 150px;
	background-position: 0px;
	
}

.back-anim{	
	opacity: 1;	
	animation-duration: 20s;
	-moz-animation-duration: 20s;
	-webkit-animation-duration: 20s;
	animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
	animation-iteration-count: 100;
	
}

@keyframes back-move {
  from {background-position: left;}
  to {background-position:  right;}
}
@-webkit-keyframes back-move {
  from {background-position: left;}
  to {background-position: right;}
}
@-moz-keyframes back-move {
  from {background-position: left;}
  to {background-position: right;}
}
@keyframes back-move-r {
  from {background-position: right;}
  to {background-position:  left;}
}
@-webkit-keyframes back-move-r {
  from {background-position: right;}
  to {background-position: left;}
}
@-moz-keyframes back-move-r {
  from {background-position: right;}
  to {background-position: left;}
}
.aux_sep_anim{
	animation-duration: 1.5s;
	animation-delay: 0.1s;
	animation-fill-mode: forwards;
	-moz-animation-duration: 1.5s;
	-moz-animation-delay: 0.1s;
	-moz-animation-fill-mode: forwards;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-delay: 0.1s;
	-webkit-animation-fill-mode: forwards;
}
.sep_iz{
	animation-name: sep_iz;
	-moz-animation-name: sep_iz;
	-webkit-animation-name: sep_iz;
	
}
.sep_der{

	animation-name: sep_der;	
	-moz-animation-name: sep_der;
	-webkit-animation-name: sep_der;

}

@keyframes sep_iz {
	from {left : 0}
	to {left:30%}
}
@keyframes sep_der {
	from {right : 0}
	to {right:30%}
}
@-webkit-keyframes sep_iz {
	from {left : 0}
	to {left:30%}	
}
@-webkit-keyframes sep_der {
	from {right : 0}
	to {right:30%}
}
@-moz-keyframes sep_iz {
	from {left : 0}
	to {left:30%}
}
@-moz-keyframes sep_der {
	from {right : 0}
	to {right:30%}
}