@charset "utf-8";

#paginas { float: left; width: 100%; padding: 70px 0 55px; min-height: 300px;}

#titulo1 { float: left; width: 100%;}
#titulo1 h1 { float: left; width: 100%; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 3em; line-height: 1; color: #1A1A1A;}
#titulo1 h1.cor1 { color: #FFCC29;}
#titulo1 h2 { float: left; width: 100%; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 4em; line-height: 1; color: #FFCC29;}
#titulo1 h3 { float: left; width: 100%; text-align: center; text-transform: uppercase; font-weight: bold; font-size: 3em; line-height: 1; color: #1A1A1A;}
#titulo1 h4 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 3em; line-height: 1; color: #1A1A1A;}
#titulo1 strong { float: left; width: 100%; height: 20px; margin: 10px 0 0; background-image: url("../imagens/icoTitulo1.png"); background-repeat: no-repeat; background-position: 50%;}
#titulo1.margem1 { margin: 60px 0 0;}
#titulo1.margem2 { margin: 60px 0 30px;}
#titulo1.margem3 { margin: 10px 0 30px;}

#texto1 { float: left; width: 100%;}
#texto1 h3 { float: left; width: 100%; margin: 20px 0 0; text-align: center; font-size: 1.2em; color: #383746;}
#texto1 h3 strong { text-transform: uppercase;}
#texto1 h3 a { font-weight: bold; color: #BF3D40;}
#texto1 h3 a:hover { text-decoration: underline;}
#texto1 h5 { float: left; width: 100%; margin: 20px 0 0; text-align: center; font-size: 1.2em; color: #383746;}
#texto1 h5 a:hover { color: #427BF0;}

#margem { float: left; width: 100%; height: 170px;}
#margem.desativa { display: none;}

#localizacao { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 15;}
#localizacao .fundo { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-image: url("../imagens/localizacao.png"); background-repeat: no-repeat; background-position: 50%; z-index: 1;}
#localizacao .conteudo { float: left; width: 30%; margin: 70px 0 0 32%; padding: 20px 3% 40px; background-color: #FFFFFF; position: relative; z-index: 2; -webkit-border-radius: 2px; -webkit-border-top-left-radius: 20px; -moz-border-radius: 2px; -moz-border-radius-topleft: 20px; border-radius: 2px; border-top-left-radius: 20px;}
#localizacao .conteudo .logo { float: left; width: 100%; padding: 10px 0 30px; text-align: center;}
#localizacao .conteudo .descricao { float: left; width: 100%;}
#localizacao .conteudo .descricao h3 { float: left; width: 100%; font-size: 1em; color: #555555;}
#localizacao .conteudo .form { float: left; width: 100%;}
#localizacao .conteudo .form .escolha { float: left; width: 99.5%; height: 60px; padding: 3px 2% 0; margin: 5px 0; border: 1px solid #1A1A1A; font-family: 'Heebo', sans-serif; font-size: 1.2em; outline: 0;}
#localizacao .conteudo .form .escolha:focus { border: 1px solid #0074FF;}
#localizacao .conteudo .form .botao { float: left; padding: 15px 15px 13px; margin: 5px 0 0; background-color: #1A1A1A; font-family: 'Heebo', sans-serif; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #F7DA5A; cursor: pointer; outline: 0; border: 0;}
#localizacao .conteudo .form .botao:hover { background-color: #F7DA5A; color: #1A1A1A;}


#central { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 15; display: none;}
#central .fechar1 { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.70); z-index: 1; cursor: crosshair;}
#central .fechar2 { position: absolute; width: 30px; height: 30px; top: 15px; right: 15px; background-image: url("../imagens/icoFechar.png"); background-size: 28px; background-repeat: no-repeat; background-position: 50%; cursor: pointer;}
#central .conteudo { float: left; width: 30%; margin: 30px 0 0 32%; padding: 40px 3%; background-color: #FFFFFF; position: relative; z-index: 2; -webkit-border-radius: 2px; -webkit-border-top-left-radius: 20px; -moz-border-radius: 2px; -moz-border-radius-topleft: 20px; border-radius: 2px; border-top-left-radius: 20px;}
#central .conteudo .descricao { float: left; width: 100%;}
#central .conteudo .descricao h3 { float: left; width: 100%; font-weight: bold;}
#central .conteudo .instrucao { float: left; width: 94%; padding: 13px 3% 10px; margin: 25px 0 0; background-color: #1A1A1A; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #F7DA5A; -webkit-border-radius: 10px; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius: 10px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-radius: 10px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px;}
#central .conteudo .form { float: left; width: 100%;}
#central .conteudo .form .c1 { float: left; width: 100%;}
#central .conteudo .form .nomecampo { float: left; width: 100%; margin: 15px 0 0; font-weight: bold; font-size: 1.2em; color: #1A1A1A;}
#central .conteudo .form .nomecampo em { font-style: normal; color: #D82528;}
#central .conteudo .form .campo { float: left; width: 95.5%; height: 60px; padding: 3px 2% 0; border: 1px solid #1A1A1A; font-family: 'Heebo', sans-serif; font-size: 1.2em; outline: 0;}
#central .conteudo .form .campo:focus { border: 1px solid #0074FF;}
#central .conteudo .form .botao { float: left; padding: 15px 15px 13px; margin: 10px 0 0; background-color: #1A1A1A; font-family: 'Heebo', sans-serif; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: #F7DA5A; cursor: pointer; outline: 0; border: 0;}
#central .conteudo .form .botao:hover { background-color: #F7DA5A; color: #1A1A1A;}
#central.ativa { display: block;}


