@font-face{ font-family: "Montserrat-Regular"; src: url('fonts/Montserrat-Regular.ttf') format('truetype'); font-display: swap;}
@font-face{ font-family: "Montserrat-Medium"; src: url('fonts/Montserrat-Medium.ttf') format('truetype'); font-display: swap;}
@font-face{ font-family: "Montserrat-Bold"; src: url('fonts/Montserrat-Bold.ttf') format('truetype'); font-display: swap;}
@font-face{ font-family: "InfiniteJustice-regular"; src: url('fonts/infinite-justice.straight.ttf') format('truetype'); font-display: swap;}

@font-face{ font-family: "Roboto-Medium"; src: url('fonts/Roboto-Medium.ttf') format('truetype'); font-display: swap;}

:root {
/*color*/
--color-brand-primary: #DC1515;
--color-brand-primary-bright: #db5555;

--color-ok: #1bbd80;

  /*fonts size - ratio 1:20*/
--font-2xs: 0.6em;   /*8px*/
--font-xs: 0.69em;   /*10px*/
--font-s: 0.83em;    /*13px*/
--font-n: 1em;       /*16px*/
--font-m: 1.2em;     /*19px*/
--font-l: 1.44em;    /*23px*/
--font-xl: 1.73em;   /*28px*/
--font-2xl: 2.07em;  /*33px*/
--font-3xl: 2.49em;  /*39px*/
--font-4xl: 3em;     /*48px*/
--font-5xl: 3.58em;  /*57px*/
--font-6xl: 4.3em;   /*69px*/
--font-7xl: 5.16em;  /*83px*/

--font-primary-regular: "Montserrat-Regular", Arial, Helvetica, sans-serif;
--font-primary-medium: "Montserrat-Medium", Arial, Helvetica, sans-serif;
--font-primary-bold: "Montserrat-Bold", Arial, Helvetica, sans-serif;

--font-secondary-regular: "InfiniteJustice-regular", Arial, Helvetica, sans-serif;
}

/* RESET PAGE */
html, body,
div, span,
h1, h2, h3, h4, h5, h6, p,
a, em, font, img, strong,
dl, dt, dd, ol, ul, li,
form, label, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:none;
                          box-sizing: border-box;}

h1, h2, h3, h4, h5, h6 { font-weight:normal;}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0;
                                    box-sizing: border-box;}	
                                    
input[type="text"], input[type="email"], input[type="tel"], input[type="submit"], input[type="number"], 
textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none;}
	

/*HTML 5*/
header, main, footer,
article, aside, canvas, embed,
picture, figure, figcaption, hgroup,
menu, nav, output, ruby, section, details, summary,
address, blockquote, cite,
time, mark, audio, video {display: block;}

