@import url("reset.css");
@charset "utf-8";

body {
    font-size: 100%;
    line-height: 1.5;
	font-family: 'Dosis', sans-serif;
    color: #444;
}  
     
*, *:before, *:after {
     box-sizing: border-box;
}
a:link, a:hover, a:active, a:visited {
	outline:none;
}
a {   
    color: rgb(32, 111, 124); 
    text-decoration: none;
	outline:none;
}
a:hover {
    text-decoration: underline;
	outline: none;
}

iframe, img, video, embed {
    max-width: 100%;
}	
figure img {
	width:100%;
	margin: 0 auto;
	vertical-align: top;
}
img {
	width: 100%;
	object-fit: cover;
	object-position: center;
}

/* ********************** Estilo GERAL ********************* */

body {
	background:rgb(240,240,240);   
}
.header {
    width: 100%;
    height: 100%;
	position: fixed;
	z-index: 6;
	background-color: transparent; 
    display: inline-block;	
}

.barratopo {
    background-color: rgba(150,50,50,.9); 
	width:100%;
    height: 0px;  /* 88px  */
	text-align:center;
	position: fixed;
	top: 50px;
    z-index: 5;
	border-top: 3px solid rgb(165,5,50); 
}

.post {
	text-align: right; 
}
section.cursos {
	box-sizing: border-box;
	width: 100%;
	margin-right: 5px;
}	
.eventos {
	padding-top: 20px;
	background-color: rgba(87,172,172,.05);
    border-top:	rgba(87,172,172,.1) solid 1.2px;
}
.eventos:hover {
	border-bottom: solid orange 1.5px;
	transition: background-color .5s;
	-moz-transition: background-color .5s;
	-webkit-transition: background-color .5s;
	transition: background-color .5s;
}
.eventos figure {
	width: 80%;	
	margin: 0 auto;
	margin-bottom: 10px;
}
.noticias a:before {
	content: url('../img/seta2.gif');   
	margin-right: 10px;
}

.eventos a:before {
	content: "";
}
#manchete {
	margin-top: 50px;
	background: orange;
}
#manchete a:before, #manchete a:after {
	content: "";
}
.destaques .barra_mais, .cursos .barra_mais {
	background-color: #555; 
	border-radius: 7px;
	text-align: center;
    margin: 10px auto;
	width: 100%;
}
.destaques .barra_mais {
    margin: 30px auto;
}
.navega .barra_mais {
    background-color: #aaa; 
}
.destaques .barra_mais a {
	color: #ddd;
	font-size: .6em;
	padding-bottom: 10px;
	font-variant: small-caps;
	text-decoration: none;
	outline: none;
}
.destaques .barra_mais a:hover, .cursos .barra_mais a:hover {
	color: #fff;
	border-radius: 7px;
	transition: background-color .1s;
	-moz-transition: background-color .1s;
	-webkit-transition: background-color .1s;
	transition: background-color .1s;
	outline: none;
}
.navega {
	text-align: center;
	}
.cursos .barra_mais {
	width: 5%; 
	margin-bottom: 40px;
	display: inline-block;
	border-radius: 9%;
}
.cursos .barra_mais:first-child {
	float: left;
	margin-left: 43%;
}
.cursos .barra_mais:last-child {
	float: right;
	margin-right: 45%;
}
.navega .barra_mais a:hover, .cursos .barra_mais a:hover {
	border-radius: 9%;
	background-color: rgba(87,172,172,.2);
	transition: background-color .1s;
	-moz-transition: background-color .1s;
	-webkit-transition: background-color .1s;
	transition: background-color .1s;
	outline: none;
}
.cursos .barra_mais a {
	display: block;
	text-decoration: none;
	outline: none;
}
.nossos_cursos {
	font-size: 2rem;       /*  Texto introdutório dos Cursos */
	text-align: center;
	text-indent: 1em;
	margin: 0 2%;
}
.nossos_cursos strong {
	font-weight: bold;
}
.reg_cursos a {
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	display: inline-block;
	width: 87%;
	margin-bottom: 40px;
	text-decoration: none;
	margin-left: 5.5%;
	color: #222;
	background-color: #f7f7f7; 
	border-radius: 5px;
}

