@import url('https://fonts.googleapis.com/css2?family=Modak&display=swap');
:root{
--color_primary: #ea2220;
--color_secondary: #808080;
--color_primary_opaque: #ea222077;
--color_secondary_opaque: #80808077;
--color_success: #33FF33;
--color_danger: #FF3333;
--color_warning: #FF3399;
--color_info: #CCCCCC;
--color_light: #F8F9FA;
--color_dark: #212529;
--color_white: #FFFFFF;
--color_light_opaque: #F8F9FA99;
--color_dark_opaque: #21252999;
--color_white_opaque: #FFFFFF99;
--tipography: Century Gothic;
}
body{
font-family: var(--tipography);
font-size: 100%}
body *{
font-family: var(--tipography);
}
.cs-primary{
color: var(--color_light);
background-color: var(--color_primary);
}
.cs-secondary{
color: var(--color_dark);
background-color: var(--color_secondary);
}
.cs-primary-opaque{
color: var(--color_light);
background-color: var(--color_primary_opaque);
}
.cs-secondary-opaque{
color: var(--color_dark);
background-color: var(--color_secondary_opaque);
}
.color-primary{ color: var(--color_primary)!important; }
.color-secondary{ color: var(--color_secondary)!important; }
.color-success{ color: var(--color_success)!important; }
.color-danger{ color: var(--color_danger)!important; }
.color-warning{ color: var(--color_warning)!important; }
.color-info{ color: var(--color_info)!important; }
.color-light{ color: var(--color_light)!important; }
.color-dark{ color: var(--color_dark)!important; }
.color-white{ color: var(--color_white)!important; }
.bg-primary{ background-color: var(--color_primary)!important; }
.bg-secondary{ background-color: var(--color_secondary)!important; }
.bg-success{ background-color: var(--color_success)!important; }
.bg-danger{ background-color: var(--color_danger)!important; }
.bg-warning{ background-color: var(--color_warning)!important; }
.bg-info{ background-color: var(--color_info)!important; }
.bg-light{ background-color: var(--color_light)!important; }
.bg-dark{ background-color: var(--color_dark)!important; }
.bg-white{ background-color: var(--color_white)!important; }
.bg-light-opaque{ background-color: var(--color_light_opaque)!important; }
.bg-dark-opaque{ background-color: var(--color_dark_opaque)!important; }
.bg-white-opaque{ background-color: var(--color_white_opaque)!important; }
.button, .link{
cursor: pointer;
transition-duration: .5s;
}
.button.cs-secondary:hover, .button.cs-secondary:focus{
background:var(--color_primary)!important;
color:var(--color_light)!important;
}
.button.cs-primary:hover, .button.cs-primary:focus{
background:var(--color_secondary)!important;
color:var(--color_dark)!important;
}
.button.cs-secondary-opaque:hover, .button.cs-secondary-opaque:focus, .button.bg-light:hover, .button.bg-light:focus{
background:var(--color_secondary)!important;
}
.button.cs-primary-opaque:hover, .button.cs-primary-opaque:focus, .button.bg-dark:hover, .button.bg-dark:focus{
background:var(--color_primary)!important;
}
.button.bg-dark-opaque:hover, .button.bg-dark-opaque:focus{
background:var(--color_dark)!important;
}
.button.bg-light-opaque:hover, .button.bg-light-opaque:focus{
background:var(--color_light)!important;
}
.link.color-dark:hover, .link.color-dark:focus{
color:var(--color_primary)!important;
}
.link.color-light:hover, .link.color-light:focus{
color:var(--color_secondary)!important;
}
.a, .a:hover, .a:focus{
font-style: italic;
font-weight: bold;
text-decoration: none;
}
.menu-fondo{
background : #ffffff;
}
.menu-texto{
color : var(--color_dark)!important;
}
.menu-texto.link:hover, .menu-texto.link:focus, .menu-efecto{
color: var(--color_primary)!important;
}
::-webkit-input-placeholder{
color: var(--color_info);
}
::placeholder{
color: var(--color_info);
opacity: .7;
}
:-ms-input-placeholder{
color: var(--color_info);
}
::-ms-input-placeholder{
color: var(--color_info);
}
html{
position: relative;
min-height: 100%;
}
.viewport{
position:relative;
width:100%;
}
.container-fluid{
max-width:1900px;
}
.select_group, .texto-resaltado{
font-weight: bold;
//font-style: italic;
}
.input-base{
display: block;
width: 100%;
//font-size: 0.875rem;
line-height: 1.5;
color: #333!important;
background-color:#EEE!important;
background-image: none;
border: 0;
border-radius:0;
}
.input-error{
background: var(--color_danger);
color: var(--color_light);
font-size: .7em;
font-weight: bold;
}
.button{
width: 100%;
font-size: 1rem;
font-weight: 400;
//text-transform: capitalize;
border-radius:0;
cursor:pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.dropdown-menu{
border-radius:0;
}
.autocompletar-items{
position: absolute;
z-index: 1050;
/*position the autocomplete items to be the same width as the container:*/
top: 100%;
left: 0;
//right: 0;
max-height: 50vh;
min-width: 100%;
overflow: hidden;
overflow-y: scroll;
background: #fff;
}
.autocompletar-items div {
padding: 10px;
cursor: pointer;
background-color: #fff;
color: #333;
border-bottom: 1px solid var(--color_light);
}
/*when hovering an item:*/
.autocompletar-items div:hover {
background-color: var(--color_info);
}
/*when navigating through the items using the arrow keys:*/
.autocompletar-active {
background-color: var(--color_primary) !important;
color: var(--color_light) !important;
}
/*clases para el cubo y su rotacion*/
.cubo{
animation: giro_cubo 20s infinite linear;
transform-style: preserve-3d;
transform: rotateX( 0deg ) rotateY( -30deg );
margin: 0px auto;
}
.cubo .cara{
position: absolute;
}
.contenedor_cubo{
perspective: 1000px;
perspective-origin: 50% 50%;
}
/*Cara frontal*/
.cubo .cara:nth-child(1){
transform: translateZ(55px);
}
/*Cara posterior*/
.cubo .cara:nth-child(2){
transform: rotateY(180deg) translateZ(55px);
}
/*Cara izquierda*/
.cubo .cara:nth-child(3){
transform: rotateY(-90deg) translateZ(55px);
}
/*Cara derecha*/
.cubo .cara:nth-child(4){
transform: rotateY(90deg) translateZ(55px);
}
/*Cara superior*/
.cubo .cara:nth-child(5){
transform: rotateX(90deg) translateZ(55px);
}
/*Cara inferior*/
.cubo .cara:nth-child(6){
transform: rotateX(-90deg) translateZ(55px);
}
@keyframes giro_cubo{
0% { transform: rotateX( -15deg ) rotateY( 0deg ); }
50% { transform: rotateX( 15deg ) rotateY( 360deg ); }
100% { transform: rotateX( -15deg ) rotateY( 720deg ); }
}
.absolute-top{
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.absolute-bottom{
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 1030;
}
.text-ellipsis-1{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.text-ellipsis-2{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text-ellipsis-3{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.text-ellipsis-4{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.text-ellipsis-5{
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.multicarousel .multicarousel-item.carousel-control-prev,
.multicarousel .multicarousel-item.carousel-control-next {
width: 50px;
height: 50px;
top: calc(50% - 25px );
background: #333;
border-radius: 50%;
}
.multicarousel .carousel-inner .multicarousel-item.carousel-item.active,
.multicarousel .carousel-inner .multicarousel-item.carousel-item-next,
.multicarousel .carousel-inner .multicarousel-item.carousel-item-prev {
display: flex;
}
.multicarousel .carousel-inner .multicarousel-item.carousel-item-right.active,
.multicarousel .carousel-inner .multicarousel-item.carousel-item-next {
transform: translateX(25%);
}
.multicarousel .carousel-inner .multicarousel-item.carousel-item-left.active,
.multicarousel .carousel-inner .multicarousel-item.carousel-item-prev {
transform: translateX(-25%);
}
.multicarousel .carousel-inner .multicarousel-item.carousel-item-right,
.multicarousel .carousel-inner .multicarousel-item.carousel-item-left{
transform: translateX(0);
}
/*xs*/
@media ( min-width: 1px ){
.viewport, .viewport .carousel-inner{ height: 100vh; }
.menu_logo{ height:40px; width:auto; }
.max-button{ max-width:100%;}
.fondo_buscador{ background-color: var(--color_primary_opaque); color: var(--color_light); }
.menu .custom-overflow{ max-height: calc(100vh - 4.5em); overflow-y: auto; }
}
/*sm*/
@media ( min-width: 576px ){
.menu_logo{ height:60px; width:auto; }
}
/*md*/
@media ( min-width: 768px ){
.menu_logo{ height:80px; width:auto; }
.max-button{ max-width:300px;}
.menu .custom-overflow{ overflow-y: unset; }
}
/*lg*/
@media ( min-width: 992px ){
.viewport, .viewport .carousel-inner{ height: 100vh; }
.menu_logo{ height:100px; width:250px; }
.fondo_buscador{ background-color: var(--color_primary_opaque); color: var(--color_light); }
}
/*xl*/
@media ( min-width: 1200px ){
.menu_logo{ height:100px; width:250px; }
}