/* ---------------------------------------------------------------------------------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: 48px;} /* 48px; */ #Crisoft .tx36{font-size: 2.25em;} /* 36px; */ #Crisoft .tx32{font-size: 2em; } /* 32px; */ #Crisoft .tx30{font-size: 30px; } /* 30px; */ #Crisoft .tx24{font-size: 24px; } /* 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:#ffffff;} /* formato, alinhamento e cor */ #Crisoft .for3{color:#666666;} /* formato, alinhamento e cor */ #Crisoft .for4{color:#ebc42a;} /* formato, alinhamento e cor */ #Crisoft .bg1{background-color:#ebc42a;} /* formato, alinhamento e cor */ #Crisoft .bg2{background-image: url("../img/bg2.png"); background-repeat: repeat;} /* formato, alinhamento e cor */ #Crisoft .bg3{background-image: url("../img/bg3.png"); background-repeat: repeat;} /* formato, alinhamento e cor */ #Crisoft .bg4{background-image: url("../img/bg4.png"); background-repeat: repeat;} /* formato, alinhamento e cor */ #Crisoft .bg5{background-color:#3b2f02;} /* formato, alinhamento e cor */ #Crisoft .bg6{background-color:#ffffff;} /* formato, alinhamento e cor */ #Crisoft .bg7{background-color:#000000;} /* formato, alinhamento e cor */ #Crisoft .bk1{background-image: url("../img/bk1.png"); background-repeat: repeat;} /* formato, alinhamento e cor */ #Crisoft .bk2{background-image: url("../img/bk2.png"); background-repeat: repeat-x; min-height:270px;} /* 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;} /* formato, alinhamento e cor */ #Crisoft .line48{line-height:48px;} /* formato, alinhamento e cor */ #Crisoft img.center {display: block; margin-left: auto; margin-right: auto; } #Crisoft .img1 {width:882px;} #Crisoft .menu1_bg{background-color:#ebc42a; height:40px; line-height:40px;} #Crisoft .menu1 a{padding-left:20px; padding-right:20px; font-size:18px; color:#ffffff;} #Crisoft .menu1:hover a{background-color:#1c1c1c; color:#ffffff;} #Crisoft .pad1{padding-left:10px; padding-right:10px; } #Crisoft .pad2{padding-left:40px; padding-right:40px; } #Crisoft .pad20{padding-left:20px; padding-right:20px; } #Crisoft .pad35{padding-left:35px; padding-right:35px; } #Crisoft .pad55{padding-left:55px; padding-right:10px; } #Crisoft .pad70{padding-left:70px; padding-right:70px; } #Crisoft .wr{ white-space:pre-wrap;} #Crisoft .b200{font-weight:200;} /* Light */ #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 .h2{height:2px;} #Crisoft .h12{height:12px;} #Crisoft .h24{height:24px;} #Crisoft .h36{height:36px;} #Crisoft .h48{height:48px;} #Crisoft .h48b{height:48px;} #Crisoft .h60{height:60px;} #Crisoft .h80{height:80px;} #Crisoft .h100{height:100px;} #Crisoft .table {} #Crisoft .table_td {width:48%;} #Crisoft .table_td2 {width:4%;} #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 .home_serv1{display: block; width:300px; height:536px; background-color:#ebc42a;} #Crisoft .home_serv2{display: block; width:300px; height:536px; background-color:#d2ad00;} #Crisoft .home_serv3{display: block; width:300px; height:536px; background-color:#b79500;} #Crisoft .home_servb{display: block; width:290px; height:536px; background-image: url("../img/bg2.png"); background-repeat: repeat;} #Crisoft .custom-button {background-color: #ffd700; color: #ffffff;font-size: 16px; padding: 10px 20px; border: none; border-radius: 10px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; transition: background-color 0.3s ease; } #Crisoft .custom-button:hover { background-color: #d4a017; } #Crisoft .noticias_1{display: block; width:100%; max-width:520px;position: relative; } #Crisoft .noticias_2{display: block; position:relative;width:100%; border:1px solid #ebc42a; z-index:1;} #Crisoft .noticias_3{display: block; position:absolute; left:1px; top:1px; z-index:2;} #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_242{display: block; width:100%; max-width:242px;} #Crisoft_principal .base_270{display: block; width:100%; max-width:270px;} #Crisoft_principal .base_500{display: block; width:100%; max-width:500px;} #Crisoft_principal .base_700{display: block; width:100%; max-width:680px;} #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_1440{display: block; width:100%; max-width:1440px;} #Crisoft_principal .base_1560{display: block; width:100%; max-width:1560px;} #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 .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) { #Crisoft .img1 {width:500px;} } @media only screen and (max-width: 1359px) { } @media only screen and (max-width: 1200px) { #Crisoft .menu1 a{padding-left:10px; padding-right:10px; font-size:16px;} #Crisoft .img1 {width:300px;} } @media only screen and (max-width: 1079px) { } @media only screen and (max-width: 1023px) { #Crisoft .menu1 a{padding-left:5px; padding-right:5px; font-size:14px;} #Crisoft .versite{display:none;} #Crisoft .vermobile{display:block;} } @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; width:100%;} #Crisoft .table_td2 {display:inline-block;} #Crisoft .baseul_contato ul{width:100%; max-width:495px;} #Crisoft .baseul_contato ul li{float:none;} #Crisoft .versite2{display:none;} #Crisoft .vermobile2{display:block;} #Crisoft .pad2{padding-left:10px; padding-right:10px; } #Crisoft .h36{height:24px;} #Crisoft .h48{height:24px;} #Crisoft .h60{height:24px;} #Crisoft .h80{height:36px;} #Crisoft .h100{height:24px;} #Crisoft .tx48{font-size: 24px;} #Crisoft .tx36{font-size: 23px;} #Crisoft .tx30{font-size: 24px; } #Crisoft .tx24{font-size: 20px; } #Crisoft .pad20{padding-left:10px; padding-right:10px; } } @media only screen and (max-width: 640px) { /* IMAGEM BANNER MOBILE 640x743 */ } @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); } }