Proyecto: Coopsema

<!DOCTYPE html>
<html>
    <head>
        <title>Portada</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/master.css">
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <link rel="stylesheet" type="text/css" href="css/responsive.css">
        <link rel="stylesheet" type="text/css" href="css/slick.css"/>
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300i,400,600,700,800" rel="stylesheet">
        <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
        <script src="js/popper.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/slick.min.js" type="text/javascript"></script>
        <script src="js/jquery-ui.js" type="text/javascript"></script>
        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <![endif]-->
    </head>
    <body>
        <!-- BEGIN HEADER -->
        <div class="header-top">
            <div class="container">
                <div class="header-social">
                    <div class="header-social-icon">
                        <a href="#"><img src="img/icon-fb.png" alt="facebook" /></a>
                        <a href="#"><img src="img/icon-ins.png" alt="instagram" /></a>
                        <a href="#"><img src="img/icon-lin.png" alt="linkedin" /></a>
                        <a href="#"><img src="img/icon-tw.png" alt="twitter" /></a>
                    </div>
                    <div class="header-social-button">
                        <a href="#">Ingresar</a>
                    </div>
                </div>
            </div>
        </div>
        <header>
            <div class="container header-wrapper">
                <nav class="navbar navbar-expand-lg navbar-main">
                    <a class="navbar-brand" href="#">
                        <img width="300" height="35" src="img/logo.svg" alt="#" />
                    </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 navbar-header ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Inicio</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Coopsema</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Servicios</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Aliados</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Noticias</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Contacto</a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>

        <!-- BEGIN CAROUSEL -->
        <section class="carousel-wrapper">
            <div class="carousel-item">
                <div class="carousel-info">
                    <img src="img/img-featured.jpg" alt="#"/>
                    <div class="carousel-shape"></div>
                    <i class="carousel-triangle"></i>
                    <div class="carousel-text-wrapper">
                        <div class="carousel-shape-block">
                            <h1>Solicita tu préstamo</h1>
                            <h2>
                                Lorem ipsum dolor sit 
                                amet,onsectetur adipiscin
                                ipsum dolor sit amet,
                                consectetur adipiscing
                            </h2>
                            <a class="btn-normal" href="#">Saber más</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <div class="carousel-info">
                    <img src="img/img-featured.jpg" alt="#"/>
                    <div class="carousel-shape"></div>
                    <i class="carousel-triangle"></i>
                    <div class="carousel-text-wrapper">
                        <div class="carousel-shape-block">
                            <h1>Solicita tu préstamo</h1>
                            <h2>
                                Lorem ipsum dolor sit 
                                amet,onsectetur adipiscin
                                ipsum dolor sit amet,
                                consectetur adipiscing
                            </h2>
                            <a class="btn-normal" href="#">Saber más</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- BEGIN APPSTORE -->
        <section class="app-wrapper">
            <div class="container">
                <div class="app-block">
                    <div class="app-info">
                        <h2 class="title-block">Descarga Nuestra App</h2>
                        <p>
                            Lorem Ipsum has been the industry's 
                            standard dummy text ever since the 
                            1500s, when an unknown printer took 
                            a galley of type and scrambled it to 
                            make a type specimen book.
                        </p>
                        <div class="action-app">
                            <a href="#"><img src="img/img-app-google.png" alt="#" /></a>
                            <a href="#"><img src="img/img-app-apple.png" alt="#" /></a>
                        </div>
                    </div>
                    <div class="app-img">
                        <img src="img/img-phone.png" alt="#" />
                    </div>
                </div>
            </div>
        </section>


        <!-- BEGIN SPLIT -->
        <section class="division-wrapper">
            <div class="split-square split-left">
                <div class="split-text">
                    <h3>Calcula tu<br/> préstamo</h3>
                    <a class="btn-normal-corner" class href="#">Calcular</a>
                </div>
            </div>
            <div class="split-square split-right">
                <div class="split-text">
                    <h3>Ingresa<br/> a tu cuenta</h3>
                    <a class="btn-normal-corner" class href="#">Ingresar</a>
                </div>
            </div>
        </section>

        <!-- BEGIN BLOCKS FOR DESKTOP -->
        <section class="blocks-wrapper desk">
            <div class="container">
                <h3 class="title-section">Servicios</h3>
                <div class="row">
                    <div class="col-md-4">
                        <a href="#">
                            <div class="square">
                                <img src="img/icon-1.png" alt="#" />
                                <span>Préstamos</span>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#">
                            <div class="square">
                                <img src="img/icon-2.png" alt="#" />
                                <span>Ahorros</span>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#">
                            <div class="square">
                                <img src="img/icon-3.png" alt="#" />
                                <span>Ordenes de compra</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="#">
                        <div class="square">
                            <img src="img/icon-4.png" alt="#" />
                            <span>Opticas</span>
                        </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#">
                            <div class="square">
                                <img src="img/icon-5.png" alt="#" />
                                <span>Agencia de Viajes</span>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#">
                            <div class="square">
                                <img src="img/icon-6.png" alt="#" />
                                <span>Farmacias</span>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="#">
                            <div class="square">
                                <img src="img/icon-7.png" alt="#" />
                                <span>Seguro de Vehículos</span>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#">
                            <div class="square">
                                <img src="img/icon-8.png" alt="#" />
                                <span>Salones de Belleza</span>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="#">
                            <div class="square">
                                <img src="img/icon-9.png" alt="#" />
                                <span>Plan de Ayuda Mutua</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- BEGIN BLOCK FOR MOBILE -->
        <section class="blocks-wrapper mob">
            <h3 class="title-section">Servicios</h3>
            <div class="carousel-block">
                <div class="carousel-block-item">
                    <a href="#">
                        <div class="square">
                            <img src="img/icon-1.png" alt="#" />
                            <span>Préstamos</span>
                        </div>
                    </a>
                </div>
                <div class="carousel-block-item">
                    <a href="#">
                        <div class="square">
                            <img src="img/icon-2.png" alt="#" />
                            <span>Ahorros</span>
                        </div>
                    </a>
                </div>
                <div class="carousel-block-item">
                    <a href="#">
                        <div class="square">
                            <img src="img/icon-3.png" alt="#" />
                            <span>Ordenes de Compra</span>
                        </div>
                    </a>
                </div>
                <div class="carousel-block-item">
                    <a href="#">
                        <div class="square">
                            <img src="img/icon-4.png" alt="#" />
                            <span>Opticas</span>
                        </div>
                    </a>
                </div>
                <div class="carousel-block-item">
                    <a href="#">
                        <div class="square">
                            <img src="img/icon-5.png" alt="#" />
                            <span>Agencia de Viajes</span>
                        </div>
                    </a>
                </div>
                <div class="carousel-block-item">
                    <a href="#">
                        <div class="square">
                            <img src="img/icon-6.png" alt="#" />
                            <span>Farmacias</span>
                        </div>
                    </a>
                </div>
                <div class="carousel-block-item">
                    <a href="#">
                        <div class="square">
                            <img src="img/icon-7.png" alt="#" />
                            <span>Seguro de Vehículos</span>
                        </div>
                    </a>
                </div>
                <div class="carousel-block-item">
                    <a href="#">
                        <div class="square">
                            <img src="img/icon-8.png" alt="#" />
                            <span>Salones de Belleza</span>
                        </div>
                    </a>
                </div>
                <div class="carousel-block-item">
                    <a href="#">
                        <div class="square">
                            <img src="img/icon-9.png" alt="#" />
                            <span>Plan de Ayuda Mutua</span>
                        </div>
                    </a>
                </div>
            </div>
        </section>

        <!-- BEGIN NEWS -->
        <section class="news-wrapper">
            <div class="container">
                <h3 class="title-section">Noticias Recientes</h3>
                <div class="news-carousel">
                    <div class="news-block">
                        <div class="news-item">
                            <img src="img/img-news-1.jpg" alt="#" />
                            <div class="news-info">
                                <h4>Feria cooperativista</h4>
                                <p>
                                    El presidente de la Cooperativa de 
                                    Servicios Múltiples de los Empleados 
                                    de Aduanas (COOPSEMA), licenciado 
                                    Lisandro Muñoz,  se entregaron 35 millones 
                                    de pesos a sus afiliados en el último 
                                    año fiscal.
                                </p>
                            </div>
                            <a class="btn-normal-corner" href="#">Saber Más</a>
                        </div>
                    </div>
                    <div class="news-block">
                        <div class="news-item">
                            <img src="img/img-news-2.jpg" alt="#" />
                            <div class="news-info">
                                <h4>COOPSEMA recibe "Premio al Mérito"</h4>
                                <p>
                                    Reconocer a las mujeres del cooperativismo 
                                    dominicano, que se destacan en su compromiso 
                                    por la defensa de los derechos de las mujeres, 
                                    la promoción de la igualdad con equidad de género 
                                    entre hombres y mujeres.
                                </p>
                            </div>
                            <a class="btn-normal-corner" href="#">Saber Más</a>
                        </div>
                    </div>

                    <div class="news-block">
                        <div class="news-item">
                            <img src="img/img-news-3.jpg" alt="#" />
                            <div class="news-info">
                                <h4>ENECOOP felicita a COOPSEMA</h4>
                                <p>
                                    La Escuela Nacional de Educación Cooperativista, 
                                    Inc. (ENECOOP), felicita a su institución, y a 
                                    las ganadoras, en las categorías 1-mérito a la 
                                    mujer joven 2-mérito al trabajo educativo y de 
                                    promoción en la igualdad de género...
                                </p>
                            </div>
                            <a class="btn-normal-corner" href="#">Saber Más</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- BEGIN FOOTER -->
        <footer>
            <div class="container">
                <div class="footer-row">
                    <div class="footer-cell">
                        <a href="#">
                            <img class="footer-logo" src="img/logo-footer.png" alt="#" />
                        </a>
                    </div>
                    <div class="footer-cell">
                        <p>
                            Lorem Ipsum is simply dummy 
                            the printing and typesetting. 
                            Lorem Ipsum has been 
                        </p>
                        <div class="header-social-icon">
                            <a href="#"><img src="img/icon-fb.png" alt="facebook" /></a>
                            <a href="#"><img src="img/icon-ins.png" alt="instagram" /></a>
                            <a href="#"><img src="img/icon-lin.png" alt="linkedin" /></a>
                            <a href="#"><img src="img/icon-tw.png" alt="twitter" /></a>
                        </div>
                    </div>
                    <div class="footer-cell text-center">
                        <ul>
                            <li><a href="#">Inicio</a></li>
                            <li><a href="#">Coopsema</a></li>
                            <li><a href="#">Servicios</a></li>
                            <li><a href="#">Aliados</a></li>
                            <li><a href="#">Noticias</a></li>
                            <li><a href="#">Contacto</a></li>
                            <li><a href="#">Ingresar</a></li>
                        </ul>
                    </div>
                    <div class="footer-cell text-left">
                        <p>
                            Lorem Ipsum is simply dummy 
                            the printing and typesetting. 
                            Lorem Ipsum has been 
                        </p>
                        <input type="email" placeholder="Email" />
                        <a class="btn-normal" href="#">Suscribirse</a>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div>© 2018. COOPSEMA Todos los Derechos Reservados </div>
                    <div><a href="#">Terminos y condiciones</a></div>
                </div>
            </div>
        </footer>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.carousel-wrapper').slick({
                    dots: false
                });
                $('.news-carousel').slick({
                    dots: false,
                    slidesToShow: 3,
                    responsive: [
                        {
                            breakpoint: 992,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2
                            }
                        },
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
                    ]
                });
                $('.carousel-block').slick({
                    dots: false,
                    responsive: [
                        {
                            breakpoint: 991,
                            settings: {
                                slidesToShow: 3,
                                slidesToScroll: 3
                            }
                        },
                        {
                            breakpoint: 768,
                            settings: {
                                slidesToShow: 2,
                                slidesToScroll: 2
                            }
                        },
                        {
                            breakpoint: 480,
                            settings: {
                                slidesToShow: 1,
                                slidesToScroll: 1
                            }
                        }
                        // You can unslick at a given breakpoint now by adding:
                        // settings: "unslick"
                        // instead of a settings object
                    ]
                });
            });
        </script>
    </body>
