"ah bordo 4"
Bootstrap 4.1.1 Snippet by Patricia12854

<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"> <head> <meta charset="UTF-8"> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bamboo Groove</title> <!-- Favicon --> <link rel="icon" href="img/core-img/favicon.ico"> <!-- Style CSS --> <link rel="stylesheet" href="css/core-style.css"> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Inicio da Nav --> <header class="header_area"> <div class="classy-nav-container breakpoint-off d-flex align-items-center justify-content-between"> <!-- Menu --> <nav class="classy-navbar" id="essenceNav"> <!-- Logo --> <a class="nav-brand" href="index.html"><img alt=""></a> <div class="classy-navbar-toggler"> <span class="navbarToggler"><span></span><span></span><span></span></span> </div> <!-- Menu --> <div class="classy-menu"> <!-- fim btn --> <div class="classycloseIcon"> <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div> </div> <!-- Navbar --> <div class="classynav"> <ul> <li class="nav-item"> <a class="nav-link disabled" href="index.html" disabled>Início</a> </li> <li class="nav-item"> <a class="nav-link" href="vitrine.html">Vitrine</a> </li> <li class="nav-item"> <a class="nav-link" href="cadastro.html">Cadastre-se</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Login</a> </ul> </div> </div> </nav> <div class="header-meta d-flex clearfix justify-content-end"> <!-- Buscar na loja --> <div class="search-area"> <form action="#" method="post"> <input type="search" name="search" id="headerSearch" placeholder="Buscar na loja"> <button type="submit"><i class="fa fa-search" aria-hidden="true"></i></button> </form> </div> <!-- Favoritos --> <div class="favourite-area"> <a href="#"><img src="img/core-img/heart.svg" alt=""></a> </div> <!-- Usuario de login --> <div class="user-login-info"> <a href="login.html"><img src="img/core-img/user.svg" alt="">Login</a> </div> <!--sacola icone--> <div class="cart-area"> <a href="#" id="essenceCartBtn"><img src="img/core-img/bag.svg" alt=""> <span></span></a> </div> </div> </div> </header> <!--Sacola --> <div class="cart-bg-overlay"></div> <div class="right-side-cart-area"> <div class="cart-button"> <a href="#" id="rightSideCart"><img src="img/core-img/bag.svg" alt=""> <span></span></a> </div> <div class="cart-content d-flex"> <!-- Sumario da sacola---> <div class="cart-amount-summary"> <h2>Na sacola</h2> <ul class="summary-table"> <li><span>subtotal:</span> <span>R$0.00</span></li> <li><span>Frete:</span> <span>Grátis</span></li> <li><span>Descontos:</span> <span>-15%</span></li> <li><span>Total:</span> <span>R$0.00</span></li> </ul> <div class="checkout-btn mt-100"> <a href="checkout.html" class="btn essence-btn">Reservar</a> </div> </div> </div> </div> <!-- Detalhes do Hostel --> <section class="single_product_details_area d-flex align-items-center"> <div class="single_product_thumb clearfix"> <div class="product_thumbnail_slides owl-carousel"> <img src="https://cf.bstatic.com/images/hotel/max1024x768/256/256673752.jpg" alt=""> <img src="https://d34ad2g4hirisc.cloudfront.net/volunteer_positions/photos/000/035/151/thumb/7bdfcc8d850e4eea5bb416355feb0b0f.jpg""> <img src="https://imgcy.trivago.com/c_limit,d_dummy.jpeg,f_auto,h_1300,q_auto,w_2000/itemimages/51/82/5182474_v6.jpeg" alt=""> </div> </div> <!-- Hostel Descrição --> <div class="single_product_desc clearfix"> <span>Ubatuba</span> <a href="cart.html"> <h2> Bamboo Groove Hostel </h2> </a> <p class="product-price"><span class="old-price"></span>Opçoes de trabalhos em troca de Estadia <br></p> <li>Cozinheiro </li> <li>Guia de Turista</li> <li>Recepcionista</li> <li>Faxineiro</li> <li>Barman</li> <li>Cozinheiro</li> <p class="product-price"><span class="old-price"></span>Horas Trabalhadas <br></p> <li>47 horas semananalmente</li> <li>6 horas por dia</li> <p class="product-price"><span class="old-price"></span>Beneficios<br></p> <li>Uso do WI-FI</li> <li>Roupas Lavadas</li> <li>Aula de Yoga</li> <li>Café da Manhã</li> <li>Janta</li> <li>Um quarto compartilhado com cama e banheiro </li> <div class="cart-fav-box d-flex align-items-center"> <button type="submit" name="addtocart" value="5" class="btn essence-btn">Reservar</button> <div class="product-favourite ml-4"> <a href="" class="favme fa fa-heart"></a> </div> </div> </form> </div> </section> <!-- rodape--> <footer class="footer_area clearfix"> <div class="container"> <div class="row"> <div class="col-12 col-md-6"> <div class="single_widget_area d-flex mb-30"> <div class="footer_menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> </div> </div> <div class="col-12 col-md-6"> <div class="single_widget_area mb-30"> <ul class="footer_widget_menu"> <li><a href="#">Opções de pagamento</a></li> <li><a href="#">Política de Privacidade</a></li> <li><a href="#">Termo de Uso</a></li> </ul> </div> </div> </div> <div class="row align-items-end"> </div> </div> </div> <div class="col-12 col-md-6"> <div class="single_widget_area"> <div class="footer_social_area"> <a href="#" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#" data-toggle="tooltip" data-placement="top" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a> <a href="#" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a> </div> </div> </div> </div> <div class="row mt-5"> <div class="col-md-12 text-center"> <p> Copyright All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by Maximus</a> </p> </div> </div> </div> </footer> <!-- jQuery (Necessary for All JavaScript Plugins) --> <script src="js/jquery/jquery-2.2.4.min.js"></script> <!-- Popper js --> <script src="js/popper.min.js"></script> <!-- Bootstrap js --> <script src="js/bootstrap.min.js"></script> <!-- Plugins js --> <script src="js/plugins.js"></script> <!-- Classy Nav js --> <script src="js/classy-nav.min.js"></script> <!-- Active js --> <script src="js/active.js"></script> </body> </html>
/* [Master Stylesheet v-1.0.0] */ /* :: 1.0 Import Web Fonts */ @import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Ubuntu:300,400,500,700"); /* :: 2.0 Import All CSS */ @import url(../css/bootstrap.min.css); @import url(../css/classy-nav.min.css); @import url(../css/owl.carousel.css); @import url(../css/animate.css); @import url(../css/magnific-popup.css); @import url(../css/jquery-ui.min.css); @import url(../css/nice-select.css); @import url(../css/font-awesome.min.css); /* :: 3.0 Common/Base CSS */ * { margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; font-size: 14px; background-color: #ffffff; margin-top: 85px; } @media only screen and (max-width: 767px) { body { margin-top: 80px; } } h1, h2, h3, h4, h5, h6 { color: #000000; line-height: 1.3; font-weight: 700; font-family: "Ubuntu", sans-serif; } p { color: #787878; font-size: 14px; line-height: 2; font-weight: 400; } a { -webkit-transition: all 500ms ease 0s; transition: all 500ms ease 0s; text-decoration: none; outline: 0 solid transparent; color: #000000; font-weight: 600; font-size: 12px; } a:hover, a:focus { -webkit-transition: all 500ms ease 0s; transition: all 500ms ease 0s; text-decoration: none; outline: 0 solid transparent; color: #000000; font-weight: 600; font-size: 12px; } ul, ol { margin: 0; } ul li, ol li { list-style: none; } img { height: auto; max-width: 100%; } /* Spacing */ .mt-15 { margin-top: 15px !important; } .mt-30 { margin-top: 30px !important; } .mt-50 { margin-top: 50px !important; } .mt-70 { margin-top: 70px !important; } .mt-100 { margin-top: 100px !important; } .mb-15 { margin-bottom: 15px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-50 { margin-bottom: 50px !important; } .mb-70 { margin-bottom: 70px !important; } .mb-100 { margin-bottom: 100px !important; } .ml-15 { margin-left: 15px !important; } .ml-30 { margin-left: 30px !important; } .ml-50 { margin-left: 50px !important; } .mr-15 { margin-right: 15px !important; } .mr-30 { margin-right: 30px !important; } .mr-50 { margin-right: 50px !important; } /* Height */ .height-400 { height: 400px !important; } .height-500 { height: 500px !important; } .height-600 { height: 600px !important; } .height-700 { height: 700px !important; } .height-800 { height: 800px !important; } /* Section Padding */ .section-padding-80 { padding-top: 80px; padding-bottom: 80px; } .section-padding-80-0 { padding-top: 80px; padding-bottom: 0; } .section-padding-0-80 { padding-top: 0; padding-bottom: 80px; } /* Section Heading */ .section-heading { margin-bottom: 50px; position: relative; z-index: 1; } .section-heading h2 { font-size: 30px; margin-bottom: 0; text-transform: capitalize; font-weight: 600; } .section-heading.text-left { text-align: left !important; } /* Miscellaneous */ .bg-img { background-position: center center; background-size: cover; background-repeat: no-repeat; } .bg-white { background-color: #ffffff !important; } .bg-dark { background-color: #000000 !important; } .bg-transparent { background-color: transparent !important; } .font-bold { font-weight: 700; } .font-light { font-weight: 300; } .bg-overlay, .bg-overlay-white { position: relative; z-index: 2; background-position: center center; background-size: cover; } .bg-overlay:hover, .bg-overlay-white:hover { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; content: ""; } .bg-overlay:hover { background-color: rgba(0, 0, 0, 0.5); } .bg-overlay-white:hover { background-color: rgba(255, 255, 255, 0.9); } /* ScrollUp */ #scrollUp { background-color: #ff084e; border-radius: 0; bottom: 60px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); color: #ffffff; font-size: 24px; height: 40px; line-height: 40px; right: 60px; text-align: center; width: 40px; } @media only screen and (max-width: 767px) { #scrollUp { bottom: 30px; right: 30px; } } /* Essence Button */ .essence-btn { display: inline-block; min-width: 170px; height: 50px; color: #ffffff; border: none; border-radius: 0; padding: 0 40px; text-transform: uppercase; font-size: 12px; line-height: 50px; background-color: #0315ff; letter-spacing: 1.5px; font-weight: 600; } .essence-btn:hover, .essence-btn:focus { color: #ffffff; background-color: #dc0345; } /* :: 4.0 Header Area CSS */ .header_area { position: fixed; z-index: 900; top: 0; left: 0; width: 100%; border-bottom: 1px solid #ebebeb; -webkit-transition-duration: 500ms; transition-duration: 500ms; } @media only screen and (max-width: 767px) { .header_area .classy-nav-container { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media only screen and (max-width: 767px) { .header_area .classy-nav-container .classy-navbar-toggler { margin-left: auto; margin-right: 15px; } } .header_area .classy-navbar, .header_area .header-meta { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; min-width: 50%; width: 50%; } @media only screen and (max-width: 767px) { .header_area .classy-navbar, .header_area .header-meta { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; min-width: 100%; width: 100%; } } .header_area .classy-navbar { height: 85px; padding: 5px 0 5px 5%; } @media only screen and (max-width: 767px) { .header_area .classy-navbar { height: 40px; border-bottom: 1px solid #ebebeb; } } .header_area .header-meta { height: 85px; position: relative; z-index: 1; } @media only screen and (max-width: 767px) { .header_area .header-meta { height: 40px; } } .header_area .classynav ul li a { font-size: 16px; color: #787878; } .header_area .classynav ul li a:hover { color: #000000; } .header_area .classynav ul li .megamenu li a, .header_area .classynav ul li .dropdown li a { font-size: 14px; color: #787878; } .header_area .classynav ul li .megamenu li a:hover, .header_area .classynav ul li .dropdown li a:hover { color: #000000; } .header_area .search-area form { position: relative; z-index: 1; height: 85px; border-left: 1px solid #ebebeb; } @media only screen and (max-width: 767px) { .header_area .search-area form { height: 40px; border-left: none; } } .header_area .search-area form input { border: none; background-color: #ffffff; width: 200px; height: 85px; padding: 0 15px 0 60px; color: #787878; font-size: 14px; font-weight: 500; -webkit-transition-duration: 500ms; transition-duration: 500ms; } @media only screen and (max-width: 767px) { .header_area .search-area form input { width: 170px; height: 40px; padding: 0 10px 0 30px; } } .header_area .search-area form input:focus { outline: none !important; width: 350px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header_area .search-area form input:focus { width: 300px; } } @media only screen and (max-width: 767px) { .header_area .search-area form input:focus { width: 170px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .header_area .search-area form input:focus { width: 270px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header_area .search-area form input:focus { width: 300px; } } .header_area .search-area form button { position: absolute; z-index: 10; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 30px; background-color: transparent; border: none; color: #787878; font-size: 14px; } @media only screen and (max-width: 767px) { .header_area .search-area form button { left: 10px; height: 40px; } } .header_area .favourite-area a, .header_area .user-login-info a, .header_area .cart-area a { position: relative; z-index: 1; -webkit-box-flex: 0; -ms-flex: 0 0 90px; flex: 0 0 90px; width: 90px; display: block; text-align: center; border-left: 1px solid #ebebeb; height: 100%; line-height: 80px; } @media only screen and (max-width: 767px) { .header_area .favourite-area a, .header_area .user-login-info a, .header_area .cart-area a { -webkit-box-flex: 0; -ms-flex: 0 0 50px; flex: 0 0 50px; width: 50px; line-height: 40px; } } .header_area .favourite-area a img, .header_area .user-login-info a img, .header_area .cart-area a img { max-width: 20px; } .header_area .favourite-area a span, .header_area .user-login-info a span, .header_area .cart-area a span { font-family: "Ubuntu", sans-serif; font-size: 18px; color: #0315ff; font-weight: 700; position: absolute; top: -10px; } @media only screen and (max-width: 767px) { .header_area .favourite-area a span, .header_area .user-login-info a span, .header_area .cart-area a span { font-size: 14px; } } .header_area.sticky { position: fixed; z-index: 900; top: 0; left: 0; width: 100%; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15); } .cart-bg-overlay.cart-bg-overlay-on { -webkit-transition-duration: 1000ms; transition-duration: 1000ms; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4); z-index: 1050; } /* Cart Area CSS */ .right-side-cart-area { position: fixed; width: 670px; height: 100%; top: 0; right: -800px; background-color: #ffffff; z-index: 1100; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1); -webkit-transition-duration: 800ms; transition-duration: 800ms; } @media only screen and (min-width: 768px) and (max-width: 991px) { .right-side-cart-area { width: 500px; right: -600px; } } @media only screen and (max-width: 767px) { .right-side-cart-area { width: 270px; right: -400px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .right-side-cart-area { width: 400px; right: -550px; } } .right-side-cart-area.cart-on { right: 0; } .right-side-cart-area .cart-button a { position: absolute; top: 0; right: 100%; z-index: 100; width: 90px; display: block; text-align: center; border-left: 1px solid #ebebeb; height: 85px; line-height: 80px; background-color: #f5f7f9; } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-button a { width: 50px; height: 50px; line-height: 50px; } } .right-side-cart-area .cart-button a img { max-width: 20px; } .right-side-cart-area .cart-button a span { font-family: "Ubuntu", sans-serif; font-size: 18px; color: #0315ff; font-weight: 700; position: absolute; top: -10px; } .right-side-cart-area .cart-content { position: relative; z-index: 1; width: 100%; overflow-x: hidden; overflow-y: scroll; height: 100%; } .right-side-cart-area .cart-content .cart-list { position: relative; z-index: 10; -webkit-box-flex: 0; -ms-flex: 0 0 190px; flex: 0 0 190px; width: 190px; } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-list { -webkit-box-flex: 0; -ms-flex: 0 0 100px; flex: 0 0 100px; width: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .right-side-cart-area .cart-content .cart-list { -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px; width: 150px; } } .right-side-cart-area .cart-content .cart-list .single-cart-item { position: relative; z-index: 1; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image { position: relative; z-index: 1; display: block; } .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); padding: 50px 15px 15px; -webkit-transition-duration: 500ms; transition-duration: 500ms; } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc { padding: 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc { padding: 30px 20px; } } .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc .product-remove { position: absolute; top: 15px; right: 15px; color: #ffffff; font-size: 12px; padding: 5px; } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc .product-remove { top: 5px; right: 5px; } } .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc .badge { display: block; font-weight: 600; font-size: 10px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; margin-bottom: 5px; text-align: left; padding: 0; } .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc h6 { font-size: 12px; color: #ffffff; text-transform: capitalize; margin-bottom: 30px; } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc h6 { margin-bottom: 10px; } } .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc .size, .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc .color { display: block; font-weight: 600; font-size: 10px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; margin-bottom: 5px; line-height: 1; } .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc .price { font-family: "Ubuntu", sans-serif; font-size: 16px; font-weight: 700; margin-bottom: 0; margin-top: 30px; color: #ffffff; } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-list .single-cart-item .product-image .cart-item-desc .price { margin-top: 10px; font-size: 12px; } } .right-side-cart-area .cart-content .cart-list .single-cart-item:hover .product-image .cart-item-desc { background-color: rgba(0, 0, 0, 0.8); } .right-side-cart-area .cart-content .cart-amount-summary { padding: 100px 10%; position: relative; z-index: 10; -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 190px); flex: 0 0 calc(100% - 190px); width: calc(100% - 190px); } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-amount-summary { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 100px); flex: 0 0 calc(100% - 100px); width: calc(100% - 100px); padding: 50px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .right-side-cart-area .cart-content .cart-amount-summary { -webkit-box-flex: 0; -ms-flex: 0 0 calc(100% - 150px); flex: 0 0 calc(100% - 150px); width: calc(100% - 150px); padding: 50px 30px; } } .right-side-cart-area .cart-content .cart-amount-summary h2 { font-size: 30px; margin-bottom: 100px; } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-amount-summary h2 { font-size: 24px; margin-bottom: 30px; } } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-amount-summary h2 { font-size: 30px; margin-bottom: 50px; } } .right-side-cart-area .cart-content .cart-amount-summary .summary-table li { margin-bottom: 20px; color: #000000; font-size: 14px; letter-spacing: 0.75px; text-transform: uppercase; font-weight: 600; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-amount-summary .summary-table li { font-size: 12px; margin-bottom: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .right-side-cart-area .cart-content .cart-amount-summary .summary-table li { font-size: 14px; margin-bottom: 15px; } } .right-side-cart-area .cart-content .cart-amount-summary .summary-table li span:last-child { font-weight: 700; font-family: "Ubuntu", sans-serif; } @media only screen and (max-width: 767px) { .right-side-cart-area .cart-content .cart-amount-summary .essence-btn { min-width: 140px; width: 140px; padding: 0 15px; } } /* :: 5.0 Welcome Area CSS */ .welcome_area { position: relative; z-index: 1; width: 100%; height: 600px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .welcome_area { height: 450px; } } @media only screen and (max-width: 767px) { .welcome_area { height: 350px; } } .welcome_area .hero-content h6 { font-size: 18px; color: #787878; margin-bottom: 10px; } .welcome_area .hero-content h2 { font-size: 60px; color: #000000; margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .welcome_area .hero-content h2 { font-size: 48px; } } @media only screen and (max-width: 767px) { .welcome_area .hero-content h2 { font-size: 30px; } } /* :: 6.0 Top Catagory Area CSS */ .single_catagory_area { position: relative; z-index: 1; width: 100%; height: 240px; -webkit-transition-duration: 500ms; transition-duration: 500ms; } @media only screen and (min-width: 768px) and (max-width: 991px) { .single_catagory_area { height: 180px; } } @media only screen and (max-width: 767px) { .single_catagory_area { height: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single_catagory_area { margin-bottom: 30px; } } .single_catagory_area:after { -webkit-transition-duration: 500ms; transition-duration: 500ms; content: ""; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6); position: absolute; top: 0; left: 0; z-index: -10; } .single_catagory_area .catagory-content a { display: block; font-size: 30px; font-weight: 700; color: #000000; letter-spacing: 1px; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991px) { .single_catagory_area .catagory-content a { font-size: 20px; } } @media only screen and (max-width: 767px) { .single_catagory_area .catagory-content a { font-size: 18px; } } .single_catagory_area:hover .catagory-content a { color: #0315ff; } /* :: 7.0 CTA Area CSS */ .cta-area { position: relative; z-index: 1; } .cta-area .cta-content { width: 100%; height: 550px; } @media only screen and (max-width: 767px) { .cta-area .cta-content { height: 400px; } } .cta-area .cta-content h6 { font-size: 24px; color: #dc0345; margin-bottom: 10px; } .cta-area .cta-content h2 { font-size: 60px; color: #000000; margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-area .cta-content h2 { font-size: 48px; } } @media only screen and (max-width: 767px) { .cta-area .cta-content h2 { font-size: 30px; } } .cta-area .cta-content .cta--text { padding-right: 150px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-area .cta-content .cta--text { padding-right: 50px; } } @media only screen and (max-width: 767px) { .cta-area .cta-content .cta--text { padding-right: 0; } } /* :: 8.0 Popular Products Area CSS */ .single-product-wrapper { position: relative; z-index: 1; margin-bottom: 50px; overflow: hidden; background-color: #ffffff; } .single-product-wrapper .product-img { position: relative; z-index: 1; overflow: hidden; } .single-product-wrapper .product-img img { width: 100%; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .single-product-wrapper .product-img .hover-img { -webkit-transition-duration: 500ms; transition-duration: 500ms; position: absolute; top: 0; left: 0; width: 100%; z-index: 10; opacity: 0; visibility: hidden; } .single-product-wrapper .product-img .product-badge { height: 25px; background-color: #000000; color: #ffffff; font-family: "Ubuntu", sans-serif; font-weight: 700; font-size: 12px; padding: 0 10px; display: inline-block; line-height: 25px; position: absolute; top: 20px; left: 20px; z-index: 10; } .single-product-wrapper .product-img .product-badge.offer-badge { background-color: #dc0345; } .single-product-wrapper .product-img .product-badge.new-badge { background-color: #0315ff; } .single-product-wrapper .product-img .product-favourite a { position: absolute; height: 25px; width: 45px; font-size: 14px; color: #ccc; top: 20px; right: 20px; z-index: 10; line-height: 25px; background-color: #ffffff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); text-align: center; opacity: 0; visibility: hidden; } .single-product-wrapper .product-img .product-favourite a.active { opacity: 1; visibility: visible; } .single-product-wrapper .product-description { position: relative; z-index: 1; padding-top: 25px; } .single-product-wrapper .product-description span { font-size: 10px; text-transform: uppercase; color: #787878; margin-bottom: 15px; letter-spacing: 0.75px; font-weight: 600; } .single-product-wrapper .product-description h6 { color: #222222; margin-bottom: 5px; } .single-product-wrapper .product-description p { margin-bottom: 0; font-size: 14px; font-family: "Ubuntu", sans-serif; font-weight: 700; color: #000000; } .single-product-wrapper .product-description p span { font-size: 14px; font-family: "Ubuntu", sans-serif; font-weight: 700; color: #aaaaaa; margin-right: 10px; text-decoration: line-through; } .single-product-wrapper .product-description .hover-content { position: absolute; width: calc(100% - 40px); top: -70px; left: 20px; right: 20px; opacity: 0; visibility: hidden; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .single-product-wrapper .product-description .hover-content .essence-btn { width: 100%; } .single-product-wrapper .favme { cursor: pointer; color: #ccc; } .single-product-wrapper .favme.active { color: #dc0345 !important; } .single-product-wrapper .favme.is_animating { animation: favme-anime .5s; } .single-product-wrapper:hover .product-img .hover-img { opacity: 1; visibility: visible; } .single-product-wrapper:hover .product-img .product-favourite a { opacity: 1; visibility: visible; } .single-product-wrapper:hover .hover-content { opacity: 1; visibility: visible; } @keyframes favme-anime { 0% { opacity: 1; font-size: 14px; -webkit-text-stroke-color: transparent; } 25% { opacity: .6; color: #ffffff; font-size: 15px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #dc0345; } 75% { opacity: .6; color: #ffffff; font-size: 15px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #dc0345; } 100% { opacity: 1; font-size: 14px; -webkit-text-stroke-color: transparent; } } .pagination { position: relative; z-index: 1; } .pagination .page-item .page-link { width: 40px; height: 40px; border: 1px solid #ebebeb; font-size: 12px; font-weight: 600; line-height: 38px; padding: 0; text-align: center; color: #787878; } .pagination .page-item .page-link:hover, .pagination .page-item .page-link:focus { color: #0315ff; box-shadow: none; } .pagination .page-item:first-child { margin-right: 15px; } .pagination .page-item:first-child .page-link { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .pagination .page-item:last-child { margin-left: 15px; } .pagination .page-item:last-child .page-link { margin-left: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* :: 9.0 Brands Area CSS */ .brands-area { position: relative; z-index: 1; background-color: #f5f7f9; padding: 100px 5%; } @media only screen and (max-width: 767px) { .brands-area { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 100px 5% 70px; } } @media only screen and (max-width: 767px) { .brands-area .single-brands-logo { -webkit-box-flex: 0; -ms-flex: 0 0 33.33333%; flex: 0 0 33.33333%; width: 33.33333%; max-width: 33.33333%; } } .brands-area .single-brands-logo img { max-width: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .brands-area .single-brands-logo img { max-width: 90px; } } @media only screen and (max-width: 767px) { .brands-area .single-brands-logo img { max-width: 80px; margin-bottom: 30px; } } /* :: 10.0 Single Product Details Area CSS */ .single_product_details_area { position: relative; z-index: 100; -ms-flex-wrap: wrap; flex-wrap: wrap; } .single_product_details_area .single_product_thumb, .single_product_details_area .single_product_desc { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; width: 50%; position: relative; z-index: 1; } @media only screen and (max-width: 767px) { .single_product_details_area .single_product_thumb, .single_product_details_area .single_product_desc { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; } } .single_product_details_area .product_thumbnail_slides { position: relative; z-index: 1; } .single_product_details_area .product_thumbnail_slides .owl-prev, .single_product_details_area .product_thumbnail_slides .owl-next { -webkit-transition-duration: 500ms; transition-duration: 500ms; position: absolute; top: 50%; z-index: 20; left: 30px; width: 40px; height: 40px; margin-top: -20px; padding: 5px; opacity: 0.4; } .single_product_details_area .product_thumbnail_slides .owl-prev:hover, .single_product_details_area .product_thumbnail_slides .owl-next:hover { opacity: 1; } .single_product_details_area .product_thumbnail_slides .owl-next { left: auto; right: 30px; } .single_product_details_area .single_product_desc { position: relative; z-index: 1; padding: 50px 5%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single_product_details_area .single_product_desc { padding: 30px 4%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .single_product_details_area .single_product_desc { padding: 30px 3%; } } .single_product_details_area .single_product_desc span { font-size: 14px; text-transform: uppercase; font-weight: 600; color: #787878; margin-bottom: 10px; display: block; } .single_product_details_area .single_product_desc a > h2 { font-size: 30px; display: block; margin-bottom: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single_product_details_area .single_product_desc a > h2 { font-size: 24px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .single_product_details_area .single_product_desc a > h2 { font-size: 20px; } } .single_product_details_area .single_product_desc .product-price { margin-bottom: 0; font-family: "Ubuntu", sans-serif; font-size: 24px; color: #dc0345; font-weight: 700; } @media only screen and (min-width: 768px) and (max-width: 991px) { .single_product_details_area .single_product_desc .product-price { font-size: 20px; } } .single_product_details_area .single_product_desc .product-price span { display: inline-block; font-family: "Ubuntu", sans-serif; font-size: 24px; color: #787878; font-weight: 700; text-decoration: line-through; margin-right: 15px; } .single_product_details_area .single_product_desc .product-desc { font-size: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .single_product_details_area .single_product_desc .product-desc { font-size: 14px; } } .single_product_details_area .single_product_desc .nice-select { position: relative; z-index: 100; border: 1px solid #ebebeb; border-radius: 0; font-size: 14px; font-weight: 500; height: 60px; line-height: 60; margin: 0; text-transform: uppercase; width: 220px; } .single_product_details_area .single_product_desc .nice-select .current { line-height: 60px; } .single_product_details_area .single_product_desc .nice-select .list { background-color: #f6f6f6; border-radius: 0; border: none; width: 100%; } .single_product_details_area .single_product_desc .nice-select .list .option.selected { color: #0315ff; } .single_product_details_area .single_product_desc .cart-fav-box .favme { cursor: pointer; color: #ccc; font-size: 24px; } .single_product_details_area .single_product_desc .cart-fav-box .favme.active { color: #dc0345 !important; } /* :: 11.0 Footer Area CSS */ .footer_area { position: relative; z-index: 1; background-color: #252525; padding: 70px 0 60px; } .footer_area .single_widget_area .footer_menu ul { display: -webkit-box; display: -ms-flexbox; display: flex; } .footer_area .single_widget_area .footer_menu ul li a { font-size: 16px; color: rgba(255, 255, 255, 0.6); display: block; font-weight: 400; font-family: "Ubuntu", sans-serif; padding: 0 10px; text-transform: capitalize; } .footer_area .single_widget_area .footer_menu ul li a:hover, .footer_area .single_widget_area .footer_menu ul li a:focus { color: #ffffff; } .footer_area .single_widget_area .footer_widget_menu { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer_area .single_widget_area .footer_widget_menu li { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; width: 50%; } .footer_area .single_widget_area .footer_widget_menu li a { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.6); display: block; font-weight: 400; margin-bottom: 10px; } .footer_area .single_widget_area .footer_widget_menu li a:hover, .footer_area .single_widget_area .footer_widget_menu li a:focus { color: #ffffff; } .footer_area .single_widget_area .footer_heading h6 { color: #ffffff; font-size: 12px; text-transform: uppercase; margin-bottom: 0; } .footer_area .single_widget_area .subscribtion_form form { position: relative; z-index: 1; width: 270px; } @media only screen and (max-width: 767px) { .footer_area .single_widget_area .subscribtion_form form { margin-bottom: 50px; } } .footer_area .single_widget_area .subscribtion_form form input { width: 100%; border: none; border-bottom: 2px solid rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6); font-size: 12px; height: 35px; background-color: transparent; } .footer_area .single_widget_area .subscribtion_form form input:focus { border-bottom-color: #ffffff; color: #ffffff; } .footer_area .single_widget_area .subscribtion_form form button { width: 30px; height: 35px; border: none; background-color: transparent; color: rgba(255, 255, 255, 0.6); position: absolute; top: 0; right: 0; text-align: center; z-index: 10; } .footer_area .single_widget_area .footer_social_area a { color: #ffffff; display: inline-block; padding: 0 10px; font-size: 16px; } /* :: 12.0 Breadcumb Area CSS */ .breadcumb_area { position: relative; z-index: 1; width: 100%; height: 140px; } .breadcumb_area:after { background-color: rgba(255, 255, 255, 0.9); position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -5; content: ''; } .breadcumb_area .page-title h2 { font-size: 30px; text-transform: uppercase; font-weight: 700; font-family: "Ubuntu", sans-serif; letter-spacing: 1px; margin-bottom: 0; } .breadcumb_area.breadcumb-style-two { width: 100%; height: 390px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcumb_area.breadcumb-style-two { height: 300px; } } @media only screen and (max-width: 767px) { .breadcumb_area.breadcumb-style-two { height: 250px; } } .breadcumb_area.breadcumb-style-two .page-title h2 { font-size: 72px; text-transform: uppercase; font-weight: 700; font-family: "Ubuntu", sans-serif; letter-spacing: 1px; margin-bottom: 0; color: #0315ff; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcumb_area.breadcumb-style-two .page-title h2 { font-size: 48px; } } @media only screen and (max-width: 767px) { .breadcumb_area.breadcumb-style-two .page-title h2 { font-size: 30px; } } /* :: 13.0 Product Sidebar Area CSS */ .widget { position: relative; z-index: 1; } .widget .widget-title { font-size: 18px; text-transform: capitalize; font-weight: 600; } .widget .widget-title2 { text-transform: uppercase; font-size: 12px; margin-bottom: 15px; display: block; margin-bottom: 0; color: #000000; font-weight: 600; } .widget .catagories-menu li > a { text-transform: uppercase; font-size: 12px; margin-bottom: 15px; display: block; } .widget .catagories-menu .sub-menu { margin-left: 15px; margin-bottom: 15px; } .widget .catagories-menu .sub-menu li > a { text-transform: capitalize; font-size: 14px; margin-bottom: 5px; display: block; font-weight: 300; color: #787878; } .widget .catagories-menu .sub-menu li > a:hover { color: #0315ff; } .widget.price .ui-slider-handle { background-color: #000000; border: none; border-radius: 0; top: -6px; width: 4px; height: 15px; margin: 0; } .widget.price .ui-slider-range.ui-corner-all.ui-widget-header { background-color: #0315ff; } .widget.price .ui-slider-horizontal { height: 5px; } .widget.price .range-price { font-size: 12px; font-weight: 600; margin-top: 15px; text-transform: uppercase; } .widget.color .widget-desc ul { -ms-flex-wrap: wrap; flex-wrap: wrap; } .widget.color .widget-desc ul li { -webkit-box-flex: 0; -ms-flex: 0 0 20%; flex: 0 0 20%; width: 20%; margin-bottom: 15px; } .widget.color .widget-desc ul li a { width: 30px; height: 30px; display: block; background-color: #ffffff; position: relative; z-index: 1; box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); } .widget.color .widget-desc ul li a.color1 { background-color: #ffffff; } .widget.color .widget-desc ul li a.color2 { background-color: #969696; } .widget.color .widget-desc ul li a.color3 { background-color: #030303; } .widget.color .widget-desc ul li a.color4 { background-color: #0315ff; } .widget.color .widget-desc ul li a.color5 { background-color: #dc0647; } .widget.color .widget-desc ul li a.color6 { background-color: #fff56a; } .widget.color .widget-desc ul li a.color7 { background-color: #f26e51; } .widget.color .widget-desc ul li a.color8 { background-color: #9a8777; } .widget.color .widget-desc ul li a.color9 { background-color: #5b862a; } .widget.color .widget-desc ul li a.color10 { background-color: #8662a9; } .widget.brands ul li { display: block; } .widget.brands ul li a { display: block; margin-bottom: 5px; font-size: 14px; color: #787878; font-weight: 300; text-transform: capitalize; } .widget.brands ul li a:hover { color: #0315ff; } .product-topbar { position: relative; z-index: 100; margin-bottom: 40px; } .product-topbar .total-products p { margin-bottom: 0; font-size: 12px; font-weight: 600; color: #000000; text-transform: uppercase; letter-spacing: 0.75px; } .product-topbar .total-products p span { color: #0315ff; } .product-topbar .product-sorting p { margin-bottom: 0; font-size: 12px; font-weight: 600; color: #000000; text-transform: uppercase; letter-spacing: 0.75px; margin-right: 15px; } .product-topbar .product-sorting form select { background-color: transparent; border: none; } .product-topbar .product-sorting form select option { font-size: 12px; font-weight: 600; color: #000000; text-transform: uppercase; letter-spacing: 0.75px; } .product-topbar .nice-select { border: none; font-size: 14px; font-weight: 500; height: auto; line-height: 1.5; padding-left: 0; margin: 0; text-transform: uppercase; } .product-topbar .nice-select .list { background-color: #f6f6f6; border-radius: 0; border: none; } .product-topbar .nice-select .list .option.selected { color: #0315ff; } /* :: 14.0 Checkout Area CSS */ .checkout_details_area form label { font-size: 12px; text-transform: uppercase; font-weight: 600; } .checkout_details_area form label span { color: #0315ff; } .checkout_details_area form .form-control { height: 42px; border: 1px solid #ebebeb; background-color: transparent; border-radius: 0; } .checkout_details_area form .nice-select { border-radius: 0; border: 1px solid #ebebeb; } .checkout_details_area form .nice-select .list { width: 100%; border-radius: 0; } .order-details-confirmation { width: 100%; border: 2px solid #ebebeb; padding: 40px; } @media only screen and (max-width: 767px) { .order-details-confirmation { margin-top: 100px; padding: 20px; } } .order-details-confirmation .order-details-form li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 0; font-size: 12px; text-transform: uppercase; padding: 20px 0; border-bottom: 2px solid #ebebeb; font-weight: 600; } .order-details-confirmation .card-header h6 a { display: block; font-size: 14px; text-transform: uppercase; } .order-details-confirmation .card-header h6 a i { color: #9f9f9f; } .order-details-confirmation .card { border: none; } .order-details-confirmation .card-header { background-color: transparent; border-bottom: none; } .order-details-confirmation .card-body p { font-size: 12px; line-height: 2; color: #9f9f9f; } /* :: 15.0 Blog Area CSS */ .blog-wrapper { position: relative; z-index: 1; } .blog-wrapper .single-blog-area { position: relative; z-index: 1; box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); -webkit-transition-duration: 500ms; transition-duration: 500ms; overflow: hidden; } .blog-wrapper .single-blog-area img { width: 100%; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .blog-wrapper .single-blog-area .post-title { -webkit-transition-duration: 500ms; transition-duration: 500ms; background-color: #ffffff; padding: 20px 40px; position: absolute; bottom: 0; left: 0; width: 85%; height: auto; z-index: 10; } @media only screen and (max-width: 767px) { .blog-wrapper .single-blog-area .post-title { padding: 20px; } } .blog-wrapper .single-blog-area .post-title a { display: block; font-size: 18px; font-weight: 600; line-height: 1.5; } @media only screen and (max-width: 767px) { .blog-wrapper .single-blog-area .post-title a { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-wrapper .single-blog-area .post-title a { font-size: 18px; } } .blog-wrapper .single-blog-area .hover-content { -webkit-transition-duration: 500ms; transition-duration: 500ms; background-color: #ffffff; background-color: #ffffff; padding: 20px 40px; position: absolute; width: 85%; height: 100%; z-index: 100; top: 0; left: 0; opacity: 0; visibility: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-wrapper .single-blog-area .hover-content { padding: 20px; } } @media only screen and (max-width: 767px) { .blog-wrapper .single-blog-area .hover-content { padding: 20px; } } .blog-wrapper .single-blog-area .hover-content .hover-post-title a { display: block; font-size: 18px; font-weight: 600; line-height: 1.5; margin-bottom: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-wrapper .single-blog-area .hover-content .hover-post-title a { font-size: 16px; margin-bottom: 10px; } } @media only screen and (max-width: 767px) { .blog-wrapper .single-blog-area .hover-content .hover-post-title a { font-size: 14px; margin-bottom: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-wrapper .single-blog-area .hover-content .hover-post-title a { font-size: 18px; margin-bottom: 20px; } } .blog-wrapper .single-blog-area .hover-content .hover-post-title a:hover { color: #0315ff; } @media only screen and (max-width: 767px) { .blog-wrapper .single-blog-area .hover-content p { display: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { .blog-wrapper .single-blog-area .hover-content p { display: block; font-size: 14px; line-height: 1.7; } } .blog-wrapper .single-blog-area .hover-content > a { display: block; font-size: 12px; font-weight: 600; margin-bottom: 0; color: #0315ff; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog-wrapper .single-blog-area .hover-content > a { margin-top: 15px; } } @media only screen and (max-width: 767px) { .blog-wrapper .single-blog-area .hover-content > a { margin-top: 30px; } } .blog-wrapper .single-blog-area:hover .hover-content, .blog-wrapper .single-blog-area:focus .hover-content { opacity: 1; visibility: visible; } .blog-wrapper .single-blog-area:hover img, .blog-wrapper .single-blog-area:focus img { -webkit-transform: scale(1.1); transform: scale(1.1); } .single-blog-wrapper { position: relative; z-index: 1; } .single-blog-wrapper .single-blog-content-wrapper { position: relative; z-index: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; } .single-blog-wrapper .single-blog-content-wrapper .single-blog--text { -webkit-box-flex: 0; -ms-flex: 0 0 75%; flex: 0 0 75%; max-width: 75%; width: 75%; padding: 70px 7%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-blog-wrapper .single-blog-content-wrapper .single-blog--text { -webkit-box-flex: 0; -ms-flex: 0 0 65%; flex: 0 0 65%; max-width: 65%; width: 65%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .single-blog-wrapper .single-blog-content-wrapper .single-blog--text { -webkit-box-flex: 0; -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; width: 60%; } } @media only screen and (max-width: 767px) { .single-blog-wrapper .single-blog-content-wrapper .single-blog--text { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; } } .single-blog-wrapper .single-blog-content-wrapper .single-blog--text h2 { font-size: 30px; line-height: 1.5; margin-bottom: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-blog-wrapper .single-blog-content-wrapper .single-blog--text h2 { font-size: 24px; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .single-blog-wrapper .single-blog-content-wrapper .single-blog--text h2 { font-size: 20px; margin-bottom: 20px; } } @media only screen and (max-width: 767px) { .single-blog-wrapper .single-blog-content-wrapper .single-blog--text h2 { font-size: 18px; margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .single-blog-wrapper .single-blog-content-wrapper .single-blog--text h2 { font-size: 24px; } } .single-blog-wrapper .single-blog-content-wrapper .single-blog--text p { font-size: 18px; font-weight: 300; margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .single-blog-wrapper .single-blog-content-wrapper .single-blog--text p { font-size: 16px; } } @media only screen and (max-width: 767px) { .single-blog-wrapper .single-blog-content-wrapper .single-blog--text p { font-size: 14px; } } .single-blog-wrapper .single-blog-content-wrapper .single-blog--text blockquote { margin-bottom: 50px; } .single-blog-wrapper .single-blog-content-wrapper .single-blog--text blockquote h6 { font-size: 18px; line-height: 2; display: -webkit-box; display: -ms-flexbox; display: flex; } .single-blog-wrapper .single-blog-content-wrapper .single-blog--text blockquote h6 i { margin-right: 30px; font-size: 30px; color: #0315ff; } .single-blog-wrapper .single-blog-content-wrapper .single-blog--text blockquote span { margin-left: 60px; font-size: 16px; font-weight: 600; color: rgba(0, 0, 0, 0.6); } .single-blog-wrapper .single-blog-content-wrapper .related-blog-post { -webkit-box-flex: 0; -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; width: 25%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .single-blog-wrapper .single-blog-content-wrapper .related-blog-post { -webkit-box-flex: 0; -ms-flex: 0 0 35%; flex: 0 0 35%; max-width: 35%; width: 35%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .single-blog-wrapper .single-blog-content-wrapper .related-blog-post { -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; width: 40%; } } @media only screen and (max-width: 767px) { .single-blog-wrapper .single-blog-content-wrapper .related-blog-post { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; } } .single-blog-wrapper .single-blog-content-wrapper .related-blog-post .single-related-blog-post { position: relative; z-index: 1; overflow: hidden; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .single-blog-wrapper .single-blog-content-wrapper .related-blog-post .single-related-blog-post img { width: 100%; -webkit-transition-duration: 500ms; transition-duration: 500ms; } .single-blog-wrapper .single-blog-content-wrapper .related-blog-post .single-related-blog-post a { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -ms-grid-row-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 5px 50px; } .single-blog-wrapper .single-blog-content-wrapper .related-blog-post .single-related-blog-post a h5 { color: #ffffff; text-align: center; font-size: 18px; margin-bottom: 0; line-height: 1.5; } .single-blog-wrapper .single-blog-content-wrapper .related-blog-post .single-related-blog-post:hover img, .single-blog-wrapper .single-blog-content-wrapper .related-blog-post .single-related-blog-post:focus img { -webkit-transform: scale(1.2); transform: scale(1.2); } /* :: 16.0 Regular Page Area CSS */ .regular-page-content-wrapper { position: relative; z-index: 1; } .regular-page-content-wrapper .regular-page-text h2 { font-size: 30px; line-height: 1.5; margin-bottom: 50px; } .regular-page-content-wrapper .regular-page-text p { font-size: 18px; font-weight: 300; margin-bottom: 50px; } .regular-page-content-wrapper .regular-page-text blockquote { margin-bottom: 50px; } .regular-page-content-wrapper .regular-page-text blockquote h6 { font-size: 18px; line-height: 2; display: -webkit-box; display: -ms-flexbox; display: flex; } .regular-page-content-wrapper .regular-page-text blockquote h6 i { margin-right: 30px; font-size: 30px; color: #0315ff; } .regular-page-content-wrapper .regular-page-text blockquote span { margin-left: 60px; font-size: 16px; font-weight: 600; color: rgba(0, 0, 0, 0.6); } /* :: 17.0 Contact Area CSS */ .contact-area { position: relative; z-index: 1; -ms-flex-wrap: wrap; flex-wrap: wrap; } .contact-area .google-map { -webkit-box-flex: 0; -ms-flex: 0 0 60%; flex: 0 0 60%; max-width: 60%; width: 60%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-area .google-map { -webkit-box-flex: 0; -ms-flex: 0 0 55%; flex: 0 0 55%; max-width: 55%; width: 55%; } } @media only screen and (max-width: 767px) { .contact-area .google-map { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; } } .contact-area .google-map #googleMap { width: 100%; height: 685px; } @media only screen and (max-width: 767px) { .contact-area .google-map #googleMap { height: 400px; } } .contact-area .contact-info { -webkit-box-flex: 0; -ms-flex: 0 0 40%; flex: 0 0 40%; max-width: 40%; width: 40%; padding: 50px 5%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-area .contact-info { -webkit-box-flex: 0; -ms-flex: 0 0 45%; flex: 0 0 45%; max-width: 45%; width: 45%; padding: 50px 3%; } } @media only screen and (max-width: 767px) { .contact-area .contact-info { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; width: 100%; padding: 50px 5%; } } .contact-area .contact-info h2 { font-size: 30px; margin-bottom: 20px; } .contact-area .contact-info p { font-size: 16px; font-weight: 300; } .contact-area .contact-info .contact-address p { font-size: 12px; font-weight: 600; margin-bottom: 10px; } .contact-area .contact-info .contact-address p span { font-weight: 600; color: #000000; width: 100px; display: inline-block; text-transform: uppercase; } .contact-area .contact-info .contact-address p:last-child { margin-top: 100px; } .contact-area .contact-info .contact-address p:last-child a { font-size: 14px; font-weight: 300; } .contact-area .contact-info .contact-address p:last-child a:hover { color: #0315ff; } /* ##### The End ##### */ /*# sourceMappingURL=core-style.css.map */

Related: See More


Questions / Comments: