@charset "utf-8";
/* Web designer Francine Medeiros */
/* Designer Gráfica Jennifer Candido */
/* CSS para página de ingresso de cursos do Câmpus Palhoça Bilíngue */

/*** ESTRUTURA */
* {margin:0; padding:0}
a {color:#425D21}
a:hover {color:#990000}
ul, ul li {list-style:none}
.wrapper::after {clear: both; content: "."; display: block; height: 0; visibility: hidden}
a:active {outline:none}
:focus {-moz-outline-style:none}

body {
	background-color:#0F5F5C;
	background-image: url(../imagens/elemento_right.png), url(../imagens/elemento_left.png);
	 background-repeat: no-repeat, no-repeat;
	 background-position:bottom 0 right 0, bottom 0 left 0;
	font-family: "Kollektif2"; font-style:normal; font-size:0.9em}
body .corpo {/*width:100%; max-width:950px; margin:0 auto 25px*/ 	}
body .center {max-width:1000px; margin:0 auto}

iframe {float:left; margin-right:15px}

/* TOPO */
.topo {overflow:hidden;
	   background: #ECE5E1;  /* fallback for old browsers */
	   background: -webkit-linear-gradient(to bottom, #E0E0E0, #FFFFFF);  /* Chrome 10-25, Safari 5.1-6 */
	   background: linear-gradient(to bottom, #E0E0E0, #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }
.topo div.conteudo_topo {/*background:#f10c13;*/ float:left; width:448px}
.topo p {float:left; text-align:left; line-height:150%; color:#0F5F5C}
.topo img {z-index:-9999em; height:351px; margin-right:60px; float:right}

.topo h1 {font-size:2em; color:#000000; text-align:left; float:left; margin:80px 0 50px 0; line-height:150%}
.topo h1 strong {color:#0F5F5C}

.topo > .center {background:url(../imagens/fundo_topo.png) no-repeat 100% 89px}

/* CONTEÚDO */
.conteudo span div ins p {float:left}
.conteudo h3 {background-color:#A6F488; color:#0F5F5C; padding:18px; border-radius:8px; display:block; text-transform:uppercase; font-size:1.2em; float:left}
.conteudo ul.recursos {float:right}
.conteudo ul.recursos li {float:left; margin-left:35px; text-align:center}
.conteudo ul.recursos li.rec1 {background:url(../imagens/icone_gratuito.png)}
.conteudo ul.recursos li.rec2 {background:url(../imagens/icone_ead.png)}
.conteudo ul.recursos li.rec3 {background:url(../imagens/icone_certificado.png)}
.conteudo ul.recursos img {display:block}

/*** RODAPE */
.rodape {clear:both; color:#ffffff; font-size: 0.9em; padding-top:16px; margin-top:30px;}
.rodape p {float: right}
.rodape ul, .rodape ul li { list-style:none}
.rodape ul li {list-style:none; float: left}
.rodape ul.redes {max-width:35%; margin:20px auto}
.rodape ul.redes li a {display:block; width:30px; height:30px; text-indent:-9999em; margin-left:8px}
.rodape ul.redes li.facebook a{background: url(../imagens/icon_face2.png) no-repeat}
.rodape ul.redes li.instagran a {background: url(../imagens/icon_insta.png) no-repeat}
.rodape ul.redes li.logo a {background: url(../imagens/logoifscPHB.png) no-repeat; width:197px!important; height:51px!important; margin-right:20px!important}

.rodape ul.instituicoes {border-top: 1px dotted #fff; border-bottom: 1px dotted #fff; padding-bottom:11px; padding-top:11px}
.rodape ul.instituicoes li {margin-left:250px}
.rodape ul.instituicoes li:first-child {margin-left:0}

/* Box inscrição */
	.bt_inscricao {display: block; text-align: center; margin:30px 0 60px 0; background:#D8C614; border-radius:8px; color:#0F5F5C; text-decoration:none; font-weight:bold; text-transform:uppercase; padding:12px 8px}
	.bt_inscricao:hover {background-color:#0F5F5C; color:#FFF} 
	.bt_float {width:30.5%; float:left; margin-right:15px}
	.bt_float:last-child {margin-right:0}
	
	.bt_inscricao2 {background:#8b22dd; color: #ffffff}
	.bt_inscricao2:hover {background:#340e59; color: #ffffff}

/************ RECURSOS ************/ 

/*** ACCORDION */
/* accordion reset */
.accordion {margin-bottom:40px}
.accordion h2 {border-radius:13px; margin-top:13px; padding:11px; font-size:1.2em; overflow:hidden;
font-weight:normal; border-bottom:1px solid #fff; cursor:pointer; color:#0F5F5C; border-top:#FFF solid 1px; background:#ffffff url(../imagens/icon_mais.png) no-repeat bottom 50% right 24px}
.accordion h2.current {border-bottom-right-radius:0!important; border-bottom-left-radius:0!important;cursor:default; background-color:#D8C614; color:#000; font-weight:bold}

.accordion .pane {background-color:#ffffff; display:none; height:auto; padding:15px; color:#000; font-size:12px; border-top: 1px solid #0F5F5C; border-bottom: 1px solid #0F5F5C; margin-bottom:0px; border-bottom-right-radius:13px; border-bottom-left-radius:13px}

.accordion .pane ul, .accordion .pane p {margin:12px 0; font-size:1.3em; line-height: 150%;}
.accordion .pane ul li {line-height:170%}
.accordion .pane ul li:first-child {margin-top:13px}
.accordion .pane .bt_inscricao {margin:18px 0 0 0!important; font-size:1.3em}

.accordion h2.img1 span, .accordion h2.img2 span, .accordion h2.img3 span, .accordion h2.img4 span, .accordion h2.img5 span, .accordion h2.img6 span { width:180px; height:107px; display:block; float:left; background-repeat: no-repeat; margin-right:13px; border-radius:13px}
.accordion h2.img1 span {background-image: url(../imagens/img_alfabetizacao.png)}
.accordion h2.img2 span {background-image: url(../imagens/img_educacao_bilingue.png)}
.accordion h2.img3 span {background-image: url(../imagens/estudos.png)}
.accordion h2.img4 span {background-image: url(../imagens/img_ensino.png)}
.accordion h2.img5 span {background-image: url(../imagens/img_traducao.png)}
.accordion h2.img6 span {background-image: url(../imagens/img_educacao.png)}

.accordion h2 > p {padding-top:4.5%; padding-right:6%; font-weight:bold} 
.accordion ins {text-decoration:none!important}

/*** MÃOZINHA HOVER */
.maozinha {display:block; background:url(aparencia/imagens/maozinha.png) no-repeat; z-index:2; width:51px; height:51px; position:absolute; right:28px; bottom:-27px}
.dois {right:-11px; bottom:-9px}
.tres {right:22px; bottom:-24px}
		
/*** RESPONSIVO */
/*------* youtube *=====*/
figure {min-width:17.5em; margin:0 auto}
figcaption { font: 120% sans-serif; text-align: center;margin: 0 0 5px 0; font-weight:bold}
.boxVideo {position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; margin:0 auto}
.boxVideo iframe {position: absolute; top: 0; left: 0; width: 100%;	height: 100%}

/*** IR PARA O TOPO */
.irtopo {background:#000; text-align:center; border-top-left-radius:8px; border-bottom-left-radius:8px; color:#FFF; bottom: 20%; cursor: pointer; height: 51px; position: fixed; right: 0; width: 48px; z-index: 1; font-weight:bold; padding: 7px 7px 0}

/*** FONTE */
@font-face {
    font-family: 'Kollektif1';
    src: url('fonte/Kollektif-Bold.eot');
    src: url('fonte/Kollektif-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonte/Kollektif-Bold.woff2') format('woff2'),
        url('fonte/Kollektif-Bold.woff') format('woff'),
        url('fonte/Kollektif-Bold.ttf') format('truetype'),
        url('fonte/Kollektif-Bold.svg#Kollektif-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kollektif2';
    src: url('fonte/Kollektif.eot');
    src: url('fonte/Kollektif.eot?#iefix') format('embedded-opentype'),
        url('fonte/Kollektif.woff2') format('woff2'),
        url('fonte/Kollektif.woff') format('woff'),
        url('fonte/Kollektif.ttf') format('truetype'),
        url('fonte/Kollektif.svg#Kollektif') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Kollektif3';
    src: url('fonte/Kollektif-BoldItalic.eot');
    src: url('fonte/Kollektif-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonte/Kollektif-BoldItalic.woff2') format('woff2'),
        url('fonte/Kollektif-BoldItalic.woff') format('woff'),
        url('fonte/Kollektif-BoldItalic.ttf') format('truetype'),
        url('fonte/Kollektif-BoldItalic.svg#Kollektif-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Kollektif4';
    src: url('fonte/Kollektif-Italic.eot');
    src: url('fonte/Kollektif-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonte/Kollektif-Italic.woff2') format('woff2'),
        url('fonte/Kollektif-Italic.woff') format('woff'),
        url('fonte/Kollektif-Italic.ttf') format('truetype'),
        url('fonte/Kollektif-Italic.svg#Kollektif-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/*** ***/ 

/* Tela de celular*/ 
	@media screen and (max-width: 700px) {
		body {padding:18px}	
		.conteudo ul.recursos {margin:0 auto}
		.conteudo ul.recursos li {margin-left:0!important}
		.conteudo ul.recursos li img {max-width: 110px; margin-left: 10px;}
		.conteudo ul.recursos li:first-child img {margin-left:0}
		.conteudo h3 {float:none; text-align:center; margin-bottom:38px}
		.topo {padding:15px 20px}
		.topo h1 {margin-top:124px}
		.topo div.conteudo_topo {width:100%!important}
		.instituicoes li {margin-bottom:13px; clear:both; float:none}
		.logo a {margin-bottom:20px}
		.rodape ul.instituicoes li {margin-left:25%!important}
	}