/*

Theme Name: illumine
Theme URI: http://satoristudio.net/bento-free-wordpress-theme/
Author: Satori Studio
Author URI: http://satoristudio.net/
Description: Bento is a powerful yet user-friendly free WordPress theme intended for use in the broadest range of web projects. It boasts premium-grade design and is packed with awesome features, some of which are unique for free themes. Bento is mobile-friendly (responsive), retina-ready, optimized for speed, and implements SEO (search engine optimization) best practices. The theme offers unprecedented customization flexibility through the native WP Customizer interface as well as built-in layouts, including one-page template. Unlimited color combinations for every element of the website, 500+ high-quality vector icons, advanced typography based on Google Fonts, and tons of other cool options and settings make it an ultimate tool for creating websites that are eye-pleasing, unique, and tailored to your needs. The theme offers advanced WooCommerce integration, including page templates, widgets, as well as full checkout funnel styling. Some other small but pleasant features include native infinite scroll, fixed menu options, and detailed settings for customizing the look of each indvidual page. Bento has been developed by an Envato Elite author who has sold 2000+ premium templates on ThemeForest, the largest marketplace in the industry; the theme implements clean, well-commented, developer-friendly code, and includes detailed documentation and a child theme template. Special attention has been paid to ensuring outstanding UX (user experience) and bringing the best in current web design trends and practices to the widest possible audience. Bento is being constantly maintained by its author and offers regular free updates with bugfixes and additional features.
Version: 1.0
Template: bento
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: one-column, two-columns, right-sidebar, left-sidebar, grid-layout, custom-background, custom-colors, custom-menu, custom-logo, featured-image-header, featured-images, footer-widgets, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, blog, e-commerce, portfolio
Text Domain: bento-child
Domain Path: /languages/
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.

*/


/* Elements */

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 400;
	line-height: 1.3;
}
h2 {
	margin-bottom: 0.5em;
}

h2.h-title,
h1 {
	font-size: 30px;
    font-size: 3em;	
    line-height: 1.1;
    margin-bottom: 0.75em;	
}

h2 {
	font-size: 28px;
    font-size: 3.6rem;
    font-weight: 300;
}

#panel-w5ec0fba019f2c-0-0-0 h2 {
    margin-top: 0;
}

h3 {
	font-size: 20px;
    font-size: 2.0rem;
    font-weight: 600;	
}

h4 {
	font-size: 18px;
	font-size: 1.8rem;	
}

h5,
h6 {
	font-size: 16px;
	font-size: 1.6rem;	
}

/* Cln Custom Elements css */

/* text below h1 on header image */
.hero-tagline {
    line-height: 3.2rem;
    font-size: 24px;
    font-size: 2.4rem;  /* this should be 2.6 or 2.5rem */
    color: #643092;
    font-weight: 200;
    font-family: 'Roboto Slab', serif;
}


.intro-title {
    font-size: 30px;
    font-size: 3em;	
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 0.75em;
    text-transform: uppercase;
    text-align: center;
}

.site-content .intro-text h4,
.testimonial-intro p,
.features p,
.intro-text {
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 300;
    font-family: 'Roboto Slab', serif;
}

.purple-row {
    font-size: 22px;
    font-size: 2.2rem;
    font-weight: 300;
    font-family: 'Roboto Slab', serif;
    color: #fff;
}
.purple-strip {
    font-weight: 300;
    font-family: 'Roboto Slab', serif;
    color: #fff;
}

.purple-text {
    color: #643092;
}
.yellow-text {
    color: #ffba00;
}

.site-content .intro-text h4,
.site-content .purple-row h2,
.site-content .faq-row h2,
.site-content .header-faq h1,
.site-content .purple-strip h2,
.site-content .white-text h2,
.faq-row h2,
.faq-row p,
.white-text p,
.white-text {
    color: #fff;
}
.site-content h1,
.site-content h2 {
    color: #643092;
}


.text-light {
    font-weight: 300;
}
.text-regular {
    font-weight: 400;
}
.text-medium {
    font-weight: 500;
}
.text-semi-bold {
    font-weight: 600;
}
.text-bold {
    font-weight: 700;
}
.text-extra-bold {
    font-weight: 800;
}

.site-content .purple-row h2,
.site-content .white-text h2,
.u-textUppercase {
    text-transform: uppercase;
}
.u-Margin--bottom {
    margin-bottom: 0;
}
.feature h3 {
    margin-bottom: 0.4em;
}
.client-logo p,
.u-textLoud {
    font-size: 20px;
    color: #643092;
}

