/*
Theme Name:   ArileWP Pro Child
Theme URI:    https://themearile.com/themes/arilewp-pro/
Description:  ArileWP is a powerful, modern and professional multipurpose WordPress theme with pixel perfect design and outstanding functionality. As well as sophisticated plus it has some exotic features like customization and clean code, advanced typography, sticky menu, logo upload, header image, Bootstrap 4 framework, built with SEO in mind, and theme info area besides being Mobile ready, translation ready (WPML, Polylang) and it's built to be beautiful on all screen sizes. The theme perfectly suited for business, consultant, finance, corporate, freelancer, agency, business promotion, electrician, industries, education, SEO, construction, fashion, online shop, health & medical, Beauty & spa salons, wedding, photography, gym, cafe, music, architecture, lawyer, restaurant, hotel, blog, magazine, travel agency and many other websites compatible. This theme supports the best Elementor page builder to create, edit and updates page designs as per the requirement. ArileWP also supports popular free and premium WordPress plugins such as Elementor, Yoast SEO, WooCommerce, Contact Form 7, Jetpack, Google Analytics and much more.
Author:       ThemeArile
Author URI:   https://themearile.com
Template:     arilewp-pro
Version:      1.4.5
License:      GPLv2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         one-column, two-columns ,right-sidebar, flexible-header, accessibility-ready, custom-background, custom-header, custom-menu, editor-style, featured-images, footer-widgets, post-formats, theme-options, threaded-comments, rtl-language-support, translation-ready, full-width-template, custom-logo, blog, e-commerce, portfolio
Text Domain:  arilewp-pro-child
*/

.cursor-pointer {cursor: pointer;}

.popup {
    display: none;
}

.popup.open {
    display: block;
    position: fixed;
    padding: 0;
    margin: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 99;
}

.overlay {
    position: fixed;

    background: rgba(35, 31, 32, .6);

    padding: 0;
    margin: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.popup > .body {
    position: absolute;

    line-height: 1.4;

    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

    width: 60%;
    height: 60%;

    min-height: 500px;

    background-color: #231f20;

    -webkit-box-shadow: 0 0 20px #000;
        box-shadow: 0 0 20px #000;
}

 /* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
    .popup > .body {
        width: 65%;
        height: 55%;
    }
 }

 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
    .popup > .body {
        width: 50%;
        height: 50%;
    }
 }
 
 /* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
    .popup > .body {
        width: 60%;
        height: 55%;
    }
 }
 
 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
    .popup > .body {
        width: 55%;
        height: 60%;
    }
 }
 
 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1200px) {
    .popup > .body {
        width: 50%;
        height: 60%;
    }
 } 

.popup-left {
    border-right: 2px solid #eca741;
}

.button-orange {
    background-color: #eca741;
    color: #231f20;
    font-size: 16px;
    font-weight: 600;
}

.stop-scrolling {
    height: 100vh;
    overflow: hidden;
}

.text-orange {
    color: #eca741 !important;
}