</html>
/*  Document   : Coopsema
Created on : 12/19/2018
Author     : Hendry Martinez
email      : hmartinez@mesplit.com
Web        : www.mesplit.com
Description: Purpose of the stylesheet follows.
*/
body {
    background-color: #ebebeb;
    font-family: 'Open Sans', sans-serif;
}
/* BEGIN HEADER */
header {
    z-index: 4;
    position: relative;
    background-color: #fff;
    box-shadow: 2px 2px 15px rgba(0,0,0,.25);
}
/* BEGIN NAVBAR */
.navbar.navbar-main {
    padding: 0;
}
.navbar-main .nav-link {
    color: #1d1d1b;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}
.navbar-main .nav-link:hover {
    color: #157833;
}
.navbar-brand img {
    display: block;
    max-height: 45px;
}
.navbar-main .navbar-toggler {
    padding: 0;
    outline: none;
}
.navbar-main .navbar-toggler-icon {
    background-image: url('../img/icon-menu.svg');
}
.navbar.navbar-main .nav-link.btn-rounded {
    color: #fff;
    min-width: 150px;
    background: #ccc;
    text-align: center;
    border-radius: 30px;
    padding: .3rem 1.5rem;
}
#btn-login {
    background-color: #ff0870;
}
#btn-register {
    background-color: #ff5b27;
}