#banners { float: left; width: 100%; min-height: 65px; position: relative; overflow: hidden; z-index: 1;}
#banners .slides, .slides > li, .flex-control-nav { float: left; margin: 0; padding: 0; list-style: none;}
#banners .slides > li { display: none; -webkit-backface-visibility: hidden;}
#banners .slides > li img { float: left; width: 100%;}
#banners .flex-direction-nav { display: none;}
#banners .flex-control-nav { position: absolute; width: 100%; bottom: 25px; left: 0; text-align: center; z-index: 10;}
#banners .flex-control-nav li { margin: 0 2px; display: inline-block;}
#banners .flex-control-paging li a { width: 15px; height: 15px; background-color: #1A1A1A; font-size: 0; cursor: pointer; display: block; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#banners .flex-control-paging li a:hover { background-color:#FFCC29;}
#banners .flex-control-paging li a.flex-active { background-color:#FFCC29;}
#banners.control .flex-control-nav { display: none;}


#tipos { float: left; width: 100%; height: 95px; background-color: #364587;}
#tipos .nome { float: left; padding: 32px 50px 25px; background-color: #FFCC29; text-transform: uppercase; font-weight: bold; font-size: 1.7em; color: #1A1A1A;}
#tipos .ico { float: left; width: 14px; height: 95px; background-image: url("../imagens/icoPlano.png"); background-repeat: no-repeat; background-position: 50%;}
#tipos .opcao { float: left; width: 190px; padding: 25px 0;}
#tipos .opcao .botao { float: left; width: 100%;}
#tipos .opcao .botao strong { float: left; width: 100%; font-weight: bold; text-align: center; font-size: 1.7em; color: #FFFFFF;}
#tipos .opcao .botao b { float: left; width: 50px; height: 7px; margin: 0 70px; background-color: #FFCC29; -webkit-border-radius: 1000px; -moz-border-radius: 1000px; border-radius: 1000px;}
#tipos .opcao.atendimento:hover .botao strong { color: #FFCC29;}
#tipos .opcao.atendimento { float: right; background-color: #212B56;}
#tipos .barra { float: left; width: 1px; height: 95px; background-color: #212B56;}


#empresa { float: left; width: 70%; padding: 70px 15% 55px;}
#empresa .texto { float: left; width: 100%;}
#empresa .texto h5 { float: left; width: 100%; padding: 30px 0 0; text-align: center; font-size: 1.3em; color: #1A1A1A;}
#empresa .botao { float: left; width: 100%; padding: 50px 0 20px; text-align: center;}
#empresa .botao a { padding: 20px 25px 18px; border: 2px solid #1A1A1A; font-weight: bold; font-size: 1.3em; color: #1A1A1A; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#empresa .botao a:hover { background-color: #1A1A1A; color: #FFCC29;}


#planos { float: left; width: 90%; padding: 60px 5%; background-image: url("../imagens/bg-planos.png");}
#planos .escolha { float: left; width: 100%; margin: 30px 0 0; text-align: center;}
#planos .escolha a { padding: 10px 20px 8px; background-color: #FFFFFF; font-weight: bold; font-size: 1.2em; color: #000000;}
#planos .escolha a.ativo { background-color: #FFCC29;}

