@import 'modulos/reset.min.css';
@import 'modulos/spectre.min.css';

:root {
  --general-font-size: 100%;
  --body-font-type:'gl';

  --color-suceess   :#4CAF50;
  --color-error     :#F44336;
  
  --bggradient-medio:#159b8b;/*#23282a;*/
  --bggradinet-start:#18b377;/*#212527;*/


  /* COLORES IRIS  */
    --line-divide : #DADADA;
    --olive-border: #BEBFB2;
    --main-olive  : #6B6D4F;
    --light-olive : #F2F3EA;
    --olive-hover : #787B4A;
    --main-pink   : #B88A7A;
    
    --color-background-light  : #F8F8F5;
    --color-background        : #EFEFEF;
    --color-background-ginicio: #F8EAE3;
    --color-background-gfin   : #D5D6CA;
    
    --main-button        : #B88A7A;
    --main-button-ginicio: #B88A7A;
    --main-button-gfin   : #ABAA97;
    --body-text          : #646464;
    --light-gray         : #EFEFEF;
    
    --dark-gray: #3E3E3E;
    --swiper-pagination-color: #bb8f7f !important;
    --swiper-theme-color: #bb8f7f !important;
    
  --medida-menu           : calc(0.7rem + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  --texto-proyectos       : calc(0.72rem + (1.4 - 0.72) * ((100vw - 300px) / (1600 - 300)));
  --alto-cabecera         : 65px;
  --max-ancho             : 1024px;

  --titulo-proyectos     : calc(0.9rem + (1.9 - 0.9) * ((100vw - 300px) / (1600 - 300)));
  --title-font-size      : calc(0.9rem + (1.9 - 0.9) * ((100vw - 300px) / (1600 - 300)));
  --subtitle-font-size   : calc(0.7rem + (1.3 - 0.7) * ((100vw - 300px) / (1600 - 300)));
  --presubtitle-font-size: calc(0.7rem + (1 - 0.7) * ((100vw - 300px) / (1600 - 300)));

  --h1-font-size: calc(2rem + (2.5 - 2) * ((100vw - 300px) / (1600 - 300)));
  --h2-font-size: calc(1.5rem + (2 - 1.5) * ((100vw - 300px) / (1600 - 300)));
  --h3-font-size: calc(1rem + (1.5 - 1) * ((100vw - 300px) / (1600 - 300)));
  --h4-font-size: calc(0.9rem + (1.3 - 0.9) * ((100vw - 300px) / (1600 - 300)));
  --h5-font-size: calc(0.8rem + (1.2 - 0.8) * ((100vw - 300px) / (1600 - 300)));
  --h6-font-size: calc(0.7rem + (1.1 - 0.7) * ((100vw - 300px) / (1600 - 300)));

  --mg-05: 1.5rem;
  --mg-1: 1rem;
  --mg-2: 2rem;
  --mg-3: 3rem;
  --mg-4: 4rem;
}

@font-face {
  font-family: 'gl';
  src: url(./modulos/fonts/roboto.ttf);
  font-display: swap;
}

@font-face {
  font-family: 'recoleta';
  src: url(./modulos/fonts/TenPounds-Regular.otf);
  font-display: swap;
}


@font-face {
  font-family: 'gm';
  src: url(./modulos/fonts/roboto-regular.ttf);
  font-display: swap;
}
@font-face {
  font-family: 'gmm';
  src: url(./modulos/fonts/roboto-medium.ttf);
  font-display: swap;
}


html body *
{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
body .title
{
  font-size: var(--title-font-size);
  font-family: "gm";
}
body .title-bold
{
  font-size: var(--title-font-size);
  font-family: "gmm";
}
body .subtitle
{
    font-size: var(--subtitle-font-size);
}

body .presubtitle
{
    font-size: var(--presubtitle-font-size);
    font-family: "gm";
}

body .txt, body .txt *
{
    font-size: var(--texto-proyectos);
}

/* 
  Estilos de css personalizados debajo 
  Scrollbar
*/
[scrollbr] {
  scrollbar-color: var(--olive-border);
  transition: scrollbar-color 3000ms linear;
}
[scrollbr]:hover {
  scrollbar-color: transparent;
}
[scrollbr]:not(:hover)::-webkit-scrollbar-thumb {
  scrollbar-width: 0px;
  background: transparent;
}
[scrollbr]::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
[scrollbr]::-webkit-scrollbar-thumb {
  border-radius: 5px;
  transition   : background 0.3s;
  background   : #d1dbe3;
  background   : -moz-linear-gradient(90deg, var(--olive-border) 20%, var(--olive-border) 91%);
  background   : -webkit-linear-gradient(90deg, var(--olive-border) 20%, var(--olive-border) 91%);
  background   : linear-gradient(90deg, var(--olive-border) 20%, var(--olive-border) 91%);
  filter       : progid: DXImageTransform.Microsoft.gradient(startColorstr = "var(--olive-border)",endColorstr = "#746ec6",GradientType = 1);
}