/* ------------------------------------------------------------------------------
* Author: web-zone.org
* @package Bado Blog
* Description: Styles for XL Mega menu
* ------------------------------------------------------------------------------ */


/* 
Common
*/

.xlmega-clear,
.badoblog-css-xlmega-block {
	display: none;
}

.badoblog-css-xlmega-area {
    flex-direction: column;
}

.badoblog-css-mega-menu > ul > li > ul.badoblog-css-xlmega-area {
    background: #505062;
	padding: 35px;
}

@media (max-width: 600px) {
	.badoblog-css-mega-menu > ul > li > ul.badoblog-css-xlmega-area {
		padding: 25px 15px;
	}
}

.badoblog-css-xlmega-area h2 {
	font-weight: 400;
	text-transform: none;
}


/* 
Common group
*/

.badoblog-css-xlmega-narrow-string-main,
.badoblog-css-xlmega-narrow-small-main,
.badoblog-css-xlmega-image-mid-main,
.badoblog-css-xlmega-button-mid-main {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.badoblog-css-xlmega-narrow-mid-main {
    grid-template-columns: 1fr 1fr 1fr;
}

.badoblog-css-xlmega-narrow-big-main {
    grid-template-columns: 1fr 1fr;
}

.badoblog-css-xlmega-narrow-string-post-box,
.badoblog-css-xlmega-narrow-small-post-box,
.badoblog-css-xlmega-narrow-mid-post-box,
.badoblog-css-xlmega-narrow-big-post-box,
.badoblog-css-xlmega-image-mid-post-box,
.badoblog-css-xlmega-button-mid-post-box,
.badoblog-css-xlmega-cat-image-post-box {
	display: flex;
	flex-direction: column;
}

.badoblog-css-xlmega-narrow-string-main,
.badoblog-css-xlmega-narrow-small-main,
.badoblog-css-xlmega-narrow-mid-main,
.badoblog-css-xlmega-narrow-big-main,
.badoblog-css-xlmega-image-mid-main,
.badoblog-css-xlmega-button-mid-main,
.badoblog-css-xlmega-narrow-string-post-box,
.badoblog-css-xlmega-narrow-small-post-box,
.badoblog-css-xlmega-narrow-mid-post-box,
.badoblog-css-xlmega-narrow-big-post-box,
.badoblog-css-xlmega-image-mid-post-box,
.badoblog-css-xlmega-button-mid-post-box,
.badoblog-css-xlmega-cat-image-post-box {
	gap: 25px;
}

.badoblog-css-xlmega-narrow-string-column-h,
.badoblog-css-xlmega-narrow-small-column-h,
.badoblog-css-xlmega-narrow-mid-column-h,
.badoblog-css-xlmega-narrow-big-column-h,
.badoblog-css-xlmega-image-mid-column-h,
.badoblog-css-xlmega-button-mid-column-h,
.badoblog-css-xlmega-cat-image-column-h {
	margin: 0 0 25px;
	line-height: 1;
}

.badoblog-css-xlmega-narrow-string-column-h,
.badoblog-css-xlmega-narrow-small-column-h,
.badoblog-css-xlmega-narrow-mid-column-h,
.badoblog-css-xlmega-narrow-big-column-h,
.badoblog-css-xlmega-image-mid-column-h,
.badoblog-css-xlmega-button-mid-column-h,
.badoblog-css-xlmega-cat-image-column-h {
	color: #fff;
}

.badoblog-css-xlmega-narrow-string-column-h,
.badoblog-css-xlmega-narrow-small-column-h,
.badoblog-css-xlmega-image-mid-column-h,
.badoblog-css-xlmega-button-mid-column-h,
.badoblog-css-xlmega-cat-image-column-h {
	font-size: 24px;
}

.badoblog-css-xlmega-narrow-mid-column-h,
.badoblog-css-xlmega-narrow-big-column-h {
	font-size: 28px;
}

.badoblog-css-xlmega-narrow-string-post,
.badoblog-css-xlmega-narrow-small-post,
.badoblog-css-xlmega-narrow-mid-post,
.badoblog-css-xlmega-narrow-big-post,
.badoblog-css-xlmega-image-mid-post,
.badoblog-css-xlmega-button-mid-post,
.badoblog-css-xlmega-cat-image-post,
.badoblog-css-xlmega-image-in img {
	border-radius: 15px;
}

.badoblog-css-xlmega-narrow-small-post img,
.badoblog-css-xlmega-narrow-mid-post img,
.badoblog-css-xlmega-narrow-big-post img,
.badoblog-css-xlmega-image-mid-post img {
	border-radius: 10px;
}

.badoblog-css-mega-menu .badoblog-css-xlmega-narrow-string-post a,
.badoblog-css-mega-menu .badoblog-css-xlmega-narrow-small-post a,
.badoblog-css-mega-menu .badoblog-css-xlmega-narrow-mid-post a,
.badoblog-css-mega-menu .badoblog-css-xlmega-cat-image-post a {
	display: flex;
	align-items: center;
	padding: 0;
}

.badoblog-css-xlmega-narrow-string-post-h h2,
.badoblog-css-xlmega-narrow-small-post-h h2,
.badoblog-css-xlmega-narrow-mid-post-h h2,
.badoblog-css-xlmega-image-mid-post-h h2,
.badoblog-css-xlmega-button-mid-post-h h2,
.badoblog-css-xlmega-cat-image-post-h h2 {
    margin: 0;
}

.badoblog-css-xlmega-narrow-string-post-h h2,
.badoblog-css-xlmega-narrow-small-post-h h2,
.badoblog-css-xlmega-cat-image-post-h h2,
.badoblog-css-xlmega-image-mid-post-h h2 {
	font-size: 16px;
}


@media (max-width: 1100px) {
    .badoblog-css-xlmega-narrow-string-column-h,
	.badoblog-css-xlmega-narrow-small-column-h,
	.badoblog-css-xlmega-image-mid-column-h,
	.badoblog-css-xlmega-button-mid-column-h,
	.badoblog-css-xlmega-cat-image-column-h {
        font-size: 16px;
    }
}

@media (max-width: 350px) {
	.badoblog-css-xlmega-narrow-string-post-h h2,
	.badoblog-css-xlmega-narrow-small-post-h h2,
	.badoblog-css-xlmega-narrow-mid-post-h h2,
	.badoblog-css-xlmega-narrow-big-post-h h2,
	.badoblog-css-xlmega-image-mid-post h2,
	.badoblog-css-xlmega-button-mid-post-h h2,
	.badoblog-css-xlmega-button-mid-post a,
	.badoblog-css-xlmega-cat-image-post-h h2 {
		font-size: 14px!important;
	}
	.badoblog-css-xlmega-narrow-big-post-p p {
		font-size: 12px!important;
	}
}


/* 
Narrow string blocks
*/

.badoblog-css-xlmega-narrow-string-post {
	background: #73738c;
}

.badoblog-css-xlmega-narrow-string-post:hover {
	background: #4c65ad;
}

.badoblog-css-xlmega-narrow-string-post h2,
.badoblog-css-xlmega-narrow-string-post:hover h2 {
	color: #fffffb;
}

.badoblog-css-xlmega-narrow-string-post-h h2 {
    padding: 10px 25px;
}

.badoblog-css-xlmega-narrow-string-post img {
    width: 90px;
}

@media (max-width: 1100px) {
	.badoblog-css-xlmega-narrow-string-post img {
		width: 60px;
	}
}

@media (max-width: 860px) {
	.badoblog-css-xlmega-narrow-string-main,
	.badoblog-css-xlmega-narrow-string-post-box {
		grid-template-columns: none!important;
	}
    .badoblog-css-mega-menu .badoblog-css-xlmega-narrow-string-post a {
        width: 100%;
    }
}


/* 
Narrow small blocks
*/

.badoblog-css-xlmega-narrow-small-post {
	background: #73738c;
}

.badoblog-css-xlmega-narrow-small-post:hover {
	background: #4c65ad;
}

.badoblog-css-xlmega-narrow-small-post h2,
.badoblog-css-xlmega-narrow-small-post:hover h2 {
	color: #fffffb;
}

.badoblog-css-xlmega-narrow-small-post-h h2 {
    padding: 7px 15px;
}

.badoblog-css-xlmega-narrow-small-post img {
    max-width: 35%;
}

@media (max-width: 860px) {
	.badoblog-css-xlmega-narrow-small-main,
	.badoblog-css-xlmega-narrow-small-post-box {
		grid-template-columns: none!important;
	}
    .badoblog-css-mega-menu .badoblog-css-xlmega-narrow-small-post a {
        width: 100%;
    }
}


/* 
Narrow mid blocks 
*/

.badoblog-css-xlmega-narrow-mid-post {
	background: #73738c;
}

.badoblog-css-xlmega-narrow-mid-post:hover {
	background: #4c65ad;
}

.badoblog-css-xlmega-narrow-mid-post h2,
.badoblog-css-xlmega-narrow-mid-post:hover h2 {
	color: #fffffb;
}

.badoblog-css-xlmega-narrow-mid-post-h h2 {
    padding: 10px 15px 10px 5px;
	font-size: 18px;
}

.badoblog-css-xlmega-narrow-mid-post img {
    max-width: 30%;
    margin: 15px;
}

@media (max-width: 1100px) {
    .badoblog-css-xlmega-narrow-mid-column-h {
        font-size: 20px;
    }
}

@media (max-width: 860px) {
	.badoblog-css-xlmega-narrow-mid-main,
	.badoblog-css-xlmega-narrow-mid-post-box {
		grid-template-columns: none!important;
	}
    .badoblog-css-mega-menu .badoblog-css-xlmega-narrow-mid-post a {
        width: 100%;
    }
}

@media (max-width: 450px) {
    .badoblog-css-mega-menu .badoblog-css-xlmega-narrow-mid-post a {
        flex-direction: column;
        align-items: center;
    }
    .badoblog-css-xlmega-narrow-mid-post-h h2 {
        padding: 10px 15px 12px;
    }
    .badoblog-css-xlmega-narrow-mid-post-right {
        margin-left: 15px;
    }
    .badoblog-css-xlmega-narrow-mid-post img {
        margin-bottom: 0;
		width: 100%;
    }
}


/* 
Narrow big blocks 
*/

.badoblog-css-xlmega-narrow-big-post {
	background: #73738c;
}

.badoblog-css-xlmega-narrow-big-post:hover {
	background: #4c65ad;
}

.badoblog-css-xlmega-narrow-big-post-right {
    text-transform: none;
    margin: 10px 15px 15px 0;
}

.badoblog-css-mega-menu .badoblog-css-xlmega-narrow-big-post a {
	display: flex;
    align-items: flex-start;
	padding: 0;
}

.badoblog-css-xlmega-narrow-big-post p,
.badoblog-css-xlmega-narrow-big-post h2,
.badoblog-css-xlmega-narrow-big-post:hover p,
.badoblog-css-xlmega-narrow-big-post:hover h2 {
	color: #fffffb;
}

.badoblog-css-xlmega-narrow-big-post-h h2 {
    margin: 5px 0;
	font-size: 22px;
}

.badoblog-css-xlmega-narrow-big-post p {
	font-size: 15px;
	font-weight: 400;
    margin: 5px 0;
}

.badoblog-css-xlmega-narrow-big-post img {
	max-width: 40%;
    margin: 22px;
}

@media (max-width: 1100px) {
	.badoblog-css-xlmega-narrow-big-post img {
		max-width: 35%;
	}
    .badoblog-css-xlmega-narrow-big-column-h {
        font-size: 20px;
    }
}

@media (max-width: 860px) {
	.badoblog-css-xlmega-narrow-big-main,
	.badoblog-css-xlmega-narrow-big-post-box {
		grid-template-columns: none!important;
	}
    .badoblog-css-mega-menu .badoblog-css-xlmega-narrow-big-post a {
        width: 100%;
    }
}

@media (max-width: 450px) {
    .badoblog-css-mega-menu .badoblog-css-xlmega-narrow-big-post a {
        flex-direction: column;
        align-items: center;
		text-align: center;
    }
    .badoblog-css-xlmega-narrow-big-post-right {
        margin-left: 15px;
    }
    .badoblog-css-xlmega-narrow-big-post img {
        margin-bottom: 0;
        width: 100%;
    }
}

@media (max-width: 350px) {
    .badoblog-css-xlmega-narrow-big-post img {
		margin: 20px 10px 0;
    }
}


/* 
Image mid blocks
*/

.badoblog-css-xlmega-image-mid-main {
	justify-items: center;
}

.badoblog-css-xlmega-image-mid-post {
	background: #73738c;
}

.badoblog-css-xlmega-image-mid-post:hover {
	background: #4c65ad;
}

.badoblog-css-mega-menu .badoblog-css-xlmega-image-mid-post a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 25px;
	text-align: center;
}

