/*
Theme Name: Luis Fernando
Theme URI: http://www.luisfernandosindico.com.br
Author: Simplifica Design <contato@simplificadesign.com.br>
Author URI: http://www.simplificadesign.com.br
Description: Este tema foi criado para o site de Luis Fernando Sindico Profissional
Version: 2.0
Tags: tags
*/
html, body {height:100%;} 
body {
	margin:0; 
	padding:0;
	color:#000;
	font-size:18px; font-family: 'EB Garamond', serif;
	text-align:center; overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
	}
#tudo { 
	width: 100%;
    position:relative;  /*Contexto de posicionamento */
	background:#fff;
	margin:0 auto;
	text-align:left;
	min-height:100%;
	}
 * html #tudo {height: 100%;}
#conteudo {padding-bottom:30px;}
#conteudo img{
    float:left;
    margin:0 20px 20px 0;
  }
/* 
Topo de Servicos e Blog
*/
#topo {
	width: 100%;
	height:60px;
	text-align:right;
	padding-top:1px;
	}
    #topo-blog{margin-top: -20px;width: 100%; height: 250px; background-color: rgba(229, 250, 255, 0.8); margin-bottom: 10%;margin-top: -84px;}
    #topo-servicos{width: 100%; height: 250px; background-color: rgba(229, 250, 255, 0.8); margin-bottom: 10%;margin-top: -62px;}
        .topo-esquerda{width: 35%; float: left; height: 250px;
        }
        .topo-direita{background-color: #00609e; width: 65%; float: left; height: 250px;}

        /* Topo */
        .topo-chamada{border: 3px solid #fff; z-index: 1; text-align: center;
                 height: auto; padding: 15px 15px 15px 208px; float: left; position: absolute; margin-left: 30%; margin-top: 65px; width: 48%;}
                .banner-titulo{position: relative;}
                .banner-titulo h1{color: #fff; letter-spacing: 1px; text-align: center; font-weight: lighter; margin: 0 auto;}

        #cabecalho{width: 100%; margin-bottom: 15%;}
        .icone{width: 15%; float: left;}
        .texto{width: 85%; float:left; padding-top: 0.1px; margin-bottom: 12%; }
        .texto h3{margin-top: -15px;}
        #servicos p, ul, li{margin-bottom: 20px; font-size: 1em;}
/* 
Blog
*/
.blogtitulo{font-size: 2.5em;}
.blogsub{font-size: 1.5em; margin-top: -25px;}
.blogintro{font-size: 1.2em; margin-top: 2%; margin-bottom: 2%;}
.blogdestaque{height: 600px; max-width: 100%;text-align: center; margin-bottom: 1%; position: relative;}

.seta{color:#000; width: 42%;padding: 15px; float: left; font-family: 'Anton', sans-serif; font-weight: lighter;
        font-size: 1.2em; padding-bottom: 20%; }
.setadireita{text-align: right; color:000;width: 52%; padding: 15px; margin-left: 1%; float: left;
        font-family: 'Anton', sans-serif; font-weight: lighter; font-size: 1.2em; padding-bottom: 20%; }
.seta a{color:#00b1c6; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s; }
.setadireita a{color:#00b1c6; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s; }
.seta a:hover{ color: #00609e;}
.setadireita a:hover{ color: #00609e;}

.fa-long-arrow-right, .fa-long-arrow-left{color:#FBD71A;font-size: 1.5em;}

.post a{color:#000; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s;}
        
/* 
Banner
*/
#banner{
    width: 100%;
    height: 500px;
    margin-top: -61px;
    z-index: 555;
    position: relative;
    }
     .banner-esquerda{min-width: 35%; min-height: 100%;
        background-image:url(images/foto-luisfernando_sindicoprofissional.jpg); background-position: top; background-repeat: no-repeat; background-size:cover;float: left; z-index: 1;}
    .banner-direita{min-width: 65%; min-height: 100%; background-color: #00609e; float: left; z-index: 1;}
    
    /* Parte de Texto do Banner */
    #banner-chamada{width: 64%; position: absolute; border: 3px solid #fff; margin-top: 18%; margin-left:30.5%; z-index: 1;}
        .banner-titulo{height: 180px;  width: 93.4%; vertical-align: middle; display: table-cell; position: relative;}
        .banner-titulo h1{font-family: 'Anton', sans-serif; font-weight: lighter; font-size: 1.8em;
            color: #fff; letter-spacing: 1px; text-align: center; font-weight: lighter; padding: 15px; width: 80%; margin: 0 auto;}
        
        .banner-subtitulo{
            background-color: #fff; opacity: 0.8; height: 180px;
            vertical-align: middle; display: table-cell;
            position: relative;
            }
            .banner-subtitulo p{
            width: auto;    
            text-align: center;
            text-transform: uppercase; font-size: 0.7em;
            line-height: 1.2em; margin-left: -48px; margin-right: -48px;
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg); /* Safari/Chrome */
            -moz-transform: rotate(-90deg); /* Firefox */
            -o-transform: rotate(-90deg); /* Opera */
            -ms-transform: rotate(-90deg); /* IE 9 */
            }
/* 
Serviços
*/
#servicos{
    max-width:90%;
    padding-left: 5%;
    padding-right: 5%;
    text-align:justify;
    padding-bottom: 30px;
    padding-top: 30px;
    }
    
    .flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 300px;
    position: relative;
    }
    .flex-item {
    width: 25%;
    height: 300px;
    margin: 5px;
    text-align: center;
    }
    .flex-item a{text-decoration: none;}
    .itens h2{-webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s; }
    .itens:hover h2{color: #00609e; }
/* 
Area Principal
*/    
#principal {
    max-width:50%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 150px;
    padding-top: 20px;
    margin-bottom: 5%;
    text-align:justify;
    }

#servicos p a{color:#00609e; font-weight:bold; -webkit-transition: 1s; /* Safari */ transition: 1s;}
#servicos p a:hover{color:#e2be06; font-weight:bold;}
/* 
Biografia
*/ 
#auxiliar {
    position: absolute;
    float: right;
    margin-left: 74%;
    bottom: 80px;
	max-width: 22%;
    z-index: 5;
	}
    #auxiliar h2{color: #000;}
    .conteudo-auxiliar{float: right; width: 100%; margin-right: 5%; line-height: 1.8em; padding:25px;
     background-color: rgba(229, 250, 255, 0.8); border: 3px solid #fff;}
    .conteudo-auxiliar a{color:#000; -webkit-transition: 1s; /* Safari */ transition: 1s;}
    .conteudo-auxiliar a:hover{color:#e2be06;}


/* 
Rodape
*/     
#rodape {
	background:#00609e;
	width:100%;
	height:200px;
	position: absolute;
	bottom: 0; /**/ 
	text-align: left;
    display: inline;
	}
    .conteudo-rodape{width: 100%; color:#fff;  display:inline; padding-top: 20px;  margin-bottom: 1%; line-height: 0.5em;}
    .conteudo-rodape ul{
        font-size: 1em; padding-left: 5%;
        list-style-position: inside;
        list-style-image: none;
        list-style-type: none;}
    .conteudo-rodape li{float:left;
        list-style-position: inside;
        list-style-image: none;
        list-style-type: none;
        margin: 0px;
        padding-right: 1%;}
    .conteudo-rodape a{ font-size: 0.9em; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s;}
    .conteudo-rodape a:hover{color: #FBD71A;}
    .conteudo-rodape .creditos{font-size: 0.8em; color: aliceblue; margin-left: 5%;}
    #voltarrodape{display:inline; font-family: 'Anton', sans-serif;color:aliceblue; margin-left: 5%;  }
    #voltarrodape p{display: inline; color:aliceblue; font-size: 0.9em;}


/* 
Formatacoes
*/ 
h1, h2, h3, h4, h5, h6, pre {
    font-family: 'Anton', sans-serif; font-weight: lighter;
    }
    h1{color: #fff; font-size: 2.1em;} /* Títulos de banner e cabeçalho de serviço */
    h2{color: #00b1c6; font-size: 1.7em; line-height: 0.4em;} /* Títulos de serviço e artigo */
    h3{color: #7dc4d3; font-size: 1.4em; line-height: 1.2em; } /* Subtítulos de serviço e artigo */
    h4{color: #fff; font-weight: lighter;} /* Texto de botões */
    p{font-size: 1em; line-height: 1.4em;}
    a {color: #fff; text-decoration: none;}
    b, strong {font-weight: 600;}
    hr{border-top: 2px solid #00659f; margin-top: 5%; margin-bottom: 5%;}
    small{font-size: 0.9em; line-height: 1.8em; font-family: 'EB Garamond', serif; color: #000;}
    
    .botao{background-color: #FBD71A; width: 200px; text-transform: uppercase;
    font-family: 'Anton', sans-serif; font-weight: lighter; letter-spacing: 1px;
    text-align: center; color: #fff; margin-bottom: 1%; margin-top: 1%; padding: 10px;
    -webkit-transition: 1s; /* Safari */
    transition: 1s;}
    .botao:hover{background-color: #e2be06; color:#fff; }
    
    .frase-menu{width: 45%; margin: 0 auto; color: #000; margin-bottom: 2%;}
    
    .linkbio{text-align: center; margin-top: 23%;}
    .linkbio a{ font-size: 1.2em; font-weight: 600; color:#000; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s; }
    .linkbio a:hover {color: #00609e; }

.clear {clear:both;}
#nav {
	margin-bottom:5px;
	text-align:justify;
		}

    #CF5a01a76fb03c6_1-row-1{width: 80%;}
    #fld_3316714_1, #fld_5680928_1, #fld_9272739_1, #fld_5546535_1{border: 2px solid #00b1c6; font-size: 0.8em;}
    #fld_7850070Label, #fld_8934517Label, #fld_8943935Label, #fld_699943Label{font-weight: 300;}
    #fld_9024382_1{background-color: #FBD71A; height: auto; text-transform: uppercase;
    font-family: 'Anton', sans-serif; font-weight: lighter; letter-spacing: 1px; padding: 10px;
    text-align: center; color: #fff; padding: 0; border:0;
    -webkit-transition: 1s; /* Safari */
    transition: 1s;}
    #fld_9024382_1:hover{background-color: #e2be06;}
    .btn btn-default{padding: 0; border: 0; padding: 0; border:0;}
    
    #nf-field-21{background-color: #FBD71A; height: auto; text-transform: uppercase;
    font-family: 'Anton', sans-serif; font-weight: lighter; letter-spacing: 1px; padding: 10px;
    text-align: center; color: #fff; border:0; width: 200px;
    -webkit-transition: 1s; /* Safari */
    transition: 1s;}
    nf-field-21:hover{background-color: #e2be06;}

    #nf-field-20{font-family: Arial, sans-serif;}
/* 
Icones 
*/
    .adm{
        min-width:100%; min-height: 100%; padding-top: 50%; padding-bottom: 35%; padding-left: 0;
        background-position: center; background-size: 100%;
        background: url(images/servicos-administrativos.svg); background-repeat: no-repeat;
        }
        .adm-home{
        min-width:50%; min-height: 50%; padding-top: 20%; padding-bottom: 20%; padding-left: 0;
        background: url(images/servicos-administrativos.svg); background-repeat: no-repeat;
        background-position: center; background-size: 40%;
        }
    .fin{
        min-width:100%; min-height: 100%; padding-top: 50%; padding-bottom: 35%; padding-left: 0;
        background-position: center; background-size: 100%;
        background: url(images/servicos-financeiros.svg); background-repeat: no-repeat;
        }
        .fin-home{
        min-width:100%; min-height: 100%; padding-top: 20%; padding-bottom: 20%; padding-left: 0;
        background: url(images/servicos-financeiros.svg); background-repeat: no-repeat;
        background-position: center; 
        }
    .gpes{
        min-width:100%; min-height: 100%; padding-top: 50%; padding-bottom: 35%; padding-left: 0;
        background-position: center; background-size: 100%;
        background: url(images/servicos-gestaopessoal.svg); background-repeat: no-repeat;
        }
        .gpes-home{
        min-width:100%; min-height: 100%; padding-top: 20%; padding-bottom: 20%; padding-left: 0;
        background: url(images/servicos-gestaopessoal.svg); background-repeat: no-repeat;
        background-position: center; 
        }
    .jur{
        min-width:100%; min-height: 100%; padding-top: 50%; padding-bottom: 35%; padding-left: 0;
        background-position: center; background-size: 100%;
        background: url(images/servicos-juridicos.svg); background-repeat: no-repeat;
        }
        .jur-home{
        min-width:100%; min-height: 100%; padding-top: 20%; padding-bottom: 20%; padding-left: 0;
        background: url(images/servicos-juridicos.svg); background-repeat: no-repeat;
        background-position: center; 
        }
    .cont{
        min-width:100%; min-height: 100%; padding-top: 50%; padding-bottom: 35%; padding-left: 0;
        background-position: center; background-size: 100%;
        background: url(images/servicos-contato.svg); background-repeat: no-repeat;
        }    

/* 
Logos 
*/
.logo-rodape{width: 20%; padding: 30px; margin-bottom: 2%; margin-left: 5%; margin-top: 2%;
        background-image: url(images/logo-luis_sindico-rodape.svg);
        background-repeat: no-repeat;
        background-position: left;
        background-size: 85%;
        }
.logo{width: 30%; height: 30%; padding-top: 5%; padding-bottom: 20%; 
            background-image: url(images/logo-luis_sindico.svg);           
            background-repeat: no-repeat;
            background-position: center;
            background-size: 85%;
            margin-left: 30%;
            }
.logo-topo{width: 40%; height: 40%; padding-top: 10%; padding-bottom: 30%; 
            background: url(images/logo-luis_sindico-topo.svg);
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            margin-left: 30%;
            margin-top: -5%;
            }

/* 
Menu
*/ 
.button_container {
  	  position: fixed;
	  top: 4%;
	  right: 5%;
	  height: 27px;
	  min-width: 35px;
	  cursor: pointer;
	  z-index: 999;
	  -webkit-transition: opacity .25s ease;
	  transition: opacity .25s ease;
	}
    
	.button_container:hover {
	  opacity: .7;
	}
	.button_container.active .top {
	  -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
			  transform: translateY(11px) translateX(0) rotate(45deg);
	  background: #00609E;
	}
	.button_container.active .middle {
	  opacity: 0;
	  background: #00609E;
	}
	.button_container.active .bottom {
	  -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
			  transform: translateY(-11px) translateX(0) rotate(-45deg);
	  background: #00609E;
	}
	.button_container span {
	  background: #FBD71A;
	  border: none;
	  height: 5px;
      min-width: 35px;
	  position: absolute;
	  top: 0;
	  left: 0;
	  -webkit-transition: all .35s ease;
	  transition: all .35s ease;
	  cursor: pointer;
      z-index: 777;
      text-align: left;
	}
	.button_container span:nth-of-type(2) {
	  top: 11px;
	}
	.button_container span:nth-of-type(3) {
	  top: 22px;
	}
	
	.overlay {
	  position: fixed;
	  background: #FBD71A;
	  top: 0;
	  left: 0;
	  min-width: 100%;
	  height: 0;
	  opacity: 0;
	  visibility: hidden;
	  -webkit-transition: opacity .35s, visibility .35s, height .35s;
	  transition: opacity .35s, visibility .35s, height .35s;
	  overflow: hidden;
      color:    
	}
	.overlay.open {
	  opacity: 1;
	  visibility: visible;
	  height: 100%;
      z-index: 888;
	}
	.overlay.open li {
	  -webkit-animation: fadeInRight .5s ease forwards;
			  animation: fadeInRight .5s ease forwards;
	  -webkit-animation-delay: .35s;
			  animation-delay: .35s;
	}
	.overlay.open li:nth-of-type(2) {
	  -webkit-animation-delay: .4s;
			  animation-delay: .4s;
	}
	.overlay.open li:nth-of-type(3) {
	  -webkit-animation-delay: .45s;
			  animation-delay: .45s;
	}
	.overlay.open li:nth-of-type(4) {
	  -webkit-animation-delay: .50s;
			  animation-delay: .50s;
	}
	.overlay nav {
	  position: relative;
	  height: 40%;
      min-width: 100%;
	  top: 35%;
	  -webkit-transform: translateY(-50%);
			  transform: translateY(-50%);
	  font-size: 150%;
	  text-align: center; 
	}
	.overlay ul {
      font-family: 'EB Garamond', serif;
      line-height: 1.5em;
      color: #000;
	  list-style: none;
	  padding: 0;
	  margin: 0 auto;
	  display: inline-block;
	  position: relative;
	  height: 100%;
      text-align: left;
	}
	.overlay ul li {
     list-style: none;
	  display: table;
	  height: 50%;
	  height: calc(100% / 5);
	  min-height: 10%;
	  position: relative;
      text-align: left;
	}
	.overlay ul li a {
	  text-decoration: none;
	  position: relative;
	  color: #00609E;
	  text-decoration: none;
	  overflow: hidden;
	}
	.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
        text-decoration: none;
	 
	}
	.overlay ul li a:after {
	  content: '';
	  position: absolute;
	  
	  bottom: 1px;
	  left: 50%;
	  width: 0%;
	  -webkit-transform: translateX(-50%);
			  transform: translateX(-50%);
	  height: 3px;
	  background: #FFF;
	  margin-top:10px;
	  -webkit-transition: .35s;
	  transition: .35s;
	}

    
/* CELULAR
------------------------------*/
    @media screen and (max-width:480px){
    
    .logomobile{width: 60%; height: 55%; padding-top: 15%; padding-bottom: 15%; 
            background: url(images/logo-luis_sindico-rodape.svg) ;
        background-repeat: no-repeat;
            background-position: top;
         background-size: 100%;
            margin-left: 4%;
            margin-top: 6%;}
        
    /* Formatações */
    h1, h2, h3, h4, h5, h6 {
    font-family: 'Anton', sans-serif; font-weight: lighter;
    }
    h1{color: #fff; font-size: 1.5em;;} /* Títulos de banner e cabeçalho de serviço */
    #principal h2, h3{text-align: left; font-size: 150%;  }
     h1, h2{line-height: 1.2em;}
        #principal h3{text-align: left; font-size: 110%; }
    #principal p, ul, li{font-size: 100%;}
    #principal ul, li{font-size: 100%;}
    .frase-menu{font-size: 85%; min-width: 80%; margin-bottom: 20px;}
    #CF5a01a76fb03c6_1-row-1{width: 90%;}
     /* Area de Servicos */
    #servicos{
    min-width: 90%;
    padding-bottom: 0;
    margin: 0 auto;
    text-align: center;
    }
    #servicos p, ul, li{text-align: justify; margin-bottom: 10px;}
        
    .flex-container {
    display: table-cell;
    min-width: 100%;
    }
    .flex-item {
    min-width: 46.3%;
    min-height: auto;
    float: left;
    text-align: center;
    margin-bottom: -130px;
    } 
    .flex-item h2{font-size: 125%;}
    .adm-home, .fin-home, .gpes-home, .jur-home{background-position: center; background-size: 41%; margin-bottom: 0; }     
          
     /* Area de Texto principal */   
    #principal {
	max-width:100%;
	float:left;
    padding-left: 5%;
    padding-right: 5%;
    text-align:justify;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-bottom: 10%;
	}    
    
    #topo{min-width: 100%;}
        
/* 
Biografia
*/ 
#auxiliar {
    position: relative;
    float: left;
    margin: 0 auto;
   	min-width: 94%;
   margin-left: 6%;
    margin-top: 15%;
    z-index: 5;
	}
        
    #auxiliar h2{color: #000;}
    .conteudo-auxiliar{max-width: 80%;  margin-right: 5%; line-height: 1.8em;
    background-color: rgba(229, 250, 255, 0.8); }
 

     header{ background-color: #00609e; height: 80px;} 
    /* Banner Home */
    #banner{ margin-top: 0px; max-width: 100%; height: 400px; display: inline-flex;  display: -webkit-flex; /* Safari */
    -webkit-flex-direction: row-reverse; /* Safari 6.1+ */ flex-direction:row-reverse ; margin-bottom: 100px;}
    .banner-esquerda{min-width: 100%; min-height: 100%; float: left; }
    .banner-direita{min-width: 100%; min-height: 100%; background-color: #00609e; float: left; }
    
    /* Parte de Texto do Banner */
    #banner-chamada{min-width: 100%; margin-left: 5px; margin-right: 5px;
        border: 3px solid #fff; top: 250px; 
        height: 180px;  background-color: #00609e; z-index: 30; }
        .banner-titulo{min-width: 93.4%; vertical-align: middle; display: table-cell; z-index: 3; position: relative;}
        .banner-titulo h1{color: #fff; letter-spacing: 1px; text-align: center; font-weight: lighter; padding: 10px; width: 90%; margin: 0 auto;
        font-size: 120%;}
        
        .banner-subtitulo{
            background-color: #fff; opacity: 0.8; height: 150px;
            vertical-align: middle; display: table-cell;
            position: relative;
            }
            .banner-subtitulo p{
            width: auto;
            text-align: center;
            text-transform: uppercase; font-size: 0.5em;
             margin-left: -48px; margin-right: -48px;
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg); /* Safari/Chrome */
            -moz-transform: rotate(-90deg); /* Firefox */
            -o-transform: rotate(-90deg); /* Opera */
            -ms-transform: rotate(-90deg); /* IE 9 */
            }
    
    
            .logo{width: 45%; height: 55%; padding-top: 15%; padding-bottom: 15%; 
            background: url(images/logo_luis-fernando-sindico.svg) ;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            margin-left: 25%;
            margin-top: 6%;
                }
        

/* 
Rodape
*/     
#rodape {
	background:#00609e;
	width:100%;
	height:190px;
	position: absolute;
	bottom: 0; /**/ 
	text-align: left;
    display: inline;
	}
        .logofooter{display: none;}
        .conteudo-rodape p{margin-top: 100px;}
        .conteudo-rodape ul{ display: none;}
        .creditos{display: none;}

        #voltarrodape{display:inline; font-family: 'Anton', sans-serif;color:aliceblue; margin-left: 4%;  }
        #voltarrodape p{display: inline; color:aliceblue; font-size: 1.2em;}
        
        .botao{min-width: 90%; margin: 0 auto;}
    
        /* 
        Blog
        */
        .blogtitulo{font-size: 2em; text-align: left; line-height: 1.3em;}
        .blogsub{font-size: 1.2em; margin-top: -25px;}
        .blogintro{font-size: 1em; margin-top: 2%; margin-bottom: 15%; text-align: justify;}
        .blogdestaque{height:auto;max-width:100%;}
        img{height:auto;max-width:100%;}

        .seta{color:#000; min-width: 100%; padding: 5px; float: left; font-family: 'Anton', sans-serif; font-weight: lighter;
             text-align: left; font-size: 0.8em; float: left;}
        .setadireita{text-align: right; color:#000; min-width: 90%; padding: 15px; float: left;
                font-family: 'Anton', sans-serif; font-weight: lighter; font-size: 0.8em; padding-bottom: 20%; margin-bottom: 10%; 
           }
        .seta a{color:#00b1c6; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s; }
        .setadireita a{color:#00b1c6; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s; }
        .seta a:hover{ color: #00609e;}
        .setadireita a:hover{ color: #00609e;}

        .fa-long-arrow-right, .fa-long-arrow-left{color:#FBD71A;font-size: 1.5em;}

        .post a{color:#000; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s;}
        
        
        /* 
        Topo de Servicos e Blog
        */
        #topo {
            width: 100%;
            height:60px;
            text-align:right;
            padding-top:1px;
            }
        
        
        #topo-blog{display: none;}
        /*#topo-blog{width: 100%; height: 120px; background-color: rgba(229, 250, 255, 0.8); }*/
        #topo-servicos{display: none;}
        /* #topo-servicos{width: 100%; height: 120px; background-color: rgba(229, 250, 255, 0.8); } */
                .topo-esquerda{width: 100%; float: left; height: 80px; }
                .topo-direita{display: none;}

                /* Topo */
                .topo-chamada{display: none;}
                        .banner-titulo{position: relative;}
                        .banner-titulo h1{color: #fff; letter-spacing: 1px; text-align: center; font-weight: lighter; margin: 0 auto;}

                #cabecalho{width: 100%; margin-top: 40px; }
                .icone{width: 100%; float: left; text-align: center; margin: 0 auto;}
                .texto{width: 100%; float:left; margin-bottom: 12%;}
                .texto h2{font-size: 180%; line-height: 1.5em;}
                .texto h3{font-size: 120%;}
        
                #servicos p, ul, li{margin-bottom: 20px; margin-top: 20px; font-size: 1em;}
    
    /* 
    Logos 
    */
    .logo-rodape{width: 20%; padding: 30px; margin-bottom: 2%; margin-left: 5%; margin-top: 2%;
            background-image: url(images/logo-luis_sindico-rodape.svg);
            background-repeat: no-repeat;
            background-position: left;
            background-size: 85%;
            }
    .logo{width: 30%; height: 30%; padding-top: 5%; padding-bottom: 20%; 
                background-image: url(images/logo-luis_sindico.svg);           
                background-repeat: no-repeat;
                background-position: center;
                background-size: 85%;
                margin-left: 30%;
                }
    .logo-topo{width: 40%; height: 40%; padding-top: 1%; padding-bottom: 25%; 
                background: url(images/logo-luis_sindico-topo.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100%;
                margin-left: 32%;
                margin-top: -4%;
                }
    
        
    /* 
Icones 
*/
    .adm{
        min-width:50%; min-height: 50%; padding-top: 5%; padding-bottom: 20%; padding-left: 0;
        background-position: center; background-size: 20%;
        background: url(images/servicos-administrativos.svg); background-repeat: no-repeat;
        }
        .adm-home{
        min-width:50%; min-height: 50%; padding-top: 20%; padding-bottom: 20%; padding-left: 0;
        background: url(images/servicos-administrativos.svg); background-repeat: no-repeat;
        background-position: center; background-size: 40%;
        }
    .fin{
        min-width:50%; min-height: 50%; padding-top: 5%; padding-bottom: 20%; padding-left: 0;
        background-position: center; background-size: 20%;
        background: url(images/servicos-financeiros.svg); background-repeat: no-repeat;
        }
        .fin-home{
        min-width:100%; min-height: 100%; padding-top: 20%; padding-bottom: 20%; padding-left: 0;
        background: url(images/servicos-financeiros.svg); background-repeat: no-repeat;
        background-position: center; 
        }
    .gpes{
        min-width:50%; min-height: 50%; padding-top: 5%; padding-bottom: 20%; padding-left: 0;
        background-position: center; background-size: 20%;
        background: url(images/servicos-gestaopessoal.svg); background-repeat: no-repeat;
        }
        .gpes-home{
        min-width:100%; min-height: 100%; padding-top: 20%; padding-bottom: 20%; padding-left: 0;
        background: url(images/servicos-gestaopessoal.svg); background-repeat: no-repeat;
        background-position: center; 
        }
    .jur{
        min-width:50%; min-height: 50%; padding-top: 5%; padding-bottom: 20%; padding-left: 0;
        background-position: center; background-size: 20%;
        background: url(images/servicos-juridicos.svg); background-repeat: no-repeat;
        }
        .jur-home{
        min-width:100%; min-height: 100%; padding-top: 20%; padding-bottom: 20%; padding-left: 0;
        background: url(images/servicos-juridicos.svg); background-repeat: no-repeat;
        background-position: center; 
        }
    .cont{
        min-width:50%; min-height: 50%; padding-top: 5%; padding-bottom: 20%; padding-left: 0;
        background-position: center; background-size: 20%;
        background: url(images/servicos-contato.svg); background-repeat: no-repeat;
        }   
      /* Menu */
      .button_container {
  	  position: fixed;
	  top: 4%;
	  right: 5%;
	  height: 27px;
	  min-width: 35px;
	  cursor: pointer;
	  z-index: 999;
	  -webkit-transition: opacity .25s ease;
	  transition: opacity .25s ease;
	   }
        .overlay nav {
	  position: relative;
	  height: 40%;
	   min-width: 100%;
	  top: 35%;
	  -webkit-transform: translateY(-50%);
			  transform: translateY(-50%);
	  font-size: 120%;
	  text-align: center; 
	   }
    }

/* TABLETS
------------------------------*/
@media screen and (min-width:598px) and (max-width:800px){
        
        /* 
Banner 
*/
#banner{
    width: 100%;
    height: 400px;
    z-index: 1;
    margin-top: -62px;
    position: relative;
    }
     .banner-esquerda{min-width: 45%; min-height: 100%;
        background-image:url(images/foto-luisfernando_sindicoprofissional.jpg); background-position: top; background-repeat: no-repeat; background-size:cover;float: left; z-index: 1;}
    .banner-direita{min-width: 55%; min-height: 100%; background-color: #00609e; float: left; z-index: 1;}
    
    /* Parte de Texto do Banner */
    #banner-chamada{width: 56%; position: absolute; border: 3px solid #fff; margin-top: 22%; margin-left:40%; z-index: 1;}
        .banner-titulo{height: 180px;  width: 92%; vertical-align: middle; display: table-cell; position: relative;}
        .banner-titulo h1{font-family: 'Anton', sans-serif; font-weight: lighter; font-size: 1em;
            color: #fff; letter-spacing: 1px; text-align: center; font-weight: lighter; padding: 15px; width: 80%; margin: 0 auto;}
        
        .banner-subtitulo{
            background-color: #fff; opacity: 0.8; height: 180px;
            vertical-align: middle; display: table-cell;
            position: relative; width: auto;
            }
            .banner-subtitulo p{
            width: auto;    
            text-align: center;
            text-transform: uppercase; font-size: 0.6em;
            line-height: 1.2em; margin-left: -48px; margin-right: -48px;
            transform: rotate(-90deg);
            -webkit-transform: rotate(-90deg); /* Safari/Chrome */
            -moz-transform: rotate(-90deg); /* Firefox */
            -o-transform: rotate(-90deg); /* Opera */
            -ms-transform: rotate(-90deg); /* IE 9 */
            }
    
    /* 
    Logos 
    */
    .logo-rodape{width: 20%; padding: 30px; margin-bottom: 2%; margin-left: 5%; margin-top: 2%;
            background-image: url(images/logo-luis_sindico-rodape.svg);
            background-repeat: no-repeat;
            background-position: left;
            background-size: 85%;
            }
    .logo{width: 40%; height: 40%; padding-top: 25%; padding-bottom: 20%; 
                background-image: url(images/logo-luis_sindico.svg);           
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100%;
                margin-left: 30%;
                }
    .logo-topo{width: 50%; height: 50%; padding-top: 28%; padding-bottom: 15%; 
                background: url(images/logo-luis_sindico-topo.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100%;
                margin-left: 15%;
                }

    /* 
Serviços
*/
#servicos{
    max-width:90%;
    padding-left: 5%;
    padding-right: 5%;
    text-align:justify;
    padding-top: 30px;
    }
    
    .flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 300px;
    position: relative;
    }
    .flex-item {
    width: 25%;
    height: 300px;
    margin: 5px;
    text-align: center;
    }
    .flex-item a{text-decoration: none;}
    .itens h2{ font-size: 95%; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s; }
    .itens:hover h2{color: #00609e; }


     /* Area de Texto principal */   
    #principal {
	max-width:100%;
	float:left;
    padding-left: 5%;
    padding-right: 5%;
    text-align:justify;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-bottom: 5%;
    margin-top: -20%;
	}    
    
    #topo{min-width: 100%;}
  /* 
Biografia
*/ 
#auxiliar {
    position: relative;
    margin: 0 auto;
   	min-width: 75%;
    margin-left: 8%;
    margin-right: 6%;
    margin-top: 15%;
    z-index: 5;
	}
        
    #auxiliar h2{color: #000;}
    .conteudo-auxiliar{min-width: 100%;  margin-right: 5%; line-height: 1.8em;
    background-color: rgba(229, 250, 255, 0.8); }
    #principal h3{text-align: left;}
/* 
Rodape
*/     
#rodape {
	background:#00609e;
	width:100%;
	height:180px;
	position: absolute;
	bottom: 0; /**/ 
	text-align: left;
    margin-top: 100px;
	}
    .conteudo-rodape{display: none;}
    
    
    /* Menu */
      .button_container {
  	  position: fixed;
	  top: 4%;
	  right: 5%;
	  height: 27px;
	  min-width: 35px;
	  cursor: pointer;
	  z-index: 999;
	  -webkit-transition: opacity .25s ease;
	  transition: opacity .25s ease;
	  }
      .overlay nav {
	  position: relative;
	  min-height: 50%;
	   min-width: 100%;
	  top: 35%;
	  -webkit-transform: translateY(-50%);
	  transform: translateY(-50%);
	  font-size: 120%;  
	  text-align: center; 
	   }
    
    
    .frase-menu{width: 80%; margin: 0 auto; color: #000; margin-bottom: 2%; margin-top: 5%;}
    
    
    /* 
Topo de Servicos e Blog
*/
#topo {
	width: 100%;
	height:60px;
	text-align:right;
	padding-top:1px;
	}
    #topo-blog{margin-top: -20px;width: 100%; height: 200px; background-color: rgba(229, 250, 255, 0.8); margin-bottom: 10%;margin-top: -84px;}
    #topo-servicos{width: 100%; height: 200px; background-color: rgba(229, 250, 255, 0.8); margin-bottom: 200px; margin-top: -62px;}
        .topo-esquerda{width: 35%; float: left; height: 200px;}
        .topo-direita{background-color: #00609e; width: 65%; float: left; height: 200px;}
    

        /* Topo */
        .topo-chamada{border: 3px solid #fff; z-index: 1; text-align: center;
                 height: auto; padding: 10px 10px 10px 125px; float: left; position: absolute; margin-left: 30%; margin-top: 65px; width: 48%;}
    .topo-chamada h1{ font-size: 1.5em;}
                .banner-titulo{position: relative; }
                .banner-titulo h1{color: #fff; letter-spacing: 1px; text-align: center; font-weight: lighter; margin: 0 auto; }

        #cabecalho{width: 100%; margin-bottom: 15%;}
        .icone{width: 15%; float: left;}
        .texto{width: 85%; float:left; padding-top: 0.1px; margin-bottom: 12%; }
        .texto h3{margin-top: -15px;}
        #servicos p, ul, li{margin-bottom: 20px; font-size: 1em;}
/* 
Blog
*/
.blogtitulo{font-size: 2.5em; text-align: left;}
.blogsub{font-size: 1.5em; margin-top: -25px;}
.blogintro{font-size: 1.2em; margin-top: 2%; margin-bottom: 2%;}
.blogdestaque{max-height: 400px; max-width: 100%;text-align: center; margin-bottom: 1%; position: relative;}

.seta{color:#000; width: 100%; padding: 15px; float: left; font-family: 'Anton', sans-serif; font-weight: lighter;
        font-size: 1.2em; padding-bottom: 20%; }
.setadireita{text-align: right; color:000; width: 95%; padding: 15px; margin-left: 1%; float: left;
        font-family: 'Anton', sans-serif; font-weight: lighter; font-size: 1.2em; padding-bottom: 20%; margin-bottom: 2%; }
.seta a{color:#00b1c6; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s; }
.setadireita a{color:#00b1c6; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s; }
.seta a:hover{ color: #00609e;}
.setadireita a:hover{ color: #00609e;}

.fa-long-arrow-right, .fa-long-arrow-left{color:#FBD71A;font-size: 1.5em;}

.post a{color:#000; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */transition: 1s;}

        
}