/* ---------------------------------------------------------------------------------GERAL--------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; background:transparent;}	

html {
   height: 100%;
}
/* @import url('https://fonts.googleapis.com/css?family=Dosis:400,500,600,700'); */
body{	background-color: #ffffff;
		/* background-image: url(""); */
		/* background-repeat: ; */
		background-position: center top;
		/* margin:0px; padding: 0px;  */
		height:100%; vertical-align:top; text-align: center; 
		font-size: 100%; /* 16px */
		font-family: "Open Sans", serif; color:#000000;
		font-optical-sizing: auto;
}
body { overflow-X: hidden; }
/* ---------------------------------------------------------------------------------BASICO--------------------------------------------------------------------------------- */
#Crisoft	{margin: 0 auto;}
#Crisoft	table{border-spacing: 0px; }
#Crisoft	td{padding: 0px;}
#Crisoft	img{display: block; max-width: 100%;} /* não usar o max -width para loja virtual */
#Crisoft	h1{font-weight:normal; margin: 0 auto;}
#Crisoft	a{text-decoration:none;}
#Crisoft	address {font-style: normal;}
#Crisoft	figure {margin: 0 auto;}


#Crisoft	.tx48{font-size: 3em;} 		/* 48px; */		
#Crisoft	.tx36{font-size: 2.25em;} 	/* 36px; */		
#Crisoft	.tx32{font-size: 2em; } 	/* 32px; */
#Crisoft	.tx30{font-size: 30px; } 	/* 30px; */
#Crisoft	.tx24{font-size: 1.5em; } 	/* 24px; */
#Crisoft	.tx22{font-size: 22px; } 	/* 24px; */
#Crisoft	.tx18{font-size: 18px;} 	/* 18px; */
#Crisoft	.tx16{font-size:1em;}		/* 16px; */
#Crisoft	.tx14{font-size: 0.875em;} 	/* 14px; */

#Crisoft	.for1{color:#000000;} /* formato, alinhamento e cor */
#Crisoft	.for2{color:#ffffff;} /* formato, alinhamento e cor */
#Crisoft	.for3{color:#545454;} /* formato, alinhamento e cor */
#Crisoft	.for4{color:#ff6633;} /* formato, alinhamento e cor */

#Crisoft	.bg1{background-color:#f5f5f5;} /* formato, alinhamento e cor */
#Crisoft	.bg2{background-color:#ff6633;} /* formato, alinhamento e cor */
#Crisoft	.bg3{background-color:#ffffff;} /* formato, alinhamento e cor */
#Crisoft	.bg4{background-color:#545454;} /* formato, alinhamento e cor */

#Crisoft	.bk1{background-image: url("../img/bk1.png"); background-repeat: no-repeat; background-position: left top;} /* formato, alinhamento e cor */
#Crisoft	.bk2{background-image: url("../img/flexabanner.png"); background-repeat: no-repeat; background-position: right bottom;} /* formato, alinhamento e cor */
#Crisoft	.bk4{background-image: url("../img/bk4.png"); background-repeat: no-repeat; background-position: right bottom;} /* formato, alinhamento e cor */
	
#Crisoft	.line24{line-height:24px;} /* formato, alinhamento e cor */	
#Crisoft	.line30{line-height:30px;} /* formato, alinhamento e cor */	
#Crisoft	.line36{line-height:36px;} 

#Crisoft	 img.center {display: block; margin-left: auto; margin-right: auto; }

#Crisoft	.menu1_bg{background-color:#152b61; height:40px; line-height:40px;}
#Crisoft	.menu1 a{padding-left:15px; padding-right:15px; font-size:18px; color:#ffffff;}
#Crisoft	.menu2 {padding-left:15px; padding-right:15px; font-size:18px; color:#ffffff;} /* com ponto */	
#Crisoft	.menu1:hover a{background-color:#e00340; color:#ffffff;}

