/* ---------------------------------------------------------------------------------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%;
}
body{	background-color: #ffffff;
		background-position: center top;
		height:100%; vertical-align:top; text-align: center; 
		font-size: 100%; /* 16px */
		font-family: 'Roboto', sans-serif; color:#000000;
}
body { overflow-X: hidden; }
/* ---------------------------------------------------------------------------------BASICO--------------------------------------------------------------------------------- */
#Crisoft	img{display: block; max-width: 100%;} /* não usar o max -width para loja virtual */
#Crisoft	{margin: 0 auto;}

#Crisoft	.tx1{font-size: 3em;} 		/* 48px; */		
#Crisoft	.tx2{font-size: 2.25em;} 	/* 36px; */		
#Crisoft	.tx3{font-size: 2em; } 		/* 32px; */
#Crisoft	.tx4{font-size: 1.5em; } 	/* 24px; */
#Crisoft	.tx5{font-size: 1.125em;} 	/* 18px; */
#Crisoft	.tx6{font-size:1em;}		/* 16px; */
#Crisoft	.tx7{font-size: 0.875em;} 	/* 14px; */
#Crisoft	.txx{font-size: 1px;} 	/* 14px; */
#Crisoft	.tx30{font-size: 30px;} 
#Crisoft	.tx18{font-size: 18px;} 
#Crisoft	.tx16{font-size: 16px;} 
#Crisoft	.tx14{font-size: 14px;} 

#Crisoft	.for1{color:#ffffff; font-weight:bold;} /* formato, alinhamento e cor */	
#Crisoft	.for2{color:#ffffff;} /* formato, alinhamento e cor */	
#Crisoft	.for3{color:#0172b7;} /* formato, alinhamento e cor */	
#Crisoft	.for4{color:#999999;} /* formato, alinhamento e cor */	
#Crisoft	.for5{color:#0172b7;} /* formato, alinhamento e cor */	
#Crisoft	.for5:hover{color:#ff0000;} /* formato, alinhamento e cor */	
#Crisoft	.for6{color:#000000;} /* formato, alinhamento e cor */	

#Crisoft	.bg1{background-color:#0172b7;} 

#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	 img.center {display: block; margin-left: auto; margin-right: auto; }

#Crisoft	 .menu1{padding-left:15px; padding-right:15px;height:45px;}
#Crisoft	 .menu1:hover{padding-left:15px; padding-right:15px; background-color:#3399cc;}

#Crisoft	 .pad1{padding-left:15px; padding-right:15px;}
#Crisoft	 .pad2{padding-left:75px; padding-right:75px;}
#Crisoft	 .pad3{padding-left:40px; padding-right:40px;}
#Crisoft	 .pad4{padding-left:20px; padding-right:20px;}
#Crisoft	 .pad5{padding-left:100px; padding-right:100px;}

#Crisoft	 .h12{height:12px;}
#Crisoft	 .h24{height:24px;}

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

#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: middle;} 	
#Crisoft	.baseul_al3 ul li a{display: inline-block; text-decoration: none;} 

#Crisoft	.whatsapp{bottom: 0px; right: 0px; position: fixed; z-index:10000; cursor:pointer;}		
#Crisoft	.whatsapp2{bottom: 0px; right: 0px; position: fixed; z-index:10001;}	
#Crisoft	.whatsapp2_1{display: block; width:269px; height:154px; background-image: url("../img/what2.png");}
#Crisoft	.tx15{color:#005e54; font-size: 18px; text-align:center; line-height:24px;}	

#Crisoft_superior	{margin: 0 auto; z-index:3; position:relative;}
#Crisoft_superior	.base_superior{display: block; width:100%; max-width:1920px; margin-top:0em; background-color:#ffffff;}
#Crisoft_superior	.base_superior_1{display: block; width:100%; max-width:1920px;}
#Crisoft_superior	.base_superior_2{display: block; width:100%; max-width:1920px; height:45px; line-height:45px; background-color:#000000;}
#Crisoft_superior	.base_superior_3{display: block; width:100%; max-width:1920px;}
#Crisoft_superior	.base_superior_4{display: block; width:100%; max-width:1920px; height:3px;background-color:#000000;}
#Crisoft_superior	.base_superior_menu_mobile{display: table; width:100%; position:fixed; z-index:10000;}

