@charset "UTF-8";
/****************************************************  
        CSS HOME
****************************************************/

/****************************************************  
        INTRODUÇÃO
****************************************************/
.introducao {
    position: fixed;
    width: 100%;
    height: 100%;
    min-height: 500px;
    top: 0;
    padding: 0;
    background: #243742;
    color: #fff;
    text-align: center;
}


.introducao .conteudo {
    position: absolute;
    width: 930px;
    height: 370px;
    padding: 0;
    top: 50%;
    left: 50%;
    margin: -185px 0 0 -465px;

}

.introducao p {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 10px 20px;
    font-size: 1.1em;
    font-weight: 800;
    text-transform: uppercase;
    color: #26ad79;
    border: 1px solid #26ad79;
}

.introducao h2 {
    position: relative;
    margin: 25px 0 45px;
    padding-bottom: 45px;
    font-size: 2.8em;
}

.introducao h2:after {
    content: "";
    display: block;
    position: absolute;
    width: 580px;
    height: 8px;
    bottom: -4px;
    left: 50%;
    margin-left: -290px;
    background: url(/assets/img/site/home/separador-introducao.png) no-repeat center bottom;
}

.introducao .frase-destaque {
    position: relative;
    display: block;
    width: 293px;
    height: 43px;
    margin: 0 auto 35px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 1.25em;
}

