/*
Theme Name:  UfrgsINF
Description:
Author:
Author URI:
Version:     1.0.0
Template:     WNGFramework
Text Domain: ufrgs-inf
*/

.botao-menu-principal {
	display: none;
}

.menu-principal, .menu-secundario {
	display: block;
}

.menu-principal-btn {
	display: none !important;
}



/* *** Site responsivo *** */
@media screen and (max-width: 767px) {
	
	.alignnone, .alignleft, .aligncenter, .alignright  {
		height: auto !important;
	}

	/* ********************************** header ********************************** */

	.btn
	{
		display: block !important;
		width: 94% !important;
		margin-right: 20px !important;
	}

	/* barra com logo ufrgs + seleçao de idioma */
	#barra-superior {
		margin-bottom: 10px !important;
	}

	#linkcontato {
		display: none !important;
	}

	#acesso-rapido {
		display: none;
	}

	#logo-ufrgs {
		margin-left: 15px !important;
	}

	#languages img {
		margin-right: 15px !important;
	}

	/* ********************************** Logo inf e barra superior ********************************** */

	#logo {
		float: none !important;
		text-align: center;
		width: 100%;
		margin-bottom: 10px !important;
	}

	#logo .attachment-size-logo-principal {
		width: 150px !important;
		height: auto !important;
	}

	/*#barra-superior.content-wrap {
		width: 100%;
	}*/

	.topo {
    	max-width: 100% !important;
    	margin-bottom: 30px !important;

	}

	/* ********************************** menu principal ********************************** */

	#parte-direita {
		height: auto !important;
		float: none !important;
	}

	header.topo nav {
		padding-bottom: 0px !important;
	}

	#parte-direita nav {
		min-height: 55px !important;
		width: 90% !important;
		background-color: #ededed !important;
		border-bottom: solid 3px #d0d0d0 !important;
		border-radius: 8px;
		display: block !important;
		padding-bottom: 6px !important;
		height: auto !important;
		margin: 0 auto;
		float: left;
		margin-left: 5% !important;

	}


	.botao-menu-principal {
		display: block;
		margin-right: 10px !important;
		margin-top: 6px !important;
		text-align: right !important;
		cursor: pointer !important;
		font-size: 25px;
		font-weight: bold;
	  	border: 1px solid #d0d0d0;
	  	padding-right: 6px;
	  	padding-left: 6px;
	  	padding-bottom: 2px;
	  	border-radius: 8px;
	  	text-align: right !important;
	  	float: right;
	}


	.menu-principal, .menu-secundario {
		margin-top: 0px !important;
		color: #d0d0d0 !important;
		float: left !important;
		margin: 0px !important;
		padding: 0px !important;


	}


	.menu-principal, .menu-secundario {
		display: none;
	}

	.menu-principal li, .menu-secundario li {
		padding: 0 !important;
		display: block !important;
		width: 100% !important;
		margin-left: 0px !important;
		border-bottom: 1px solid white !important;


	}

	.menu-secundario li:last-child, .menu-principal li:last-child  {
		border: none !important;

	}

	.menu-principal li:last-child {
		border-bottom: 1px solid white !important;
	}

	.menu-principal li a, .menu-secundario li a {
		text-align: left !important;
		color: #9a0000 !important;
		padding: 14px 25px !important;
	}

	.menu-principal li:hover, .menu-secundario li:hover {
		border-radius: 0px !important;
		background-color: #ededed !important;
	}

	/*
	.menu-principal li:after, .menu-secundario li:after {
		content: " \00A0 ►";
		color: #9a0000 !important;
		font-size: 20px;
		margin-right: 20px;
		float: right !important;
	}

	.sub-menu li:after {
		content:"";
	}

	.menu-principal li:hover:after, .menu-secundario li:hover:after {
		content: " \00A0▼";
	}*/

	.menu-principal-btn {
		display: block !important;
	}

	.menu-principal-btn {
		color: #9a0000 !important;

		margin-right: 20px;
		float: right !important;
	}

	.menu-principal-btn a {
		font-size: 30px !important;
	}

	.sub-menu li .menu-principal-btn {
		display: none !important;
	}

	.menu-principal li a:hover, .menu-secundario li a:hover {
		color: #9a0000 !important;
	}

	header.topo .sub-menu {
		border-bottom: none !important;
	}

	.menu-principal li:hover .sub-menu {
		  display: none;
	}

	.menu-secundario li:hover .sub-menu {
		  display: none;
		  /* display: none !important; */
	}

	.sub-menu {
		/*position: relative !important;*/
		color: #9a0000 !important;
	}

	.sub-menu li {
		text-align: left !important;
		background-color: #ededed !important;
		border: none !important;
		border-bottom: 1px solid white !important;

	}

	header.topo .sub-menu li a {
		color: #9a0000 !important;
		margin-left: 50px !important;
	}

	header.topo .sub-menu li a:hover {
		color: #9a0000 !important;
	}







	#searchform {
		display: none !important;
	}

	header.topo nav {
		border-bottom: none !important;
	}


	/* ********************************** body ********************************** */

	.page-wrap .content-wrap {
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}

	/* slider */
	.slider-home, .slider-news-container {
		margin-left: 5% !important;
		margin-right: 5% !important;
		width: 90% !important;
		float: none !important;
		max-width: 100% !important;
	}

	/* slider - titulo */
	.slide-title {
		height: 70px !important;
	}

	.slider-news .slide-title p {
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		height: 100%;
		padding-bottom: 5px;
	}

	/* slider - base 4 colunas */
	.slider-pager {
		width: 100% !important;
		display: none !important;
	}


	.slider-home .slide img, .slider-news-container .slide img {
	    width: 100% !important;
	    height: auto !important;
	    margin-top: 65px !important;
	    max-width: 100% !important;
	    max-height: 100% !important;
	    min-width: 0 !important;
	    min-height: 0 !important;


	}

	.slide, .cycle-slide .cycle-slide-active {
	    width: 100% !important;
	    height: auto !important;
	    /*margin-top: 65px !important;*/
	    max-width: 100% !important;
	    max-height: 100% !important;
	    min-width: 0 !important;
	    min-height: 0 !important;

	    margin-bottom: 30px !important;

	    /*margin-top: 0px !important;	*/
	}

	/* ********************************** abaixo do slider ********************************** */


	/* acesso rapido */
	.slider-utilidades {
		max-width: 100% !important;
		margin: 0 auto !important;
		float: none !important;
		display: block !important;
		margin-bottom: 30px !important;
	}

	.slider-home {
		margin-bottom: 0px !important;
	}


	.slider-utilidades ul li{
		/*margin: 0 auto !important;*/
		/*margin-top: 20px !important;*/
		/*margin-bottom: 20px !important;*/

	}

	.vsc-initialized img {
		float: right !important;
		margin-right: 10% !important;
	}



	/* noticias */
	.col-container .col-3{
		float: none !important;
		display: flex !important;
		justify-content: center !important;
		text-align: center !important;
		margin: 0 auto !important;
		max-width: 100% !important;
	}

	.col-3:last-child {
		display: block !important;
		margin: 0 auto !important;
		max-width: 100% !important;
	}

	.slider-noticias {
		float: none !important;
		margin: 0 auto !important;
		max-width: 100% !important;
		margin-bottom: 30px !important;
	}

	.custom-calendar-wrap {
		float: none !important;
		max-width: 100% !important;
		margin-top: 0px !important;
		padding-bottom: 0px !important;
		margin-bottom: 30px !important;
	}

	.custom-calendar-wrap #custom-inner {
		margin-top: 0px !important;
		margin-bottom: 30px !important;
	}

	.facebook-likebox {
		margin-bottom: 30px !important;
	}

	.melhores-faculdades {
		margin-top: 0px !important;
	}

	/* melhores faculdades */
	.melhores-faculdades a img {
		margin-bottom: 30px !important;

	}

	/* carrocel de publicacoes  */
	.slider-postagens {
		margin-top: 0px !important;
		margin-bottom: 30px !important;
	}


	.localizacao {
		margin-top: 0px !important;
		margin-bottom: 30px !important;
	}


