Proyecto: CrediGo

<!DOCTYPE html>
<html>
    <head>
        <title>Inicio</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="css/slick.css" />
        <link rel="stylesheet" href="css/styles.css" />
        <link rel="stylesheet" href="css/responsive.css" />
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
        <script src="js/slick.min.js"></script>
    </head>
    <body>
        <!-- BEGIN HEADER -->
        <header>
            <div class="container container-width">
                <nav class="navbar navbar-expand-lg header-navbar">
                    <a class="navbar-brand" href="#">
                        <img src="img/logo.svg" alt="credigo" />
                    </a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Inicio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Como Funciona</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Nosotros</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Acceder</a>
                            </li>
                            <li class="nav-item">
                                <a class="btn-outline" href="#">Encuentra un Dealer</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>

        <!-- BEGIN FEATURED -->
        <section class="wrapper-featured">
            <div class="info-featured">
                <h1>¡Préstamos Inteligentes para todos!</h1>
                <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
                <a class="btn-fill" href="#">Encuentra un Dealer</a>
            </div>
            <div class="container">
                <div class="wrapper-logos">
                    <div class="item-logo"><img src="img/logo-1.png" alt="#" /></div>
                    <div class="item-logo"><img src="img/logo-2.png" alt="#" /></div>
                    <div class="item-logo"><img src="img/logo-3.png" alt="#" /></div>
                    <div class="item-logo"><img src="img/logo-4.png" alt="#" /></div>
                    <div class="item-logo"><img src="img/logo-5.png" alt="#" /></div>
                    <div class="item-logo"><img src="img/logo-1.png" alt="#" /></div>
                </div>
            </div>
        </section>

        <!-- BEGIN STEPS -->
        <section class="wrapper-steps">
            <div class="title-section">
                <small>En 5 pasos</small>
                <h2>Como Funciona</h2>
            </div>
            <div class="row-steps">
                <div class="item-step">
                    <span>01<small>Visita la tienda de <br> celulares</small></span>
                </div>
                <div class="item-step">
                    <span>02<small>Registrate con tu <br> facebook</small></span>
                </div>
                <div class="item-step">
                    <span>03<small>Escoge tu celular</small></span>
                </div>
                <div class="item-step">
                    <span>04<small>Elige tu plazo preferido</small></span>
                </div>
                <div class="item-step">
                    <span>05<small>Llevate tu celular</small></span>
                </div>
            </div>
        </section>

        <!-- BEGIN US -->
        <section class="wrapper-join">
            <div class="info-join">
                <h2>¿Aun no eres <br> dealer nuestro?</h2>
                <p> 
                    Lorem ipsum dolor sit amet, consectetuer 
                    adipiscing elit. Donec.
                    Nullam malesuada erat ut turpis. 
                    Suspendisse urna nibh, viverra non.
                </p>
                <a class="btn-outline" href="#">únete a nosotros</a>
            </div>
        </section>

        <!-- BEGIN CAROUSEL -->
        <section class="wrapper-carousel">
            <div class="title-section">
                <small>Productos</small>
                <h2>Equipos Disponibles</h2>
            </div>
            <div class="container">
                <div class="row-carousel">
                    <div class="block-carousel">
                        <div class="item-carousel">
                            <img src="img/phone-1.png" alt="#" />
                        </div>
                        <div class="text-carousel">
                            <small>Samsung</small>
                            <span>Galaxy s10</span>
                        </div>
                        <div class="label-carousel">
                            <span>RD$ 350<br>Semanales</span>
                        </div>
                    </div>
                    <div class="block-carousel">
                        <div class="item-carousel">
                            <img src="img/phone-2.png" alt="#" />
                        </div>
                        <div class="text-carousel">
                            <small>Lg</small>
                            <span>Lg v30</span>
                        </div>
                        <div class="label-carousel">
                            <span>RD$ 350<br>Semanales</span>
                        </div>
                    </div>
                    <div class="block-carousel">
                        <div class="item-carousel">
                            <img src="img/phone-3.png" alt="#" />
                        </div>
                        <div class="text-carousel">
                            <small>Huawei</small>
                            <span>p20 pro</span>
                        </div>
                        <div class="label-carousel">
                            <span>RD$ 350<br>Semanales</span>
                        </div>
                    </div>
                    <div class="block-carousel">
                        <div class="item-carousel">
                            <img src="img/phone-1.png" alt="#" />
                        </div>
                        <div class="text-carousel">
                            <small>Samsung</small>
                            <span>Galaxy s10</span>
                        </div>
                        <div class="label-carousel">
                            <span>RD$ 350<br>Semanales</span>
                        </div>
                    </div>
                    <div class="block-carousel">
                        <div class="item-carousel">
                            <img src="img/phone-2.png" alt="#" />
                        </div>
                        <div class="text-carousel">
                            <small>Lg</small>
                            <span>Lg v30</span>
                        </div>
                        <div class="label-carousel">
                            <span>RD$ 350<br>Semanales</span>
                        </div>
                    </div>
                    <div class="block-carousel">
                        <div class="item-carousel">
                            <img src="img/phone-3.png" alt="#" />
                        </div>
                        <div class="text-carousel">
                            <small>Huawei</small>
                            <span>p20 pro</span>
                        </div>
                        <div class="label-carousel">
                            <span>RD$ 350<br>Semanales</span>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <a class="btn-fill" href="#">Encuentra un Dealer</a>
                </div>
            </div>
        </section>

        <!-- BEGIN ABOUTUS -->
        <section class="wrapper-aboutus mb">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="title-section text-left">
                            <small>Bienvenido</small>
                            <h2>Sobre Nosotros</h2>
                        </div>
                        <p>
                            CrédiGo fue fundada en el 2019 con la misión de 
                            facilitar financiamiento de teléfonos inteligentes 
                            a todas las personas, sin importar su nivel socio 
                            económico, historial de crédito o nacionalidad. 
                            Somos una empresa subsidiaria de Panacrédito S.A.S. 
                            y socio enRepública Dominicana para la reconocida 
                            empresa de Silicon Valley PAYJOY, la cual ha levantado 
                            sobre $30M de dólares con fondos de inversion que incluyen 
                            Union Square Ventures y además opera ya en más de 15 paises.
                        </p>
                    </div>
                    <div class="col-md-6">
                        <img src="img/img-aboutus.jpg" alt="#" />
                    </div>
                </div>
            </div>
        </section>
        <section class="wrapper-sponsors">
            <div class="container">
                <div class="row-sponsors">
                    <div class="item-sponsors">
                        <img src="img/img-sponsor-1.png" alt="#" />
                    </div>
                    <div class="item-sponsors">
                        <img src="img/img-sponsor-2.png" alt="#" />
                    </div>
                    <div class="item-sponsors">
                        <img src="img/img-sponsor-3.png" alt="#" />
                    </div>
                    <div class="item-sponsors">
                        <img src="img/img-sponsor-4.png" alt="#" />
                    </div>
                    <div class="item-sponsors">
                        <img src="img/img-sponsor-1.png" alt="#" />
                    </div>
                </div>
            </div>
        </section>
        <section class="wrapper-faq mb">
            <div class="title-section">
                <small>Información</small>
                <h2>Preguntas y Respuestas</h2>
            </div>
            <div class="container mb">
                <div class="wrapper-collapse">
                    <div class="accordion" id="accordionExample">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <h2 class="mb-0">
                                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                        ¿Lorem ipsum dolor sit amet, consectetuer adipiscing elit?
                                    </button>
                                </h2>
                            </div>

                            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                                <div class="card-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <h2 class="mb-0">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        ¿Quisque volutpat mattis eros?
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                <div class="card-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree">
                                <h2 class="mb-0">
                                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        ¿The Power Of Notes?
                                    </button>
                                </h2>
                            </div>
                            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                                <div class="card-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <section class="wrapper-maps mb">
            <div class="title-section">
                <small>Información</small>
                <h2>Encuentra un Dealer</h2>
            </div>
            <div class="container">
                <div class="block-maps">
                    ...
                </div>
            </div>
        </section>
        
        <footer>
            <div class="container">
                <div class="row-footer">
                    <div class="menu-footer">
                        <ul>
                            <li><a href="#">Inicio</a></li>
                            <li><a href="#">Encuentra un Dealer</a></li>
                            <li><a href="#">Acceder</a></li>
                            <li><a href="#">Terminos y Condiciones</a></li>
                        </ul>
                        <div class="social-footer">
                            <a href="#"><img src="img/icon-fb.svg" alt="#" /></a>
                            <a href="#"><img src="img/icon-ins.svg" alt="#" /></a>
                            <a href="#"><img src="img/icon-tw.svg" alt="#" /></a>
                            <a href="#"><img src="img/icon-yt.svg" alt="#" /></a>
                        </div>
                    </div>
                    <div class="address-footer">
                        <a href="#">
                            <img src="/img/logo-footer.svg" alt="#" />
                        </a>
                        <address>
                            Av. George Washington<br/>
                            Malecon Center, Local 204-C<br/>
                            Santo Domingo<br/>
                            República Dominicana
                        </address>
                        <div class="copyright">
                            Copyright © 2019 CREDIGO<br/>
                            Todos los derechos reservados.
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <script type="text/javascript">
            $(document).ready(function () {
                $('.wrapper-logos').slick({
                    arrows: false,
                    slidesToShow: 5,
                    slidesToScroll: 1,
                    responsive: [
                        {
                            breakpoint: 991,
                            settings: {
                                slidesToShow: 3
                            }
                        },
                        {
                            breakpoint: 767,
                            settings: {
                                slidesToShow: 2
                            }
                        }
                    ]
                });
                $('.row-carousel').slick({
                    arrows: true,
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    responsive: [
                        {
                            breakpoint: 991,
                            settings: {
                                slidesToShow: 3
                            }
                        },
                        {
                            breakpoint: 767,
                            settings: {
                                slidesToShow: 2
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 1
                            }
                        }
                    ]
                });
                $('.row-sponsors').slick({
                    arrows: false,
                    slidesToShow: 4,
                    slidesToScroll: 1,
                    responsive: [
                        {
                            breakpoint: 991,
                            settings: {
                                slidesToShow: 3
                            }
                        },
                        {
                            breakpoint: 767,
                            settings: {
                                slidesToShow: 2
                            }
                        }
                    ]
                });
            });
        </script>
    </body>
