html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
} article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} html{
width: 100%;
height: 100%;
min-width: 500px;
-webkit-text-size-adjust: 100%;
}
body{
font-family: 'Cabin', sans-serif;
min-width: 500px;
}
body.page{
height: 75%;
min-width: 650px;
}
a{
text-decoration: none;
}
a.botao-laranja{
padding: 15px 25px;
display: inline-block;
background: #33ccff;
border-radius: 10px;
font-size: 16px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
-webkit-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
a.botao-laranja:hover{
background: #3366ff;
}
.cta{
padding: 25px;
background: #33ccff;
display: block;
width: 300px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
border-radius: 10px 10px 0px 0px;
color: #fff;
-webkit-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
.cta:hover{
background: #3366ff;
padding-bottom: 30px;
margin-top: -5px;
}
#loading{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #111 url(http://www.westcom.com.br/site/wp-content/themes/city/images/loading.gif) no-repeat center center;
opacity: 0.9;
z-index: 99999999999;
display: none;
} header{
position: fixed;
top: 0;
width: 100%;
left: 0;
background: #fff;
border-bottom: 1px solid #eee; 
z-index: 9999;
overflow: hidden;
}
@media ( max-width: 960px ){
header{
height: 98px;
-webkit-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-moz-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-o-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
header.ativado{
height: 330px;
}
}
@media ( max-width: 600px ){
header.ativado{
height: 400px;
}
}
header>div{
max-width: 1100px;
margin: 0 auto;
overflow: hidden;
padding: 20px 40px;
}
@media ( max-width: 1000px ){
header>div{
padding: 20px;		
}
}
header div h1{
width: 220px;
float: left;
text-indent: -9999px;
font-size: 0;
}
header div h1 a{
display: block;
width: 100%;
}
header div h1 a img{
width: 100%;
height: auto;
display: block;
}
header div ul{
float: right;
margin-top: 23px;	
}
@media ( max-width: 960px ){
header div ul{
width: 100%;
}	
}
header div ul li{
display: inline-block;
}
@media ( max-width: 960px ){
header div ul li{
display: block;
line-height: 24px;
text-align: right;
}
}
@media ( max-width: 600px ){
header div ul li{
line-height: 32px;
}
}
header div ul li .tel{
color: #33ccff;
font-weight: bold;
}
header div ul li .tel span{
font-size: 12px;
font-style: italic;
color: #aaa;
}
header div ul li a{
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #666;
font-size: 16px;
margin-left: 20px;
-webkit-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 200ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
@media ( max-width: 1150px ) and ( min-width: 960px ){
header div ul li a{
margin-left: 8px;
font-size: 14px;
}
}
@media ( max-width: 600px ){
header div ul li a{
font-size: 20px;
}
}
header div ul li a:hover{
color: #3366ff;
}
header #menu-trigger{
display: none;
}
@media ( max-width: 960px ){
header #menu-trigger{
display: block;
width: 40px;
float: right;
margin-top: 15px;
-webkit-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
header.ativado #menu-trigger,
header #menu-trigger:hover{
margin-top: 12px;
}
header #menu-trigger div{
width: 100%;
height: 4px;
background: #444;
margin: 4px 0;
-webkit-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
header.ativado #menu-trigger div,
header #menu-trigger:hover div{
margin: 6px 0;
background: #e96e00;
}
} #video-popup{
position: fixed;
top: 150px;
left: 50%;
margin-left: -427px;
z-index: 999999;
display: none;
}
@media (max-width: 850px){
#video-popup{
margin-left: -225px;
}	
}
#video-popup iframe{
width: 853px;
height: 480px;
}
@media (max-width: 850px){
#video-popup iframe{
width: 450px;
height: 250px;
}	
}
#video-popup #fechar-video{
position: absolute;
top: -20px;
right: 0px;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
}
#video-popup-bg{
width: 100%;
height: 100%;
position: fixed;
background: #111;
opacity: 0.8;
z-index: 99999;
cursor: pointer;
display: none;
} #vitrine{
padding: 90px 0 260px 0;
width: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
margin-top: 90px;
}
@media ( max-width: 820px ){
#vitrine{
padding: 180px 0 140px 0;
}
}
#vitrine div{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
@media ( max-width: 820px ){
#vitrine div{
text-align: center;
}	
}
#vitrine div h2{
font-size: 90px;
font-weight: bold;
color: #fff;
position: relative;
left: -50px;
margin-bottom: 20px;
letter-spacing: -1px;
}
@media ( max-width: 820px ){
#vitrine div h2{
font-size: 75px;
line-height: 60px;
}
}
#vitrine div p{
max-width: 500px;
color: #ddd;
font-size: 18px;
margin-bottom: 40px;
}
@media ( max-width: 820px ){
#vitrine div p{
margin: 30px auto;
font-size: 24px;
line-height: 24px;
text-shadow: 0px 0px 10px #111;
}	
}
#vitrine div a#botao-video{
color: #fff;
margin-left: 20px;
-webkit-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-moz-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-o-transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
transition: all 200ms cubic-bezier(0.215, 0.610, 0.355, 1.000); -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
-o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
#vitrine div a#botao-video:hover{
margin-left: 25px;
} #quemsomos{
width: 100%;
}
#quemsomos #quemsomos-intro{
border-bottom: 1px solid #ddd;
background: url(http://www.westcom.com.br/site/wp-content/themes/city/images/solucoes/solucoes-bg.jpg) no-repeat center center;
}
#quemsomos #quemsomos-intro #quemsomos-intro-container{
max-width: 900px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#quemsomos #quemsomos-intro #quemsomos-intro-container img{
height: auto;
width: 300px;
display: block;
position: absolute;
left: 0;
top: 0;
}
@media (max-width: 900px){
#quemsomos #quemsomos-intro #quemsomos-intro-container img{
width: 300px;
right: 65%;
left: auto;
}
}
@media (max-width: 800px){
#quemsomos #quemsomos-intro #quemsomos-intro-container img{
width: 250px;
right: 75%;
}
}
@media (max-width: 700px){
#quemsomos #quemsomos-intro #quemsomos-intro-container img{
right: 85%;
}	
}
@media (max-width: 600px){
#quemsomos #quemsomos-intro #quemsomos-intro-container img{
display: none;
}	
}
#quemsomos #quemsomos-intro #quemsomos-intro-container #quemsomos-intro-conteudo{
padding: 70px 50px 70px 50px;
float: right;
width: 500px;
position: relative;
z-index: 1;
}
@media (max-width: 900px){
#quemsomos #quemsomos-intro #quemsomos-intro-container #quemsomos-intro-conteudo{
width: 450px;
padding: 90px 40px 50px 40px;
}
}
#quemsomos #quemsomos-intro #quemsomos-intro-container #quemsomos-intro-conteudo h2{
font-size: 50px;
line-height: 48px;
font-weight: bold;
color: #222;
margin-bottom: 40px;
}
#quemsomos #quemsomos-intro div p{
color: #666;
font-size: 20px;
line-height: 24px;
margin-bottom: 20px;
}
@media (max-width: 900px){
#quemsomos #quemsomos-intro #quemsomos-intro-container #quemsomos-intro-conteudo h2{
font-size: 44px;
line-height: 46px;
margin-bottom: 30px;
}
#quemsomos #quemsomos-intro div p{
font-size: 18px;
line-height: 22px;
margin-bottom: 20px;
}
}
#quemsomos .solucao{
width: 100%;
overflow: hidden;
position: relative;
}
#quemsomos .solucao .solucao-conteudo{
width: 50%;
float: left;
padding: 80px 0 100px 0;
border-bottom: 1px solid #ddd;
overflow: hidden;
}
@media (max-width: 800px){
#quemsomos .solucao .solucao-conteudo{
padding: 50px 0 60px 0;
}
}
@media (max-width: 650px){
#quemsomos .solucao .solucao-conteudo{
width: 100%;
padding: 210px 0 60px 0;
}
}
#quemsomos .solucao .solucao-conteudo>div{
max-width: 400px;
padding-right: 10%;
width: 80%;
float: right;
}
@media (max-width: 650px){
#quemsomos .solucao .solucao-conteudo>div{
padding: 0 50px;
max-width: none;
width: auto;
}
}
#quemsomos .solucao .solucao-conteudo div img{
width: 90px;
height: auto;
margin-bottom: 20px;
position: relative;
left: -10px;
bottom: -10px;
}
#quemsomos .solucao .solucao-conteudo div h3{
font-size: 32px;
color: #33ccff;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 20px;
}
@media (max-width: 800px){
#quemsomos .solucao .solucao-conteudo div h3{
font-size: 28px;
line-height: 28px;
}
}
#quemsomos .solucao .solucao-conteudo div p{
font-size: 20px;
color: #666;
margin-bottom: 20px;
line-height: 26px;
}
@media (max-width: 800px){
#quemsomos .solucao .solucao-conteudo div p{
font-size: 17px;
line-height: 20px;
}
}
#quemsomos .solucao .solucao-capa{
width: 50%;
background: #eee;
position: absolute;
right: 0;
bottom: 0;
top: 0;
background-size: cover;
background-position: center center;
}
@media (max-width: 650px){
#quemsomos .solucao .solucao-capa{
width: 100%;
height: 200px;
top: 0;
left: 0;
bottom: auto;
}
}
#quemsomos #servicos{
padding: 120px 0 100px 0;	
background: url(http://www.westcom.com.br/site/wp-content/themes/city/images/solucoes/servicos-bg.jpg) fixed;
}
#quemsomos #servicos #servicos-intro{
text-align: center;
width: 100%;
margin-bottom: 50px;
}
#quemsomos #servicos #servicos-intro h3{
font-size: 32px;
text-transform: uppercase;
color: #33ccff;
font-weight: bold;
margin-bottom: 10px;
}
#quemsomos #servicos #servicos-intro p{
max-width: 450px;
font-size: 20px;
color: #555;
line-height: 24px;
margin: 0 auto;
}
#quemsomos #servicos #servicos-container{
max-width: 1100px;
margin: 0 auto;
overflow: hidden;
}
#quemsomos #servicos #servicos-container .servico{
width: 25%;
float: left;
text-align: center;
}
@media (max-width: 1100px){
#quemsomos #servicos #servicos-container .servico{
width: 44%;
margin: 20px 3%;
position: relative;
}
}
@media (max-width: 750px){
#quemsomos #servicos #servicos-container .servico{
width: 90%;
margin: 20px 5%;
position: relative;
}
}
#quemsomos #servicos #servicos-container .servico img{
width: 50%;
height: auto;
margin: 0 auto;
}
#quemsomos #servicos #servicos-container .servico h4{
color: #222;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
#quemsomos #servicos #servicos-container .servico p{
color: #666;
font-size: 16px;
line-height: 20px;
font-style: italic;
}
@media (max-width: 1100px){
#quemsomos #servicos #servicos-container .servico img{
width: 125px;
position: absolute;
left: 20%;
margin-left:-60px;
top: 50%;
margin-top: -60px;
}
#quemsomos #servicos #servicos-container .servico h4{
width: 60%;
float: right;
text-align: left;
}
#quemsomos #servicos #servicos-container .servico p{
width: 60%;
float: right;
text-align: left;
}
} #cases{
background: #222;
padding: 100px 0;
position: relative;
}
#cases .cases-paginacao{
position: absolute;
font-size: 150px;
color: #fff;
text-decoration: none;
top: 50%;
opacity: 0.5;
}
#cases #cases-proximos{
right: 30px;
}
#cases #cases-anteriores{
left: 30px;
display: none;
}
#cases .cases-paginacao:hover{
opacity: 1;
}
#cases-intro{
max-width: 1100px;
margin: 0 auto;
margin-bottom: 40px;
padding: 0 50px;
}
@media (max-width: 1200px){
#cases-intro{
width: 900px;
}
}
@media (max-width: 950px){
#cases-intro{
width: 690px;
}
}
@media (max-width: 750px){
#cases-intro{
width: 400px;
}
}
#cases-intro h2{
font-size: 52px;
color: #fff;
font-weight: bold;
}
#cases-intro p {
color: #aaa;
margin-bottom: 20px;
font-size: 18px;
}
#cases-intro ul{
}
#cases-intro ul li{
display: inline-block;
margin-bottom: 8px;
}
#cases-intro ul li a{
display: inline-block;
padding: 10px;
background: #111;
color: #777;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
-webkit-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
#cases-intro ul li a.ativado,
#cases-intro ul li a:hover{
background: #3366ff;
color: #fff;
}
#cases-window{
max-width: 1100px;
margin: 0 auto;	
overflow: hidden;
}
@media (max-width: 1200px){
#cases-window{
width: 900px;
}
}
@media (max-width: 950px){
#cases-window{
width: 690px;
}
}
@media (max-width: 750px){
#cases-window{
width: 450px;
}
}
#cases-window #ver-mais-cases{
width: 100%;
display: block;
padding: 20px 0;
text-align: center;
font-size: 14px;
text-transform: uppercase;
font-weight: bold;
background: #111;
border-radius: 0px 0px 10px 10px;
color: #999;
-webkit-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
#cases-window #ver-mais-cases:hover{
background: #3366ff;
color: #fff;
}
#cases-window #cases-container{
overflow: hidden;
width: 100%;
height: 550px;
background: #151515;
}
@media (max-width: 1200px){
#cases-window #cases-container{
height: 450px;
}
}
@media (max-width: 950px){
#cases-window #cases-container{
height: 460px;
}
}
@media (max-width: 750px){
#cases-window #cases-container{
height: 675px;
}
}
#cases-window #cases-container.ativado{
height: auto;
max-height: none;
}
#cases-window .case{
width: 275px;
height: 275px;	
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
overflow: hidden;
opacity: 0.4;
-webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); 
transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); }
@media (max-width: 1200px){
#cases-window .case{
width: 225px;
height: 225px;
}
}
@media (max-width: 950px){
#cases-window .case{
width: 230px;
height: 230px;
}
}
@media (max-width: 750px){
#cases-window .case{
width: 225px;
height: 225px;
}
}
#cases-window .case:hover{
opacity: 1;
}
#cases-window .case div{
background: #3366ff;
position: absolute;
padding: 20px;
bottom: -100px;
left: 0px;
right: 0px;
-webkit-transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-moz-transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-o-transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
transition: all 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000); -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); 
-o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); 
transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); }
#cases-window .case:hover div{
bottom: 0px;
}
#cases-window .case div h3{
font-weight: bold;
font-size: 16px;
color: #fff;
}
#cases-window .case div span{
color: #fff;
font-style: italic;
font-size: 12px;
} #case-popup{
width: 600px;
height: 600px;
left: 50%;
top: 50%;
margin-top: -300px;
margin-left: -300px;
position: fixed;	
display: none;
z-index: 99999999;
}
@media (max-width: 830px){
#case-popup{
width: 480px;
height: 480px;
margin-left: -240px;
margin-top: -240px;
}
}
#case-popup #fechar-popup{
position: absolute;
top: -20px;
right: 0px;
font-size: 12px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
opacity: 0.5;
-webkit-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
#case-popup #fechar-popup:hover{
opacity: 1;
}
#case-popup .case-paginacao{
position: absolute;
font-size: 130px;
text-decoration: none;
top: 50%;
margin-top: -100px;
color: #fff;
opacity: 0.4;
z-index: 2;
text-shadow: 0px 0px 20px #111;
-webkit-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
#case-popup .case-paginacao:hover{
opacity: 1;
}
#case-popup #case-anterior{
left: -80px;
}
#case-popup #case-proximo{
right: -80px;
}
@media (max-width: 600px){
#case-popup #case-anterior{
left: 20px;
}
#case-popup #case-proximo{
right: 20px;
}
}
#case-popup .case-conteudo{
padding: 15px;
background: #33ccff;
position: absolute;
bottom: 0;
left: 0;
}
#case-popup .case-conteudo h3{
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 18px;
}
#case-popup .case-conteudo span{
font-size: 16px;
color: #fff;
}
#case-popup .case-imagem{
width: 100%;
height: 100%;
display: block;
background-color: #fff;
background-size: cover;
background-position: center center;
position: absolute;
top: 0;
left: 0;
}
#case-popup-bg{
position: fixed;
width: 100%;
height: 100%;
background: #000;
opacity: 0.9;
z-index: 999999;
top: 0;
left: 0;
display: none;
cursor: pointer;
} #clientes{
padding: 100px 0;
}
#clientes #clientes-intro{
max-width: 1100px;
margin: 0 auto;
}
#clientes #clientes-intro h2{
font-size: 58px;
font-weight: bold;
color: #33ccff;
text-align: center;
}
#clientes #clientes-intro p{
max-width: 500px;
margin: 0 auto;
text-align: center;
font-size: 18px;
color: #555;
}
#clientes #clientes-container{
max-width: 1050px;
margin: 0 auto;
overflow: hidden;
margin-top: 60px;
}
@media (max-width: 1100px){
#clientes #clientes-container{
width: 900px;
}
}
@media (max-width: 950px){
#clientes #clientes-container{
width: 750px;
}
}
@media (max-width: 800px){
#clientes #clientes-container{
width: 600px;
}
}
@media (max-width: 650px){
#clientes #clientes-container{
width: 450px;
}
}
#clientes #clientes-container .cliente{
width: 150px;
height: 150px;
float: left;
opacity: 0.6;
position: relative;
}
#clientes #clientes-container .cliente:hover{
opacity: 1;
}
#clientes #clientes-container .cliente .cliente-case{
border-radius: 50%;
display: none;
position: absolute;
width: 100%;
z-index: 1;
}
#clientes #clientes-container .cliente:hover .cliente-case{
display: block;
}
#clientes #clientes-container .cliente .cliente-logo{
position: absolute;
width: 100%;
} #totem{
background: #eee;
padding-top: 100px ;
}
#totem #totem-intro{
max-width: 1100px;
margin: 0 auto;
overflow: hidden;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
padding-bottom: 10px;
}
@media (max-width: 1150px){
#totem #totem-intro{
width: 900px;
}
}
@media (max-width: 950px){
#totem #totem-intro{
width: 700px;
}
}
@media (max-width: 750px){
#totem #totem-intro{
width: 500px;
}
}
#totem #totem-intro h2{
font-size: 58px;
font-weight: bold;
color: #33ccff;
display: inline-block;
}
@media (max-width: 950px){
#totem #totem-intro h2{
font-size: 48px;
}
}
@media (max-width: 750px){
#totem #totem-intro h2{
display: block;
text-align: center;
}
}
#totem #totem-intro a{
float: right;
display: inline-block;
color: #888;
font-weight: bold;
font-size: 18px;
opacity: 0.7;
-webkit-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
@media (max-width: 750px){
#totem #totem-intro a{
font-size: 15px;
display: block;
text-align: center;
float: none;
}
}
#totem #totem-intro a:hover{
opacity: 1;
}
#totem #totem-intro a img{
width: 40px;
height: auto;
position: relative;
bottom: -13px;
}
@media (max-width: 750px){
#totem #totem-intro a img{
width: 25px;
bottom: -8px;
}
}
#totem #diferenciais-container{
max-width: 1100px;
margin: 0 auto;
margin-bottom: 50px;
overflow: hidden;
}
@media (max-width: 1150px){
#totem #diferenciais-container{
width: 900px;
}
}
@media (max-width: 950px){
#totem #diferenciais-container{
width: 700px;
}
}
@media (max-width: 750px){
#totem #diferenciais-container{
width: 500px;
}
}
#totem #diferenciais-container>p{
font-size: 18px;
max-width: 450px;
margin-bottom: 80px;
color: #555;
}
@media (max-width: 750px){
#totem #diferenciais-container>p{
text-align: center;
max-width: none;
}
}
#totem #diferenciais-container .diferencial{
width: 33.3333%;
height: 150px;
float: left;
}
@media (max-width: 950px){
#totem #diferenciais-container .diferencial{
width: 50%;
}
}
@media (max-width: 750px){
#totem #diferenciais-container .diferencial{
width: 100%;
text-align: left;
height: auto;
margin-bottom: 20px;
}
}
#totem #diferenciais-container .diferencial img{
width: 20%;
height: auto;
margin-right: 10px;
float: left;
position: relative;
top: -20px;
}
#totem #diferenciais-container .diferencial h3{
font-weight: bold;
font-size: 16px;
color: #333;
margin-bottom: 10px;
text-transform: uppercase;
width: 75%;
display: block;
float: left;
}
#totem #diferenciais-container .diferencial p{
max-width: 75%;
font-size: 14px;
line-height: 18px;
color: #666;
float: left;
} #faq{
background: #ddd;
position: relative;
overflow: hidden;
}
#faq #faq-coluna-1{
background: #ddd;
width: 50%;
float: left;
padding: 50px 0;
}
#faq #faq-intro{
width: 95%;
max-width: 500px;
float: right;
margin-bottom: 20px;
padding-left: 5%;
}
#faq #faq-intro h2{
font-size: 58px;
font-weight: bold;
color: #33ccff;
display: inline-block;
}
#faq #faq-intro p{
display: inline-block;
font-style: italic;
font-size: 20px;
color: #777;
}
#faq #faq-perguntas{
width: 95%;
max-width: 500px;
float: right;
padding-left: 5%;
}
#faq #faq-perguntas a{
display: block;
padding: 35px 100px 5px 25px;
font-weight: bold;
font-size: 16px;
line-height: 18px;
text-transform: uppercase;
color: #888;
background: url(http://www.westcom.com.br/site/wp-content/themes/city/images/faq/linha-faq-branca.png) no-repeat top left;
}
@media (max-width: 800px){
#faq #faq-perguntas a{
padding: 35px 35px 5px 25px;
}
}
#faq #faq-perguntas a:hover,
#faq #faq-perguntas a.ativo{
color: #3366ff;
background: url(http://www.westcom.com.br/site/wp-content/themes/city/images/faq/linha-faq-azul.png) no-repeat top left;	
}
#faq #faq-coluna-2{
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 50%;
padding: 120px 50px 0px 80px;
background: url(http://www.westcom.com.br/site/wp-content/themes/city/images/faq/faq-bg.png) #d5d5d5;
overflow: hidden;
}
@media (max-width: 800px){
#faq #faq-coluna-2{
padding: 120px 30px 0px 30px;
}
}
#faq #faq-coluna-2 #faq-respostas{
width: 100%;
max-width: 500px;
float: left;
}
#faq #faq-coluna-2 #faq-respostas .faq-resposta{
display: none;
}
#faq #faq-coluna-2 #faq-respostas .faq-resposta strong,
#faq #faq-coluna-2 #faq-respostas .faq-resposta ol,
#faq #faq-coluna-2 #faq-respostas .faq-resposta p{
font-size: 18px;
line-height: 26px;
color: #222;	
}
#faq #faq-coluna-2 #faq-respostas .faq-resposta p{
margin-bottom: 20px;
}
#faq #faq-coluna-2 #faq-respostas .faq-resposta strong{
font-weight: bold;	
}
#faq #faq-coluna-2 #faq-respostas .faq-resposta ol{
padding-left: 24px;
margin-bottom: 20px;
}
#faq #faq-coluna-2 #faq-respostas .faq-resposta ol li{
list-style: decimal;
}
#faq #faq-coluna-2 #faq-respostas .faq-resposta.ativo{
display: block;
} #imprensa{
padding: 80px 0 20px 0;
width: 100%;
overflow: hidden;
}
#imprensa #imprensa-intro{
max-width: 1100px;
margin: 0 auto;
border-bottom: 1px solid #ddd;
overflow: hidden;
margin-bottom: 40px;
padding-bottom: 20px;
}
@media (max-width: 1150px){
#imprensa #imprensa-intro{
width: 900px;
}
}
@media (max-width: 950px){
#imprensa #imprensa-intro{
width: 700px;
}
}
@media (max-width: 750px){
#imprensa #imprensa-intro{
width: 500px;
}
}
#imprensa #imprensa-intro h2{
font-size: 50px;
font-weight: bold;
color: #33ccff;
float: left;
width: 400px;
letter-spacing: -1px;
}
@media (max-width: 950px){
#imprensa #imprensa-intro h2{
font-size: 48px;
}
}
@media (max-width: 750px){
#imprensa #imprensa-intro h2{
display: block;
text-align: center;
float: none;
width: auto;
}
}
#imprensa #imprensa-intro a{
float: right;
display: inline-block;
color: #888;
font-weight: bold;
font-size: 18px;
opacity: 0.7;
-webkit-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
@media (max-width: 750px){
#imprensa #imprensa-intro a{
font-size: 15px;
display: block;
text-align: center;
float: none;
}
}
#imprensa #imprensa-intro a:hover{
opacity: 1;
}
#imprensa #imprensa-intro a img{
width: 40px;
height: auto;
position: relative;
bottom: -13px;
}
@media (max-width: 750px){
#imprensa #imprensa-intro a img{
width: 25px;
bottom: -8px;
}
}
#imprensa-exemplos{
height: 250px;
width: 300%;
overflow: hidden;
}
#imprensa-exemplos div{
width: 250px;
height: 250px;
float: left;
overflow: hidden;
background-size: cover;
background-position: top left;
}
#imprensa-exemplos div img{
width: 100%;
height: auto;
}
#imprensa #veiculos{
max-width: 1100px;
margin: 0 auto;
overflow: hidden;
}
@media (max-width: 1150px){
#imprensa #veiculos{
width: 900px;
}
}
@media (max-width: 950px){
#imprensa #veiculos{
width: 700px;
}
}
@media (max-width: 750px){
#imprensa #veiculos{
width: 500px;
}
}
#imprensa #veiculos img{
width: 25%;
float: left;
height: auto;
}
@media (max-width: 750px){
#imprensa #veiculos img{
width: 50%;
}
} #contato{
padding: 100px 0;
background: #222;
}
#contato #contato-container{
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
padding: 0 50px;
position: relative;
}
#contato #contato-container h2{
font-size: 50px;
color: #fff;
font-weight: bold;
}
#contato #contato-container .contato-coluna{
width: 48%;	
}
@media (max-width: 800px){
#contato #contato-container .contato-coluna{
width: 100%;
}
}
#contato #contato-container #contato-coluna-1{
float: left;
border-top: 1px solid #555;
}
@media (max-width: 800px){
#contato #contato-container #contato-coluna-1 .botao-laranja{
position: absolute;
bottom: 0;
}
}
#contato #contato-container #contato-coluna-2{
float: right;	
}
@media (max-width: 800px){
#contato #contato-container #contato-coluna-2{
padding-bottom: 80px;
}
}
#contato #contato-container .contato-coluna h3{
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 10px;
margin-top: 30px;
color: #fff;
}
#contato #contato-container .contato-coluna #social{
margin: 50px 0;
}
#contato #contato-container .contato-coluna #social li{
display: inline-block;
margin-right: 10px;
}
#contato #contato-container .contato-coluna #social a{
opacity: 0.4;
-webkit-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
#contato #contato-container .contato-coluna #social a:hover{
opacity: 1;
}
#contato #contato-container .contato-coluna #social a img{
width: 40px;
height: auto;
}
#contato #contato-container .contato-coluna #mapa{
width: 100%;
height: 130px;
display: block;
background-size: cover;
background-position: center center;
border-radius: 10px;
}
#contato #contato-container .contato-coluna .contato-link{
font-size: 20px;
color: #ccc;
}
#contato #contato-container .contato-coluna .contato-link span{
font-style: italic;
font-size: 14px;
color: #888;
}
#contato #contato-container .contato-coluna .endereco-link{
font-size: 16px;
line-height: 18px;
color: #ccc;
}
#contato #contato-container .contato-coluna #downloads{
margin-top: 20px;
}
#contato #contato-container .contato-coluna #downloads li{
line-height: 30px;
}
#contato #contato-container .contato-coluna #downloads li a{
font-size: 16px;
color: #999;
opacity: 0.4;
font-weight: bold;
-webkit-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition: all 150ms cubic-bezier(0.250, 0.250, 0.750, 0.750); -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
-o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); 
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
#contato #contato-container .contato-coluna #downloads li a:hover{
opacity: 1;
}
#contato #contato-container .contato-coluna #downloads li a img{
width: 30px;
height: auto;
position: relative;
bottom: -8px;
} footer{
background: #111;
text-align: center;
color: #777;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
padding: 30px 0;
} #orcamento{
padding: 100px 0;
background: #f5f5f5;
min-height: 100%;
}
#orcamento #orcamento-header{
max-width: 646px;
margin: 0 auto;
color: #222;
margin-bottom: 100px;
overflow: hidden;
}
#orcamento #orcamento-header img{
width: 220px;
margin-bottom: 50px;
opacity: 0.2;
}
#orcamento #orcamento-header h1{
font-size: 38px;
font-weight: bold;
margin-bottom: 10px;
color: #444;
letter-spacing: -1px;
}
#orcamento #orcamento-header p{
font-size: 18px;
line-height: 24px;
margin-bottom: 30px;
color: #777;
}
#orcamento #orcamento-header a.orcamento-trigger{
display: block;
padding: 20px 10px;
color: #fff;
background: #aaa;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
max-width: 180px;
margin-right: 20px;
float: left;
text-align: center;
}
#orcamento #orcamento-header a.orcamento-trigger:last-of-type{
margin: 0;
}
#orcamento #orcamento-header a.orcamento-trigger.ativo,
#orcamento #orcamento-header a.orcamento-trigger:hover{
background: #e96e00;
}
#orcamento #orcamento-header a span{
font-size: 14px;
font-weight: normal;
display: block;
line-height: 14px;
margin-top: 5px;
font-style: italic;
}
#orcamento form{
max-width: 646px;
margin: 0 auto;
display: none;
color: #999;
}
#orcamento form h3{
font-size: 23px;
font-weight: bold;
margin-top: 50px;
padding-bottom: 5px;
letter-spacing: -1px;
color: #e96e00;
display: block;
border-bottom: 2px solid #ddd;
}
#orcamento form div{
overflow: hidden;
padding: 10px 0;
border-bottom: 1px dotted #ddd;
}
#orcamento form p{
padding-bottom: 10px;
font-size: 16px;
line-height: 22px;
}
#orcamento form span.alerta{
color: #f00;
font-size: 12px;
font-style: italic;
display: block;
float: right;
text-align: right;
width: 100%;
}
#orcamento form label{
display: block;
width: 180px;
float: left;
font-size: 13px;
color: #444;
font-weight: bold;
text-transform: uppercase;
text-align: right;
line-height: 45px;
}
#orcamento form .tall label{
line-height: 25px;
}
#orcamento form label .required{
color: #f00;
}
#orcamento form .field{
border: 1px solid #ccc;
padding: 10px 5px;
font-family: inherit;
border-radius: 5px;
color: #666;
font-size: 16px;
float: right;
width: 440px;
max-width: 440px;
}
#orcamento form .field.small{
width: 100px;
margin-right: 8px;
float: left;
margin-left: 14px;
}
#orcamento form .field.medium{
width: 320px;
float: left;
}
#orcamento form ul{
float: right;
width: 450px;
}
#orcamento form ul li{
line-height: 20px;
}
#orcamento form fieldset{
}
#orcamento form #enviar-orcamento{
border: none;
padding: 20px;
display: block;
width: 100%;
border-radius: 10px;
background: #777;
color: #fff;
text-align: center;
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
font-family: inherit;
cursor: pointer;
margin-top: 40px;
}
#orcamento form #enviar-orcamento:hover{
background: #e96e00;
}
#sucesso{
height: 100%;
padding: 100px;
}
#sucesso #sucesso-header{
width: 400px;
text-align: center;
margin: 0 auto;
}
#sucesso #sucesso-header img{
width: 220px;
margin-bottom: 50px;
opacity: 0.2;
}
#sucesso #sucesso-header h1{
font-size: 38px;
font-weight: bold;
margin-bottom: 10px;
color: #444;
letter-spacing: -1px;
}
#sucesso #sucesso-header p{
font-size: 18px;
line-height: 24px;
margin-bottom: 30px;
color: #777;
}