/* ---------------------------------------------------------------------------------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: 'Roboto', sans-serif; color:#000000; } body { overflow-X: hidden; } /* ---------------------------------------------------------------------------------BASICO--------------------------------------------------------------------------------- */ #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 {margin: 0 auto;} #Crisoft h1{font-weight:normal; } #Crisoft a{text-decoration:none;} #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 .tx18{font-size: 1.125em;} /* 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:#666666;} /* formato, alinhamento e cor */ #Crisoft .for3{color:#ffffff;} /* formato, alinhamento e cor */ #Crisoft .for4{color:#018eaa;} /* formato, alinhamento e cor */ #Crisoft .line24{line-height:24px;} /* formato, alinhamento e cor */ #Crisoft .line30{line-height:30px;} /* formato, alinhamento e cor */ #Crisoft .line38{line-height:38px;} /* formato, alinhamento e cor */ #Crisoft .line42{line-height:42px;} /* formato, alinhamento e cor */ #Crisoft .bg1{background: linear-gradient(to right, #018eaa 50%, #006174 50%);} /* formato, alinhamento e cor */ #Crisoft .bg2{background-color:#018eaa;} #Crisoft .bg3{background-color:#006174;} #Crisoft .bg4{background-color:#e9e9e9;} #Crisoft .bk1{background-image: url("../img/h1.png"),url("../img/h2.png"); background-position: left top, right bottom; background-repeat: no-repeat, no-repeat; min-height:300px;} /* formato, alinhamento e cor */ #Crisoft img.center {display: block; margin-left: auto; margin-right: auto; } #Crisoft .menu1_bg{background-color:#018eaa; height:40px; line-height:40px;} #Crisoft .menu1 a{padding-left:15px; padding-right:15px; font-size:18px; color:#ffffff; font-weight:400;} #Crisoft .menu1:hover a{background-color:#006174; color:#ffffff;} #Crisoft .pad1{padding-left:10px; padding-right:10px; } #Crisoft .pad1b{padding-left:20px; padding-right:20px; } #Crisoft .pad2{padding-left:40px; padding-right:40px; } #Crisoft .pad2b{padding-left:40px; padding-right:40px; } #Crisoft .wr{ white-space:pre-wrap;} #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 .h1{height:1px;} #Crisoft .h3{height:3px;} #Crisoft .h10{height:10px;} #Crisoft .h12{height:12px;} #Crisoft .h20{height:20px;} #Crisoft .h36{height:36px;} #Crisoft .h70{height:70px;} #Crisoft .td564{width:564px;} #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_contato{} #Crisoft .baseul_contato ul{width:100%;overflow:hidden;} #Crisoft .baseul_contato ul li{float:left; display:inline;} #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_1080{display: block; width:100%; max-width:1080px;} #Crisoft_principal .base_1360{display: block; width:100%; max-width:1360px;} #Crisoft_principal .base_1600{display: block; width:100%; max-width:1600px;} #Crisoft_inferior {margin: 0 auto; z-index:1; position:relative;} #Crisoft_inferior .base_inferior{display: block; width:100%; margin-top:0em;} #Crisoft_inferior .base_inferior2{display: block; position:absolute; bottom:20px; left:45%; } #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 .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: 1500px) { } @media only screen and (max-width: 1360px) { #Crisoft .tx48{font-size: 36px;} #Crisoft .tx24{font-size: 18px;} #Crisoft .tx30{font-size: 24px;} #Crisoft .pad2b{padding-left:10px; padding-right:10px; } } @media only screen and (max-width: 1279px) { #Crisoft .td564{width:300px;} #Crisoft .versite2{display:none;} #Crisoft .vermobile2{display:block;} } @media only screen and (max-width: 1079px) { } @media only screen and (max-width: 900px) { #Crisoft .versite_sup{display:none;} #Crisoft .vermobile_sup{display:block;} #Crisoft .h70{height:36px;} } @media only screen and (max-width: 800px) { /* Celular deitado */ #Crisoft .versite{display:none;} #Crisoft .vermobile{display:block;} #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_inferior .base_inferior2{display: block; position:relative; bottom:0px; padding-top:20px;left:initial; background-color: #006174;} #Crisoft .bk1{background-image: url(""),url("");} } @media only screen and (max-width: 640px) { /* IMAGEM BANNER MOBILE 640x743 */ #Crisoft .pad2{padding-left:15px; padding-right:15px; } #Crisoft .tx48{font-size: 32px;} } @media only screen and (max-width: 412px) { /* 412x743 CR */ } @media only screen and (max-width: 393px) { } @media only screen and (max-width: 375px) { } @media only screen and (max-width: 360px) { } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* //efeitos //
- CHEGANDO PELA ESQUERDA //
- CHEGANDO PELA DIREITA //
- DOBRANDO DE BAIXO PARA CIMA //
- ESTICANDO DO CENTRO //
- ROTACIONANDO ESQUERDO //
- ROTACIONANDO DIREITO */ /* 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; } #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.5);-moz-filter: brightness(1.5);-ms-filter: brightness(1.5);-o-filter: brightness(1.5);filter: brightness(1.5);} #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); } }