* {margin: 0; padding:0; font-size: 100%; border:none; outline:none; font-weight: 300;box-sizing: border-box; font-family: 'Cambria', serif;}
body{background-color:#F5F5F5;}
a {text-decoration: none;}
ul {list-style: none;}
img {max-width: 100%;}
/* CABECALHO */
.cabecalho {width: 100%;float: left; background:linear-gradient(to bottom, #CD853F, #FFDEAD); }
.logo {width: 100%;  float: left; font-size: 1.5em; font-weight: 700; padding: 10px; color: white; text-shadow: black 0.1em 0.1em 0.2em;}
.conteudo {width: 98%;text-align:left;float:left;margin-left:1%;padding:2px;}
.conteudo h2{font-size: 1.3em;color:#035361;font-weight: 500;padding-top: 20px;}
.btn-menu {width: 35px; height: 35px; float: right; text-align: center; cursor: pointer;color: #a04c07;margin: 2% 3%;}
/* MENU */
.menu{display:none; width: 100%;height: 100%;float:left;position: fixed;background:linear-gradient(to top, rgb(240,255,255), rgb(255,255,255));top: 0;left: 0;}
.btn-close{font-size: 1.5em;color:#da6709;float: right;cursor: pointer;margin: 2% 3%;}
.menu ul{width: 100%;float: left;}
.menu li{border-bottom: #ccc 1px solid;color:#035361;font-size: 1.0em;padding:5px;text-align: left;margin-left: 10px;}
.menu li:hover{background-color: rgb(255,239,213);}
h5 {font-size: 1.0em;color: #035361; font-weight: bold;padding: 5px;cursor: pointer;border-left: #035361 8px solid}
/* BANNER */
.title{width: 100%;}
.title h2 {font-size: 1.0em; color:#000;font-weight: 300;padding: 10px; }
.title h3 {font-size: 0.8em; color:#8a4207;font-style: italic; }
/* SERVIÇOS */
.servicos {width: 100%; float: left;}
.servico {width: 100%;background-color: #fff; text-align: left;border-radius: 7px; margin-bottom: 3%; box-shadow: 2px 2px 1px #ccc;border: 1px solid #ccc;}
.servico img{border-radius: 7px 7px 0 0; width: 100%;}
/* CAIXA TURMA */
.turma_caixa{width: 48%;float: left;text-align: center;padding: 5px; border-radius: 7px;  box-shadow: 2px 2px 1px #bbb;border: 1px solid #ccc;}
.turma_titulo{width: 100%;padding: 5px;}
.turma_corpo{width: 100%;padding:5px;}
.turma_rodape{width: 100%;padding: 5px;}
.turma_titulo h3 {font-size: 1.0em; color: #8a4207; font-weight: 300;}
.turma_corpo h2 {font-size: 1.6em; color: #035361; font-weight: 500;padding: 5px;border-radius: 5px;}
.turma_corpo h3 {font-size: 1.0em; padding: 3px;}
.turma_corpo h3:hover {text-decoration: underline;}
.turma_rodape h3 {font-size: 1.0em; color: #8a4207; font-weight: 300;border-radius: 5px;}
.caixa {width: 100%;float: left;text-align: left;padding: 5px;  border-radius: 7px;  box-shadow: 2px 2px 1px #ccc;border: 1px solid #ccc;margin:10px 0 10px 0;}
.caixa p{margin-left:10px; }
.caixa h2{margin:10px;padding: 3px;border-bottom:2px solid #CD853F; }
.caixa_rodape{text-align:right ;margin:0px;padding: 5px;border-top:2px solid #CD853F;background-color:#FFF5EE;font-weight: 400;}
.caixa input{width: 90%; background-color: #f5f5f5;color:#130400 ;border:1px solid #cecdd1;padding: 5px; border-radius: 5px; margin:10px;color:slategray;}
.caixa img {max-width:50% ;border:2px solid #0D9797; background-color: #A9A9A9; padding: 5px;}
img.icone {width:20px;border:1px solid #ccc;height:20px;}
/* INPUTS */
select {border-radius: 3px; border: 1px solid rgba(148,182,210,1);margin:10px 0px 10px 0px;font-size:1em;padding: 5px;background-color: #f5f5f5;}
input {width: 100%; background-color: #f5f5f5;color:#130400 ;border:1px solid #cecdd1;padding: 5px; border-radius: 5px; margin:10px 0px 10px 0px;color:slategray;}
input:focus {border: 1px solid #130400;box-shadow: -4px -4px 6px #ccc;}
input[type = 'tel'] {width: 100%; background-color: #f5f5f5;color:#130400 ;border:1px solid #cecdd1;padding: 5px; border-radius: 5px; margin:10px 0px 10px 0px;color:slategray;}
input[type = 'tel']:focus {border: 1px solid #130400;box-shadow: -4px -4px 6px #ccc;}
input[type = 'submit']{width: 100%;cursor: pointer;background: #0D9797;padding: 10px;margin:10px 0px 10px 0px;font-size: 1.2em;color: #fff;border: 1px solid #fff;text-shadow: 0 1px 1px #333;-webkit-border-radius: 5px;border-radius: 5px;transition: all 0.2s linear;}
input[type = 'submit']:hover{background: #F18920;border:1px solid #333;}
input[type = 'button']{width: 100%;cursor: pointer;background: #A9A9A9;padding: 10px;font-size: 1.2em;color: #fff;border: 1px solid #fff;margin:10px 0px 10px 0px;text-shadow: 0 1px 1px #333;-webkit-border-radius: 5px;border-radius: 5px;transition: all 0.2s linear;}
input[type = 'button']:hover{background: #333;border:1px solid #333;}
input[type = 'select']{background:rgb(255,239,213);}
input[type = 'file']{background:rgb(255,239,213);}
textarea {width: 100%; background-color: #f5f5f5;color:#130400 ;border:1px solid #cecdd1;padding: 5px; border-radius: 5px; margin:10px 0px 10px 0px;;color:slategray;}
/* USUARIO */
.usuario{width: 100%;float: left;text-align:right;background:linear-gradient(to bottom,#A9A9A9, #363636);padding: 5px 10px; color: #fff;font-size: 0.9em; }
.usuario a:link{color:yellow;text-decoration: none;padding:3px;}
.usuario a:active{color:yellow;text-decoration: none;}
.usuario a:visited{color:yellow;text-decoration: none;}
.usuario a:hover {font-weight:bold;}
.linha {content: ' ';display: block;width: 100%;height: 2px;margin: 10px 0 10px 0;background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); background: linear-gradient(left, rgba(147,184,189,0.2) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0.2) 100%); }
.mensagem{font-size: 1.5em;text-align: center; color:brown;background-color: #ccc;padding:10px 10px 10px 10px;}
/* TABELA */
table {width:100%;border: 1px solid rgb(119, 62, 15)} 
th,td {border:none;}
th {background:linear-gradient(to top, rgb(240,255,255), rgb(255,255,255));border:1px solid #ccc; color:#035361; text-align:center;padding:10px; }
td {padding: 3px;}
td a:link {color:maroon;text-decoration: underline;}
td a:visited {color:maroon;}
tr {color:#000;padding:2px;}
tr:nth-of-type(even){ background:rgba(234,232,232,0.7); }
tr:nth-of-type(odd){	background-color:#fff;}
tr:hover{background:rgb(255,239,213); }
/* LINKS */
a:link{color:rgba(0,108,168,1);text-decoration: none;}
a:active{color:aqua;}
a:visited{color:maroon;}

.vertical {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera */
}

@media screen and (min-width: 480px) {
    .title h2{font-size: 1.0em;}
    .title h3{font-size: 0.9em;}
    .btn-menu {width: 65px; height: 65px; }
    .turma_caixa{width: 48%;float: left;text-align: center;padding: 5px; border-radius: 7px;  box-shadow: 2px 2px 1px #bbb;border: 1px solid #ccc;}
    .turma_titulo{width: 100%;padding: 5px;}
    .turma_corpo{width: 100%;padding:5px;}
    .turma_rodape{width: 100%;padding: 5px;}
    .turma_titulo h3 {font-size: 1.0em; color: #8a4207; font-weight: 300;}
    .turma_corpo h2 {font-size: 1.6em; color: #035361; font-weight: 500;padding: 5px;border-radius: 5px;}
    .turma_rodape h3 {font-size: 1.0em; color: #8a4207; font-weight: 300;border-radius: 5px;}
    td{font-size:0.7em;}
  }
  @media screen and (min-width: 768px) {
    .title h2{font-size: 1.5em;}
    .title h3{font-size: 1.3em;}
    .servicos {width: 100%; float: left;}
    .servico {width: 32%;}
    .btn-menu {display: none;}
    .btn-close {display: none;}
    .conteudo {width: 78%;text-align:left;float:left;margin-left:1%;padding:2px;}
    .menu {width: 20%;float: left;  display: block !important;position: static; background:linear-gradient(to top, rgb(240,255,255), rgb(255,255,255));box-shadow: 4px 4px 6px #ccc;border: 1px solid #ccc;}
    .menu li{padding: 5px;border-bottom: #ccc 1px solid;color:#035361;font-size: 0.8em;}
    .menu li:hover{background-color:rgb(255,239,213);}
    .caixa {width: 100%;float: left;text-align: left;padding: 5px;  border-radius: 7px;  box-shadow: 2px 2px 1px #ccc;border: 1px solid #ccc;}
    h5 {font-size: 0.8em;color: #035361; font-weight: bold;padding: 5px;cursor: pointer;border-left: #035361 8px solid}
    /* CAIXA TURMA */
    .turma_caixa{width: 32%;float: left;text-align: center;padding: 5px; border-radius: 7px;  box-shadow: 2px 2px 1px #bbb;border: 1px solid #ccc;}
    .turma_titulo{width: 100%;padding: 5px;}
    .turma_corpo{width: 100%;padding:5px;}
    .turma_rodape{width: 100%;padding: 5px;}
    .turma_titulo h3 {font-size: 1.2em; color: #8a4207; font-weight: 300;}
    .turma_corpo h2 {font-size: 1.7em; color: #035361; font-weight: 500;padding: 5px;border-radius: 5px;}
    .turma_rodape h3 {font-size: 1.2em; color: #8a4207; font-weight: 300;border-radius: 5px;}
    input{width: 40%;}
    input[type = 'submit']{width: 120px;}
    input[type = 'button']{width: 120px;}
    td{font-size:0.8em;}
  }
  @media screen and (min-width: 960px) {
    .title h2{font-size: 1.5em;}
    .title h3{font-size: 1.3em;}
    .servicos {width: 100%; float: left;}
    .btn-menu {display: none;}
    .btn-close {display: none;}
    .conteudo {width: 78%;text-align:left;float:left;margin-left:1%;padding:2px;}
    .menu {width: 20%;float: left;  display: block !important;position: static; background:linear-gradient(to top, rgb(240,255,255), rgb(255,255,255));box-shadow: 4px 4px 6px #ccc;border: 1px solid #ccc;}
    .menu li{padding: 5px;border-bottom: #ccc 1px solid;color:#035361;font-size: 1.0em;}
    .menu li:hover{background-color:rgb(255,239,213);}
    .caixa {width: 100%;float: left;text-align: left;padding: 5px;  border-radius: 7px;  box-shadow: 2px 2px 1px #ccc;border: 1px solid #ccc;}
    h5 {font-size: 1.0em;color: #035361; font-weight: bold;padding: 5px;cursor: pointer;border-left: #035361 8px solid}
    /* CAIXA TURMA */
    .turma_caixa{width: 24%;float: left;text-align: center;padding: 5px; border-radius: 7px;  box-shadow: 2px 2px 1px #bbb;border: 1px solid #ccc;}
    .turma_titulo{width: 100%;padding: 5px;}
    .turma_corpo{width: 100%;padding:5px;}
    .turma_rodape{width: 100%;padding: 5px;}
    .turma_titulo h3 {font-size: 1.3em; color: #8a4207; font-weight: 500;}
    .turma_corpo h2 {font-size: 1.8em; color: #035361; font-weight: 700;padding: 5px;border-radius: 5px;}
    .turma_rodape h3 {font-size: 1.3em; color: #8a4207; font-weight: 500;border-radius: 5px;}
    td{font-size:0.9em;}
    input{width: 40%;}
    input[type = 'submit']{width: 120px;}
    input[type = 'button']{width: 120px;}
  }
  @media screen and (min-width: 1280px) {
    .conteudo {width: 83%;text-align:left;float:left;margin-left:1%;padding:2px;}
    .menu {width: 15%;float: left;  display: block !important;position: static; background:linear-gradient(to top, rgb(240,255,255), rgb(255,255,255));box-shadow: 4px 4px 6px #ccc;border: 1px solid #ccc;}
    .menu li{padding: 5px;border-bottom: #ccc 1px solid;color:#035361;font-size: 1.0em;}
    .menu li:hover{background-color:rgb(255,239,213);}
    h5 {font-size: 1.0em;color: #035361; font-weight: bold;padding: 5px;cursor: pointer;border-left: #035361 8px solid}
    .caixa {width: 100%;float: left;text-align: left;padding: 5px;  border-radius: 7px;  box-shadow: 2px 2px 1px #ccc;border: 1px solid #ccc;}
    .servicos {width: 100%; float: left;}
    .turma_caixa{width: 19%;float: left;text-align: center;padding: 5px; border-radius: 7px;  box-shadow: 2px 2px 1px #bbb;border: 1px solid #ccc;}
    .turma_titulo{width: 100%;padding: 5px;}
    .turma_corpo{width: 100%;padding:5px;}
    .turma_rodape{width: 100%;padding: 5px;}
    .turma_titulo h3 {font-size: 1.3em; color: #8a4207; font-weight: 500;}
    .turma_corpo h2 {font-size: 1.8em; color: #035361; font-weight: 700;padding: 5px;border-radius: 5px;}
    .turma_rodape h3 {font-size: 1.3em; color: #8a4207; font-weight: 500;border-radius: 5px;}
    td{font-size:1em;}
  }