:root {
  --font-family: "Open Sans";
  --ds-blue: #0d6efd;
  --ds-indigo: #6610f2;
  --ds-purple: #6f42c1;
  --ds-pink: #d63384;
  --ds-red: #dc3545;
  --ds-orange: #fd7e14;
  --ds-yellow: #ffc107;
  --ds-green: #198754;
  --ds-teal: #20c997;
  --ds-cyan: #0dcaf0;
  --ds-white: #fff;
  --ds-gray: #6c757d;
  --ds-gray-dark: #343a40;
  --ds-primary: #0d6efd;
  --ds-secondary: #6c757d;
  --ds-success: #198754;
  --ds-info: #0dcaf0;
  --ds-warning: #ffc107;
  --ds-danger: #dc3545;
  --ds-light: #f8f9fa;
  --ds-dark: #212529;
}

.theme {
  --web-font: "Roboto";
  --web-primary: hsl(212, 81%, 25%);
  --web-primary-gradient: hsl(212, 80%, 31%);
  --web-primary-hover: #1360b9;
  --web-secondary: #101317;
  --web-divider-color: #c8ced6;
  --web-light-text-color: hsl(214, 15%, 60%);
  --web-wrapper-width: 80%;
  --divider-bg1-color: var(--web-primary);
  --divider-bg1-under-color: white;
  --divider-bg2-color: var(--web-secondary);
  --divider-bg3-color: white;
}

/* Tema pre button elements */
.theme dot-element[eid="buttons1"].cta {
  --button-color: var(--web-primary);
  --button-bg-color: white;
  --button-border-color: var(--web-primary,transparent);
  --button-effect-color: white;
  --button-effect-bg-color: var(--web-primary);
  --button-effect-border-color: var(--web-primary-hover);
  --button-margin-custom: 0px 0px 0px 15px;
  --button-border-width: 2px;
  --button-border-radius: 15px;
}

.theme dot-element[eid="buttons1"].btn1 {
  --button-color: var(--web-primary);
  --button-bg-color: white;
  --button-border-color: var(--web-primary,transparent);
  --button-effect-color: white;
  --button-effect-bg-color: var(--web-primary);
  --button-effect-border-color: var(--web-primary-hover);
  --button-margin-custom: 0px 0px 0px 15px;
  --button-border-width: 2px;
  --button-border-radius: 15px;
  margin-left: 0px;
  width: 100%;
  text-align: center;
}

.theme dot-element[eid="header1"] {
  --header-mobile-width: 100%;
  /*--background-image: url('../../img/bg.png');*/
}

.theme dot-element[eid="dotcarousel"] {
    --border-radius: 10px;
    --ul-bgcolor: rgb(255,255,255,0.9);
    --li-color: var(--web-primary);
    --li-horizontal-padding: 20px;
    --li-vertical-padding: var(--li-horizontal-padding);
    --button-shadow-color: #ffffff;
    --button-shadow-left: -2px 0px 2px var(--button-shadow-color);
    --button-shadow-right: 2px 0px 2px var(--button-shadow-color);
    --button-color: var(--web-primary);
    --button-size: 5rem;
    --button-padding: 2px;
    --button-border: 1px solid white;
    --button-bg: rgb(255,255,255,0.8);
    --company-font-size: 0.9rem;
    --company-block-height: 2rem;
    --company-img-height: 1.8rem;
    --company-text-color: var(--web-light-text-color);
    --company-border-color: var(--web-divider-color);
    --company-bg-color: transparent;
}

.theme footer-bottomline {
  background-color: var(--web-secondary);
}

BODY.theme {
  min-width: 350px;
  width: 100%;
  color: var(--web-secondary);
	font-size: 1rem;
	overflow-x: hidden;
	font-family: var(--web-font), sans-serif;
  background-color: #f1f1f1;
	/*
  background-image: url("./img/bg.png");
  background-position: top 50%;
  background-repeat: no-repeat;
  background-size: contain;*/
}

H1.indexh1 {
  font-size: 3rem;
  font-weight: bold;
  padding-right: 15%;
  padding-left: 15%;
  color: var(--web-secondary);
}