/*************************************************************
                        CUSTOM CODE
                  "Bom Dia" custom styles
--------------------------------------------------------------
NOTES FOR DEVELOPERS:
- Use tabs of two spaces for best reading experience
--------------------------------------------------------------
  INDEX
  1.      Header - mobile menu override
  1.1     Header - mobile header-ad
  2.      Footer - social icons override
  2.1	  Footer - Newsletter form style
  3.      Home
  3.2.    Instagram section
  4.      Single Post
  4.1.    Add post tags at the end of the content
  4.2.    Make sidebar ad unit show up again
  4.3.    Single Post: Colunistas
  4.3.1.  Single Post: Colunistas - author section override
  4.3.1.  Single Post: Colunistas - Aviso Colunistas
  4.4.    Single Post: Mais Lidas (2 grid) of top posts
  4.5.    Single Post: Reduce post top spacing
  4.6.    Post Share buttons
  4.7.    Single post - Related Posts
  4.8.    Single post - Mobile overflow fixes
  5.      Últimas Notícias
  5.1     Últimas Notícias - full width wrapper
  6.      Lower nav
  7.      Logo Bom Dia 20 anos
  8.	  Header ads
  9.      Post grid - improve the block overlay shadows
--------------------------------------------------------------
  CODE STARTS HERE
*------------------------------------------------------------
  1.      Header - mobile menu override
-------------------------------------------------------------*/
@media only screen and (max-width: 1054px) {
  html body header nav #menutogglemobile {
    display: block;
    width: 50px;
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 30px;
    float: left;
    margin-top: 2px;
    position: relative;
  }

  #menutogglemobile:after {
    font-weight: 600;
    display: block;
    content: "MENU";
    font-size: 17px;
    color: #FFF;
    height: 10px;
    position: absolute;
    top: 14px;
    line-height: 8px;
    right: -45px;
  }
}
/*------------------------------------------------------------
  1.      Header - mobile header-ad
-------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    #div-gpt-ad-1427102966221-0 {
        min-width: 320px;
    }
}
/*------------------------------------------------------------
  2.    Footer - social icons override
-------------------------------------------------------------*/
/* To compensate for removing the .fm icon */
html body footer .footer-column #social-menu li {
  margin-left: 0.1em;
}

/*------------------------------------------------------------
  2.1	  Footer - Newsletter form style
-------------------------------------------------------------*/
footer .footer-column form input[type=text], html body footer .footer-column form input[type=email] {
	font-size: 14px;
	max-width: 73%;
	padding-top: 8px;
}

html body footer .footer-column form input[type=submit] {
	font-size: 14px;
	width: auto;
}


/*------------------------------------------------------------
  3.    Home
  3.1.  Colunistas Section: tweak the title
-------------------------------------------------------------*/
.midcontent.opinion {
  margin-top: 30px;
  margin-bottom: 30px;
  padding-top: 20px;
  padding-bottom: 40px;
}

.midcontent.opinion h3 {
  font-size: 1.25em;
}
.midcontent.opinion article a>div .post-author {
  margin-bottom: 2px;
}

/*------------------------------------------------------------
  3.2.  Featured Posts Grid - increase font size
-------------------------------------------------------------*/
html body .content.homepage article.third a.details .post-category,
html body .content.homepage article.third div.details .post-category {
    font-size: 1.4em;
    line-height: 1.3em;
}

/*------------------------------------------------------------
  3.2.  Archive Posts Grid - increase font size
-------------------------------------------------------------*/
body.archive .details .post-excerpt {
    font-size: 1em;
    line-height: 1.4em;
}

html body .content.homepage article.half a.details>div .post-excerpt, html body .content.homepage article.half div.details>div .post-excerpt {
    line-height: 1.3em;
}

/*------------------------------------------------------------
  3.2.    Instagram section
-------------------------------------------------------------*/
.midcontent.instagram {
  display: block !important;
}

#sb_instagram #sbi_load .sbi_load_btn, #sb_instagram .sbi_follow_btn a {
	border-radius: 0px !important;
}

@media screen and (max-width: 650px) {
  .midcontent.instagram .sbi_item {
    width: 50% !important;
  }
}

@media screen and (max-width: 650px) {
  .midcontent.instagram .instagram-account-name {
    text-align: center;
    display: block !important;
  }
}

