/* CSS Document */

/* Small Desktops */

@media screen and (max-width: 1200px){

    .hide-on-desktop-sm{ display: none !important; }
	body{ min-width: inherit; }
	img{ max-width: 100%; height: auto; }
	.grid-container{ padding-left: 40px; padding-right: 40px; }

	#header{
        .logo{ float: none; margin: 10px auto; }
        nav{
            float: none;
            text-align: center;
            ul.menu>li.menu-item-has-children{
                margin-right: 5px;
            }
        }
        .subscribe.button{ margin-top: 10px; }
    }
}

@media screen and (min-width: 960px) and (max-width: 1024px){


}

/* All Mobile Devices */

@media screen and (max-width: 1023px){

    /* @group Global Styles */
    
    [data-aos="fade-up"], [data-aos="fade"]{ opacity: 1 !important; transform: none !important; }

    .content{ margin-top: 30px; }
    div.left-content{ padding-right: 0; }
    .no-sidebar .default-sidebar{ display: none !important; }
	.one-sidebar .left-content{ width: auto; }
	.title{
		font-size: 20px;
		&.ularge{ font-size: 34px;  }
		&.large{ font-size: 28px; }
		&.medium{ font-size: 24px; }
		&.small{ font-size: 16px; }
		&.usmall{ font-size: 13px; }
	}

    div.left-content{ margin: 0; border: 0; }
    aside, aside:before{ border: 0; }

	/* @end */
    
    /* @group Articles */

    div.articles{
        &.classic{
            article{
                h4.title{ font-size: 24px; margin-bottom: 0; }
                div.meta{ margin-top: 10px; }
                .post-excerpt{ font-size: 13px; }
                .right{ padding-left: inherit; }
                &.no-thumb .bottom{ margin-top: 0px; }
            }   
        }
    }
    
    /* @end */

	/* @group Header */

	#header{
		position: relative;
		.logo{ max-width: 60%; }
		button.menu-mobile{
			display: block;
			position: absolute;
			left: 40px;
			top: 50%;
			font-size: 31px;
			color: #fff;
			cursor: pointer;
            background: none;
			transform: translateY(-50%);
			z-index: 200;
            @include transition;
            i{ 
                vertical-align: middle;
            }
        }
        &.menu-open button.menu-mobile i:before{
            content: '\eb2f';
        }
		nav{
			position: absolute;
			left: 40px;
			top: 90%;
			background: #fff;
			margin: 0;
			opacity: 0;
			visibility: hidden;
            padding: 15px;
            border-radius: 5px;
            box-shadow: 0px 5px 15px 0px rgba(#000, 0.15);
            float: none;
            text-align: left !important;
            @include transition;
            
            ul.menu > li{ 
                display: block;
                padding: 5px 15px;
                &.menu-item-has-children:after{
                    font-family: 'FontAwesome';
                    content: '\f105';
                    display: block;
                    color: $text-color;
                    position: absolute;
                    font-size: 16px;
                    right: 0;
                    top: 8px;
                    z-index: 5;
                }
            }
			ul.menu > li > a{ padding: 5px 0; color: $text-color; }
            ul.menu > li a:before{ display: none; }
            ul.sub-menu{
                right: auto !important;
                left: 100% !important;
                top: 0;
                min-width: 150px;
                max-width: 300px;
            }
		}
		&.menu-open nav{
			opacity: 1;
			visibility: visible;
			top: 100%;
        }
        div.menu-wrapper{ padding-bottom: 10px; padding-top: 15px; }
        // Header styles
        &.advertising{
            .logo{ float: none; }
        }
    }
    
    .epcl-search-button{
        position: absolute;
        right: 30px;
        top: 50%;
        z-index: 2;
        color: #fff;        
        font-size: 26px;
        margin-top: -22px;
        &:hover{ color: #fff; }
    }

    /* @end */

    #footer{
        &.no-sidebar .widgets, &.hide-default .default-sidebar{ display: none; }
        .mobile-sidebar{     
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            .widget{
                padding: 0 $grid-gap;
                box-sizing: border-box;
                flex-grow: 1;
                width: 100%;
                .widget-title{ color: #fff; }
                &.custom-sidebar{
                    width: 50%;
                }
            }
        }
    }

}

/* Tablets */

@media screen and (min-width: 768px) and (max-width: 1023px){

	body{ font-size: 14px; }
	.grid-container{ padding-left: 40px; padding-right: 40px; }
	.np-tablet{ padding-left: 0; padding-right: 0; }
	.nofloat-tablet{ float: none !important; }

    .widget{ margin-bottom: 30px; }
    aside{
        .default-sidebar, .mobile-sidebar{
            display: flex;
            flex-flow: row wrap;
        }
    }
    aside .widget{
        width: 50%;
        float: left;
        border: 0;
        padding: 0 30px;
        flex-grow: 1;
        box-sizing: border-box;
        &.widget_search{
            background: none;
        }
    }

    #single.fullcover .featured-image{ height: 325px; }

    #header{
        div.menu-wrapper{ padding: 0 !important; }
        .logo{ padding: 20px !important; margin: 0 auto !important; }
    }

    /* @group Sidebar */

    #sidebar{
        margin: 40px -2.5% 0;
        float: none;
    }
    aside{
        .widget{
            margin: 0 2.5%;
            width: 45%
        }
        .mobile-sidebar{
            
        }
    }

    /* @end */
    

}