.reg_cursos a:hover {
	color: orange;
}
 p a:visited {
	outline: none;
	background: red;
}
 h4 a span.mais {
	color:orange;
	display: inline;
	font-size: 2em;
	font-style: normal;
}
.coluna:hover {
	background-color: #eee; 
	transition: background-color .5s;
	-moz-transition: background-color .5s;
	-webkit-transition: background-color .5s;
	 transition: background-color .5s;	 
}
.slides .mySlides {
	display: block;
	width: 100%;
    text-align: center;
}
.mySlides .figsldw {
	display: inline-block;
	width: 45%;
	vertical-align: top;	
	background: #fff;
}	
.menu3 {
	line-height: 1.1;
	padding-bottom: 20px;
	margin-left: .5em;
	text-align: left;
}
.menu3 li a {
	color: rgb(32, 111, 124); /* #1f5959;    /* verde escuro */
    line-height: 1.3;
	font-size: .75em;
	margin-bottom: 20px;
} 
.menu3 li a:hover {
	text-decoration:none;
	background-color: rgba(87,172,172,.2);           
} 
.menu3 a:before {
		content: url('../img/seta2.gif');
		margin-right: 10px;
	}   
.destaques .bold {
	margin-top:30px;
	margin-bottom:7px;
	font-weight: bold;
	color: rgb(32, 111, 124); 
}
.destaques .diretoria {
	text-align:center;
	font-size: .5em;
	padding-bottom: 10px;
	color: #555;
	font-style: normal;
}
.dir:first-child{
	float:left; 
}
.dir p:last-child {
	padding-bottom: 50px;
}
.dir .font_figcaption figcaption {
	font-size: 1.1rem;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 30px;
}
.dir .font_figcaption {
	padding-top: 30px;
}
.logos {
	width: 100%;
	text-align: center;
}
.logos figure  {
	display: inline-block; 
	width: 25%;
}
.footer {
    width: 100%;
	height: 400px;
    clear: both;
	border-top: 2px solid rgb(165,5,50); 
	background-color:#fff;
}
.footer div.copy {
	width: 100%;
	font-size: 1.3em;
	color: #555;    
	text-align:center;
    clear: both;
    padding-top: 30px;
}
#fig1 {
    display: block;
    width: 100%;
    background-color: rgb(70,70,70);
    text-align: center;
}
#fig2 {
    display: block;
    width: 100%; 
    max-width: 370px;
    margin: 0 auto;
}
#fig1 img {
     width: 40%; 
     max-width: 250px;
	 padding-top:20px;
     padding-bottom:20px;
     margin: 0 auto;
}
 #fig2 img {
     width: 100%; 
	 padding:5%;
     margin: 0 auto;
}
.barracinza {
    background-color: rgb(70,70,70);
    width: 100;
    clear:both;
    color: lightgray;
    text-align: center;
    height: 50px;
    font-size: 1.2em;
}
.barracinza p {
    padding-top: 15px;
}

h2, h3, h4 {
    font-weight: bold;
}
h2  {
    font-size: 3.3em; 
	height: 50px;
}
h3  {
	color: rgb(32, 111, 124); 
}
h3.jornal{
	margin-top: 50px;
	color: rgb(5, 105, 145);  /* rgb(4, 83, 114); azul escuro */  
}
h3.margem {
	margin-bottom: 40px;
}
.dir h3:first-child {
 padding-top: 20px;
}
h5  {
    font-size: .7em;
}
p {
    font-size: .8em;
	margin-bottom: 10px;
}
b {
	font-weight: bold;
}
hr {
	background-color: orange; 
	height: 2px;
	border: none;
	margin-top: 20px;
	margin-bottom: 20px;
}
hr.cinza {
	background-color: rgba(50,50,50,.1); 
}
.local {
	width:100%;
}
.local .mapa {
	width:100%;
}
.mapa iframe {
	width:100%;
	margin: 0 auto;
}

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
	