.badoblog-css-xlmega-image-mid-post h2,
.badoblog-css-xlmega-image-mid-post:hover h2 {
	color: #fffffb;
}

.badoblog-css-xlmega-image-mid-post-h h2 {
    padding: 18px 10px 0;
}

@media (max-width: 860px) {
	.badoblog-css-xlmega-image-mid-main,
	.badoblog-css-xlmega-image-mid-post-box {
		grid-template-columns: none!important;
	}
    .badoblog-css-mega-menu .badoblog-css-xlmega-image-mid-post a {
        width: 100%;
    }
	.badoblog-css-xlmega-image-mid-post-h h2 {
		max-width: 415px;
	}
}

@media (max-width: 860px) and (min-width: 380px) {
	.badoblog-css-xlmega-image-mid-main,
	.badoblog-css-xlmega-image-mid-post-box {
		justify-items: normal;
	}
    .badoblog-css-mega-menu .badoblog-css-xlmega-image-mid-post a {
		flex-direction: row;
		justify-content: normal;
		text-align: left;
    }
	.badoblog-css-xlmega-image-mid-post img {
		max-width: 30%;
	}
	.badoblog-css-xlmega-image-mid-post-h h2 {
		padding: 0 0 0 15px;
	}
}

@media (max-width: 350px) {
	.badoblog-css-mega-menu .badoblog-css-xlmega-image-mid-post a {
		padding: 10px;
	}
	.badoblog-css-xlmega-image-mid-post-h h2 {
		padding-top: 10px;
	}
}