#planos .tab { float: left; width: 25%; margin: 20px 0 0;}
#planos .tab .imagem { float: left; width: 100%;}
#planos .tab .valor { float: left; width: 70%; margin: 10px 12% 0; background-color: #F3F3F3; position: relative; -webkit-border-radius: 20px; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 20px; -moz-border-radius-bottomleft: 0; border-radius: 20px; border-bottom-left-radius: 0;}
#planos .tab .valor h3 { float: left; width: 100%; padding: 2px 0 0; font-weight: bold; text-align: center; font-size: 2em; color: #5A5E6F;}
#planos .tab .valor h4 { position: absolute; bottom: 3px; left: 3px; font-size: 1em; color: #555555;}

#cameras { float: left; width: 90%; padding: 70px 5% 55px;}
#cameras .conteudo { display: flex; flex-wrap: wrap; justify-content: center; float: left; width: 100%; margin: 21px 0 0;}
#cameras .tab { float: left; width: 48%; padding: 15px; margin: 10px; border-radius: 10px; box-sizing: border-box; cursor: pointer;}
#cameras .tab .nome { float: left; width: 100%; text-transform: uppercase; text-align: center;}
#cameras .tab .iframe { position: relative; float: left; width: 100%; padding-bottom: 55%; margin: 4px 0 0; overflow: hidden;}
#cameras .tab .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1;}
#cameras .tab .iframe span { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; background-color: rgb(90 90 90 / 20%); background-image: url('../imagens/play.png'); background-repeat: no-repeat; background-position: 50%;}

#blog { float: left; width: 70%; padding: 60px 15%;}
#blog .tab { float: left; width: 100%;}
#blog .tab .imagem { float: left; width: 28%;}
#blog .tab .imagem .img { float: left; width: 100%;}
#blog .tab .descricao { float: right; width: 70%;}
#blog .tab .descricao h2 { float: left; width: 100%; font-weight: bold; line-height: 1.3; font-size: 2em; color: #1A1A1A;}
#blog .tab .descricao h3 { float: left; width: 100%; margin: 12px 0 10px; font-size: 1em; color: #555555;}
#blog .tab .descricao a { float: left; padding: 14px 10px 13px; background-color: #1A1A1A; text-transform: uppercase; font-weight: bold; font-size: 1em; color: #FFCC29;}
#blog .tab .descricao a:hover { background-color: #FFCC29; color: #1A1A1A;}
#blog .linha { float: left; width: 100%; height: 5px; margin: 30px 0; background-color: #1A1A1A; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}


#exibiblog { float: left; width: 100%; min-height: 300px; padding: 100px 0 15px;}
#exibiblog .esquerda { float: left; width: 30%; margin: 0 0 0 1%;}
#exibiblog .direita { float: right; width: 66%; margin: 0 1% 0 0;}
#exibiblog .video { float: left; width: 100%;}
#exibiblog .video .iframe { position: relative; width: 100%; padding-bottom: 55%; margin: 8px 0; overflow: hidden;}
#exibiblog .video .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#exibiblog .imagem { float: left; width: 100%; position: relative; overflow: hidden;}
#exibiblog .imagem .img { float: left; width: 100%;}
#exibiblog .imagem .obs { position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background-color: rgba(0,0,0,0.50); background-image: url(../imagens/icoZoom.png); background-repeat: no-repeat; background-position: 50%; z-index: 100;}
#exibiblog .imagem:hover .obs { left: 0;}
#exibiblog .subitulo { float: left; width: 100%; margin: 2px 0 0;}
#exibiblog .subitulo h1 { float: left; width: 100%; text-transform: uppercase; font-weight: bold; line-height: 1.3; font-size: 1.6em; color: #111111;}
#exibiblog .subitulo h2 { float: left; width: 100%; margin: 10px 0 0; font-size: 1.2em; color: #555555;}
#exibiblog .compartilhe { float: left; width: 100%; padding: 9px 0 5px; margin: 10px 0; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; color: #000000;}
#exibiblog .compartilhe strong { float:left; padding: 9px 5px 0 0; font-weight:normal; font-size:0.9em; color:#555555;}
#exibiblog .compartilhe img { float: left; margin-right: 3px; margin-bottom: 3px; opacity:0.7;}
#exibiblog .compartilhe img:hover { opacity: 1; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; -moz-transform: scale(1.2) rotate(-720deg); -webkit-transform: scale(1.2) rotate(-720deg); -o-transform: scale(1.2) rotate(-720deg); -ms-transform: scale(1.2) rotate(-720deg); transform: scale(1.2) rotate(-720deg);}
#exibiblog .compartilhe a.zap { display: none;}
#exibiblog .descricao { float: left; width: 100%; font-size: 1em; line-height: 1.8; color: #333333;}
#exibiblog .descricao iframe { max-width: 100%;}
#exibiblog .descricao img { max-width: 100%;}
#exibiblog .descricao strong { text-transform: uppercase;}
#exibiblog .descricao li { float: left; width: 100%; margin: 5px 0 0;}
#exibiblog .descricao a:hover { color: #FF0000;}
#exibiblog .galeria { float: left; width: 100%; margin: 20px 0 0;}
#exibiblog .galeria .imagem { float: left; width: 23%; margin: 0 0 20px 1%; background-color: #FFFFFF; position: relative; overflow: hidden;}
#exibiblog .galeria .imagem .img { float: left; width: 96%; margin: 2%;}
#exibiblog .galeria .imagem .obs { position: absolute; width: 96%; height: 96%; top: 2%; left: -100%; background-color: rgba(0,0,0,0.50); background-image: url(../imagens/icoZoom.png); background-repeat: no-repeat; background-position: 50%; z-index: 100;}
#exibiblog .galeria .imagem:hover .obs { left: 2%;}
#exibiblog .galeria .linha2 { float: left; width: 100%; height: 1px; display: none;}
#exibiblog .galeria .linha4 { float: left; width: 100%; height: 1px;}