/*  ********************************* RESPONSIVO **********************************  */
 
 /* ================== Dispositivos a partir de 280px de largura ==================  */	   
 @media screen and (min-width: 0px) { 
    
	/* ************************ MENU 1 ************************* */
     
	.header {
		background-color: #a80532;  /* rgb(168, 5, 50) */
        height: 50px;
        width: 100%;
	}
	header nav.menu1 {
		width: 50%;
		height: 100%;
		float: left;
		padding-top: 5px;
	}
	header div.social {
		width: 50%;
		height: 100%;
		float: right;
	}	
    div.social ul#icones {
        width: 100%;
		height: 100%;
     }
     
 /* *** INCLUSÃO DE MíDIAS SOCIAIS *** */
     
	div.social ul#icones li {  /* Icones de midias sociais = 4, o numero pode ser aumentado... */
		width: calc(100% / 4);
        float: right; 
		padding: 8px;
	}   
	ul#icones li figure.midias { 
        padding-top: 8px;
	}
    figure.midias a img { 
        width: 1.5em;
		vertical-align: middle; 
	}  
	.menu1 .menu_icon {
		box-sizing: border-box;
		color: #fff;
		font-size: 1.2em;
        display: block;
		padding-top: 12px;			
	}
	 /* *** MENU1 *** Tempo de transicao da altura para 1.9em quando menu perder o 'foco': 1 segundo */
	.menu1 {
		padding-left: 2%;
		font: bold 100%/1.4 sans-serif; 
		overflow: hidden;
		height: 1.9em; 
		-webkit-transition: height 1s;
		-moz-transition: height 1s; 
		-o-transition: height 1s; 
		-ms-transition: height 1s; 
		transition: height 1s;
		width: 100%;
		background-color: #a80532;
	}
    .menu1 li a {
		color: #ccc; 
		font-size: .9em;		
	}
    /*  Tempo de transicao de aumento da altura (12em) quando menu receber o 'foco': 1 segundos */
	.menu1:hover, .menu1:focus, .menu1:active {
		height: 12em; 
		-webkit-transition: height 1s; 
		-moz-transition: height 1s; 
		-o-transition: height 1s; 
		-ms-transition: height 1s; 
		transition: height 1s;
	}
	.menu1 li{
	    padding-top: 2px;
		display: block;
	}
    
    /* CONFIGURACAO DAS IMAGENS DO BANNER */ 
	.banner #imgban {
		width: 100%;
		height: 500px;
		object-fit: cover;
		object-position: center;
	}
     
  
    /* CONFIGURACAO DA IMAGEM DO LOGO FATEC-SP */  
     
     #divlogo {
        height: 55px;	
        text-align:left;  
        box-sizing: border-box; 
        background-color: rgba(50,50,50,.9);
        margin: auto; 
        padding-top: 0; 
     }  
     #divlogo figure.figlog {
        height: 100%;	
		width: 100px;
        display: inline-block;
        box-sizing: border-box; 
        margin-left: 10px;
        padding-top: 10px; 
        margin-bottom: 10px; 
        float:left; 
     }
      
    .figlog img {
        height: 100%;
        max-width: 95px;
     }
     
     #divlogo a#nome_fatec {
        color: #fff;
        font-family: 'Roboto', sans-serif;
        font-size: 14.5px;
        display: inline-block;
        box-sizing: border-box; 
        line-height: 100%; 
     }
     a#nome_fatec span {
        max-width: 90px;
        display: inline-block;
        padding-top: 7px; 
     }
     #botao_destaques a {
        background-color: #333;
        color:gold;
        font-weight: 600;
        font-style: italic;
        border-radius: 3px;
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        padding-top: 3px; 
        padding-left: 8px;
        padding-right: 0;
        padding-bottom: 2px;
        float: right;
        margin-top:12px;
        margin-right: 14px;
        box-shadow: 2px 1.5px gold;
        width: 98px;
        border: #777 solid 1px;
        position: relative;
        z-index: 99999999;
     }
     #divlogo a:hover {
        text-decoration: none;
     }
     