@media only screen and (max-width: 1023px) {
  .midcontent.instagram {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

@media only screen and (min-width: 1024px) {
  .midcontent.instagram {
    padding-top: 40px;
    padding-bottom: 60px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
}

/*------------------------------------------------------------
  4.      Single Post
  4.1.    Add post tags at the end of the content
-------------------------------------------------------------*/
/* Fix the gutenberg image overflow issue */
.wrapper .content .textcontent .wp-caption {
    max-width: 100%;
}
/*------------------------------------------------------------
  Update post title font-size
-------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    html body .wrapper.page .content h1:first-of-type {
        font-size: 1.8em;
    }
}

/*------------------------------------------------------------
  Adjust the iframe embed on mobile
-------------------------------------------------------------*/

@media screen and (max-width: 1023px) {
    html body .wrapper.page .content .textcontent iframe {
        width: 100%;
    }

}

/*------------------------------------------------------------
  4.1.    Add post tags at the end of the content
-------------------------------------------------------------*/
.post-tag-block {
    border: 1px solid #ebebeb;
    padding: 0px 6px 0px 6px;
    border-radius: 4px;
    color: #b9252c;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-size: 13px;
    display: inline-block;
}


/*------------------------------------------------------------
  4.3.    Make sidebar ad unit show up again
-------------------------------------------------------------*/
/* Enable lists on posts */
.page .content .textcontent ul {
	list-style: disc;
	list-style-position: inside;
}

/* Mais lidas - aumentar tipo de letra */
html body .sidebar .wpp-list li {
    margin: 0;
}

html body .sidebar .post-list li h3, html body .sidebar .wpp-list li {
    font-size: 1.1em;
}

@media only screen and (max-width: 1054px) {
	html body.single .sidebar {
    display: block !important;
    position: relative !important;
    width: 90% !important;
		top: 0 !important;
		margin-left: auto;
		margin-right: auto;
		min-width: none !important;
	}

	html body.single .sidebar > div{
		margin: 20px auto !important;
		display: block;
		text-align: center;
	}
}

/*------------------------------------------------------------
  4.3.1.    Single Post: Colunistas - author section override
-------------------------------------------------------------*/
@media only screen and (max-width: 650px) {
  html body .wrapper.page .content .post-author {
    margin-bottom: 15px;
    max-width: 100%;
  }
}

@media only screen and (min-width: 651px) {
  html body .wrapper.page .content .post-author {
    max-width: 250px;
  }
}

html body .wrapper.page .content .post-author {
  display: block;
  width: 100%;
}

html body .wrapper.page .content .post-author:after {
  content: "";
  display: table;
  clear: both;
}

html body .wrapper.page .content .post-author .post-author-photo {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

html body .wrapper.page .content .post-author .post-author-photo img {
  width: 50px;
  height: 50px;
}

html body .wrapper.page .content .post-author .post-author-meta-wrapper {
  float: left;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  height: 50px;
  justify-content: center;
}

@media only screen and (min-width: 650px) {
  html body .wrapper.page .content .post-author .post-author-meta-wrapper {
    max-width: 190px;
  }
}

html body .wrapper.page .content .post-author .post-author-name {
  text-align: left;
  color: #222;
  font-size: 16px;
  margin-bottom: 3px;
}

html body .wrapper.page .content .post-author .post-author-bio {
  text-align: left;
  color: #222;
  font-size: 14px;
}

/*------------------------------------------------------------
  4.3.1.  Single Post: Colunistas - Aviso Colunistas
-------------------------------------------------------------*/
html body .wrapper.page .content .aviso-colunistas {
  text-align: center;
  padding: 20px 20px 22px 20px;
  background-color: #e5e5e5;
  color: #222;
  font-style: italic;
  font-size: 1.17em;
  font-weight: bold;
  line-height: 1.2em;
}

/*------------------------------------------------------------
    Seguir o bom dia
-------------------------------------------------------------*/
body.single .seguir-bom-dia {
    margin-top: 20px;
}

.seguir-bom-dia {
    border: 10px solid #ebebeb;
    padding: 20px;

    text-align: center;
}

.seguir-bom-dia h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.seguir-bom-dia a {
    border-radius: 4px;
    padding: 4px 10px 6px 10px;
    font-weight: 600;
    color: #FFF;
    font-style: italic;
    font-size: 15px;
    display: inline-block;
    margin: 0 2px;
}

.seguir-bom-dia a.facebook {
    background-color: #4267B2;
}

.seguir-bom-dia a.telegram {
    background-color: #0088CC;
}


/*------------------------------------------------------------
  4.4.    Single Post: Mais Lidas (2 grid) of top posts
-------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .toprelatedposts{
    padding: 20px 0 0 0;
  }

  .toprelatedposts h3 {
    text-transform:uppercase;
    color: #b9252c;
    font-size:1.5em;
    margin-top: 0;
  }

  .toprelatedposts h4{
    margin-top: 5px;
    margin-bottom: 10px;
    line-height: 18px;
  }

  .toprelatedposts ul{
    margin: 0 auto;
    position: relative;
  }
  .toprelatedposts li{
    float: left;
    margin: 0;
    width: 50%;
    box-sizing: border-box;
  }

  .toprelatedposts li:nth-child(odd){
    padding-right: 7px;
  }

  .toprelatedposts li:nth-child(even){
    padding-left: 7px;
  }

  .toprelatedposts .imagewrapper{
    padding-bottom: 66.7%;
    position: relative;
  }

  .toprelatedposts .imagewrapper img{
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    max-width: 100%;
    height:100%;
  }

  /* Hide the mais lidas old style on mobile */
  html body .wrapper.page .sidebar h2:first-child,
  html body .sidebar .wpp-list {
    display: none;
  }

}

@media screen and (min-width: 768px) {
  .toprelatedposts {
    display: none;
  }
}

/*------------------------------------------------------------
  4.5.    Single Post: Reduce post top spacing
-------------------------------------------------------------*/
@media screen and (max-width: 1023px) {
	html body .wrapper.page .content {
		margin-top: 0;
	}
}

@media screen and (min-width: 1024px) {
	html body .wrapper.page .content {
		margin-top: 10px;
	}
}

/*------------------------------------------------------------
  4.6.    Post Share buttons
-------------------------------------------------------------*/
.sharebuttons {
	color: #222;
	font-size: 15px;
	font-weight: bold;
}

.sharebuttons button {
	border: 0px;
	border-radius: 4px;
	padding: 4px 10px;
	margin-left: 3px;
	color: #FFF;
}

.sharebuttons button.facebook{
	margin-left: 5px;
	background-color: #4267B2;
}

.sharebuttons button.whatsapp{
	margin-left: 5px;
	background-color: #25D366;
}

.sharebuttons button.twitter{
	margin-left: 5px;
	background-color: #000000;
}

.sharebuttons button.linkedin{
	margin-left: 5px;
	background-color: #0077B5;
}

@media screen and (max-width: 767px) {
	.sharebuttons {
		text-align: center;
		position: fixed;
		bottom: 0;
		background-color: #FFF;
		padding-top: 10px;
		padding-bottom: 10px;
		border-top: 1px solid #ebebeb;
		width: 100%;
		left: 0;
		z-index: 1;
	}

    .sharebuttons button.twitter{
        display: none;
    }
}

@media screen and (max-width: 380px) {
	.sharebuttons {
		font-size: 14px;
	}
}

@media screen and (min-width: 768px) {
	.sharebuttons button {
        min-width: 90px;
    }
}

/*------------------------------------------------------------
  4.7.    Single post - Related Posts
-------------------------------------------------------------*/
html body .wrapper.relatedposts ul li h4 {
    line-height: 1.2em;
    margin-bottom: 5px;
}

html body .wrapper.relatedposts ul li .post-excerpt p {
    font-size: 1em;
}

/*------------------------------------------------------------
  4.8.    Single post - Mobile overflow fixes
-------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    /* Tables in content - make it so that content goes overflow x scroll */
    body.single-post .content .textcontent {
        overflow-x: auto;
    }

    /* Fix overflow issue with long links */
    body.single-post .content .textcontent p a {
        overflow-wrap: break-word;
        word-wrap: break-word;
        -ms-word-break: break-all;
        word-break: break-all;
        word-break: break-word;
        -ms-hyphens: auto;
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    /* Fix overflow issue with legacy iframes inside p */
    body.single-post .content .textcontent p iframe {
        max-width: 100%;
    }
}

/*------------------------------------------------------------
  5.      Últimas Notícias
  5.1     Últimas Notícias - full width wrapper
-------------------------------------------------------------*/
.homepage.customlistings .post-header h1 {
	text-align: center;
	text-transform: uppercase;
  }

  @media screen and (max-width: 767px) {
	.homepage.customlistings .post-header h1 {
	  font-size: 1.5em;
	  margin-bottom: 0;
	}
  }

/*------------------------------------------------------------
  6.      Lower nav
-------------------------------------------------------------*/
@media screen and (max-width: 650px) {
  .lower-nav {
    background-color: #ebebeb;
    text-align: center;
    top: 50px;
    position: relative;
  }

  .lower-nav li {
    display: inline-block;
  }

  .lower-nav li a {
    /*color: #FFF;*/
    font-weight: bold;
    font-size: 14px;
    margin-left: 8px;
    margin-right: 8px;
    line-height: 34px;
    text-transform: uppercase;
  }

  .lower-nav-desktop {
    display: none;
  }

}

@media screen and (min-width: 651px) {
  .lower-nav {
    display: none;
  }

  .lower-nav-desktop {
    text-align: center;
    top: 50px;
    position: relative;
    width: 312px;
    margin-left: auto;
    position: relative;
    top: 50px;
    margin-right: 0px;
  }

  header.sticky .lower-nav-desktop {
    top: 8px;
  }

  .lower-nav-desktop li {
    padding-left: 0;
    padding-right: 0;
    display: inline-block;
    background-color: #ebebeb;
    margin-right: 5px;
  }

  .lower-nav-desktop li:hover {
    background-color: #b9252c;
  }

  .lower-nav-desktop li a {
	padding-left: 12px;
    padding-right: 12px;
    font-weight: bold;
    font-size: 14px;
    line-height: 34px;
    text-transform: uppercase;
	display: flex;
	left: 0;
	margin: 0;
  }

  .lower-nav-desktop li:hover a {
    color: #FFF;
  }

}

/* Prevent top ad unit overflow */
html body .lbwrapper {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}

/* Add to the top spacing to prevent ad ovrerlap */
@media only screen and (max-width: 767px) {
  html body .lbwrapper.wrapper {
    /*margin-top: 124px;*/
    margin-top: 114px;
  }
}

@media only screen and (max-width: 1023px) {
    html body .lbwrapper.wrapper {
        min-height: 50px;
    }

    #div-gpt-ad-1427102966221-0 > div > iframe {
        width: 320px;
    }
}

/* Overrides the top fixed nav on mobile */
@media screen and (max-width: 650px) {
  .lower-nav {
    top: 65px
  }

  html body header #logo {
    width: 160px;
    height: 63px;
    margin-left: 14px;
    margin-top: 5px;
  }

  html body header,
  html body header.sticky {
    height: 120px;
  }
}

/* Pull the wrapper down to not cover the ads */
@media screen and (max-width: 1023px) {
	html body .lbwrapper.wrapper {
		margin-top: 155px;
	  }
}

@media screen and (min-width: 1024px) {
	html body .lbwrapper.wrapper {
		margin-top: 160px;
        min-height: 150px;
	  }
}


/*------------------------------------------------------------
  8.      Header ads
-------------------------------------------------------------*/
.lbwrapper {
	text-align: center;
}

.header-ad {
	display: inline-block;
    margin: 0 auto;
}


/*------------------------------------------------------------
  9.    Post grid - improve the block overlay shadows
-------------------------------------------------------------*/
html body .content.homepage article.fullsize a.details, html body .content.homepage article.half a.details, html body .content.homepage article.fullsize div.details, html body .content.homepage article.half div.details {
	box-shadow: inset 0 -168px 88px -50px rgb(0 0 0 / 33%);
}

/*------------------------------------------------------------
  11.    Adblocker message
-------------------------------------------------------------*/
#chp_ads_block_modal_content {
	position: absolute;
    left: 20px;
	right: 20px;
    width: 500px;
	max-width: calc(100% - 40px);
    padding: 30px 40px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgb(0 0 0 / 30%);
    box-sizing: border-box;
	border-width: 0;
	top: calc(50vh - 250px);
}

