/****************************************************
*      Desenvolvido por Portal G2 - xx/xx/xxxx      *
****************************************************/

@charset "UTF-8";

/*** Fonts ***/
@font-face {
    font-family: Dekar;
    src: url('../_fonts/dekar.otf');
}
/*** Fonts ***/

/*** keyframes ***/
@-webkit-keyframes fading { 
    0% { opacity: 0; }
    2% { opacity: 1; }
    98% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fading { 
    0% { opacity: 0; }
    2% { opacity: 1; }
    98% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drop {
    from { margin-top: -20px; opacity: 0; }
    to { margin: 0px; }
}

@-webkit-keyframes drop {
    from { margin-top: -20px; opacity: 0; }
    to { margin: 0px; }
}
/*** keyframes ***/

* { margin: 0; padding: 0; font-family: Calibri; } /* Reset */
* { transition: color .5s, background .5s, border .5s, top .5s, opacity .5s; } /* Suavização dos movimentos */

body { background: #F2F2F2; }

a, a:hover { text-decoration: none; }

p { font-size: 16px; margin: 10px auto; }

h1, h2, h3, h4 { font-weight: normal; font-family: Dekar; }

h1 { font-size: 45px; margin: 32px 0px; }
h2 { font-size: 40px; margin: 10px 0px; }
h3 { font-size: 30px; margin: 10px 0px; }
h4 { font-size: 25px; margin: 10px 0px; }
h5 { font-size: 16px; margin: 10px 0px; }
h6 { font-size: 10px; margin: 10px 0px; }

.tx1 { font-size: 45px; } 
.tx2 { font-size: 40px; } 
.tx3 { font-size: 30px; }
.tx4 { font-size: 25px; }
.tx5 { font-size: 16px; }
.tx6 { font-size: 10px; }

strong { font-weight: bolder; }

.primary_color      { color: #0066AA; } /* Cor principal do site */
.secundary_color    { color: #EAEAEA; } /* Cor secundario do site */

.sh { text-shadow: 2px 2px 3px #000; }

.list { list-style-image: url(../_img/list-style.png); }
.list li { font-size: 15px; margin-left: 20px; color: #7F7F7F; }

.caracteristicas_tecnicas { width: 25%; text-align: justify; display: table; float: left; overflow: auto; }

/* Cores Basicas para fundo */
.fundo { width: 100%; display: table; }

.bg_construtor_index { background: url(../_img/criador-de-stes-index.jpg) fixed bottom; background-size: cover; }

.bg_red         { background: #C81C0E; }
.bg_yellow      { background: yellow; }
.bg_orange      { background: #FF6600; }
.bg_blue        { background: #0066AA; }
.bg_white       { background: white; }
.bg_grey        { background: #EDEFF0; }
.bg_black       { background: black; }

.color_grey { color: #333; }

/* ajustes */
.left       { text-align: left; }
.center     { text-align: center; }
.right      { text-align: right; }
.justify    { text-align: justify; }

.float_left { float: left; }

.table { display: table; }

/* containers */
.cont_2     { width: 46%; margin: 0 2%; float: left; display: table; }
.cont_3     { width: 31%; margin: 0 1%; float: left; display: table; }
.cont_3_2   { width: 64.666%; margin: 0 1%; float: left; display: table; }
.cont_4     { width: 24%; margin: 0 .5%; float: left; display: table; }
.cont_4_3   { width: 74%; margin: 0 .5%; float: left; display: table; }

/*** Things ***/
.img_left { width: 30%; margin: 10px 30px 10px 0; border-radius: 0px 30px 0px 30px; float: left; }
.img_right { width: 30%; margin: 10px 0 10px 30px; border-radius: 0px 30px 0px 30px; float: right; }
.img_100 { width: 90%; margin: 5% 0; }

.bt { font-weight: 600; margin: 20px 0px; padding: 20px; display: inline-block; border-radius: 5px; }

.padrao_claro  { color: #F3F3F3; background: linear-gradient(#62C0FF, #008FEE); }
.padrao_escuro { color: #F3F3F3; background: linear-gradient(#008FEE, #0066AA); }

.padrao_claro:hover  { color: #F3F3F3; background: linear-gradient(#008FEE, #62C0FF); }
.padrao_escuro:hover { color: #F3F3F3; background: linear-gradient(#0066AA, #008FEE); }
/*** Things ***/

/*** loading ***/
#loading { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 5000; background: url(../_img/loading.gif) center no-repeat rgba(0,0,0,.9); }
/*** loading ***/

/*** up ***/
#up         { position: fixed; width: 36px; height: 36px; left: 15px; bottom: 15px; background: rgba(0,0,0,.9); } 
#up:hover   { opacity: .7; cursor: pointer; }
#up img { width: 100%; }

#up, #up:hover { transition: opacity .5s; }
/*** up ***/

/*** social ***/
.social { width: auto; height: 35px; float: right; margin: 2px; display: table; }
.social ul { width: auto; }
.social ul a { margin: 0px; padding: 0px; float: right; }
.social ul a img { width: 30px; height: 30px; }
.social ul a img:hover { opacity: .7; }

.social_float { position: fixed; width: 50px; top: 320px; right: 0px; z-index: 4000; text-align: right; }
.social_float a { width: 32px; height: 32px; background: #EAEAEA; display: table; float: right; }
.social_float a:hover { width: 50px; background: #CCCCCC; }
.social_float a img { width: 16px; margin: 8px; float: left; }

.social *, .social_float * { transition: width .5s, opacity .5s; }
/*** social ***/

/*** Corpo do Site ***/
header, center, footer { width: 100%; margin: 0px auto; display: table; }

.base { width: 90%; margin: 0px auto; display: table; }
section { width: 90%; max-width: 1360px; padding: 40px 5%; display: table; }
/*** Corpo do Site ***/

/*** Header ***/
header { background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.0)); position: fixed; z-index: 1000; }
header * { transition: color .5s, background .5s, width .5s, height .5s; }

header .barra { width: 90%; height: 35px; padding: 0 5%; background: #0066AA; display: block; }
header .barra p { 
    font-size: 12px; font-weight: 600; margin: 0; padding: 10px 5px; 
    color: #FFFFFF; display: block;
}
header .barra .mid { width: 50%; float: left; padding: 0; margin: 0; }
header .barra .mid nav ul { width: auto; float: right; list-style: none; display: table; }
header .barra .mid nav ul li { position: relative; padding: 0px 5px; float: left; display: table; }
header .barra .mid nav ul li img { width: 25px; height: 20px; margin: 7px 0px; float: left; }
header .barra .mid nav ul li a { 
    font-size: 12px; font-weight: 600; margin: 0 5px; padding: 0; 
    color: #FFFFFF; display: block; float: right; 
}
header .barra .mid nav ul li a strong { padding: 10px 0; display: table; }
header .barra .mid nav ul li:hover { background: #62C0FF; color: #FFFFFF; }

header .logo { width: 30%; min-width: 200px; float: left; margin: 5px 0; } .logo img { width: 100%; }
header .menu { width: 70%; float: right; margin: 0; }
header .menu #menu ul { width: auto; float: right; list-style: none; display: table; }
header .menu #menu ul li { position: relative; float: left; display: table; }
header .menu #menu ul li a { font-size: 14px; font-weight: 0; margin: 10px 5px; padding: 15px 10px 15px 10px; color: #FFFFFF; display: block; }
header .menu #menu ul li:hover a { background: #62C0FF; color: #FFFFFF; }
header .menu #menu ul li .active { font-weight: bolder; color: #62C0FF; }
header .menu #menu ul li ul { position: absolute; width: auto; display: none; background: rgba(0,0,0,.9); z-index: 5000; }
header .menu #menu ul li ul li { float: none; display: table; }
header .menu #menu ul li ul li a { font-size: 10px; width: 120px; margin: 0px; padding: 15px; display: block; }
header .menu #menu ul li:hover ul li:hover a { background: #008FEE; color: #FFFFFF; }
header .menu #menu ul li:hover ul li .active { color: #00AEEF; }
header .menu #menu ul li:hover ul li a { background: none; }
header .menu #menu ul li:hover ul { display: table; animation: drop 1s; }
header .menu #menu #close { position: absolute; top: 50px; right: 50px; z-index: 5000; display: none; }
header .menu #menu #close b { font-size: 20px; color: #FFFFFF; }

header .menu-responsivo { display: none; margin: 0px auto; }

/*** slider ***/
.container_slider { position: relative; width: 100%; margin: 0px auto; background: #333; }
.container_slider ul { list-style: none; }

.container_slider .slider { position: relative; width: 100%; -webkit-animation: fading 21s infinite; animation: fading 21s infinite; display: block; }
.container_slider .slider img { width: 100%; height: auto; }

.container_slider .caption { 
    position: absolute; width: 90%; left: 5%; top: 40%;
    -webkit-animation: drop 1s; animation: drop 1s;
}
.container_slider .caption .left { width: 50%; float: left; }
.container_slider .caption .right { width: 50%; float: right; }

.container_slider .caption .left h1 { font-size: 50px; margin: 10px 0; text-align: left; color: #FFFFFF; text-shadow: 2px 2px 6px #000; }
.container_slider .caption .left h2 { font-size: 23px; margin: 10px 0; text-align: left; color: #FFFFFF; text-shadow: 2px 2px 6px #000; }
.container_slider .caption .right img { width: 100%; }

.container_slider .container_bullets { position: absolute; left: 50%; transform: translate(-50%,-150%); }
.container_slider .bullets { display: inline-block; padding: 5px; text-align: center; border-radius: 50%; background: #F5F5F5; }
.container_slider .bullets:hover { background: #008FEE; cursor: pointer; }
.container_slider .bullet_activated { background: #008FEE; }

.container_slider .prev { position: absolute; top: 50%; left: 0px; border-radius: 0 10px 10px 0; }
.container_slider .next { position: absolute; top: 50%; right: 0px; border-radius: 10px 0 0 10px; }

.container_slider .button_floating { 
    font-size: 25px; 
    color: #FFFFFF; background: rgba(0, 0, 0, .5); 
    width: 40px; height: 60px; padding: 10px 0;
    line-height: 60px; 
    display: inline-block; 
    text-align: center; 
    overflow: hidden;
    cursor: pointer;
}

.container_slider .button_floating:hover { color: #FFFFFF; background: rgba(0, 0, 0, 1);  }
/*** slider ***/
/*** banner ***/
.banner { position: relative; width: 100%; }
.banner img { width: 100%; height: auto; }

.banner .caption { 
    position: absolute; width: 90%; left: 5%; top: 55%;
    -webkit-animation: drop 1s; animation: drop 1s;
}

.banner .caption .left { width: 50%; float: left; }
.banner .caption .right { width: 50%; float: right; }

.banner .caption .left h1 { font-weight: bolder; font-size: 30px; margin: 10px 0; text-align: left; text-shadow: 2px 2px 3px #000; color: #FFFFFF; }
.banner .caption .left h2 { font-size: 20px; margin: 10px 0; text-align: left; text-shadow: 2px 2px 3px #000; color: #FFFFFF; }
/*** banner ***/
/*** Header ***/

/*** Center ***/
center { }

.vantagens .cont_2 { min-height: 200px; }

/** Planos **/
#planos { width: 90%; height: auto; display: table; margin: 0px auto; }

#planos a { color: #0986DA; }
#planos a:hover { text-decoration: underline; }

#planos .coluna { 
    width: 32.333%; height: auto; min-height: 1000px;
    margin: 25px 0%;
    display: block; float: left; 
    text-align: center; 
    background: #FFFFFF; 
    outline: 1px solid #CCC;
}
#planos .coluna section { width: 100%; padding: 10px 0; }
#planos .coluna h1 { font-size: 25px; width: 100%; padding: 20px 0px; margin: 0; }
#planos .coluna .valor { width: 100%; padding: 20px 0; color: #FFFFFF; }
#planos .coluna .valor #valor { font-size: 22px; margin: 10px auto; }
#planos .coluna .valor #valor b { font-size: 50px; }
#planos .coluna .seletor { width: 100%; margin: 25px auto; }
#planos .coluna .seletor:hover { opacity: .7; }
#planos .coluna .valor_completo { height: 20px; margin: 15px auto; font-size: 12px; }
#planos #contratar { color: #FFFFFF; }

#planos .coluna .basic      { background: url(../_img/_planos/basic.png) #0066AA; background-size: cover; }
#planos .coluna .home       { background: url(../_img/_planos/home.png) #62C0FF; background-size: cover; }
#planos .coluna .premium    { background: url(../_img/_planos/premium.png) #0066AA; background-size: cover; }

#planos .recomendado { min-height: 1040px; margin: 0 1.5%; outline-offset: -3px; outline: 3px solid #62C0FF; }

#planos .select { 
    -webkit-appearance: none;  /* Remove estilo padrão do Chrome */
    -moz-appearance: none; /* Remove estilo padrão do FireFox */
    appearance: none; /* Remove estilo padrão do FireFox*/
    width: 65%; height: 40px; 
    background: url(../_img/dropdown-select.png) no-repeat #EAEAEA;
    background-position: right;
    border: none;
    margin: 0px auto;
    padding: 0px 20px;
}

#planos .select:focus {
    -webkit-appearance: none;  /* Remove estilo padrão do Chrome */
    -moz-appearance: none; /* Remove estilo padrão do FireFox */
    appearance: none; /* Remove estilo padrão do FireFox*/
    outline: none;
}

#planos .select option { 
    -webkit-appearance: none;  /* Remove estilo padrão do Chrome */
    -moz-appearance: none; /* Remove estilo padrão do FireFox */
    appearance: none; /* Remove estilo padrão do FireFox*/
}
#planos .select option:hover {
    -webkit-appearance: none;  /* Remove estilo padrão do Chrome */
    -moz-appearance: none; /* Remove estilo padrão do FireFox */
    appearance: none; /* Remove estilo padrão do FireFox*/
    background: #CCCCCC; 
}

#planos section p { font-size: 16px; color: #333333; }

/** Sobre Planos **/
.icon_planos { width: 70%; margin: auto; background: #FFFFFF; border-radius: 100%; }
/** Sobre Planos **/
/** Planos **/

/** Solicoes ***/
.solucoes h4, .solucoes h5, .solucoes p { text-align: justify; }
/** Solicoes ***/

/** Serviços **/
.servicos { width: 100%; display: table; }
.servicos ul { list-style: none; }
.servicos ul li { display: block; float: left; border: 1px solid #CCC; background: #FFFFFF; text-align: center; }
.servicos ul li img { width: 100%; }
.servicos ul li h3 { padding: 25px 0; margin: 0; color: #FFF; }
.servicos ul li p { width: 95%; margin: 2.5%; height: 60px; }

.servicos .hospedagem { background: url(../_img/_servicos/lunarhost-hospedagem-de-sites.jpg) center no-repeat; background-size: 100%; }
.servicos .ssl { background: url(../_img/_servicos/lunarhost-certificados-ssl.jpg) center no-repeat; background-size: 100%; }
.servicos .ddos { background: url(../_img/_servicos/lunarhost-protecao-ddos.jpg) center no-repeat; background-size: 100%; }
/** Serviços **/

/** depoimentos **/
.depoimentos {}
.depoimentos .cont_3 { display: table; }
.depoimentos .cont_3 img { width: 15%; float: left; margin: 10px 10px 00px 0; border-radius: 100%; }
/** depoimentos **/

/** construtor de sites **/
.galeria_construtor img { width: 10.5%; margin: 1%; float: left; }
/** construtor de sites **/

/** Registro de Domínio **/
.registro_dominio {  }
.registro_dominio .busca { width: 50%; }
.registro_dominio select { width: 15%; }

.registro_dominio .busca, .registro_dominio select { 
    height: 40px; padding: 10px; font-size: 19px; font-weight: 600; color: #555;
}
/** Registro de Domínio **/

/*** mais informações ***/
.mais_info { width: 90%; padding: 0px 5%; background: #0066AA; display: table; }
.mais_info section { margin: 0px auto; }
.mais_info .cont_left { width: 70%; margin: 30px 0px; float: left; }
.mais_info .cont_left p { font-size: 18px; color: #F3F3F3; text-align: left; }
.mais_info .cont_right { width: 30%; float: right; }
.mais_info .cont_right .bt { float: right; }
/*** mais informações ***/

/*** mais informações ***/
.footer_info { width: 90%; padding: 0px 5%; background: #0066AA; display: table; }
.footer_info section { margin: 0px auto; }
.footer_info .cont_left { width: 70%; margin: 15px 0px; float: left; }
.footer_info .cont_left p { font-size: 20px; color: #F3F3F3; text-align: left; }
.footer_info .cont_left strong { font-size: 35px; }
.footer_info .cont_right { width: 30%; float: right; }
.footer_info .cont_right .bt { float: right; }
/*** mais informações ***/

/*** Contato ***/
.contato form { width: 100%; display: table; }

.contato input       { width: 97%; height:  35px; border: solid 1px #999999; display: block; margin: .5% 0px; padding: .5%; color: #C4C4C4; }
.contato textarea    { width: 97%; height: 150px; border: solid 1px #999999; display: block; margin: .5% 0px; padding: .5%; color: #C4C4C4; }

.contato input:focus       { border: solid 1px #0986DA; color: #0986DA; }
.contato textarea:focus    { border: solid 1px #0986DA; color: #0986DA; }

.contato #bt { width: 150px; float: right; margin: 1.5%; background: #333; }
.contato #bt:hover { background: #0986DA; color: #FFFFFF; cursor: pointer; }
/*** Contato ***/

/*** Center ***/

/*** Footer ***/
footer { background: #111; color: #8D8D8D; }
footer .coluna { width: 33.333%; float: left; }
footer h4 { color: #CDCDCD; }
footer nav ul { list-style: none; display: table; }
footer nav ul li a { color: #8D8D8D; margin: 5px 0px; display: block; }
footer nav ul li a:hover { color: #0986DA; }
/*** Footer ***/

/*** Responsive ***/
@media only screen and (max-width: 930px){
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    
    /* containers */
    .cont_2 { width: 98%; float: none; }
    .cont_3 { width: 98%; float: none; }
    
    /*** header ***/
    header .barra .mid nav ul li a strong { display: none; }
    header .barra .mid p { font-size: 9px; }
    
    header .menu { width: 30%; margin: 10px 0; }
    
    header .menu #menu { position: fixed; width: 30%; height: 100%; padding: 0 10%; top: 0; left: 0; background: rgba(0,0,0,.7); display: none; }
    header .menu #menu ul { width: auto; float: left; margin: 0px auto; }
    header .menu #menu ul li { float: left; }
    header .menu #menu ul li a .icons { display: block; }
    header .menu #menu ul li a { padding: 30px; margin: 0px; display: block; }
    header .menu #menu ul li a:hover { background: #0986DA; color: #FFFFFF; }
    header .menu #menu ul li:hover ul { animation: none; }
    
    header .menu-responsivo, header .menu #menu #close { display: block; }
    /*** header ***/
    /*** slider ***/
    .container_slider .caption { top: 35%; }
    .container_slider .caption .left { width: 100%; float: none; text-align: center; }
    .container_slider .caption .right { display: none; }
    
    .container_slider .caption .left h1 { font-size: 26px; text-align: center; }
    .container_slider .caption .left h2 { font-size: 12px; text-align: center; }
    .container_slider .caption .left a  { font-size: 12px; padding: 10px; }
    /*** slider ***/
    /*** center ***/
    #planos { width: 90%; }
    #planos .coluna { 
        width: 100%;
        margin: 25px 0%;
        display: block; float: left; 
        text-align: center; 
        background: #FFFFFF; 
        border: 1px solid #CCC;
    }
    /*** center ***/
    /*** Footer ***/
    footer .coluna { width: 100%; float: none; }
    /*** Footer ***/
}
@media only screen and (max-width: 640px){
    /*** containers ***/
    .cont_2 { width: 98%; }
    /*** containers ***/
    /*** slider ***/
    .container_slider .button_floating { display: none; }
    /*** slider ***/
    /*** center ***/

    /*** center ***/
}
@media only screen and (max-width: 540px){
    /*** slider ***/
    .caption { display: none; }
    /*** slider ***/
}
/*** Responsive ***/