/* Global configuration */

html,
body {
  font-family: "Century Gothic", "Muli", sans-serif !important;
  overflow-x: hidden;
}

body p {
  color: #4d4d4d;
}

/* Navabar */

.navbar {
  background-color: transparent;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.dropdown-menu {
  top: 85%;
  left: 8px;
  margin: 0;
  border: none;
  background-color: #58bcb8 !important;
  font-size: 0.8rem;
  min-width: 16rem !important;
}

.dropdown-menu .databits-nav-btn:hover {
  background-color: #0095d1;
  border-radius: 1px;
}

.navbar.scrolled {
  background-color: #0095d1 !important;
}

.databits-nav-btn {
  color: white !important;
  padding: 1rem 2rem 1rem 2rem !important;
}

.navbar .dropdown-menu a {
  font-size: 1rem !important;
  color: white !important;
  -webkit-transition: background-color 50ms linear;
  -ms-transition: background-color 50ms linear;
  transition: background-color 50ms linear;
}

.navbar .dropdown-menu a:hover {
  background-color: #0095d1;
  -webkit-transition: background-color 250ms linear;
  -ms-transition: background-color 250ms linear;
  transition: background-color 250ms linear;
}

.databits-nav-btn:hover {
  color: white !important;
  background-color: #58bcb8;
  border-radius: 1px;
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media only screen and (max-width: 991px) {
  .navbar-light .navbar-toggler {
    color: white;
    border-color: white;
  }

  .navbar-light {
    color: white;
    background: transparent;
    border: transparent;
  }

  .fixed-top {
    position: absolute;
  }
  

  .dropdown-menu {
    background-color: #0095d1;
  }

  .dropdown-menu .databits-nav-btn:hover {
    background-color: #58bcb8;
    border-radius: 1px;
  }

  .navbar-nav {
    background: #0095d1;
    padding: 1rem;
    border-radius: 5px;
  }

  .navbar-nav .nav-link {
    color: #fff!important;
    font-weight: 700;
  }
}

/* Footer */

.databits-footer {
  background-color: #0095d1;
}

.databits-footer-container {
  padding: 4rem 2rem 2rem 2rem;
  color: white !important;
}

.databits-footer-container p {
  font-weight: bold;
  font-size: 0.9rem;
  color: white !important;
}

.databits-footer-container ul {
  margin: 0 0 2rem 0;
  padding: 0;
  list-style-type: none;
}

.databits-footer-link-container {
  padding-top: 2rem;
}

.databits-footer-link {
  color: white !important;
}

.databits-footer-link:hover {
  color: #b4b4b4 !important;
  text-decoration: none;
}

.databits-footer-reserved-rights {
  margin: 1rem 0 2rem 0;
  font-size: 0.75rem !important;
  padding-left: 10px;
}

.databits-footer-brands-container {
  padding: 0 1rem;
}

.databits-footer-brand-container {
  padding: 0;
}

.databits-footer-brand {
  background-color: transparent;
  color: white !important;
  border: solid;
  border-radius: 50%;
  height: 34px;
  width: 34px;
  text-align: center;
  padding: 3px;
  margin-bottom: 3px;
  transition: all 0.2s ease-in-out;
}

.databits-footer-brand:hover {
  transform: scale(1.2);
}

.databits-footer-newsletter-container {
  padding: 2rem 1.5rem 2rem 1.5rem;
  text-align: left;
  background-color: #1dcece;
  border-radius: 10px;
}

.databits-footer-newsletter-container p {
  margin: 0;
}

.databits-footer-newsletter-container input {
  font-size: 0.8rem;
}

.databits-footer-newsletter-title {
  font-size: 2rem !important;
}

.databits-footer-newsletter-subtitle {
  font-size: 1.2rem !important;
  margin-bottom: 0.5rem !important;
}

/* Various*/

/*Whatsapp Btn*/
.dd-m-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 11px;
  width: 60px;
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #25d366;
  -webkit-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  -moz-transition: 0.3s all ease;
  transition: 0.3s all ease;
  cursor: pointer;
  text-decoration: none;
  color: #25d366;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.wa-fadeInBottom {
  animation-name: wafadeInBottom;
}

@keyframes wafadeInBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
  }
}

.dd-m-whatsapp:hover {
  /* -webkit-transform: translateY(-5px);
       -moz-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
         -o-transform: translateY(-5px);
            transform: translateY(-5px);
    -webkit-box-shadow: 0 5px 15px 2px rgba(37, 211, 102, 0.3);
       -moz-box-shadow: 0 5px 15px 2px rgba(37, 211, 102, 0.3);
            box-shadow: 0 5px 15px 2px rgba(37, 211, 102, 0.3); */
}

.dd-m-whatsapp .icon {
  width: 60%;
  height: 60%;
  display: block;
  fill: #fff;
  -webkit-transform: translateX(1px);
  -moz-transform: translateX(1px);
  -ms-transform: translateX(1px);
  -o-transform: translateX(1px);
  transform: translateX(1px);
}