/* ********************************** menu lateral - página interna ********************************** */

	.pagenav{
		display: none;
	}

	/* .pagenav{
		min-height: 55px !important;
		width: 90% !important;
		background-color: #EDEDED !important;
		display: block !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		height: auto !important;
		margin: 0 auto;
		float: left;
		margin-left: 5% !important;


	} */

	.pagenav li:last-child {
		border: none !important;
		padding-bottom: 0px;
	}

	.page-interna {
		min-height: 55px !important;
		width: 90% !important;
		background-color: #FFF !important;
		display: block !important;
		padding-top: 6px !important;
		padding-bottom: 6px !important;
		height: auto !important;
		margin: 0 auto;
		float: left;
		margin-left: 5% !important;

	}

	/* ********************************** notícias ********************************** */

	.noticias {
		min-height: 55px !important;
		width: 90% !important;
		background-color: #FFF !important;
		display: block !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		padding-bottom: 6px !important;
		height: auto !important;
		margin: 0 auto;
		float: left;
		margin-left: 5% !important;

	}

	.noticias img {
		max-width: 100%;
		max-height: 100%;
	}

	/* ********************************** EVENTOS ********************************** */

	.geral {
		min-height: 55px !important;
		width: 90% !important;
		background-color: #FFF !important;
		display: block !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		padding-bottom: 6px !important;
		height: auto !important;
		margin: 0 auto;
		float: left;
		margin-left: 5% !important;
	}


	/* ********************** CORPO DOCENTE E FUNCIONÁRIOS ************************ */

	.cargoDiretor
	{
		display: block !important;
	    width:100% !important;
	    float:left;
	}

	.cargoViceDiretor
	{
		margin-left: 1px;
		display: block !important;
	    width:100% !important;
	    float: left !important;
	}

	.single-docente, .single-tecnico {
		min-height: 55px !important;
		width: 96% !important;
		background-color: #FFF !important;
		display: block !important;
		padding-left: 24px !important;
		padding-right: 24px !important;
		padding-bottom: 6px !important;
		height: auto !important;
		margin: 0 auto;
		float: left;
		margin-left: 5% !important;

	}

	.single-docente button {
		display: inline-block !important;
		text-align: center !important;
		float: left;
	}

	.single-docente h2, .single-tecnico h2 {
		display: inline-block !important;
		text-align: center !important;
		float: left;
		width: 94% !important;
		margin-bottom: 4px !important;
	}

	.single-docente h5, .single-tecnico h5 {
		text-align: center !important;
		display: block !important;
		font-size: 11pt !important;
	    font-weight: normal;
	    color: #666 !important;
	    margin-top: -10px;
	    margin-bottom: 20px;
	}

	.foto-docente, .foto-tecnico {
	    min-height: 55px !important;
	    width: 100% !important;
	    background-color: #FFF !important;
	    display: inline-block !important;
		text-align: center !important;
	    padding-top: 6px !important;
	    padding-bottom: 6px !important;
	    height: auto !important;
	    margin: 0 auto;
	    float: left;
	    margin-left: 5% !important;

	}

	.dados-docente, .dados-tecnico {
	    min-height: 55px !important;
	    width: 90% !important;
	    background-color: #FFF !important;
	    display: block !important;
	    padding-top: 6px !important;
	    padding-bottom: 6px !important;
	    height: auto !important;
	    margin: 0 auto;
	    float: left;
	    margin-left: 5% !important;

	}

	.single-tecnico button {
		display: inline-block !important;
		text-align: center !important;
		float: left !important;
	}



	/* ********************************** footer ********************************** */

	footer {
		/*display: none !important;*/
	}

	.menu-rodape {
		display: none !important;
		width: 100% !important;
	}

	.sitemap {
		position: relative !important;
		width: 100% !important;
	}

	footer #site-description {
		width: 100% !important;
		position: relative !important;
	}

	footer .content-wrap {
		width: 100% !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}

	footer #copyrights {
		text-align: center !important;
		width: 100% !important;
		margin: 0 auto !important;
	}

	#voltar-topo {
		display: none !important;
	}
	
		/* ******************** TABELA DE PROTOCOLOS E INTERCÂMBIOS ATIVOS ******************** */
		/* serve tanto para a tabela em inglês quanto a em português * /
	
		/* Force table to not be like tables anymore */
		#protocolos-intercambios table, thead, tbody, th, td, tr {
			display: block !important;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#protocolos-intercambios thead tr {
			position: absolute !important;
			top: -9999px !important;
			left: -9999px !important;
		}

		#protocolos-intercambios tr {
			margin: 0 0 1rem 0 !important;
			height: 100% !important;
		}
		  
		/*#protocolos-intercambios tr:nth-child(odd) {
			background: #ccc !important;
		}*/
		
		#protocolos-intercambios td {
			/* Behave  like a "row" */
			border: none !important;
			border-bottom: 1px solid #eee !important;
			position: relative !important;
			padding-left: 50% !important;
			height: 100% !important;
			text-align: right;
			padding-right: 20px !important;
		}

		#protocolos-intercambios td:before {
			/* Now like a table header */
			position: absolute !important;
			/* Top/left values mimic padding */
			/*top: 0 !important;*/
			left: 6px !important;
			width: 45% !important;
			padding-left: 20px !important;
			white-space: nowrap !important;
			text-align: left;
		}
		
		/*
		Label the data.
		You could also use a data-* attribute and content for this. 
		That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. 
		Lea Verou has a clever way to handle with text-shadow.
		*/
		#protocolos-intercambios td:nth-of-type(1):before { 
			content: attr(data-label1);
			font-weight: bold;
		}
		#protocolos-intercambios td:nth-of-type(2):before { 
			content: attr(data-label2);
			font-weight: bold;			
		}
		#protocolos-intercambios td:nth-of-type(3):before { 
			content: attr(data-label3);
			font-weight: bold;
		}
		#protocolos-intercambios td:nth-of-type(4):before { 
			content: attr(data-label4);
			font-weight: bold;
		}
		#protocolos-intercambios td:nth-of-type(5):before { 
			content: attr(data-label5);
			font-weight: bold;
		}
		#protocolos-intercambios td:nth-of-type(6):before { 
			content: attr(data-label6);
			font-weight: bold;
		}
		/*
		Label the data.
		You could also use a data-* attribute and content for this. 
		That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. 
		Lea Verou has a clever way to handle with text-shadow.
		*/
		/* Referências:
			https://codepen.io/team/css-tricks/pen/wXgJww
			https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_id
			https://css-tricks.com/a-complete-guide-to-data-attributes/
			https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Howto/Use_data_attributes
		*/


}
/* *** fim estilos - Site responsivo *** */