.site-content .client-logo h2,
.t-headline {
    font-weight: 400;
    color: #ffba00;
    line-height: 1.4em;
    font-size: 3.6rem;
    font-family: 'Roboto Slab', serif;
}

/* list css rules */
.entry-content .t-list ul {
    padding-left: 16px;
    padding-left: 1.6rem;
}
.entry-content .u-listMargin--left ul li::before,
.entry-content .attendance ul li::before,
.entry-content .t-list ul li::before {
    margin-left: -0.6em;
}
.entry-content .custom-list ul li {
    margin-bottom: 0px;
    margin-bottom: 0;
}
.entry-content ul li {
    list-style-type: none;

}
.entry-content ul li::before {
    content: "\2022";
    color: #ffba00;
    display: inline-block;
    width: 0.6em;
    /*margin-left: -0.9em;*/
    font-weight: bold;
    font-size: 2.8rem;
    vertical-align: -6%;
    line-height: 1.2;
}



/* End of Cln Custom Elements css */

/* Custom Elements css */

.steps ol li h3 {
    margin-bottom: 0.1em;
}
.entry-content .steps ol li {
    margin-bottom: 20px;
    margin-bottom: 2rem;
}
.entry-content ol {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
}
.entry-content ol li {
	position: relative;
	padding-left: 58px;
	min-height: 58px;
}
.entry-content ol li:before {
	content: counter(li);
	counter-increment: li;
	color: #fff;
	background: #ffba00;
	border-radius: 50%;
	font-size: 28px;
	width: 48px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	display: block;
	position: absolute;
	top: 8%;
	left: 0;
    font-weight: bold;
    /*font-family: 'Abril Fatface', serif;*/
    /*font-family: 'Abril Fatface', cursive;*/
    font-family: 'Roboto Slab', serif;
}

body {
	font-family: 'montserrat', Arial, sans-serif;
	line-height: 1.5;
	font-size: 16px;
	font-size: 1.6rem;
	background-color: #fff;
	color: #333;
	height: 100%;
}


.feature-text {
    font-weight: 400;
    /*font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.2;*/
}



.feature h2 {
    color: #ffffff;
    text-transform: uppercase;
}
.testq p,
.features h2{
    text-transform: uppercase;
}

.feature .feature-text {
    font-weight: 400;
    color: #fff;
}

.chw-widget a {
    display: block;
    /*float: right;*/
    line-height: 0;
}
.chw-widget img {
    float: right;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.shrink .chw-widget img {
    max-width: 70% !important;
    float: right;
}

.sec-logo {
    float: right;
    padding: 10px 0;
    padding: 1rem 0;
}
.shrink .sec-logo {
    padding: 5px 0;
    padding: 0.5rem 0;
    
}

/* Smaller mobile screens */
@media screen and (min-width: 10em){
    .sec-logo {
        display: none;
    }
}

/* Laptops and medium screens - 1024px and wider */
@media screen and (min-width: 48em){
    .sec-logo {
        display: table-cell;
    }
}


/* Site Header & Primary Menu */

.site-header {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid #eee;
}

.site-header.fixed-header {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.shrink .logo {
    padding: 5px 0;
    padding: 0.5rem 0;
    max-width: 70%;
}
.logo {
    transition: all 0.5s ease;
}
.logo img{
    transition: all 0.5s ease;
}
.shrink .logo img {
    max-width: 70%;
}

.logo, .header-menu {
    vertical-align: bottom;
}
.primary-menu > li > a {
    padding-bottom: 10px;
}
.primary-menu > li > a:hover, 
.primary-menu > li.current-menu-item > a, 
.primary-menu > li.current-menu-ancestor > a {
    color: #643092;
}
.primary-menu > li > a, 
#nav-mobile li a, .mobile-menu-trigger, 
.mobile-menu-close, .ham-menu-close {
    color: #636060;
}
.primary-menu .sub-menu li, 
#nav-mobile {
    background-color: #fff;
}
.primary-menu .sub-menu li {
    border-bottom: 1px solid #ffffff;
}
#nav-mobile li a.search_icon:hover,
.primary-menu .sub-menu li a:hover, 
.primary-menu .sub-menu .current-menu-item:not(.current-menu-ancestor) > a, 
#nav-mobile li a:hover, 
#nav-mobile .current-menu-item:not(.current-menu-ancestor) > a {
    background-color: #643092;
    color: #fff;
}
.primary-menu .sub-menu li:hover > a {
    color: #fff;
}
.primary-menu .sub-menu li a:active {
    color: #fff;
}

