/*FUENTES*/
@font-face{
	font-family:"Montserrat";
	src:url('../fonts/style/Montserrat-Regular.woff2') format('woff2'),url('../fonts/style/Montserrat-Regular.woff') format('woff');
	font-weight:400;
}
@font-face{
	font-family:"Montserrat";
	src:url('../fonts/style/Montserrat-Bold.woff2') format('woff2'),url('../fonts/style/Montserrat-Bold.woff') format('woff');
	font-weight:700;
}
@font-face{
	font-family:"Montserrat";
	src:url('../fonts/style/Montserrat-Medium.woff2') format('woff2'),url('../fonts/style/Montserrat-Medium.woff') format('woff');
	font-weight:500;
}

/*OCULTAR ELEMENTOS*/
.visible-off{
    display: none;
}
/*****************************************************************************/
/*FONDO DESKTOP*/
.bg-desktop{
	background: url(../images/bg-desktop.png) repeat center top fixed;
}

/*FONDO VCARD*/
.bg-vc{
	width: 320px;
	min-height: 660px;
	margin-left: auto; 
	margin-right: auto;
}

/****************************************************************************/
/*CABECERA EFECTO DE OLA*/
.wave-color {
    width: 320px;
    height: 500px;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -50%);
    border-radius: 0px;
    overflow: hidden;
}
.wave-effect {
    width: 1000px;
    height: 1025px;
    position: absolute;
    top: -24%;
    left: 50%;
    margin-left: -500px;
    margin-top: -500px;
    border-radius: 40%;
    animation: wave 25s infinite linear;
}

/****************************************************************************/
/*CABECERA VCARD*/
.head-vc{
    padding-bottom: 0px; 
    margin-right: auto; 
    margin-left: auto;
}
.col-vc{
    padding-right: 0;
    padding-left: 0;
}
/*LOGO EMPRESA*/
.logo-vc{
    margin-top: 35px;
    margin-left: 20px; 
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
    style="z-index: 30;
}
/*FOTOGRAFIA*/
.photo-vc{
	width: 185px;
    height: 185px;
    border: 5px solid;
    border-top-right-radius: 600px; 
    border-top-left-radius: 600px; 
    border-bottom-right-radius: 600px; 
    border-bottom-left-radius: 600px;
    margin-top: 2px;
    position: absolute;
    z-index: 40;
}

