@CHARSET "ISO-8859-1";


.backgroundSPC {
	float:left;
	background: url("/spc-web/javax.faces.resource/bg_gradient_top.png.jsf?ln=gfx") #F4F4EF;
	background-repeat: repeat-x, repeat-y;
	background-position: bottom center;
	font-size: 0.75em;
}

.ql-size-10px {
    font-size: 10px;
}
.ql-size-12px {
    font-size: 12px;
}
.ql-size-14px {
    font-size: 14px;
}
.ql-size-16px {
    font-size: 16px;
}
.ql-size-18px {
    font-size: 18px;
}
.ql-size-20px {
    font-size: 20px;
}
.ql-size-24px {
    font-size: 24px;
}
.ql-size-28px {
    font-size: 28px;
}
.ql-size-32px {
    font-size: 32px;
}
.ql-size-36px {
    font-size: 36px;
}
.ql-size-40px {
    font-size: 40px;
}
.ql-size-44px {
    font-size: 44px;
}
.ql-size-48px {
    font-size: 48px;
}
.ql-size-52px {
    font-size: 52px;
}
.ql-size-56px {
    font-size: 56px;
}
.ql-size-60px {
    font-size: 60px;
}


.layout_geral {
	min-height: 600px !important; 
	box-shadow: 1px 0px 11px 0px #ABABAB !important;
	min-width: 750px !important;
	width: 75%;
	background:#FFF;
	/*background: url("/spc-web/javax.faces.resource/bgTopo.jpg.jsf?ln=gfx") 101% 0px no-repeat white;*/
	padding-top: 10px;
	padding-bottom: 50px;
	position: relative;
}

.horizontal_menu {
	width: 100%;
	float: left;
	background-color:#FFF;
}

.layout_header {
	margin-top: 10px;
	padding-bottom: 3px;
	margin-top: 10px !important;
	margin-bottom: 10px !important;
	width: 75% !important;
	min-width: 750px !important;
	border-bottom: 1px solid #BCBCBC !important;
}

.layout_header_dados {
	width: 50%;
}

.layout_header_data {
	/* width: 280px; */
	width: 168px;
	text-align: left;
}

.layout_header_associado_suspenso {
	width: 150px;
	text-align: right;
}

.layout_header_link_alterar_senha {
	width: 100px;
}


#layout_footer {
	
	min-height: 40px !important;
	sborder-top: 3px solid #c1c1c1 !important;
	position: static;
	float: left;
}


.ul_menu_icons {
	
} 

.ul_menu_icons li {
	margin-right: 15px;
	width: 17%;
	height: 105px;
	display: inline-block;
	text-align: center;
	vertical-align: center;
	/*opacity: 0.28;*/
}
.ul_min_menu{
	margin:0;
	padding:0;
	display:block;
	width: 900px;	
	margin:0 auto;
}
.ul_menu_icons a, .ul_min_menu a {
	text-decoration: none;
}

.ul_min_menu span {
	
		
}

.ul_menu_icons li.desabilitado {
	opacity: 0.28;
}
	

.sub_menu_hide {
}

.sub_menu_show {
}

.ul_submenu_icons, .ul_submenu_icons_float {
	display: none;
	text-align: left;
	margin-left: 110px;
	margin-right: 80px;
	border: 1px solid #BCBCBC;
	box-shadow: 0px 2px 14px 0px #BCBCBC;
}

.ul_submenu_icons_float {
	position: absolute;
	z-index: 33;
	background: white;
	width: 60%;
}

.ul_submenu_icons li, .ul_submenu_icons_float li {
	border: 1px solid whiteSmoke;
	margin-right: 28px;
	width: 28%;
/*	height: 105px;*/
	display: inline-block;
	text-align: left;
	vertical-align: center;
	
	border-bottom: 2px dotted #CBCBCB;
	margin-bottom: 10px;	
	background: white;
}

.ul_submenu_icons a, .ul_submenu_icons_float a {
	text-decoration: none;
}

.icon_menu_nome {
	font-family: Arial;
	font-size: 13px;
	font-weight: bold;
	color: #062549;
}

.icon_menu_resumo {
	font-family: Arial;
	font-size: 12px;
	color: #062549;	
}

.horizontal_icon {
	margin: 15px 15px 0px 15px;
	border: 0px none;		
}

.layout_header_search_entidade {
	witdh: 220px;
}

.layout_header_nome_associado {
	width: 300px;
}


.span_layout_separator {
	border-bottom: 1px solid #BDBDBD;
	margin-bottom: 15px;
	width: 84%;
	display: block;
}

#div_min_menu {
	height: auto;
}

.ul_min_menu {
	text-align: left;
}
.ul_min_menu > li {
	display: inline-block;
	padding-right: 1px;
	height: 20px;
}

