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

/*************** SECTION 1 - START HERE   ***************/

.h1, h1, .banner h1, h1.uppercase  {
    font-size: 3.9em;
    font-weight: 600 !important;
    line-height: 1.15em;
    margin-bottom: .1em;
}
.h2, h2, .banner h2, h2.uppercase  {
    font-size: 2.9em;
    line-height: 1.2em;
    margin-bottom: .25em;
}
.h3, h3, .banner h3, h3.uppercase  .post-title  {
    font-size: 1.8em;
    line-height: 1.3em;
    margin-bottom: .25em;
}
.h4, h4, .banner h4, h4.uppercase, .archive-page-header {
    font-size: 1.2em;
    line-height: 1.35em;
    margin-bottom: .3em;
}
.uppercase{
    letter-spacing: 0 !important;
}
.is-thin, .thin-font {
    font-weight: 400 !important;
}

/** MAIN HEADER + NAV + OFF-CANVAS MENU STYLING **/

#top-bar .flex-col.flex-center {
    width: 100%;
}
#top-bar .ux-logo-link {
    padding: 8px !important;
}
#top-bar .logo-fade img:hover{
    opacity: .5;
}
#header .header-inner.container{
    border-bottom: 2px solid rgba(255, 255, 255, .4);
    max-width: 97% !important;
    padding-left: 0;
    padding-right: 0;
}
#header .header-bottom .container{
    max-width: 97% !important;
    padding-left: 0;
    padding-right: 0;
}
.shade-top {
    background: linear-gradient(180deg, #000 0, transparent 85%);
    opacity: .7;
}
.nav-dark .nav>li>a, .header:not(.transparent) .nav > li.active > a{
    color: #fff !important;
}
.nav-dark .nav>li>a:hover, .header:not(.transparent) .nav > li.active > a:hover{
    color: var(--primary-color) !important;
}
.nav-column>li>a, .nav-dropdown>li>a, .nav-vertical-fly-out>li>a{
    color: #262626;
}
.nav-column>li>a:hover, .nav-dropdown>li>a:hover, .nav-vertical-fly-out>li>a:hover{
    color: var(--primary-color);
}
.nav-spacing-large>li {
    margin: 0 16px;
}
.nav-size-large>li>a {
    font-size: 1.05em;
}
#header-contact a{
    font-size: .95em;
    margin-left: 12px;
}
.header-button i{
    margin-right: 0 !important;
}
.header-button a.plain{
    background-color: #fff;
}
.header-button a.plain span, .header-button a.plain i{
    color: var(--secondary-color);
}
.header-button a.plain:hover{
    opacity: .8;
}
.off-canvas-left.dark .mfp-content, .off-canvas-right.dark .mfp-content{
    background-color: #262626;
}
.off-canvas .sidebar-menu a:not(.button):not(.social-icons a){
    color: #fff;
    font-size: .95em;
}
.off-canvas .sidebar-menu a:not(.button):not(.social-icons a):hover{
    color: var(--primary-color);
}
.off-canvas .social-icons a{
    font-size: 1.4em;
}

/** BUTTONS **/

.button {
	font-weight: 700;
	letter-spacing: 0;
}
.button.white:not(.button.white.is-outline):not(.button.white.is-underline):not(.button.white.is-link) span, .button.white:not(.button.white.is-underline):not(.button.white.is-link):hover span{
    color: var(--secondary-color);
}

.button.white i, .button.alert i, .button.success i{
    color: var(--primary-color);
}

/** OTHER STYLING **/

.dark .social-icons a{
    color: #fff;
}
.dark .social-icons a:hover, .social-icons a:hover{
    color: var(--primary-color)
}
.social-icons a{
    color: var(--secondary-color);
}
.hero-gradient:before{
    content: '';
    display: block;
    z-index: 1;
    position: absolute;
    mix-blend-mode: multiply;
    height: 100%;
    overflow: hidden;
    width: 100%;
    background: linear-gradient(to right, rgba(0,59,98,0.65) 0%,rgba(0,59,98,0.65) 17%,rgba(0,59,98,0.2) 100%);
    /*Permalink: https://colorzilla.com/gradient-editor/#003b62+0,003b62+100&0.65+17,0.65+17,0.2+100*/ 
}
ul li.bullet-checkmark, ul li.bullet-arrow, ul li.bullet-star {
		padding: 5px 0 5px 23px;
}
ul li.bullet-arrow:before, ul li.bullet-checkmark:before, ul li.bullet-star:before{
    color: var(--primary-color);
}
.dark ul li.bullet-arrow:before, .dark ul li.bullet-checkmark:before, .dark ul li.bullet-star:before{
    color: #fff;
}
.corners-round .col-inner, .corners-round .banner, .corners-round .banner-bg, .corners-round .message-box, .corners-round .message-box-bg-image, .corners-round .message-box-bg-overlay, .corners-round .box, .corners-round .box.box-shade .box-image {
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
}
.corners-round .box-normal .box-image, .corners-round .box-default .box-image, .blog-archive .box-blog-post .box-image{
    border-radius: 25px 25px 0 0;
    -webkit-border-radius: 25px 25px 0 0;
    -moz-border-radius: 25px 25px 0 0;
}
.corners-round .box-text{
    border-radius: 0 0 25px 25px;
    -webkit-border-radius: 0 0 25px 25px;
    -moz-border-radius: 0 0 25px 25px;
}
.box-image .image-zoom.image-cover .shade{
    opacity: .9;
    background: linear-gradient(to bottom, rgba(0,59,98,0) 0%,rgba(0,59,98,0) 50%,rgba(0,59,98,0.9) 99%,rgba(0,59,98,0.9) 100%);
}
.box-image:hover .image-zoom.image-cover .shade{
    opacity: 1;
    background: linear-gradient(to bottom, rgba(0,59,98,.3) 0%,rgba(0,59,98,.7) 50%,rgba(0,59,98,0.9) 99%,rgba(0,59,98,0.9) 100%);
}