#Crisoft	.pad10{padding-left:10px; padding-right:10px; }
#Crisoft	.pad15{padding-left:15px; padding-right:15px; }
#Crisoft	.pad20{padding-left:20px; padding-right:20px; }
#Crisoft	.pad20b{padding-left:20px; padding-right:20px; }
#Crisoft	.pad40{padding-left:40px; padding-right:40px; }
#Crisoft	.pad40b{padding-left:40px; padding-right:40px; }
#Crisoft	.pad50{padding-left:50px; padding-right:50px; }
#Crisoft	.pad60{padding-left:0px; padding-right:60px; }
#Crisoft	.pad70{padding-left:70px; padding-right:60px; }
#Crisoft	.pad80{padding-left:80px; padding-right:80px; }

#Crisoft	 .wr{ white-space:pre-wrap;}
#Crisoft	.b100{font-weight:100;} /* Thin */
#Crisoft	.b200{font-weight:200;} /* ExtraqLight */
#Crisoft	.b300{font-weight:300;} /* Light */
#Crisoft	.b400{font-weight:400;} /* Regular */
#Crisoft	.b500{font-weight:500;} /* Medium */
#Crisoft	.b600{font-weight:600;} /* SemiBold */
#Crisoft	.b700{font-weight:700;} /* Bold */
#Crisoft	.b800{font-weight:800;} /* ExtraBold 800 */
#Crisoft	.i{font-style:italic;}
#Crisoft	.none{text-decoration:none;}
#Crisoft	.u{text-decoration:underline;}

#Crisoft	.h12{height:12px;}
#Crisoft	.h16{height:16px;}
#Crisoft	.h24{height:24px;}
#Crisoft	.h32{height:32px;}
#Crisoft	.h48{height:48px;}
#Crisoft	.h60{height:60px;}
#Crisoft	.h80{height:80px;}
#Crisoft	.h100{height:100px;}
#Crisoft	.h175{height:175px;}

#Crisoft	.table {} 	
#Crisoft	.table_td {} 

#Crisoft	.center {text-align: center;}
#Crisoft	.left {text-align: left;}
#Crisoft	.right {text-align: right;}

#Crisoft	.baseul_al{overflow: hidden;} 	
#Crisoft	.baseul_al ul{font-size:0;} 	
#Crisoft	.baseul_al ul li{display: inline-block; list-style: none; vertical-align: top;} 	
#Crisoft	.baseul_al ul li a{display: inline-block; text-decoration: none;} 

#Crisoft	.baseul_al2{overflow: hidden;} 	
#Crisoft	.baseul_al2 ul{} 	
#Crisoft	.baseul_al2 ul li{display: inline-block; list-style: none; vertical-align: top;} 	
#Crisoft	.baseul_al2 ul li a{display: inline-block; text-decoration: none;} 
 
#Crisoft	.baseul_al3{overflow: hidden;} 	
#Crisoft	.baseul_al3 ul{} 	
#Crisoft	.baseul_al3 ul li{display: inline-block; list-style: none; vertical-align: top;} 	
#Crisoft	.baseul_al3 ul li a{display: inline-block; text-decoration: none; margin-bottom:4px;} 
#Crisoft	.baseul_al3 li{margin-bottom:3px;}  

#Crisoft	.baseul_al4{overflow: hidden;} 	
#Crisoft	.baseul_al4 ul{} 	
#Crisoft	.baseul_al4 ul li{display: inline-block; list-style: none; vertical-align: middle;} 	
#Crisoft	.baseul_al4 ul li a{display: inline-block; text-decoration: none;} 

#Crisoft	.base_240{display: block; width:240px;}

#Crisoft_superior	{margin: 0 auto; z-index:3; position:relative;}
#Crisoft_superior	.base_superior{display: block; width:100%;  margin-top:0em;}