/* Style the Search Form */

.pksearchform {
    display: block;
    width: 680px;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 1px;
    z-index: 9;
    background: #fff;
    padding: 4px;
    /*border: 1px solid #d05353;*/
}
.pksearchform input[type="text"] {
    width: 78%;
    height: auto;
    border: 1px solid #5ca2df;
    padding: 11px 12px;
    border-radius: 0px !important; 
    }
.pksearchform input[type="submit"] {
    line-height: 1;
    padding: 14px 20px;
    border-radius: 0px;
    height: auto;
    font-size: 15px;
    display: inline-block;
    border: 1px solid #5ca2df;
}
#pksearchform:before {
    border-color: transparent transparent #d05353;
    border-style: solid;
    border-width: 0.5em;
    content: "";
    display: block;
    position: absolute;
    right: 22px;
    top: -20px;
    z-index: 10;
}
/*.search_icon .fa {
    font-size: 26px;
    color: #643092;
}*/
.primary-menu li a.search_icon,
#nav-mobile li a.search_icon {
    font-size: 26px;
    color: #643092;
    cursor: pointer;
}

/* top bar */
.top-bar {
    background-color: #643092;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 14px;
    line-height: 36px;
}
/* floats */
.col-half.top-header-left,
.col-half.top-header-right {
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 0px;
    padding-left: 0px;
}
.top-header-left {
    
    text-align: left;
    margin-bottom: 0;
}
.top-header-right {

    text-align: right;
    margin-bottom: 0;
}
/* widths */
.col-half {
    width: 50%;
    /*float: left;*/
}
/* margins  */
.top-bar p {
    margin-top: 4px;
    margin-bottom: 0;
}
.widget .zoom-social-icons-list--no-labels.zoom-social-icons-list--without-canvas {
    margin-left: -14px;
    margin-top: 0;
}

/*toggle*/

.toggle-trigger {
	margin: 0px !important;
    font-size: 20px;
    font-weight: 400;
	padding: 10px;
	padding-left: 30px;
	/*background-color: #F5F5F5;*/
	background-image: url('images/toggle-plus.png');
	background-position: 10px center;
	background-repeat: no-repeat;
}
.general-faq .toggle-trigger a {
	color: #333 !important;
	/*text-decoration: none;
	display: block;*/
}
.toggle-trigger a {
	color: #fff !important;
	text-decoration: none;
	display: block;
}
.toggle-trigger a:hover {
	color: #ffba00 !important;
	text-decoration: none;
}
.toggle-trigger.active{
	background-image: url('images/toggle-minus.png') !important;
	background-position: 10px center;
	background-repeat: no-repeat;
}
.general-faq .toggle_container {
	/*overflow: hidden;
    padding: 20px 10px;*/
    color: #333;
}
.toggle_container {
	overflow: hidden;
    padding: 20px 10px;
    color: #fff;
}
h3.toggle-white {
	background-color: #FFF;
}
h3.toggle-gray {
	background-color: #F5F5F5;
}
h3.toggle-dark {
	background-color:#383838;
}

/* popup floating button */

.pb-contact {
    width: 60px;
    height: 60px;
    display: flex;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    bottom: 20px;
    border: none;
}
.pb-contact-btn {
    text-decoration: none;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    background: #ffba00;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
    cursor: pointer;
    outline: none;
}
.pb-contact-btn:hover {
    box-shadow: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
}
.pb-icon {
    display: block;
    line-height: 60px;
    height: 100%;
    width: auto;
    text-align: center;
}
.pb-icon-btn {
    font-family: "Font Awesome 5 Free";
}
.pb-icon-btn:before {
    content: "\f0e0";
    font-size: 36px;
}
.pb-icon-btn.pk-visible:before {
    content: "\f00d";
    font-size: 40px;
    font-weight: 800;
}
.alert-close {
    /*background: rgba(255, 255, 255, 0.1);*/
    background: #643092d9;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4),inset 0 -1px 2px rgba(255,255,255,0.25);
	color: #fff;
	cursor: pointer;
	font-size: 26px;
	font-weight: normal;
	height: 24px;
	line-height: 26px;
	position: absolute;
	right: 11px;
	text-align: center;
	top: 9px;
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
	width: 24px;
}

/* Contact Popup DIV */

