<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ------->
<!doctype html>
<html lang="pt-BR">
<hhead>
<title>My loja de carros —</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=DM+Sans:300,400,700&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<!-- MAIN CSS -->
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap" id="home-section">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center position-relative">
<div class="col-3 ">
<div class="site-logo">
<a href="index.html">GScar</a>
</div>
</div>
<div class="col-9 text-right">
<span class="d-inline-block d-lg-none"><a href="#" class="text-white site-menu-toggle js-menu-toggle py-5 text-white"><span class="icon-menu h3 text-white"></span></a></span>
<nav class="site-navigation text-right ml-auto d-none d-lg-block" role="navigation">
<ul class="site-menu main-menu js-clone-nav ml-auto ">
<li class="active"><a href="index.html" class="nav-link">Home</a></li>
<li><a href="services.html" class="nav-link">Serviços</a></li>
<li><a href="cars.html" class="nav-link">Carros</a></li>
<li><a href="about.html" class="nav-link">Sobre</a></li>
<li><a href="blog.html" class="nav-link">Blog</a></li>
<li><a href="contact.html" class="nav-link">Contato</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="ftco-blocks-cover-1">
<div class="ftco-cover-1 overlay" style="background-image: url('images/hero_1.jpg')">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<div class="feature-car-rent-box-1">
<h3>Audi A4</h3>
<ul class="list-unstyled">
<li>
<span>Portas</span>
<span class="spec">4</span>
</li>
<li>
<span>Assentos</span>
<span class="spec">5</span>
</li>
<li>
<span>Bagageiro</span>
<span class="spec">2 Porta Malas/2 Bolsas</span>
</li>
<li>
<span>Transmissão</span>
<span class="spec">Automatica</span>
</li>
<li>
<span>Minium age</span>
<span class="spec">Automatica</span>
</li>
</ul>
<div class="d-flex align-items-center bg-light p-3">
<span>R$350,00 /dia</span>
<a href="contact.html" class="ml-auto btn btn-primary">Alugue</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section pt-0 pb-0 bg-light">
<div class="container">
<div class="row">
<div class="col-12">
<form class="trip-form">
<div class="row align-items-center mb-4">
<div class="col-md-6">
<h3 class="m-0">Comece sua viagem aqui</h3>
</div>
<div class="col-md-6 text-md-right">
<span class="text-primary">3</span> <span>carros disponíveis</span></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="cf-1">De onde você é</label>
<input type="text" id="cf-1" placeholder="Seu endereço de retirada" class="form-control">
</div>
<div class="form-group col-md-3">
<label for="cf-2">Aonde você vai</label>
<input type="text" id="cf-2" placeholder="Seu endereço de retirada" class="form-control">
</div>
<div class="form-group col-md-3">
<label for="cf-3">Data da viagem</label>
<input type="text" id="cf-3" placeholder="Seu endereço de retirada" class="form-control datepicker px-3">
</div>
<div class="form-group col-md-3">
<label for="cf-4">Data do retono</label>
<input type="text" id="cf-4" placeholder="Seu endereço de retirada" class="form-control datepicker px-3">
</div>
</div>
<div class="row">
<div class="col-lg-6">
<input type="submit" value="Enviar" class="btn btn-primary">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="site-section bg-light">
<div class="container">
<div class="row">
<div class="col-lg-3">
<h3>Nossa oferta</h3>
<p class="mb-4">Ideal para demandas momentâneas como uma viagem de negócios, uma visita a um cliente, substituição de veículos ou qualquer outra situação. O aluguel diário é uma solução pontual e simples para os problemas do dia a dia da sua empresa. Benefícios:</p>
<p>
<a href="#" class="btn btn-primary custom-prev">Anterior</a>
<span class="mx-2">/</span>
<a href="#" class="btn btn-primary custom-next">Próxima</a>
</p>
</div>
<div class="col-lg-9">
<div class="nonloop-block-13 owl-carousel">
<div class="item-1">
<a href=""><img src="images/img_1.jpg" alt="Image" class="img-fluid"></a>
<div class="item-1-contents">
<div class="text-center">
<h3><a href="#"> Renault Kwid</a></h3>
<div class="rating">
<span class="icon-star text-warning"></span>
<span class="icon-star text-warning"></span>
<span class="icon-star text-warning"></span>
<span class="icon-star text-warning"></span>
<span class="icon-star text-warning"></span>
</div>
<div class="rent-price"><span>R$ 170/</span>dia</div>
</div>
<ul class="specs">
<li>
<span>Portas</span>
<span class="spec">4</span>
</li>
<li>
<span>Assentos</span>
<span class="spec">5</span>
</li>
<li>
<span>Transmissão</span>
<span class="spec">Automatica</span>
</li>
<li>
<span>Idade minina</span>
<span class="spec">18 anos</span>
</li>
</ul>
<div class="d-flex action">
<a href="contact.html" class="btn btn-primary">Alugue</a>
</div>
</div>
</div>
<div class="item-1">
<a href="#"><img src="images/img_2.jpg" alt="Image" class="img-fluid"></a>
<div class="item-1-contents">
<div class="text-center">
<h3><a href="#">Fiat Mobi</a></h3>
<div class="rating">
<span class="icon-star text-warning"></span>
<span class="icon-star text-warning"></span>
<span class="icon-star text-warning"></span>
<span class="icon-star text-warning"></span>
<span class="icon-star text-warning"></span>
</div>
<div class="rent-price"><span>R$190/</span>dia</div>
</div>
<ul class="specs">
<li>
<span>Portas</span>
<span class="spec">4</span>
</li>
<li>
<span>Assentos</span>
<span class="spec">5</span>
</li>
<li>
<span>Transmissâo</span>
<span class="spec">Automatic</span>
</li>
<li>
<span>Idade minima</span>
<span class="spec">18 anos</span>
</li>
</ul>
<div class="d-flex action">
<a href="contact.html" class="btn btn-primary">Alugue</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section section-3" style="background-image: url('images/hero_2.jpg');">
<div class="container">
<div class="row">
<div class="col-12 text-center mb-5">
<h2 class="text-white">Nossos serviços</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="service-1">
<span class="service-1-icon">
<span class="flaticon-car-1"></span>
</span>
<div class="service-1-contents">
<h3>Reparar</h3>
<p>Nossa empresa conta com excelente serviços de reparo.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="service-1">
<span class="service-1-icon">
<span class="flaticon-traffic"></span>
</span>
<div class="service-1-contents">
<h3>Acessórios para automóvel</h3>
<p>Confira os acessórios que garantem mais conforto e praticidade para você ao alugar o seu veículo disponibilidade dos acessórios devem ser confirmados por meio da Central de Reservas.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="service-1">
<span class="service-1-icon">
<span class="flaticon-valet"></span>
</span>
<div class="service-1-contents">
<h3>Possuir um carro</h3>
<p>Veja como alugar um carro na Gscar é fácil e rápido necessario apenas alguns requisitos.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container site-section mb-5">
<div class="row justify-content-center text-center">
<div class="col-7 text-center mb-5">
<h2>Como funciona</h2>
<p>Veja como alugar um carro na É fácil e rápido.!</p>
</div>
</div>
<div class="how-it-works d-flex">
<div class="step">
<span class="number"><span>01</span></span>
<span class="caption">Hora e local</span>
</div>
<div class="step">
<span class="number"><span>02</span></span>
<span class="caption">Carro</span>
</div>
<div class="step">
<span class="number"><span>03</span></span>
<span class="caption">Detalhes</span>
</div>
<div class="step">
<span class="number"><span>04</span></span>
<span class="caption">Confira</span>
</div>
<div class="step">
<span class="number"><span>05</span></span>
<span class="caption">Feito</span>
</div>
</div>
</div>
<div class="site-section bg-light">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-7 text-center mb-5">
<h2>Depoimento do Cliente</h2>
<p>Aluns depoimentos de nossos clientes, esparamos por você aqui também!</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="testimonial-2">
<blockquote class="mb-4">
<p>"Fechamos todo o serviço e deu tudo certo! O carro escolhido, chegou no horário combinado; O atendente foi super atencioso e simpático conosco, não nos apressou em nenhum momento e nos deixou bem à vontade;"</p>
</blockquote>
<div class="d-flex v-card align-items-center">
<img src="images/person_1.jpg" alt="Image" class="img-fluid mr-3">
<span>Dan Stubark</span>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="testimonial-2">
<blockquote class="mb-4">
<p>"Serviços prestados com rapidez e qualidade. Super recomento"</p>
</blockquote>
<div class="d-flex v-card align-items-center">
<img src="images/person_2.jpg" alt="Image" class="img-fluid mr-3">
<span>Elisabet Savala</span>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<div class="testimonial-2">
<blockquote class="mb-4">
<p>"Uma empresa q atende seus clientes com qualidade!"</p>
</blockquote>
<div class="d-flex v-card align-items-center">
<img src="images/person_3.jpg" alt="Image" class="img-fluid mr-3">
<span>Katie Pears</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section bg-white">
<div class="container">
<div class="row justify-content-center text-center mb-5">
<div class="col-7 text-center mb-5">
<h2>Nosso Blog</h2>
<p>Estar atento aos detalhes do contrato e do processo de locação pode ajudá-lo a evitar aborrecimentos futuros e até cobranças.</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 mb-4">
<div class="post-entry-1 h-100">
<a href="single.html">
<img src="images/post_1.jpg" alt="Image"
class="img-fluid">
</a>
<div class="post-entry-1-contents">
<h2><a href="single.html">O melhor conforto em carros</a></h2>
<span class="meta d-inline-block mb-3">Abril 17, 2019 <span class="mx-2">by</span> <a href="#">Admin</a></span>
<p> O melhor conforto, em sua locação e segurança para você e sua Familía. </p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="post-entry-1 h-100">
<a href="single.html">
<img src="images/img_2.jpg" alt="Image"
class="img-fluid">
</a>
<div class="post-entry-1-contents">
<h2><a href="single.html">O melhor aluguel de carros em todo o planeta</a></h2>
<span class="meta d-inline-block mb-3">Agosto 17, 2019 <span class="mx-2">by</span> <a href="#">Admin</a></span>
<p>Aluguel de carros com pacotes flexíveis, durações variadas, e pagamento facilitado.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="post-entry-1 h-100">
<a href="single.html">
<img src="images/img_3.jpg" alt="Image"
class="img-fluid">
</a>
<div class="post-entry-1-contents">
<h2><a href="single.html">Diversidades de modelos</a></h2>
<span class="meta d-inline-block mb-3">Julho 17, 2019 <span class="mx-2">by</span> <a href="#">Admin</a></span>
<p>Veículos de diversas categorias, tanto para passeio quanto para operações especiais..</p>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-lg-3">
<h2 class="footer-heading mb-4">Sobre Nós</h2>
<p>///texts. </p>
</div>
<div class="col-lg-8 ml-auto">
<div class="row">
<div class="col-lg-3">
<h2 class="footer-heading mb-4">Links rápidos</h2>
<ul class="list-unstyled">
<li><a href="#">Sobre Nós</a></li>
<li><a href="#">Depoimentos</a></li>
<li><a href="#">Termos de Serviço</a></li>
<li><a href="#">Privacidade</a></li>
<li><a href="#">Contate-nos</a></li>
</ul>
</div>
<div class="col-lg-3">
<h2 class="footer-heading mb-4">Depoimentos</h2>
<ul class="list-unstyled">
<li><a href="#">Sobre Nós</a></li>
<li><a href="#">Depoimentos</a></li>
<li><a href="#">Termos de Serviço</a></li>
<li><a href="#">Privacidade</a></li>
<li><a href="#">Contate-nos</a></li>
</ul>
</div>
<div class="col-lg-3">
<h2 class="footer-heading mb-4">Termos de Serviço</h2>
<ul class="list-unstyled">
<li><a href="#">About Us</a></li>
<li><a href="#">Depoimentos</a></li>
<li><a href="#">Termos de Serviço</a></li>
<li><a href="#">Privacidade</a></li>
<li><a href="#">Contate-nos</a></li>
</ul>
</div>
<div class="col-lg-3">
<h2 class="footer-heading mb-4">Contate-nos</h2>
<ul class="list-unstyled">
<li><a href="#">About Us</a></li>
<li><a href="#">Depoimentos</a></li>
<li><a href="#">Termos de Serviço</a></li>
<li><a href="#">Privacidade</a></li>
<li><a href="#">Contate-nos</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright ©<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="icon-heart text-danger" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank" >Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/main.js"></script>
</body>
</html>
/* Base */
html {
overflow-x: hidden; }
.font-size-10 {
font-size: 10px; }
.font-size-11 {
font-size: 11px; }
.font-size-12 {
font-size: 12px; }
.font-size-13 {
font-size: 13px; }
.font-size-14 {
font-size: 14px; }
.font-size-15 {
font-size: 15px; }
.font-size-16 {
font-size: 16px; }
.font-size-17 {
font-size: 17px; }
.font-size-18 {
font-size: 18px; }
.font-size-19 {
font-size: 19px; }
.font-size-20 {
font-size: 20px; }
.font-size-21 {
font-size: 21px; }
.font-size-22 {
font-size: 22px; }
.font-size-23 {
font-size: 23px; }
.font-size-24 {
font-size: 24px; }
.font-size-25 {
font-size: 25px; }
.font-size-26 {
font-size: 26px; }
.font-size-27 {
font-size: 27px; }
.font-size-28 {
font-size: 28px; }
.font-size-29 {
font-size: 29px; }
.font-size-30 {
font-size: 30px; }
.font-gray-1 {
color: #f7f7f7; }
.font-gray-2 {
color: #e9e9e9; }
.font-gray-3 {
color: #d9d9d9; }
.font-gray-4 {
color: #c9c9c9; }
.font-gray-5, .block-heading-1 span {
color: #b8b8b8; }
.font-gray-6 {
color: #a8a8a8; }
.font-gray-7 {
color: #939393; }
.font-gray-8 {
color: #7b7b7b; }
.font-gray-9 {
color: #636363 #4d4d4d; }
.font-gray-10 {
color: #353535; }
.border-gray-1 {
border-color: #f7f7f7; }
.border-gray-2 {
border-color: #e9e9e9; }
.border-gray-3 {
border-color: #d9d9d9; }
.border-gray-4 {
border-color: #c9c9c9; }
.border-gray-5 {
border-color: #b8b8b8; }
.border-gray-6 {
border-color: #a8a8a8; }
.border-gray-7 {
border-color: #939393; }
.border-gray-8 {
border-color: #7b7b7b; }
.border-gray-9 {
border-color: #636363 #4d4d4d; }
.border-gray-10 {
border-color: #353535; }
.bg-gray-1 {
border-color: #f7f7f7; }
.bg-gray-2 {
border-color: #e9e9e9; }
.bg-gray-3 {
border-color: #d9d9d9; }
.bg-gray-4 {
border-color: #c9c9c9; }
.bg-gray-5 {
border-color: #b8b8b8; }
.bg-gray-6 {
border-color: #a8a8a8; }
.bg-gray-7 {
border-color: #939393; }
.bg-gray-8 {
border-color: #7b7b7b; }
.bg-gray-9 {
border-color: #636363 #4d4d4d; }
.bg-gray-10 {
border-color: #353535; }
.letter-spacing-1 {
letter-spacing: 0.1em; }
.letter-spacing-2 {
letter-spacing: 0.2em; }
.border-w-1 {
border-width: 1px; }
.border-w-2 {
border-width: 2px; }
.border-w-3 {
border-width: 3px; }
.border-w-4 {
border-width: 4px; }
.border-w-5 {
border-width: 5px; }
.primary-black--hover {
background: #007bff;
color: #fff; }
.primary-black--hover:hover {
background: #000;
color: #fff; }
.primary-dark--hover {
background: #007bff;
color: #fff; }
.primary-dark--hover:hover {
background: gray;
color: #fff; }
.primary-primary-outline--hover {
background: #007bff;
color: #fff; }
.primary-primary-outline--hover:hover {
border-color: #007bff;
background: transparent; }
.primary-outline-primary--hover {
background: transparent;
border-color: #007bff; }
.primary-outline-primary--hover:hover {
color: #fff;
background: #007bff; }
body {
line-height: 1.7;
color: #364d59 !important;
font-weight: 300;
font-size: 1rem; }
::-moz-selection {
background: #000;
color: #fff; }
::selection {
background: #000;
color: #fff; }
a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
text-decoration: none; }
a:hover {
text-decoration: none; }
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
font-weight: 300;
color: #364d59; }
.border-2 {
border-width: 2px; }
.text-black {
color: #000 !important; }
.bg-black {
background: #000 !important; }
.color-black-opacity-5 {
color: rgba(0, 0, 0, 0.5); }
.color-white-opacity-5 {
color: rgba(255, 255, 255, 0.5); }
.btn.btn-outline-white {
border-color: #fff;
background: transparent;
color: #fff; }
.btn.btn-outline-white:hover {
background: #fff;
border-color: #fff;
color: #000; }
.line-height-1 {
line-height: 1 !important; }
.bg-black {
background: #000; }
.form-control {
height: 55px;
background: #fff !important;
font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
.form-control:active, .form-control:focus {
border-color: #007bff; }
.form-control:hover, .form-control:active, .form-control:focus {
-webkit-box-shadow: none !important;
box-shadow: none !important; }
.site-section {
padding: 2.5em 0; }
@media (min-width: 768px) {
.site-section {
padding: 5em 0; } }
.site-section.site-section-sm {
padding: 4em 0; }
.site-footer {
padding: 4em 0;
background: #000; }
@media (min-width: 768px) {
.site-footer {
padding: 8em 0; } }
.site-footer .border-top {
border-top: 1px solid rgba(255, 255, 255, 0.1) !important; }
.site-footer p {
color: #fff; }
.site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5 {
color: #fff; }
.site-footer a {
color: rgba(255, 255, 255, 0.5); }
.site-footer a:hover {
color: white; }
.site-footer ul li {
margin-bottom: 10px; }
.site-footer .footer-heading {
font-size: 16px;
color: #fff; }
.bg-text-line {
display: inline;
background: #000;
-webkit-box-shadow: 20px 0 0 #000, -20px 0 0 #000;
box-shadow: 20px 0 0 #000, -20px 0 0 #000; }
.text-white-opacity-05 {
color: rgba(255, 255, 255, 0.5); }
.text-black-opacity-05 {
color: rgba(0, 0, 0, 0.5); }
.hover-bg-enlarge {
overflow: hidden;
position: relative; }
@media (max-width: 991.98px) {
.hover-bg-enlarge {
height: auto !important; } }
.hover-bg-enlarge > div {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: .8s all ease-in-out;
-o-transition: .8s all ease-in-out;
transition: .8s all ease-in-out; }
.hover-bg-enlarge:hover > div, .hover-bg-enlarge:focus > div, .hover-bg-enlarge:active > div {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2); }
@media (max-width: 991.98px) {
.hover-bg-enlarge .bg-image-md-height {
height: 300px !important; } }
.bg-image {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; }
.bg-image.overlay {
position: relative; }
.bg-image.overlay:after {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7); }
.bg-image > .container {
position: relative;
z-index: 1; }
@media (max-width: 991.98px) {
.img-md-fluid {
max-width: 100%; } }
@media (max-width: 991.98px) {
.display-1, .display-3 {
font-size: 3rem; } }
.play-single-big {
width: 90px;
height: 90px;
display: inline-block;
border: 2px solid #fff;
color: #fff !important;
border-radius: 50%;
position: relative;
-webkit-transition: .3s all ease-in-out;
-o-transition: .3s all ease-in-out;
transition: .3s all ease-in-out; }
.play-single-big > span {
font-size: 50px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-40%, -50%);
-ms-transform: translate(-40%, -50%);
transform: translate(-40%, -50%); }
.play-single-big:hover {
width: 120px;
height: 120px; }
.overlap-to-top {
margin-top: -150px; }
.ul-check {
margin-bottom: 50px; }
.ul-check li {
position: relative;
padding-left: 35px;
margin-bottom: 15px;
line-height: 1.5; }
.ul-check li:before {
left: 0;
font-size: 20px;
top: -.3rem;
font-family: "icomoon";
content: "\e5ca";
position: absolute; }
.ul-check.white li:before {
color: #fff; }
.ul-check.success li:before {
color: #71bc42; }
.ul-check.primary li:before {
color: #007bff; }
.select-wrap, .wrap-icon {
position: relative; }
.select-wrap .icon, .wrap-icon .icon {
position: absolute;
right: 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 22px; }
.select-wrap select, .wrap-icon select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%; }
.top-bar {
border-bottom: 1px solid #e9ecef !important; }
