/*!
Theme Name: Viblock
Theme URI:
Author: TwoPoints
Author URI:
Description: "Viblock" is a simple & easy to use WordPress theme. It is based on world's most popular framework for responsive websites, Twitter Bootstrap 4. It is a perfect combination of Bootstrap 4 and WordPress.
Version: 1.0.9
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: viblock
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, custom-colors, full-width-template, rtl-language-support, sticky-post, theme-options, blog

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Viblock is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

/*  =======================================================
		Fonts
	======================================================= */
@font-face { font-family: 'Karla-Regular'; src: url('assets/fonts/Karla-Regular.eot?#iefix') format('embedded-opentype'),  url('assets/fonts/Karla-Regular.woff') format('woff'), url('assets/fonts/Karla-Regular.ttf') format('truetype'), url('assets/fonts/Karla-Regular.svg#Karla-Regular') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Karla-Bold'; src: url('assets/fonts/Karla-Bold.eot?#iefix') format('embedded-opentype'),  url('assets/fonts/Karla-Bold.woff') format('woff'), url('assets/fonts/Karla-Bold.ttf') format('truetype'), url('assets/fonts/Karla-Bold.svg#Karla-Bold') format('svg'); font-weight: normal; font-style: normal; }


/*  =======================================================
		Theme/Wordpress General Style
	======================================================= */
body { background-color: #fff; -ms-word-wrap: break-word; word-wrap: break-word; -webkit-font-smoothing: auto; text-rendering: optimizeLegibility !important; -moz-osx-font-smoothing: grayscale; font-smoothing: auto; font-family: "rubik", sans-serif; width: 100%; }
p { font-family: "rubik", sans-serif; font-size: 16px; font-weight: 300; line-height: 28px; letter-spacing: 0.24px; color: #3b3b3b; margin: 0; padding: 0 0 30px; }
ul li, ol li { font-family: "rubik", sans-serif; font-size: 16px; font-weight: 300; line-height: 28px; letter-spacing: 0.24px; color: #3b3b3b; margin: 0; padding: 0 0 10px; }
hr { background-color: #979797; border: 0; height: 2px; margin-bottom: 1.5em; }
dt { font-weight: bold; }
dd { margin: 0 1.5em 1.5em; }
img { height: auto; max-width: 100%; }
figure { margin: 1em 0; }
table { margin: 0 0 1.5em; width: 100%; }
a, button, input { -webkit-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; color: #ea1b0e; }
a:hover, a:focus, a:active { text-decoration: none; outline: none; color: #000; }
embed, iframe, object { max-width: 100%; }
#content[tabindex="-1"]:focus { outline: 0; }
.alignleft { display: inline; float: left; margin-right: 1.5em; }
.alignright { display: inline; float: right; margin-left: 1.5em; }
.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }
#page { position: relative; }
#content.inner-page { padding: 30px 0; }
strong, b { font-weight: 500; }

/* ======================[ Wordpress Default Gallery Style ]====================== */
.wp-caption { margin-bottom: 1.5em; max-width: 100%; }
.wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; }
.wp-caption .wp-caption-text { margin: 0.8075em 0; }
.wp-caption-text { text-align: center; }
.gallery { margin-bottom: 1.5em; }
.gallery-item { display: inline-block; text-align: center; vertical-align: top; width: 100%; }
.gallery-columns-2 .gallery-item { max-width: 50%; }
.gallery-columns-3 .gallery-item { max-width: 33.33%; }
.gallery-columns-4 .gallery-item { max-width: 25%; }
.gallery-columns-5 .gallery-item { max-width: 20%; }
.gallery-columns-6 .gallery-item { max-width: 16.66%; }
.gallery-columns-7 .gallery-item { max-width: 14.28%; }
.gallery-columns-8 .gallery-item { max-width: 12.5%; }
.gallery-columns-9 .gallery-item { max-width: 11.11%; }
.gallery-caption { display: block; }

/*  =======================================================
		Heading Style
	======================================================= */
h2 { color: #383838; font-family: "rubik", sans-serif; font-size: 26px; line-height: 31px; letter-spacing: 0.40px; font-weight: normal; margin: 0 0 1em; }
h3 { color: #383838; font-family: "rubik", sans-serif; font-size: 25px; line-height: 29px; letter-spacing: 0.38px; font-weight: normal; margin: 0 0 1em; }
h4 { color: #383838; font-family: "rubik", sans-serif; font-size: 22px; line-height: 29px; letter-spacing: 0.34px; font-weight: normal; margin: 0 0 1em; }
h5 { color: #383838; font-family: "rubik", sans-serif; font-size: 20px; line-height: 29px; letter-spacing: 0.31px; font-weight: normal; margin: 0 0 1em; }
h6 { color: #383838; font-family: "rubik", sans-serif; font-size: 18px; line-height: 25px; letter-spacing: 0.30px; font-weight: normal; margin: 0 0 1em; }


/*  =======================================================
		Header
	======================================================= */
#site-header.header-sticky { position: absolute; z-index: 11111; left: 0; top: 0; width: 100%; padding: 50px 0 0; }
#site-header.header-normal { padding: 50px 0; }
#site-logo { margin: 0; width: 170px; }
#site-logo a { display: block; }
.header-sticky .header-phone { background: rgba(26, 24, 26, 0.24); position: absolute; right: 0; top: 0; width: 50px; height: 50px; z-index: 1111; text-align: center; }
.header-sticky .header-phone i.fas { color: #fff; font-size: 20px; line-height: 50px; }
.header-sticky .header-phone:hover { background: rgba(26, 24, 26, 0.5); }
.header-sticky .home-menu-icon { background: #a8332a; position: absolute; right: 0; top: 50px; width: 50px; height: 50px; z-index: 1111; text-align: center; padding: 10px 0; }
.header-sticky .home-menu-icon span { width: 25px; height: 2px; background: #fff; display: block; margin: 6px auto; }
.header-sticky .home-menu-icon:hover { background: rgba(168, 51, 42, 0.6); }
.header-normal .menu-icon { display: inline-block; }
.header-normal .menu-icon span { width: 35px; height: 3px; background: #000; display: block; margin: 9px auto; }

/* ======================[ Contact Info ]====================== */
.header-contact { background: rgba(26, 24, 26, 0.24); position: absolute; right: 50px; top: 0; width: 0; overflow: hidden; max-width: 665px; height: 50px; }
.header-contact .hc-inner { display: inline-block; vertical-align: top; color: #fff; font-family: 'rubik', sans-serif; font-size: 13px; font-weight: 300; line-height: 20px; letter-spacing: 2px; text-transform: uppercase; padding: 15px 20px; }
.header-contact .hc-inner a { color: #fff; }
.header-contact .hc-inner a:hover { color: #c2c2c2; }

/* ======================[ Menu ]====================== */
#site-menu { background: #2e2e2e; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; overflow-y: auto; overflow-x: hidden; padding: 10% 15px; text-align: center; display: none; }
#site-menu ul { list-style: none; padding: 0; }
#site-menu ul li { color: #c2c2c2; font-family: 'Karla-Regular', sans-serif; font-size: 25px; font-weight: normal; line-height: 30px; letter-spacing: 0.26px; padding: 0 0 15px; text-transform: uppercase; }
#site-menu ul li a { color: #c2c2c2; }
#site-menu ul li a:hover { color: #fff; }
#site-menu .menu-close { position: absolute; right: 25px; top: 25px; color: #d9d9d9; font-size: 50px; line-height: 50px; font-family: 'Karla-Regular', sans-serif;font-weight: normal; }
#site-menu .menu-close:hover { color: #fff; }


/*  =======================================================
		Footer
	======================================================= */
#site-footer { background: #2e2e2e; }
#site-footer .footer-top { border-bottom: 1px solid #979797; padding: 2em 0 4em; }
#site-footer .footer-top h3 { color: #fff; }
#site-footer .footer-top p { color: #c2c2c2; font-family: 'rubik', sans-serif; font-size: 16px; font-weight: 300; line-height: 26px; letter-spacing: 0.26px; padding: 0 0 1rem; }
#site-footer .footer-top .ft-top-link { color: #fff; font-family: 'Karla-Bold', sans-serif; font-size: 20px; font-weight: normal; line-height: 23px; letter-spacing: 0.31px; text-transform: uppercase; }
#site-footer .footer-top .ft-top-link a { color: #fff; }
#site-footer .footer-top .ft-top-link a:hover { color: #c2c2c2; }
#site-footer .footer-top .ft-top-link a i.fas { font-size: 18px; line-height: 20px; vertical-align: baseline; padding: 0 0 0 5px; }
#site-footer .footer-middle { padding: 3em 0 2em; border-bottom: 1px solid #979797; }
#site-footer .footer-middle h4, #site-footer .footer-middle h5 { color: #fff; }
#site-footer .footer-middle ul { list-style: none; padding: 0; }
#site-footer .footer-middle ul li { color: #c2c2c2; font-family: 'rubik', sans-serif; font-size: 16px; font-weight: 300; line-height: 23px; letter-spacing: 0.26px; padding: 0 0 0.5rem; }
#site-footer .footer-middle ul li a { color: #c2c2c2; }
#site-footer .footer-middle ul li a:hover { color: #fff; }
#site-footer .footer-middle p { color: #c2c2c2; font-family: 'rubik', sans-serif; font-size: 16px; font-weight: 300; line-height: 23px; letter-spacing: 0.26px; padding: 0 0 5px; }
#site-footer .footer-middle p a { color: #c2c2c2; }
#site-footer .footer-middle p a:hover { color: #fff; }
#site-footer .footer-bottom { padding: 3em 0 0; }
#site-footer .footer-bottom p { color: #fff; font-family: 'Karla-Bold', sans-serif; font-size: 14px; font-weight: 300; line-height: 17px; letter-spacing: 0.22px; text-transform: uppercase; }


/*  =======================================================
		Home Page
	======================================================= */
/* ======================[ banner ]====================== */
#home-banner { width: 100%; height: 100vh; display: table; position: relative; }
#home-banner::after { content: ''; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; width: 100%; height: 100vh; position: fixed; left: 0; top: 0; z-index: -1; }
#home-banner .banner-title { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; font-family: "rubik", sans-serif; font-size: 35px; font-weight: 300; line-height: 52px; letter-spacing: 0.54px; color: #fff; }
#home-banner .banner-title .banner-title-inner { position: relative; padding: 20px; top: -30px; }
#home-banner .banner-scroll { position: absolute; bottom: 30px; left: 50%; color: #fff; font-family: "Karla-Regular", sans-serif; font-size: 20px; font-weight: normal; line-height: 23px; letter-spacing: 0.31px; text-transform: uppercase; margin-left: -35px; }
#home-banner .banner-scroll span { display: block; text-align: center; padding: 10px 0 0; }

/* ======================[ Products ]====================== */
.home-products .hp-content { padding: 5% 0; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1111;  }
.home-products .hp-content h2, .home-products .hp-content p { color: #ccc; }
.home-products { background: #2e2e2e; min-height: 500px; position: relative; }
.home-products .home-prdt-grid { position: relative; z-index: 11111; }
.home-products .prdt-item { float: left; width: 50%; height: 300px; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; position: relative; }
.home-products .prdt-item::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 11; background: rgba(236,26,15,0.37); opacity: 0; transition: all ease 0.35s; -webkit-transition: all ease 0.35s; }
.home-products .prdt-item:hover::after { opacity: 1; }
.home-products .prdt-item .prdt-link { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1111; }
.home-products .prdt-item .prdt-info { position: absolute; left: 10%; bottom: 10%; width: 80%; z-index: 111 }
.home-products .prdt-item .prdt-info h4 { color: #fff; margin: 0; }
.home-products .prdt-item .prdt-info p { color: #fff; font-family: "rubik", sans-serif; font-size: 20px; line-height: 24px; letter-spacing: 0.31px; font-weight: normal; padding: 10px 0 0; margin: 0; }
.home-products .prdt-item .prdt-info a { color: #fff; font-family: 'Karla-Bold', sans-serif; font-size: 16px; font-weight: 300; line-height: 19px; letter-spacing: 0.31px; text-transform: uppercase; margin: 10px 0 5px; display: inline-block; }
.home-products .prdt-item .prdt-info .prdt-inner { display: none; }
.home-products .home-prdt-grid .clearfix:first-child .prdt-item:first-child { width: 33.33%; }
.home-products .home-prdt-grid .clearfix:first-child .prdt-item:nth-child(2) { width: 66.5%; }
.home-products .home-prdt-grid .prdt-item:not(:first-child) { width: 33.33%; }
.home-products .home-prdt-grid .prdt-item span{ color: #fff; margin-right: 20px; margin-top: 10px; border: 1px solid #ffff; border-radius: 50%; padding: 10px; height: 50px; line-height: 31px;z-index: 999999; opacity: 1; position: absolute; right: 0; }  
/* ======================[ Content ]====================== */
.home-content { background: #343434; padding: 15% 0 7%; }
.home-content h2, .home-content p { color: #d9d9d9; }
.home-content .hc-link { padding: 10px 0 0; }
.home-content .hc-link a { color: #fff; font-family: 'Karla-Bold', sans-serif; font-size: 16px; font-weight: 300; line-height: 20px; letter-spacing: 0.31px; text-transform: uppercase; }
.home-content .hc-link a:hover { color: #d9d9d9; }
.home-content .hc-link a i.fas { font-size: 15px; line-height: 20px; vertical-align: baseline; padding: 0 0 0 5px; }

/* ======================[ Slider ]====================== */
#home-carousel .carousel-inner { padding: 25% 0 0; overflow: hidden; position: relative; }
#home-carousel .carousel-item { height: 100%; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#home-carousel .hc-slide { height: 100%; background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; }
#home-carousel .hc-slide .hcs-info { background: rgba( 0, 0, 0, 0.64 ); position: absolute; left: 0; bottom: 0; padding: 15px; z-index: 1111; }
#home-carousel .hc-slide .hcs-info h6 { color: #fff; font-size: 16px; line-height: 20px; margin: 0; padding: 0; }
#home-carousel .hc-slide .hcs-info h6::after { content: "+"; display: inline-block; padding: 0 0 0 10px; }
#home-carousel .hc-slide .hcs-info p { color: #fff; font-size: 14px; line-height: 28px; font-weight: 300; letter-spacing: 2px; margin: 0; padding: 10px 0 5px; width: 100%; max-width: 400px; }
#home-carousel .hc-slide .hcs-info .hcs-inner { display: none; }
#home-carousel .hc-prev { background-image: url('assets/images/arrow-left@2x.png'); position: absolute; left: 40px; top: 50%; width: 37px; height: 64px; background-position: center center; background-repeat: no-repeat; background-size: 100% auto; -webkit-background-size: 100% auto; margin: -32px 0 0; z-index: 1111; }
#home-carousel .hc-next { background-image: url('assets/images/arrow-right@2x.png'); position: absolute; right: 40px; top: 50%; width: 37px; height: 64px; background-position: center center; background-repeat: no-repeat; background-size: 100% auto; -webkit-background-size: 100% auto; margin: -32px 0 0; z-index: 1111; }


/*  =======================================================
		Contact Page
	======================================================= */
.contact-location h5 { font-weight: 500; }
.ct-form .ct-area { padding: 0 0 15px; }
.ct-form .ct-field { color: #383838; border: 1px solid #474747; width: 100%; height: 40px; padding: 10px; font-family: "rubik", sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0.22px; display: block; }
.ct-form textarea { color: #383838; border: 1px solid #474747; width: 100%; height: 100px; padding: 10px; font-family: "rubik", sans-serif; font-size: 14px; line-height: 20px; resize: none; letter-spacing: 0.22px; display: block; }
.ct-form .label-info { color: #383838; font-family: "rubik", sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0.22px; text-transform: uppercase; padding: 10px 0 0; }
.ct-form .d-inline-block span.wpcf7-list-item input[type="radio"]{ display: none; }
.ct-form .d-inline-block span.wpcf7-list-item label { margin: 0; }
.ct-form .d-inline-block span.wpcf7-list-item label input[type="radio"] + span { color: #383838; font-family: "rubik", sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0.22px; text-transform: uppercase; }
.ct-form .d-inline-block span.wpcf7-list-item label input[type="radio"] + span::before { content: '\f111'; font-family: "Font Awesome 5 Free"; font-size: 20px; font-weight: normal; line-height: 20px; vertical-align: top; padding: 0 10px 0 0; }
.ct-form .d-inline-block span.wpcf7-list-item label input[type="radio"]:checked + span::before { content: '\f192'; }
.ct-form .ct-btn { background: #484848; color: #fff; border: none; box-shadow: none; width: 180px; height: 40px; padding: 12px 10px 8px; font-family: "rubik", sans-serif; font-size: 14px; line-height: 20px; letter-spacing: 0.22px; margin: 0; text-transform: uppercase; cursor: pointer; }
.ct-form .ct-btn:hover { background: #000; }
.ct-form .ct-field::placeholder, .ct-form textarea::placeholder { text-transform: uppercase; color: #383838; }
.ct-form span.wpcf7-not-valid-tip { font-family: "rubik", sans-serif; font-size: 15px; font-weight: 300; line-height: 20px; padding: 5px 0 0; }
.ct-form .ct-field:active, .ct-form .ct-field:focus, .ct-form .ct-field:hover, .ct-form textarea:active, .ct-form textarea:focus, .ct-form textarea:hover, .ct-form .ct-btn:active, .ct-form .ct-btn:focus, .ct-form .ct-btn:hover { outline: none; box-shadow: none; }
.ct-form div.wpcf7-response-output { margin: 5px 0 0; font-family: "rubik", sans-serif; font-size: 15px; line-height: 20px; letter-spacing: 0.22px; padding: 9px 10px 5px; border-color: #f44336; }
.ct-form div.wpcf7-mail-sent-ok { border-color: #398f14; }


/*  =======================================================
		Page Common Components
	======================================================= */
/* ======================[ Color Variants ]====================== */
.cv-area { background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; width: 29.3%; margin: 0 4% 15px 0; padding: 30% 0 0; position: relative; float: left; }
.cv-area.row-4 { width: 21%; margin: 0 4% 15px 0; padding: 21% 0 0; }
.cv-area.row-5 { width: 18%; margin: 0 2% 15px 0; padding: 18% 0 0; }
.cv-area .cv-name { background: rgba( 0, 0, 0, 0.64 ); position: absolute; left: 0; bottom: 0; padding: 10px 10px 7px; z-index: 1111; max-width: 100%; color: #fff; font-family: "rubik", sans-serif; font-size: 15px; line-height: 20px; letter-spacing: 0.23px; font-weight: 300; text-transform: uppercase; }
.cv-area.row-4 .cv-name { font-size: 13px; }
.cv-area.row-5 .cv-name { font-size: 12px; }

/* ======================[ Carousel ]====================== */
.carousel-nav { padding: 15px 0; position: relative; display: block; margin: 0; bottom: 0; }
.carousel-nav .carousel-nav-item { width: 18%; padding: 16.5% 0 0; -webkit-background-size: cover; background-size: cover; background-position: center center; background-repeat: no-repeat; margin: 0 2% 20px 0; float: left; position: relative; cursor: pointer; }
.carousel-nav .carousel-nav-item.active::after { content: ''; border: 3px solid #424242; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
#home-carousel.inner-page-carousel .carousel-inner { padding: 56.5% 0 0; }
.cp-gallery-area { display: none; }
.cp-gallery-area.active { display: block; }
#home-carousel.inner-page-carousel .hc-slide .hcs-info h6::after { display: none; }

/* ======================[ Features & Accordian ]====================== */
.feature-info { color: #454545; font-family: "rubik", sans-serif; font-size: 18px; line-height: 27px; letter-spacing: 0.30px; font-weight: normal; margin: 0 0 1em; }
.accordion { border-bottom: 1px solid #8A8989; }
.accordion .accordion-section { border-top: 1px solid #8A8989; padding: 0 25px; }
.accordion .accordion-title { padding: 20px 0; cursor: pointer; position: relative; }
.accordion .accordion-title::after { content: '-'; font-size: 22px; font-weight: normal; font-family: 'rubik', sans-serif; line-height: 24px; position: absolute; right: 0; top: 19px; }
.accordion .accordion-title.collapsed::after { content: '+'; color: #8A8989; }
.accordion .accordion-title h6 { margin: 0; padding: 0; color: #454545; }
.accordion .accordion-title.collapsed h6 { color: #8A8989; }
.accordion .accordion-title:hover h6, .accordion .accordion-title:hover::after { color: #454545; }
.accordion .accordion-content { padding: 5px 0 25px; }
.accordion .accordion-content .ft-left { width: 8%; float: left; }
.accordion .accordion-content .ft-right { width: 90%; float: right; }
.accordion .accordion-content .accordion-image { max-width: 36px; height: auto; width: 100%; }
.accordion #ft_list_3 img {max-width: 16px; }
.accordion .accordion-content p { font-size: 14px; line-height: 25px; color: #454545; padding: 0 0 10px; }
.accordion .accordion-content ul li { font-size: 14px; line-height: 25px; color: #454545; padding: 0 0 5px; }
.accordion .accordion-content p:last-child { padding: 0; }
.accordion .accordion-content hr { background-color: #979797; border: 0; height: 1px; margin-bottom: 1.5em; margin-top: 0.5em; }
.accordion .accordion-content .img-50 img { max-width: 50px; }
.accordion.ms-accordion .accordion-content .cv-area { width: 24%; padding: 23% 0 0; }
.accordion.ms-accordion .accordion-content .cv-area .cv-name { font-size: 11px; line-height: 16px; }
.accordion.ms-accordion .accordion-title::before { content: 'Hide Available Finishes'; font-size: 15px; font-weight: normal; font-family: 'rubik', sans-serif; line-height: 24px; position: absolute; right: 25px; top: 19px; }
.accordion.ms-accordion .accordion-title.collapsed::before { content: 'View Available Finishes'; color: #8A8989; }
.accordion.ms-accordion .accordion-title:hover::after { color: #454545; }
.accordion.ms-accordion .accordion-title { padding: 20px 0 20px 30px; margin: 0 0 0 -10px; background-position: left 20px; -webkit-background-size: 20px auto; background-size: 20px auto; background-repeat: no-repeat; }
.accordion.ms-accordion .accordion-content { padding: 5px 0 25px 15px; }
.accordion .accordion-content .sm-area { display: none; }
.accordion .accordion-content a.open-sm:active, .accordion .accordion-content a.open-sm:focus { color: #ea1b0e; }
.accordion .accordion-content .pdf-icons i { min-width: 25px; font-size: 15px; }

/* ======================[ Blocks Dropdown ]====================== */
.block-dropdown-area { position: relative; }
.block-dropdown-area #block_dropdown { border: 1px solid #191919; color: #191919; font-size: 16px; font-family: 'rubik', sans-serif; font-weight: 500; line-height: 25px; padding: 10px 25px 5px; display: block; width: 100%; position: relative; max-width: 500px; }
.block-dropdown-area #block_dropdown::after { content: '\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; right: 20px; top: 9px; }
.block-dropdown-area .dropdown-menu { width: 100%; border: 1px solid #191919; max-width: 500px; }
.block-dropdown-area .block-dropdown-item { display: block; width: 100%; padding: 0.5rem 1.5rem 0.25rem; clear: both; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; font-family: 'rubik', sans-serif; font-weight: 400; line-height: 25px; font-size: 15px; }
.block-dropdown-area .block-dropdown-item:hover { color: #fff; background: #212529; }
.block-images { padding: 15px; margin: 30px auto;}
.block-images .bi-inner { display: none; }
.block-images .bi-inner.active { display: block; }


/*  =======================================================
		Paving Residential Page
	======================================================= */
/* ======================[ Treatment ]====================== */
.pr-images { float: left; width: 100px; margin: 0 3.3% 20px 0; }
.dry-pv, .wet-pv { display: none; }
.dry-pv.active, .wet-pv.active { display: block; }
h2 .dry-pv.active, h2 .wet-pv.active { display: inline-block; }
.dry-pv #home-carousel .hc-slide .hcs-info h6::after, .wet-pv #home-carousel .hc-slide .hcs-info h6::after { display: none; }

/* ======================[ Dropdown ]====================== */
.pv-dropdown-area { position: relative; }
.pv-dropdown-area #pv_dropdown { border: 1px solid #191919; color: #191919; font-size: 16px; font-family: 'rubik', sans-serif; font-weight: 500; line-height: 25px; padding: 10px 25px 5px; display: block; width: 100%; position: relative; max-width: 500px; }
.pv-dropdown-area #pv_dropdown::after { content: '\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; right: 20px; top: 9px; }
.pv-dropdown-area .dropdown-menu { width: 100%; border: 1px solid #191919; max-width: 500px; }
.pv-dropdown-area .pv-dropdown-item { display: block; width: 100%; padding: 0.5rem 1.5rem 0.25rem; clear: both; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; font-family: 'rubik', sans-serif; font-weight: 400; line-height: 25px; font-size: 15px; }
.pv-dropdown-area .pv-dropdown-item:hover { color: #fff; background: #212529; }

/*  =======================================================
		Kiwibricks Page
	======================================================= */

/* ======================[ Header ]====================== */
.kiwi.header-phone { background-color: rgba(26,24,24,0.44); position: absolute; right: 0; top: 0; width: 50px; height: 50px; z-index: 1111; text-align: center; }
.kiwi.header-phone i.fas { color: #fff; font-size: 20px; line-height: 50px; }
.kiwi.header-phone:hover { background-color: rgba(26,24,24,0.44); }
.kiwi.header-contact { background-color: rgba(26,24,24,0.44); right: 0; top: 50px; width: 50px; overflow: hidden; height: 100px; max-width: 50px; } 
.kiwi .hc-inner { transform: rotate(-90deg); vertical-align: bottom; white-space: nowrap; right: 25px; position: relative; top: 12px; } 
.kiwi.header-contact .hc-inner a:hover { color: #fff; }

/* ======================[ Slider ]====================== */
#kiwibricks .cv-area { /*width: 22%; margin: 0 3% 15px 0;  padding: 22% 0 0;*/ width: 29.3%; margin: 0 4% 15px 0; padding: 30% 0 0; }
#kiwibricks .av-brick { top: -100px; left: 25%; }
#kiwibricks .av-brick img { width: 80%; }
#kiwibricks .avl-brick h3 { text-transform: uppercase; font-size: 15px; font-weight: 500; margin-bottom: 5px; }
#kiwibricks .avl-brick p { font-size: 15px; letter-spacing: 0px; }
#kiwibricks .carousel-nav .carousel-nav-item { width: 13%; padding: 13.5% 0 0; margin: 0 1.2% 20px 0; }
#kiwibricks .initial img { width: 300px;}
button:focus { outline: 0; }

/*  =======================================================
		Media Query
	======================================================= */
@media ( min-width: 1200px ) {
	
	/* -----------------[ General ]----------------- */
	.container { max-width: 1140px; width: 100%; }
	
}

@media ( min-width: 1400px ) {
	
	/* -----------------[ General ]----------------- */
	.container { max-width: 1640px; width: 95%; }
	
}

@media ( min-width: 992px ) and ( max-width: 1199px ) {
	
	/* -----------------[ Page Common Components ]----------------- */
	.cv-area.row-4 { width: 29.3%; padding: 30% 0 0; }
	.cv-area.row-5 { width: 23%; margin: 0 2% 15px 0; padding: 23% 0 0; }
	#kiwibricks .cv-area { width: 29.3%; margin: 0 4% 15px 0; padding: 30% 0 0; }
}

@media ( max-width: 991px ) {
	
	/* -----------------[ Homepage ]----------------- */
	.home-products .hp-content { padding: 5% 0; position: relative; left: 0; bottom: 0; width: 100%; z-index: 1111;  }
	
}

@media ( max-width: 767px ) {
	
	/* -----------------[ General ]----------------- */
	h2 { font-size: 23px; line-height: 27px; }
	h3 { font-size: 22px; line-height: 27px; }
	h4 { font-size: 20px; line-height: 25px; }
	h5 { font-size: 18px; line-height: 23px; }
	h6 { font-size: 17px; line-height: 22px; }
	p, ul li, ol li { font-size: 15px; line-height: 24px; }
	
	/* -----------------[ header ]----------------- */
	#site-header.header-sticky { padding: 30px 0 0; }
	#site-header.header-normal { padding: 30px 0; }
	#site-logo { width: 150px; }
	.header-sticky .home-menu-icon { top: 30px; }
	.header-normal .menu-icon span { margin: 8px auto; }
	.header-contact, .header-sticky .header-phone, .kiwi.header-contact, .kiwi.header-phone { display: none !important; }
	
	/* -----------------[ Footer ]----------------- */
	#site-footer .footer-top .ft-top-link { font-size: 16px; line-height: 20px; }
	#site-footer .footer-middle ul li, #site-footer .footer-middle p { font-size: 15px; line-height: 20px; }
	
	/* -----------------[ Homepage ]----------------- */
	.home-content { padding: 10% 0; }
	.home-products .hp-content { padding: 10% 0;}
	.home-content .hc-link a { font-size: 15px; line-height: 20px; }
	
	/* -----------------[ Page Common Components ]----------------- */
	.cv-area.row-4 { width: 29.3%; padding: 30% 0 0; }
	.cv-area.row-5 { width: 23%; margin: 0 2% 15px 0; padding: 23% 0 0; }
	.accordion .accordion-content .img-50 img { max-width: 30px; }

	/* ------------------ [ Kiwibricks page ] ------------------ */
	#kiwibricks .carousel-nav .carousel-nav-item { width: 18%; padding: 16.5% 0 0; margin: 0 2% 20px 0; }
	#kiwibricks .av-brick img { width: 100%; }
	
}

@media ( max-width: 575px ) {
	
	/* -----------------[ Homepage ]----------------- */
	#home-carousel .carousel-inner { padding: 56.5% 0 0; }
	.home-products .prdt-item { float: none; width: 100%; }
	.home-products .home-prdt-grid .clearfix:first-child .prdt-item:first-child { width: 100%; }
	.home-products .home-prdt-grid .clearfix:first-child .prdt-item:nth-child(2) { width: 100%; }
	.home-products .home-prdt-grid .prdt-item:not(:first-child) { width: 100%; }
	
	/* -----------------[ Page Common Components ]----------------- */
	.cv-area, .cv-area.row-4, .cv-area.row-5, .accordion.ms-accordion .accordion-content .cv-area, #kiwibricks .cv-area { width: 45%; margin: 0 5% 15px 0; padding: 35% 0 0; }
	#accordion .accordion-content .accordion-image { margin: 0 0 15px; }
	.block-dropdown-area #block_dropdown { font-size: 16px; line-height: 20px; }
	.accordion.ms-accordion .accordion-title::before { display: none; }
	.accordion .accordion-content .ft-left { width: 10%;}
	.accordion .accordion-content .ft-right { width: 88%; }
	
}