#suporte { float: left; width: 70%; padding: 60px 15% 35px; background-color: #F7DA5A;}
#suporte .descricao { float: left; width: 100%;}
#suporte .descricao h3 { float: left; width: 70%; margin: 20px 15% 0; text-align: center; font-size: 1.3em; color: #1A1A1A;}
#suporte .botoes { float: left; width: 100%; padding: 40px 0 20px; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.1em; color: #1A1A1A;}
#suporte .botoes a { padding: 18px 15px 15px; border: 2px solid #1A1A1A;}
#suporte .botoes a:hover { background-color:  #1A1A1A; color: #F7DA5A;}
#suporte .sociais { float: left; width: 100%; padding: 30px 0 0; text-align: center;}
#suporte .sociais .img { margin: 0 4px;}


#diversos { float: left; width: 80%; padding: 60px 10% 50px;}


#downloads { float: left; width: 94%; padding: 70px 3% 55px;}
#downloads .tab { float: left; width: 23%; padding: 1%; margin: 20px 0 0;}
#downloads .tab .imagem { float: left; width: 100%;}
#downloads .tab .imagem .img { float: left; width: 100%;}
#downloads .tab .descricao { float: left; width: 100%;}
#downloads .tab .descricao h2 { float: left; width: 100%; margin: 5px 0 3px; font-size: 1.1em;}
#downloads .tab .descricao a { float: left; padding: 5px 10px; border: 1px solid #000000;}
#downloads .tab .descricao a:hover { background-color: #F7DA5A; border: 1px solid #D4BA4A;}


#contato { float: left; width: 80%; padding: 60px 10% 50px;}
#contato .descricao { float: left; width: 30%;}
#contato .descricao h3 { float: left; width: 100%; font-weight: bold; font-size: 1.8em; color: #1A1A1A;}
#contato .descricao h4 { float: left; width: 100%; margin: 10px 0 0; font-size: 1em; color: #444444;}
#contato .descricao h4 strong { color: #1A1A1A;}
#contato .descricao h4.h:hover strong { color: #0093FF;}
#contato .descricao h4.h:hover a { color: #0093FF;}
#contato .facebook { float: right; width: 315px;}


#form { float: left; width: 50%; margin: 20px 25%;}
#form .c1 { float: left; width: 96%; margin: 30px 0 0 2%;}
#form .c2 { float: left; width: 47%; margin: 30px 0 0 2%;}
#form .nomecampo { float: left; width: 99%; margin: 0 0.5% 5px; font-size: 1.3em; color: #1A1A1A;}
#form .nomecampo em { font-weight: bold; font-style: normal; color: #D41550;}
#form .campo { float: left; width: 97.5%; height: 75px; padding: 0 1%; background-color: #FFFFFF;  border: 1px solid #AAAAAA; font-family: 'Heebo', sans-serif; font-size: 1.2em; outline: 0;}
#form .campo:focus { border: 1px solid #0093FF;}
#form .textarea { float: left; width: 97.5%; height: 150px; padding: 10px 1%; background-color: #FFFFFF;  border: 1px solid #AAAAAA; font-family: 'Heebo', sans-serif; font-size: 1.2em; outline: 0;}
#form .textarea:focus { border: 1px solid #0093FF;}
#form .botao { float: left; padding: 22px 20px 18px; margin: 15px 0 0 2%; background-color: #1A1A1A; font-family: 'Heebo', sans-serif; text-transform: uppercase; font-weight: bold; font-size: 1.3em; color: #F7DA5A; cursor: pointer; outline: 0; border: 0;}
#form .botao:hover { background-color: #F7DA5A; color: #1A1A1A;}


