marlon232
(usa CentOS)
Enviado em 25/07/2015 - 01:06h
Olá amigos!
Preciso da ajuda de vocês para alinhar um menú dropdown no meu site em HTML
Segue abaixo o exemplo:
Está assim: http://downloads.core-br.com/1.png
Quero que fique assim: http://downloads.core-br.com/2.png
Lembrando que o dropdown do "cliente" está alinhado, e não quero desalinhá-lo caso o Planos seja.
Website: http://core-webhosting.com.br/
Segue também o código HTML e CSS
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Core Web Hosting - Hospedagem de sites</title>
<link rel="shortcut icon" href="http://core-webhosting.com.br/ images/icons/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Hind:400,300,600,500,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Bootstrap & Styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/block_grid_bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet" />
<link href="css/jquery.circliful.css" rel="stylesheet" />
<link href="css/slicknav.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet">
<!--Start of Zopim Live Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");
$.src="//v2.zopim.com/?3AzsGres0ikXGJLNDxeq10QjeRizvnYc";z.t=+new Date;$.
type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");
</script>
<!--End of Zopim Live Chat Script-->
</head>
<body>
<!-- Top Bar-->
<div class="top">
<div class="row">
<div class="col-sm-3">
<div class="logo">
<a href="http://core-webhosting.com.br/ index.html"><img src="http://core-webhosting.com.br/ images/logo.png" alt="" />
</a>
</div>
</div>
<div class="col-sm-9">
<nav id="desktop-menu">
<ul class="sf-menu" id="navigation">
<li class="current"><a href="http://core-webhosting.com.br/ ">Início</a>
</li>
<li><a href="dominios.html">Domínios</a>
</li>
<li><a href="planos.html">Planos</a>
<ul>
<li><a href="planos-iniciais.html">Iniciais</a>
</li>
<li><a href="planos-premium.html">Prêmium</a>
</li>
</ul>
</li>
<li><a href="contato.html">Contato</a>
</li>
<li><a href="#">Cliente</a>
<ul>
<li><a href="http://cliente.core-webhosting.com.br/clientarea.php">Login</a>
</li>
<li><a href="http://cliente.core-webhosting.com.br/register.php">Registrar</a>
</li>
<li><a href="http://cliente.core-webhosting.com.br/pwreset.php">Esqueceu a senha?</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- End of Top Bar-->
<!-- Video -->
<div id="index-video" class="hidden-xs">
<div class="index-video-container">
<div class="videocaption">
<h2>HOSPEDAGEM DE SITES COM PROFISSIONALISMO!</h2>
<h4>Seja um de nossos clientes e aproveite os benefícios de uma hospedagem!</h4>
<p><a class="btn btn-slide" href="planos.html">Saber mais</a>
</p>
</div>
<video autoplay loop muted>
<source src="video/matrix.mp4" type="video/mp4">
</video>
</div>
</div>
<!-- End of Video -->
<!-- Features -->
<section class="features">
<div class="row">
<div class="col-sm-12">
<h2>Garantia de qualidade e estabilidade!</h2>
<span>Em todos os nossos planos, você tem, dentre muitos outros, os quesitos abaixo:</span>
</div>
</div>
<div class="row spacing-70">
<div class="col-sm-4">
<div class="feature wow zoomIn" data-wow-delay="0.2s">
<img src="images/rocket.png" alt="" />
<h4>Velocidade!</h4>
<p>Uma hospedagem poderosa, com garantia de estabilidade e rapidêz, acessível em qualquer lugar!</p>
</div>
</div>
<div class="col-sm-4">
<div class="feature wow zoomIn" data-wow-delay="0.4s">
<img src="images/ssd.png" alt="" />
<h4>Estabilidade!</h4>
<p>Em nosso planos a estabilidade é prioridade, por isso nossos sistemas são atualizados periodicamente!</p>
</div>
</div>
<div class="col-sm-4">
<div class="feature wow zoomIn" data-wow-delay="0.6s">
<img src="images/secure.png" alt="" />
<h4>Segurança!</h4>
<p>Sabemos o quão importante é manter seus arquivos seguros, por isso investimos muito em segurança!</p>
</div>
</div>
</div>
</section>
<!-- End of Features -->
<!-- Call to Action -->
<section class="calltoaction">
<div class="row wow zoomIn" data-wow-delay="0.2s">
<div class="col-sm-10 com-md-8 center-block">
<div class="row no-gutter cta-content">
<div class="col-sm-3">
<div class="offer wow fadeInUp" data-wow-delay="0.5s">
<span>REGISTRO</span>
<h2>24H</h2>
<span>por dia!</span>
</div>
</div>
<div class="col-sm-9">
<div class="offerdescription wow fadeInUp" data-wow-delay="0.7s">
<h2>DOMÍNIOS!</h2>
<p>Várias TLD's para você escolher!</p>
</div>
</div>
</div>
<div class="wow fadeInUp" data-wow-delay="0.9s">
<form class="form-inline domainsearch" method="post" action="http://cliente.core-webhosting.com.br/domainchecker.php">
<div class="row no-gutter">
<div class="col-sm-8">
<input type="text" class="form-control" name="sld" onfocus="if (this.value == 'Pesquise domínios') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Pesquise domínios';}" value="Pesquise domínios" />
</div>
<div class="col-sm-2">
<select name="tld" class="form-control">
<option>.com</option>
<option>.net</option>
<option>.org</option>
<option>.biz</option>
<option>.info</option>
<option>.tv</option>
<option>.us</option>
<option>.name</option>
<option>.eu</option>
</select>
</div>
<div class="col-sm-2">
<button type="submit" class="btn btn-primary" style="width:100%">PROCURAR</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- End of Call to Action -->
<!-- Pricing Tables -->
<section class="pricingtables">
<div class="row">
<div class="col-sm-12">
<h2>Planos prêmium</h2>
<p>Alguns de nossos planos mais populares ao seu alcance!</p>
</div>
</div>
<div class="row spacing-70 no-gutter">
<div class="col-sm-3 wow zoomIn" data-wow-delay="0.2s">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="text-center">Prêmium 1</h3>
</div>
<div class="panel-body text-center">
<span>Por apenas</span>
<h4>R$45</h4>
<span class="per">mensais</span>
</div>
<ul class="text-center">
<li>2GB Armazenamento</li>
<li>8GB Tráfego mensal</li>
<li>Ilimitados bancos de dados</li>
<li>Ilimitados domínios</li>
<li>Ilimitados sub-domínios</li>
<li>200 contas de e-mail</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-pricetable" href="http://cliente.core-webhosting.com.br/cart.php">COMPRAR</a>
</div>
</div>
</div>
<div class="col-sm-3 wow zoomIn" data-wow-delay="0.4s">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="text-center">Prêmium 2</h3>
</div>
<div class="panel-body text-center">
<span>Por apenas</span>
<h4>R$50</h4>
<span class="per">mensais</span>
</div>
<ul class="text-center">
<li>3GB Armazenamento</li>
<li>10GB Tráfego mensal</li>
<li>Ilimitados bancos de dados</li>
<li>Ilimitados domínios</li>
<li>Ilimitados sub-domínios</li>
<li>200 contas de e-mail</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-pricetable" href="http://cliente.core-webhosting.com.br/cart.php">COMPRAR</a>
</div>
</div>
</div>
<div class="col-sm-3 wow zoomIn most-popular" data-wow-delay="0.6s">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="text-center">Mega</h3>
</div>
<div class="panel-body text-center">
<span>Por apenas</span>
<h4>R$55</h4>
<span class="per">mensais</span>
</div>
<ul class="text-center">
<li>4GB Armazenamento</li>
<li>15GB Tráfego mensal</li>
<li>Ilimitados bancos de dados</li>
<li>Ilimitados domínios</li>
<li>Ilimitados sub-domínios</li>
<li>200 contas de e-mail</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-pricetable" href="http://cliente.core-webhosting.com.br/cart.php">COMPRAR</a>
</div>
</div>
</div>
<div class="col-sm-3 wow zoomIn" data-wow-delay="0.8s">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="text-center">Ultra</h3>
</div>
<div class="panel-body text-center">
<span>Por apenas</span>
<h4>R$60</h4>
<span class="per">mensais</span>
</div>
<ul class="text-center">
<li>5GB Armazenamento</li>
<li>15GB Tráfego mensal</li>
<li>Ilimitados bancos de dados</li>
<li>Ilimitados domínios</li>
<li>Ilimitados sub-domínios</li>
<li>200 contas de e-mail</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-pricetable" href="http://cliente.core-webhosting.com.br/cart.php">COMPRAR</a>
</div>
</div>
</div>
</div>
</section>
<!-- End of Pricing Tables -->
<!-- Statistics -->
<section class="statistics">
<div class="row">
<div class="col-sm-12">
<h2>Nós adoramos <i class="fa fa-heart"></i> as estatísticas!</h2>
<p>Estar presente ativamente no mercado é o que torna uma empresa grande e confiante!</p>
</div>
</div>
<div class="row spacing-70">
<div class="col-sm-3">
<div class="wow fadeInUp" data-wow-delay="0.1s">
<p id="myStat1" data-dimension="175" data-animationstep="0.5" data-text="5513" data-width="25" data-fontsize="29" data-percent="64" data-fgcolor="#DE6262" data-bgcolor="#E1E3E4" data-fill="#CECECE"></p>
<span>Deployed Servers</span>
</div>
</div>
<div class="col-sm-3">
<div class="wow fadeInUp" data-wow-delay="0.2s">
<p id="myStat2" data-dimension="175" data-animationstep="0.5" data-text="20510" data-width="25" data-fontsize="29" data-percent="46" data-fgcolor="#DE6262" data-bgcolor="#E1E3E4" data-fill="#CECECE"></p>
<span>Total Clients</span>
</div>
</div>
<div class="col-sm-3">
<div class="wow fadeInUp" data-wow-delay="0.3s">
<p id="myStat3" data-dimension="175" data-animationstep="0.5" data-text="7028" data-width="25" data-fontsize="29" data-percent="38" data-fgcolor="#DE6262" data-bgcolor="#E1E3E4" data-fill="#CECECE"></p>
<span>Days of Uptime</span>
</div>
</div>
<div class="col-sm-3">
<div class="wow fadeInUp" data-wow-delay="0.4s">
<p id="myStat4" data-dimension="175" data-animationstep="0.5" data-text="4649" data-width="25" data-fontsize="29" data-percent="55" data-fgcolor="#DE6262" data-bgcolor="#E1E3E4" data-fill="#CECECE"></p>
<span>Happy Resellers</span>
</div>
</div>
</div>
</section>
<!-- End of Statistics -->
<div class="partners">
<div class="row">
<div class="col-sm-12">
<div id="datacenter-partners">
<div class="item"><img src="images/clients/1.png" alt="">
</div>
<div class="item"><img src="images/clients/2.png" alt="">
</div>
<div class="item"><img src="images/clients/3.png" alt="">
</div>
<div class="item"><img src="images/clients/4.png" alt="">
</div>
<div class="item"><img src="images/clients/5.png" alt="">
</div>
<div class="item"><img src="images/clients/6.png" alt="">
</div>
<div class="item"><img src="images/clients/7.png" alt="">
</div>
<div class="item"><img src="images/clients/8.png" alt="">
</div>
<div class="item"><img src="images/clients/9.png" alt="">
</div>
<div class="item"><img src="images/clients/1.png" alt="">
</div>
<div class="item"><img src="images/clients/2.png" alt="">
</div>
<div class="item"><img src="images/clients/3.png" alt="">
</div>
<div class="item"><img src="images/clients/4.png" alt="">
</div>
<div class="item"><img src="images/clients/5.png" alt="">
</div>
<div class="item"><img src="images/clients/6.png" alt="">
</div>
<div class="item"><img src="images/clients/7.png" alt="">
</div>
<div class="item"><img src="images/clients/8.png" alt="">
</div>
<div class="item"><img src="images/clients/9.png" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="social">
<div class="row">
<div class="col-sm-6">
<ul>
<li><a href="https://www.facebook.com/MundoCoreBrasil" title="facebook" target="_blank"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#" title="twitter" target="_blank"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#" title="pinterest" target="_blank"><i class="fa fa-pinterest"></i></a>
</li>
<li><a href="#" title="rss" target="_blank"><i class="fa fa-rss"></i></a>
</li>
<li><a href="#" title="instagram" target="_blank"><i class="fa fa-instagram"></i></a>
</li>
<li><a href="#" title="github" target="_blank"><i class="fa fa-github"></i></a>
</li>
</ul>
</div>
<div class="col-sm-6">
<div id="mc_embed_signup">
<form class="form-inline validate" action="//audemedia.us7.list-manage.com/subscribe/post?u=b5638e105dac814ad84960d90&id=9345afa0aa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<div class="row no-gutter">
<div class="col-sm-9">
<input type="email" value="" name="EMAIL" class="form-control" id="mce-EMAIL" placeholder="Inscrever-se para notícias" required>
<div style="position: absolute; left: -5000px;">
<input type="text" name="b_b5638e105dac814ad84960d90_9345afa0aa" tabindex="-1" value="">
</div>
</div>
<div class="col-sm-3">
<input type="submit" value="INSCREVER" name="subscribe" id="mc-embedded-subscribe">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<section class="footer">
<div class="row">
<div class="col-sm-3">
<h4>Afiliados</h4>
<ul>
<li><a href="http://core-br.com/">Core Development</a>
</li>
<li><a href="http://armagedon-wow.com.br/">Armagedon - WOW</a>
</li>
<li><a href="http://festivaldreams.com.br/">Festival Dreams</a>
</li>
<li><a href="https://who.is/">WHOis Buscador</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h4>Suporte</h4>
<ul>
<li><a href="contato.html">Contate-nos</a>
</li>
<li><a href="http://cliente.core-webhosting.com.br/knowledgebase.php">Base de conhecimento</a>
</li>
<li><a href="http://cliente.core-webhosting.com.br/submitticket.php">Tickets de suporte</a>
</li>
<li><a href="">Chat on-line</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h4>Equipe</h4>
<ul>
<li><a href="">Localização</a>
</li>
<li><a href="">Telefones</a>
</li>
<li><a href="">Institucional</a>
</li>
<li><a href="">Empregos</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h4>Dúvidas?</h4>
<ul class="questions">
<li><a href=""><i class="fa fa-comment"></i> CHAT ON-LINE</a>
</li>
<li><i class="fa fa-phone"></i> +55 (31) 3852-8481</li>
<li><a href="mailto:contato@core-webhosting.com.br"><i class="fa fa-envelope"></i> E-MAIL</a>
</li>
</ul>
</div>
</div>
</section>
<!-- End of Footer -->
<a href="#top" id="back-to-top"><i class="fa fa-angle-up"></i></a>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/hoverIntent.js"></script>
<script src="js/superfish.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script src="js/custom.js"></script>
<script>
// ______________ PARTNERS
$(document).ready(function() {
$("#datacenter-partners").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items: 6,
itemsDesktop: [1199, 5],
itemsDesktopSmall: [979, 3],
pagination: false
});
});
// ______________ STATS
jQuery(document).ready(function() {
$('.statistics').waypoint(function() {
$('#myStat1').circliful();
$('#myStat2').circliful();
$('#myStat3').circliful();
$('#myStat4').circliful();
}, { offset: 800, triggerOnce: true });
});
</script>
</body>
</html>
Código CSS:
[code]/* Table of Contents
- - - - - - - - -
1. Global
2. Header
3. Home Page
4. Video Header Page
5. Shared Hosting Page
6. VPS Page
7. Dedicated servers
8. Domains
9. About Us
10. FAQ
11. Login
12. Datacenter
13. Elements
14. Blog
15. Contact
16. Footer
17. Media Queries
- - - - - - - - -
*/
/* ============
1 = Global
============ */
body { background: #fff; color: #5a5a5a; font-family: 'hind', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; margin: 0; position: relative; webkit-font-smoothing: antialiased;}
.stickyarea { padding-top: 84px;}
.row { margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 0; max-width: 1280px; width: 100%; }
.row.full-width { margin-bottom: 0; margin-left: auto; margin-right: auto; margin-top: 0; max-width: 100%; width: 100%; }
.row.no-gutter { margin:0 auto;}
.row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) { padding-left: 0; padding-right: 0; }
.center-block { float: none; }
a { color: #006BFF; outline: 0; text-decoration: none; }
a:hover, a:active, a:focus { outline: 0; text-decoration: none; color:#6E6E6E; }
code { background: #f5f2f0; border: 0; border-radius: 6px; color: #303038; display: block; font-family: consolas, monaco, 'andale mono', monospace; font-weight: normal; line-height: 1.3; margin: 8px 0; padding: 12px; text-shadow: 0 1px white; white-space: -moz-pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; }
img { max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; display: inline-block; vertical-align: middle;}
/* ホ容adings */
h1, h2, h3, h4, h5, h6 { color: #5a5a5a; font-family: 'montserrat', Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; font-weight: 700; line-height: 1.1; margin-bottom: 12px; margin-top: 12px; text-rendering: optimizelegibility; }
h1 { font-size: 44px; }
h2 { font-size: 34px; }
h3 { font-size: 27px; }
h4 { font-size: 23px; }
h5 { font-size: 17px; }
h6 { font-size: 14px; }
/* End of ホ容adings */
p { font-family: inherit; font-size: 17px; font-weight: normal; line-height: 1.45; margin: 0 0 17px 0; font-weight: 300;}
hr { border: solid #eff0f4; border-width: 1px 0 0; clear: both; height: 0; margin: 21px 0; }
hr.small { border: solid #006BFF; border-width: 1px 0 0; clear: both; height: 0; margin:0 auto; margin-top:27px; margin-bottom:27px; max-width:150px; }
.spacing-70 { padding-top: 70px; }
.spacing-40 { padding-top: 40px; }
/* Bootstrap 5 columns */
.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px;}
/* Forms */
input[type="text"].form-control, input[type="password"].form-control, input[type="date"].form-control, input[type="datetime"].form-control, input[type="email"].form-control, input[type="number"].form-control, input[type="search"].form-control, input[type="tel"].form-control, input[type="time"].form-control, input[type="url"].form-control { font-size: 18px; height: 55px; padding: 5px 15px; width: 100%; }
textarea.form-control { font-size: 18px;padding: 15px; width: 100%; }
select.form-control { font-size: 18px; height: 55px; padding: 5px 15px; width: 100%; }
button[type="submit"] { background: #515151; border: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 5px; border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 5px; color: #fff; cursor: pointer; float: left; font-size: 16px; font-weight: 900; height: 55px; padding: 8px 6px 6px; text-transform: uppercase; width: 100%; }
button[type="submit"]:hover { background: #646464; }
input[type="text"].form-control:focus, input[type="password"].form-control:focus, input[type="date"].form-control:focus, input[type="datetime"].form-control:focus, input[type="email"].form-control:focus, input[type="number"].form-control:focus, input[type="search"].form-control:focus, input[type="tel"].form-control:focus, input[type="time"].form-control:focus, input[type="url"].form-control:focus, textarea.form-control:focus, select:focus { box-shadow: none; }
/* Breadcrumbs */
.breadcrumbs { background: #3388FE; box-shadow: inset 4px 104px 93px -18px rgba(76, 116, 110, 0.34); moz-box-shadow: inset 4px 104px 93px -18px rgba(76, 116, 110, 0.34); padding: 22px 0; webkit-box-shadow: inset 4px 104px 93px -18px rgba(76, 116, 110, 0.34); }
.breadcrumbs h1 { color: #fff; font-size: 23px; margin: 0; padding: 0; }
ol.breadcrumb { background: transparent; border-radius: 0; color: #fff; float: right; margin: 0; padding: 6px 0 0; }
ol.breadcrumb li:first-child { color: #fff; font-size: 15px; font-weight: normal; }
ol.breadcrumb li.active { color: #fff; font-size: 15px; font-weight: bold; }
ol.breadcrumb li a { color: #fff; font-size: 15px; }
ol.breadcrumb li a:hover { color: #4c746e; }
ol.breadcrumb > li + li:before { color: #fff; content: "¥f105"; font-family: "fontawesome"; font-weight: normal; padding: 0 5px; }
ol.breadcrumb > li:first-child + li:before { content: ""; padding: 0 3px 0 0; }
/* End of Breadcrumbs */
/* ============
2 = Header
============ */
.top { background: #fff; }
.top.sticky { box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); position: fixed; width: 100%; z-index: 99999; }
.logo {padding-top:17px; }
/* Navigation ---------------------- */
nav#desktop-menu { padding: 0; float: right; text-align: left; }
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none;}
.sf-menu li { position: relative;}
.sf-menu ul { position: absolute; display: none; top: 100%; left: -50%; z-index: 99;}
.sf-menu > li { float: left;}
.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display: block;}
.sf-menu a { display: block; position: relative;}
.sf-menu ul ul { top: 0; left: 100%;}
/*** SKIN ***/
.sf-menu { float: left; margin: 0;}
.sf-menu ul { min-width: 12em; *width: 12em; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);}
/* 1st level */
.sf-menu li { white-space: nowrap; *white-space: normal;}
.sf-menu li a {border-right: 1px solid #e8e8e8; color: #6f6f6f; font-weight: 300; letter-spacing: .1em; padding: 32px 25px; text-transform: uppercase }
.sf-menu li:first-child a {border-left: 1px solid #e8e8e8; }
.sf-menu li:hover a, .sf-menu li.sfHover a, .sf-menu li.current a { background: #ededed; color: #6f6f6f; -webkit-transition: none; transition: none;}
/* 2nd level */
.sf-menu ul li, .sf-menu li.current ul li{background:#fff!important; }
.sf-menu ul li a {border-bottom: 1px solid #e8e8e8; background:#fff!important; font-size: 14px; font-weight: 300; letter-spacing: .04em; padding: 13px 20px 10px;}
.sf-menu ul li:hover a, .sf-menu ul li.sfHover a { background: #ededed!important; color: #6f6f6f; -webkit-transition: none; transition: none;}
/* 3rd level */
.sf-menu ul li.sfHover li a {background:#fff!important; }
.sf-menu ul li li:hover a, .sf-menu ul li li.sfHover a { background: #ededed!important; color: #6f6f6f; -webkit-transition: none; transition: none;}
/*** ESSENTIAL STYLES 2 ***/
.sf1-menu, .sf1-menu * { margin: 0; padding: 0; list-style: none;}
.sf1-menu li { position: relative;}
.sf1-menu ul { position: absolute; display: none; top: 100%; left: 0; z-index: 99;}
.sf1-menu > li { float: left;}
.sf1-menu li:hover > ul, .sf1-menu li.sfHover > ul { display: block;}
.sf1-menu a { display: block; position: relative;}
.sf1-menu ul ul { top: 0; left: 100%;}
/*** SKIN ***/
.sf1-menu { float: left; margin: 0;}
.sf1-menu ul { min-width: 12em; *width: 12em; -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);}
/* 1st level */
.sf1-menu li { white-space: nowrap; *white-space: normal;}
.sf1-menu li a {border-right: 1px solid #e8e8e8; color: #6f6f6f; font-weight: 300; letter-spacing: .1em; padding: 32px 25px; text-transform: uppercase }
.sf1-menu li:first-child a {border-left: 1px solid #e8e8e8; }
.sf1-menu li:hover a, .sf1-menu li.sfHover a, .sf1-menu li.current a { background: #ededed; color: #6f6f6f; -webkit-transition: none; transition: none;}
/* 2nd level */
.sf1-menu ul li, .sf1-menu li.current ul li{background:#fff!important; }
.sf1-menu ul li a {border-bottom: 1px solid #e8e8e8; background:#fff!important; font-size: 14px; font-weight: 300; letter-spacing: .04em; padding: 13px 20px 10px;}
.sf1-menu ul li:hover a, .sf1-menu ul li.sfHover a { background: #ededed!important; color: #6f6f6f; -webkit-transition: none; transition: none;}
/* 3rd level */
.sf1-menu ul li.sfHover li a {background:#fff!important; }
.sf1-menu ul li li:hover a, .sf1-menu ul li li.sfHover a { background: #ededed!important; color: #6f6f6f; -webkit-transition: none; transition: none;}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul { padding-right: 2.5em; *padding-right: 1em; }
.sf-arrows .sf-with-ul:after { content: ''; position: absolute; top: 50%; right: 1em; margin-top: -3px; height: 0; width: 0; border: 5px solid transparent; border-top-color: #999; }
.sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color: #999; }
.sf-arrows ul .sf-with-ul:after { margin-top: -5px; margin-right: -3px; border-color: transparent; border-left-color: #6f6f6f; }
.sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color: #999;}
.slicknav_menu { display:none;}
/* ===============
3 = Home Page
=============== */
/* Tab Slider */
#mainslider .item { color: #fff; margin: 0; padding: 0; position: relative; text-align: center; }
#mainslider .item .slidecaption { left: 1%; position: absolute; right: 1%; text-align: center; top: 23%; }
#mainslider .item .slidecaption h2 { color: #2C6FF8; font-size: 3.5em; text-shadow: -1px 1px 0 #2d2d2f; }
#mainslider .item .slidecaption h4 { color: #fff; font-size: 2em; font-weight: 300; margin-top: 25px; text-shadow: -1px 1px 0 #2d2d2f; }
#mainslider .item .slidecaption .btn-slide { background: #006BFF; border-radius:0; color: #fff; color: #fff; font-size: 19px; font-weight:400; margin: 25px auto 10px auto; padding: 7px 20px; }
#mainslider .item .slidecaption .btn-slide:hover { background: #005EE1; }
#mainslider-nav { border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; }
#mainslider-nav .item { background: #fff; border-right: 1px solid #ccc; color: #999; cursor: pointer; font-size: 14px; font-weight: 500; letter-spacing: .07em; margin: 0; padding: 22px 0px; text-align: center; }
#mainslider-nav .item i { color: #999; font-size: 25px; padding-right: 10px; vertical-align: middle; }
#mainslider-nav .synced .item { background: #2C6FF8; color: #222; }
#mainslider-nav .synced .item i { color: #222; }
/* End of Tab Slider */
/* Features */
.features { overflow: hidden; padding: 75px 0; }
.features h2 { font-weight: 900; margin-bottom: 12px; text-align: center; }
.features span { display: block; font-size: 18px; font-weight: 300; text-align: center; }
.feature { text-align: center; }
.feature img { margin: 0 auto; }
.feature i { font-size:58px; color:#006BFF; }
.feature h4 { font-weight: 500; margin-top: 30px; }
.feature p { font-size: 17px; font-weight: 300; margin: 18px 0 0; padding: 0 40px; }
/* End of Features */
/* Call to Action */
.calltoaction { background: url(images/ctabg.png); overflow: hidden; padding: 75px 0; }
.cta-content { background: #3489FF; }
.cta-content [class*='col-']:first-child { background: #006BFF; }
.offer { padding: 12px 0; text-align: center; }
.offer span { color: #fff; font-size: 18px; font-weight: 300; margin: 0; padding: 0; }
.offer h2 { color: #fff; font-size: 69px; font-weight: 900; letter-spacing: -.09em; line-height: .9; margin: 0; padding: 0 0 5px; }
.offerdescription { padding: 12px 35px; }
.offerdescription h2 { color: #fff; font-size: 44px ¥9; font-size: 54px; font-weight: 900; letter-spacing: -.07em; margin: 0; padding: 6px 0; }
.offerdescription p { color: #fff; font-size: 21px; font-weight: 300; margin: 0; }
.domainsearch { background: #4d4d4d; background: rgba(0, 0, 0, .2); border-radius: 6px; margin-top: 25px; padding: 20px; }
.domainsearch .form-control { width: 100%; }
.domainsearch input[type="text"].form-control { border-bottom-left-radius: 5px; border-bottom-right-radius: 0; border-top-left-radius: 5px; border-top-right-radius: 0; font-size: 18px; height: 55px; padding: 5px 15px; width: 100%; }
.domainsearch select.form-control { border-radius: 0; font-size: 18px; height: 55px; padding: 5px 15px; width: 100%; }
.domainsearch button[type="submit"] { background: #515151; border: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 5px; border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 5px; color: #fff; cursor: pointer; float: left; font-size: 16px; font-weight: 900; height: 55px; padding: 8px 6px 6px; text-transform: uppercase; width: 100%; }
.domainsearch button[type="submit"]:hover { background: #646464; }
.domainsearch input[type="text"]:focus, .domainsearch select:focus { border: 0; box-shadow: 0 8px 6px -6px #000; }
/* End of Call to Action */
/* Pricing Tables Home */
.pricingtables { background: #efefef; overflow: hidden; padding: 45px 0 90px; }
.pricingtables h2 { font-weight: 900; margin-bottom: 12px; text-align: center; }
.pricingtables p { font-size: 17px; font-weight: 300; margin: 18px 0 0; text-align: center; }
.pricingtables h4 { color: #3C97FF; font-size: 59px; letter-spacing: -.07em; margin: 0; padding: 0 0 10px; text-align: center; }
.pricingtables .panel { border: 0; border-radius: 0; margin: 0; padding: 0; }
.pricingtables .panel-heading { background: #222222; border: 0; border-radius: 0; filter: none !important; }
.pricingtables .panel-heading h3 { color: #fff; font-size: 21px; font-weight: 400; letter-spacing: -.07em; margin: 0; padding: 12px 0; }
.pricingtables .panel-body { background: #282828; margin: 0; padding: 10px 0 15px; }
.pricingtables .panel-body span { color: #fff; font-size: 11px; margin: 0 auto; padding: 5px 10px; }
.pricingtables .panel-body span.per { background: #222222; padding: 5px 10px 2px; }
.pricingtables ul { border: 0; list-style: none; margin: 0; padding: 0; }
.pricingtables ul li { border: 0; font-size: 16px; padding: 20px 0; }
.pricingtables ul li:nth-child(odd) { background: #fff; }
.pricingtables ul li:nth-child(even) { background: #e1e3e4; }
.pricingtables .panel-footer { text-align: center; }
.pricingtables .btn-pricetable { background: #6e6e6e; border-radius: 0; color: #fff; font-size: 1.3em; margin: 10px auto; padding: 10px 30px; }
.pricingtables .btn-pricetable:hover { background: #006BFF; }
.pricingtables .most-popular { border-width: 3px; box-shadow: 20px 0 20px -10px rgba(0, 0, 0, .15), -20px 0 20px -10px rgba(0, 0, 0, .15); padding: 0; top: -26px; z-index: 2; }
.pricingtables .most-popular .panel-heading { background: #0064DF; }
.pricingtables .most-popular .panel-body { background: #2C6FF8; }
.pricingtables .most-popular h4 { color: #fff; }
.pricingtables .most-popular .panel-body span.per { background: #0064DF; }
.pricingtables .most-popular ul li { font-size: 17px; padding: 23px 0; }
.pricingtables .most-popular .btn-pricetable { margin: 15px auto; }
/* End of Pricing Tables */
/* Statistics */
.statistics { background: #fff; overflow: hidden; padding: 45px 0 60px; }
.statistics h2 { font-weight: 900; margin-bottom: 12px; text-align: center; }
.statistics h2 i { color: #0077FF; }
.statistics p { font-size: 17px; font-weight: 300; margin: 0 auto; text-align: center; }
.statistics span { display: block; font-size: 18px; font-weight: 300; text-align: center; }
.statistics .circle-text { color: #807e7e; font-weight: 900; }
/* End of Statistics */
/* ==============================
4 = Video Header Page
============================== */
/* Video */
#index-video .index-video-container { min-height: 640px; padding-bottom: 50px; position: relative; overflow: hidden;}
#index-video .index-video-container:after { background: url(images/video_bg_pattern.png) repeat; bottom: 0px; content: ""; left: 0; opacity: 0.7; position: absolute; right: 0; top: 0; z-index: 1; }
#index-video .index-video-container .videocaption { left: 1%; position: absolute; right: 1%; text-align: center; top: 35%; z-index: 2; }
#index-video .index-video-container .videocaption h2 { color: #2C6FF8; font-size: 3.5em; text-shadow: -1px 1px 0 #2d2d2f; }
#index-video .index-video-container .videocaption h4 { color: #fff; font-size: 2em; font-weight: 300; margin-top: 25px; text-shadow: -1px 1px 0 #2d2d2f; }
#index-video .index-video-container .videocaption .btn-slide { background:#006BFF; color: #fff; font-size: 19px; font-weight:400;margin: 25px auto 10px auto; padding: 7px 20px; border-radius:0; }
#index-video video { width:100%; background-size: cover; position: absolute; top: 0; left: 0;}
/* End of Video */
/* ==============================
5 = Shared Hosting Page
============================== */
/* Choose Price Period */
span.chooseprice { background: #006BFF; border-radius: 6px; color: #fff; display: table; font-size: 16px; margin: 0 auto; margin-top: 30px; padding: 5px 20px; position: relative; }
span.chooseprice:after { border: solid transparent; border-color: rgba(222, 98, 98, 0); border-top-color: #006BFF; border-width: 10px; content: " "; height: 0; left: 50%; margin-left: -10px; pointer-events: none; position: absolute; top: 100%; width: 0; }
.btn-group.price-per-period { display: table; margin: 0 auto; margin-top: 30px; text-align: center; }
.btn-group.price-per-period .btn { border-color: #e8e8e8; font-size: 16px; padding: 10px 15px 8px; }
.btn-shared-checked { background-color: #73ae95; border-color: #4cae4c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); }
.btn-shared-checked:hover, .btn-shared-checked:focus, .btn-shared-checked.focus, .btn-shared-checked:active, .btn-shared-checked.active { background-color: #73ae95; border-color: #398439; box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); color: #fff; webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }
.btn-shared-checked:active, .btn-shared-checked.active { background-image: none; }
/* End of Choose Price Period */
/* Pricing Tables Shared Hosting Page */
.pricingtables .hostingfeatures .panel, .pricingtables .hostingfeatures .panel-heading, .pricingtables .hostingfeatures .panel-body, .pricingtables .hostingfeatures .panel-footer { background: transparent; border: 0; box-shadow: none; }
.pricingtables .hostingfeatures ul { margin-top: 142px; }
.pricingtables.shared .hostingfeatures ul li { color: #fff; padding: 20px; }
.pricingtables.shared .hostingfeatures ul li a { color: #fff; }
.pricingtables.shared .hostingfeatures ul li:nth-child(odd) { background: #41444a; }
.pricingtables.shared .hostingfeatures ul li:nth-child(even) { background: #36393d; }
.pricingtables.shared .most-popular { border-width: 3px; box-shadow: 20px 0 20px -10px rgba(0, 0, 0, .15), -20px 0 20px -10px rgba(0, 0, 0, .15); padding: 0; top: 0; z-index: 2; }
.pricingtables.shared h4 { color: #fff; }
.pricingtables.shared ul li i { color: #72ac94; }
.pricingtables.shared .most-popular .panel-heading { background: #005EE1; }
.pricingtables.shared .most-popular .panel-body { background: #006BFF; }
.pricingtables.shared .most-popular h4 { color: #fff; }
.pricingtables.shared .most-popular .panel-body span.per { background: #005EE1; }
.pricingtables.shared .most-popular ul li { font-size: 16px; padding: 20px 0; }
.pricingtables.shared .most-popular .btn-pricetable { margin: 10px auto; }
.yearprice, .twoyearprice { display: none; }
.tooltip { background: transparent; font-family: 'hind', sans-serif; }
.tooltip-inner { font-size: 14px; max-width: 150px; padding: 5px 8px; }
/* End Pricing Tables Shared Hosting Page */
/* Tabs Section - Shared Hosting Page */
.shared-features { background: #fff; overflow: hidden; padding: 45px 0 60px; }
.shared-features h2 { font-weight: 900; margin-bottom: 12px; text-align: center; }
.shared-features p { font-size: 17px; font-weight: 300; margin: 0 auto; text-align: center; }
.r-tabs .r-tabs-nav { display: table; margin: 0 auto; padding: 0; text-align: center; }
.r-tabs .r-tabs-tab { float: left; list-style: none!important; margin: 0; }
.r-tabs .r-tabs-panel { display: none; padding: 15px; }
.r-tabs .r-tabs-accordion-title { display: none; }
.r-tabs .r-tabs-panel.r-tabs-state-active { display: block; }
.r-tabs { background-color: #fff; border: 0; position: relative; }
.r-tabs .r-tabs-nav .r-tabs-tab { background: #efeff2; border-right: 1px solid #fff; font-size: 14px; margin: 0; position: relative; }
.r-tabs .r-tabs-nav .r-tabs-tab:first-child { border-left: 1px solid #fff; }
.r-tabs .r-tabs-nav .r-tabs-anchor { color: #7a7c89; float: left; font-weight: normal; margin: 0; padding: 12px 20px 10px; text-decoration: none; }
.r-tabs .r-tabs-nav .r-tabs-state-disabled { opacity: 0.5; }
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor { background: #006BFF; color: #fff; }
.r-tabs .r-tabs-panel { border-bottom: 4px solid #e8e8e8; border-left: 1px solid #e8e8e8; border-radius: 4px; border-right: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8; padding: 20px 25px 35px; }
.r-tabs .r-tabs-accordion-title .r-tabs-anchor { background: #efeff2; border: 1px solid #e4e7f0; color: #222; display: block; font-size: 14px; padding: 10px; }
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor { background: #006BFF; color: #fff; text-shadow: none; }
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled { opacity: 0.5; }
#shared-hosting-tabs .r-tabs-panel { margin-top: 120px!important; }
#shared-hosting-tabs .centralicon { display: table; margin: 0 auto; margin-top: -90px; text-align: center; }
#shared-hosting-tabs .centralicon img { border: 10px solid #e1e3e4; border-radius: 100%; }
#shared-hosting-tabs #feature1 h5, #shared-hosting-tabs #feature5 h5 { font-size: 25px; line-height: 1.3; margin-bottom: 17px; text-align: left; }
#shared-hosting-tabs #feature1 p, #shared-hosting-tabs #feature5 p { padding-left: 0; padding-roght: 0; text-align: left; }
#shared-hosting-tabs h5 { font-size: 25px; line-height: 1.3; margin-bottom: 17px; text-align: center; }
#shared-hosting-tabs p { padding: 0 40px; text-align: center; }
#shared-hosting-tabs .tabfeatures { margin-top: 40px; text-align: center; }
#shared-hosting-tabs .tabfeatures img { margin: 0 auto; text-align: center; }
#shared-hosting-tabs .tabfeatures p { padding: 0; }
#shared-hosting-tabs h6 { font-size: 18px; line-height: 1.3; padding: 17px 0 6px; }
#shared-hosting-tabs #feature1, #shared-hosting-tabs #feature2, #shared-hosting-tabs #feature3, #shared-hosting-tabs #feature4, #shared-hosting-tabs #feature5 { transition: all ease-out 0.2s 0.1s;}
.supportchannels { display: table; margin: 0 auto; margin-top: 45px; text-align: center; }
.supportchannels .block-grid-item { padding: 0 45px; }
.supportchannels .block-grid-item i { background: #73ae95; border: 6px solid #e1e3e4; border-radius: 50%; color: #fff; font-size: 38px; height: 90px; padding: 20px 0 0 0; text-align: center; transition: all 0.4s ease; webkit-transition: all 0.4s ease; width: 90px; }
.supportchannels .block-grid-item i:hover { background: #006BFF; transform: scale(1.3); webkit-transform: scale(1.3); }
/* End Tabs Section - Shared Hosting Page */
/* ==============================
6 = VPS Page
============================== */
/* Order Steps - VPS Page */
.vps-order { background: #fff; padding: 45px 0; }
.order-step { height: 40px; margin: 25px 0 20px; }
.vps-order h3 { background: #72ac94; color: #fff; font-size: 18px; font-weight: normal; padding: 20px 35px; position: relative; text-align: center; }
.vps-order h3:after {bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(114, 172, 148, 0); border-bottom-color: #72ac94; border-width: 10px; margin-left: -10px; }
.vps-order p { font-size: 15px; padding: 0 25px; }
.order-step .order-circle { position: relative; text-align: center; }
.order-step .order-circle span { background: #8d8c8c; border: 4px solid #d3d1d1; border-radius: 1000px; color: #fff; display: inline-block; font-weight: 900; height: 40px; line-height: 32px; moz-border-radius: 1000px; ms-border-radius: 1000px; o-border-radius: 1000px; position: relative; text-align: center; vertical-align: middle; webkit-border-radius: 1000px; width: 40px; z-index: 10; }
.order-step .order-circle span.left-side { margin-right: 15px; }
.order-step .order-circle span.right-side { margin-left: 15px; }
/* End of Order Steps - VPS Page */
/* Order Slider - VPS Page */
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { cursor: default; height: 1.2em; position: absolute; width: 1.2em; z-index: 2; }
.ui-slider .ui-slider-range { background-position: 0 0; border: 0; display: block; font-size: .7em; position: absolute; z-index: 1; }
.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { margin-left: -.6em; top: -.3em; }
.ui-slider-horizontal .ui-slider-range { height: 100%; top: 0; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
.ui-slider-vertical { height: 100px; width: .8em; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-bottom: -.6em; margin-left: 0; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }
.vps-prices-drag { float: left; margin: 0 0 40px; padding: 0 60px; width: 100%; }
.vps-prices-container { background: #6c7a89; border-radius: 6px; float: left; margin-top: 35px; padding-top: 55px; width: 100%; }
.vps-prices-panel { float: left; width: 100%; }
.vps-prices-container #vps-slider { background: #000; background: rgba(0,0,0,.15); border-radius: 6px; float: left; height: 17px; margin: 0 0 12px; width: 100%; }
.vps-prices-container #sliderlines { background: url(images/lines1.png) center top; display: table; height: 10px; margin: 0 auto; width: 100%; }
.vps-prices-container #vps-slider .ui-slider-range { background: #006BFF; border-radius: 6px; }
.vps-prices-container #vps-slider .ui-slider-handle { background: url(images/slider_range.png) no-repeat left top; border: 0; border-radius: 0; height: 33px; margin-left: -25px; margin-top: -15px; outline: none; width: 46px; }
.vps-prices-container #vps-slider .ui-slider-handle:hover { cursor: pointer; }
.vps-plans { display: table; margin: 0 auto; padding: 2% 0 0; width: 99%; }
.vps-plans div.vps-plan { color: #fff; float: left; font-size: 17px; font-weight: bold; margin: 0; text-align: left; width: 25%; }
.vps-plans div.vps-plan:first-child { text-align: left; }
.vps-plans div.vps-plan:last-child { margin-right: 0; padding-right: 0; text-align: right; }
.vps-plans div.vps-plan:nth-child(2) { padding-left: 70px; }
.vps-plans div.vps-plan:nth-child(3) { padding-right: 80px; text-align: right; }
.vps-plans.threeplans div.vps-plan { width: 33.3333333333333%; }
.vps-plans.threeplans div.vps-plan:nth-child(2) { padding-left: 0; text-align: center }
.vps-plans.threeplans div.vps-plan:nth-child(3) { padding-right: 0; text-align: right; }
.vps-plans.fiveplans div.vps-plan { width: 20%;}
.vps-plans.fiveplans div.vps-plan:nth-child(2) { padding-left: 25px; text-align:left}
.vps-plans.fiveplans div.vps-plan:nth-child(3) { padding-left: 0; }
.vps-plans.fiveplans div.vps-plan:nth-child(4) { text-align: right; padding-right:30px; }
.vps-plans.sixplans div.vps-plan { width: 16.666666666667%;}
.vps-plans.sixplans div.vps-plan:first-child { text-align: left; width: 16.666666666667%;}
.vps-plans.sixplans div.vps-plan:nth-child(2) { padding-left: 0px; }
.vps-plans.sixplans div.vps-plan:nth-child(3) { padding-right: 95px; }
.vps-plans.sixplans div.vps-plan:nth-child(4) { text-align: center; }
.vps-plans.sixplans div.vps-plan:nth-child(5) { padding-right: 25px; text-align: right }
.vps-plans.sixplans div.vps-plan:last-child { margin-right: 0; padding-right: 0; text-align: right; width: 16.666666666667%;}
.sliderbottom { background: rgba(0,0,0,.1); float: left; padding: 10px 0 25px; text-align: center; width: 100%; }
.sliderbottom h6 { color: #fff; font-size: 19px; font-weight: 400; }
.sliderbottom .how_much { color: #fff; font-size: 29px; font-weight: 700; line-height: .9; margin: 0; padding: 0 0 5px; }
.total_amount { color: #fff; font-size: 36px; font-weight: 900; line-height: .9; margin: 0 0 10px; margin: 0; padding: 10px 10px 20px; }
a.order-vps { color: #fff; font-size:17px; font-weight: 900; padding:6px 15px; background-color: #73ae95; border-color: #4cae4c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075); }
/* End Order Slider - VPS Page */
.pricingtables.vps { background: #efefef; overflow: hidden; padding: 45px 0; }
/* End of VPS Page */
/* ==============================
7 = Dedicated servers
============================== */
/* Pricing Tables - Dedicated servers Page */
.pricingtables.servers { background: #fff; overflow: hidden; padding: 45px 0; }
.pricingtables.servers .panel { border: 0; border-radius: 0; margin: 0; padding: 0; box-shadow: none }
.pricingtables.servers .panel-heading { background: #fff; border: 0; border-radius: 0; filter: none !important; border-bottom:1px solid #BBB; }
.pricingtables.servers .panel-heading h3 { color: #555; font-size: 35px; font-weight: 700; letter-spacing: -.07em; margin: 0; padding: 12px 0; }
.pricingtables.servers h4 { color:#A6C3C4; font-size: 59px; letter-spacing: -.07em; margin: 0; padding: 0 0 10px; text-align: center; }
.pricingtables.servers .panel-body { background: #fff; margin: 0; padding: 10px 0 15px; }
.pricingtables.servers .panel-body span { color: #555; font-size: 11px; margin: 0 auto; padding: 5px 10px; }
.pricingtables.servers .panel-body span.per { background: #F0F0F0; padding: 5px 10px 2px; }
.pricingtables.servers ul { border: 0; list-style: none; margin: 0; padding: 0; }
.pricingtables.servers ul li:first-child { border-top:1px solid #E6E6E6; }
.pricingtables.servers ul li { background: #fff; border-bottom:1px solid #E6E6E6; font-size: 15px; padding: 10px 0;}
.pricingtables.servers .panel-footer { text-align: center; background:#fff; border:0; }
.pricingtables.servers .btn-pricetable { background: #006BFF; border-radius: 0; color: #fff; font-size:13px; margin: 10px auto; padding: 7px 10px 5px; font-weight:700; }
.pricingtables.servers .btn-pricetable:hover { background: #005EE1; }
/* End of Pricing Tables - Dedicated servers Page */
/* Video Background - Dedicated servers Page */
#servers-video .servers-video-container { min-height: 350px; padding-bottom: 50px; position: relative; overflow: hidden;}
#servers-video .servers-video-container:after { background: url(images/video_bg_pattern.png) repeat; bottom: 0px; content: ""; left: 0; opacity: 0.7; position: absolute; right: 0; top: 0; z-index: 1; }
#servers-video .servers-video-container .videocaption { left: 1%; position: absolute; right: 1%; text-align: center; top: 15%; z-index: 2; }
#servers-video .servers-video-container .videocaption h2 { color: #E1E3E4; font-size: 3.5em; text-shadow: -1px 1px 0 #2d2d2f; }
#servers-video .servers-video-container .videocaption h4 { color: #fff; font-size: 2em; font-weight: 300; margin-top: 25px; text-shadow: -1px 1px 0 #2d2d2f; }
#servers-video .servers-video-container .videocaption .btn-slide { background:#71AC93; border-radius: 0; color: #fff; font-size: 19px; font-weight:700;margin: 25px auto 10px auto; padding: 7px 20px; border-radius:5px; position: relative; }
#servers-video .servers-video-container .videocaption .btn-slide:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(113, 172, 147, 0); border-top-color: #71AC93; border-width: 8px; margin-left: -8px; }
#servers-video video { width:100%; background-size: cover; position: absolute; top: 0; left: 0;}
/* End of Video Background - Dedicated servers Page */
/* Responsive Table - Dedicated servers Page */
.servers-table {background: #fff; overflow: hidden; padding: 45px 0; }
.products-table {min-width:100%; border:1px solid #DFE0E5; font-family: 'hind', sans-serif; background: #F7F7F7;}
.products-table thead th {background:#F2F3F6; color:#6E6E6E!important; font-weight:700; font-size:13px; font-weight:bold; border-left:1px solid #DFE0E5; border-right:1px solid #DFE0E5; border-bottom:1px solid #DFE0E5;}
.products-table th {font-weight: normal; -webkit-font-smoothing: antialiased; padding:16px 12px; color: #6E6E6E; font-size: 15px; background: #fff; }
.products-table td {color: #6E6E6E; padding:16px 12px; font-size: 15px; border-bottom:1px solid #DFE0E5;}
.products-table td:last-child, .products-table thead th:last-child {text-align: center;}
.products-table tr.even, .products-table tr.alt, .products-table tr:nth-of-type(even) { background: #fff!important; }
.products-table td span {background:#006BFF; padding:3px 7px 5px; margin:0 auto; display: block}
.products-table td span:hover {background:#282828;}
.products-table td span a{color:#fff; font-size: 12px }
.products-table td span a:hover{text-decoration: none}
/* End of Responsive Table - Dedicated servers Page */
/* ==============================
8 = Domains
============================== */
.domains { background: #42494E; padding:45px 0;}
.domains h2 {color:#fff; text-align: center;}
.domains p {color:#fff; text-align: center; font-size:18px;}
.domainsearch-full {background: #666; border-radius: 0;padding: 20px; }
.domainsearch-full .form-control { width: 100%; }
.domainsearch-full input[type="text"].form-control { border-bottom-left-radius: 5px; border-bottom-right-radius: 0; border-top-left-radius: 5px; border-top-right-radius: 0; font-size: 18px; height: 55px; padding: 5px 15px; width: 100%; }
.domainsearch-full select.form-control { border-radius: 0; font-size: 18px; height: 55px; padding: 5px 15px; width: 100%; }
.domainsearch-full button[type="submit"] { background: #515151; border: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 5px; border-radius: 4px; border-top-left-radius: 0; border-top-right-radius: 5px; color: #fff; cursor: pointer; float: left; font-size: 16px; font-weight: 900; height: 55px; padding: 8px 6px 6px; text-transform: uppercase; width: 100%; }
.domainsearch-full button[type="submit"]:hover { background: #646464; }
.domainsearch-full input[type="text"]:focus, .domainsearch-full select:focus { border: 0; box-shadow: 0 8px 6px -6px #000; }
#domainextensions {margin-top:10px;}
#domainextensions .item { margin: 0 3px;}
#domainextensions .item .extension { padding:10px 20px; font-size:16px; font-weight:900; color:#fff; text-align:center; border:1px solid #646464; border-radius:6px; }
.domainfeatures { background: #efefef; padding:45px 0;}
.domainfeatures h2 { font-weight: 700; margin-bottom: 12px; text-align: center; }
.domainfeatures p { font-size: 17px; font-weight: 300; margin: 18px 0 0; text-align: center; padding:0 30px;}
.domainfeatures h6 { font-size:18px; color: #006BFF; font-weight: 700; letter-spacing: .07em; border: 2px solid #006BFF; margin:0 auto; padding:15px 25px; display: table; text-align: center; }
.domainfeatures .panel {border:0; box-shadow:0; }
.domainfeatures .panel-heading {border-left:5px solid #005EE1!important; box-shadow:0; background:#006BFF; color:#fff; border-radius:0!important; padding:12px; }
.domainfeatures .panel-heading h4.panel-title {font-size:14px; font-weight:normal; line-height: 1.3; color:#fff; color:#6E6E6E¥9¥0;}
.domainfeatures .panel-heading h4.panel-title a:hover, .domainfeatures .panel-heading h4.panel-title a:focus {color:#fff; color:#6E6E6E¥9¥0;}
.domainfeatures .panel-body {padding:15px; margin:0;}
.domainfeatures .panel-body p {text-align: left; font-size:15px; padding:0; margin:0;}
.domainfeatures.white { background: #fff;}
.domains-table {background: #fff; overflow: hidden; padding: 45px 0; }
#tld-table {min-width:100%; border:1px solid #DFE0E5; font-family: 'hind', sans-serif; background: #EDEEF2; }
#tld-table thead th {background:#3388FE; color:#fff!important; font-weight:700; font-size:13px; position:relative; cursor: pointer; -webkit-box-shadow: -1px 0px 0px 0px rgba(107, 160, 136, 1);-moz-box-shadow: -1px 0px 0px 0px rgba(107, 160, 136, 1);box-shadow: -1px 0px 0px 0px rgba(107, 160, 136, 1);}
#tld-table thead th:before { position:absolute; font-family: FontAwesome; top:15px; right:12px; content: "¥f0dc"; }
#tld-table th {font-weight: normal; -webkit-font-smoothing: antialiased; padding:16px 12px; color: #6E6E6E; font-size: 15px; background: #FFFFFF; }
#tld-table td {color: #6E6E6E; padding:16px 12px; font-size: 15px; border-bottom:1px solid #DFE0E5; text-align: center;}
#tld-table td:first-child { font-weight:bold; text-align: left; }
#tld-table thead th:first-child { text-align: left; }
#tld-table tr.even, #tld-table tr.alt, #tld-table tr:nth-of-type(even) { background: #FFFFFF!important; }
/* ==============================
9 = About Us
============================== */
.about {padding:0 0 45px;}
.about-hero {position: relative;}
.about-text {position: absolute; top:45%; left:1%; right:1%; z-index:999;}
.about-text h2 {color:#fff; text-align: center;}
.about-text p {font-size:18px; color:#fff; text-align: center;}
.about p {font-size:17px; font-weight: 300}
.about hr { border: solid #006BFF; border-width: 1px 0 0; clear: both; height: 0; margin:0 auto; margin-bottom:20px; max-width:70px; }
.about-quote {background:url(images/quote-image.jpg);background-size: cover; background-repeat: no-repeat; background-position: center center; }
.about-quote-column {background:#006BFF;}
.about-quote.odd {background:url(images/quote-image2.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center;}
.about-quote2-column {background:#71AB93;}
.thequote {padding:90px;}
.about-quote h5 {color:#fff; font-size:41px; letter-spacing: -.07em; font-weight: 400; margin-bottom:50px; }
.about-quote span{color:#fff; font-size:18px; text-transform: uppercase; letter-spacing: .07em;}
.ourclients {padding:45px 0; background:#EDEDED;}
.ourclients h3 {text-align: center;}
.ourclients p {text-align: center; font-size:18px;}
.clients .block-grid-item {text-align: center; padding:50px 20px; border:1px solid #d7d5d5; border-left:0; border-top:0; }
.clients .block-grid-item:nth-child(4n+4) { border-right:0;}
.clients .block-grid-item:nth-last-child(-n+4) {border-bottom:0;}
.testimonials {padding:45px 0; background:#fff;}
.testimonials.gray {background:#ededed;}
.testimonials h3 {text-align: center;}
.testimonials p {font-size:18px; text-align: center;}
.testimonial-content { padding:20px 0 0; text-align: center;}
.testimonial-content p {color:#6E6E6E; padding:25px 60px 5px; font-size:17px; text-align: center;}
.testimonial-content .whoclient h5 {font-size:14px; color:#6E6E6E; text-transform: uppercase; letter-spacing: .07em; margin-bottom:15px;}
.testimonial-content .whoclient h5 a {color:#006BFF; }
.testimonialimg {text-align: center;}
.testimonial-content img { width: 160px; height: 160px; border-radius: 50%; -webkit-border-radius:50%; -moz-border-radius: 50%;}
/* ==============================
10 = FAQ
============================== */
.faq { overflow: hidden; padding: 45px 0 65px; background:#EDEDED;}
.faq h2 { font-weight: 900; margin-bottom: 12px; text-align: center; }
.faq p { font-size: 17px; font-weight: 300; text-align: center; }
.faq-questions {background:#fff; border:1px solid #C9C9C1; padding:0 15px 15px;}
.faq-questions h3.badge {border-radius:3px; padding:7px 12px; display:table; margin:0 auto; margin-top:-18px; font-size:18px;}
.faq .panel {border:0; box-shadow:0; }
.faq .panel-heading {border:0; box-shadow:0; background:#F2F2F2; color:#6E6E6E; border-radius:0!important; padding:12px; }
.faq .panel-heading h4.panel-title {font-size:14px; font-weight:normal; line-height: 1.3}
.faq .panel-body {padding:15px; margin:0;}
.faq .panel-body p {text-align: left; font-size:15px; padding:0; margin:0;}
.needsupport { padding: 0 0 45px; background:#fff;}
.needsupport h3.badge {border-radius:3px; paddin