#Crisoft_principal	{margin: 0 auto; z-index:2; position:relative;}
#Crisoft_principal	.base_principal{display: block; width:100%;  margin-top:0em; margin-bottom:0em;}
#Crisoft_principal	.base_280{display: block; width:280px;}
#Crisoft_principal	.base_340{display: block; width:100%; max-width:340px;}
#Crisoft_principal	.base_360{display: block; width:100%; max-width:360px;}
#Crisoft_principal	.base_600{display: block; width:100%; max-width:600px;}
#Crisoft_principal	.base_865{display: block; width:100%; max-width:865px;}
#Crisoft_principal	.base_1024{display: block; width:100%; max-width:1024px;}
#Crisoft_principal	.base_1440{display: block; width:100%; max-width:1440px;}
#Crisoft_principal	.base_1600{display: block; width:100%; max-width:1600px;}
#Crisoft_principal	.base_1800{display: block; width:100%; max-width:1800px;}
			
#Crisoft_inferior	{margin: 0 auto; z-index:1; position:relative;}			
#Crisoft_inferior	.base_inferior{display: block; width:100%;  margin-top:0em;}

#Crisoft_popups	{margin: 0 auto; z-index:4; position:relative;}			
#Crisoft_popups	.base_popups{display: block; width:100%;}	

#Crisoft	.versite{display:block;}
#Crisoft	.vermobile{display:none;}
#Crisoft	.versite2{display:block;}
#Crisoft	.vermobile2{display:none;}
#Crisoft	.versite3{display:block;}
#Crisoft	.vermobile3{display:none;}
#Crisoft	.versite_sup{display:block;}
#Crisoft	.vermobile_sup{display:none;}
#Crisoft	.versiteimg{display:block;}
#Crisoft	.vermobileimg{display:none;}
	