/****************************************************************************/
/*NOMBRE*/
.name-vc{
    font-family: Montserrat;
    font-size: 28px;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: normal;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
/*PUESTO*/
.job-vc{
    font-family: Montserrat;
    font-size: 12px;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: normal;
    margin-top: -10px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.mt-80{
	margin-top: 80px;
}

/*ICONOS REDES SOCIALES*/
.social-icons{
	margin-top: 15px;
	height: 35px; 
	flex: unset;
}
.social-icons i{
	margin-top: 3px;
	font-size: 32px;  
	border-radius: 3px; 
	background-color: #fff; 
	padding-right: 2px; 
	padding-left: 2px;
}
/*COLORES ICONOS REDES SOCIALES*/
/*icono facebook*/
.face-color{
	color: #4267b2;	
}
/*icono linkedin*/
.lin-color{
	color: #0077b5;
}
/*icono twitter*/
.twitt-color{
    color: #1da1f2;
}
/*icono instragram*/
.inst-color{
    color: #ec4752;
}
/*icono whatsapp*/
.whats-color{
    color: #00bc68;
}

/****************************************************************************/
/*FONDO CONTACTO*/
.bg-contact{
	border-radius: 3px;
	padding-bottom: 8px;
}
/*TITULO CONTACTO*/
.title-contact{
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 500;
    line-height: 1rem;
    letter-spacing: normal;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 0px;
}
/*POSICION DE ELEMENTOS*/
.pb-3{
	padding-bottom: 3px !important;
}
.pt-8{
    padding-top: 8px !important;
}
.mt-3{
	margin-top: 3px !important;
}
.arrow-vc{
	margin-top: 10px; 
	margin-left: -5px;
}
.ml-10{
    margin-left: 10px;
}
/*ya no esta en uso*/
.arrow-vc-qr{
	margin-top: 25px; 
	margin-left: 2px;
}
/*BOTONES CONTACTO*/
.btn-primary {
    border: 1px solid;
    line-height: 1;
    padding-top: 6px;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.btn-primary:hover{
    color: #fff;
	background-color: rgba(0,0,0,0.6);
	border: 1px solid #fff;
}
.btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
	background-color: rgba(0,0,0,0.6);
	border: 1px solid #fff;
}
.btn-primary:focus {
    color: #fff;
    border-color: #fff;
}
/*texto botones de contacto*/
.btn-text{
    font-family: Montserrat;
    font-size: 12px;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: normal;
    text-align: left;
    margin-top: 10px;
    margin-left: 5px;
}
/*BOTON VCF*/
.col-vcf{
    padding-top: 4px !important;
    padding-right: 3px !important;
    padding-left: 30px !important;
}
/*BOTON QR*/
.col-qr{
    padding-top: 4px !important;
    padding-right: 30px !important;
    padding-left: 3px !important;
}
.btn-text-qr{
	font-family: Montserrat;
    font-size: 12px;
    font-weight: 400;
}

/****************************************************************************/
/*DIVISORES*/
.divider{
    padding-bottom: 30px; 
    padding-top: 30px;
}
.hr-one{
    border: 0.083em solid; 
    margin-right: 35px;
    margin-left: 35px; 
    z-index: 3;
}
.hr-two{
    border: 4px solid; 
    margin-right: 135px; 
    margin-left: 135px; 
    margin-top: -5px; 
    z-index: 4;
}
.hr-color{
    border: 1px solid;
}

/****************************************************************************/
/*RECUADRO BIO*/
.cont-area-vc{
	padding-left: 15px; 
	padding-right: 15px;
}
/*recuadro forma*/
.area-vc{
	border-radius: 3px; 
	padding-top: 10px;
}
/*texto*/
.txt-vc{
	font-family: Montserrat;
    font-size: 13px;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: normal;
}
.txt-color{
	font-family: Montserrat;
	font-size: 14px;
	font-style: italic;
}
/*sombra imagenes*/
.img-shadow{
    -webkit-filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

/****************************************************************************/
/*RECUADRO DIRECCION*/
.txt-location{
	font-family: Montserrat;
    font-size: 12px;
    font-weight: 400;
    line-height: 0;
    letter-spacing: normal;
}
.txt-title{
	font-family: Montserrat;
    font-size: 14px;
    font-weight: 700;
    line-height: 1rem;
    letter-spacing: normal;
}

/*****************************************************************************/
/*RECUADRO MAPA*/
.cont-map-vc{
	padding-top: 10px;
	padding-bottom: 10px;
}
.map-vc{
	width: 100%; 
	height: 300px;
}

/*****************************************************************************/
/*MODAL CODIGO QR*/
.modal{
    top: 5%;
}
.modal-vc{
    border: 3px solid; 
    border-radius: 3px;
}
.img-qr{
    border: 10px solid; 
    border-radius: 3px; 
    width: 320px;
}
.btn-modal{ 
    font-weight: 400; 
    border: 3px solid;
}
/*****************************************************************************/
/*ANIMACIONES*/
@keyframes wave {
    from { 
        transform: rotate(0deg);
    }
    from { 
        transform: rotate(360deg);
    }
}

@-webkit-keyframes fadeInDown{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,-100%,0);
    }
    to{
        opacity:1;
        -webkit-transform:translate3d(0,0,0);
    }
}
@keyframes fadeInDown{
    from{
        opacity:0;
        transform:translate3d(0,-100%,0);
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }
}
.fadeInDown{
    -webkit-animation-name:fadeInDown;
    animation-name:fadeInDown;
    animation-duration: 1.5s;
}


@-webkit-keyframes fadeInUp{
    from{
        opacity:0;
        -webkit-transform:translate3d(0,100%,0);   
    }
    to{
        opacity:1;
        -webkit-transform:translate3d(0,0,0);
    }
}
@keyframes fadeInUp{
    from{
        opacity:0;
        transform:translate3d(0,100%,0);        
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }
}
.fadeInUp{
    -webkit-animation-name:fadeInUp;
    animation-name:fadeInUp;
    animation-duration: 1.6s;
}


@-webkit-keyframes fadeInLeft{
    from{
        opacity:0;
        -webkit-transform:translate3d(-100%,0,0);   
    }
    to{
        opacity:1;
        -webkit-transform:translate3d(0,0,0);
    }
}
@keyframes fadeInLeft{
    from{
        opacity:0;
        transform:translate3d(-100%,0,0);        
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }
}
.fadeInLeft{
    -webkit-animation-name:fadeInLeft;
    animation-name:fadeInLeft;
    animation-duration: 2s;
}