.introducao .frase-destaque a {
    display: block;
    width: 293px;
    height: 43px;
    padding-top: 6px;
    background: url(/assets/img/site/home/ribbon2.png) no-repeat center top;
    color: #FFF;
    text-decoration: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.introducao .frase-destaque a:hover {
    background: url(/assets/img/site/home/ribbon2.png) no-repeat center bottom;
    color: #4db677;
}

.btn-rolar02 {
    position: absolute;
    display: block;
    width: 30px;
    height: 74px;
    bottom: 60px;
    left:  50%;
    margin: 0 0 0 -15px;
    background: url(/assets/img/site/home/btn-rolar02.png) no-repeat center;
    -webkit-transition: background-color 0.2s linear;
    -moz-transition: background-color 0.2s linear;
    -o-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
}


/****************************************************  
        SEPARADOR
****************************************************/
.separador {
    height: 100%;
    min-height: 600px;
}

/****************************************************  
        PORTFOLIO
****************************************************/
.portfolio {
    background: #26ad79;
    color: #fff;
    text-align: center;
}

.portfolio .conteudo {
    width: 1600px;
}

.portfolio .titulo-destaque strong {
    border-bottom: 4px solid #1e7e5a;
}

.portfolio .titulo-destaque strong:after {
    background: url(/assets/img/site/estrutura/setas-detalhes-titulos.png) no-repeat center top;
}

.portfolio .subtitulo-destaque {
    color: #090909;
}

.portfolio .ciranda-portfolio {
    position: relative;
    margin-bottom: 40px;
    padding: 0 55px;
    text-align: center;
}

.portfolio .ciranda-portfolio ul {
    width: 100%;
}

.portfolio .ciranda-portfolio li {
    position: relative;
    display: inline-block;
    width: 49%;
    text-align: left;
}


.portfolio .ciranda-portfolio li ~ li {
    width: 24%;
    margin-left: 1%;
}

.portfolio .ciranda-portfolio li span {
    position: absolute;
    left: 20px;
    bottom: 30px;
    padding-bottom: 3px;
    color: #fff;
    font-size: 1.6em;
    font-weight: 900;
    text-decoration: none;
    border-bottom: 4px solid #26ad79;
}

.portfolio .ciranda-portfolio .btn-anterior,
.portfolio .ciranda-portfolio .btn-proximo {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -23px;
    width: 24px;
    height: 47px;
    text-indent: -9999px;
    z-index: 10;
}

.portfolio .ciranda-portfolio .btn-anterior {
    left: 0;
    background: url(/assets/img/site/estrutura/btns-ciranda-2.png) no-repeat left top;
}

.portfolio .ciranda-portfolio .btn-anterior:hover {
    background: url(/assets/img/site/estrutura/btns-ciranda-2.png) no-repeat left bottom;
}

.portfolio .ciranda-portfolio .btn-proximo {
    right: 0;
    background: url(/assets/img/site/estrutura/btns-ciranda-2.png) no-repeat right top;
}

.portfolio .ciranda-portfolio .btn-proximo:hover {
    background: url(/assets/img/site/estrutura/btns-ciranda-2.png) no-repeat right bottom;
}

/* BTN ROLAR */
.portfolio .btn-rolar {
    border-color: #1f835d;
    background: url(/assets/img/site/estrutura/btn-rolar.png) no-repeat center -54px;
}

.portfolio .btn-rolar:hover {
    background: #1e7e5a url(/assets/img/site/estrutura/btn-rolar.png) no-repeat center -16px;
}


/****************************************************  
        DESTAQUES PRINCIPAIS
****************************************************/
.destaques-principais {
    background: #243742;
    color: #fff;
    text-align: center;
}

.destaques-principais .destaques {
    margin-bottom: 40px;
}

.destaques-principais section {
    position: relative;
    float: left;
    width: 21%;
}

.destaques-principais section ~ section {
    margin-left: 5%;
}

.destaques-principais section ~ section:before {
    content: "";
    display: block;
    height: 4px;
    width: 26%;
    position: absolute;
    top: 75px;
    left: -50%;
    margin-left: 26%;
    background: #4f677f;
}

.destaques-principais section h3 {
    margin: 20px 0;
    text-transform: uppercase;
    color: #fff;
    font-size: 1.25em;
    font-weight: bold;
}

.destaques-principais section h3 a {
    color: #fff;
    text-decoration: none;
}

.destaques-principais section h3 a:hover,
.destaques-principais section h3 a:visited,
.destaques-principais section h3 a:link,
.destaques-principais section h3 a:active {
    text-decoration: none;
    color: #fff;
}

.destaques-principais section p {
    color: #aaaeb1;
    font-size: 0.9em;
    line-height: 150%;
}

.destaques div {	
    width: 172px;
    height: 172px;
    border-radius: 172px;
    left: 50%;
    margin-left: -85px;
    position: relative;

}

.destaques div i {
    width: 167px;
    height: 167px;
    border-radius: 167px;
    display: block;
    transition:all 0.2s linear;
}

.destaques div.icon1 { 
    border: 3px solid #26ad79;
}

.destaques div.icon1 i {
    background-color:#26ad79;
    border:0px solid #26ad79;
    box-shadow:0 0 0 2px #26ad79;
}

.destaques div.icon1:after { 
    content:" "; 
    position:absolute; 
    left:0; 
    top:0; 
    background:url(/assets/img/site/home/destaque-criacao-de-sites.png) center center no-repeat; 
    width:167px; 
    height:167px; 
}

.destaques div.icon1:hover i { 
    margin-top: 7px;
    margin-left: 7px;
    border: 2px solid #243742; 
    box-shadow: none; 
}

.destaques div.icon2 { 
    border:3px solid #72cedd;
}

.destaques div.icon2 i { 
    background-color:#72cedd; 
    border:0px solid #72cedd; 
    box-shadow:0 0 0 2px #72cedd;
}

.destaques div.icon2:after { 
    content:" "; 
    position:absolute; 
    left:0; 
    top:0; 
    background:url(/assets/img/site/home/destaque-sistemas.png) center center no-repeat; 
    width: 167px; 
    height: 167px; 
}

.destaques div.icon2:hover i { 
    margin-top: 7px;
    margin-left: 7px;
    border: 2px solid #243742; 
    box-shadow: none; 
}

.destaques div.icon3 { 
    border:3px solid #f6c631;
}

.destaques div.icon3 i { 
    background-color:#f6c631; 
    border:0px solid #f6c631; 
    box-shadow:0 0 0 2px #f6c631;
}

.destaques div.icon3:after { 
    content:" "; 
    position:absolute; 
    left:0; 
    top:0; 
    background:url(/assets/img/site/home/destaque-marketing-online.png) center center no-repeat; 
    width:172px; 
    height:172px; 
}

.destaques div.icon3:hover i { 
    margin-top: 7px;
    margin-left: 7px;
    border: 2px solid #243742; 
    box-shadow: none; 
}

.destaques div.icon4 { 
    border:3px solid #e7442a;
}

.destaques div.icon4 a {
    display: block;
    width: 100%;
    height: 100%;
}

.destaques div.icon4 i { 
    background-color:#e7442a; 
    border:0px solid #e7442a; 
    box-shadow:0 0 0 2px #e7442a;
}

.destaques div.icon4:after { 
    content:" "; 
    position:absolute; 
    left:0; 
    top:0; 
    background:url(/assets/img/site/home/destaque-hospedagem.png) center center no-repeat; 
    width: 172px; 
    height: 172px; 
}

.destaques div.icon4:hover i { 
    margin-top: 7px;
    margin-left: 7px;
    border: 2px solid #243742; 
    box-shadow: none; 
}

.destaques div:hover i { 
    width:152px; 
    height:152px;
}

/****************************************************  
        CLIENTES
****************************************************/

.clientes {
    background: #FFF;
    text-align: center;
}

.clientes .conteudo {
    width: 1460px;
}

.clientes .titulo-destaque {
    color: #4f677f;
}

.clientes .subtitulo-destaque {
    color: #919eab;
}

.clientes .ciranda-clientes {
    position: relative;
    margin-bottom: 40px;
    padding: 0 55px;
    text-align: center;
}

.clientes .ciranda-clientes ul {
    width: 100%;
}

.clientes .ciranda-clientes li {
    position: relative;
    display: inline-block;
    width: 18%;
}

.clientes .ciranda-clientes li ~ li {
    margin-left: 1.3%;
}

.clientes .ciranda-clientes .btn-anterior,
.clientes .ciranda-clientes .btn-proximo {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -23px;
    width: 24px;
    height: 47px;
    text-indent: -9999px;
    z-index: 10;
}

.clientes .ciranda-clientes .btn-anterior {
    left: 0;
    background: url(/assets/img/site/estrutura/btns-ciranda.png) no-repeat left top;
}

.clientes .ciranda-clientes .btn-anterior:hover {
    background: url(/assets/img/site/estrutura/btns-ciranda.png) no-repeat left bottom;
}

.clientes .ciranda-clientes .btn-proximo {
    right: 0;
    background: url(/assets/img/site/estrutura/btns-ciranda.png) no-repeat right top;
}

.clientes .ciranda-clientes .btn-proximo:hover {
    background: url(/assets/img/site/estrutura/btns-ciranda.png) no-repeat right bottom;
}


/****************************************************  
        ORÇAMENTO
****************************************************/

.orcamento {
    background: #f2f6f8;
    text-align: center;
}

.orcamento .conteudo {
    width: 1460px;
    padding-bottom: 60px;
}

.orcamento .titulo-destaque {
    color: #4f677f;
}

.orcamento .subtitulo-destaque {
    color: #919eab;
    margin-bottom: 50px;
}

.orcamento .btn-orcamento {
    display: block;
    width: 323px;
    height: 49px;
    margin: 0 auto;
    padding: 11px 0 0 48px;
    background: url(/assets/img/site/estrutura/btn-orcamento.png) no-repeat center top;
    text-decoration: none;
    color: #fff;
    font-weight: 900;
    font-size: 1.3em; 

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.orcamento .btn-orcamento:hover {
    background: url(/assets/img/site/estrutura/btn-orcamento.png) no-repeat center bottom;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.animated {
    -webkit-animation-fill-mode:both;
    -moz-animation-fill-mode:both;
    -ms-animation-fill-mode:both;
    -o-animation-fill-mode:both;
    animation-fill-mode:both;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;
}

.animated.hinge{
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    -ms-animation-duration:1s;
    -o-animation-duration:1s;
    animation-duration:1s;}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}

@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-30px);}
60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}

.bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
}