/* *** MENSAGENS NO BANNER - Configuracao dos blocos, animacao e fontes ***  */
     
     .banner .missao {          /* Bloco de exibicao dos NOMES DOS CURSOS... */
		position:relative; 
		z-index: 0;
        margin-top: -6px; 
		text-align: center;
        font-style:italic;
        background-color: #aaa;  
     }
    .missao #propaganda {       
        color:#333;
        text-shadow: 1px 1px #ccc;
        font-weight: bold;
        font-size: 1.5em;
	} 
   
    .banner .missao2 {      	/* Mensagens do BLOCO BRANCO */
		position:absolute;
		z-index: 2;
		top: 137px;
        right: 0px;
		display: block;
		margin: 0 auto;
        padding: 5px 10px 15px 20px;
		text-align: center; 
        background-color: rgba(255,255,255,.6); 
        border: 1.6px orange solid;
        border-bottom-left-radius: 45%;
        -webkit-animation-name: anima02; 
        -webkit-animation-duration: 7s;
        -webkit-animation-delay: 2s;
        -webkit-animation-iteration-count: infinite; 
        animation-name: anima02;
        animation-duration: 7s;
        animation-delay: 2s;
        animation-iteration-count: infinite; 
     }
     @-webkit-keyframes anima02 {
          0%   {right:1px; top: 137px; }  
          75%   {right:1px; top: 137px; }
          80%   {right:1px; top: 137px; }
          95%   {right:1px; top: 137px; }
          100% {background-color:rgba(255,255,255,.7); right:-1px; top: 137px;}
     }
     @keyframes anima02 {
          0%   {right:1px; top: 137px; }  
          75%   {right:1px; top: 137px; }
          80%   {right:1px; top: 137px; }
          95%   {right:1px; top: 137px; }
          100% {background-color:rgba(255,255,255,.7); right:1px; top: 137px;}
     }
    .missao2 #propaganda2 {    
		font-size: 1.6em; 
        font-weight: bold;
	}   
     
    .banner .missao3 {          /* Mensagem do BLOCO VERMELHO  */
		position:absolute;
		z-index: 3;
		top: 325px;
        left: 0px;
		display: block;
		margin: 0 auto;
        padding: 0px 10px 5px 20px;
        border: 1.5px #a00 solid;
		text-align: center;
        
        background-color: rgba(170,0,0,.4);  
        border-top-right-radius: 55px;
        border-bottom-left-radius: 55px;
        -webkit-animation-name: anima03; 
        -webkit-animation-duration: 4s; 
        -webkit-animation-delay: -2s;
        animation-name: anima03;
        animation-duration: 4s;
        animation-delay: -2s;
     }
     @-webkit-keyframes anima03 {
          0%   {background-color:rgba(170,0,0,.75); left:0px; top:350px;}
          50%  {background-color:transparent; left:0px; top:490px; border: none;}
          100% {background-color:rgba(170,0,0,.75); left:0px; top:350px; border: none;}
     }
     @keyframes anima03 {
          0%   {background-color:rgba(170,0,0,.75); left:0px; top:350px;}
          50%  {background-color:transparent; left:0px; top:490px; border: none;}
          100% {background-color:rgba(170,0,0,.75); left:0px; top:350px; border: none;}
     }
    .missao3 #propaganda3 {      
		color: #fff; 
        font-size: 1.6em;
	}
    .banner a.prop {            /* TODOS OS BLOCOS (Nomes dos Cursos, Botao Mais, bloco Branco e bloco Vermelho) */
		text-decoration: none;
	}  
    
    /* ************************ 280px - MENU 2 ********************    */ 
     
	.barratopo .menu2 {
		text-align: right;
		width: 100%;	
	}
	.menu2 .menu_icon {
		box-sizing: border-box;
		color: orange;
		font-size: 1.2em;
        display: block;	
		background-color: #333; 	
		padding-right: 3%;
	}
	.menu2 {
		font:  100%/1.6 sans-serif; 
		overflow: hidden;
		height: 1.7em;
		-webkit-transition: height 1s;
		-moz-transition: height 1s; 
		-o-transition: height 1s; 
		-ms-transition: height 1s; 
		transition: height 1s;
		width: 100%;
		background-color: #333;
	}
	.menu2:hover, .menu2:focus, .menu2:active {
		height: 20em; /* 18.5em */
		-webkit-transition: height 1s; 
		-moz-transition: height 1s; 
		-o-transition: height 1s; 
		-ms-transition: height 1s; 
		transition: height 1s;
	}
	.menu2 li:hover, .menu2 a:hover {
		text-decoration: none;
		 background-color:#222; 
	}	
	.menu2 li {
		display: block;
		padding-right: 5%;
	}
	.menu2 li a {
		color: #fff;
		font-size: .95em;
		padding-bottom:5px;
		display: block;
		font-variant: small-caps;
		outline: none;		
	}
	.menu2 .submenu {
		background-color: #222; /* rgba(100,0,0,1); */ 
		position: absolute;
		overflow: auto;
		display: none;
		top: 30px;
		width: 150px;
	}
	.menu2 li:hover .submenu, .menu li.over .submenu {
		display:block;
		box-sizing: border-box;
        min-height: 210px; 
       	padding-left: 2%;
	}
	.submenu li{
		display: block;
		text-align: left;
		padding-left: 5px;
		padding-right: 18px;
		padding-top: 5px;
		padding-bottom: 5px;
		line-height: 1.4em;
		font-size: .9em;
	}
	.submenu li:hover, .submenu a:hover {
		text-decoration: underline;
		
		/* background-color: rgb(165,5,50);  #a80532;  vermelho */
	}
    .idestaques {
         color:#57acac;
     }
    /*   ********************* CORPO DA PAGINA 280px ***************** */
   .container {
		background-color:rgb(252,252,252);
		min-width: 280px;
		max-width: 1280px;
		margin: 0 auto;
		margin-bottom:70px;
		margin-top:25px;
	}
     #divlogo {
        
     } 
	.principal {
		 margin-top:20px;
	}
	.cor_cursos {
		background-color:#bbb; 
	}
	.cor_info {
		background-color:#e9e9e9; 
	}
    .barra {
		background-color: rgb(165,5,50);  
		/* #a80532;    #6b2929;   vermelho - rgb(165,5,50) */
		height: 50px;
		margin-bottom: .5em;
		padding-top: 5px;
		text-align:center;
		color:#fff;
		clear:both;
		font-size:.5em;
		position: relative;
		top: -45px;
	}
	
	.destaques {
		width:100%;
		min-width: 280px;
		margin: 0 auto;
		padding: 0 1.5em;
		font-size:1.5em;
		text-align: left;
		display: block;
	}
	.destaques .art {
		margin-top:.5em; 
		padding-bottom:.3em; 
		color:#333;
        text-align: justify;
		border-bottom: 1px rgba(87,172,172,.2) solid;  /* verde */
	}
	.destaques a {
		font-size:.7em;
		display: block;
	}.destaques .titulo {
		font-size:1.8em;
	}
	.destaques a:hover {
		text-decoration:none;
		color:#555;
		background-color: rgba(87,172,172,.05);
	}
	.destaques h3 {
		font-weight:bold;
		text-align: center;
		font-size: 1em;
	}
	.destaques span {
		font-size:.65em;
		/* font-style:italic; */
		display:inline-block;
		width: 100%;
		color: rgb(4, 83, 114) /* rgba(87,172,172,.7);  - verde */
	}
    .noticias h4, .sec_cursos h4  {
		color: #1f5959;    /* verde claro #57acac;  */ 
		line-height: 25px;
		font-size: 1.1em;
		margin-bottom: 5px;
		text-align: left;
	}
	h3.destaque_princ {
		color: #fff;   /*rgb(42, 105, 183); azul claro */
		font-size: 1.7em;
		margin:10px 0;
	}
	h3.destaque_princ1 {
		font-size: 1.5em;
		margin-top:20px;
		padding-bottom: 10px;
	}
	.figsldw figcaption:before {
		content: url('../img/seta2.gif');
		margin-right: 10px;
	}
	 .coluna {
		width: 80%;
		height: 160px;
		margin:0 auto; 
		margin-bottom: .9em;
		display: block;
	}
	.coluna figcaption {
		padding: 0 .5em;
		font-size: 1.0em;
		font-weight: bold;
		color: #555;
		line-height: 120%;
	}
	.coluna figcaption:hover {
		color: #000;	
	}
	.coluna a {
		text-decoration: none;
		display: block;
		height: 100%;
	}
	.coluna:hover {
		 background-color: rgba(87,172,172,.3);   /* orange;	*/
		 transition: background-color .3s;
		-moz-transition: background-color .3s;
		-webkit-transition: background-color .3s;
		 transition: background-color .3s;
	}
	.container .local {
		padding-left:5%;
		padding-right:5%;
	}
	.dir h4.diretoria em {
		font-size: 1.5em;
	} 
	
	.cursos .barra_mais:first-child {
		margin-left: 33.5%;
		width: 51px;
	}
	.cursos .barra_mais:last-child {
		margin-right: 33.5%;
		width: 51px;
	}
 }	
 