</html>
@font-face {
    font-family: 'Helvetica Neue Black';
    src: url('../fonts/HelveticaNeue-CondensedBlack.eot');
    src: url('../fonts/HelveticaNeue-CondensedBlack.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeue-CondensedBlack.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-CondensedBlack.woff') format('woff'),
        url('../fonts/HelveticaNeue-CondensedBlack.ttf') format('truetype'),
        url('../fonts/HelveticaNeue-CondensedBlack.svg#HelveticaNeue-CondensedBlack') format('svg');
    font-weight: 900;
    font-style: normal;
}

header {
    z-index: 100;
    position: relative;
}
.navbar-brand img {
    display: block;
    max-height: 3vw;
}
.container-width {
    position: relative;
}
.wrapper-featured {
    z-index: 1;
    min-height: 50vw;
    position: relative;
    background: url('../img/img-featured.jpg') center no-repeat;
    background-size: cover;
}
.wrapper-featured:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    background-color: rgba(55,62,71,.80);
}
.header-navbar {
    top: 0;
    left: 15px;
    right: 15px;
    position: absolute;
}
.info-featured {
    top: 35%;
    color: #fff;
    width: 100%;
    text-align: center;
    position: absolute;
}
.info-featured h1 {
    margin: 0;
    font-size: 3.5vw;
    font-weight: 100;
    line-height: 6vw;
}
.info-featured h2 {
    margin: 0;
    font-size: 1.7vw;
    font-weight: 100;
}
.btn-fill {
    color: #fff;
    border: none;
    font-size: 2vw;
    margin-top: 4vw;
    font-weight: 700;
    padding: 1.7vw 3vw;
    position: relative;
    border-radius: 10vw;
    display: inline-block;
    text-transform: uppercase;
    background: #4eb5e5; /* Old browsers */
    background: -moz-linear-gradient(45deg, #4eb5e5 0%, #71c3e9 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, #4eb5e5 0%,#71c3e9 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, #4eb5e5 0%,#71c3e9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4eb5e5', endColorstr='#71c3e9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.btn-fill:hover {
    color: #fff;
    text-decoration: none;
}
.header-navbar .navbar-nav {
    margin-top: 3px;
    background-color: #fff;
}
.header-navbar .nav-link {
    color: #000;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
}
.navbar-toggler {
    border: none;
    padding-left: 0;
    padding-right: 0;
}
.navbar-toggler-icon {
    background: url('../img/menu.svg') center no-repeat;
}

.item-logo:focus,
.item-sponsors:focus,
.navbar-toggler:focus {
    outline: none;
}
.btn-outline {
    color: #000;
    display: block;
    /* font-size: 1.5vw; */
    font-weight: 700;
    padding: 9px 25px;
    margin-left: 15px;
    margin-right: 15px;
    text-align: center;
    border-radius: 50px;
    margin-bottom: 25px;
    text-transform: uppercase;
    box-shadow: 0 0 0 3px #71C3E9 inset;
}
.btn-outline:hover {
    color: #000;
    text-decoration: none;
}
/*-- BEGIN WRAPPER LOGOS --*/
.wrapper-logos {
    left: 50vw;
    width: 80vw;
    bottom: -4.2vw;
    margin: 0 auto;
    overflow: hidden;
    padding: 2vw 1vw;
    position: absolute;
    margin-left: -40vw;
    border-radius: 10vw;
    background-color: #fff;
    box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.item-logo {
    padding: 0 3vw;
}
.item-logo img {
    max-height: 4vw;
    max-width: 100%;
}
.wrapper-logos .slick-track {
    display: flex;
    align-items: center;
}

/*-- BEGIN SECTION TITLE --*/
.title-section {
    margin: 0 auto;
    position: relative;
    text-align: center;
}
.title-section small {
    color: #888789;
    font-size: 1.5vw;
    font-weight: 700;
    text-transform: uppercase;
}
.title-section h2 {
    color: #373E47;
    font-size: 3vw;
    font-weight: 300;
    margin: .5vw 0 1.5vw;
}
.title-section:after {
    left: 50%;
    width: 4vw;
    content: "";
    height: .5vw;
    display: block;
    margin-left: -2vw;
    position: absolute;
    border-radius: 10vw;
    background-color: #71C3E9;
}
.wrapper-steps {
    padding: 9vw 0 0;
}
.row-steps {
    width: 95vw;
    display: flex;
    margin: 4vw auto;
}
.item-step {
    width: 100%;
    text-align: center;
}
.item-step span {
    width: 100%;
    color: #71C3E9;
    font-size: 10vw;
    text-align: left;
    position: relative;
    font-family: 'Helvetica Neue Black';
}
.item-step small {
    left: 0;
    right: 0;
    color: #373E47;
    display: block;
    font-size: 1vw;
    margin-top: -5.5vw;
    position: absolute;
    background-color: #fff;
    text-transform: uppercase;
    padding: .5vw 1vw 1vw .5vw;
    font-family: Helvetica Neue Black;
}
/*-- BEGIN JOINUS --*/
.wrapper-join {
    height: 50vw;
    display: flex;
    text-align: center;
    position: relative;
    background: url('../img/bg-join.jpg') center no-repeat;
    background-size: cover;
    align-items: center;
}
.wrapper-join:before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#373e47+0,4eb5e5+100&0.72+0,0.73+100 */
    background: -moz-linear-gradient(45deg, rgba(55,62,71,0.72) 0%, rgba(78,181,229,0.73) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg, rgba(55,62,71,0.72) 0%,rgba(78,181,229,0.73) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg, rgba(55,62,71,0.72) 0%,rgba(78,181,229,0.73) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8373e47', endColorstr='#ba4eb5e5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.wrapper-join h2 {
    margin: 0;
    color: #fff;
    font-size: 4vw;
    font-weight: 700;
}
.wrapper-join p {
    color: #fff;
    font-size: 2vw;
    font-weight: 200;
    margin: 2vw 0 4vw;
}
.info-join {
    width: 100%;
    margin: 0 auto;
    max-width: 60vw;
    position: relative;
}
section .btn-outline {
    color: #fff;
    font-size: 1.3vw;
    margin-bottom: 0;
    padding: 1vw 3vw;
}
/*-- BEGIN CAROUSEL --*/
.wrapper-carousel {
    padding: 5vw 0;
}
.row-carousel {
    margin: 7vw 0 0;
    padding: 0 10vw;
}
.row-carousel .slick-prev {
    left: 0; 
    background: url('../img/arrow-prev.svg') center no-repeat;
    background-size: contain;
}
.row-carousel .slick-next {
    right: 0; 
    background: url('../img/arrow-next.svg') center no-repeat;
    background-size: contain;
}
.row-carousel .slick-arrow {
    top: 50%;
    width: 30px;
    height: 30px;
    border: none;
    margin-top: -30px;
    position: absolute;
    text-indent: -9999em;
}
.item-carousel {
    padding: 1vw;
    border-radius: 10px;
    background-color: #F7F7F7;
    height: 313px;
    display: flex;
    align-items: center;
}
.block-carousel:focus,
.row-carousel .slick-arrow:focus {
    outline: none;
}
.item-carousel img {
    display: block;
    max-width: 50%;
    margin: 3vw auto;
}
.block-carousel {
    padding: 1vw;
    position: relative;
}
.text-carousel small {
    color: #71C3E9;
    display: block;
    font-size: 14px;
    font-weight: 700;
}
.text-carousel span {
    color: #373E47;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}
.text-carousel {
    margin-top: .7vw;
    line-height: 22px;
}
.label-carousel {
    top: 0;
    left: 0;
    width: 70px;
    color: #fff;
    height: 70px;
    display: grid;
    font-size: 8px;
    font-weight: 700;
    line-height: 11px;
    text-align: center;
    border-radius: 50%;
    position: absolute;
    align-items: center;
    text-transform: uppercase;
    background-color: #373E47;
}

/*-- BEGIN ABOUTUS --*/
.mb {
    padding: 5vw 0;
}
.wrapper-aboutus {
    background-color: #FAFAFA;
}
.title-section.text-left:after {
    left: 2vw;
}
.wrapper-aboutus p {
    color: #888789;
    font-size: 1.3vw;
    margin-top: 4.5vw;
    line-height: 2.2vw;
    text-align: justify;
}
.wrapper-aboutus img {
    width: 100%;
    height: auto;
    display: block;
}
.wrapper-sponsors {
    padding: 3vw 0;
    background-color: #F3F3F3;
}
.wrapper-sponsors img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 50px;
}
.wrapper-aboutus .row {
    align-items: center;
}
.item-sponsors {
    padding: 0 2vw;
}
.row-sponsors .slick-track {
    display: flex;
    align-items: center;
}
/*-- BEGIN FAQ --*/
.wrapper-collapse {
    margin-top: 2vw;
}
.wrapper-collapse .btn-link{
    width: 100%;
    padding: 1vw 0;
    color: #71C3E9;
    display: block;
    text-align: left;
    font-weight: 700;
    position: relative;
    padding-right: 20px;
    text-decoration: none;
}
.wrapper-collapse .btn-link:after,
.wrapper-collapse .btn-link.collapsed:after {
    top: 0;
    right: 0;
    content: "-";
    display: block;
    font-size: 20px;
    position: absolute;
    top: 50%;
    margin-top: -18px;
}
.wrapper-collapse .btn-link.collapsed:after {
    content: "+";
}
.wrapper-collapse .card-header {
    padding: 0;
    border: none;
    background: transparent;
}
.wrapper-collapse .card {
    border: none;
    border-radius: 0;
    border-top: 3px solid #E5E8E7;
}
.wrapper-collapse .accordion .card:last-child {
    border-bottom: 3px solid #E5E8E7;
}
.wrapper-collapse .card-body {
    padding: 0 0 1.25rem;
}

/*-- BEGIN MAPS --*/
.wrapper-maps {
    background-color: #FAFAFA;
}

/*-- BEGIN FOOTER --*/
footer {
    color: #fff;
    padding: 3vw 0;
    font-size: 18px;
    font-weight: 100;
    background-color: #373E47;
}
.address-footer address:after {
    width: 2vw;
    content: "";
    height: 1px;
    display: block;
    margin-top: 1.3vw;
    background-color: #fff;
}
.address-footer img {
    margin-bottom: 30px;
}
.menu-footer ul {
    margin: 0;
    padding: 0;
    display: block
}
.menu-footer a {
    color: #fff;
    text-decoration: none;
}
.social-footer {
    width: 100%;
    margin-top: 2vw;
    text-align: center;
    display: inline-block;
}
.social-footer a {
    display: inline-block;
}
.social-footer a:first-child  {
    margin-left: 0;
}
/*-- BEGIN FORM PAGE --*/
.page-featured {
    min-height: 32vw;
    overflow: hidden;
}
.page-featured:after {
    width: 0;
    height: 0;
    bottom: 0;
    content: "";
    position: absolute;
    border-bottom: 7vw solid #fff;
    border-left: 100vw solid transparent;
}
.form-input label {
    display: block;
    color: #71C3E9;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
}
.form-input .input {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px 0;
    border-bottom: 3px solid #E5E8E7;
}
.input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-size: 18px;
    color: #B6B7B7;
    font-weight: 100;
}
.input::-moz-placeholder { /* Firefox 19+ */
    font-size: 18px;
    color: #B6B7B7;
}
.input:-ms-input-placeholder { /* IE 10+ */
    font-size: 18px;
    color: #B6B7B7;
}
.input:-moz-placeholder { /* Firefox 18- */
    font-size: 18px;
    color: #B6B7B7;
}
.block-input {
    margin-top: 30px;
}
.block-input select {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 100;
    background: none;
    border-radius: 0;
    border-bottom: 3px solid #E5E8E7;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}
.block-input textarea.input {
    min-height: 10vw;
}
.form-input .btn-fill {
    margin: 20px 0 30px;
}
.form-input .input:focus {
    border-color: #71C3E9;
}
.block-steps {
    display: flex;
}
.block-steps .item-step {
    width: 30%;
    margin-right: 15%;
}
.wrapper-form .row-steps {
    width: auto;
}
Regresar