@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;
}
.conten{
	overflow-y: hidden;
}
#pie_pagina{
	background-color: #4c94ed;

}
.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;
}

#navIcon:before {

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

}
#contenMe{
    position: relative;
    width: 100%;    
}
body{
    position: relative;
    z-index: -100;
}
main{
    position: relative;
    z-index: -99;
}
#figura{
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
    position: absolute;
    clip-path: polygon(55% 10%, 100% 60%, 100% 100%, 0 100%, 0 60%);
    z-index: -3;
}
#fondoPoligon{
    
    background-image: url(css_images/about_jumbo.webp);
    background-size:  auto;
    display: flex;
    position: relative;
    background-attachment: fixed;   
    background-position-y: 0px;
    z-index: -2;
}
.poligono{
    opacity: 0;
    animation-name: fadeInDown;
    animation-delay: 0.5s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
}

button.mapa span{
    font-size: 25px;
}
.sucursal{
    border-radius: 25px;
}
.sucursal img{
    border-radius: 25px 25px 0 0;
}
#formBack{
    
    border-radius: 100px;
    box-shadow: 4px 4px 10px;
    -webkit-animation-delay:1s ;
    animation-delay:1s ;
    z-index: -1;
}

[data-anim]{
    opacity: 0;
}

#formaContacto .ftitle{    
    opacity: 0.5;
    width: 100%;
    
}

#formaContacto .form-row:nth-of-type(even){
    opacity: 0;
    border: 1px solid ;
    border-color: #f8f9fa;
    border-top:0px;
    transition: border-color 0.5s;
    border-radius: 0px 0px 10px 10px;
}
#formaContacto .form-row:nth-of-type(odd){

    opacity: 1;
    border: 1px solid ;
    border-color: #f8f9fa;
    border-bottom:0px;
    transition: border-color 0.5s;
    border-radius: 10px 10px 0px 0px;

}
#formaContacto .form-row.form-error.sacude{
    animation-name: shakeX;
    -webkit-animation-name: shakeX;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-fill-mode: forwards;    
    -webkit-animation-fill-mode: forwards;
    
}
#formaContacto .form-row.form-error{

    border-color: #dc3545;

}
#formaContacto input:not(.A-scape){
    text-transform: capitalize;    
}
.babay{
    animation-name: babay;
    -webkit-animation-name: babay;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    
}
@keyframes  babay{
    from{opacity: 1;}    
    to{opacity: 0;}
}
@-webkit-keyframes babay{
    from{opacity: 1;}
    to{opacity: 0;}
}


@-webkit-keyframes fadeInDown {
    from {
    
    -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 shakeX {
    from,
    to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    
    }
    
    10%,
    30%,
    50%,
    70%,
    90% {
    -webkit-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0);
    }
    
    20%,
    40%,
    60%,
    80% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
    }
    }
    @keyframes shakeX {
    from,
    to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
        
    }
    
    10%,
    30%,
    50%,
    70%,
    90% {
    -webkit-transform: translate3d(-2px, 0, 0);
    transform: translate3d(-2px, 0, 0);
    }
    
    20%,
    40%,
    60%,
    80% {
    -webkit-transform: translate3d(2px, 0, 0);
    transform: translate3d(2px, 0, 0);
    }
    }
    .sacudeX {
    -webkit-animation-name: shakeX;
    animation-name: shakeX;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;        
    }
    @-webkit-keyframes fadeinUp {
    from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
    }
    
    to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
    }

    
    @keyframes fadeinUp {
    from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
    }
    
    to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
    }

    .fadeinUpB {
    -webkit-animation-name: fadeinUp;
    animation-name: fadeinUp;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    
    }

    @-webkit-keyframes fadeinup {
    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 fadeinup {
    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);
    }
    }

    @-webkit-keyframes fuera {
    from {
    opacity: 1;
    }
    
    50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
    }
    
    to {
    opacity: 0;
    }
    }
    @keyframes fuera {
    from {
    opacity: 1;
    }
    
    50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
    }
    
    to {
    opacity: 0;
    }
    }

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

    #estatusEnvio .col{
        opacity: 0;
    }

    .fuera {
    -webkit-animation-name: fuera;
    animation-name: fuera;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    
    }
    

    .fadeinUp {
    -webkit-animation-name: fadeinup;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-name: fadeinup;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    }
    
    .adios {        
        -webkit-animation-name: fadeout;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;        
        animation-name: fadeout;
        animation-duration: 1s;
        animation-fill-mode: forwards;        
        position: absolute;
        z-index: -100;
    }
    .hola{
        
        -webkit-animation-name: fadeinup;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
        animation-name: fadeinup;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        
    }

    #estatusEnvio .col i.bi{
        font-size: x-large;
    }