@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700i,900&display=swap');

@keyframes bounce{
	0%, 20%, 60%, 100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	40%{
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	80%{
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
}

/*BÁSICO*/
*{ font-family: 'Montserrat', sans-serif; font-size: 15px; color: #000; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; -webkit-transition:all 300ms ease-in;-moz-transition:all 300ms ease-in;-o-transition:all 300ms ease-in;transition:all 300ms ease-in;}
ul,li { list-style:none; }
*:focus { outline:none; }
.clear { clear:both; }
a, a:hover, a:visited { text-decoration:none; border:0 none; }
img { border:0 none; }
textarea { resize:none; }
input, textarea, select { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; -ms-appearance: none; }
select::-ms-expand { display: none; }
select { text-indent: 0.01px; text-overflow: ''; }
select::-ms-expand { display: none; }
body { margin: 0; }
img { max-width: 100%; }
.center { text-align: center; }
.right { text-align: right; }
.mobile { display: none; }
h4{
	color: black;
	text-align: left;
	font-weight: bold;
	
}
/*FIM BÁSICO*/



/*-------------------------HEADER-----------------------------*/
body { 
	background: url('imgs/fundo-site.jpg') no-repeat top center #d4d4d4;
	background-size: cover;
	overflow-x: hidden;
}

.fixo{
	position: fixed;
    background-color: #ffffff;
    width: 100%;
    z-index: 9;
    margin-top: 0;
    padding: 10px 0;
    top: 0;
	
}

.links ul li.marcado div {
    background: #65aac1;
    height: 15px;
    float: right;
    margin-top: -19px;
    max-width: 100%;
    width: calc(100% - 28px);
}

.links ul li.marcado a {
    margin-left: 29px;
    margin-right: 1px;
}

.links {
	margin-top: 35px;
}

.links ul li {
	float: right;
}

.links a {
	font-size: 16px;
	margin-left: 30px;
	font-weight: bold;
	text-transform: uppercase;
	color: black;
}

.links a:hover {
	text-decoration: underline;
}

.links a.voteja {
	border-radius: 20px;
	background: #3da0d2;
	color: black;
	padding: 6px 10px;
	font-weight: bold;
}

.links a.inicio{
	
	color: black;
	border-radius: 20px;
	padding: 5px;
}

.links a.oquee{
	color: black;
}

.links a.trabalho{
	color: black;
}

/*-------------------------FIM HEADER-----------------------------*/



/*-------------------------SECTION INICIO----------------------------*/
.bg-inicio{	
	background: url('imgs/fundo-inicio.png');
    position: relative;    
    background-size: cover;
    z-index: 1;
    background-position: center top;
    background-repeat: no-repeat;    
    background-attachment: fixed;
}

.logo-liga{
	margin-top: 100px;
	margin-bottom: 60px;
}

.logo-juno{
	margin-top: 100px;
	margin-bottom: 60px;
}

.logo-juno:hover{
	-webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: 100ms cubic-bezier(0.17, 0.67, 0, 1.01);
    -o-transition: 100ms cubic-bezier(0.17, 0.67, 0, 1.01);
    transition: 150ms cubic-bezier(0.17, 0.67, 0, 0.5);
}

.vote-aqui{
	background-color: #e94239;
	padding: 10px 50px 10px 50px;
	border-radius: 10px;	
	font-family: montserrat;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 5px;
	color: white;
}

.vote-aqui:hover{
	background: white;
	color: #e94239;
	box-shadow: inset 0 0 0 3px #e94239;
	text-decoration: underline;
}

/*-------------------------FIM SECTION INICIO----------------------------*/




/*-------------------------SECTION O QUE É----------------------------*/

section.oquee{
	margin-top: 0px;	
	background-color: #e7e7e8;
}

.oquee {
	margin-top: -180px;
	padding-bottom: 20px;
}

.fala-juno-1{
	background:#67a8c9; 
	padding:15px; 
	position:relative; 
	top:20px; 
	float:left; 
	width: 100%;
	font-size: 24px;
	border-radius: 10px;
	font-weight: 700;
	margin-bottom: 80px;
}

	
.fala-juno-1:before{ 
	content:''; 
	position: absolute; 
	width:30px; 
	height: 30px; 
	left:-5px; 
	top:70px; 
	background:#67a8c9; 
	-webkit-transform:rotate(45deg); 
}

.img-juno-1{
	margin-top: 60px;
}


.img-juno-1:hover{
	transform: skewX(2deg);
}	

/*-------------------------FIM SECTION O QUE É----------------------------*/

/*-------------------------SECTION TRABALHO----------------------------*/

.trabalho {
	position: relative;
	background-color: transparent ;
}

.trabalho .fundo { 
    background: #f7bb44;
    width: 100%;
    height: 100%;
    position: absolute;
}

.fala-juno-2{
	background:#67a8c9; 
	padding:15px; 
	position:relative; 
	top:50px; 
	float:left; 
	width: 100%;
	font-size: 24px;
	border-radius: 10px;
	font-weight: 700;
	margin-bottom: 80px;
}

	
.fala-juno-2:before{ 
	content:''; 
	position: absolute; 
	width:20px; 
	height:20px; 
	left:-10px; 
	top:30px; 
	background:#67a8c9; 
	-webkit-transform:rotate(45deg); 
}

.img-juno-2{	
	margin-top: 60px;
	margin-bottom:40px;
}


.img-juno-2:hover{
	animation: bounce 1s;
}


/*-------------------------FIM SECTION TRABALHO----------------------------*/

/*-------------------------SECTION VOTACAO----------------------------*/
.fala-juno-3{
	background:#67a8c9; 
	padding:15px; 
	position:relative; 
	top:20px; 
	float:left; 
	width: 100%;
	font-size: 24px;
	border-radius: 10px;
	font-weight: 700;
	margin-bottom: 80px;
}

	
.fala-juno-3:before{ 
	content:''; 
	position: absolute; 
	width:20px; 
	height:20px; 
	right:-10px; 
	top:30px; 
	background:#67a8c9; 
	-webkit-transform:rotate(45deg); 
}

.imgjuno3:hover{
	transform: skewX(-2deg);	
}

.elementos:hover{
	transform: translateY(-15px);
}

.vote-aqui-2{
	background-color: #e94239;
	padding: 10px 50px 10px 50px;
	border-radius: 10px;	
	font-family: montserrat;
	font-weight: 600;
	font-size: 24px;
	letter-spacing: 5px;
	color: white;
}

.vote-aqui-2:hover{
	background: transparent;
	color: #e94239;
	box-shadow: inset 0 0 0 3px #e94239;
	text-decoration: underline;
}


/*-------------------------FIM SECTION VOTACAO----------------------------*/

/*-------------------------SECTION SOBRE PAG----------------------------*/

.sobrepag {
	margin-top: 70px;
	background-color: #d5d5d5;
}

.titulo-conheça-pag{
	background-color: #67a8c9;
	font-size: 24px;
	border-radius: 10px;
	font-weight: 700;
	padding: 10px;
	color: white;
	width: 50%;
	margin-bottom: 50px;
}

.imgjuno4:hover{
	animation: bounce 1s;
}

.atividades{
	margin-top: -150px;
}

.saibamais{
	background-color: #e94239;
	padding: 10px 30px 10px 30px;
	font-weight: 700;
	font-size: 24px;
	color: white;
	font-family: montserrat;
	border-radius: 20px;
	letter-spacing: 2px;
}

.saibamais:hover{
	background: #d5d5d5;
	color: #e94239;
	box-shadow: inset 0 0 0 3px #e94239;
	text-decoration: underline;
}

/*-------------------------FIM SECTION SOBRE PAG----------------------------*/

/*-------------------------SECTION CONTATO----------------------------*/

.contato{
	background: #3d5e2e ;
}

.titulo-fale{
	background-color: #67a8c9;
	font-size: 36px;
	border-radius: 10px;
	font-weight: 700;
	padding: 10px;
	z-index: 99;
	margin-bottom: 40px;
}

.titulo-fale:before{
	content:''; 
	position: absolute; 
	width:15px; 
	height:15px; 
	right:380px; 
	top:30px; 
	background:#67a8c9; 
	-webkit-transform:rotate(45deg);
}

.redes-sociais{
	margin-right: 10px;
}

.redes-sociais img:hover{
	transform: translateY(-10px);
	color: #b8d561;
}

.telefone{
	font-size: 28px;
	font-weight: 700;
	font-family: montserrat;
	color: white;
}

.telefone1{
	font-size: 25px;
	font-weight: 500;
	font-family: montserrat;
	color: white;
}

.telefone1:hover{
	color: #bacf5f;
}

#faleconosco{
	margin-top: 50px;
}

.imgjuno5:hover{
	animation: bounce 1s;
}

.redessoc{
	font-size: 28px;
    font-weight: 700;
    font-family: montserrat;
    color: white;
}


/*-------------------------FIM SECTION CONTATO----------------------------*/


/*-------------------------FOOTER----------------------------*/
.logo_ubm .simbolo {
	
    background-size: contain;
    height: 55px;
    float: left;
    width: 20%;
    color: white;
}


.logo_ubm .ubm {
    background: url(imgs/logo-pag.png) left no-repeat;
    background-size: contain;
    height: 65px;
    margin-top: 11px;    
    width: 100%;    
    color: white;
	margin-bottom: 20px;
}

.logo_ubm:hover .simbolo {
	transform: rotate(180deg);
}



footer {
	background: #fbfbfb;
	padding: 40px 0;
}

footer p {
	text-align: center;
	color: black;
	font-size: 13px;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 3px;
}

/*-------------------------FIM FOOTER----------------------------*/

.abre_menu { 
	display: none; 
}


.inicio {
	color: white ;
}

p{
	color: black;
}

p strong{
	color: black;
}

.max460 {
	width: 460px;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 40px;
}


@media (max-width: 1200px) {
	.links a { margin-left: 16px;}
	.links ul li.marcado a { margin-left: 9px; margin-right: 1px; }
	.links ul li.marcado div { width: calc(100% - 8px); }
	.atividades{margin-top:30px;}
	.titulo-conheça-pag{
		background-color: #67a8c9;
		font-size: 24px;
		border-radius: 10px;
		font-weight: 700;
		padding: 10px;
		color: white;
		width: 100%;
		margin-bottom: 50px;
	}

	.logo-pag{
		margin-left: 10%;
	}

	.saibamais{
		margin-left: 20%;
	}
}

@media (max-width: 991px) {
	.cont-menu { float: right; margin-right: 10px; margin-top: -75px; }
	.cont-menu .abre_menu{ display: block; cursor: pointer; margin-top: 15px; width: 40px; height: 30px; }
	.abre_menu span { width: 40px; height: 8px; display: block; background: #1e2027; margin-top: -15px; z-index: 99; position: absolute; -webkit-transition:all 300ms ease-in;-moz-transition:all 300ms ease-in;-o-transition:all 300ms ease-in;transition:all 300ms ease-in;}
	.abre_menu span:before { content: ''; width: 40px; height: 8px; display: block; background: #1e2027; margin-top: 10px; z-index: 99; position: absolute; right: 0px; opacity: 1; -webkit-transition:all 300ms ease-in;-moz-transition:all 300ms ease-in;-o-transition:all 300ms ease-in;transition:all 300ms ease-in;}
	.abre_menu span:after { content: ''; width: 40px; height: 8px; display: block; background: #1e2027; margin-top: 20px; z-index: 99; position: absolute; right: 0px;-webkit-transition:all 300ms ease-in;-moz-transition:all 300ms ease-in;-o-transition:all 300ms ease-in;transition:all 300ms ease-in;}
	


	header ul{ position: absolute; padding: 20px; margin-top: 10px; width: 100%; height: 100%; left: -3000px; z-index: 4; -webkit-transition:all 300ms ease-in;-moz-transition:all 300ms ease-in;-o-transition:all 300ms ease-in;transition:all 300ms ease-in;}
	header ul li { display: block; width: 100%; margin-bottom: 20px; }
	header ul.aberto{ left: 0; margin-top: -10px; }
	header .fundo { 
		opacity: 0.95; 
		background: #d4d4d4; 
		position: absolute; 
		left: -3000px; 
		top: 0; 
		z-index: 3; 
		-webkit-transition:all 300ms ease-in;-moz-transition:all 300ms ease-in;-o-transition:all 300ms ease-in;transition:all 300ms ease-in;
	}
	body.menu_aberto header .fundo { 
		width: 100%;
	    height: 100%;
	    left: 0;
	    position: fixed;
	    background: #aaa1a1;
	}
	body.menu_aberto .abre_menu span { background: transparent; box-shadow: none; }
	body.menu_aberto .abre_menu span:before { right: 0px; box-shadow: none; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); margin-top: 0px; }
	body.menu_aberto .abre_menu span:after { margin: 0px; box-shadow: none; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
	body.menu_aberto .logo_ubm { z-index: 9; }

	.logo_ubm .simbolo, .logo_ubm .ubm { background: none; }
	.logo_ubm { background: url(imgs/logo-pag.png) no-repeat left center; background-size: contain; height: 55px; margin-left: 15px; margin-top: 20px; }


	
	footer p { padding: 0 15px; }
}

@media (max-width: 767px) {
	
	.topo .chama {
	    margin-top: 15px;
	}

	.oquee {
	    padding-top: 50px;
	}
	.desktop { display: none; }
	.mobile { display: block; }

	.oquee div.espacotopo {
		margin-top: 25px;
	}

	form input.metade {
		width: 100%;
		float: none;
	}

	body, .oquee	 { 
		background: #e5e5e6;
		overflow-x: hidden;
	}



	.inicio {
		margin-top: 15px;
	}


}



@media (max-width: 420px) {
	.voteja .papel .descricao {
		font-size: 12px;
		padding: 8px 32px 8px 13px;
	}
}