.ul_min_menu > li span {
	font-size: 11px;
	font-weight: bold;
	padding: 3px;
	vertical-align: bottom;
	border-right: 1px solid #BDBDBD;
	padding-right: 5px;
	margin-right: 5px;

}

.td_logoCDL {
	width: 200px;
}

.td_nomeCDL {
	width: 670px;
	min-width: 650px;
	white-space: nowrap;
	position: relative;	
}



/*Aqui formatamos a div que funcionara como um botão*/
div#click{
	position: fixed; /*Diz que a div tem uma posição relativa a ao corpo do site*/
	bottom:2.5%;
	right:12.6%;
	width: 274px; /*largura da div*/
	height: 45px; /*altura da div*/
	padding: 9px 0px 0px 13px;
	color:#FFF;
	font-size: 23px;
	background-color: #114670;  /*cor de fundo da div*/
	cursor: pointer; /*o cursor do mouse sera uma mãozinha*/
	border-radius: 6px; /*arredondar a borda da div*/
	/* background-image: url('../logoClickAqui.png');  *//*Inserindo uma imagem na div*/
	background-position: center center; /*posição da imagem*/
	background-size: cover; /*Tamanho da imagem, no tamanho da div*/
	background-repeat: no-repeat; /*propriedade para nao repetir imagem na div*/
}
div#click span{
	color:#FFF;
	font-size: 23px;
}

/*Aqui um efeito, quando o mouse estiver em cima da div, evento hover, ele mudara a cor de fundo*/
div#click:hover{
	background-color: #82afce;  /*cor de de fundo da div*/
	transition: .4s; /*tempo para acontecer o evento hover*/
}

div#click:visited {
	background-color: #82afce;  /*cor de de fundo da div*/
	transition: .4s; /*tempo para acontecer o evento hover*/
}

/*Esta div será mostrada após clicada na div click isso com efeito Jquery*/
div#show{
	z-index:10000;
	position: fixed; /*Diz que a div tem uma posição relativa a ao corpo do site*/
	bottom:5.5%;
	right:12.6%;
	width:72%; /*largura da div*/
	height: 70%; /*altura da div*/
	background-color: #FFF;  /*cor de fundo da div*/
	margin: 30px auto; /*esta propriedade diz que qualquer outro item deve ficar a 30px de distancia e a palavra auto faz que esta div fique exatamente no meio da tela*/
	display: none; /*como queremos que ela apareça apenas após clicarmos, essa propriedade faz com que a pagina inicie sem mostrar esta div*/
	border-radius: 10px; /*arredondar bordas da div*/
	box-shadow: 0px 0px 13px 2px; /*sombras na div*/
	padding: 20px; /*margem interna*/
}
.product{
	display: inline-block;
	width: 100%;
	height: 220px;
}
.product .product-titulo{	
	font-weight: bold;
	font-size: 12px;	
	padding-top: 10px;
}
.product .product-data{	
	font-size: 10px;
}
.product .product-titulo, .product .product-description, .product-data{
	display:block;
	width:100%;
	text-align: center;
}
.product .product-grid-item .product-grid-item-top, .product .product-grid-item .product-grid-item-bottom {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.product .product-grid-item .product-grid-item-content {
    text-align: center;
}
.product .product-grid-item img {
    width: 75%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    margin: 2rem 0;
}
.product .product-grid-item .product-grid-item-content {
    text-align: center;
}

.youtube-box,
.youtube-frame {
  display:block;
  width:420px; /* video width */
  height:315px; /* video height */
  background-color:black;
  background-size:100%;
  position:relative;
  border:none;
  margin:0px auto 15px;
}

.youtube-box span {
  display:block;
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
}

.youtube-box .youtube-title {
  background-color:rgba(0,0,0,0.4);
  font:bold 15px Verdana,Arial,Sans-Serif;
  color:white;
  text-shadow:0px 1px 2px black;
  bottom:auto;
  line-height:30px;
  height:30px;
  overflow:hidden;
  padding:0px 15px;
}

.youtube-box .youtube-bar {
  background: #000;
  height:35px;
  top:auto;
}

.youtube-box .youtube-bar .yt-bar-left {
  background: #999;
}

.youtube-box .youtube-bar .yt-bar-right {
  background: #999;
}

.youtube-box .youtube-play {
  cursor:pointer;
  width:83px;
  height:56px;
  top:50%;
  left:50%;
  margin:-28px 0px 0px -42px;
  background: #999;
  color: #fff;
  line-height: 56px;
  text-align: center;
  text-transform: uppercase;
}

.youtube-box .youtube-play:hover {
  background-color: #000;
}

.floatWhatsApp{
    position:fixed; 
    width:60px; 
    height:60px; 
    bottom:5%;
    right:5%; 
    z-index:100;
}

.floatWhatsApp img{
	border-radius:50px;
}