#Crisoft_principal	{margin: 0 auto; z-index:2; position:relative;}
#Crisoft_principal	.base_principal{display: block; width:100%; max-width:1920px;}
#Crisoft_principal	.base_principal_1{display: block; width:100%; max-width:1920px;}
#Crisoft_principal	.base_principal_2{display: block; width:100%; max-width:1920px; background-color:#ffffff;}
#Crisoft_principal	.base_principal_3{display: block; width:100%; max-width:500px;}
#Crisoft_principal	.base_principal_4{display: block; width:100%; max-width:1320px;}
#Crisoft_principal	.base_principal_textos{display: block; width:100%; max-width:1240px;}
#Crisoft_principal	.base_destaque{display: block; width:100%; max-width:215px;}
			
#Crisoft_inferior	{margin: 0 auto; z-index:1; position:relative;}			
#Crisoft_inferior	.base_inferior{display: block; width:100%; max-width:1920px; margin-top:0em;}			
#Crisoft_inferior	.base_inferior_1{display: block; width:100%; max-width:1920px;  background-color:#000000;}			
#Crisoft_inferior	.base_inferior_3{display: block; width:100%; max-width:1920px;  background-color:#ffffff; height:2px;}	
	
	#Crisoft	.versite{display:block;}
	#Crisoft	.vermobile{display:none;}		
	#Crisoft	.versite2{display:block;}
	#Crisoft	.vermobile2{display:none;}
/* ---------------------------------------------------------------------------------TELAS---------------------------------------------------------------------------------- */

@media only screen and (max-width: 1920px) { /* 1920 */
	body{font-size: 100%;}
}
@media only screen and (max-width: 1320px) { /* 1600 */
	#Crisoft	.versite2{display:none;}
	#Crisoft	.vermobile2{display:block;}
}
@media only screen and (max-width: 1024px) { /* 1600 */
#Crisoft	 .pad2{padding-left:35px; padding-right:35px;}	
}
@media only screen and (max-width: 800px) { /* 1600 */
	#Crisoft	.versite{display:none;}
	#Crisoft	.vermobile{display:block;}
	#Crisoft	 .pad2{padding-left:15px; padding-right:15px;}	
	#Crisoft	 .pad5{padding-left:20px; padding-right:20px;}
}
/* -------------------------------------USAR FORMATO DE MOBILE -------------------------------------- */
@media only screen and (max-width: 568px) { /* 568 */
#Crisoft	.tx2{font-size: 1.8em;} 	/* 36px; */		
}
@media only screen and (max-width: 320px) { /* 320 */

}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
	/* Definindo a animação para aparecer no site*/
    @keyframes aparecer {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
    }

    /* Classe CSS que aplicará a animação */
    .crisoft-animado {
		opacity: 0;
    }

    /* Classe CSS que será adicionada quando o elemento estiver visível */
    .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;
    }
@keyframes aparecerEExpandir { /* animation: aparecerEExpandir 1s forwards; */
      0% {
        transform: scale(0);
        opacity: 0;
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }
	.Crisoft_anime_centro {animation: aparecerEExpandir 2s forwards; }
@keyframes deslizarDaDireita { /* animation: deslizarDaDireita 2s forwards; */
      0% {
        transform: translateX(100%); 
		opacity: 0;
      }
      100% {
        transform: translateX(0%);
		opacity: 1;
      }
    }
	.Crisoft_anime_da_direita {animation: deslizarDaDireita 1s forwards; }
	.Crisoft_anime_da_direita_2s {animation: deslizarDaDireita 2s forwards; }
@keyframes deslizarDaEsquerda {  /* animation: deslizarDaEsquerda 2s forwards; */
      0% {
        transform: translateX(-100%); 
		opacity: 0;
      }
      100% {
        transform: translateX(0%);
		opacity: 1;
      }
    }
	.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;
}