@charset "UTF-8";
/* CSS Document
01 colores y titulos
02 home
04 sp builder
05 languague
06 proyectos
7 gif transparente copiar y pegar
8 tablas datos
9 interiores
10 graficos
11 uikit
12 wave
13 burger menu
14 stack sections 
20 responsive

*/

a.btn.btn-link.jmodedit{display:none}
#tip-112 , #tip-115 , #tip-116 , #tip-117 {display:none}


.visually-hidden{
  display : none;
}

:root { 
  /** azules roadis **/
	--color-primary: #1654A2 ; /** blue **/
	--color-secondary:#9fbee4 ; /** blue light **/
  
	--color-primary-dark:  #1654A2; /** blue dark **/
	--color-primary-medium:#1C99FE ; /** blue meddium **/
	--color-primary-light:#9fbee4 ; /** blue light **/
    	--color-aquamarine:#00f6ff ; /** aquamarine **/
    
	--color-primary-alpha:rgba(3,63,135,0.8) ;
	--color-secondary-alpha:rgba(77,141,225,0.85) ;
	--color-grey-light-alpha:rgba(231,231,231,0.85) ;

	--color-text-dark:  #101010; /** blue dark **/
	/* ----reset tema----*/

	--font-weight-heading: 200;
	--font-weight-body: 200;
	--font-size-base: 14px;
	
	--body-font: "Karla", sans-serif;
	
  	--font-H:"DM Sans", sans-serif;
	--heading-font:"DM Sans", sans-serif;
    --font-code: Menlo, monaco, Consolas, Lucida Console, monospace;
    --font-pre: "Courier 10 Pitch", Courier, monospace;
	--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	
}


.main-color {
    color: var(--color-primary)!important;
}

em {
    color: #000;
}
a.canvasjs-chart-credit{display: none;}

.center{text-align: center}


.sppb-addon-wrapper.addon-root-text-block{margin-bottom: 0px!important;}
/* ----------------------------------
01 colores y titulos
------------------------------------- */