/* ================== Dispositivos a partir de 400px de Largura ===================  */	
 
 @media screen and (min-width: 400px) { 
	.banner #imgban {	
		height: 550px;
	}
	.coluna {	
		height: 180px;	
	}
	.coluna figcaption {	
		padding-top: 10px;	
	}
	.nossos_cursos strong {
		font-size: .95em;
	}
	.nossos_cursos small {
		font-size: .75em;
	}
	.footer {
	height: 155px;
    }
}

/* ================== Dispositivos a partir de 412px de largura ==================  */	 
 
  @media screen and (min-width: 412px) { 
  
	.banner #imgban {	
		height: 570px;
	}    
 }
 
 /* ================== Dispositivos a partir de 450px de largura ==================  */	 
 
  @media screen and (min-width: 450px) { 
		
    .mySlides .coluna {	
		height: 150px;	
		vertical-align:middle;
	}
	
 }
 
 /* ================== Dispositivos a partir de 520px de largura ==================  */	  
 
 @media screen and (min-width: 520px) { 
	 
	.footer {
		height: 130px;
	}
 }


/* ================== Dispositivos a partir de 600px de largura ==================  */	


 @media screen and (min-width: 600px) { 
     
    
     
     
	.barra {
        width: 80%;
        margin: 0 auto;
        top: -40px;
       /* background-color: aqua; */
	} 
	.info {
		padding-top: 30px;
	}
	.mySlides .figsldw {	/* Imagens dos cursos */
		width: 35%;
		margin-right: 4%;	
	}
	.mySlides .figsldw:nth-child(even) {		
		margin-right: 0;		
	}
	
 }
 
 /* ================== Dispositivos a partir de 730px de largura ==================  */	
 
 @media screen and (min-width: 670px) { 
	
	.footer div.copy {
	    font-size: 1.5em;
    }
     
 }
 
 /* ================ Dispositivos a partir de  760px de largura ===================  */	

 @media screen and (min-width: 760px) { 
 
    /* ******************* Menu 1 inline (760px) ******************** */
	.container .destaques {
		padding-left: 10%;
	}
	.container .dir {
		padding-right: 9.8%;
	}
	.menu1 .menu_icon {	
		display: none;			
	}
	.menu1 {
		height: 2em; 	
	}
	.menu1:hover, .menu1:focus, .menu1:active {
		height: 2em; 
	}
	.header .menu1 {
		width: 65%;
	}
	.header .social  { 
		width: 35%;
		float: left;
	}
    .header .social li { 
		text-align: right;
	} 
	.header .menu1 ul {
		float: right;
	}
	.header .menu1 li { 
		margin-right: 1em;
		margin-top: .8em;
		display: inline-block;
	}
	.header .menu1 li a {
		font-size: .8em;
		font-variant: small-caps;
	}
	.header .menu1 li a:hover {
		color: #000; 
		text-decoration:none;
	}
	.menu1 .links_1 {
		width: 90%;	
		padding-bottom: 10px;
		text-align: right;
	}
	.menu1 {	
		height: 50px; 
   	}
	.menu1:hover, .menu1 li:hover, .menu1 li a:hover {
	    height: 50px; 
		-webkit-transition: height 0s;
		-moz-transition: height 0s; 
		-o-transition: height 0s; 
		-ms-transition: height 0s; 
		transition: height 0s;
	}
	.destaques h4 {
		font-size: 135%;
	}
	.destaques p {
		font-size: 85%;
	}
	.barra {
		height: 60px;
	}
	.mySlides .figsldw {	/* Imagens dos cursos */
		width: 40%;	
	}

	.figsldw a figcaption {
		font-size: 120%;
		font-weight: bold;
	}
	.coluna:hover {	
	    background-color: #eee; 	
		/*	background-color: rgba(87,172,172,.3);   /* background-color: rgba(255,165,0,.4);*/
	}
	.info {
		margin-left: 2%;
		padding-bottom: 40px;
	}
	
	.eventos figure {
		width: 60%;	
	}
	.barra_mais {
		margin-bottom: 50px;
	}
	.coluna:hover {	
	    background-color: #eee;
		/*	background-color: rgba(87,172,172,.3);   /* background-color: rgba(255,165,0,.4);*/
	}
	.cursos .barra_mais:first-child {
		margin-left: 40%;
	}
	.cursos .barra_mais:last-child {
		margin-right: 40%;
	}
	.container {
		margin-top: 40px;	
		margin-bottom: 70px;
	}	
	.b_destq {
		margin-top: -20px;	
	}
	._dir, b_local {
		margin-top: -10px;	
	}
	.b_cursos {
		margin-top: -5px;	
	}
	.barra {
		 top: -30px;
	}
} 

