/* ---------------------------------------------------------------------------------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: "Dosis", Calibri, Arial, Courier New, Helvetica, Times, sans-serif, serif, monospace, cursive, fantasy; color:#000000; } /* ---------------------------------------------------------------------------------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 .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 .tx20{font-size: 20px;} /* 18px; */ #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:#999999;} /* formato, alinhamento e cor */ #Crisoft .for3{color:#bfbfbf;} /* formato, alinhamento e cor */ #Crisoft .for4{color:#ffffff;} /* formato, alinhamento e cor */ #Crisoft .for5{color:#333333;} /* formato, alinhamento e cor */ #Crisoft .bg1{background-color:#ffcf00;} /* formato, alinhamento e cor */ #Crisoft .bg2{background-color:#f10005;} /* formato, alinhamento e cor */ #Crisoft .bg3{background-color:#ffcf00;} /* formato, alinhamento e cor */ #Crisoft .bg4{background-color:#1e1e1e;} /* formato, alinhamento e cor */ #Crisoft .bg5{background-color:#000000;} /* formato, alinhamento e cor */ #Crisoft .bg6{background-color:#e2e2e2;} /* formato, alinhamento e cor */ #Crisoft .bg7{background-image: url("../img/home1.png"); background-repeat: no-repeat; background-position: right center; height:264px;} /* formato, alinhamento e cor */ #Crisoft .bg8{background-color:#dcdcdc;} /* 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 .line48{line-height:48px;} /* formato, alinhamento e cor */ #Crisoft .linha1{border-top:5px solid #ffffff; width:75px; margin-top:5px; margin-bottom:20px;} /* formato, alinhamento e cor */ #Crisoft .linha2{border-top:5px solid #ffcf00; width:400px; margin-top:5px; margin-bottom:20px;} /* formato, alinhamento e cor */ #Crisoft .linha3{border-top:5px solid #ffcf00; width:174px; margin-top:5px; margin-bottom:20px;} /* formato, alinhamento e cor */ #Crisoft img.center {display: block; margin-left: auto; margin-right: auto; } #Crisoft .menu1{padding-left:8px; padding-right:8px; line-height:48px; vertical-align: botton;} #Crisoft .menu1:hover .for3{color:#000000;} #Crisoft .menu1:hover {background-image: url("../img/star.png");background-repeat: no-repeat; background-position: center top;} #Crisoft .pad1{padding-left:10px; padding-right:10px; } #Crisoft .pad2{padding-left:40px; padding-right:40px; } #Crisoft .pad3{padding-left:25px; padding-right:25px; } #Crisoft .pad4{padding-left:10px; padding-right:10px; } #Crisoft .wr{ white-space:pre-wrap;} #Crisoft .b{font-weight:bold;} #Crisoft .i{font-style:italic;} #Crisoft .none{text-decoration:none;} #Crisoft .table {} #Crisoft .table_td {} #Crisoft .logo1 {} #Crisoft .espace1 {height:265px;} #Crisoft .center {text-align: center;} #Crisoft .left {text-align: left;} #Crisoft .left2 {text-align: left;} #Crisoft .right {text-align: right;} #Crisoft .right2 {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_contato{} #Crisoft .baseul_contato ul{width:100%;overflow:hidden;} #Crisoft .baseul_contato ul li{float:left; display:inline;} #Crisoft .busca_select_1 {text-align:left; border:1px solid #999999; background-color:#ffffff; width:270px; height:30px; border-radius:3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; margin-bottom:4px; color:#999999; font-size: 14px; } #Crisoft .busca_input_1 {text-align:center; border:0px; background-color:#f10005; width:86px; height:30px; border-radius:3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; margin-bottom:4px; color:#ffffff; font-weight:bold;} #Crisoft .base_video{display: block; width:530px; height:300px;} #Crisoft .base_video2{display: block; width:740px; height:418px;} #Crisoft .bordas1{border: 1px solid #f81c07; background-color: #ffffff; cursor:pointer; color:#f81c07; height:48px; font-size:18px; width:95px; border-radius:5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px;} #Crisoft .bordas1:hover{background-color: #f81c07; color:#ffffff; } #Crisoft .bordas2:hover{background-color: #f81c07; color:#ffffff; } #Crisoft .bordas3:hover{background-color: #f81c07; color:#ffffff; } #Crisoft .bordas2{border: 1px solid #f81c07; background-color: #ffffff; cursor:pointer; color:#f81c07; height:48px; font-size:18px; min-width:44px; margin-left:-3px;} #Crisoft .bordas4{border: 1px solid #4a73b5; background-color: #f81c07; cursor:pointer; color:#ffffff; height:48px; font-size:18px; min-width:44px; margin-left:-3px;} #Crisoft .bordas3{border: 1px solid #f81c07; background-color: #ffffff; cursor:pointer; color:#f81c07; height:48px; font-size:18px; width:95px; border-radius: 0px 5px 5px 0px; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; margin-left:-4px;} #Crisoft_superior {margin: 0 auto; z-index:3; position:relative;} #Crisoft_superior .base_superior{display: block; width:100%; background-color:#ffffff; position:fixed;} #Crisoft_superior .base_superior_menu_mobile{display: table; width:100%; position:fixed; z-index:10000; padding-top:5px;} #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_500{display: block; width:100%; max-width:500px;} #Crisoft_principal .base_522{display: block; width:100%; max-width:522px;} #Crisoft_principal .base_700{display: block; width:100%; max-width:700px;} #Crisoft_principal .base_940{display: block; width:100%; max-width:940px;} #Crisoft_principal .base_1020{display: block; width:100%; max-width:1020px;} #Crisoft_principal .base_1160{display: block; width:100%; max-width:1160px;} #Crisoft_principal .base_1260{display: block; width:100%; max-width:1260px;} #Crisoft_principal .base_1360{display: block; width:100%; max-width:1360px;} #Crisoft_principal .base_class1{display: block; width:418px; height:350px; background-color:#e7e7e7; margin-bottom:20px;} #Crisoft_principal .base_class2{display: block; width:418px; height:278px;} #Crisoft_principal .resultado_1{display: block; width:611px; height:160px; background-color:#e7e7e7; margin-bottom:3px;} #Crisoft_inferior {margin: 0 auto; z-index:1; position:relative;} #Crisoft_inferior .base_inferior{display: block; width:100%; margin-top:0em;} #Crisoft_inferior .base_1020{display: block; width:100%; max-width:1020px;} #Crisoft_inferior .base_1220{display: block; width:100%; max-width:1220px;} #Crisoft_inferior .base_1300{display: block; width:100%; max-width:1300px;} #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 .versiteimg{display:block;} #Crisoft .vermobileimg{display:none;} #Crisoft .verclientes1{display:block;} #Crisoft .verclientes2{display:none;} #Crisoft .verclientes3{display:none;} /* ---------------------------------------------------------------------------------TELAS---------------------------------------------------------------------------------- */ @media only screen and (max-width: 1920px) { body{font-size: 100%;} } @media only screen and (max-width: 1778px) { #Crisoft .verclientes1{display:none;} #Crisoft .verclientes2{display:block;} #Crisoft .verclientes3{display:none;} } @media only screen and (max-width: 1024px) { #Crisoft .pad2{padding-left:10px; padding-right:10px; } #Crisoft .menu1{padding-left:4px; padding-right:4px;} #Crisoft .logo1 {height:100px;} } @media only screen and (max-width: 900px) { #Crisoft .logo1 {height:80px;} #Crisoft_principal .base_class1{display: block; width:280px; height:280px; background-color:#e7e7e7; margin-bottom:10px;} #Crisoft_principal .base_class2{display: block; width:280px; height:186px;} #Crisoft .base_video2{display: block; width:530px; height:300px;} } @media only screen and (max-width: 775px) { /* 775x332 CR */ #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 .espace1 {height:225px;} #Crisoft .pad4{padding-left:0px; padding-right:0px; } #Crisoft .verclientes1{display:none;} #Crisoft .verclientes2{display:none;} #Crisoft .verclientes3{display:block;} #Crisoft .left2 {text-align: center;} #Crisoft .right2 {text-align: center;} #Crisoft_principal .resultado_1{display: block; width:268px; height:initial; background-color:#e7e7e7; margin-bottom:10px;} } @media only screen and (max-width: 550px) { /* 320x555 M */ #Crisoft .base_video{display: block; width:280px; height:220px;} #Crisoft .base_video2{display: block; width:280px; height:220px;} } @media only screen and (max-width: 412px) { /* 412x695 CR */ #Crisoft .line38{line-height:24px;} /* formato, alinhamento e cor */ #Crisoft .pad3{padding-left:10px; padding-right:10px; } #Crisoft .line48{line-height:38px;} /* formato, alinhamento e cor */ #Crisoft .espace1 {height:250px;} #Crisoft .linha2{border-top:5px solid #ffcf00; width:280px; margin-top:5px; margin-bottom:20px;} /* formato, alinhamento e cor */ #Crisoft .tx30{font-size: 24px; } /* 30px; */ #Crisoft .line30{line-height:24px;} /* formato, alinhamento e cor */ } @media only screen and (max-width: 360px) { /* 360x641 P */ #Crisoft .espace1 {height:280px;} #Crisoft_superior .base_superior_menu_mobile{padding-top:0px; margin-top:-8px; margin-right:-5px;} } @media only screen and (max-width: 320px) { /* 320x555 M */ } /* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */ /* //efeitos //
- CHEGANDO PELA ESQUERDA //
- CHEGANDO PELA DIREITA //
- DOBRANDO DE BAIXO PARA CIMA //
- ESTICANDO DO CENTRO //
- ROTACIONANDO ESQUERDO //
- ROTACIONANDO DIREITO */ @-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); } }