<template>
    <footer id="footer">
        <div class="separador"></div>
        <div class="container p-3">
            <div class="cont-text-foo text-white text-center">
                <div class="d-flex justify-content-between flex-wrap">
                    <div class="my-auto">
                        <a href="#">
                            <img src="../img/logo.png" alt="" style="height:50px;">
                        </a>
                    </div>
                    <div class="d-flex flex-column align-items-center">
                        <h6 class="text-center mb-2"><b>CONTACTANOS</b></h6>
                        <div class="d-flex">
                            <font-awesome-icon icon="map-marker-alt" class="text-white mr-2 footer-icon" />
                            <a href="https://www.google.com.mx/maps/place/Fes+Acatlan/@19.4839532,-99.2486563,17z/data=!3m1!4b1!4m5!3m4!1s0x85d2030fd8a9a8c1:0x1f9446a4f2a37e53!8m2!3d19.4839482!4d-99.2464676" target="_blank" class="text-white"><p>Ubicación</p></a>
                        </div>

                        <div class="d-flex my-2">
                            <font-awesome-icon icon="phone-alt" class="text-white mr-2 footer-icon" />
                            <p>Telefono</p>
                        </div>

                        <div class="d-flex">
                            <font-awesome-icon icon="envelope" class="text-white mr-2 footer-icon" />
                            <p>Correo</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <h6 class="mb-2"><b>INFORMACIÓN DEL SITIO</b></h6>
                        <div class="d-inline-block">
                            <a href="#" class="text-white"><p><b>Políticas de compra</b></p></a>
                            <a href="#" class="text-white"><p class="my-2"><b>Manual de compra</b></p></a>
                            <a href="#" class="text-white"><p><b>Aviso de privacidad</b></p></a>
                        </div>
                    </div>
                </div>

                <hr style="border-color: #fff;" class="my-3">
                <p>
                Hecho en México, todos los derechos reservados 2020.
                <br />
                Esta página puede ser reproducida con fines no lucrativos,
                siempre y cuando no se mutile, se cite la fuente
                <br />
                completa y su dirección electrónica. De otra forma, requiere
                permiso previo por escrito de la institución.
                </p>
            </div>
        </div>
    </footer>
</template>

<script>
export default {
    
}
</script>

<style scoped>
* {
    margin: 0px;
    box-sizing: border-box;
    padding: 0px;
}
h6 {
    font-size: 14px;
}
/* #footer {
    bottom: 0px;
    position: absolute;
    width: 100%;
} */
.separador {
    background-color: #bb8800;
    height: 1rem;
}

.cont-text-foo {
    font-size: 10px;
}
footer {
    background-color: #1b3d70;
}
.footer-icon {
    font-size: 13px;
}
</style>
