---
title: Plantilla 2
slug: docs/es/plantilla-2
description: Mejora el atractivo visual y la funcionalidad de tu sitio web con esta plantilla de página de destino de marca blanca personalizable. Este documento ofrece archivos de código que se pueden editar en un editor de código e incluye secciones con bloques de í
docTags: 
createdAt: 2023-06-28T08:23:40.655Z
---

:::hint{type="info"}
Esta es una plantilla de marca blanca. Para que coincida con su marca y estilo, usted necesita realizar más personalizaciones en la plantilla proporcionada
:::

### Cómo se ve:

Utilice el siguiente enlace para ver cómo se ve la plantilla de marca blanca. Tenga en cuenta que cada color/logo/marcador de posición puede personalizarse para que coincida con su estilo y marca.

[https://r1yfc9.csb.app/](https://r1yfc9.csb.app/)

### Archivos de código personalizado:

:::hint{type="info"}
Consejo: Utilice el botón :FontAwesome[]{icon="fa-solid fa-copy"} Copiar en la esquina superior derecha del editor de código para copiar todo el código
:::

Agregamos el código personalizado para que usted lo utilice en el editor de código a continuación. Vea cómo usarlo [aquí](docId\:TYBfQPOP9Iv1r4A7DSqLV)

:::CodeblockTabs
Index.html

```html
<!-- START Include headers -->
<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
  />
  <link
    rel="stylesheet"
    id=""
    href="https://fonts.googleapis.com/css?family=Roboto%3A300%2C300i%2C400%2C400i%2C500%2C500i%2C700%2C700i%2C900%2C900i&#038;ver=5.2.2"
    type="text/css"
    media="all"
  />
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"
    crossorigin="anonymous"
  ></script>
</head>
<!-- END Inclhude headers -->

<!-- START NOT NEEDED -->
<link rel="stylesheet" href="/style.css" />
<script src="/script.js"></script>
<!-- END NOT NEEDED -->

<!-- START Landing page -->
<div id="page" class="site">
  <a class="skip-link screen-reader-text" href="#content">Skip to content</a>
  <header
    id="masthead"
    class="site-header navbar-static-top navbar-light"
    role="banner"
  >
    <div class="container-fluid">
      <nav class="navbar navbar-expand-xl p-0">
        <div class="navbar-brand">
          <a href="">
            <img
              src="https://placehold.co/270x30/2166ae/fff?text=Your+logo+here"
              alt="Your logo here"
            />
          </a>
        </div>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#main-nav"
          aria-controls=""
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="main-nav" class="collapse navbar-collapse justify-content-end">
          <ul id="menu-pimary-menu" class="navbar-nav">
            <li
              itemscope="itemscope"
              id="menu-item-65"
              class="menu-item menu-item-type-custom menu-item-object-custom nav-item"
            >
              <a title="Link" href="" class="nav-link">Link</a>
            </li>
            <li
              itemscope="itemscope"
              id="menu-item-219"
              class="menu-item menu-item-type-custom menu-item-object-custom nav-item"
            >
              <a title="Link" href="" class="nav-link">Link</a>
            </li>
            <li
              itemscope="itemscope"
              id="menu-item-221"
              class="menu-item menu-item-type-custom menu-item-object-custom nav-item"
            >
              <a title="Link" href="" class="nav-link">Link</a>
            </li>
            <li
              itemscope="itemscope"
              id="menu-item-220"
              class="menu-item menu-item-type-custom menu-item-object-custom menu-item-220 nav-item"
            >
              <a title="Link" href="" class="nav-link" target="_blank">Link</a>
            </li>
            <!--<li itemscope="itemscope" id="menu-item-220" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-220 nav-item">
																<a title="Link" href="" class="nav-link">Link</a>
															</li>-->
          </ul>
        </div>
      </nav>
    </div>
  </header>

  <!-- #masthead -->

  <div
    id="page-sub-header"
    style="background: url(https://placehold.co/1920x425/2166ae/2166ae);"
  >
    <div class="container">
      <div class="row">
        <div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
          <h1>Title</h1>
          <p>Subtitle.</p>
        </div>
      </div>
    </div>
  </div>
  <div id="content" class="site-content">
    <div class="container">
      <div class="row modulesRow d-flex justify-content-center">
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View APIs Doc">
                    View Doc
                  </span>
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View JS Library Doc">
                    View Doc</span
                  >
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View Community Forum">
                    View Doc</span
                  >
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span
                    class="btn btn-bordered"
                    target="_blank"
                    title="View Feed Docs"
                  >
                    View Doc
                  </span>
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View Community Forum">
                    View Doc
                  </span>
                </div>
              </div>
            </a>
          </div>
          <!-- ends iconBlock -->
        </div>
        <!-- ends col -->
        <!-- <div class="col-xs-12 col-sm-6 col-lg-4">
          <div class="iconBlock px-4 py-2">
            <a href="" class="iconBlockWrap">
              <div class="iconImgWrap">
                <img
                  src="https://placehold.co/64/fff/2166ae?text=Icon"
                  class="iconImg"
                />
              </div>
              <div class="iconBlock-detail">
                <h3 class="title">Doc Title</h3>
                <p class="iconBlock-brief">Small doc description.</p>
                <div class="more">
                  <span class="btn btn-bordered" title="View Community Forum">
                    View Doc
                  </span>
                </div>
              </div>
            </a>
          </div>
        </div> -->
      </div>
      <!-- .row -->
    </div>
    <!-- .container -->
  </div>
  <!-- #content -->
  <footer id="colophon" class="site-footer navbar-light" role="contentinfo">
    <div class="container-fluid pt-3 pb-3">
      <div class="site-info">
        Copyright 2023 &copy;
        <!-- Your company name here -->. All rights reserved.
      </div>
    </div>
  </footer>
  <!-- #colophon -->
</div>

<!-- END Landing page -->
```

Script.js

```javascript
$(".navbar-toggler").on("click", function () {
  $(".navbar-collapse").toggle("show");
});
```

Style.css

```css
:root {
  --accent-text: #2166ae;
  --secondary-text: #0a4563;
  --primary-text: #24292e;
  --background-color: #fff;
  --primary-link: #999;
  --accent-link: var(--accent-text);
  --header-title-color: #fff;
  --header-subtitle-color: #fff;
}
/*
Theme Name: jsv2doctheme
Theme URI:
Author:
Author URI:
Description:
Version: 3.3.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: wp-bootstrap-starter
Tags: blog, custom-menu, featured-images, threaded-comments, translation-ready, right-sidebar, custom-background, e-commerce, theme-options, sticky-post, full-width-template
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
# Woocommerce
# Footer
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
body {
  margin: 0;
  -webkit-font-smoothing: auto;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.6;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

dfn {
  font-style: italic;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 2.5rem;
}

hr {
  box-sizing: content-box;
  height: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  color: var(--primary-text);
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 15px;
}
h1,
h2,
h3 {
  font-weight: 500;
}
h1,
.h1 {
  font-size: 2rem;
  padding-bottom: 20px;
  color: var(--secondary-text);
}
h2,
.h2 {
  font-size: 1.55rem;
  padding-bottom: 0.3em;
  line-height: 130%;
}
h3,
.h3 {
  font-size: 1.45rem;
  line-height: 130%;
}
h4,
.h4 {
  font-size: 1.45rem;
  line-height: 130%;
}
h5,
.h5 {
  font-size: 1.1rem;
  line-height: 130%;
}

p {
  margin-bottom: 1.5em;
}
h1.entry-title {
  font-size: 1.85rem;
  /* border-bottom: 4px solid #f2f2f2; */
  /* padding-bottom: 10px !important; */
  color: var(--secondary-text);
}
h2.entry-title {
  border-bottom: 1px solid #eaecef;
  color: var(--secondary-text);
}
h3.widget-title {
  font-size: 1rem;
  margin-bottom: 5px;
  color: var(--secondary-text);
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
body {
  background: var(--background-color);
  /* Fallback for when there is no custom background color defined. */
}

img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}

figure {
  margin: 1em 0;
  /* Extra wide images within figure tags don't overflow the content area. */
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
header#masthead {
  margin-bottom: 0;
  padding: 0.85rem 0px;
  border-bottom: 1px solid #f3f3f3;
  background: var(--background-color) none repeat scroll 0 0;
  border-bottom: 1px solid #eee;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
}

.navbar-brand > a {
  color: rgba(0, 0, 0, 0.9);
  font-size: 1.1rem;
  outline: medium none;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  display: block;
  width: 270px;
}

.navbar-brand > a:visited,
.navbar-brand > a:hover {
  text-decoration: none;
}

#page-sub-header {
  position: relative;
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
  text-align: center;
  background-size: cover !important;
  background-position: center !important;
}

.site-header .container-fluid,
.site-footer .container-fluid {
  max-width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}
div#page-sub-header h1 {
  margin-bottom: 20px;
  text-transform: none;
  padding-top: 0;
  color: var(--header-title-color);
}
#page-sub-header p {
  margin-bottom: 0;
  font-weight: 300;
  color: var(--header-subtitle-color);
  font-size: 1.15rem;
}

a.page-scroller {
  color: #333;
  font-size: 2.6rem;
  display: inline-block;
  margin-top: 2rem;
}
/*aside#secondary {
    height: Calc(100vh - 140px);
    overflow: hidden;
}
aside#secondary:hover {
    overflow:auto;
}*/

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#masthead nav {
  padding-left: 0;
  padding-right: 0;
}

body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
  /* color: var(--secondary-text);
  padding: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;*/
  padding: 0.2rem 0.2rem;
  font-weight: normal;
  font-size: 14px;
  margin: 0px 0.74rem;
  transition: all 0.3s ease;
  color: var(--primary-link);
}

body:not(.theme-preset-active) #masthead .navbar-nav > li > a:hover,
body:not(.theme-preset-active)
  #masthead
  .navbar-nav
  > li.current_page_item
  > a {
  color: var(--accent-link);
}
body:not(.theme-preset-active) #masthead .navbar-nav > li.active > a {
  color: var(--accent-link);
}
.navbar-brand {
  height: auto;
}

.navbar-toggle .icon-bar {
  background: #000 none repeat scroll 0 0;
}

.dropdown-menu .dropdown-toggle::after {
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  border-top: 0.3em solid transparent;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
  position: relative;
}

.dropdown.menu-item-has-children
  .dropdown.menu-item-has-children
  > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}
.dropdown.menu-item-has-children
  .dropdown.menu-item-has-children:hover
  > .dropdown-menu {
  display: block;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown.menu-item-has-children
  .dropdown.menu-item-has-children:hover
  > a:after {
  border-left-color: #fff;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
  float: none;
}

.dropdown.menu-item-has-children
  .dropdown.menu-item-has-children.pull-left
  > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

.dropdown-item {
  line-height: 1.2;
  padding-bottom: 0.313rem;
  padding-top: 0.313rem;
}

.dropdown-menu {
  min-width: 12.5rem;
}

.dropdown .open .dropdown-menu {
  display: block;
  left: 12.25em;
  top: 0;
}

.dropdown-menu .dropdown-item {
  white-space: normal;
  background: transparent;
  line-height: 1.6;
}
.dropdown-menu .dropdown-item:hover {
  background: transparent;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .dropdown-menu li > .dropdown-menu {
    right: -9.875rem;
    top: 1.375rem;
  }
}
@media screen and (max-width: 991px) {
  .navbar-nav .dropdown-menu {
    border: medium none;
    margin-left: 1.25rem;
    padding: 0;
  }

  .dropdown-menu li a {
    padding: 0;
  }

  #masthead .navbar-nav > li > a {
    padding-bottom: 0.625rem;
    padding-top: 0.313rem;
  }

  .navbar-light .navbar-toggler {
    border: medium none;
    outline: none;
  }
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
  overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}
.comment-content.card-block {
  padding: 20px;
}

.navigation.post-navigation {
  padding-top: 1.875rem;
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
  border: 1px solid #ddd;
  border-radius: 0.938rem;
  display: inline-block;
  padding: 0.313rem 0.875rem;
  text-decoration: none;
}

.post-navigation .nav-next a::after {
  content: " \2192";
}

.post-navigation .nav-previous a::before {
  content: "\2190 ";
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
  background: #eee none repeat scroll 0 0;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 0.313rem;
  line-height: normal;
  padding: 0.938rem 1.438rem 0.875rem;
  text-decoration: none;
  top: 0.313rem;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}

.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

a img.alignright {
  float: right;
  margin: 0.313rem 0 1.25rem 1.25rem;
}

a img.alignnone {
  margin: 0.313rem 1.25rem 1.25rem 0;
}

a img.alignleft {
  float: left;
  margin: 0.313rem 1.25rem 1.25rem 0;
}

a img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption.alignnone {
  margin: 0.313rem 1.25rem 1.25rem 0;
}

.wp-caption.alignleft {
  margin: 0.313rem 1.25rem 1.25rem 0;
}

.wp-caption.alignright {
  margin: 0.313rem 0 1.25rem 1.25rem;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
  margin: 0 0 1.5em;
  /*font-size: 1rem;*/
  /* Make sure select elements fit in widgets. */
}
.widget select {
  max-width: 100%;
}

.widget_search .search-form input[type="submit"] {
  display: none;
}

.nav > li > a:focus,
.nav > li > a:hover {
  background-color: #eee;
  text-decoration: none;
}
.half-rule {
  width: 6rem;
  margin: 2.5rem 0;
}
.widget_categories .nav-link {
  display: inline-block;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
#content.site-content {
  padding-bottom: 0px;
  padding-top: 0px;
}

.sticky .entry-title::before {
  content: "\f08d";
  font-family: "Font Awesome\ 5 Free";
  font-size: 1.563rem;
  left: -2.5rem;
  position: absolute;
  top: 0.375rem;
  font-weight: 900;
}

.sticky .entry-title {
  position: relative;
}

.single .byline,
.group-blog .byline {
  display: inline;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

.page-template-blank-page .entry-content,
.blank-page-with-container .entry-content {
  margin-top: 0;
}

.post.hentry {
  margin-bottom: 2rem;
}

.posted-on,
.byline,
.comments-link {
  color: #9a9a9a;
}

.entry-title > a {
  color: inherit;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

.comment-body .pull-left {
  padding-right: 0.625rem;
}

.comment-list .comment {
  display: block;
}

.comment-list {
  padding-left: 0;
}

.comments-title {
  font-size: 1.125rem;
}

.comment-list .pingback {
  border-top: 1px solid rgba(0, 0, 0, 0.125);
  padding: 0.563rem 0;
}

.comment-list .pingback:first-child {
  border: medium none;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  /* Theme Footer (when set to scrolling) */
  display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
  background: #f1f1f1 none repeat scroll 0 0;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 0.313rem 0.313rem 0;
  text-align: center;
}
.wp-caption img[class*="wp-image-"] {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 100%;
  padding: 0;
  width: auto;
}
.wp-caption .wp-caption-text {
  font-size: 0.688rem;
  line-height: 1.063rem;
  margin: 0;
  padding: 0.625rem;
}

.wp-caption-text {
  text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
  margin-bottom: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}
.gallery-item .gallery-columns-2 {
  max-width: 50%;
}
.gallery-item .gallery-columns-3 {
  max-width: 33.33333%;
}
.gallery-item .gallery-columns-4 {
  max-width: 25%;
}
.gallery-item .gallery-columns-5 {
  max-width: 20%;
}
.gallery-item .gallery-columns-6 {
  max-width: 16.66667%;
}
.gallery-item .gallery-columns-7 {
  max-width: 14.28571%;
}
.gallery-item .gallery-columns-8 {
  max-width: 12.5%;
}
.gallery-item .gallery-columns-9 {
  max-width: 11.11111%;
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugin Compatibility
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Woocommerce
--------------------------------------------------------------*/
.woocommerce-cart-form .shop_table .coupon .input-text {
  width: 8.313rem !important;
}

.variations_form .variations .value > select {
  margin-bottom: 0.625rem;
}

.woocommerce-MyAccount-content .col-1,
.woocommerce-MyAccount-content .col-2 {
  max-width: 100%;
}

/*--------------------------------------------------------------
## Elementor
--------------------------------------------------------------*/
.elementor-page article .entry-footer {
  display: none;
}

.elementor-page.page-template-fullwidth #content.site-content {
  padding-bottom: 0;
  padding-top: 0;
}

.elementor-page .entry-content {
  margin-top: 0;
}

/*--------------------------------------------------------------
## Visual Composer
--------------------------------------------------------------*/
.vc_desktop article .entry-footer {
  display: none;
}

.vc_desktop #content.site-content {
  padding-bottom: 0;
  padding-top: 0;
}

.vc_desktop .entry-content {
  margin-top: 0;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer#colophon {
  font-size: 85%;
  bottom: 0;
  position: relative;
  width: 100%;
}
body:not(.theme-preset-active) footer#colophon {
  color: #666;
  font-weight: 300;
  background: var(--background-color);
  border-top: 1px solid #eee;
}
.navbar-dark .site-info {
  color: #fff;
}
.copyright {
  font-size: 0.875rem;
  margin-bottom: 0;
  text-align: center;
}

.copyright a,
footer#colophon a {
  color: inherit;
}

@media screen and (max-width: 767px) {
  #masthead .navbar-nav > li > a {
    padding-bottom: 0.938rem;
    padding-top: 0.938rem;
  }
  .navbar-brand > a {
    width: 200px;
  }
  body:not(.theme-preset-active) #masthead .navbar-nav > li > a {
    padding: 0.75rem 0.2rem;
    font-size: 1.1rem;
    border-bottom: 1px solid #eee;
  }
  .site-header .container-fluid,
  .site-footer .container-fluid {
    width: 100%;
  }
}
/*--------------------------------------------------------------
# Media Query
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Notebook
--------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {
  html {
    font-size: 95%;
  }
}

@media screen and (max-width: 1199px) {
  .navbar-dark .dropdown-item {
    color: #fff;
  }
  .navbar-nav .dropdown-menu {
    background: transparent;
    box-shadow: none;
    border: none;
  }
}
/*--------------------------------------------------------------
## Netbook
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  html {
    font-size: 90%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 960px) {
  html {
    font-size: 85%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
  html {
    font-size: 80%;
  }
}
/*--------------------------------------------------------------
## iPad
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
  html {
    font-size: 75%;
  }
}

/* Custom CSS code by h */
ul.children.nav {
  margin-left: 1rem;
  margin-top: 5px;
}
aside#secondary {
  min-height: calc(100vh - 120px);
}
.sidebarBlock {
  background: #e7ecef;
  /* border-radius: 0px; */
  padding: 1.5rem 2em;
  border: 1px solid #e7ecef;
  /*margin-bottom: 2rem;*/
  padding-bottom: 2.5rem;
  min-height: 100%;
  outline: none;
}
.site-main {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 60px;
}
aside .nav li {
  padding: 0px 0 0px 0px;
  list-style-type: none;
  /* background: url(../jsv2doctheme/inc/assets/images/list-icon.png) no-repeat 0 12px; */
  text-shadow: none;
  margin-bottom: 0px;
  margin-top: 0px;
  position: relative;
}
aside .nav > li {
  font-size: 14px;
}
ul.children.nav > li {
}
/*aside .nav li a:before {
  content:'';
  height:6px;
  width:6px;
  background: var(--primary-link);
  display:inline-block;
  border-radius:100%;
  margin-right: 6px;
  vertical-align: middle;
}*/
aside .nav li > a {
  padding: 5px 0px;
  transition: all 0.2s ease;
}
aside .nav > li > a:focus,
aside .nav > li > a:hover {
  /*background: none;
  background-color:transparent;
  text-decoration: none;
  color:var(--accent-link);
      margin-left: 2px;*/
  background: none;
  background-color: transparent;
  text-decoration: none;
  color: var(--secondary-text);
  margin-left: 0px;
}
h2.entry-title {
  border-bottom: 2px solid #f0f1f2;
  padding-bottom: 5px !important;
}
.search-results h2.entry-title {
  font-size: 1.35rem;
}
#comments {
  display: none !important;
}
.entry-footer {
  font-size: 0.85rem;
  opacity: 0.85;
}
.entry-footer .cat-links {
  font-weight: bold;
}
.entry-footer .cat-links a {
  font-weight: 400;
}
.home .post.type-post,
.category .post.type-post {
  background: #fff;
  padding: 20px;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  border: 1px solid #f3f3f3;
}
.post-thumbnail {
  margin-bottom: 0px !important;
}
.entry-title > a:hover,
.entry-title > a:focus {
  text-decoration: none;
  outline: none;
  opacity: 0.85;
}
.navigation.post-navigation {
  display: none;
}
.title,
.block,
.box {
  padding: 10px 15px;
}
.title-blueBg {
  background: var(--secondary-text);
  padding: 10px 15px;
  color: #fff;
}
.title-rightText,
.title-rightText a {
  display: inline-block;
  float: right;
  font-size: 0.85rem;
}
.title-rightText a {
  color: var(--accent-link);
  transition: all 0.2s ease;
}
.title-rightText,
.title-rightText a:hover,
.title-rightText,
.title-rightText a:focus {
  opacity: 0.7;
}
.title-rightLabel {
  margin-right: 5px;
  display: inline-block;
}
.card.customCard {
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 20px;
}
.card.customCard .card-title {
  margin-bottom: 1rem;
  border-bottom: 1px solid #d8d8d8;
  padding-bottom: 10px;
}
.single .entry-footer span.cat-links {
  display: none !important;
}
/* code on 15-11-2019*/
.box {
  padding: 20px;
}
.box-greyBg {
  padding: 20px;
  background: #f8f8f8;
}
.box-greenBg {
  padding: 20px;
  background: var(--accent-link);
  color: #fff;
}
.box-blueBg {
  padding: 20px;
  background: var(--secondary-text);
  color: #fff;
}
.box-bordered {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 0px;
}
.mergeBottom {
  margin-bottom: 0px;
  padding-bottom: 10px;
}
.mergeTop {
  margin-top: 0px;
  padding-top: 10px;
}
.title-blueBg {
  background: var(--secondary-text);
  padding: 10px 15px;
  color: #fff;
  border-radius: 0px;
  box-sizing: border-box;
}
.title-greyBg {
  background: #f8f8f8;
  padding: 10px 15px;
  color: var(--secondary-text);
  border-radius: 0px;
  box-sizing: border-box;
}
.title-bottomBordered {
  background: none;
  padding: 10px 15px;
  color: var(--secondary-text);
  border-radius: 0px;
  border-bottom: 2px solid #eee;
  box-sizing: border-box;
}

.arrow-list li {
  list-style: none;
  text-indent: -22px;
}
.arrow-list > li::before {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #000;
  border-image: none;
  border-style: solid;
  border-width: 0 1px 1px 0;
  content: "";
  display: inline-block;
  margin: 2px 5px;
  padding: 3px;
  transform: rotate(-45deg);
  margin-right: 10px;
}
.entry-content ul,
.entry-content ol {
  padding: 10px 20px !important;
}
.entry-content p {
  /* padding-left:15px; */
  /* padding-right:15px; */
}
.entry-content p a {
  color: var(--accent-link);
  transition: all 0.2s ease;
  text-decoration: none;
}
.entry-content p a:hover {
  text-decoration: underline !important;
  opacity: 0.8;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.pb-0 {
  padding-bottom: 0px !important;
}

.contentSecondary,
.boxSecondary {
  margin-left: 5%;
}
.block {
  padding: 20px !important;
}
.tGreen,
.tGreen li,
.tGreen li a {
  color: var(--accent-link) !important;
}
.tBlue,
.tBlue li,
.tBlue li a {
  color: var(--secondary-text) !important;
}
.tWhite {
  color: #ffffff !important;
}
.tBlack {
  color: #000000 !important;
}
.bgGreen {
  background-color: var(--accent-link) !important;
}
.bgBlue {
  background-color: var(--secondary-text) !important;
}
.bgGrey {
  background-color: #f8f8f8 !important;
}
.bgWhite {
  background-color: #ffffff !important;
}
.bgBlack {
  background-color: #000000 !important;
}
.text-small {
  font-size: 75% !important;
}
.syntaxhighlighter .line table tr td {
  padding: 4px !important;
}
.entry-content a {
  color: var(--accent-link);
  transition: all 0.2s ease;
  font-style: italic;
  font-weight: 400;
}
/*#masthead .navbar-nav > li > a:after {content: '';height: 2px;width: 0%;display: block;background: var(--accent-link);transition: all 0.3s ease;}
#masthead .navbar-nav > li > a:hover:after { width:100%; }*/

/* header widget area, mainly for searchbar*/
.headerWidgetBlock {
  position: absolute;
  top: 52px;
  right: 0;
  width: 310px;
}
.widget-area .hw-widget {
  background: #eee;
  text-align: center;
  padding: 12px 20px;
}
.hw-widget .search-form {
  position: relative;
  margin: 0px;
}
.hw-widget .search-form label {
  display: block;
  margin: 0px;
  padding: 0px;
}
.hw-widget .search-form .search-submit.btn.btn-default {
  position: absolute;
  background: var(--secondary-text);
  color: #fff;
  border-radius: 0px;
  top: 0;
  right: 0;
  border-color: transparent;
  font-size: 14px;
}
.hw-widget input.search-field.form-control {
  border-radius: 0px;
  width: 100%;
  font-size: 14px;
}
.hw-widget input.search-field.form-control:focus {
  box-shadow: none;
}

li.cat-item.current-cat.nav-item > a,
li.page_item.current_page_item.nav-item > a,
.current_page_parent.nav-item > a {
  font-weight: bold;
}
li.cat-item.current-cat.nav-item > a:before,
li.page_item.current_page_item.nav-item > a:before {
  background: var(--secondary-text);
}

/* sidebar block search widget */

.sidebarBlock input.search-field.form-control,
.search-form input.search-field.form-control {
  width: 98%;
  height: calc(2.2rem + 0.75rem + 2px);
  padding-left: 45px;
  background-color: #fff;
  background-image: url("https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-512.png");
  background-position: 5px center;
  background-size: 34px;
  background-repeat: no-repeat;
  background-color: transparent;
}

.search-form label {
  width: 100%;
}
.search-form .search-submit {
  display: none;
}
.sidebarBlock .widget_search {
  margin-top: 15px;
  margin-bottom: 30px;
}
.content-area.pt-5 {
  padding-top: 2.35rem !important;
}
body.header-fixed .site-header {
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 99;
}
body.header-fixed .sidebarBlock {
  padding: 80px 2em 50px 2em;
}

/* code for Static Home page */
.modulesRow {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.iconBlock {
  text-align: center;
  padding: 0px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.iconBlock .iconImgWrap img {
  width: 64px;
  height: 64px;
  margin: 0 auto;
}
.iconBlock h3 {
  font-size: 1.15rem;
  color: var(--secondary-text);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.iconBlock a.btn.btn-bordered,
.iconBlock .btn.btn-bordered {
  border: 1px solid #666;
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  padding: 8px 10px;
  transition: all 0.3s ease;
}
.iconBlock a.btn.btn-bordered:hover {
  background-color: #f2f2f2;
  text-decoration: none;
  border-color: #eee;
}
.syntaxhighlighter.preCode {
  width: 90% !important;
  margin: 2rem auto !important;
}
p.iconBlock-brief {
  min-height: 95px;
}
a.iconBlockWrap {
  display: block;
  border: 1px solid transparent;
  padding: 1rem;
  border-radius: 4px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}
a.iconBlockWrap:hover {
  background: #fff;
  border-color: #eee;
  -webkit-box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1) !important;
  -moz-box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0.35rem 0.75rem rgba(0, 0, 0, 0.1) !important;
}
a.iconBlockWrap:hover .btn.btn-bordered {
  background: #eee;
  border-color: #ddd;
}

/* sidebar nav changes */

/*aside .nav li > a::before {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: var(--secondary-text);
	border-image: none;
	border-style: solid;
	border-width: 0 1px 1px 0;
	content: "";
	display: inline-block;
	margin: 2px 3px;
	padding: 3px;
	transform: rotate(-45deg);
	margin-right: 8px;
	background: none;
	border-radius:0px;
	margin-left:0px;
}*/

/*aside .nav li.page_item_has_children > a::after {
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	-moz-border-right-colors: none;
	-moz-border-top-colors: none;
	border-color: var(--secondary-text);
	border-image: none;
	border-style: solid;
	border-width: 0 1px 1px 0;
	content: "";
	display: inline-block;
	margin: 2px 3px;
	padding: 3px;
	transform: rotate(45deg);
	margin-right: 5px;
	background: none;
	border-radius:0px;
	margin-left: 5px;
	transition:all 0.2s ease;
}
aside .nav li.page_item_has_children.activeLink > a::after {
	transform: rotate(-135deg);
	margin-top:0px;
	margin-bottom:-2px;
}*/
li.cat-item.current-cat.nav-item > a:before,
li.page_item.current_page_item.nav-item > a:before {
  background: none;
}

ul.children.nav.flex-column {
  display: none;
}

aside .nav.children li > a {
  padding-top: 2px;
  padding-bottom: 2px;
}
header.page-header {
  padding-top: 30px;
}
/* changes added by h for leftbar page link issue */
/*li.cat-item.current-cat.nav-item > a, li.page_item.current_page_item.nav-item > a, .current_page_parent.nav-item > a {
    font-weight: bold;
}	*/

a[aria-current="page"],
.current_page_item.nav-item > a,
.active.menu-item menu-item-type-custom > a {
  color: var(--accent-link) !important;
}
/*aside .nav li.page_item_has_children.activeLink, .current_page_parent.activeLink, .page_item_has_children.current_page_ancestor > ul {
	display:block !important;
}*/

aside .nav li.page_item_has_children.activeLink,
.current_page_parent.activeLink,
.page_item_has_children.current_page_ancestor > ul {
  display: block !important;
}
aside .nav li.page_item_has_children > span.customNavIcon::after {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #000203;
  border-image: none;
  border-style: solid;
  border-width: 0 1px 1px 0;
  content: "";
  display: inline-block;
  margin: 2px 3px;
  padding: 3px;
  transform: rotate(45deg);
  margin-right: 5px;
  background: none;
  border-radius: 0px;
  margin-left: 5px;
  transition: all 0.2s ease;
}
aside .nav li.page_item_has_children.activeLink > span.customNavIcon::after {
  transform: rotate(-135deg);
  margin-top: 0px;
  margin-bottom: -3px;
}
aside .nav li > a {
  padding: 4px 0px;
  transition: none;
  display: inline-block;
  width: auto;
  /*min-width: 230px;
    max-width: calc(100% - 22px);*/
}
span.customNavIcon {
  cursor: pointer;
  display: inline-block;
  font-weight: normal;
  text-align: center;
  background: none;
  margin-left: 3px;
}
.page_item_has_children.current_page_ancestor.current_page_parent.nav-item
  > span.customNavIcon {
  pointer-events: none;
  cursor: auto;
}
.qe-faq-toggle.active .qe-toggle-content {
  background-color: #f5f5f5;
  padding-top: 20px;
  border: 1px solid #eee;
}
.qe-faq-toggle {
  margin-bottom: 8px;
  transition: all 0.5s;
}
@media (min-width: 992px) {
  aside#secondary.col-lg-3 {
    max-width: 370px;
  }
}

.toolbar .item.about,
.toolbar .item.copyToClipboard,
.syntaxhighlighter .toolbar a.item.about,
.syntaxhighlighter
  .toolbar
  a.item.copyToClipboard
  .syntaxhighlighter
  .toolbar
  .item.about,
.syntaxhighlighter .toolbar .item.copyToClipboard,
.syntaxhighlighter .toolbar .item.printSource {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}
/*@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); */

body {
  font-family: "Roboto", sans-serif !important;
  margin: 0;
  -webkit-font-smoothing: auto;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.6;
}
div#page-sub-header h1 {
  font-size: 2rem !important;
  padding-bottom: 0px;
  font-weight: bold;
}

#content.site-content .container,
div#page-sub-header .container {
  width: 1170px;
  max-width: 100%;
}

.iconBlock h3 {
  font-weight: 500 !important;
}
a.iconBlockWrap:hover {
  color: initial;
}
```
:::