.text-blue{color: var(--color-primary-medium)!important;}
.text-blue p{color: var(--color-primary-medium)!important;}
.bg-white{background-color: white}
.bg-dark{background-color: #191b1d}
.bg-blue{background-color: var(--color-primary);}
div.project-details.bg-blue{background-color: var(--color-primary)}
/* ----colores corporativos roadis----*/
.blue{ color: var(--color-primary);}
p.uk-card-title.text-dark{color: var(--color-text-dark);}
div.sppb-addon.sppb-addon-text-block.text-black p{color: var(--color-text-dark);}
h3.text-dark , .text-dark p , .text-dark {color: var(--color-text-dark)!important;}
/* ----uikit----*/
.white p {
   
    color: white !important;
}
.uk-text-white{
   
    color: white !important;
}
.text-white , .white{
 
    color: white !important;
}


.text-dark , .text-black , .black{
  
    color: black !important;
}

table p , table div.sppb-addon-content , table{ font-size: 11px!important;}
/* ----------------------------------
02 home
------------------------------------- */

.main-header .lg-text h1 {
    text-transform: uppercase;
    font-size: 4vw;
    line-height: 1;
}

.main-header .container-fluid {
    width: calc(100% - 0px);
    margin: auto;
    padding-right: var(--bs-gutter-x, .0rem);
    padding-left: var(--bs-gutter-x, .0rem);
}

	/* ------------------------------------------------------------------------------------------------------------------------------------
   04 sp builder
--------------------------------------------------------------------------------------------------------------------------------------- */	

.overlay-background-style {
    background: -webkit-linear-gradient(45deg, rgba(0, 184, 255, 0.8) 0%, rgba(0, 70, 255, 0.7) 100%) transparent;
    background: linear-gradient(45deg, rgba(0, 184, 255, 0.8) 0%, rgba(0, 70, 255, 0.7) 100%) transparent;
}


sppb-addon-overlay-image:hover{display:block;-webkit-animation:zoomIn .2s;animation:zoomIn .2s}
.overlay-background-style{position:absolute;left:0;top:0;height:100%;width:100%;transition:.4s linear}
.overlay-background-style::after{content:"";position:absolute;left:0;top:0;height:100%;width:100%;opacity:0;transition:.6s linear}
.overlay-background-style:hover {
    background: -webkit-linear-gradient(45deg, rgba(0, 184, 255, 0) 0%, rgba(0, 70, 255, 0) 100%) transparent;
    background: linear-gradient(45deg, rgba(0, 184, 255, 0) 0%, rgba(0, 70, 255, 0) 100%) transparent;
    ;transition:.6s linear
}


	/* ------------------------------------------------------------------------------------------------------------------------------------
  05 languague
--------------------------------------------------------------------------------------------------------------------------------------- */
div.mod-languages ul li.lang-active {
    background-color: none!inportant; opacity: 0.3;
}
ul.languague-top{list-style: none;   list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
    -ms-transform: rotate(-90deg) translateY(50%) translateX(50%);
    transform: rotate(-90deg) translateY(50%) translateX(50%);

}

ul.languague-top li {
  float: left;
}

ul.languague-top li a {
  display: block;
 
  text-align: center;
  padding: 0px 10px;
  text-decoration: none;
}

ul.languague-top li img , ul.languague-footer li img{
  max-width:20px;
	 width:20px

}


ul.languague-footer {list-style: none;   list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;


}

ul.languague-footer li {
  float: left;
}

ul.languague-footer li a {
  display: block;
 
  text-align: center;
  padding: 0px 10px;
  text-decoration: none;
}
/* ------------------------------------------------------------------------------------------------------------------------------------
  6 proyectos
--------------------------------------------------------------------------------------------------------------------------------------- */


img.img-tab-proyectos{ width: 30%;}



/* ------------------------------------------------------------------------------------------------------------------------------------
  7 gif transparente copiar y pegar
--------------------------------------------------------------------------------------------------------------------------------------- */

.gtx-trans-icon , #gtx-trans{display:none}
.gtx-trans-icon {
   display : none;
}


/* ------------------------------------------------------------------------------------------------------------------------------------
  8 tablas datos
--------------------------------------------------------------------------------------------------------------------------------------- */

sppb-addon-table-main {
    width: 100%;
}


	.sppb-addon-table-main th {
    background: rgba(64,64,64,0.82);
    color: #fff;
    border: none;
    padding: 16px 20px;
    font-size: 14px;text-transform: uppercase; font-weight: 700;
}


.sppb-addon-table-main tbody tr {
    background: rgba(131,122,122,0.12);
    border: none;
}
/* -----pares fila---------------------------- */

.sppb-addon-table-main tbody tr:nth-child(even) {
    background:  rgba(131,122,122,0.42);
}



.sppb-addon-table-main td {
    border: none;
    color: grey;
    padding: 16px 20px;
    font-size: 14px; text-transform: uppercase;
}

/* ------------------------------------------------------------------------------------------------------------------------------------
  9 interiores
--------------------------------------------------------------------------------------------------------------------------------------- */

.foto-carta {
    background: #f7f7f7;
    padding: 17px;
    text-align: center;
    border: 1px solid rgba(178,178,178,0.2);
    max-width: 90%;
}

@media (min-width: 960px){
.uk-heading-small {
    font-size: 1.25rem;
}
    }
div.item-box.radius-15.item-box-white.md-mb30
{
    
    border: 1px solid rgba(255, 255, 255, 0.12);
}

div.title.title-white h6{color:white}
.accordion .title-white {
    padding: 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;color:white
}

div.title.title-list-white {
    padding: 15px;
       border: 1px solid rgba(255, 255, 255, 0.1);
  
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;color:white
}

div.title.title-list-white h6{
    color:white
}
.accordion .active .accordion-info-white {

    padding: 30px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;color:white
}

.accordion .active .title-white .ico {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.accordion .title-white .ico {
    position: absolute;
    bottom: 20px;
    right: 15px;
}


img.icono-proyectos-dato {width: 100px}
img.icond-hand-scroll { width: 30px; padding-bottom: 10px;}

.ac-number {
    font-size: 60px;
    font-weight: 700;
    letter-spacing: -7.5px;
    height: 100px;
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
    overflow-y: hidden;
    padding-right: 5px;
}



p.uk-card-title.text-dark{font-size:14px; font-weight: bold; text-transform: uppercase
}
.bg-cartografia_light{
    margin-left: 0px;
    /** background-image: url(/2023/images/bg-cartografia_light.gif); **/
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: 0 0;
    box-shadow: 0 0 0 0 #ffffff;}


.marquee-skew {
    top:50px
}
ul.rest.list-arrow.mt-30.pt-30.bord-thin-top{ padding-left: 20%}
ul.rest.list-arrow.mt-30.pt-30.bord-thin-top li { padding: 20px; border-bottom: 1px solid #f2f2f2}


ul.listblue li { padding: 20px; border-bottom: 1px solid rgba(242, 242, 242, 0.42)}
ul.listblue li:first-of-type {border-top: 1px solid rgba(242, 242, 242, 0.42)}
.page-intro .img.to-up-big {
  margin-top: -250px;
}


img.curve::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 55%;
    height: 100%;
    transform: translate(85%, 60%);
    background-color: hsl(216, 21%, 16%);
}

img.curve::after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 100% 50%;
    width: 55%;
    height: 100%;
    background-color: #3c31dd;
    transform: translate(-4%, 40%);
    z-index: -1;
}


.blog-list-half .item .cont .tags a:hover {
  background: var(--color-primary)!important;
}

.blog-list-half .item .cont .tags.colorbg a:hover {
  background: var(--color-primary)!important;
  color: #fff;
}



/* ------------------------------------------------------------------------------------------------------------------------------------
  10 graficos
--------------------------------------------------------------------------------------------------------------------------------------- */
.relative{position: relative;}

 .c-line {
    position: absolute;
    z-index:1;
    top: 70px;
    left: 0;
    width: 90%;
    height: calc(100% - 140px);
    z-index: 10;
    pointer-events: none;
    -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear; }
    .c-line.animated {
      -webkit-clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
      clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%); }


 .ser-img {
    width: 100%;
    height: 1000px;
    margin-top: -550px;
}

 .ser-img img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      -o-object-position: bottom;
      object-position: bottom; }


