<!DOCTYPE html>
<html ng-app>
<head>
<title>Portada</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/adapt.css" />
<link rel="stylesheet" type="text/css" href="css/gallery.css" />
<link rel="stylesheet" type="text/css" href="css/prettyphoto.css" />
<link rel="stylesheet" type="text/css" href="css/home.css" />
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
<script type="text/javascript" src="js/prettyphoto.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
</head>
<body>
<!-- BEGIN HEADER -->
<div class="header">
<div class="block-header">
<div class="container">
<ul class="top-info">
<li>
<span>Dolar: </span>45.35</li>
<li>
<span>Venta: </span>44.62</li>
<li>
<a href="#">Contactenos</a>
<a href="mailto:name@mail.com">Enviar a un amigo</a>
</li>
</ul>
<div class="col-md-6">
<h1>
<a href="#">
<img src="img/logo.png" alt="AutoFeria Popular" />
</a>
</h1>
</div>
<div class="col-md-6 banner"></div>
</div>
</div>
<!-- BEGIN MAIN-MENU -->
<nav class="navbar navbar-default navbar-main">
<!-- BEGIN DESKTOP MENU -->
<div class="container hidden-sm">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="opt-menu">
<a class="opt-nav" href="#">Vehículos</a>
</li>
<li class="opt-menu">
<a class="opt-nav" href="#">Noticias</a>
</li>
<li class="opt-menu">
<a class="opt-nav" href="#">Videos</a>
</li>
<li class="opt-menu">
<a class="opt-nav" href="#">Préstamos</a>
</li>
<li class="opt-menu">
<a class="opt-nav" href="#">Realidad Virtual</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- BEGIN MOBILE MENU -->
<div class="nav-mob hidden-md hidden-lg">
<a class="nav-normal collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">Menú</a>
<a class="nav-cars collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false"
aria-controls="collapseTwo">Vehículos</a>
</div>
<div class="panel-group hidden-md hidden-lg" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel">
<div class="submenu">
<div class="submenu-item">
<span type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">Novedades</span>
<div class="collapse" id="collapse-1">
<div class="well">
<span type="button" data-toggle="collapse" data-target="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">Noticias</span>
<div class="collapse" id="collapse-1-1">
<ul>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
</ul>
</div>
<span type="button" data-toggle="collapse" data-target="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">Firmas Invitadas</span>
<div class="collapse" id="collapse-1-2">
<ul>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="submenu-item">
<span type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">Lo Popular</span>
<div class="collapse" id="collapse-2">
<div class="well">
<span type="button" data-toggle="collapse" data-target="#collapse-2-1" aria-expanded="false" aria-controls="collapse-2-1">Top de Carros</span>
<div class="collapse" id="collapse-2-1">
<ul>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="submenu-item">
<span type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">Personas</span>
<div class="collapse" id="collapse-3">
<div class="well">
<span type="button" data-toggle="collapse" data-target="#collapse-3-1" aria-expanded="false" aria-controls="collapse-3-1">Historias de Compras</span>
<div class="collapse" id="collapse-3-1">
<ul>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
<li>
<a href="#">Lanzamiento Ford Focus RS</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="submenu-item">
<a href="#">Prestamos</a>
</div>
</div>
</div>
</div>
<div class="panel">
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
<div class="submenu">
<div class="submenu-item">
<span type="button" data-toggle="collapse" data-target="#cars-collapse-1" aria-expanded="false" aria-controls="cars-collapse-1">Marcas</span>
<div class="collapse" id="cars-collapse-1">
<ul>
<li>
<a href="#">Alfa Romeo</a>
</li>
<li>
<a href="#">Audi</a>
</li>
<li>
<a href="#">BAIC</a>
</li>
<li>
<a href="#">BMW</a>
</li>
</ul>
</div>
<span type="button" data-toggle="collapse" data-target="#cars-collapse-2" aria-expanded="false" aria-controls="cars-collapse-2">Tipos de Vehículos</span>
<div class="collapse" id="cars-collapse-2">
<ul>
<li>
<a href="#">Autobús</a>
</li>
<li>
<a href="#">Camión</a>
</li>
<li>
<a href="#">Camioneta</a>
</li>
<li>
<a href="#">Cargo</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- BEGIN WRAP MENU ITEM -->
<div class="container hidden-xs hidden-sm" ng-init="opt = 1">
<table class="wrap-menu-item" ng-show="item === 1">
<tr>
<td class="menu-tabs">
<ul>
<li ng-click="opt = 1" ng-class="{'active': opt === 1}">Noticias</li>
<li ng-click="opt = 2" ng-class="{'active': opt === 2}">Firmas Invitadas</li>
<li ng-click="opt = 3" ng-class="{'active': opt === 3}">Eventos</li>
</ul>
</td>
<td class="menu-items">
<div class="block-items" ng-show="opt === 1">
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
</div>
<div class="block-items" ng-show="opt === 2">
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
</div>
<div class="block-items" ng-show="opt === 3">
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
</div>
</td>
</tr>
</table>
<table class="wrap-menu-item" ng-show="item === 2">
<tr>
<td class="menu-tabs">
<ul>
<li ng-click="opt = 1" ng-class="{'active': opt === 1}">Top de Carros</li>
<li ng-click="opt = 2" ng-class="{'active': opt === 2}">Lo más leido</li>
<li ng-click="opt = 3" ng-class="{'active': opt === 3}">Lo más premiado</li>
</ul>
</td>
<td class="menu-items">
<div class="block-items" ng-show="opt === 1">
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
</div>
<div class="block-items" ng-show="opt === 2">
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
</div>
<div class="block-items" ng-show="opt === 3">
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
</div>
</td>
</tr>
</table>
<table class="wrap-menu-item" ng-show="item === 3">
<tr>
<td class="menu-tabs">
<ul>
<li ng-click="opt = 1" ng-class="{'active': opt === 1}">Historias de Compras</li>
<li ng-click="opt = 2" ng-class="{'active': opt === 2}">Conductor de la semana</li>
<li ng-click="opt = 3" ng-class="{'active': opt === 3}">Expertos</li>
</ul>
</td>
<td class="menu-items">
<div class="block-items" ng-show="opt === 1">
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
</div>
<div class="block-items" ng-show="opt === 2">
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-2.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
</div>
<div class="block-items" ng-show="opt === 3">
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
<div class="col-sm-3">
<a href="#">
<img src="img/car-3.jpg" alt="#" />
<h3>Lanzamiento Ford Focus RS</h3>
</a>
</div>
</div>
</td>
</tr>
</table>
<table class="wrap-menu-item" ng-show="item === 5">
<tr>
<td class="menu-tabs">
<ul>
<li ng-click="opt = 1" ng-class="{'active': opt === 1}">Marcas</li>
<li ng-click="opt = 2" ng-class="{'active': opt === 2}">Tipos de Vehículos</li>
<li ng-click="opt = 3" ng-class="{'active': opt === 3}">Concesionarios</li>
</ul>
</td>
<td class="menu-items">
<div class="block-items" ng-show="opt === 1">
<div class="col-sm-3">
<ul class="block-submenu">
<li>
<a href="#">Alfa Romeo</a>
</li>
<li>
<a href="#">Audi</a>
</li>
<li>
<a href="#">BAIC</a>
</li>
<li>
<a href="#">BMW</a>
</li>
<li>
<a href="#">BYD</a>
</li>
<li>
<a href="#">Chana</a>
</li>
<li>
<a href="#">Changhe</a>
</li>
<li>
<a href="#">Citroen</a>
</li>
<li>
<a href="#">Dodge</a>
</li>
<li>
<a href="#">DONGFENG</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="block-submenu">
<li>
<a href="#">Alfa Romeo</a>
</li>
<li>
<a href="#">Audi</a>
</li>
<li>
<a href="#">BAIC</a>
</li>
<li>
<a href="#">BMW</a>
</li>
<li>
<a href="#">BYD</a>
</li>
<li>
<a href="#">Chana</a>
</li>
<li>
<a href="#">Changhe</a>
</li>
<li>
<a href="#">Citroen</a>
</li>
<li>
<a href="#">Dodge</a>
</li>
<li>
<a href="#">DONGFENG</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="block-submenu">
<li>
<a href="#">Alfa Romeo</a>
</li>
<li>
<a href="#">Audi</a>
</li>
<li>
<a href="#">BAIC</a>
</li>
<li>
<a href="#">BMW</a>
</li>
<li>
<a href="#">BYD</a>
</li>
<li>
<a href="#">Chana</a>
</li>
<li>
<a href="#">Changhe</a>
</li>
<li>
<a href="#">Citroen</a>
</li>
<li>
<a href="#">Dodge</a>
</li>
<li>
<a href="#">DONGFENG</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="block-submenu">
<li>
<a href="#">Alfa Romeo</a>
</li>
<li>
<a href="#">Audi</a>
</li>
<li>
<a href="#">BAIC</a>
</li>
<li>
<a href="#">BMW</a>
</li>
<li>
<a href="#">BYD</a>
</li>
<li>
<a href="#">Chana</a>
</li>
<li>
<a href="#">Changhe</a>
</li>
<li>
<a href="#">Citroen</a>
</li>
<li>
<a href="#">Dodge</a>
</li>
<li>
<a href="#">DONGFENG</a>
</li>
</ul>
</div>
</div>
<div class="block-items" ng-show="opt === 2">
<div class="col-sm-3">
<div class="block-car">
<a href="#">
<img src="img/autobus.png" alt="#" />
<span>Autobús</span>
</a>
</div>
<div class="block-car">
<a href="#">
<img src="img/camion.png" alt="#" />
<span>Camión</span>
</a>
</div>
<div class="block-car">
<a href="#">
<img src="img/camioneta.png" alt="#" />
<span>Camioneta</span>
</a>
</div>
<div class="block-car">
<a href="#">
<img src="img/cargo.png" alt="#" />
<span>Cargo</span>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="block-car">
<a href="#">
<img src="img/coupe.png" alt="#" />
<span>Coupé</span>
</a>
</div>
<div class="block-car">
<a href="#">
<img src="img/furgoneta.png" alt="#" />
<span>Furgoneta</span>
</a>
</div>
<div class="block-car">
<a href="#">
<img src="img/hatchback.png" alt="#" />
<span>Hatchback</span>
</a>
</div>
<div class="block-car">
<a href="#">
<img src="img/minibus.png" alt="#" />
<span>Minibús</span>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="block-car">
<a href="#">
<img src="img/minivan.png" alt="#" />
<span>Miniván</span>
</a>
</div>
<div class="block-car">
<a href="#">
<img src="img/montacargas.png" alt="#" />
<span>Montacarga</span>
</a>
</div>
<div class="block-car">
<a href="#">
<img src="img/sedan.png" alt="#" />
<span>Sedán</span>
</a>
</div>
<div class="block-car">
<a href="#">
<img src="img/wagon.png" alt="#" />
<span>Wagon</span>
</a>
</div>
</div>
<div class="col-sm-3">
<div class="block-car">
<a href="#">
<img src="img/yipeta.png" alt="#" />
<span>Yipeta</span>
</a>
</div>
</div>
</div>
<div class="block-items" ng-show="opt === 3">
<div class="col-sm-3">
<ul class="block-submenu">
<li>
<a href="#">Agencia Bella</a>
</li>
<li>
<a href="#">Autobritanica</a>
</li>
<li>
<a href="#">Autocamiones</a>
</li>
<li>
<a href="#">Autogermanica</a>
</li>
<li>
<a href="#">Autozama</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="block-submenu">
<li>
<a href="#">Avant Auto</a>
</li>
<li>
<a href="#">Avelino Abreu</a>
</li>
<li>
<a href="#">Bonanza Dominicana</a>
</li>
<li>
<a href="#">British Motors</a>
</li>
<li>
<a href="#">Delta Comercial</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="block-submenu">
<li>
<a href="#">Eco Motors</a>
</li>
<li>
<a href="#">Empire Motors</a>
</li>
<li>
<a href="#">Empresas Dominicanas</a>
</li>
<li>
<a href="#">Euromotors</a>
</li>
<li>
<a href="#">Grupo Viamar</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<ul class="block-submenu">
<li>
<a href="#">Magna Motors</a>
</li>
<li>
<a href="#">Peravia Motors</a>
</li>
<li>
<a href="#">Peynado Ga</a>
</li>
<li>
<a href="#">Reid & Compañia</a>
</li>
<li>
<a href="#">Técnica</a>
</li>
</ul>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="container wrap-search-carousel hidden-xs hidden-sm">
<div class="wrap-search">
<form>
<div class="row">
<div class="col-md-3">
<select>
<option>Concesionarios</option>
<option>Concesionarios</option>
<option>Concesionarios</option>
</select>
</div>
<div class="col-md-2">
<select>
<option>Marca</option>
<option>Marca</option>
<option>Marca</option>
</select>
</div>
<div class="col-md-2">
<select>
<option>Tipo de vehiculo</option>
<option>Tipo de vehiculo</option>
<option>Tipo de vehiculo</option>
</select>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6">
<select>
<option>Precio desde</option>
<option>Precio desde</option>
<option>Precio desde</option>
</select>
</div>
<div class="col-md-6 ">
<select>
<option>Precio hasta</option>
<option>Precio hasta</option>
<option>Precio hasta</option>
</select>
</div>
</div>
</div>
<div class="col-md-1">
<input type="submit" value="buscar" class="btn-submit" />
</div>
</div>
</form>
</div>
</div>
<!-- BEGIN SLIDESHOW BACKGROUND -->
<div class="wrapper-slideshow">
<div class="wrapper-bg-block">
<div class="bg-top">
<div class="wrapper-light">
<i class="animated-ltr bg-light hidden-xs"></i>
<i class="animated-ltr bg-light hidden-xs"></i>
<i class="animated-ltr bg-light"></i>
<i class="animated-rtl bg-light"></i>
<i class="animated-rtl bg-light hidden-xs"></i>
<i class="animated-rtl bg-light hidden-xs"></i>
</div>
</div>
<div class="bg-bottom">
<img class="hidden-xs hidden-sm" src="img/bg-slideshow-lg.png" alt="#" />
<img class="hidden-md hidden-lg" src="img/bg-slideshow-sm.png" alt="#" />
<i class="dotted-top"></i>
<i class="dotted-bottom"></i>
</div>
</div>
<!-- BEGIN DESKTOP SLIDESHOW -->
<div class="block-slideshow hidden-xs hidden-sm" dir="rtl">
<div class="box exhibit item-1">
<div class="wrapper-item">
<!-- BEGIN CAR STAND -->
<div class="box-item">
<div class="square-img item-right">
<img src="img/slide-car-2.png" alt="#" />
<label class="btn-plus" for="car2">+</label>
<input type="radio" class="square-check" id="car2" name="carblock">
<div class="square-info">
<div class="info-block-slideshow">
<img src="img/logo-brand-car.png" alt="#" />
<b>Jazz 2</b>
<small>Agencia Bella</small>
</div>
<div class="info-button-slideshow">
<a href="#"><span>Calcula tu Préstamo</span></a>
<a href="#"><span>Aplica Ahora</span></a>
</div>
<i class="btn-close">×</i>
</div>
</div>
</div>
<!-- BEGIN CAR STAND -->
<div class="box-item">
<div class="square-img item-left">
<img src="img/slide-car-1.png" alt="#" />
<label class="btn-plus" for="car1">+</label>
<input type="radio" class="square-check" id="car1" name="carblock">
<div class="square-info">
<div class="info-block-slideshow">
<img src="img/logo-brand-car.png" alt="#" />
<b>Jazz 1</b>
<small>Agencia Bella</small>
</div>
<div class="info-button-slideshow">
<a href="#"><span>Calcula tu Préstamo</span></a>
<a href="#"><span>Aplica Ahora</span></a>
</div>
<i class="btn-close">×</i>
</div>
</div>
</div>
</div>
</div>
<div class="box exhibit item-2">
<div class="wrapper-item">
<!-- BEGIN CAR STAND -->
<div class="box-item">
<div class="square-img item-right">
<img src="img/slide-car-2.png" alt="#" />
<label class="btn-plus" for="car4">+</label>
<input type="radio" class="square-check" id="car4" name="carblock">
<div class="square-info">
<div class="info-block-slideshow">
<img src="img/logo-brand-car.png" alt="#" />
<b>Jazz 4</b>
<small>Agencia Bella</small>
</div>
<div class="info-button-slideshow">
<a href="#"><span>Calcula tu Préstamo</span></a>
<a href="#"><span>Aplica Ahora</span></a>
</div>
<i class="btn-close">×</i>
</div>
</div>
</div>
<!-- BEGIN CAR STAND -->
<div class="box-item">
<div class="square-img item-left">
<img src="img/slide-car-1.png" alt="#" />
<label class="btn-plus" for="car3">+</label>
<input type="radio" class="square-check" id="car3" name="carblock">
<div class="square-info">
<div class="info-block-slideshow">
<img src="img/logo-brand-car.png" alt="#" />
<b>Jazz 3</b>
<small>Agencia Bella</small>
</div>
<div class="info-button-slideshow">
<a href="#"><span>Calcula tu Préstamo</span></a>
<a href="#"><span>Aplica Ahora</span></a>
</div>
<i class="btn-close">×</i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN MOBILE SLIDESHOW -->
<div class="block-slideshow-mob hidden-md hidden-lg" dir="rtl">
<!-- BEGIN CAR STAND -->
<div class="exhibit item-1">
<div class="wrapper-item">
<div class="box-item">
<div class="square-img">
<img src="img/slide-car-1.png" alt="#" />
</div>
</div>
</div>
<div class="info-slideshow">
<div class="info-brand-slideshow">
<div class="info-block-slideshow">
<img src="img/logo-brand-car.png" alt="#" />
<b>Jazz</b>
<small>Agencia Bella</small>
</div>
</div>
<div class="info-button-slideshow">
<a href="#"><span>Calcula tu Préstamo</span></a>
<a href="#"><span>Aplica Ahora</span></a>
</div>
</div>
</div>
<!-- BEGIN CAR STAND -->
<div class="exhibit item-2">
<div class="wrapper-item">
<div class="box-item">
<div class="square-img">
<img src="img/slide-car-1.png" alt="#" />
</div>
</div>
</div>
<div class="info-slideshow">
<div class="info-brand-slideshow">
<div class="info-block-slideshow">
<img src="img/logo-brand-car.png" alt="#" />
<b>Jazz</b>
<small>Agencia Bella</small>
</div>
</div>
<div class="info-button-slideshow">
<a href="#"><span>Calcula tu Préstamo</span></a>
<a href="#"><span>Aplica Ahora</span></a>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN BLOCK BANNER -->
<div class="block-banner text-center">
<a href="#">
<img src="img/car-outline.png" alt="#" />
<span>VEHICULOS EN OFERTAS</span>
</a>
</div>
<!-- BEGIN WRAP CHIPS -->
<div class="wrapper-carousel-item">
<div class="container">
<div class="wrap-chips carousel-item">
<div class="col-md-3">
<div class="chip">
<img class="offer-vehicle-badge" src="img/star.png" alt="">
<a href="#">
<img src="img/car.jpg" alt="#" />
</a>
<ul class="chip-info">
<li>
<span>Marca:</span>
<span>Nissan</span>
</li>
<li>
<span>Modelo:</span>
<span>Terrano XUI</span>
</li>
<li>
<span>Precio:</span>
<span>$3,789,500</span>
</li>
</ul>
<ul class="share">
<li class="lever">
<span>Automatico</span>
</li>
<li class="fuel">
<span>Gasolina</span>
</li>
<li>
<a href="#">Compartir</a>
</li>
</ul>
<a class="action-item" href="#">
<span>Mas detalles</span>
</a>
</div>
</div>
<div class="col-md-3">
<div class="chip">
<img class="offer-vehicle-badge" src="img/star.png" alt="">
<a href="#">
<img src="img/car.jpg" alt="#" />
</a>
<ul class="chip-info">
<li>
<span>Marca:</span>
<span>Nissan</span>
</li>
<li>
<span>Modelo:</span>
<span>Terrano XUI</span>
</li>
<li>
<span>Precio:</span>
<span>$3,789,500</span>
</li>
</ul>
<ul class="share">
<li class="lever">
<span>Automatico</span>
</li>
<li class="fuel">
<span>Gasolina</span>
</li>
<li>
<a href="#">Compartir</a>
</li>
</ul>
<a class="action-item" href="#">
<span>Mas detalles</span>
</a>
</div>
</div>
<div class="col-md-3">
<div class="chip">
<img class="offer-vehicle-badge" src="img/star.png" alt="">
<a href="#">
<img src="img/car.jpg" alt="#" />
</a>
<ul class="chip-info">
<li>
<span>Marca:</span>
<span>Nissan</span>
</li>
<li>
<span>Modelo:</span>
<span>Terrano XUI</span>
</li>
<li>
<span>Precio:</span>
<span>$3,789,500</span>
</li>
</ul>
<ul class="share">
<li class="lever">
<span>Automatico</span>
</li>
<li class="fuel">
<span>Gasolina</span>
</li>
<li>
<a href="#">Compartir</a>
</li>
</ul>
<a class="action-item" href="#">
<span>Mas detalles</span>
</a>
</div>
</div>
<div class="col-md-3">
<div class="chip">
<img class="offer-vehicle-badge" src="img/star.png" alt="">
<a href="#">
<img src="img/car.jpg" alt="#" />
</a>
<ul class="chip-info">
<li>
<span>Marca:</span>
<span>Nissan</span>
</li>
<li>
<span>Modelo:</span>
<span>Terrano XUI</span>
</li>
<li>
<span>Precio:</span>
<span>$3,789,500</span>
</li>
</ul>
<ul class="share">
<li class="lever">
<span>Automatico</span>
</li>
<li class="fuel">
<span>Gasolina</span>
</li>
<li>
<a href="#">Compartir</a>
</li>
</ul>
<a class="action-item" href="#">
<span>Mas detalles</span>
</a>
</div>
</div>
</div>
<a class="btn-emphasis" href="#">
<span>VER TODOS LOS VEHÍCULOS EN OFERTAS</span>
</a>
</div>
</div>
<!-- BEGIN ADS -->
<div class="container">
<div class="ads banner-row">
<a href="#">
<img src="img/ads.jpg" alt="#" />
</a>
</div>
</div>
<!-- BEGIN NEWS BLOCK -->
<div class="container news-block hidden-xs">
<div class="col-md-6">
<div class="row block-rtl">
<div class="col-sm-6 img-news">
<img src="img/img-news.jpg" alt="#" />
</div>
<div class="col-sm-6 info-news">
<h3 class="title-md">Ford Focus RS 2016 se presenta</h3>
<p class="info-init">
Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry's standard
dummy text ever...
</p>
<a class="opt-more" href="#">Leer Más</a>
</div>
</div>
<div class="row block-ltr">
<div class="col-sm-6 img-news">
<a href="#" class="btn-play"></a>
<img src="img/img-news-2.jpg" alt="#" />
</div>
<div class="col-sm-6 info-news">
<h3 class="title-md">Videos</h3>
<p class="info-init">
Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry's standard
dummy text ever...
</p>
<a class="opt-more" href="#">Leer Más</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row block-ttb">
<div class="col-sm-6 col-md-12 img-news">
<img src="img/img-news-3.jpg" alt="#" />
</div>
<div class="col-sm-6 col-md-12 info-news">
<h3 class="title-md">Ford Focus RS 2016 se presenta</h3>
<p class="info-init">
Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry's standard
dummy text ever...
</p>
<a class="opt-more" href="#">Leer Más</a>
</div>
</div>
</div>
<div class="col-md-3 wrapper-form">
<h4 class="title-form-md">Pregúntale al experto</h4>
<div class="block-form">
<h5 class="title-form-sm">
¡Pregunta todo lo que quieras saber de tu Autoferia Popular!
</h5>
<input class="sidebar-input" type="text" placeholder="Nombre" />
<input class="sidebar-input" type="email" placeholder="Correo" />
<textarea class="sidebar-input" name="#" placeholder="Pregunta"></textarea>
<button class=" btn-form" type="submit">ENVIAR</button>
<a class="btn-url" href="#">
<span>Ver Todas las Preguntas</span>
</a>
</div>
</div>
</div>
<!-- BEGIN MOBILE NEWS -->
<div class="wrapper-carousel-news visible-xs">
<div class="block-news">
<img src="img/img-news.jpg" alt="#" />
<div class="box-news">
<h3 class="title-md">Ford Focus RS 2016 se presenta</h3>
<p class="info-init">
Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry's standard
dummy text ever...
</p>
<a class="opt-more" href="#">Leer Más</a>
</div>
</div>
<div class="block-news">
<img src="img/img-news.jpg" alt="#" />
<div class="box-news">
<h3 class="title-md">Ford Focus RS 2016 se presenta</h3>
<p class="info-init">
Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry's standard
dummy text ever...
</p>
<a class="opt-more" href="#">Leer Más</a>
</div>
</div>
<div class="block-news">
<div class="block-img-news">
<span class="btn-play"></span>
<img src="img/img-news.jpg" alt="#" />
</div>
<div class="box-news">
<h3 class="title-md">Video</h3>
<p class="info-init">
Lorem Ipsum is simply dummy text of the printing and type setting industry. Lorem Ipsum has been the industry's standard
dummy text ever...
</p>
<a class="opt-more" href="#">Leer Más</a>
</div>
</div>
</div>
<!-- BEGIN FORM MOBILE -->
<div class="container news-block news-mob visible-xs">
<div class="wrapper-form">
<h4 class="title-form-md">Pregúntale al experto</h4>
<div class="block-form">
<h5 class="title-form-sm">
¡Pregunta todo lo que quieras saber de tu Autoferia Popular!
</h5>
<input class="sidebar-input" type="text" placeholder="Nombre" />
<input class="sidebar-input" type="email" placeholder="Correo" />
<textarea class="sidebar-input" name="#" placeholder="Pregunta"></textarea>
<button class=" btn-form" type="submit">ENVIAR</button>
<a class="btn-url" href="#">
<span>Ver Todas las Preguntas</span>
</a>
</div>
</div>
</div>
<!-- BEGIN FOOTER -->
<div class="wrap-footer">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 logo-footer">
<a href="#">
<img src="img/logo-footer.png" alt="#" />
</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.est laborum.
</p>
<div class="wrap-social">
<a href="#">
<img src="img/icon-fb.jpg" alt="facebook" />
</a>
<a href="#">
<img src="img/icon-tw.jpg" alt="twitter" />
</a>
<a href="#">
<img src="img/icon-yt.jpg" alt="youtube" />
</a>
</div>
</div>
<div class="col-sm-6 col-md-3">
<h4 class="title-indent">INSTAGRAM</h4>
<div class="carousel-instagram">
<div>
<img src="img/img-news.jpg" alt="#" />
</div>
<div>
<img src="img/img-news.jpg" alt="#" />
</div>
<div>
<img src="img/img-news.jpg" alt="#" />
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<h4>TWEETS RECIENTES</h4>
<div>
<!-- twitter code here! -->
</div>
</div>
<div class="col-sm-6 col-md-3">
<h4>FACEBOOK</h4>
<div>
<!-- facebook code here! -->
</div>
</div>
</div>
<div class="title-split">
<h3>CONCESIONARIOS PARTICIPANTES:</h3>
</div>
<div class="wrapper-logos hidden-xs hidden-sm">
<a href="#">
<img src="img/logo-1.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-2.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-3.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-4.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-5.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-6.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-7.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-8.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-9.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-10.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-11.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-12.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-13.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-14.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-15.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-16.jpg" alt="#" />
</a>
<a href="#">
<img src="img/logo-17.jpg" alt="#" />
</a>
</div>
<!-- BEGIN MOBILE LOGOS -->
<div class="carousel-logos visible-xs visible-sm">
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-1.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-2.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-3.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-4.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-5.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-6.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-7.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-8.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-9.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-10.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-11.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-12.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-13.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-14.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-15.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-16.jpg" alt="#" />
</div>
</a>
</div>
<div>
<a href="#">
<div class="frame">
<i class="helper"></i>
<img src="img/logo-17.jpg" alt="#" />
</div>
</a>
</div>
</div>
<div class="title-split">
<ul>
<li>
<a href="#">INICIO</a>
</li>
<li>
<a href="#">NOTICIAS</a>
</li>
<li>
<a href="#">PRÉSTAMOS</a>
</li>
<li>
<a href="#">VEHÍCULOS</a>
</li>
<li>
<a href="#">REALIDAD VIRTUAL</a>
</li>
</ul>
<span>© 2017 Banco Popular. Todos los Derechos Reservados.
Diseñado & Desarrollado por: <a href="#">Mente Elástica®</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
//begin position random code
var box = $(".box");
for (var i = 0; i < box.length; i++) {
var target = Math.floor(Math.random() * box.length - 1) + 1;
var target2 = Math.floor(Math.random() * box.length - 1) + 1;
box.eq(target).before(box.eq(target2));
}
//begin carousel code
$('.block-carousel').slick({
rtl: true,
dots: false,
autoplay: true,
infinite: true,
autoplaySpeed: 5000
});
//begin slideshow update code
$('.block-slideshow, .block-slideshow-mob').slick({
rtl: true,
dots: false,
autoplay: true,
infinite: true,
slidesToShow: 1,
autoplaySpeed: 5000
});
$('.btn-close').click(function(){
$('.square-check').prop('checked', false); // Checks it
});
//begin carousel code
$('.wrapper-carousel-news, .carousel-instagram').slick({
infinite: false,
dots: false
});
//begin carousel code
$('.carousel-logos').slick({
dots: false,
autoplay: true,
infinite: false,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1
}
}
]
});
//begin carousel code
$('.carousel-item').slick({
infinite: false,
dots: false,
slidesToShow: 4,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1
}
}
]
});
</script>
</body>
</html>
.wrapper-carousel {
z-index: 0;
padding-top: 2vw;
position: relative;
background-color: #000;
}
.wrap-search-carousel {
top: -20px;
z-index: 1;
position: relative;
margin-bottom: -82px;
}
.block-info,
.block-img-news {
position: relative;
}
.block-top {
left: 0;
right: 0;
height: 31vw;
position: absolute;
background: url('../img/paparazzi.gif') center -2vw #000 no-repeat;
background-size: cover;
}
.block-bottom {
left: 0;
right: 0;
top: 33vw;
height: 10vw;
position: absolute;
background: url(../img/carpet.jpg) center top #06c3d6 repeat-x;
background-size: cover;
}
.block-middle {
left: 0;
right: 0;
z-index: 1;
height: 14vw;
top: 21.3vw;
position: absolute;
background: yellow;
background: url('../img/rope.png') center top repeat-x;
background-size: 92vw;
}
.block-carousel {
z-index: 1;
width: 100%;
}
/*-- begin carousel buttons --*/
.slick-prev,
.slick-next {
top: 35%;
z-index: 1;
padding: 0;
width: 60px;
height: 60px;
border: none;
font-size: 0;
outline: none;
display: block;
line-height: 0;
cursor: pointer;
color: transparent;
position: absolute;
background: transparent;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
outline: none;
color: transparent;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: .25;
}
.slick-prev:before,
.slick-next:before {
width: 60px;
height: 60px;
color: white;
opacity: .75;
line-height: 1;
font-size: 20px;
font-family: 'slick';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: 2vw;
}
.slick-next {
right: 15px;
}
.slick-prev:before {
content: "";
display: block;
background: url('../img/arrow-left-initial.png') center no-repeat;
background-size: contain;
}
.slick-next:before {
content: "";
display: block;
background: url('../img/arrow-right-initial.png') center no-repeat;
background-size: contain;
}
.box-img img {
width: 75vw;
margin: 10vw auto 0;
position: relative;
}
.box-info {
width: 100%;
color: #fff;
margin-top: 60px;
padding: 2vw 1vw;
position: absolute;
max-width: 340px !important;
z-index: 1;
}
.slick-active .animate {
opacity: 0;
-webkit-animation: fade 1s 3s forwards;
animation: fade 1s 3s forwards;
}
.box-info h2,
.overlay-info h2 {
font-size: 18px;
margin-bottom: 0;
font-family: 'neobold';
text-transform: uppercase;
}
.box-info h3,
.overlay-info h3 {
margin-top: 7px;
font-size: 14px;
font-family: 'neoregular';
}
.box-info img,
.overlay-info img {
width: auto;
display: block;
margin: 0 auto;
max-height: 50px;
}
.box-action {
z-index: 2;
font-size: 12px;
padding: 0 35px;
overflow: hidden;
position: relative;
}
.opt-carousel span {
color: #fff;
cursor: pointer;
padding-right: 15px;
background: url(../img/arrow-white.png) right 0 no-repeat;
background-size: 10px;
}
.opt-carousel:hover span {
color: #fff;
}
.item-1 .box-info {
background: -moz-linear-gradient(top, rgba(22, 38, 94, 1) 0%, rgba(22, 38, 93, 1) 1%, rgba(13, 23, 57, 0.9) 53%, rgba(13, 23, 57, 0.8) 100%);
background: -webkit-linear-gradient(top, rgba(22, 38, 94, 1) 0%, rgba(22, 38, 93, 1) 1%, rgba(13, 23, 57, 0.9) 53%, rgba(13, 23, 57, 0.8) 100%);
background: linear-gradient(to bottom, rgba(22, 38, 94, 1) 0%, rgba(22, 38, 93, 1) 1%, rgba(13, 23, 57, 0.9) 53%, rgba(13, 23, 57, 0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16265e', endColorstr='#cc0d1739', GradientType=0);
}
.item-2 .box-info {
background: -moz-linear-gradient(top, rgba(185, 11, 28, 1) 0%, rgba(150, 9, 18, 0.65) 49%, rgba(150, 9, 18, 0.68) 100%);
background: -webkit-linear-gradient(top, rgba(185, 11, 28, 1) 0%, rgba(150, 9, 18, 0.65) 49%, rgba(150, 9, 18, 0.68) 100%);
background: linear-gradient(to bottom, rgba(185, 11, 28, 1) 0%, rgba(150, 9, 18, 0.65) 49%, rgba(150, 9, 18, 0.68) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b90b1c', endColorstr='#ad960912', GradientType=0);
}
.item-3 .box-info {
background: -moz-linear-gradient(top, rgba(239, 170, 5, 1) 0%, rgba(214, 144, 6, 0.65) 49%, rgba(214, 144, 6, 0.68) 100%);
background: -webkit-linear-gradient(top, rgba(239, 170, 5, 1) 0%, rgba(214, 144, 6, 0.65) 49%, rgba(214, 144, 6, 0.68) 100%);
background: linear-gradient(to bottom, rgba(239, 170, 5, 1) 0%, rgba(214, 144, 6, 0.65) 49%, rgba(214, 144, 6, 0.68) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efaa05', endColorstr='#add69006', GradientType=0);
}
.item-4 .box-info {
background: -moz-linear-gradient(top, rgba(167,192,9,1) 0%, rgba(167,192,9,0.7) 49%, rgba(103,119,6,0.6) 100%);
background: -webkit-linear-gradient(top, rgba(167,192,9,1) 0%,rgba(167,192,9,0.7) 49%,rgba(103,119,6,0.6) 100%);
background: linear-gradient(to bottom, rgba(167,192,9,1) 0%,rgba(167,192,9,0.7) 49%,rgba(103,119,6,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7c009', endColorstr='#99677706',GradientType=0 );
}
.box-mob-info {
width: 100%;
height: 10vw;
background-color: red;
}
.box-info.box-mob {
margin: 0;
position: static;
max-width: none !important;
padding: 20px 0;
}
.block-banner {
width: 100%;
padding: 26px;
background-color: #00387d;
}
.block-banner a {
color: #fff;
font-size: 20px;
font-family: 'neobold';
}
.block-banner img {
max-width: 95px;
}
.block-banner span {
top: 5px;
margin-left: 15px;
position: relative;
display: inline-block;
}
.carousel-item {
overflow: visible;
margin-bottom: 25px;
}
.carousel-item .slick-prev {
left: -3vw;
}
.carousel-item .slick-next {
right: -3vw;
}
.carousel-item .slick-prev,
.carousel-item .slick-next,
.carousel-instagram .slick-prev,
.carousel-instagram .slick-next,
.wrapper-carousel-news .slick-prev,
.wrapper-carousel-news .slick-next {
top: 50%;
}
.carousel-item .slick-next:before,
.wrapper-carousel-news .slick-next:before {
background: url('../img/arrow-right-blue.png') center no-repeat;
background-size: contain;
}
.carousel-item .slick-prev:before,
.wrapper-carousel-news .slick-prev:before {
background: url('../img/arrow-left-blue.png') center no-repeat;
background-size: contain;
}
.offer-vehicle-badge {
max-width: 74px;
position: absolute;
}
.carousel-item .chip>a {
padding: 0;
}
.chip>a.action-item {
padding: 10px;
}
.btn-emphasis {
width: 50%;
color: #fff;
padding: 10px;
display: block;
text-align: center;
margin: 0 auto 20px;
background-color: #ed8b00;
}
.btn-emphasis:hover,
.overlay-info a:hover {
color: #fff;
outline: none;
text-decoration: none;
}
.btn-emphasis span {
padding: 3px 20px 0 0;
background: url(../img/arrow-white.png) right 2px no-repeat;
background-size: 14px;
}
.wrapper-carousel-item {
background-color: #fff;
}
h3.title-md {
color: #01568d;
font-size: 23px;
font-family: 'neobold';
}
p.info-init {
font-size: 16px;
margin-top: 10px;
}
.banner-row img {
margin: 30px 0;
}
.wrapper-form {
background-color: #012169;
padding: 0;
}
.block-form {
padding: 20px 20px 80px;
}
.title-form-md {
color: #fff;
font-family: 'neobold';
padding: 20px;
background-color: #00387d;
margin: 0;
}
.title-form-sm {
margin: 0;
color: #fff;
line-height: 20px;
}
.sidebar-input {
width: 100%;
color: #fff;
outline: none;
padding: 10px;
margin-top: 20px;
background-color: #004282;
border: 1px solid #006799;
}
textarea.sidebar-input {
min-height: 150px;
}
.btn-url:hover,
.title-split a,
.title-split a:hover,
.sidebar-input::-webkit-input-placeholder {
color: #fff;
}
.btn-form {
width: 100%;
border: none;
color: #fff;
padding: 10px;
display: block;
font-size: 18px;
margin-top: 15px;
background-color: #ed8b00;
}
.btn-url {
left: 0;
right: 0;
bottom: 0;
color: #fff;
padding: 20px;
display: block;
position: absolute;
text-align: center;
background-color: #00c1d5;
}
.btn-url span {
padding: 10px 30px 10px 0;
background: url(../img/arrow-white.png) right center no-repeat;
background-size: 20px;
white-space: nowrap;
}
.news-block {
margin-bottom: 50px;
}
.box-news {
margin: 15px;
}
.block-news {
background-color: #fff;
margin: 0 60px 40px;
box-shadow: 0 0 9px rgba(0, 0, 0, .2);
}
.block-news img {
width: 100%;
height: auto;
display: block;
}
.carousel-instagram {
padding: 0 30px;
}
.carousel-instagram .slick-prev {
left: -15px;
}
.carousel-instagram .slick-next {
right: -15px;
}
.wrapper-logos {
overflow: hidden;
text-align: center;
}
.wrapper-logos img {
width: auto;
height: 75px;
margin: 0 10px 0 0;
}
.title-split {
padding: 30px 0;
margin-top: 40px;
border-top: 1px solid #48c0e3;
}
.title-split h3 {
margin: 0;
font-size: 13px;
color: #48c0e3;
font-family: 'neomedium';
}
.nav-footer {
padding: 0;
}
.nav-footer li {
display: inline-block;
}
.title-split span {
float: left;
color: #fff;
font-size: 12px;
}
.title-split ul {
margin: 0;
padding: 0;
float: right;
font-size: 12px;
}
.title-split li {
display: inline-block;
padding: 0 0 0 10px;
}
.wrapper-logos table {
width: 100%;
}
.frame {
height: 70px;
margin: 0 1em;
text-align: center;
white-space: nowrap;
}
.frame img {
width: auto;
max-height: 90px;
max-width: 220px;
vertical-align: middle;
display: inline-block;
}
.helper {
height: 100%;
display: inline-block;
vertical-align: middle;
}
.nav > li:first-child a.opt-nav {
padding-left: 15px;
}
.navbar-default .navbar-nav>li>a.opt-nav:hover {
color: #01568d;
background: #00c1d5;
}
.logo-footer > a > img {
width: 70%;
height: auto;
display: block;
}
.logo-footer p {
color: #fff;
font-size: 14px;
margin: 20px 0 10px;
}
.btn-play {
top: 50%;
left: 50%;
width: 130px;
height: 130px;
margin: -65px;
display: block;
cursor: pointer;
position: absolute;
background: url(../img/btn-play.png) center no-repeat;
background-size: contain;
}
/*-- BEGIN UPDATE --*/
.wrapp-carousel {
position: relative;
}
.block-people {
background-color: #000;
}
.block-carpet {
height: 40vw;
background: url('../img/carpet.png') repeat-x;
background-size: contain;
}
.block-people img {
width: 100%;
display: block;
margin: 0 auto;
max-width: 1400px;
}
.overlay-info {
display: block;
position: absolute;
top: 30px;
right: 15px;
bottom: 0;
left: 0;
max-width: 320px;
min-height: 240px;
z-index: 3;
color: #fff;
margin-top: 50px;
}
.box-img {
position: relative;
z-index: 2;
}
/* BEGIN SLIDESHOW 2018 */
.block-slideshow,
.wrapper-slideshow {
z-index: 0;
height: 35vw;
overflow: hidden;
position: relative;
}
.wrapper-slideshow .slick-arrow {
top: 50%;
}
.bg-top {
top: 0;
left: 0;
right: 0;
bottom: 41%;
overflow: hidden;
position: absolute;
background: #003b77; /* Old browsers */
background: -moz-linear-gradient(left, #003b77 0%, #0064a0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #003b77 0%,#0064a0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #003b77 0%,#0064a0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#003b77', endColorstr='#0064a0',GradientType=1 ); /* IE6-9 */
}
.bg-bottom {
left: 0;
right: 0;
top: 59%;
bottom: 0;
position: absolute;
background-color: #0c224c;
z-index: 0;
}
.dotted-top,
.dotted-bottom {
left: 0;
right: 0;
bottom: 0;
z-index: 1;
height: 30px;
position: absolute;
border-bottom: 7px solid #06162d;
background: url('../img/dotted.gif') bottom repeat-x;
background-size: 50px;
}
.dotted-top {
top: 0;
bottom: auto;
height: 15px;
background-size: 30px;
border-bottom: 5px solid #06162d;
}
.bg-bottom img {
z-index: 1;
bottom: 5%;
z-index: 2;
display: block;
max-width: 100%;
position: absolute;
min-width: 100%;
}
.block-slideshow .box {
height: 50vw;
max-height: 100%;
position: relative;
}
.wrapper-item {
height: 50vw;
display: flex;
overflow: hidden;
}
.box-item {
width: 100%;
position: relative;
display: flex;
align-items: center;
}
.wrapper-light {
display: flex;
margin-top: -25px;
}
.bg-light {
width: 50px;
height: 20vw;
display: block;
width: 100%;
background: url(../img/bg-light.png) center no-repeat;
background-size: 6vw;
transform: rotate(-22deg);
transform-origin: top;
}
.animated-ltr {
-webkit-animation: moving-ltr 3s infinite;
-webkit-animation-direction: alternate;
animation: moving-ltr 3s infinite;
animation-direction: alternate;
}
.animated-rtl {
-webkit-animation: moving-rtl 3s infinite;
-webkit-animation-direction: alternate;
animation: moving-rtl 3s infinite;
animation-direction: alternate;
}
.info-slideshow {
min-height: 30vw;
background-color: #2ee1ec;
}
.block-slideshow .slick-slide {
height: 50vw;
}
.info-brand-slideshow {
padding: 2vw;
height: 28.7vw;
display: flex;
position: relative;
align-items: center;
text-align: center;
text-transform: uppercase;
background: #2ee1ec; /* Old browsers */
background: -moz-linear-gradient(left, #2ee1ec 0%, #0cadc8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #2ee1ec 0%,#0cadc8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #2ee1ec 0%,#0cadc8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ee1ec', endColorstr='#0cadc8',GradientType=1 ); /* IE6-9 */
}
.info-brand-slideshow img {
width: auto;
height: 15vw;
display: block;
margin: 0 auto;
padding-bottom: 2vw;
}
.info-brand-slideshow b {
color: #094785;
display: block;
font-family: 'neobold';
margin: 1vw;
}
.info-brand-slideshow small {
color: #4e4e4e;
display: block;
font-weight: 700;
}
.info-button-slideshow {
display: flex;
}
.info-button-slideshow a {
width: 100%;
padding: 2vw;
outline: none;
color: #0a2c6f;
text-align: center;
display: inline-block;
background-color: blue;
font-family: 'neomedium';
text-transform: uppercase;
background: #5fcadc; /* Old browsers */
background: -moz-linear-gradient(top, #5fcadc 0%, #acebf2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #5fcadc 0%,#acebf2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #5fcadc 0%,#acebf2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fcadc', endColorstr='#acebf2',GradientType=0 ); /* IE6-9 */
}
.info-button-slideshow a span {
line-height: 3.5vw;
padding-right: 18px;
display: inline-block;
font-family: 'neobold';
background: url('../img/arrow-right-button.png') right 0 no-repeat;
background-size: 2.5vw;
}
.info-button-slideshow a:first-child {
border-left: .6vw solid #17cddf;
}
.info-block-slideshow {
padding: 1vw;
margin: 0 auto;
text-align: center;
}
.block-slideshow-mob .slick-arrow {
top: auto;
bottom: 10%;
}
.square-info {
top: -5vw;
z-index: 0;
opacity: 0;
width: 100%;
max-width: 13vw;
position: absolute;
background: #7de7ef;
-webkit-transition: .2s all ease-in-out;
-moz-transition: .2s all ease-in-out;
-ms-transition: .2s all ease-in-out;
-o-transition: .2s all ease-in-out;
transition: .2s all ease-in-out;
text-transform: uppercase;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: -moz-linear-gradient(45deg, #7de7ef 0%, #07aac5 100%);
background: -webkit-linear-gradient(45deg, #7de7ef 0%,#07aac5 100%);
background: linear-gradient(45deg, #7de7ef 0%,#07aac5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7de7ef', endColorstr='#07aac5',GradientType=1 );
}
.item-left .square-info {
right: -9.5vw;
}
.item-right .square-info {
right: 18vw;
}
.square-info::before {
top: 0;
left: 0;
right: 0;
height: 5px;
content: "";
display: block;
position: absolute;
background: #07aac5; /* Old browsers */
background: -moz-linear-gradient(left, #07aac5 0%, #22d7e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #07aac5 0%,#22d7e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #07aac5 0%,#22d7e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07aac5', endColorstr='#22d7e5',GradientType=1 ); /* IE6-9 */
}
.square-info::after {
top: 0;
left: 0;
bottom: 0;
width: 5px;
content: "";
display: block;
position: absolute;
background: #07aac5; /* Old browsers */
background: -moz-linear-gradient(top, #07aac5 0%, #22d7e5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #07aac5 0%,#22d7e5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #07aac5 0%,#22d7e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#07aac5', endColorstr='#22d7e5',GradientType=0 ); /* IE6-9 */
}
.square-info .btn-close {
width: 2vw;
height: 2vw;
top: -0.3vw;
color: #fff;
right: -0.5vw;
display: block;
font-weight: 700;
font-size: 1.6vw;
line-height: 2vw;
text-align: center;
border-radius: 50%;
position: absolute;
font-style: normal;
background-color: #04397a;
border: 3px solid #44c1d6;
}
.info-block-slideshow img {
margin: 0 auto .5vw;
max-height: 4vw !important;
min-height: auto !important;
}
.info-block-slideshow b {
color: #004081;
display: block;
font-family: 'neobold';
}
.block-slideshow-mob .info-block-slideshow img {
max-height: none !important;
}
.square-img input[type="radio"]:checked + .square-info {
opacity: 1 !important;
}
.btn-plus {
top: 3%;
margin: 0;
z-index: 1;
width: 30px;
height: 30px;
display: block;
cursor: pointer;
position: absolute;
border-radius: 50%;
text-indent: -9999em;
background: url(../img/btn-plus.gif) no-repeat;
background-size: 30px;
}
.item-left .btn-plus {
right: 20%;
}
.item-right .btn-plus {
left: 20%;
}
@-webkit-keyframes moving-ltr {
0% {
-webkit-transform: rotate(-22deg);
}
50% {
-webkit-transform: rotate(22deg);
}
100% {
-webkit-transform: rotate(-22deg);
}
}
@-webkit-keyframes moving-rtl {
0% {
-webkit-transform: rotate(22deg);
}
50% {
-webkit-transform: rotate(-22deg);
}
100% {
-webkit-transform: rotate(22deg);
}
}
keyframes moving-ltr {
0% {
transform: rotate(-22deg);
}
50% {
transform: rotate(22deg);
}
100% {
transform: rotate(-22deg);
}
}
keyframes moving-rtl {
0% {
transform: rotate(22deg);
}
50% {
transform: rotate(-22deg);
}
100% {
transform: rotate(22deg);
}
}
@-webkit-keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media (min-width: 1280px) {
.box-info,
.overlay-info {
margin-top: 5vw;
max-width: 25vw !important;
min-height: 20vw !important;
}
.container.block-info {
right: 10vw;
width: 100% !important;
}
.box-info h2,
.overlay-info h2 {
font-size: 1.5vw;
}
.box-info h3,
.overlay-info h2 {
font-size: 1vw;
}
.box-action {
font-size: 1vw;
margin-top: .5vw;
}
.box-info img,
.overlay-info img {
width: auto;
height: 4vw;
max-height: none;
}
.opt-carousel span {
background-position: right .1vw;
background-size: .8vw;
}
.opt-carousel span {
padding-right: 25px;
}
}
@media (min-width: 992px) {
.block-carousel {
height: 41vw;
}
.box-info {
opacity: 0;
min-height: 240px;
}
.title-indent {
padding-left: 30px;
}
.block-slideshow .slick-slide img {
width: auto;
display: block;
max-height: 14vw;
min-height: 14vw;
position: relative;
z-index: 1;
}
.item-left {
right: 10%;
position: absolute;
bottom: 32%;
}
.item-right {
left: 8%;
position: absolute;
bottom: 31%;
}
.square-img {
bottom: 50%;
}
.wrapper-light {
display: flex;
}
.bg-light {
width: 50px;
height: 25vw;
display: block;
width: 100%;
background: url(../img/bg-light.png) center no-repeat;
background-size: 7vw;
transform: rotate(-22deg);
transform-origin: top;
}
.info-button-slideshow {
bottom: 0;
display: block;
}
.info-button-slideshow a {
padding: .5vw .5vw .3vw;
font-size: .7vw;
line-height: 1vw;
white-space: nowrap;
border-left: none !important;
}
.info-button-slideshow a span {
line-height: 1.3vw;
padding-right: 1.3vw;
background: url(../img/arrow-right-button.png) right 0 no-repeat;
background-size: 1vw;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
h3.title-md {
font-size: 1.7vw;
}
p.info-init {
font-size: 1.2vw;
}
.box-info {
max-width: 310px !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.banner-row img {
margin-bottom: 0;
}
.block-carousel .slick-prev,
.block-carousel .slick-next {
top: 80% !important;
}
.block-ttb .info-news:before {
top: 50%;
right: auto;
left: -10px;
margin-top: -5px;
border-right: 10px solid #fff;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.block-slideshow-mob .slick-arrow {
bottom: 18%;
}
.block-slideshow-mob .slick-prev:before,
.block-slideshow-mob .slick-next:before {
height: 100px;
}
.block-slideshow-mob .slick-prev:before {
background: url('../img/arrow-left-tablet.png') center no-repeat;
}
.block-slideshow-mob .slick-next:before {
background: url('../img/arrow-right-tablet.png') center no-repeat;
}
}
@media (max-width: 991px) {
.box-info img {
max-height: 40px;
}
.box-info h2 {
font-size: 21px;
margin-top: 16px;
}
.box-info h3 {
font-size: 12px;
margin-top: 10px;
}
.box-action {
font-size: 12px;
}
.carousel-item {
padding: 25px 7vw 0;
}
.wrapper-form {
margin-top: 30px;
}
.wrap-footer [class^="col-"] {
margin-bottom: 30px;
}
.title-split ul,
.title-split span {
padding: 0;
float: none;
display: block;
text-align: center;
margin-bottom: 10px;
}
.wrap-footer h4 {
text-align: center;
}
.slick-prev,
.slick-next {
top: 50%;
}
.block-slideshow,
.wrapper-slideshow {
height: 50vw;
}
.square-img {
width: 100%;
text-align: center;
bottom: 45%;
position: absolute;
}
.square-img img {
width: auto;
margin: 0 auto;
max-height: 25vw;
}
.wrapper-light {
margin-top: -40px;
}
.bg-light {
height: 40vw;
background-size: 10vw;
transform: rotate(-22deg);
}
.wrapper-slideshow {
overflow: visible;
margin-bottom: 35vw;
}
.info-brand-slideshow::before {
top: 0;
left: 0;
right: 0;
content: "";
height: 5px;
display: block;
position: absolute;
background: #0dafc9; /* Old browsers */
background: -moz-linear-gradient(left, #0dafc9 0%, #2ee0eb 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #0dafc9 0%,#2ee0eb 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0dafc9 0%,#2ee0eb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dafc9', endColorstr='#2ee0eb',GradientType=1 ); /* IE6-9 */
}
.info-button-slideshow a span {
line-height: 20px;
padding-right: 22px;
background-size: 17px;
background-position: right 0;
}
}
@media (max-width: 767px) {
.btn-emphasis {
width: 75%;
font-size: 2.8vw;
}
.btn-emphasis span {
background-size: 2.5vw;
}
.slick-next {
right: 10px;
}
.title-split h3 {
text-align: center;
}
.carousel-item .slick-next,
.carousel-instagram .slick-next {
right: -10px;
}
.news-mob {
padding: 0 30px;
margin: 0 0 30px;
position: relative;
}
.news-block .wrapper-form {
margin-top: 0;
}
.news-mob .btn-url {
left: 30px;
right: 30px;
}
.opt-carousel {
display: block;
padding: 14px 0;
text-align: center;
float: none !important;
border-top: 1px solid #fff;
font-size: 16px;
}
.box-action {
padding: 0;
}
}
@media (max-width: 420px) {
.title-split ul,
.title-split span {
font-size: 10px;
line-height: 20px;
}
.bg-light {
height: 35vw;
background-size: 10vw;
}
.wrapper-slideshow {
margin-bottom: 58vw;
}
.info-slideshow {
min-height: 30vw;
}
.info-button-slideshow {
display: block;
}
.info-button-slideshow a {
padding: 3vw;
}
.info-brand-slideshow {
height: 35vw;
}
.block-slideshow-mob .slick-arrow {
bottom: 20%;
}
.block-slideshow-mob .slick-prev:before {
background: url('../img/arrow-left-mob.png') center no-repeat;
}
.block-slideshow-mob .slick-next:before {
background: url('../img/arrow-right-mob.png') center no-repeat;
}
}
@media (max-width: 395px) {
.slick-prev:before,
.slick-next:before {
width: 60px;
height: 60px;
}
.box-info img {
max-height: 15vw;
}
.block-banner span {
margin: 10px 0 0 0;
}
.wrap-social {
text-align: center;
}
.opt-carousel span {
padding-right: 20px;
background-size: 15px;
}
}
/*-- Update Carousel 11/13/2017 --*/
@media (min-width: 1280px) {
.container.block-info {
position: relative;
max-width: 115vw !important;
}
.wrapper-carousel {
zoom: .7;
/*zoom: 70%;*/
}
.block-top {
background-size: 70% !important;
}
.box-info,
.overlay-info {
zoom: 1.1;
max-width: 25vw !important;
/*zoom: 110%;*/
}
}
@media (min-width: 1920px) {
.wrapper-carousel {
zoom: .6;
/*zoom: 60%;*/
}
.block-top {
background-size: 60% !important;
}
.container.block-info {
max-width: 120vw !important;
}
}
@media (min-width: 2560px) {
.wrapper-carousel {
zoom: .4;
/*zoom: 40%;*/
}
.block-top {
background-size: 40% !important;
}
.container.block-info {
max-width: 130vw !important;
}
.box-info,
.overlay-info {
max-width: 30vw !important;
}
}
desde Santo Domingo