a, figure, img { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/*text*/
p { color: #111;}
h1, h2, h3, h4, h5, h6 { font-weight:normal;}
strong { font-weight: normal; font-family: var(--font-primary-bold);}
ul { list-style: none;}
img { max-width: 100%; display: block;}

/*botones*/
a { text-decoration:none !important; }

.btn-cta{
    display: inline-flex; justify-content: center;  align-items: center; width: fit-content;  gap: 4px; background-color: var(--color-brand-primary); padding: 8px 16px; border:1px solid transparent; font-family: var(--font-primary-regular);  font-size: var(--font-n); line-height: normal; color: #FFF; text-align: center; cursor: pointer;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.btn-outline{
    display: inline-flex; justify-content: center;  align-items: center; width: fit-content;  gap: 4px; padding: 8px 16px; border:1px solid transparent; color: var(--color-brand-primary); border-color: var(--color-brand-primary); font: normal var(--font-n) var(--font-primary-regular); line-height: normal; text-align: center; cursor: pointer;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.btn-outline-gray{
    display: inline-flex; justify-content: center;  align-items: center; width: fit-content;  gap: 4px; padding: 8px 16px; border:1px solid transparent; color: #686868; border-color: #686868; font: normal var(--font-n) var(--font-primary-regular); line-height: normal; text-align: center; cursor: pointer;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.btn-link{
    display: inline-flex; justify-content: center;  align-items: center; width: fit-content;  gap: 4px; padding: 8px 16px; border:1px solid transparent; color: #646364; font: normal var(--font-n) var(--font-primary-regular); line-height: normal; text-align: center; cursor: pointer;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

.small { font-size: var(--font-s);}
.big { font-size: var(--font-m);  padding: 16px 24px !important;}

.negative { color: #fff; border-color: #fff;}

/*old buttons*/  
.azul {display: inline-block; background-color:#06489A; padding:8px 15px; font:normal var(--font-n) var(--font-primary-regular); color:#FFF; text-align: center; border-radius:50px !important; cursor: pointer;
        -webkit-transition: background-color 0.3s ease-in-out;
         transition: background-color 0.3s ease-in-out;}

.celeste {display: inline-block; background-color:#5692CD; padding:8px 15px; font:normal var(--font-n) var(--font-primary-regular); color:#FFF; border:none;  text-align: center; border-radius:50px !important; cursor: pointer;
        -webkit-transition: background-color 0.3s ease-in-out;
         transition: background-color 0.3s ease-in-out;}
         
.gris {  font:normal var(--font-n) var(--font-primary-regular); color:#707070; }

/*animaciones*/
@-webkit-keyframes fav {
  0% { background-color: #1BD741; }
  50% { background-color: #17e941;}
  100% { background-color: #1BD741;}
}

@keyframes fav {
  0% { background-color: #1BD741; }
  50% { background-color: #17e941;}
  100% { background-color: #1BD741;}
}

@-webkit-keyframes wavessound1 {
  0% { transform: scale(1); opacity: 1;}
  100% { transform: scale(1.2); opacity: 0;}
}

@-webkit-keyframes wavessound2 {
  0% { transform: scale(1); opacity: 1;}
  100% { transform: scale(1.5); opacity: 0;}
}

@-webkit-keyframes wavessound3 {
  0% { transform: scale(1); opacity: 1;}
  100% { transform: scale(1.8); opacity: 0;}
}

@keyframes wavessound1 {
  0% { transform: scale(1); opacity: 1;}
  100% { transform: scale(1.2); opacity: 0;}
}

@keyframes wavessound2 {
  0% { transform: scale(1); opacity: 1;}
  100% { transform: scale(1.5); opacity: 0;}
}

@keyframes wavessound3 {
  0% { transform: scale(1); opacity: 1;}
  100% { transform: scale(1.8); opacity: 0;}
}

/*Global*/
html, body { height:100%;}
    html { font-size:16px; }
    body { font-size: 1rem; /*1rem = 16px*/ } 


/* MENSAJE NAVEGADORES ANTIGUOS*/
#Mensajes { position:relative; width: 100%; height:100%; text-align:center; background-color:#ccc; font-family:Arial, Helvetica, sans-serif !important;}
    #CuerpoMensaje { position:absolute; top:50%; left:50%; width:600px; padding:20px 0; margin:-100px 0 0 -300px; background-color:#fff;}
    #CuerpoMensaje p#AlertaPrincipal { font-style:italic; font-weight:normal; color: #666; font-size:20px; display:block; margin-bottom:15px; text-align:center;}
    #CuerpoMensaje div { width:100%;  border-top:1px solid #ccc; text-align:left;}
    #CuerpoMensaje div p { width:100%; font-size:11px; color:#666; display:block; text-align:center; margin:10px 0;}
    #CuerpoMensaje ul { list-style:none; width:260px; text-align:center; margin:10px 0 0 180px; }
    #CuerpoMensaje ul li { float:left;}
    #CuerpoMensaje ul li a { width:60px; margin:0 10px; display:block; text-decoration:none; font-size:12px; color:#666;}
  
/*IE 10 y menores */
html[data-useragent*='MSIE'] #Mensajes { display:block !important;}
html[data-useragent*='MSIE'] .SafeZone { display:none !important;}

/*IE 11 */
html[data-useragent*='rv:11.0'] .SafeZone { overflow-x: hidden;}
/*html[data-useragent*='rv:11.0'] #Mensajes { display:block !important;}
html[data-useragent*='rv:11.0'] .SafeZone { display:none !important;}*/

@media screen {
    /*LOADER*/
    #Loader { -webkit-transition: opacity 0.3s ease-out, visibility 0.3s ease-out; transition: opacity 0.3s ease-out, visibility 0.3s ease-out; }
    #Loader.off { opacity:0; visibility:hidden; }

    /*fix webp support*/
    .fixedwebp {}
}