.dd-m-whatsapp .icon {
  width: 87%;
  height: 87%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill='%23fff' d='M3.516 3.516c4.686-4.686 12.284-4.686 16.97 0 4.686 4.686 4.686 12.283 0 16.97a12.004 12.004 0 01-13.754 2.299l-5.814.735a.392.392 0 01-.438-.44l.748-5.788A12.002 12.002 0 013.517 3.517zm3.61 17.043l.3.158a9.846 9.846 0 0011.534-1.758c3.843-3.843 3.843-10.074 0-13.918-3.843-3.843-10.075-3.843-13.918 0a9.846 9.846 0 00-1.747 11.554l.16.303-.51 3.942a.196.196 0 00.219.22l3.961-.501zm6.534-7.003l-.933 1.164a9.843 9.843 0 01-3.497-3.495l1.166-.933a.792.792 0 00.23-.94L9.561 6.96a.793.793 0 00-.924-.445 1291.6 1291.6 0 00-2.023.524.797.797 0 00-.588.88 11.754 11.754 0 0010.005 10.005.797.797 0 00.88-.587l.525-2.023a.793.793 0 00-.445-.923L14.6 13.327a.792.792 0 00-.94.23z'/%3E %3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 69%;
  position: relative;
  left: -1px;
}

/*End Whatsapp Btn*/

.center {
  text-align: center;
  margin: auto;
}

.center-left {
  text-align: left;
  margin: auto;
}

.databits-arrow-container {
  position: absolute;
  left: 50%;
  top: 75%;
  transform: translateX(-50%);
}

.databits-arrow {
  padding-top: 1rem;
  transition: all 0.2s ease-in-out;
}

.databits-arrow:hover {
  transform: scale(2);
}

.databits-card {
  margin-bottom: 2rem;
  border-radius: 40px;
  padding: 2rem 1rem 2rem 1rem;
  -webkit-box-shadow: 10px 10px 10px -12px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 10px -12px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 10px -12px rgba(0, 0, 0, 0.75);
}

.databits-btn {
  background-color: white;
  border-color: white;
  color: #4d4d4d;
  padding: 0.5rem 1.2rem 0.5rem 1.2rem;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

.databits-btn:hover {
  -webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
}

/* Trama */
.trama-1-container {
  position: relative;
}

.trama-1 {
  position: absolute;
  right: 89%;
}

.trama-1 img {
  width: 11vw;
  margin-top: -60%;
}

/* Trama 2*/
.trama-2-container {
  position: relative;
}

.trama-2 {
  position: absolute;
  right: 0%;
}

.trama-2 img {
  width: 100vw;
  height: 25vw;
  margin-top: -16%;
}
.trama-gray {
  background-color: #f2f2f2;
}

/* Helpers */

.card-flex {
  display: flex;
  flex-wrap: wrap;
}

.pd-section-gray-correction {
  padding-top: 10rem;
}

@media only screen and (max-width: 768px) {
  .pd-section-gray-correction {
    padding-top: 2.5rem;
  }
}
@media only screen and (max-width: 576px) {
  .pd-section-gray-correction {
    padding-top: 2.5rem;
  }
}

.section-gray-bg {
  background-color: #f2f2f2;
  padding-bottom: 12rem;
}
@media only screen and (max-width: 768px) {
  .section-gray-bg {
    padding-bottom: 7rem;
  }
}

/* Loader */

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(24px, 0);
  }
}

/* Side buttons */

.side-buttons-container {
  position: fixed;
  top: 40vh;
  left: 10px;
  width: 40px;
  margin: 3px;
}

.side-button-img {
  height: 33.33%;
  padding: 2px;
  transition: all 0.2s ease-in-out;
}

.side-button-img:hover {
  transform: scale(1.2);
}

@media only screen and (max-width: 575px) {
  .side-buttons-container {
    display: none;
  }
}

/*Redesign Benefits*/
.list-benefits {
  margin-left: 1.6rem;
}

.list-benefits li {
  color: #1a1e3b;
  font-weight: bold;
  margin-bottom: 6px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .list-benefits li {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 767px) {
  .list-benefits li {
    font-size: 15px;
  }
}

/*Performance*/
.site-brand-icon {
  width: 90px;
  height: auto;
}

.learning-route-img {
  max-width: 920px;
  width: 100%;
}

/* Scroll Down*/

@media screen and (max-width: 991px) {
  .title-databits-text {
    text-align: center !important;
  }
}

.handy_scroll_arrows {
  display: block;
  width: 30px;
  height: 30px;
  color: white;
  /* IE 9 */
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  -webkit-animation: handyScrollAnimate 1s infinite;
  animation: handyScrollAnimate 1s infinite;
}
.handy_scroll_arrows:nth-child(1) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-delay: alternate;
  animation-delay: alternate;
}
.handy_scroll_arrows:nth-child(2) {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -webkit-animation-direction: alternate;
  animation-delay: 0.2s;
  animation-direction: alternate;
  margin-top: -6px;
}
.handy_scroll_arrows:nth-child(3) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -webkit-animation-direction: alternate;
  animation-delay: 0.3s;
  animation-direction: alternate;
  margin-top: -6px;
}