/**BLOG STYLING**/

h5.post-title{
    font-size: 1.35em;
    color: #262626;
}
.box-blog-post.box .is-divider, .byline{
    display: none;
}
.blog-archive #post-list .article-inner, .blog-single .col, .blog-single .article-inner{
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
}
.widget .is-divider, .article-inner .entry-header .is-divider{
    background-color: var(--primary-color);
}
.post-sidebar .widget-area .is-divider{
    background-color: var(--primary-color);
    max-width: 60px;
}
.blog-wrapper>.row{
    max-width: 1450px !important;
}
footer.entry-meta{
    border-bottom: none;
}
.blog-single h1.entry-title{
    font-size: 2.9em;
}
h2.entry-title{
    font-weight: 600;
}
h1.page-title{
    font-size: 1.6em;
}
blockquote{
    font-style: normal;
    font-size: inherit;
    color: inherit;
    border-width: 4px;
    margin-left: 10px;
}

/*************** SECTION 2 - MOBILE QA FIXES ONLY  ***************/
@media only screen and (max-width: 549px) {
    .h1, h1, .banner h1, h1.uppercase  {
        font-size: 2.7em;
    }
    .h2, h2, .banner h2, h2.uppercase  {
        font-size: 2.3em;
    }
    .h3, h3, .banner h3, h3.uppercase  .post-title  {
        font-size: 1.4em;
    }
    .h4, h4, .banner h4, h4.uppercase, .archive-page-header {
        font-size: 1.0em;
    }
    .transparent .header-main {
        height: 80px !important;
    }
    #logo {
        width: 240px !important;
    }
    .header-bottom .button a{
        color: #fff;
    }
    .blog-single h1.entry-title{
        font-size: 2.3em;
    }
    h1.page-title{
        font-size: 1.4em;
    }
    p .alignleft, p .alignright, .entry-content .alignleft, .entry-content .alignright{
        display: block;
        margin-bottom: .5em;
        margin-left: auto;
        margin-right: auto;
    }
}

/*************** SECTION 3 - MEDIUM GRID AND UP  ***************/
@media only screen and (min-width: 550px) and (max-width: 850px) {
    .h1, h1, .banner h1, h1.uppercase  {
        font-size: 3.2em;
    }
    .h2, h2, .banner h2, h2.uppercase  {
        font-size: 2.6em;
    }
    .h3, h3, .banner h3, h3.uppercase  .post-title  {
        font-size: 1.5em;
    }
    .h4, h4, .banner h4, h4.uppercase, .archive-page-header {
        font-size: 1.1em;
    }
    .transparent .header-main {
        height: 80px !important;
    }
    #logo {
        width: 240px !important;
    }
    .header-bottom .button a{
        color: #fff;
    }
    .blog-single h1.entry-title{
        font-size: 2.6em;
    }
    h1.page-title{
        font-size: 1.4em;
    }
    p .alignleft, .entry-content .alignleft {
        display: inline;
        float: left;
        margin-right: 1.5em;
    }
    p .alignright, .entry-content .alignright{
        display: inline;
        float: right;
        margin-left: 1.5em;
    }
    
}

/*************** SECTION 4 - Midsize  ***************/
@media only screen and (min-width: 850px) and (max-width: 1150px) {
    .nav-spacing-large>li {
        margin: 0 12px;
    }
    .nav-size-large>li>a {
        font-size: 1.0em;
    }
    #header-contact a{
        font-size: .85em;
        margin-left: 3px;
    }
    .header-button a.is-large{
        font-size: .95em;
    }
    #logo {
        width: 220px !important;
        margin-right: 10px;
    }
}

/*************** SECTION 5 - DESKTOP AND UP  ***************/
@media only screen and (min-width: 1000px) {
    
}