.section-romo-bottom {
    height: auto;
    position: relative;
    background-position: top;
    background-repeat: no-repeat;
    overflow: hidden;
}
.section-romo-bottom:after {
    background-image: url(/2023/images/graficos/romo_bottom.png);
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: 0;
     bottom: -2px;
    background-size: 100%;
}

.section-romo-bottom2 {
    background: #ffffff;
 
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
   
}


.section-romo-bottom2:after {
    content: "";
    background-image: url(/2023/images/graficos/romo_bottom2.png);
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat; ;
}

.bg-img-proyectos-top{ background-position: left top; }



.ser-img-innovacion-proyectos-bottom {
    width: 100%;
    height: auto;
    margin-top: -450px;
    padding-top: 200px;background-size: 100%;background-position: center center;
}

img.ser-img-innovacion-proyectos-bottom {
    width: 100%;position: relative;
    
}

.bg-img-proyectos-top{ background-size: 100%; padding-top: 0px!important;}

.portfolio-tab.crev .glry-img .bg-img:after, .portfolio-tab.crev .glry-img .bg-img:before {
 
  background: var(--color-primary);;
 
}
.numero-cifras{font-size: 30px}
.accordion .active .accordion-info-white em{
   
    color: white;
}

img.sppb-img-reponsive.img-ods{width: 50%; padding: 30px 30px 0px 30px}

b.text-light.uk-text-small.uk-text-uppercase.pb-s , .text-light.uk-text-small.uk-text-uppercase.pb-s b{color:grey} 

img.sppb-img-responsive.table_img_cifras {width: 70%}
/* ------------------------------------------------------------------------------------------------------------------------------------
  11 uikit
--------------------------------------------------------------------------------------------------------------------------------------- */
.uk-card-default {
    background-color: #00bcda;
    color: #666;
    box-shadow: 0 5px 15px rgba(0,0,0,.08); border-radius: 25px;
}
.uk-card-media-top img{     border-top-left-radius: 25px;    border-top-right-radius: 25px;}