/* =============== Dispositivos a partir de 800px de largura ==================  */	
 
 @media screen and (min-width: 800px) { 
 
	.coluna:hover {
		background-color: #eee;
		/* background-color: rgba(87,172,172,.3);   */
	}
	.destaques {
		width: 45%;
		display: inline-block;
		vertical-align: top;
	}
	.dir:first-child{
		margin-right:5%; 
	}
	
 }
 
/* ================ Dispositivos a partir de 970px de largura =================  */	
 
 @media screen and (min-width: 970px) { 
 
	/* ****** Menu 2 -> INLINE   970px ****** */
		
	.menu2 .menu_icon {	               /* Menu2 horizontal - segunda linha  */
		display: none;	
	}
	.menu2, .menu2:hover  {                   
		height: 1.7em;
		transition: height 0s;
		-moz-transition: height 0s;
		-webkit-transition: height 0s;
		 transition: height 0s;
	}
	.menu2 .links_2 {
		width: 85%;
		height: 1.7em;
		border: 0;
		margin: 0 auto;
		text-align: center;
	}
	.menu2 .links_2 li {                       
		display: inline-block;              
		padding-right: 1%;
		text-align: left;
		width: auto;
	}
	.menu2 .links_2 li a {
		padding-left: 0%; 
		font-size: .9em;
	}
	.menu2 .links_2 li:last-child {
		padding-right: 0;
	}
	.menu2:hover, .menu2:focus, .menu2:active {
		height: auto;                       /* height: auto - cancela painel deslizante */  
	}
	/* ****** submenus do Menu2 (colunas verticais) ******* */
	.menu2 .submenu {                       
		top: 0px;
		background-color: transparent;
	}
	.menu2 .submenu li {                    
		background-color: rgb(0,0,0);
	}
	.menu2 li:hover, .menu2 a:hover {
		text-decoration: none;
		background-color: rgba(70,70,70,1); 
        /* border-left: solid 1.2px rgb(150,0,0); */	
	}	
	.menu2 .submenu {
		display: none;
		margin-top: 1.6em;
		width: 9.1em;
	}
	.menu2 li:hover .submenu, .menu li.over .submenu {	
		box-sizing: border-box;
		border-left: none;
		padding-left: 0;   	
	}
	.menu2 li:hover .submenu li, .menu li.over .submenu li {
		display: block;
		width: auto;
		padding-left: 5px;
	}
	.submenu li:hover, .submenu a:hover {
		text-decoration: none;
		overflow: hidden;
		background-color: rgb(165,5,50); /* #a80532;  vermelho */ 
	} 
	
 }
 
 /* ================ Dispositivos a partir de 1024px de largura ===============  */	
 
 @media screen and (min-width: 1024px) { 
	
     
	.footer {
		height: 155px;
	}
	.banner .missao { 	
		top: 10%;
    } 		
	.barra {
		height: 80px;
		padding-top: 20px;
	}
	.container .destaques {
		padding-bottom: 50px;
		padding-left: 10%;
	}
	.container .principal {
		margin-top: 2%;
	}
	.container .dir {
		padding-right: 5%;
	}
	.eventos figure {
		width: 80%;	
	}
	.mySlides .figsldw {	
		width: 20%;	
        margin-right: 2%;		
		/* background: #fff; */
		/ border: 2.5px solid #eee;  */
		/* box-shadow: 1px 1px 2px #777; */
	}
	.mySlides .figsldw:nth-child(even) {		
		margin-right: 2%;		
	}
	.mySlides .coluna {	
		height: 220px;	
	}
	.coluna:hover {
		background-color:#eee;
		/* background-color: rgba(87,172,172,.3);   */
	}
	.cursos .barra_mais:first-child {
		margin-left: 43.5%;
	}
	.cursos .barra_mais:last-child {
		margin-right: 45.5%;
	}
	.container {
		margin-bottom: 100px;
	}	
	
 }
 
  /* =============== Dispositivos a partir de 1198px de largura ===============  */	
  
 @media screen and (min-width: 1198px) { 
	
	.mySlides .coluna {	
		height: 175px;	
	}
 }
 
  /* =============== Dispositivos a partir de 1280px de largura ===============  */	
  
 @media screen and (min-width: 1280px) {    
	
     
    .container {
		margin-bottom: 100px;
	} 
	body {
		font-size: .9em;
	}
	.header div.social { 
		width: 25%;	
	} 
	.menu2 .links_2 li a {
		font-size: .95em;
		font-weight: normal;
	}
	.menu2, .menu2:hover {
		height: 2em;
	}
	.links_2 .submenu {
		padding-top: 5px;
	}
	.banner #imgban {	
		height: 620px;
	}
	.banner .missao { 	
		top: 15%;
    } 
	.destaques a {
		font-size: .65em;
		line-height: 160%;
	}
	.destaques {
		padding-left: 5%;
	}
	hr {
		margin-top: 5%;
		margin-bottom: 5%;
	}
	.mySlides .coluna {
		height: 260px;
	}
	.coluna a {
		font-size: 1.3em;
	}
	.destaques .diretoria {
		font-size: .65em;
		padding-top: 30px;
    }
	.container .fone {
		margin-left: 8%;
	}
	.container .menu3 {
		margin-left: 15%;
	}
	.cursos .barra_mais:first-child {
		margin-left: 44%;
	}
	.cursos .barra_mais:last-child {
		margin-right: 46%;
	}
 }

 /* ================ Dispositivos a partir de 1400px de largura ===============  */	
 
@media screen and (min-width: 1400px) { 

	.banner #imgban {	
		height: 660px;
	}
    .header div.social { 
		width: 22%;	
	}
	.mySlides .coluna {
		height: 350px;
	}
	.mySlides .coluna {	
		height: 230px;	
	}
		
}

 /* ================ Dispositivos a partir de 1900px de largura ===============  */	
 
@media screen and (min-width: 1900px) { 

	body {
	  	font-size: 1rem; 
	}
	.menu1 .links_1 {
		width: 90%;	
		padding-bottom: 10px;
		text-align: right;
	}
	.header .menu1 li a {
		
	}
	.banner #imgban {	
		height: 760px;
	}
    
	.mySlides .coluna {	
		height: 255px;	
	}
	.coluna .sldw {
		height: 75%;
	}
	.eventos figure {
		width: 60%;	
	}
	.footer {
	height: 180px;
    }
	
}