/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* Add a smooth color transition when hovering menu items */
/* You can change the ms by increasing or decreasing the .3s value, e.g. 500ms = .5s */

.nav > li {
    -webkit-transition: background-color .3s; /* Increase or decrease the timing */
    -o-transition: background-color .3s; /* Increase or decrease the timing */
    transition: background-color .3s; /* Increase or decrease the timing */
}
/*DISABLE BORING SOCIAL ICONS TOOLTIP*/

.tooltipster-base {
    display: none !important;
}
/* perfectly position the arrow at the right of the menu item */

.has-dropdown .icon-angle-down {
    opacity: 1; /* You can decrease the opacity if you prefer, maximum opacity, no transparency is 1 */
    margin-top: 3px;
    margin-left: 6px;
}

/* Increase or decrease dropdown menu width */

.nav-dropdown {
    min-width: 230px; /* Increase or decrease the width */
}

/* Remove the default extra margin for the last dropdown menu item */

.nav-dropdown > li:last-child:not(.nav-dropdown-col) > a {
    margin-bottom: 0;
}


/* Change the dropdown menu item color and background hover color */

.nav-dropdown > li > a:hover {
    color: #4600ad; /* Change color */
    background-color: #fceff8 !important; /* Change color */
}

/* Change the dropdown menu active link color */

.nav-dropdown li.active > a {
    color: #ff25c0; /* Change color */
}
/***************************** ACCORDION STYLING *****************************/

/* Move the arrow to the right */

.accordion .toggle {
    left: unset;
    right: 0;
}

/* Set a better accordion inner padding */

.accordion-inner {
    padding: 10px 40px 0 5px; /* You can change them if you want, but I think this is just perfect */
}

/* Style the accordion title */

.accordion-title {
    border-top: 1px solid #ddd; /* Change border color and width */
    padding: 15px 40px 15px 0; /* You can change them if you want, but I think this is just perfect */
}

/* Style the accordion active title */

.accordion-title.active {
    background-color: transparent; /* Add an HEX color instead of transparent if you want a coloured background */
    border-color: #ff25c0; /* Change border color */
    color: #ff25c0; /* Change text color */
    font-weight: 700; /* Change font weight */
    border-top: 3px solid #ff25c0; /* Change border color */
    padding-left: 5px; /* Change left padding, 5px is just fine */
}
/***************************** SLIDER *****************************/

/* Add border radius to slider's images, increase or decrease the value as you wish */

.flickity-viewport {
    border-radius: 10px; /* Increase or decrease the radius as you wish */
}

/* Change previous/next arrow color */

.flickity-prev-next-button svg, .flickity-prev-next-button .arrow {
    fill: #777; /* Change the color */
}

/* Change dots color and size */

.flickity-page-dots .dot.is-selected {
    background-color: #00acad; /* Change the color */
}

.flickity-page-dots .dot {
    border: 3px solid #00acad; /* Change color border */
    width: 16px; /* Increase or decrease size */
    height: 16px; /* Increase or decrease size */
}
/***************************** REMOVE BORING DIVIDER BETWEEN WIDGETS, PRODUCTS AND BLOG POST TITLES AND DESCRIPTION *****************************/

.is-divider {
    display: none;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
/***************************** LAYOUT *****************************/

/* Flatsome has a default value for right/left padding of 20px, which in many cases can't be enough,
the first value represents the top padding, the second value (30px) represents the left-right padding, the last the bottom padding,
you can increase or decrease it as you prefer, personally I would only tourch the second value related to the left-right padding, basically they are the margins
of your container and that's what I always needed to modify. */

.col {
    padding: 0 30px 20px;
}


/***************************** LOGO *****************************/

/* Force the desidered logo width on tablets/mobile */

#logo {
    width: 120px; /* Increase or decrease size */
}
/* Increase or decrease hamburger icon size and change color */

.nav > li > a > i.icon-menu {
    font-size: 1.6em; /* Increase or decrease size */
    color: #333; /* Change color */
}
/* Increase or decrease mobile menu social icons size */

.html .social-icons {
    font-size: 1.2em; /* Increase or decrease size */
}


/* Increase mobile menu items font size */

.nav > li > a {
    text-transform: none;
    font-size: 0.8em; /* Increase or decrease font size */
}


/* Change menu entries text color */

.nav > li > a, .links > li > a {
    color: color: #39cccc; /* Change color */
}
    

/* Menu entries hover and active text color */

.nav > li > a:hover, .nav > li.active > a {
    color: #39cccc !important; /* Change color */
}


/* Menu entries background color on hover */

.nav-sidebar.nav-vertical > li.menu-item:hover {
    background-color: #eff0ef; /* Change color */
}


/* Dropdown entries hover color */
/* This snippet will only work if you are using a sidebar menu appearing from right */

.nav-vertical > li > ul li a:hover {
    color: #39cccc; /* Change color */
}


/* Align menu items to the left */
/* This snippet will only work if you are using a fullscreen menu */

.off-canvas-center .text-center {
    text-align: left; /* Change the alignment, you can set "right" as well */
}
	.off-canvas-right .mfp-content, .off-canvas-left .mfp-content{width: 100%;}

/* Change fullscreen menu color and opacity */
/* This snippet will only work if you are using a fullscreen menu */

.mfp-bg.off-canvas-center:not(.dark) {
    background-color: #fff; /* Change color */
    opacity: 1; /* Decrease opacity */
}


/* Remove the overlay for the mobile menu */
/* This snippet will work only if you are using a sidebar menu */

.main-menu-overlay {
    background-color: transparent; /* Set a color or leave transparent */
}


}