.u-formpadding {
    padding: 30px;
    background: #fff;
}
.form-modal {
    display: none;
    position: fixed;
    z-index: 99999 !important;
    width: 380px;
    margin: 0 auto;
    /*padding: 30px;*/
}
.form-popup {
    top: auto !important;
    right: 10px !important;
    bottom: 84px !important;
    left: auto !important;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2) inset, 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(0,0,0,0.4);
    overflow: auto;
}

/* Form */

.caldera-grid .CF5e80398417d1a label {
    font-weight: 400;
}
.CF5e80398417d1a label {
    font-size: 13px;
    font-size: 1.3rem;
    font-style: normal;
    color: #000;
}
#pk-popup .caldera-grid .form-group {
    margin-bottom: 10px;
}
#pk-popup .caldera-grid .alert {
    margin-bottom: 0;
    padding: 20px 4px;
}
#pk-popup .caldera-grid .alert-success {
    background-color: #643092;
    color: #fff;
    font-size: 16px;
    font-size: 1.6rem;
    text-align: center;
}
#pk-popup .caldera-grid .alert-success {
    text-shadow: 0 1px 0 rgba(8, 8, 8, 0.62);
}
#pk-popup .intl-tel-input {
    width: 100%;
}
#pk-popup .caldera-grid .row {
    margin-left: 0px;
    margin-right: 0px;
    max-width: 100%;
}

/* pk button css rules */

.pk-button {
    font-size: 16px;
    transition: all 0.5s;
    cursor: pointer;
    font-weight: 600;
}
.pk-button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
    text-transform: uppercase;
    color: #643092;
}  
.pk-button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    /*top: -64%;*/
    right: -20px;
    transition: 0.5s;
    color: #ffba00;
    font-size: 32px;
    line-height: 0.5;
}  
.pk-button:hover span {
    padding-right: 18px;
}  
.pk-button:hover span:after {
    opacity: 1;
    right: 0;
}

/* testimonial section */

.testimonial-container {
    margin: 30px auto;
    padding: 0 0;
    width: 100%; 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    grid-gap: 2.1em;
}
.testimonial {
    padding-left: 60px;
    position: relative;
    z-index: 0;
    font-size: 16px;
}
aside.testimonial {
    background-color: #fff;
    padding: 30px;
    -webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
}
.testimonial .quote {
    position: absolute;
    left: 0;
    top: -25px;
    font-size: 150px;
    font-family: Georgia, serif;
    color: #ffba00 ;
    z-index: -1;
    line-height: 1;
}
.testimonial-text {
    font-style: italic;
}
.testimonial-name {
    text-align: left;
    font-weight: 600;
    margin-bottom: 0;
}
.testimonial-location {
    text-align: left;
    font-size: 15px;
    font-weight: 300;
} 
.testimonial-location cite,
.testimonial-name cite {
    font-style: normal;
}

/* site footer */

.site-footer {
    color: #464444;
}
.sidebar-footer {
    background-color: #ffffff;
}
.sidebar-footer hr {
    border-top: 1px solid #e1e1e1;
    border-bottom: none;
}
.sidebar-footer hr {
    margin-bottom: 2rem;
}
.sidebar-footer {
    padding: 10px 0 40px 0;
    padding: 1rem 0 1rem 0;
}
.gdlr-icon {
    margin-right: 10px;
}

/* 
7. Responsive
-------------------------------------
*/

/* media queries for small screens in landscape mode (or similar) */
@media screen and ( max-width: 600px ) {

    h1, h2,
    .site-content .client-logo h2,
    .xclient-logo p, .intro-title {
        font-size: 09vw;
    }
     
    /* width sizing all full width in small screens */
    .col-half {
        width: 100%;
        text-align: center;
        /*margin: 0;*/
    }
    /* padding adjustments */
    /*.widget-area {
        padding: 0 0 10px 0;
    }*/

}

@media screen and ( max-width: 767px ) {

    .form-modal {
        width: 100%;
        height: 90%;
    }

    .form-popup {
        right: 0px !important;
        bottom: 10px !important;
    }
    
    .pksearchform {
        width: 100%;
        right: auto;
    }
}

/* Laptops and medium screens - 1024px and wider */
@media screen and (min-width: 64em) {
    
    .bnt-container {
        max-width: 1080px;
        max-width: 108rem; 
    }

}

/* Large screens - 1920px and wider */
@media screen and (min-width: 120em) {
    
    .bnt-container {
        max-width: 1140px;
        max-width: 114rem; 
    }
        
}