/* BEGIN FOOTER */
footer {
    background: #ff5c26; /* Old browsers */
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 ); /* IE6-9 */
    padding: 1rem 0 0;
}
.footer-brand img {
    display: block;
    max-height: 75px;
    margin-bottom: .7rem;
}
.footer-wrapper {
    padding-top: 2rem;
    padding-bottom: 1rem;
}
.footer-block {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.53);
}
.footer-wrapper p {
    color: #fff;
    font-size: 18px;
    text-align: left;
    max-width: 285px;
    margin: 0 0 10px;
    line-height: 24px;
}
.footer-social {
    text-align: left;
    margin-top: 1rem;
}
.footer-social img {
    max-height: 55px;
    border-radius: 50%;
    box-shadow: 0 0 30px 12px rgba(111,111,111,.15);
}
.footer-social a {
    margin-left: 10px;
    display: inline-block;
}
.footer-social a:first-child {
    margin-left: 0;
}
.footer-block ul {
    padding: 0;
    display: inline-block;
    margin: 0 auto;
    text-align: left;
}
.card-box-review small,
.footer-block ul li {
    display: block;
}
.footer-block ul li a {
    color: #fff;
    display: block;
    padding: 3px 0;
    font-size: 16px;
    text-decoration: none;
    text-transform: uppercase;
}
.footer-input-text {
    width: 100%;
    color: #fff;
    outline: none;
    background: none;
    padding: 10px 20px;
    border-radius: 30px;
    border: 1px solid #fff;
}
.btn-fill {
    float: left;
    border: none;
    outline: none;
    color: #ff5a27;
    cursor: pointer;
    font-weight: 600;
    margin-top: 20px;
    padding: 10px 20px;
    border-radius: 30px;
    background-color: #fff;
    text-transform: uppercase;
    box-shadow: 5px 5px 21px 5px rgba(0,0,0,.17);
}
.btn-fill:hover {
    color: #ff5a27;
    text-decoration: none;
}
.btn-color {
    color: #fff;
    padding: 5px 20px;
    background-color: #ff5b27;
}
.btn-color:hover {
    color: #fff;
    text-decoration: none;
}
.search-button:focus,
.footer-button:focus {
    outline: none;
}
.footer-input-text::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #fff;
}
.footer-input-text::-moz-placeholder { /* Firefox 19+ */
    color: #fff;
}
.footer-input-text:-ms-input-placeholder { /* IE 10+ */
    color: #fff;
}
.footer-input-text:-moz-placeholder { /* Firefox 18- */
    color: #fff;
}
.copyright {
    color: #fff;
    padding-top: 1rem;
    margin-top: 1.5rem;
    border-top: 1px solid #fff;
}
.copyright a {
    color: #fff;
    text-decoration: none;
}
/* BEGIN SLIDESHOW */
.slideshow-block {
    background-color: #ebebeb;
}
.slick-slide {
    outline: none;
    position: relative;
}
.slideshow-wrapper {
    overflow: hidden;
    position: relative;
    background-color: #ebebeb;
}
.slideshow-fullwidth > img {
    width: 100vw;
    height: 65vh;
    display: block;
    object-fit: cover;
    position: absolute;

}
.slideshow-info {
    padding: 30px;
    max-width: 400px;
    margin: 30px 0 60px;
    background: #ff5c26; /* Old browsers */
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 ); /* IE6-9 */
    display: inline-block;
}
.banner-glass .slideshow-info {
    color: #000;
    background: none;
}
.slideshow-info h1 {
    margin: 0;
    color: #fff0ec;
    font-size: 30px;
    font-weight: 700;
}
.slideshow-info p {
    color: #fff;
    margin: 10px 0;
    font-size: 20px;
    line-height: 25px;
}
.slideshow-wrapper .btn-fill {
    float: none;
    font-size: 12px;
    margin: 15px 0 0;
    font-weight: 700;
    padding: 3px 15px;
    display: inline-block;
}
.slick-dots {
    left: 0;
    right: 0;
    margin: 0;
    bottom: 1rem;
    position: absolute;
    text-align: center;
}
.slick-dots li {
    display: inline-block;
}
.slick-dots li button {
    width: 20px;
    height: 20px;
    border: none;
    margin: 0 3px;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
    text-indent: -9999em;
    background-color: #fff;
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0 0px 6px #dfdfdf inset, 0 0 25px rgba(0,0,0,.5);
    box-shadow: 0 0 0px 6px #dfdfdf inset, 0 0 25px rgba(0,0,0,.5);
}
li.slick-active button {
    box-shadow: 0 0 0px 6px #ff4639 inset, 0 0 25px rgba(0,0,0,.5);
}
.bg-1 {
    background-image: url('../img/slideshow-bg-1.jpg');
}
.bg-2 {
    background-image: url('../img/slideshow-bg-2.jpg');
}
.bg-3 {
    background-image: url('../img/slideshow-bg-3.jpg');
}
.bg-4 {
    background-image: url('../img/slideshow-bg-4.jpg');
}
.slideshow-fullwidth {
    width: 100%;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.slideshow-fixed .slideshow-info {
    width: 100%;
    max-width: none;
    max-height: 280px;
    position: relative;
    display: inline-block;
}
.slideshow-box {
    max-width: 290px;
}
.slideshow-fixed img {
    right: 0;
    bottom: -60px;
    display: block;
    max-height: 340px;
    position: absolute;
}
/* BEGIN ICONS */
.icon-block {
    margin: 20px 10px;
    text-align: center;
    text-transform: uppercase;
}
.icon-box {
    padding: 15px 10px;
    border-radius: 13px;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.icon-block img {
    margin: 0 auto;
    display: block;
    max-height: 30px;
}
.icon-block span {
    font-size: 9px;
    display: block;
    font-weight: 700;
    margin-top: 10px;
    overflow: hidden;
}
.icon-wrapper {
    padding: 0 10px;
    background-color: #fff;
}
.icon-wrapper .slick-arrow {
    top: 50%;
    left: -20px;
    border: none;
    outline: none;
    margin-top: -25px;
    position: absolute;
    text-indent: -9999em;
    background: url('../img/arrow-prev.svg') center no-repeat;
}
.icon-wrapper .slick-next {
    left: auto;
    right: -20px;
    background: url('../img/arrow-next.svg') center no-repeat;
}
.icon-desk .icon-box {
    box-shadow: none;
}
.icon-desk .icon-block {
    border-radius: 15px;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.img-hover {
    display: none !important;
}
/* BEGIN SEARCH BLOCK */
.search-input {
    width: 100%;
    height: 40px;
    border: none;
    outline: none;
    text-align: center;
    padding: 0 110px 0 20px;
}
.search-button {
    top: 0;
    right: 15px;
    height: 40px;
    border: none;
    outline: none;
    cursor: pointer;
    min-width: 100px;
    position: absolute;
    background: url('../img/bg-search.svg') center no-repeat;
    background-size: contain;
}
.search-block {
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.search-wrapper {
    width: 100%;
    margin-bottom: 25px;
    display: inline-block;
}
.search-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #1d1d1b;
}
.search-input::-moz-placeholder { /* Firefox 19+ */
    color: #1d1d1b;
}
.search-input:-ms-input-placeholder { /* IE 10+ */
    color: #1d1d1b;
}
.search-input:-moz-placeholder { /* Firefox 18- */
    color: #1d1d1b;
}
.search-info {
    padding: 8px 0;
    display: block;
}
/* BEGIN SPLIT BLOCK */
.split-wrapper {
    padding: 80px 0 50px;
}
.split-block {
    padding: 30px;
    display: flex;
    min-height: 100%;
    position: relative;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
    justify-content: flex-end;
}
.split-title {
    color: #1d1d1b;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 10px;
    text-transform: uppercase;
}
.split-info {
    margin: 0;
    color: #1d1d1b;
    font-size: 22px;
    line-height: 27px;
}
.split-box {
    max-width: 200px;
}
.split-box-img {
    left: 0;
    top: -40px;
    max-width: 260px;
    max-height: 300px;
    position: absolute;
}
.split-register {
    justify-content: flex-start;
    background: url('../img/bg-split.jpg') center no-repeat;
    background-size: cover;
}
/* BEGIN DASHBOARD */
.dashboard-wrapper {
    display: flex;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.12);
}
.dashboard-sidebar {
    min-width: 71px;
    max-width: 71px;
    overflow: hidden;
    padding: 15px 0 0;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 15px 4px rgba(0, 0, 0, 0.12);
}
.sidebar-show {
    min-width: 250px;
}
.dashboard-content {
    width: 100%;
    height: 100vh;
    padding: 30px;
    overflow: auto;
    word-wrap: break-word;
    background-color: #fff;
}
.dashboard-sidebar ul {
    margin: 0;
    padding: 0;
}
.dashboard-sidebar li {
    display: block;
}
.dashboard-sidebar nav a {
    width: 100%;
    color: #8a8a8a;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    padding: 10px 10px 10px 25px;
    border-bottom: 1px solid #ccc;
}
.dashboard-sidebar li:first-child a {
    border-top: 1px solid #ccc;
}
.dashboard-sidebar .active {
    position: relative;
    background-color: #fff3f0;
}
.dashboard-sidebar .active::before {
    top: 0;
    right: 0;
    bottom: 0;
    content: "";
    width: 10px;
    display: block;
    position: absolute;
    background: #ff562b;
    background: -moz-linear-gradient(top, #ff562b 0%, #ff2754 100%);
    background: -webkit-linear-gradient(top, #ff562b 0%,#ff2754 100%);
    background: linear-gradient(to bottom, #ff562b 0%,#ff2754 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff562b', endColorstr='#ff2754',GradientType=0 );
}
.dashboard-sidebar img {
    width: 21px;
    float: left;
    display: block;
    max-height: 21px;
}
.dashboard-sidebar span {
    padding-left: 25px;
}
.dashboard-avatar {
    padding: 10px 16px;
}
.dashboard-avatar a {
    text-decoration: none;
}
.dashboard-avatar img {
    width: 100%;
    float: none;
    height: auto;
    display: block;
    max-height: none;
    border-radius: 50%;
    margin: 0 auto 20px;
}
.dashboard-avatar span {
    padding: 0;
    display: none;
    color: #f15d2e;
    font-weight: 700;
    text-transform: uppercase;
}
.dashboard-toggle {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 20px 10px;
    padding: 0 !important;
    background: url(../img/icon-menu.svg) center no-repeat;
    background-size: contain;
}
/* BEGIN CARD BOX */
.card-wrapper {
    text-decoration: none !important;
}
.card-box {
    height: 100%;
    padding: 20px;
    overflow: hidden;
    align-items: center;
    border-radius: 15px;
    background-color: #fff;
    justify-content: center;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.card-flex {
    display: flex;
}
.card-icon {
    max-width: 50px;
    max-height: 50px;
    margin-right: 30px;
    display: inline-block;
}
.title-emphasis {
    display: block;
    color: #ff5829;
    font-size: 28px;
    font-weight: 700;
    line-height: 33px;
    text-align: center;
}
.card-subtitle {
    color: #484848;
    font-size: 16px;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
}
.card-block {
    padding-bottom: 20px;
}
.title-default {
    margin: 0;
    color: #ff5b27;
    display: block;
    font-size: 21px;
}
.title-primary {
    margin: 0;
    color: #ff5829;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}
.title-secundary {
    margin: 0;
    color: #1d1d1b;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}
.title-info {
    color: #1d1d1b;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}
.title-stickout {
    color: #ff5829;
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 10px;
    text-align: center;
}
.text-default {
    color: #4e4e4e;
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 10px;
}
/* BEGIN STATUS */
.status-wrapper {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.status-title {
    margin: 0;
    color: #707070;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 15px;
    text-transform: uppercase;
    background-color: #ebebeb;
}
.status-box {
    height: 100%;
    padding: 20px 25px;
    text-align: center;
}
.status-avatar {
    text-align: center;
}
.status-avatar img {
    width: auto;
    display: block;
    margin: 0 auto;
    max-height: 90px;
    border-radius: 50%;
}
.status-info h4 {
    margin: 10px 0;
    color: #ff582a;
    font-size: 14px;
    font-weight: 600;
}
.status-info p {
    color: #1d1d1b;
    margin: 5px 0 0;
    font-size: 14px;
    line-height: 18px;
}
.status-cover {
    position: relative;
}
.status-cover::before {
    top: 0;
    bottom: 0;
    width: 5px;
    content: "";
    right: 15px;
    position: absolute;
}
.status-cover.active:before {
    background-color: #7cc73e;
}
.status-cover.inactive:before {
    background-color: #ff4c16;
}
.active .status-opt {
    background: #8cd148; /* Old browsers */
    background: -moz-linear-gradient(top, #8cd148 0%, #6dbd34 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #8cd148 0%,#6dbd34 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #8cd148 0%,#6dbd34 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cd148', endColorstr='#6dbd34',GradientType=0 ); /* IE6-9 */
}
.inactive .status-opt {
    background: #ff501c; /* Old browsers */
    background: -moz-linear-gradient(top, #ff501c 0%, #ff470d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ff501c 0%,#ff470d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ff501c 0%,#ff470d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff501c', endColorstr='#ff470d',GradientType=0 ); /* IE6-9 */
}

.status-action a {
    padding: 10px;
    margin: 0 5px;
    line-height: 20px;
    border-radius: 3px;
    display: inline-block;
    background-color: #ddd;
    vertical-align: middle;
}
.status-action a img {
    width: 25px;
    display: block;
    max-width: 25px;
    max-height: 20px;
}
.status-opt {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    margin-right: 0 !important;
    padding: 10px 20px !important;
}
.status-opt:hover {
    color: #fff;
    text-decoration: none;
}
.status-cover:nth-child(odd) {
    background-color: #f4f4f4;
    border-top: 1px solid #b7b7b7;
    border-bottom: 1px solid #b7b7b7;
}
/* BEGIN CHAT */
.chat-wrapper {
    height: 60vh;
    overflow: auto;
    padding-top: 20px;
}
.chat-wrapper::-webkit-scrollbar {
    display: none;
}
.chat-wrapper::-moz-scrollbar {
    display: none;
}
.chat-wrapper::-ms-scrollbar {
    display: none;
}
.chat-wrapper::scrollbar {
    display: none;
}
.chat-row {
    display: flex;
    padding: 0 20px 20px;
}
.chat-avatar {
    text-align: center;
}
.chat-avatar img {
    display: block;
    max-width: 40px;
    border-radius: 50%;
}
.chat-avatar small {
    color: #1d1d1b;
    display: block;
    font-size: 9px;
    margin-top: 10px;
    text-transform: uppercase;
}
.chat-msg {
    width: 100%;
    color: #1d1d1b;
    font-size: 12px;
    margin-left: 15px;
    border-radius: 15px;
    padding: 10px 20px;
    position: relative;
    height: fit-content;
    background-color: #f0f1f1;
}
.chat-msg small {
    font-size: 9px;
}
.chat-msg::before {
    top: 15px;
    width: 0;
    height: 0;
    left: -8px;
    content: "";
    display: block;
    position: absolute;
    border-top: 7px solid transparent;
    border-right: 10px solid #f0f1f1;
    border-bottom: 7px solid transparent;
}
.flex-row-reverse .chat-msg {
    margin: 0;
}
.flex-row-reverse .chat-msg::before {
    right: -8px;
    left: auto;
    border-right: none;
    border-top: 7px solid transparent;
    border-left: 10px solid #f0f1f1;
    border-bottom: 7px solid transparent;
}
.chat-msg small {
    right: 15px;
    bottom: -20px;
    display: block;
    font-size: 9px;
    position: absolute;
}
.chat-row.flex-row-reverse {
    margin-bottom: 25px;
}
.chat-input-wrapper {
    padding: 20px;
    display: flex;
    position: relative;
    background-color: #ebebeb;
}
.chat-input-block{
    width: 100%;
}
.chat-input-block textarea {
    width: 100%;
    border: none;
    resize: none;
    outline: none;
    display: block;
    overflow: hidden;
    border-radius: 30px;
    padding: 10px 130px 10px 25px;
}
.chat-button-block .btn-chat {
    right: 20px;
    color: #fff;
    border: none;
    height: 44px;
    bottom: 20px;
    outline: none;
    cursor: pointer;
    padding: 0 30px;
    position: absolute;
    border-radius: 30px;
    background: #ff5c26;
    text-transform: uppercase;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}

/* BEGIN ACCORDION */
.card-header {
    padding: 0;
    border-top: 1px solid #dadada !important;
}
.card-header .btn-link {
    width: 100%;
    color: #3f3f3f;
    display: block;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    padding: 20px 35px;
    text-decoration: none;
    background-color: #fff;
}
.card:first-child .card-header {
    border-top: none !important;
}
.card-header,
.accordion .card {
    border: none;
}
.accordion {
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.accordion .card-body {
    font-size: 16px;
    padding: 15px 35px;
    position: relative;
    background-color: #f8f6fb;
    border-top: 1px solid #dadada;
}
.accordion .card-body::before {
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    content: "";
    display: block;
    position: absolute;
    background: #ff5c26;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}
.accordion .card-body h2 {
    color: #ff5b27;
    font-size: 16px;
    margin: 0 0 10px;
    font-weight: 700;
}
.show + .arrow-collapse {
    background-image: url('../img/icon-accordion-up.png');
}
.arrow-collapse {
    top: 23px;
    right: 25px;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    background: url('../img/icon-accordion-down.png') center no-repeat;
    background-size: contain;
}
/* BEGIN TABS */
.tabs-wrapper .nav-tabs {
    border-bottom: none;
}
.tabs-wrapper .tab-content {
    border: none;
    padding: 30px;
    border-radius: 0 10px 10px 10px;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.tabs-wrapper .nav-link {
    border: none;
    color: #515151;
    font-weight: 600;
    padding: 7px 20px;
    text-transform: uppercase;
    background-color: #ebebeb;
    border-radius: 10px 10px 0 0;
}
.tabs-wrapper .nav-link.active {
    color: #fff;
    background-color: #ff4f1a;
    border-radius: 10px 10px 0 0;
}
/* BEGIN MOBILE ACCORDION */
.accordionMob {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.accordionMob .card {
    border: none;
}
.accordionMob .card-header {
    padding: 0;
    border-radius: 0;
    border-top-color: #757575;
}
.accordionMob .card-header .btn-link {
    width: 100%;
    color: #fff;
    display: block;
    text-align: left;
    border-radius: 0;
    font-weight: 600;
    padding: 10px 20px;
    background-color: #ff5b27;
}
.accordionMob .card-header .btn-link.collapsed {
    color: #5b5b5b;
    background-color: #ebebeb;
}

/* BEGIN SERVICE BLOCK */
.row-avatar {
    padding-bottom: 25px;
    border-bottom: 1px solid #b7b7b7;
}
.row-avatar .status-avatar {
    padding: 0;
    align-items: flex-end;
}
.row-avatar .status-info h4 {
    text-transform: uppercase;
}
.status-avatar-name {
    text-align: center;
}
.status-avatar-name img {
    max-width: 70px;
    max-height: 110px !important;
    margin: 0 auto 9px !important;
}
.status-avatar-name small {
    display: block;
    font-size: 10px;
    text-align: center;
    text-transform: uppercase;
}
/* BEGIN PERCENT ROW */
.percent-wrapper {
    padding-right: 0;
    border-right: none;
}
.percent-block {
    width: 100%;
}
.progress-bar {
    width: 100%;
    height: 15px;
    margin-top: 8px;
    position: relative;
    border-radius: 30px;
    background-color: #c5c5c7;
}
.progress-line {
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    border-radius: 30px;
    background: #ff0275; /* Old browsers */
    background: -moz-linear-gradient(left, #ff0275 0%, #ff5b27 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ff0275 0%,#ff5b27 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ff0275 0%,#ff5b27 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0275', endColorstr='#ff5b27',GradientType=1 ); /* IE6-9 */
}
.percent-title {
    font-size: 14px;
    display: block;
    text-align: right;
    padding-top: 35px;
    background: url(../img/robot-normal.svg) left center no-repeat;
    background-size: 40px;
}
.percent-img {
    max-height: 50px;
}
.percent-input-wrapper {
    padding-top: 20px;
    border-top: 1px solid #b7b7b7;
}
.percent-input-wrapper label {
    margin: 0;
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    padding-right: 15px;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.percent-input-field {
    position: relative;
}
.percent-input-field input {
    border: none;
    height: 30px;
    border-radius: 30px;
    background-color: #ddd;
}
.percent-input-field input {
    width: 100%;
    border: none;
    height: 32px;
    outline: none;
    padding-right: 80px;
    border-radius: 30px;
    background-color: #ddd;
    padding: 10px 80px 10px 15px;
}
.percent-input-field button {
    top: 0;
    right: 0;
    color: #fff;
    height: 32px;
    border: none;
    display: block;
    padding: 0 15px;
    font-size: 12px;
    position: absolute;
    border-radius: 30px;
    background: #ff5c26;
    text-transform: uppercase;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}
/* BEGIN BUyTTON */
.btn-default,
.btn-secundary {
    color: #fff;
    border: none;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    overflow: hidden;
    text-align: center;
    padding: 10px 20px;
    border-radius: 30px;
    background: #ff5c26;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    text-transform: uppercase;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}
.btn-secundary {
    background: #b0b3b3; /* Old browsers */
    background: -moz-linear-gradient(top, #b0b3b3 0%, #7b7e7f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #b0b3b3 0%,#7b7e7f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #b0b3b3 0%,#7b7e7f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0b3b3', endColorstr='#7b7e7f',GradientType=0 ); /* IE6-9 */
}
.btn-lg {
    width: 100%;
    display: block;
}
.btn-gd.success {
    background: #00be17; /* Old browsers */
    background: -moz-linear-gradient(top, #00be17 0%, #007210 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #00be17 0%,#007210 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #00be17 0%,#007210 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00be17', endColorstr='#007210',GradientType=0 ); /* IE6-9 */
}
.btn-gd.danger {
    background: #fc144c; /* Old browsers */
    background: -moz-linear-gradient(top, #fc144c 0%, #bf0000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fc144c 0%,#bf0000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fc144c 0%,#bf0000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc144c', endColorstr='#bf0000',GradientType=0 ); /* IE6-9 */
}
/* BEGIN LIST */
.list-wrapper ul {
    padding: 0;
}
.list-wrapper li {
    color: #000;
    display: block;
    font-size: 14px;
    margin-top: 10px;
    position: relative;
    padding-left: 25px;
}

.list-wrapper li::before {
    left: 0;
    top: 3px;
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 50%;
    position: absolute;
    background: #929497;
}
.list-wrapper li:hover::before,
.list-wrapper li.active::before {
    background: #ff5c26;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}
.list-wrapper li::after {
    top: 7px;
    left: 4px;
    width: 7px;
    height: 7px;
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
}
.list-wrapper li a {
    color: #000;
}
.list-wrapper li.active a,
.list-wrapper li a:hover {
    color: #f15f2e;
    text-decoration: none;
}

/* BEGIN SLIDE */
.slide-wrapper {
    min-height: 75px;
}
.slide-wrapper .ui-state-active {
    color: initial !important;
}
.slide-wrapper .ui-slider-handle i {
    top: 35px;
    left: -15px;
    min-width: 64px;
    padding: 5px 15px;
    border-radius: 5px;
    font-style: normal;
    position: absolute;
    text-align: center;
    background-color: #fff;
    border: 1px solid #959595;
}
.slide-wrapper .ui-widget.ui-widget-content {
    height: 15px;
    margin-top: 20px;
    border-radius: 30px;
    border-color: #959595 !important;
}
.slide-wrapper .ui-widget-header {
    margin-top: -2px;
    height: 17px !important;
    background-color: #ff5b26 !important;
    border-top: 1px solid #959595 !important;
    border-bottom: 1px solid #959595 !important;
}
.slide-wrapper .ui-slider .ui-slider-handle {
    margin: -8px;
    outline: none;
    border-radius: 50%;
    width: 35px !important;
    height: 35px !important;
    background-color: #fff !important;
    border: 1px solid #959595 !important;
}
.title-input {
    color: #000;
    display: block;
    font-size: 16px;
    margin: 0 0 10px;
}
/* BEGIN INPUT */
.input {
    color: #000;
    width: 100%;
    border: none;
    outline: none;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.input.danger {
    padding-right: 45px;
    border: 1px solid #ff0000;
    background: url('../img/icon-error.png') 95% center no-repeat;
    background-size: 18px;
}
.input.success {
    padding-right: 45px;
    border: 1px solid #00a13d;
    background: url('../img/icon-success.svg') 95% center no-repeat;
    background-size: 18px;
}
textarea.input {
    resize: none;
    min-height: 150px;
    border-radius: 15px;
}
/* BEGIN SWITCH */
.switch {
    width: 55px;
    height: 29px;
    position: relative;
    display: inline-block;
}
.switch input {
    display:none;
}
.slider {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    transition: .4s;
    position: absolute;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
    background-color: #e1e1e1;
}

.slider:before {
    left: 4px;
    bottom: 4px;
    content: "";
    width: 21px;
    height: 21px;
    position: absolute;
    background-color: #fff;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #ff5b26;
}

input:focus + .slider {
    box-shadow: 0 0 1px #ff5b26;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
/* ROUNDED SLIDERS */
.slider.round {
    border-radius: 50px;
}
.slider.round:before {
    border-radius: 50%;
}
/* BEGIN DROPDOWN */
.dropdown .btn {
    width: 100%;
    border: none;
    z-index: 200000;
    text-align: left;
    position: relative;
    color: #000 !important;
    background: #fff !important;
}
.dropdown .btn:focus {
    box-shadow: none !important;
}
.dropdown-menu {
    width: 100%;
    border: none;
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    transform: initial !important;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
/* BEGIN DROPDONW */
.dropdown-custom .select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}
.dropdown-custom .select {
    width: 100%;
    color: #000;
    height: 55px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    border-radius: 15px;
    display: inline-block;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.dropdown-custom .select-styled {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    position: absolute;
    padding: 15px 25px;
    border-radius: 15px;
    background-color: #fff;
}
.dropdown-custom .select-styled:after {
    top: 13px;
    right: 17px;
    content: "";
    width: 27px;
    height: 27px;
    display: block;
    position: absolute;
    background: url('../img/icon-dropdown.png') center no-repeat;
    background-size: 27px;
}
.dropdown-custom .select-styled:hover {
    background-color: #fff;
}
.dropdown-custom .select-styled:active,
.dropdown-custom .select-styled.active {
    background-color: #fff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dropdown-custom .select-options {
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 0;
    z-index: 1;
    display: none;
    list-style: none;
    position: absolute;
    background-color: #fff;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.dropdown-custom .select-options li {
    margin: 0;
    overflow: hidden;
    text-indent: 15px;
    padding: 12px 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-top: 1px solid #f7f3f2;
}
.dropdown-custom .select-options li:hover {
    color: #fff;
    background: #ff5b26;
}
.dropdown-custom .select-options li[rel="hide"] {
    display: none;
}
/* BEGIN DROPDOWN SLIDE */
.dropdown-slide select {
    border: none;
    outline: none;
    font-size: 22px;
    appearance: none;
    border-radius: 30px;
    -moz-appearance: none;
    -webkit-appearance: none;
    background-color: #ebebeb;
    padding: 5px 60px 5px 20px;
    background: url(../img/icon-dropdown-mini.png) 85% center #ebebeb no-repeat;
    background-size: 28px;
}
.dropdown-slide .ui-widget.ui-widget-content {
    border: none;
    height: 15px;
    margin: 20px 15px;
    border-radius: 30px;
    background-color: #ebebeb;
    box-shadow: 0 0 0 15px #fff, 0 0 15px 14px rgba(0,0,0,.2);
}
.dropdown-slide .ui-slider .ui-slider-range {
    border-radius: 30px;
    background-color: #ff5a28;
}
.dropdown-slide .ui-slider-handle {
    margin: -2px;
    outline: none;
    border-radius: 50%;
    width: 27px !important;
    height: 27px !important;
    border: none !important;
    background: #fff !important;
    box-shadow: 0 0 8px 1px rgba(0,0,0,.1);
}
.title-highlight {
    color: #ff5a28;
    font-size: 23px;
    font-weight: 600;
    margin: 0 0 10px;
}
/* BEGIN DATEPICKER */
.ui-datepicker-calendar th {
    color: #858688;
    font-size: 14px;
    background-color: #f0f1f1;
    text-transform: uppercase;
    font-weight: 100 !important;
    padding: 10px 7px !important;
}
.ui-datepicker-calendar th:first-child {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}
.ui-datepicker-calendar th:last-child {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}
.datepicker-wrapper .ui-datepicker-header {
    margin-bottom: 10px;
}
.datepicker-wrapper .ui-datepicker-header {
    color: #fff;
    padding: 7px;
    border: none;
    font-size: 18px;
    font-weight: 100;
    margin-bottom: 10px;
    border-radius: 30px;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}
.datepicker-wrapper .ui-datepicker {
    padding: 0;
    display: block;
    border-radius: 21px;
    border: none !important;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.datepicker-wrapper .ui-datepicker-current-day a {
    color: #8a8a8a;
}
.datepicker-wrapper .ui-state-default {
    text-align: center;
    border: none !important;
    background: none !important;
}
.datepicker-wrapper .ui-datepicker-week-end:first-child a {
    color: #ff522f;
}
.datepicker-wrapper .ui-state-highlight {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    line-height: 22px;
    border-radius: 50%;
    color: #fff !important;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%) !important;
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%) !important;
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 ) !important;
}
.datepicker-wrapper .ui-corner-all.ui-state-hover {
    border: none !important;
    background: none !important;
}
.datepicker-wrapper .ui-widget-header .ui-icon,
.datepicker-wrapper .ui-state-hover .ui-icon {
    background: url('../img/arrow-prev-datepicker.svg') center no-repeat;
}
.datepicker-wrapper .ui-datepicker .ui-datepicker-next .ui-icon {
    background: url('../img/arrow-next-datepicker.svg') center no-repeat;
}
.datepicker-wrapper .ui-datepicker .ui-datepicker-prev,
.datepicker-wrapper .ui-datepicker .ui-datepicker-next {
    top: 3px;
    left: 20px;
    cursor: pointer;
}
.datepicker-wrapper .ui-datepicker .ui-datepicker-next {
    left: auto;
    right: 20px;
}
.datepicker-wrapper .ui-datepicker-inline {
    margin: 0 auto;
}
/* BEGIN ALERTS */
.alert {
    color: #000;
    overflow: hidden;
    border-width: 2px;
    position: relative;
    padding-left: 85px;
    border-radius: 10px;
}
.alert::before {
    top: 0;
    left: 0;
    bottom: 0;
    content: "";
    width: 70px;
    display: block;
    position: absolute;
    border-radius: 8px;
    background-color: #ddd;
}
.alert-success {
    border-color: #00a651;
}
.alert-success::before {
    background: url('../img/icon-alert-success.svg') center no-repeat #00a651;
    background-size: 35px;
}
.alert-danger {
    border-color: #ff0000;
}
.alert-danger::before {
    background: url('../img/icon-alert-danger.svg') center no-repeat #ff0000;
    background-size: 35px;
}
.alert-warning {
    border-color: #ffce25;
}
.alert-warning::before {
    background: url('../img/icon-alert-warning.svg') center no-repeat #ffce25;
    background-size: 35px;
}
.alert-primary {
    border-color: #00aeef;
}
.alert-primary::before {
    background: url('../img/icon-alert-info.svg') center no-repeat #00aeef;
    background-size: 15px;
}
/* BEGIN HEADER */
.modal-content {
    border: none;
}
.modal-body {
    border: none;
    padding: 25px;
}
.modal-header {
    border: none;
    padding: 25px 35px;
    background: url('../img/bg-header-modal.jpg') center no-repeat;
    background-size: cover;
}
.modal-header h3 {
    margin: 0;
    color: #fff;
    line-height: 50px;
    padding-left: 80px;
    text-transform: uppercase;
    background: url('../img/icon-translate.png') left center no-repeat;
    background-size: 58px;
}
.modal-dialog {
    padding: 10px;
}
.modal button.close {
    top: 0;
    right: 0;
    opacity: 1;
    padding: 0;
    width: 30px;
    color: #fff;
    height: 30px;
    outline: none;
    text-shadow: none;
    text-align: center;
    border-radius: 50%;
    background: #ff5c26;
    position: absolute;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}
.modal-video .modal-content {
    padding: 10px;
    background: none;
}
.modal-video iframe {
    width: 100%;
}
.play-video {
    cursor: pointer;
}
.close:not(:disabled):not(.disabled):hover {
    color: #fff;
}
.progress-robot {
    width: 40px;
    height: 40px;
    bottom: 20px;
    right: -10px;
    display: block;
    position: absolute;
    background: url(../img/robot-normal.svg) center no-repeat;
    background-size: contain;
}
hr {
    background: #acacac;
}
.modal .datepicker-wrapper .ui-datepicker {
    box-shadow: none;
}
/* BEGIN PAGINATION */
.btn-prev {
    padding-left: 40px;
}
.btn-next {
    padding-right: 40px;
}
.btn-prev i,
.btn-next i {
    top: 14px;
    left: 30px;
    width: 15px;
    height: 15px;
    display: block;
    position: absolute;
}
.btn-prev i {
    background: url(../img/arrow-prev-datepicker.svg) center no-repeat;
    background-size: contain;
}
.btn-next i {
    top: 14px;
    left: auto;
    right: 30px;
    background: url(../img/arrow-next-datepicker.svg) center no-repeat;
    background-size: contain;
}
/* BEGIN TITLE PAGE */
.title-page {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    background: #ff5c26;
    margin-bottom: 20px;
    justify-content: center;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}
.title-page::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    display: block;
    position: absolute;
    background: url(../img/bg-pattern.png) center no-repeat;
    background-size: cover;
}
.title-page-block {
    left: 5%;
    width: 100%;
    padding: 20px;
    margin: 20px 0;
    max-width: 230px;
    position: relative;
    border-radius: 5px;
    background-color: #fff;
    text-transform: uppercase;
}
.title-page-block .text-default,
.title-page-block .title-highlight {
    margin: 0;
}
.title-page-img {
    width: 190px;
    left: -178px;
    bottom: -45px;
    height: 155px;
    position: absolute;
    background: url('../img/robot-hand.svg') center no-repeat;
}
/* BEGIN AVATAR BLOCK */
.avatar-img {
    width: 100%;
    display: block;
    border-radius: 50%;
    margin-bottom: 10px;
}
.rate-review-wrapper {
    display: flex;
    margin-top: 10px;
}
.rate-wrapper img {
    width: 15px;
    height: 15px;
    margin-bottom: 0;
    margin-left: 6px;
    margin-top: -5px;
    display: inline-block;
}
.review-wrapper {
    margin-left: 20px;
}
.card-box-buttons {
    padding: 20px;
    margin: 20px -20px -20px;
    background-color: #f8f8f8;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.card-avatar .text-default {
    font-size: 12px;
}
.label-number {
    display: block;
    text-align: left;
}
.card-avatar .title-highlight {
    text-transform: uppercase;
}
/* BEGIN PROFILE PAGE */
.title-normal {
    color: #fff;
    margin: 20px 0;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    position: relative;
    text-transform: uppercase;
}
.sidebar-avatar {
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.sidebar-avatar .avatar-img {
    margin: 0 auto;
    display: block;
    max-width: 160px;
}
.sidebar-avatar span {
    color: #f15d2e;
    display: block;
    font-weight: 700;
    margin: 20px 0 5px;
    text-transform: uppercase;
}
.sidebar-avatar .btn-default,
.sidebar-avatar .btn-secundary {
    margin-top: 30px;
    padding: 5px 25px;
}
.sidebar-avatar-img {
    display: none;
}
.list-secundary {
    margin: 0;
    padding: 0;
}
.list-secundary li {
    display: block;
    margin-top: 10px;
    line-height: 15px;
    position: relative;
    padding-left: 15px;
}
.list-secundary li::before {
    left: 0;
    top: 4px;
    width: 8px;
    content: "";
    height: 8px;
    display: block;
    position: absolute;
    border-radius: 50%;
    background: #ff5c26;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}
.list-secundary li a {
    color: #1d1d1b;
    font-size: 12px;
    text-decoration: none;
}
.card-box-bottom {
    text-align: center;
}
.card-box-bottom .btn-default {
    margin-top: 10px;
}
.card-box-avatar img {
    max-height: 130px;
}
.card-box-review {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #b7b7b7;
}
.card-box-review:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
/* BEGIN BANNER */
.banner-wrapper {
    overflow: hidden;
    padding: 30px 0 0;
    background-color: #ebebeb;
}
.banner-info {
    display: block;
    text-align: center;
    padding-bottom: 50px;
}
.banner-info .text-default {
    text-align: left;
}
.banner-img {
    width: 100%;
    margin: 0 auto;
    display: block;
}
.banner-info .btn-fill {
    margin-top: 30px;
}
.banner-info .title-emphasis {
    margin-bottom: 30px;
}
/* BEGIN STEPS */
.step-box {
    text-align: left;
    position: absolute;
}
.steps-wrapper {
    padding: 30px 0;
    position: relative;
    background-color: #fff;
}
.steps-mob {
    margin: 0 auto;
    max-width: 320px !important;
    position: static !important;
    min-height: 595px !important;
    background: url('../img/bg-steps-mob.svg') center no-repeat !important;
    background-size: 270px !important;
}
.steps-mob .step-1,
.steps-mob .step-3 {
    left: 50%;
    top: 100px;
    margin-left: -120px;
}
.steps-mob .step-3 {
    bottom: 120px;
    top: auto !important;
}
.steps-mob .step-box .text-default {
    margin-top: 0;
    font-size: 10px;
    line-height: 13px;
}
.steps-mob .step-box .title-stickout {
    font-size: 12px;
    margin-bottom: 0;
    text-align: left;
    text-transform: uppercase;
}
.steps-mob .step-box {
    width: 135px;
}
.steps-mob .step-2 {
    top: 50%;
    right: 50%;
    margin-top: -75px;
    margin-right: -130px;
}
/* BEGIN FAQ */
.faq-wrapper {
    padding: 40px 0;
    background-color: #ebebeb;
}
/* BEGIN FAQ FORM */
.faq-form-block {
    overflow: hidden;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.faq-form-text {
    color: #fff;
    margin: 0 auto;
    max-width: 290px;
    position: relative;
    padding: 20px 20px 100px 110px;
    background: url(../img/robot-hand.svg) 5% 55% no-repeat;
    background-size: 133px;
}
.faq-form-text h4 {
    margin: 0;
    font-size: 18px;
    text-transform: uppercase;
}
.faq-form-text p {
    font-size: 14px;
}
.faq-form-input {
    padding: 10px 25px 25px 0;
}
.faq-form-img {
    display: flex;
    align-items: center;
    justify-content: center;
}
/* BEGIN ICONS WRAPPER */
.icons-wrapper {
    padding: 30px 0;
    background-color: #fff;
}
.icons-block {
    margin-top: 20px;
}
.icons-block img {
    display: block;
    margin: 0 auto;
    max-height: 95px;
}
.icons-block h4 {
    color: #ff5b27;
    font-size: 16px;
    font-weight: 700;
    margin: 20px 0 10px;
}
.icons-block p {
    color: #444;
    font-size: 14px;
}
.banner-img-wrapper {
    padding: 30px 0;
    background-color: #fff;
}
.banner-img-box {
    width: 100%;
    display: block;
}
.banner-box-wrapper .slideshow-info {
    margin: 70px 0;
}
.banner-box {
    padding: 25px;
    display: inline-block;
    background-color: #eaeaea;
}
.banner-img-wrapper img {
    max-height: 200px;
}
.banner-glass p {
    color: #000;
    font-size: 12px;
    line-height: 17px;
}
.banner-glass h1 {
    color: #ff5829;
}
/* BEGIN REGISTER FORM */
.form-split {
    border-radius: 15px;
    background-color: #fff;
    margin-bottom: 130px !important;
    box-shadow: 0 0 13px 4px rgba(0,0,0,.1);
}
.form-bg {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0;
    background: url('../img/bg-form.jpg') center no-repeat;
    background-size: cover;
}
.form-input {
    padding: 25px 50px !important;
}
.title-form {
    margin: 0;
    color: #ff5829;
    font-size: 38px;
    text-align: center;
    text-transform: uppercase;
}
.form-radio-wrapper {
    padding-bottom: 7px;
    margin-bottom: 10px;
    border-bottom: 1px solid #afafaf;
}
.form-radio-block input {
    display: none;
}
.form-radio-block label {
    display: block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
}
.form-radio-block label::before {
    left: 0;
    top: 4px;
    content: "";
    width: 15px;
    height: 15px;
    display: block;
    border-radius: 50%;
    position: absolute;
    background: #929497;
}
.form-radio-block label::after {
    top: 8px;
    left: 4px;
    width: 7px;
    height: 7px;
    content: "";
    display: block;
    position: absolute;
    border-radius: 50%;
    background-color: #fff;
}
.form-radio-block input:checked + label::before {
    background: #ff5c26;
    background: -moz-linear-gradient(top, #ff5c26 0%, #ff0176 100%);
    background: -webkit-linear-gradient(top, #ff5c26 0%,#ff0176 100%);
    background: linear-gradient(to bottom, #ff5c26 0%,#ff0176 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5c26', endColorstr='#ff0176',GradientType=0 );
}
.form-link-action a,
.form-label-action {
    color: #1d1d1b;
    font-size: 14px;
}
.form-label-action a {
    color: #ff5b27;
}
.form-input img {
    display: block;
    max-height: 200px;
    margin: 10px auto -90px;
}
Regresar