/* 
Button mid blocks
*/

.badoblog-css-xlmega-button-mid-main {
	justify-items: center;
	justify-content: space-evenly;
}

.badoblog-css-xlmega-button-mid-post {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	text-align: center;
	background: #73738c;
}

.badoblog-css-xlmega-button-mid-post:hover {
	background: #4c65ad;
}

.badoblog-css-xlmega-button-mid-post a {
	border: solid 1px;
	margin: 10px 10px 25px;
}

.badoblog-css-mega-menu .badoblog-css-xlmega-button-mid-post a {
	padding: 8px 20px 6px;
	border-radius: 20px;
}

.badoblog-css-xlmega-button-mid-post a:hover {
	padding: 8px 30px 6px;
}

.badoblog-css-xlmega-button-mid-post-h h2,
.badoblog-css-xlmega-button-mid-post a,
.badoblog-css-xlmega-button-mid-post:hover h2,
.badoblog-css-xlmega-button-mid-post:hover a {
	color: #fffffb;
	border-color: #fffffb;
}

.badoblog-css-xlmega-button-mid-post-h h2 {
    padding: 15px;
	font-size: 20px;
}

@media (min-width: 1100px) {
	.badoblog-css-xlmega-button-mid-post {
		max-width: 500px;
	}
}

@media (max-width: 1100px) {
	.badoblog-css-mega-menu .badoblog-css-xlmega-button-mid-post a {
		font-size: 14px
	}
}