/* SmartPhones and small tablets */

@media screen and (max-width: 767px){

	$section-padding: 30px;
	$grid-gap: 20px;
    .force-var{ padding: $section-padding; margin: $grid-gap; }
    [class^="grid"]{ padding-left: $grid-gap; padding-right: $grid-gap; }

	/* @group Global Styles */

    body{ font-size: 13px; }
    body.cover:before{
        background-size: auto !important;
        background-attachment: scroll !important;
    }
	.section{ padding-top: $section-padding; padding-bottom: $section-padding; }
	.section.bordered{ margin: 0 -20px; padding-left: $grid-gap; padding-right: $grid-gap; }
	.grid-container{ padding-left: 20px; padding-right: 20px; }
	.grid-large{ }
	.np-mobile{ padding-left: 0; padding-right: 0; }
	.nofloat-mobile{ float: none !important; }
    .content{ margin-top: 30px; padding: 0; }
    div.left-content{ padding-left: 0; padding-right: 0;  }

	.title{
		font-size: 18px;
		&.ularge{ font-size: 26px;  }
		&.large{ font-size: 22px; }
		&.medium{ font-size: 20px; }
		&.small{ font-size: 14px; }
		&.usmall{ font-size: 12px; }
	}

    .pagination{
        div.nav{
            a, > span{ padding: 0 15px; font-size: 13px; height: 30px; line-height: 30px; margin-bottom: 10px;}
            > span{ height: 34px; line-height: 34px; margin: 0 5px; }
            a span{ padding: 0; margin: 0; }
        }
    }

	#search-results div.box{ padding: 0; }
	div.map{ min-height: 250px; }
	div.map div#map_canvas{ height: 250px; }

    div.filters{ margin: 0; }
    
    input[type=email], input[type=password], input[type=tel], input[type=text], input[type=url], textarea{
        padding: 12px 25px;
        font-size: 16px;
    }
    div.download a{ font-size: 16px; }

	/* @end */

	/* @group Header */

    #header{
        .logo{
            max-width: 200px;
            margin: 0px auto 0;
            padding: 5px 10px !important; 
            &.text-logo{
                margin-top: -2px;
                .title{ font-size: 30px; }
            }
        }
        &.classic .logo, &.classic nav{ margin-top: 0; }
        button.menu-mobile{ left: 20px; font-size: 24px; }
        div.menu-wrapper{ padding: 15px 0 !important; }
        nav{
            left: 20px;
            ul.menu li.current-menu-item  > a{
            }
            ul.menu li.menu-item-has-children{
                margin-right: 0;
                padding-right: 20px;
                &:after{
                    font-family: 'FontAwesome';
                    content: '\f107';
                    display: block;
                    color: $text-color;
                    position: absolute;
                    font-size: 14px;
                    right: 5px;
                    top: 10px;
                    z-index: 5;
                    width: 20px;
                    height: 20px;
                    text-align: center;
                }
                &:hover, &:focus-within{
                    > ul.sub-menu{
                        opacity: 1;
                        visibility: visible;
                        max-height: 50vh !important;
                        padding: 5px 0;
                        overflow: auto;
                    }
                }
            }
            ul.sub-menu{
                position: relative !important;
                left: auto !important;
                top: auto !important;
                max-height: 0 !important;
                overflow: hidden;
                box-shadow: none;
                background: none;
                padding: 0;
                transform: none !important;
                max-width: 210px;
                margin-left: -10px;
                margin-right: -20px;
                li a{
                    padding: 10px;
                }
                ul.sub-menu{
                    margin-left: 5px;
                    li a{
                        padding-left: 10px;
                    }
                }
            }
        }
    }

    .epcl-search-button{ font-size: 22px; right: 20px; margin-top: -18px; }
    #search-lightbox .search-wrapper{ padding: 0px; }

	/* @end */

	/* @group Global: Articles List */

    .grid-sidebar, .classic{
        div.left-content{
            margin: 0 -20px;
        }
    }
    .enable-masonry div.articles article{ float: none; }
	div.articles{
        display: block;
        margin: 0 20px;
		article{
            padding-bottom: 25px;
            padding-left: 0;
            padding-right: 0; 
			div.border{	display: none; }
			div.post-excerpt{ padding-bottom: 0; }
            a.thumb, .post-format-wrapper iframe, .post-format-gallery, .post-format-gallery div.item{ min-height: 200px; height: 200px !important; }
            div.meta a{ margin-bottom: 7px; }
        }
        .author-meta{ position: relative; bottom: auto; right: auto; margin-top: 20px; }
        &.classic{
            article{
                padding: 25px 0;
                .article-wrapper{
                    padding: 20px;
                }
                .post-format-wrapper{
                    margin: 0 0 10px;
                }
                .bottom{

                    .meta{
                        padding: 0; margin-bottom: 15px;
                        .author{
                            display: block;
                            margin: 0 0 10px;
                        }
                    }               
                }
                &.no-thumb{
                    .bottom{ margin-top: -10px; }
                }
            }
			.author-meta{ margin-top: 0; }
        }
    }
    
    #author{
        padding: 30px 20px 20px;
        div.info{ max-width: inherit; font-size: 13px; }  
    }

    /* @end */

    /* @group Modules */

    .ads{
        padding-bottom: 0;
    }
    .epcl-carousel{
        margin: 20px 20px 0;
        padding: 0;
        .slick-prev, .slick-next{
            width: 40px !important;
            height: 40px !important;
        }
        .item{
            article{
                margin: 0;
            }
            .img{
                height: 250px !important;
            }
        }
    }

    /* @end */

    /* @group Sidebar */

    #sidebar{
        margin-top: 30px;
        float: none;
        .widget{
            .widget-title{ margin-bottom: 25px; }
        }
    }

    /* @end */

	/* @group Single Post */

	div.epcl-share-container{ margin: 0; height: auto !important; float: none; }
	div.epcl-share{
		margin: 20px 0;
		float: none;
		a{ display: inline-block; border-radius: 7px; margin: 0 1px; }
    }
    
    div.left-content .main-article{
        padding: 20px;
    }

	#single{
        .featured-image div.info{ padding: 10px 15px; }

        // Fullcover style
		&.fullcover{
            .featured-image{
                height: 300px;
                margin-bottom: 20px;
                div.info{
                    padding: $grid-gap;
                    .title{ font-size: 22px; }
                }
            }
        }


        // Standard style
		&.standard{
            .featured-image{ margin-bottom: 0px; }
            div.meta{ 
                // text-align: center;
                .title{ margin-bottom: 20px; }
            }
            div.epcl-share{ margin: 0 0 25px; text-align: center; }
        } 
        .post-format-wrapper{ margin-top: 20px; margin-bottom: 15px; }

        .share-buttons{
            .title{ display: block; margin-right: 0; }
            .permalink input{ width: auto; }
        }
        div.tags.absolute{ display: none; left: 15px; top: 15px; }

        section.related article{ height: 225px; }
        // Post formats
        .post-format-video iframe{ max-height: 250px; }
        .post-format-gallery div.item{ height: 250px; }
        .post-format-gallery{
            .slick-prev{ left: 15px; }
            .slick-next{ right: 15px; }
        }
        // Related Articles
        section.related{
            margin-top: $section-padding;
            .prev, .next{
                width: auto;
                float: none;
            }
            .next{ margin-top: $section-padding; }
        }
        // Comments
        #comments{
            padding: 20px;
            margin-top: 30px;
            .title{ margin-bottom: 20px; }
        }
	}

	/* @end */

	/* @group Pages */

	#page{
		#single .featured-image{ height: 200px !important; }
	}

	/* @end */

	/* @group Author and Tags page */

    #archives #author{ margin: $section-padding 0 0; }
    .tag-description{
        font-size: 13px;
        .title{ margin-top: 20px; }
        .icon{
            width: 50px;
            height: 50px;
            margin: -25px 0 0 -25px;
            line-height: 50px;
            svg{
                width: 30px;
                height: 30px;
            }
        }
    }

    /* @end */
    
    /* @group Author and Tags page */

    #page-404 div.not-found{
        max-width: inherit;
        i.fa{ font-size: 80px; }
    }

    /* @end */

    /* @group Author and Tags page */

    #page-subscribe{
        margin-bottom: 20px;
        section{
            padding: 0;
            margin-top: 0px;
        }
        form{
            padding: 25px;
        }
    }

    /* @end */
    
    

	/* @group Footer */

	#footer{
        margin-top: 0px;
        .subscribe .left{ padding-left: $grid-gap !important; padding-right: $grid-gap !important; }
        .subscribe .right{ float: none; margin-bottom: $grid-gap; text-align: center; padding-right: $grid-gap; }
        .subscribe p{ margin-top: 5px; }
        .widgets{ 
            padding: $section-padding 0;
            .widget{
                margin-bottom: 30px;
            }
        }
        // .widgets > div{ width: 100%; }
		.widget{ margin-top: $section-padding; }
        .widget:first-child{ margin-top: 0; }

        .mobile-sidebar{     
            .widget{
                width: 100% !important;
            }
        }
        .logo{
            margin: 20px;
        }

	}

	/* @end */

	/* @group Text Editor */

	div.text{
        font-size: 14px;
        h1{ font-size: 24px; }
        h2{ font-size: 22px; }
        h3{ font-size: 20px; }
        h4{ font-size: 18px; }
        h5{ font-size: 16px; }
        h6{ font-size: 14px; }
        blockquote{
            padding: 15px 25px;
        }
        iframe{ max-width: 100%; }
        //iframe:not(.wp-embedded-content){ max-width: 100%; height: 200px; }
        pre:not([class*=language-]) {
            padding: 10px 5px;
            font-size: 13px;
        }
        code:not([class*=language-]){
            font-size: 13px;
        }
		pre, code[class*="language-"], pre[class*="language-"]{
			max-height: 300px;
			white-space: pre;
        }
        table{
            display: block;
            overflow: auto;
            padding: 0;
            tbody{
                overflow: auto;
            }
        }
        // Spacing
        iframe, figure, p{
            margin-bottom: $editor-base-unit * 0.4;
        }
    }

	/* @end */

}
