/*
Bem-vindo ao CSS Personalizado!

Para saber como isso funciona, veja https://wp.me/PEmnE-Bt
*/
#mvp-leader-wrap, #mvp-foot-ad-wrap {
	background: #fff;
}

.mvp_ad_widget {
	background: #fff;
}

#mvp-nav-soc {
	width: 180px;
}

#mvp-nav-menu ul {
	width: 850px;
}

#mvp-nav-main {
	width: 850px;
}

@media screen and (max-width: 768px) {
	#gb_menu_band {
		display: none;
	}
}

@media screen and (min-width: 992px) {
	.right-corder-container {
		padding-right: 100px;
	}
}

#menuBand ul, #menuBand ul#mnBand li {
	margin: 0;
	padding: 0;
	display: block;
}

#molduraheadermenu {
	background-color: #fff;
	height: 37px;
	position: relative;
	padding: 7px 0;
	z-index: 9999;
}

.sprtmnconteudo {
	background-image: url(https://band.com.br/imagens/layout/menu/conteudo_menu_band2.png);
}

#menuBand {
	width: 960px;
	margin: 0 auto;
}

#menuBand ul {
	list-style: none;
}

#menuBand ul#mnBand > li {
	float: left;
	margin: 0 25px 0 0 !important;
}

#menuBand ul#mnBand > li > a {
	display: block;
	height: 35px;
	line-height: 35px;
	font-family: Arial;
	font-size: 20px;
	text-decoration: none;
	font-weight: 700;
	text-transform: lowercase;
	-webkit-transition: all ease .25s;
	-moz-transition: all ease .25s;
	transition: all ease .25s;
}

#menuBand ul#mnBand > li > a:hover {
	opacity: .65;
	-moz-opacity: .65;
	filter: alpha(opacity=65);
}

#menuBand ul#mnBand > li#mnAnoticias > a {
	color: #b50d0d;
}

#menuBand ul#mnBand > li#mnAesporte > a {
	color: #678310;
}

#menuBand ul#mnBand > li#mnAentretenimento > a {
	color: #9a6ec0;
}

#menuBand ul#mnBand > li#mnAvivabem > a {
	color: #ff6c00;
}

#menuBand ul#mnBand > li#mnAvideos > a {
	color: #1b4667;
}

#menuBand ul#mnBand > li#mnAgrupo > a {
	color: #2f2f2f;
	text-transform: none;
}

@media screen and (max-width: 900px) {
	#menuBand {
		width: 100% !important;
	}
	
	ul#mnBand > li#mnAvivabem {
		display: none !important;
	}
}

@media screen and (max-width: 820px) {
	#menuBand {
		width: 100% !important;
	}
	
	ul#mnBand > li#mnAgrupo, ul#mnBand > li#mnAvivabem {
		display: none !important;
	}
}

@media screen and (max-width: 590px) {
	#menuBand ul#mnBand > li > a {
		font-size: 18px;
	}
}

@media screen and (max-width: 560px) {
	#menuBand ul#mnBand > li > a {
		font-size: 16px;
	}
}

@media screen and (max-width: 520px) {
	#menuBand ul#mnBand > li > a {
		font-size: 14px;
	}
	
	#menuBand ul#mnBand > li#mnAvideos {
		display: none;
	}
}

@media screen and (max-width: 450px) {
	#menuBand ul#mnBand > li#mnAentretenimento, #menuBand ul#mnBand > li#mnAesporte, #menuBand ul#mnBand > li#mnAnoticias, #menuBand ul#mnBand > li#mnAvideos {
		display: none;
	}
	
	ul#mnBand .sprtmnconteudo {
		width: 103px;
	}
	
	#menuBand {
		width: 103px !important;
	}
}

.right-corder-container {
	position: fixed;
	right: 20px;
	bottom: 70px;
	z-index: 99;
}

.right-corder-container .right-corder-container-button {
	height: 62px;
	width: 62px;
	border: none;
	background-color: #fa4b2a;
	border-radius: 62px;
/*Transform the square into rectangle, sync that value with the width/height*/
	-webkit-box-shadow: -1px 0 10px -2px rgba(0,0,0,0.75);
	-moz-box-shadow: -1px 0 10px -2px rgba(0,0,0,0.75);
	box-shadow: -1px 0 10px -2px rgba(0,0,0,0.75);
}

.right-corder-container .right-corder-container-button span {
	font-size: 30px;
	color: white;
	position: absolute;
	text-align: center;
	left: 16px;
	top: 16px;
	line-height: 28px;
}

/*
    Long text appears slowly with an animation. That code prepare the animation by hidding the text.
    The use of display is not there because it does not work well with CSS3 animation.
*/
.right-corder-container .right-corder-container-button .long-text {
	transition: opacity 1000ms;
/*Only the text fadein/fadeout is animated*/
	opacity: 0;
/*By default we do not display the text, we want the text to fade in*/
	color: white;
	white-space: nowrap;
	font-size: 0;
/*Set to 0 to not have overflow on the right of the browser*/
	width: 0;
/*Set to 0 to not have overflow on the right of the browser*/
	margin: 0;
/*Set to 0 to not have overflow on the right of the browser*/
}

/*
    Animation to have a text that appear progressively. We need to play with a delay
    on the width and the font-size to not have the browser have the text appears on the right
    side of the browser view port. This has the side-effect of having an horizontal bar.
*/
.right-corder-container .right-corder-container-button .long-text.show-long-text {
	transition: /*two thirds of the animation on the container width*/
opacity 700ms, width 1ms linear 270ms, font-size 1ms linear 270ms;
/*two thirds of the animation on the container width*/
	opacity: 1;
	margin-top: 2px;
/*Center the position vertically*/
	margin-left: 65px;
/*Center between the + and the right end side*/
	font-size: 20px;
/*Text size, cannot be defined initially without moving the scrollbar*/
	width: auto;
/*Required to be set with a delay (see animation) to not have scrollbar. Delay is to wait container to size up*/
}