#chp_ads_block_pro_body .adblock_title {
	font-size: 25px;
}

#chp_ads_block_pro_body .adblock_subtitle {
	font-size: 18px;
}

/*------------------------------------------------------------
	Home - YouTube Section
-------------------------------------------------------------*/
.midcontent.youtube {
	display: block !important;
}

.midcontent.youtube .sby_meta {
	display: none !important;
}

#sby_lightbox .sby_btn a, [id^=sb_youtube_].sb_youtube .sby_btn a, [id^=sb_youtube_].sb_youtube .sby_follow_btn a, [id^=sb_youtube_].sb_youtube .sby_footer .sby_load_btn {
	border-radius: 0px !important;
}

.midcontent.youtube .youtube-account-name {
	font-weight: bold;
	display: inline-block;
	color: #aeaeae;
	text-transform: uppercase;
	margin-bottom: 1em;
	margin-left: 1.76em;
}

.midcontent.youtube h2 {
	margin-bottom: 0;
	display: inline-block;
}

@media screen and (max-width: 650px) {
	.midcontent.youtube .sbi_item {
		width: 50% !important;
	}
}

@media screen and (max-width: 650px) {
	.midcontent.youtube .youtube-account-name {
		text-align: center;
		display: block !important;
	}
}

@media only screen and (max-width: 1023px) {
	.midcontent.youtube {
		padding-top: 30px;
		padding-bottom: 30px;
	}


}

@media only screen and (min-width: 1024px) {
	.midcontent.youtube {
		padding-top: 40px;
		padding-bottom: 60px;
		margin-top: 40px;
		margin-bottom: 40px;
	}
}

/*------------------------------------------------------------
	10 - Logo - remove h1 around the title
-------------------------------------------------------------*/
html body header #logo span {
    position: absolute;
    right: 0;
    top: 80px;
    color: #bbb;
    text-indent: 0;
    right: 4px;
    top: 68px;
    font-size: .3em;
    text-transform: uppercase;
    font-weight: 600;
}

@media only screen and (max-width: 650px) {
    html body header #logo span {
        display: none;
    }
}