h3.uk-card-body , .uk-card-body h3{ font-size: 20px; font-weight: 400}
h3.uk-card-title.text-blue-dark{font-size: 25px;}
div.text-dark.uk-text-light.uk-text-small.pt-15{font-size: 13px;}
/* ------------------------------------------------------------------------------------------------------------------------------------
  12 wave 
--------------------------------------------------------------------------------------------------------------------------------------- */

.line-overlay-bottom {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

}
.line-overlay-bottom svg path {
  stroke: #f8f8f8; border: 1px solid #f8f8f8;
}
.waves {
  position:relative;
  width: 100%;
  height:35vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:450px;
 
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
}
/* ------------------------------------------------------------------------------------------------------------------------------------
13 burguer menu
--------------------------------------------------------------------------------------------------------------------------------------- */



.hamenu .menu-links .main-menu > li .link {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
    padding: 20px 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    width: 100%;
    position: relative;
    display: block;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
}


/* ------------------------------------------------------------------------------------------------------------------------------------
14 stack sections +js 
--------------------------------------------------------------------------------------------------------------------------------------- */
.stack-container {
  display: flex;
  flex-direction: column;

  position: relative; /* Necesario como límite para GSAP */
}

.stack-container .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: transparent;
    background-clip: border-box;
    border: none;
    border-radius: .25rem;
}
.stack-container .uk-card-default  {min-height: 40vh}
.cardstick {

  display: flex;
  align-items: center;
  justify-content: center;
  /* Eliminamos el top y el sticky */
}

/* Colores para el ejemplo */
/* Añade esto a tu bloque de estilos */
.card:nth-child(1) { 
 
  z-index: 1; /* Capa base */
}
.card:nth-child(2) { 
 
  z-index: 2; /* Pasa por encima */
  position: relative; /* Necesario para que el z-index actúe correctamente */
}
/* La tarjeta 3 y 4 seguirán el flujo normal del DOM debajo de la 2 */
.card:nth-child(3) { 
  z-index: 3; /* Pasa por encima */
  position: relative; /* Necesario para que el z-index actúe correctamente */
}
.card:nth-child(4) { 

  z-index: 4; /* Pasa por encima */
  position: relative; /* Necesario para que el z-index actúe correctamente */
}
.card:nth-child(5) { 

  z-index: 5; /* Pasa por encima */
  position: relative; /* Necesario para que el z-index actúe correctamente */
}
/* ------------------------------------------------------------------------------------------------------------------------------------
20 responsive 
--------------------------------------------------------------------------------------------------------------------------------------- */


.navbar .navbar-nav .nav-link {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    font-weight: 600;
    color: #1a1a1a;
    padding: 20px 10px 15px 10px;
    margin: 0 15px;
}


@media (min-width: 1400px) and (max-width: 1200px) {
  
    div#sppb-addon-wrapper-93061047-5f22-4c58-aeed-cb3120dc5c5c{ padding-left: 5%}
    .sp-page-builder .page-content #section-id-c0693982-d0a7-48f2-83e5-9b9cf49b559d {padding-left: 5%}
}
@media (max-width: 1400px) {
    
    div#navbarSupportedContent{opacity:1!important;}
    
    .navbar .navbar-nav .nav-link {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    font-weight: 600;
    color: #1a1a1a;
    padding: 5px 2px 5px 2px;
    margin: 0 2px;
}
    
    navbar .dropdown-menu .dropdown-item {
    font-size: 11px;
    color: #1a1a1a;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    padding: 10px 25px;
    position: relative;
}
    .icon-img-120 {
    width: 80px;
}
    
    .bg-img.tab-img{background-size: 80%!important;}
    .portfolio-tab .cluom {
  
    padding: 20px;
  
    position: relative;
}
    div.info h4{font-size: 20px;}
    .fz-60 {
    font-size: 40px !important;
}
}