@-o-keyframes handyScrollAnimate {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes handyScrollAnimate {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes handyScrollAnimate {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes handyScrollAnimate {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* Fin Scroll Down*/

/* Cyber week */
.modal-background {
  background-image: url("https://databits.ai/wp-content/images/cyber_week.png");
  background-size: cover;
}

.modal-content-image {
  height: 500px;
}

.cyber-week {
  position: fixed;
  font-size: 1rem;
  top: 0;
  height: 60px;
  width: 100%;
  text-align: center;
  z-index: 100;
  padding: 0px 200px;
  background-color: #071d30;
  background-image: url("https://databits.ai/wp-content/uploads/2022/05/banner-bg-may.png");
  background-repeat: no-repeat;
  background-position: center;
}

.cyber-week p {
  color: #91eac6;
  font-size: 1.2rem;
  margin: 0 !important;
}

.special-footer {
  background-image: url("https://databits.ai/wp-content/images/halloween telaraña izquierda esquina.png"),
    url("https://databits.ai/wp-content/images/halloween teleraña derecha esquina.png");
  background-repeat: no-repeat, no-repeat;
  background-position: left -10px top -20px, right -10px top -20px;
  background-size: 250px 250px, 250px 250px;
}

.halloween-spider {
  background: url("https://databits.ai/wp-content/images/halloween araña.png"),
    url("https://databits.ai/wp-content/images/halloween telaraña central.png");
  background-repeat: no-repeat, no-repeat;
  background-position: calc(50% + 5px) 50%, center;
  background-size: 80px 80px, 250px 250px;
  padding: 0;
}

.navbar-nav li:hover > .dropdown-menu {
  display: block;
}

.databits-card-profile {
  border-radius: 40px;
  padding: 2rem 1rem 2rem 1rem;
  -webkit-box-shadow: 10px 10px 10px -12px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 10px -12px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 10px -12px rgba(0, 0, 0, 0.75);
  position: relative;
  height: 100%;
}
.section-5-card-profile {
  background-color: #ffffff !important;
  padding: 4 rem 2 rem 4 rem 2 rem !important;
  min-height: 27 rem;
}
.section-5-card-profile-title {
  font-size: 1.4rem;
  font-weight: bold;
}
.banner-event {
  background: url("https://databits.ai/wp-content/images/blackfriday-izq.png"),
    url("https://databits.ai/wp-content/images/blackfriday-der.png"), black;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left bottom, right bottom, center;
  background-size: 100px 100px, 100px 100px, cover;
}
.banner-event-cyberweek {
  background: url("https://databits.ai/wp-content/images/Cyber week fondo para banner.png"),
    url("https://databits.ai/wp-content/images/Cyber week mouse.png"),
    linear-gradient(to right, #1c418c, #1696d2, #1c418c);
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: center, left 0.2cm center, center;
  background-size: contain, 120px 60px, cover;
}
.banner-event-chritsmas-2021 {
  background: url("https://databits.ai/wp-content/images/navidad y fin de año 2021 fondo 2.png"),
    url("https://databits.ai/wp-content/images/navidad y fin de año logo 2021.png"),
    linear-gradient(to right, #1c418c, #1696d2, #1c418c);
  background-repeat: repeat, no-repeat, no-repeat;
  background-position: center, left 1cm center, center;
  background-size: contain, 100px 100px, cover;
}
.section-4-btn-banner-2 {
  background-color: #2b478b;
  border-color: #2b478b;
  color: white;
}
.modal-popup {
  padding-top: 85px;
  bottom: 0;
  left: 0;
  z-index: 10040;
  overflow: auto;
  overflow-y: auto;
}
.modal-content-popup {
  background: transparent !important;
}
.modal-open {
  padding-right: 0px !important;
}
.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

@media only screen and (max-width: 991px) {
  .cyber-week,
  .cyber-week-simple {
    height: auto;
    position: relative;
  }

  .fixed-top {
    top: 0 !important;
  }
}

@media only screen and (max-width: 360px) {
  .cyber-week-text {
    font-size: 0.5rem;
  }

  .cyber-week .databits-btn {
    font-size: 0.8rem;
  }

  .cyber-week-simple .databits-btn {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 768px) {
  .cyber-week-title {
    padding-top: 20px;
    font-size: 1rem;
  }

  .cyber-week-text {
    font-size: 0.6rem;
  }
}

@media only screen and (max-width: 575px) {
  .modal-background {
    width: 345px;
    height: 345px;
  }
}

/* Fin Cyber week */