#mobile { float: left; width: 100%; display: none;}
#desktop { float: left; width: 100%;}

@media only screen and (max-width: 1200px) {
     #contato { width: 94%; padding: 60px 3% 50px;}
     #central .conteudo { width: 40%; margin: 30px 0 0 27%;}
}
@media only screen and (max-width: 1100px) {
     #localizacao .conteudo { width: 50%; margin: 50px 0 0 22%;}

     #central .conteudo { width: 84%; margin: 20px 0 0 5%;}

     #tipos { height: auto;}
     #tipos .nome { width: 100%; padding: 32px 0 25px; text-align: center;}
     #tipos .ico { display: none;}

     #empresa { width: 96%; padding: 70px 2% 55px;}
     #cameras { width: 96%; padding: 60px 2%;}
     #planos { width: 96%; padding: 60px 2%;}
     #blog { width: 96%; padding: 60px 2%;}
     #suporte { width: 96%; padding: 60px 2% 50px;}

     #contato { width: 96%; padding: 60px 2% 50px;}
     #contato { padding: 40px 2%;}
     #contato .descricao { width: 100%; margin: 0 0 40px;}
     #contato .facebook { float: left; width: 100%;}
}
@media only screen and (max-width: 1000px) {
     #mobile { display: block;}
     #desktop { display: none;}

     #tipos .nome { padding: 60px 0 15px;}
}
@media only screen and (max-width: 900px) {
     #empresa { padding: 40px 2% 35px;}
     #cameras { padding: 40px 2% 35px;}

     #planos .tab .valor { width: 90%; margin: 10px 0 0;}
     #planos .tab .valor h3 { padding: 10px 0 8px; font-size: 1.4em;}

     #exibiblog .compartilhe a.zap { display: block;}
}
@media only screen and (max-width: 800px) {
     #tipos .opcao { width: 100%; padding: 15px 0 13px;}
     #tipos .opcao .botao b { display: none;}
     #tipos .opcao .botao strong { font-size: 1.3em;}
     #tipos .opcao.atendimento { display: none;}
     #tipos .barra { width: 100%; height: 1px;}

     #blog .tab .descricao h2 { font-size: 1.3em;}
}
@media only screen and (max-width: 700px) {
     #titulo1.margem1 { margin: 40px 0 0;}
     #titulo1.margem2 { margin: 40px 0 30px;}

     #titulo1 h1 { font-size: 2em;}
     #titulo1 h2 { font-size: 3em;}
     #titulo1 h3 { font-size: 2em;}
     #titulo1 h4 { font-size: 2em;}
     #empresa .texto h5 { font-size: 1.1em;}

     #tipos .nome { padding: 50px 0 15px;}

     #exibiblog { padding: 10px 0;}
	#exibiblog .esquerda { width: 98%;}
     #exibiblog .direita { float: left; width: 98%; margin: 0 0 0 1%;}
     #exibiblog .subitulo { margin: 20px 0 0;}

     #margem { height: 110px;}
}
@media only screen and (max-width: 600px) {
     #localizacao .conteudo { width: 70%; margin: 50px 0 0 12%;}

     #central .fechar2 { top: 8px; right: 8px;}

     #planos .tab { width: 50%;}

     #suporte .botoes { padding: 15px 0 0px;}
     #suporte .botoes a { float: left; width: 100%; padding: 18px 0 17px; margin: 5px 0 0; border: 1px solid #1A1A1A;}

     #cameras .tab { width: 100%; padding: 12px; margin: 5px 0;}
}
@media only screen and (max-width: 500px) {
     #planos .escolha a { padding: 10px 10px 8px; font-size: 1em;}

     #blog { padding: 30px 2%;}
     #blog .tab .imagem { width: 60%;}
     #blog .tab .descricao { width: 100%; margin: 20px 0 0;}

	#exibiblog .subitulo h1 { font-size: 1.4em;}
     #exibiblog .botoes { float: left; width: 100%;}
     #exibiblog .botoes .botao { width: 90%; padding: 17px 5% 15px; margin: 0 0 10px;}
	#exibiblog .galeria .imagem { width: 49%;}
	#exibiblog .galeria .linha2 { display: block;}
}
@media only screen and (max-width: 400px) {
     #localizacao .conteudo { width: 90%; margin: 50px 0 0 2%;}
}