@media (max-width: 860px) {
	.badoblog-css-xlmega-button-mid-main,
	.badoblog-css-xlmega-button-mid-post-box {
		grid-template-columns: none!important;
		justify-items: normal;
		justify-content: normal;
	}
}

@media (max-width: 450px) {
	.badoblog-css-mega-menu .badoblog-css-xlmega-button-mid-post a {
        width: 90%;
    }
}


/*
Menu with image
*/

.badoblog-css-xlmega-cat-image-main {
	grid-auto-flow: column;
	justify-content: start;
	gap: 35px;
}

.badoblog-css-xlmega-cat-image-column-box {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 35px;
}

.badoblog-css-xlmega-cat-image-post h2 {
	color: #fffffb;
}

.badoblog-css-xlmega-cat-image-post:hover h2 {
	color: #ffedba;
}

.badoblog-css-xlmega-cat-image-post-h h2 {
    padding: 0;
}

.badoblog-css-xlmega-image-in {
	max-width: 400px;
}

.badoblog-css-xlmega-image-in.badoblog-css-xlmega-image-right {
	padding: 10px 10px 10px 15px;
}

@media (max-width: 1100px) {
	.badoblog-css-xlmega-image-in {
		max-width: 300px;
	}
}

@media (max-width: 960px) {
	.badoblog-css-xlmega-image-in {
		max-width: 200px;
	}
}

@media (max-width: 860px) {
	.badoblog-css-xlmega-cat-image-column-box,
	.badoblog-css-xlmega-cat-image-post-box {
		grid-template-columns: none!important;
	}
    .badoblog-css-mega-menu .badoblog-css-xlmega-cat-image-post a {
        width: 100%;
    }
	.badoblog-css-xlmega-image-in {
		display: none;
	}
}