/* ---------------------------------------------------------------------------------TELAS---------------------------------------------------------------------------------- */
@media only screen and (max-width: 1920px) { 
	body{font-size: 100%;}
}
@media only screen and (max-width: 1550px) { 
	#Crisoft	.versite3{display:none;}
	#Crisoft	.vermobile3{display:block;}
}
@media only screen and (max-width: 1359px) { 
	#Crisoft	.pad80{padding-left:40px; padding-right:40px; }
	#Crisoft	.pad20b{padding-left:0px; padding-right:0px; }
}
@media only screen and (max-width: 1282px) { 
	#Crisoft	.pad40{padding-left:10px; padding-right:10px; }
	#Crisoft	.versite_sup{display:none;}
	#Crisoft	.vermobile_sup{display:block;}
	.sidenavcrisoft_base{top:10px; right:10px;}
}
@media only screen and (max-width: 1079px) { 
	#Crisoft	.pad80{padding-left:10px; padding-right:10px; }
}
@media only screen and (max-width: 1023px) { 
	#Crisoft	.versite2{display:none;}
	#Crisoft	.vermobile2{display:block;}
	#Crisoft	.tx36{font-size: 24px; } 
	#Crisoft	.tx30{font-size: 24px; } 
	#Crisoft	.tx22{font-size: 18px; } 
}
@media only screen and (max-width: 800px) { /* Celular deitado */
	
	#Crisoft	.versiteimg{display:none;}
	#Crisoft	.vermobileimg{display:block;}
	#Crisoft	.table {display:block;} 	
	#Crisoft	.table_td {display:inline-block;} 
	#Crisoft	.baseul_contato ul{width:100%; max-width:495px;} 
	#Crisoft	.baseul_contato ul li{float:none;} 
	#Crisoft	.bk1{background-image: url("../img/bk1.png"); background-repeat: no-repeat; background-position: left top; background-size: 25%;}
	#Crisoft	.pad40b{padding-left:20px; padding-right:20px; }
}
@media only screen and (max-width: 640px) { /* IMAGEM BANNER MOBILE 640x743 */
	#Crisoft	.versite{display:none;}
	#Crisoft	.vermobile{display:block;}
	#Crisoft	.hide-on-mobile {display: none; }
	#Crisoft	.pad50{padding-left:10px; padding-right:10px; }
	
}
@media only screen and (max-width: 412px) { /* 412x743 CR */
	#Crisoft	.bg1{background-color:#e9e8e8;} /* formato, alinhamento e cor */
}
@media only screen and (max-width: 393px) { 
	
}
@media only screen and (max-width: 375px) { 
	
}
@media only screen and (max-width: 360px) { 
	
}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/*
	//efeitos
	//<div data-animate-scroll='{"x": "-200","y": "0", "alpha": "0", "duration": ".5"}'> - CHEGANDO PELA ESQUERDA
	//<div data-animate-scroll='{"x": "200", "y": "0", "alpha": "0", "duration": ".5"}'> - CHEGANDO PELA DIREITA
	//<div data-animate-scroll='{"alpha": "0", "rotationX":"90","z":"-30", "duration": ".5"}'> - DOBRANDO DE BAIXO PARA CIMA
	//<div data-animate-scroll='{"alpha": "0","y":"50", "duration": "1.75","scaleX": "0","scaleY": "0","ease": "Elastic.easeIn"}'> - ESTICANDO DO CENTRO
	//<div data-animate-scroll='{"x": "-300", "y": "-100", "scaleX": "0.85","scaleY": "0.85", "alpha": "0", "duration": "1","rotationY":"720","rotationX":"45","rotation":"45", "z":"-30"}'> - ROTACIONANDO ESQUERDO
	//<div data-animate-scroll='{"x": "300", "y": "100", "scaleX": "0.85","scaleY": "0.85", "alpha": "0", "duration": "1","rotationY":"720","rotationX":"45","rotation":"45", "z":"30"}'> - ROTACIONANDO DIREITO

/* Keyframes */
@keyframes aparecer {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes aparecerEExpandir {
    0% {transform: scale(0);opacity: 0;}
    100% {transform: scale(1);opacity: 1;}
}

@keyframes deslizarDaDireita {
    0% {transform: translateX(100%);opacity: 0;}
    100% {transform: translateX(0%);opacity: 1;}
}

@keyframes deslizarDaEsquerda {
    0% {transform: translateX(-100%);opacity: 0;}
    100% {transform: translateX(0%);opacity: 1;}
}

/* Classes de animação */
.crisoft-animado { opacity: 0;}

.crisoft-animado.crisoft-visivel {
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.crisoft-animado.crisoft-visivel.tipo_de_animacao_d {
    animation-name: deslizarDaDireita;
}

.crisoft-animado.crisoft-visivel.tipo_de_animacao_c {
    animation-name: aparecerEExpandir;
}

.crisoft-animado.crisoft-visivel.tipo_de_animacao_e {
    animation-name: deslizarDaEsquerda;
}

/* Classes adicionais para animações específicas */
.Crisoft_anime_centro {
    animation: aparecerEExpandir 2s forwards;
}

.Crisoft_anime_da_direita {
    animation: deslizarDaDireita 1s forwards;
}

.Crisoft_anime_da_direita_2s {
    animation: deslizarDaDireita 2s forwards;
}

.Crisoft_anime_da_esquerda {
    animation: deslizarDaEsquerda 1s forwards;
}

.Crisoft_anime_da_esquerda_2s {
    animation: deslizarDaEsquerda 2s forwards;
}

@-webkit-keyframes swing{
    15%{ -webkit-transform: translateX(5px);transform: translateX(5px); }
    30%{ -webkit-transform: translateX(-5px);transform: translateX(-5px);} 
    50%{ -webkit-transform: translateX(3px); transform: translateX(3px);}
    65%{ -webkit-transform: translateX(-3px);transform: translateX(-3px);}
    80%{ -webkit-transform: translateX(2px);transform: translateX(2px);}
    100%{-webkit-transform: translateX(0);transform: translateX(0);}
}
@keyframes swing{
    15%{-webkit-transform: translateX(5px);transform: translateX(5px);}
    30%{-webkit-transform: translateX(-5px);transform: translateX(-5px);}
    50%{-webkit-transform: translateX(3px);transform: translateX(3px);}
    65%{-webkit-transform: translateX(-3px);transform: translateX(-3px);}
    80%{-webkit-transform: translateX(2px);transform: translateX(2px);}
    100%{-webkit-transform: translateX(0);transform: translateX(0);}
}
.swing:hover{
        -webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}
#Crisoft	.transicao1:hover{-webkit-transition: 1.5s ease-out;-moz-transition: 1.5s ease-out;-o-transition: 1.5s ease-out;transition: 1.5s ease-out;	}
#Crisoft	.transicao2{-webkit-transition: 2.5s ease-out;-moz-transition: 2.5s ease-out;-o-transition: 2.5s ease-out;transition: 2.5s ease-out;}
#Crisoft	.transicao2:hover{-webkit-transition: 2.5s ease-out;-moz-transition: 2.5s ease-out;-o-transition: 2.5s ease-out;transition: 2.5s ease-out;	}
#Crisoft	.brilho:hover {-webkit-filter: brightness(1.2);-moz-filter: brightness(1.2);-ms-filter: brightness(1.2);-o-filter: brightness(1.2);filter: brightness(1.2);}
#Crisoft	.circle:hover{border-radius:50%; transition:all 0.3s ease;}
#Crisoft	.circle{border-radius:0%; transition:all 0.3s ease;}
#Crisoft	.border:hover{box-shadow: inset 0 0 0 25px #ffffff;}
#Crisoft	.sombra:hover{box-shadow:3px 3px #626262,4px 4px #626262,5px 5px #626262;-webkit-transform: translateX(-5px);transform: translateX(-5px);}

.brilho2::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-100em, 100em);
}
.brilho2 {
  position: relative;
  overflow: hidden;
}
.brilho2:hover::after, .brilho2:focus::after {
  animation: sheen 1s forwards;
}
@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(100em, -100em);
  }
}
.brilho3::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(100em, -100em);
}
.brilho3 {
  position: relative;
  overflow: hidden;
}
.brilho3:hover::after, .brilho3:focus::after {
  animation: sheen3 1s forwards;
}
@keyframes sheen3 {
  100% {
    transform: rotateZ(60deg) translate(-100em, 100em);
  }
}
/*
<script>
	$(document).ready(function() {
		function checkVisibility() {
			$('.crisoft-animado').each(function() {
				var elementTop = $(this).offset().top;
				var elementBottom = elementTop + $(this).outerHeight();
				var viewportTop = $(window).scrollTop();
				var viewportBottom = viewportTop + $(window).height();

				if (elementBottom > viewportTop && elementTop < viewportBottom) {
					$(this).addClass('crisoft-visivel');
				}
			});
		}

		$(window).on('scroll resize', function() {
			checkVisibility();
		});

		checkVisibility();
	});
</script>

<div class="section crisoft-animado tipo_de_animacao_d">
        Deslizar da Direita
    </div>

    <div class="section crisoft-animado tipo_de_animacao_c">
        Aparecer e Expandir
    </div>

    <div class="section crisoft-animado tipo_de_animacao_e">
        Deslizar da Esquerda
    </div>

    <div class="section Crisoft_anime_centro crisoft-animado">
        Centro - Aparecer e Expandir
    </div>

    <div class="section Crisoft_anime_da_direita crisoft-animado">
        Direita - Deslizar
    </div>

    <div class="section Crisoft_anime_da_direita_2s crisoft-animado">
        Direita - Deslizar 2s
    </div>

    <div class="section Crisoft_anime_da_esquerda crisoft-animado">
        Esquerda - Deslizar
    </div>

    <div class="section Crisoft_anime_da_esquerda_2s crisoft-animado">
        Esquerda - Deslizar 2s
    </div>
*/