body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 1;
}

hr:not([size]) {
  height: 2px;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  line-height: 1.2;
  color: #2E3D87;
}

h4{
	color: #803B96;
	margin-bottom: 20px;
	margin-top: 20px;
}


h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.3rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

.container-fluid{
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
}

/* Imagen: se adapta al div */
.img-fluid {
  width: 100%;
  height: auto;
}

.form-calculadora .form-group {
    margin-right: 1.5rem;
    display: inline-block;
}

.form-calculadora label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 500;
    color: #26AAE2;
}

.form-calculadora #bs-select-1, 
.form-calculadora #bs-select-2,
.form-calculadora #bs-select-3{
	max-height: 200px !important;
}

/* Header */
#mainNav {
  padding-top: 0rem;
  padding-bottom: 0rem;
  background-color: #FFFFFF;
}
#mainNav .navbar-toggler {
  padding: 0.75rem;
  font-size: 0.75rem;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-transform: uppercase;
  font-weight: 700;
}
#mainNav .navbar-brand {
  color: #ffc800;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  letter-spacing: 0.0625em;
  text-transform: uppercase;
}
#mainNav .navbar-brand img {
  height: 3.5rem;
}

/* Banner */
header.masthead {
  text-align: center;
  color: #fff;
  margin-top: 40px;
}
header.masthead .masthead-subheading {
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.5rem;
  margin-bottom: 25px;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
header.masthead .masthead-heading {
  font-size: 3.25rem;
  font-weight: 700;
  line-height: 3.25rem;
  margin-bottom: 2rem;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@media (min-width: 768px) {
  header.masthead {
	margin-top: 60px;
  }
  header.masthead .masthead-subheading {
    font-size: 2.25rem;
    font-style: italic;
    line-height: 2.25rem;
    margin-bottom: 2rem;
  }
  header.masthead .masthead-heading {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 4.5rem;
    margin-bottom: 4rem;
  }
}


.page-section {
    padding: 3rem 0;
}

.bootstrap-select{ width: 250px !important; }

#calcular{ width: 250px; background-color: #8DC73F; border-color: transparent; }
#calcular:hover{ background-color: #26AAE2; }
#limpiar{ width: 250px; }
#limpiar:hover{ background-color: #F87C21; }
#resultados{ 
	background-color: #F1F2F3;
    padding: 20px 20px;
    color: #26AAE2;
    min-height: 320px;
	margin-bottom: 30px;
    border: 1px solid #CCC;
    border-radius: 10px;
	font-size: 18px;
}

#resultados ul{ margin-top: 15px; }
#resultados li{ color: #8DC73F; }
#resultados li span{ color: #26AAE2; }
li::marker{ color: #8DC73F; }

.descripcion{ margin-bottom: 40px; }

.loading {
    display: none;
    background: url(../img/loading.gif);
    background-size: contain;
    background-repeat: no-repeat;
    width: 124px;
    height: 124px;
    margin: 0 auto;
    margin-top: 60px;
}


.bt-zoom {
	display: block;
	transition: all .5s; /* Animation */
}

.bt-zoom:hover {
  -ms-transform: scale(0.9); /* IE 9 */
  -webkit-transform: scale(0.8); /* Safari 3-8 */
  transform: scale(0.9);
  opacity: 0.8;
}


.form-calculadora .dropdown-toggle{
	border: 1px solid #CCC;
    border-radius: 50px;
    padding: 10px 15px;
}

.box-material, .no-resultado{ display: none; }

.iconotit{ color: #F97D21; margin-left: 15px; margin-right: 10px; }
.iconono{ color: #EC1D25; font-size: 30px; margin: 0px 15px 0 0; float: left; }

/* Botones */
.btn .fa-solid{ margin-right: 10px; }

.btn-3d span{
	display: block;
	font-size: 14px;
	font-weight: 400;
}

.btn-3d{
    border: none;
    cursor: pointer;
    width: 100%;
	min-height: 110px;
    display: inline-block;
	margin-bottom: 25px;
	font-size: 18px;
    font-weight: 700;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
	border-radius: 0px;
	display: block;
    background: #26AAE2;
	color: #FFFFFF;
    outline: 1px solid transparent;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
	text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

.btn-3d:hover {
    -webkit-transform: rotateX(25deg);
    -moz-transform: rotateX(25deg);
    -ms-transform: rotateX(25deg);
    transform: rotateX(25deg);
	text-shadow: 0px 10px 5px rgba(0,0,0,0.9); 
}

.btn-3d:after {
    width: 100%;
    height: 40%;
    left: 0;
    top: 100%;
    background: #444;
    -webkit-transform-origin: 0% 0%;
    -webkit-transform: rotateX(-90deg);
    -moz-transform-origin: 0% 0%;
    -moz-transform: rotateX(-90deg);
    -ms-transform-origin: 0% 0%;
    -ms-transform: rotateX(-90deg);
    transform-origin: 0% 0%;
    transform: rotateX(-90deg);
	content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.btn-3d:focus {
    -webkit-transform: rotateX(25deg);
    -moz-transform: rotateX(25deg);
    -ms-transform: rotateX(25deg);
    transform: rotateX(25deg);
	text-shadow: 0px 10px 5px rgba(0,0,0,0.9); 
    box-shadow: 0 0 10px 0.25rem rgba(31,113,173, 0.8);
}

.perspective {
    -webkit-perspective: 400px;
    -moz-perspective: 400px;
    perspective: 400px;
}

.color-itec{ 
	background: rgb(31,113,173);
	background: linear-gradient(135deg, rgba(31,113,173,1) 30%, rgba(141,201,67,1) 100%);
}

.color-crizal{ 
	background: rgb(19,78,157);
	background: linear-gradient(135deg, rgba(19,78,157,1) 30%, rgba(60,70,80,1) 100%);
}

.color-transition{ 
	background: rgb(4,167,163);
	background: linear-gradient(135deg, rgba(4,167,163,1) 30%, rgba(31,59,111,1) 100%);
}

.color-gx7{ 
	background: rgb(227,6,20);
	background: linear-gradient(135deg, rgba(227,6,20,1) 30%, rgba(198,198,198,1) 100%);
}

.color-cr39{
	background: rgb(54,158,219);
	background: linear-gradient(135deg, rgba(54,158,219,1) 1%, rgba(64,36,216,1) 100%);
}

.color-bluecut{
	background: rgb(69,188,231);
	background: linear-gradient(135deg, rgba(69,188,231,1) 1%, rgba(111,111,111,1) 100%);
}

.color-xperio{
	background: rgb(227,161,21);
	background: linear-gradient(135deg, rgba(227,161,21,1) 30%, rgba(63,63,61,1) 100%);
}

.color-orbit{
	background: rgb(88,88,90);
	background: linear-gradient(135deg, rgba(88,88,90,1) 30%, rgba(63,63,61,1) 100%);
}

.color-eyezen{
	background: rgb(22,183,229);
	background: linear-gradient(135deg, rgba(22,183,229,1) 0%, rgba(26,137,193,1) 49%, rgba(25,70,186,1) 100%);
}

.color-flaptop{
	background: rgb(147,38,143);
	background: linear-gradient(135deg, rgba(147,38,143,1) 30%, rgba(54,50,135,1) 100%);
}

.color-essential{
	background: rgb(7,65,138);
	background: linear-gradient(135deg, rgba(7,65,138,1) 30%, rgba(0,107,185,1) 100%);
}

.color-ovations{
	background: rgb(0,150,195);
}

.color-panoramax{
	background: rgb(168,214,220);
	background: linear-gradient(135deg, rgba(168,214,220,1) 1%, rgba(71,121,156,1) 100%);
}

.color-varilux{
	background: rgb(0,84,162);
	background: linear-gradient(135deg, rgba(0,84,162,1) 1%, rgba(51,51,51,1) 100%);
}

.grupo-01, .grupo-02, .grupo-03, .grupo-04, .grupo-05, .grupo-06, .grupo-07, .grupo-08, .grupo-09{ display: none;}

.circlenum{
	background: #863E9D;
    border-radius: 2em;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 2em;
    margin-right: 10px;
    text-align: center;
    width: 2em;
    margin-bottom: 25px;
	margin-top: -5px;
    float: left;
}


@media (min-width: 768px) {
  .row.equal {
    display: flex;
    flex-wrap: wrap;
  }
}
.equal > [class*='col-']{ margin-bottom: 40px; }

.box{
	padding: 40px;
	text-align: center;
	margin-bottom: 30px;
}

.box h3{ text-align: center; margin-bottom: 30px; padding: 10px 0; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC;}
.box p{ text-align: justify; }
.box b{ font-weight: 600; color: #2E3D87;}


.box2{
	border-top: 1px solid #FF8402; border-bottom: 1px solid#FF8402;
	padding: 30px;
	text-align: center;
	margin-bottom: 0px;
}

.box2 h3{ color: #FFFFFF; text-align: center; margin-bottom: 30px; padding: 10px 0;}
.box2 p{ color: #FFFFFF; font-weight: 600; text-align: center; }

.fondo-header{
	background-image: url("../img/banner.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top center;
	background-size: cover;
	text-align: center;
	padding: 60px 0;
}
.fondo-header h2{ color: #FFFFFF; }

.tableft .nav-pills .nav-link {
    border-radius: 0.25rem;
    text-align: left;
	padding: 10px;
}
.tableft .nav-link{ color: #2E3D87; width: 250px; }
.tableft .nav-pills .nav-link.active{
	background-color: #2E3D87;
}
.tableft h3, .tableft hr{ color: #FF8402; }

.lista-li{list-style: none}
.lista-li li{ margin-bottom: 0px;}
.lista-li li::before{
	content: "•"; 
	color: #FF8402;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
	font-size: 28px;
}

.scroll-to-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    display: none;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #fff;
    background: rgba(52, 58, 64, 0.5);
    line-height: 50px;
}


/* RESPONSIVE */
@media (max-width: 992px) {
	#mainNav { padding-top: 1rem; padding-bottom: 1rem }
	header.masthead{ margin-top: 100px; }
	.page-section { padding: 3rem 0;}
	.nav-item{ margin-bottom: 5px;}
	.nav-link{ padding: 0.5rem;  padding-left: 10px !important;}
	#resultados{ min-height: 100px; }
	.loading { margin-top: 10px; }
   
}

@media (max-width: 1181px) {
	.fondo-header{ padding: 40px 10px; }
	#calcular, #limpiar{ width: 350px; }
	.form-calculadora .form-group{ margin-right: 0; display: block !important; }
	.bootstrap-select{ width: 100% !important; }
	.group-bts{ text-align: center; }
}