@charset "utf-8";


a{
    cursor: pointer!important;
}

.col-border.col{
    border: 1px solid pink;
}

.container {
    max-width: 90% !important;
}

.grid-col-padding .col{
    padding: 20px;
}


.gl-t{
    border-top: 1px solid #999;
}

.gl-r{
    border-right: 1px solid #999;
}

.gl-b{
    border-bottom: 1px solid #999;
}

.gl-l{
    border-left: 1px solid #999;
}



header nav.navbar-default, 
nav.navbar.bootsnav {
    border-bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 1199px) {
    header nav .navbar-nav > li > a {
        margin: 0 12px; /* Original: margin: 0 18px; */
    }
}

.nav-divider{
    width: 1px;
    background-color: rgba(255,255,255,0.3);
    margin: 18px 0px;
}

/*---------- First I used with white bar 
header nav.navbar-default, nav.navbar.bootsnav {
    border-bottom: 0;
    background-color: #FFFFFF !important;
}
    ----*/



header nav.navbar-default, nav.navbar.bootsnav {
    border-bottom: 0;
    background-color: transparent!important;
                border-bottom: 1px solid rgba(255,255,255,0.25);
}



        header.header-appear nav.header-light, header.sticky nav.navbar-fixed-top.header-light, header.sticky nav.navbar-scroll-fixed-top.header-light {
            background-color: #ffffff!important;
            /* box-shadow: 0 5px 10px -10px rgba(0, 0, 0, 0.6); */
            box-shadow: none;
            color: #111111;
            border-bottom: 1px solid rgba(0, 0, 0, 0.5);
        }


/* header nav.navbar .navbar-nav > li > a, nav.navbar.bootsnav ul.nav > li > a {
color: #FFFFFF!important;
cursor: pointer;
} */

.navbar-nav>li>a {
    font-family: var(--ibm-sans-body-01);
    /* color: #111111!important; */
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 20px;
    padding: 5px 0px 5px;
    text-transform: unset !important;
    letter-spacing: 0.015em;
}


.navbar-nav>li>a,
.navbar-nav>li>a:hover,
.navbar-nav>li>a:active{
    text-decoration: none;

}

.hamburger-menu {
    align-items: center;
    display: flex;
}

nav.navbar.bootsnav .navbar-toggle {
    top: 0px !important;
}

footer, footer a{
    color: #999!important;
}



/* 
First iteration
.numbered-dividers{
    display: flex;
    flex-direction: row!important;
    border-left: 1px solid rgba(0,0,0,0.8);
    border-top: 1px solid rgba(0,0,0,0.8);
    height: 200px;
    padding: 20px;
    margin-bottom: 40px;
} */

.numbered-dividers{
    display: flex;
    flex-direction: row!important;
    margin-bottom: 40px;
    height: 200px;
}

.numbered-dividers .row{
    padding: 40px;
    gap: 40px;
}

.numbered-dividers .col{
    flex-direction: row !important;
    display: flex;
}

.sideway-number{

transform-origin: top left;
left:0;
top:0;
transform: rotate(-90deg) translateX(-100%); 
font-size: 100px;
font-weight: 300;
text-align: right;
color: rgba(0, 0, 0, 0.3);
padding-top: 20px;w

/* width: fit-content;
height: 200px; */
/* background-color: yellow; */
max-height: 80px;


}


.section-name{
    /* padding: 8px 0 0 0; */
}



.section-divider-dark,
.section-divider-light {
    margin-bottom: 0px !important;
}


.section-divider-dark,
.section-divider-light {

    margin-top: 0px;
    padding: 40px 0 80px 0;
    font-size: 20px;
  font-family: var(--ibm-mono-01);
  font-weight: 500;
}


.section-divider-dark {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 1);
      font-weight: 400!important;
}



.section-divider-light {
    margin-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: rgba(255, 255, 255, 1) !important;

}


.fullwidth-slider-01,
.section-divider-light{
    background-color: #858586 !important;
}

.idd .section-divider-light{
    background-color: unse!important;
}


.section-divider-light h6,
.section-divider-dark h6 {
    font-family: var(--alt-text);
    letter-spacing: -0.03em !important;
    font-weight: 400 !important;

}

.footer-nav-links{
    display: flex;
    flex-direction: row;

}

.footer-col-1{
    min-height: 300px;
}

.footer-logo img{
    max-height: 80px;
}

.footer-logo {
    display: flex;
    flex-direction: column;
        justify-content: space-between;
}

.mfp-container, .mfp-close {
    cursor: pointer!important;`
}


.home .mfp-close{
    /* right: -20px;
    padding-right: 0px;
    border: 1px solid red; */
       background-color: rgba(0, 0, 0, 0.5)!important; 
       height: 40px;
       width: 40px;
       right: 0px!important;
       padding-right: 0px!important;
       text-align: center!important;
       position: absolute;
       top: 0px;
       right: 0px;
}

.home .mfp-container img{
    /* max-width: 90%!important; */
}

.mfp-figure:after {
    background-color: transparent!important;
}

img.mfp-img{
    max-width: 90%!important;
}

/*--------------- Home ------------------*/

#home-hero-opener h1,
#home-hero-opener h2,
#home-hero-opener h3,
#home-hero-opener h4{
    line-height: 1.2em;
    font-family: var(--ibm-sans-headers-01)!important;
    font-weight: 400;
    color: #FFFFFF;

}

#home-hero-opener {
    background-color: #000;
}

#home-hero-opener h1{
    line-height: 1em;
}
#home-hero-opener .container-fluid{
    width: 100%;
    padding-right: 0px!important;
    padding-left: 0px!important;
    margin-right: auto;
    margin-left: auto;
}



.hero-text-boxes{
   position: fixed;
    bottom: 0px;
    height: 200px;
    /* border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important; */
    /* padding: 40px; */
    width: 100%;
    /* z-index: 1000; */
    margin: 0;
    color: #FFFFFF;
    display: flex;
    flex-direction: row;
}

.hero-text-boxes, .hero-text-boxes .col-3{

    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hero-text-boxes .cards{
    padding: 40px;
}

.stats-squares{
    border: 1px solid #FFFFFF;
    padding: 80px;
}

.col-6 {
    -ms-flex: 0 0 75%;
    flex: 0!important;
}


.text-highlight-01{
    background-color: #ffe318;
}
/* No puedo hacer highlghts. Conflicto with panel toggle. */





#home-text-intro .row{
    display: flex!important;
        flex-direction: row!important;

}

.home .home-hero-area h3{
    font-family: var(--ibm-sans-headers-01)!important;
    line-height: 1.1em;
}

.home .home-hero-area p,
.home .home-hero-area h6{
    font-family: var(--ibm-sans-body-01)!important;
    line-height: 1.1em;
}

#home-text-intro h6 {
    font-weight: 400!important;
    line-height: 1.2em!important;
}

#home-projects-grid-01 h4,
#home-projects-grid-02 h4{
    font-family: var(--alt-text)!important;
    font-weight: 500!important;
    color: var(--primary-color) !important;

}

#home-projects-grid-01{
    padding: 130px 0 200px 0!important;
}

#home-projects-grid-02{
    background-color: #c1c1c1;
}


.home .accordion-style1 li{
    color: #222!important;
        margin-bottom: 20px;
    font-weight: 400 !important;
    line-height: 1.4em !important;
    font-size: 22px!important;
}

/* 

[class^="ti-"], [class*=" ti-"] {
	font-family: 'themify';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
    content: "\e648b"!important;
}

.ti-minus{
    content: "\e648"!important;
}


.ti-minus:before,
.ti-plus:before {
    content: "\e648"!important;
    ti-angle-up 
    .icon-angle-up:before {content: "\e648";}
.icon-angle-right:before {content: "\e649";}
.icon-angle-left:before {content: "\e64a";}
.icon-angle-down:before {content: "\e64b";}
}


*/



.accordion-style1 .panel-heading i {
    font-size: 20px;
    color: #000000;
    font-weight: 600!important;
}
.accordion-style1 a{
    text-decoration: none!important;
}

.accordion-style1 .panel-title > span.float-right {
    position: absolute;
    right: 0;
    top: 11px!important;
}


.accordion-style1 h4,
.accordion-style1 h5,
.accordion-style1 h6{
    margin: 0px!important;
    color: #000;
    font-weight: 400!important;
    line-height: 1.25em!important;
     font-family: var(--ibm-sans-headers-01)!important;

     padding: 2px 0;
}

.accordion-style1.panel-group .panel-heading {
    border: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.75);
}

.panel-heading{
    display: flex!important;
    flex-direction: row!important;
        justify-content: space-between;

}

.panel-heading .toggle-area{
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.panel-title{
    width: 100%;
}


#block-intro-slider {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;

}

.magnific-home-gallery li a{
 /* display: block;
    border: 1px solid blue;
    background-color: var(--primary-color) !important; */
    
}

.magnific-home-gallery li img{
    width: cover;
    overflow: hidden;

}

.magnific-home-gallery li img:hover {
    /* border: 3px solid red; */
   opacity: 0.8;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -ms-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
     /* filter: saturate(100%); */
           transform: scale(1.02);
           opacity: 1!important;
    
 
}

/*---------------Projects ------------------*/



.project-details-table{
    font-size: 16px !important;
    font-family: var(--alt-text);
}

.confidentiality-note{
    font-size: 16x !important;
    line-height: 1.4em!important;

}

.intro-info .page-title h3 {
    font-weight: 600 !important;
    color: #333 !important;
}


video {
    background-size: cover;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.citybox #block-intro-slider {
    background-color: #B8B8B8 !important;
    
}

.admin #block-intro-slider,
.idd #block-intro-slider{
    background-color: #111111!important;
        height: 80vh;
    display: flex;
    justify-content: center;
        align-items: flex-start;
}
        @media (max-width: 991px) {
            .citybox #block-intro-slider,
            .admin #block-intro-slider{
            height: 40vh;
            }
        }


    .admin #block-intro-slider video,
    .idd #block-intro-slider video{
    /* height: 100% !important; */
    max-width: 1200px !important;
    /* border: 3px solid red; */

    }


    


.citybox #block-01 {
    padding: 130px 0 0 0 !important;
}

.citybox #block-01 .grid-lines .col {
    /* border: 1px solid #cacaca!important; */
}
    .citybox .gallery-pr0ject-description{
        padding: 12px 40px 12px 2px;
        font-size: 16px;
        font-family: var(--ibm-mono-01);
        line-height: 1.3em;
        color: #555;


    }

    .citybox .link-to-project-page{
            position: absolute;
            bottom: 0px;
            right: 0px;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            color: #FFF ;
            font-size: 16px;
            font-weight: 500;
            padding: 20px 40px;

            display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    }

    .link-to-project-page, 
    .link-to-project-page a{
 color: #FFF ;
    }


.image-grid-discovery{
    padding: 130px 0 0 0 !important  ;
}

.idd .image-grid-discovery{
    padding: 130px 0!important  ;
}

.image-grid-discovery .gallery-item {
    background-color: #EDEDED !important;
}

.image-grid-discovery .row{
    row-gap: 10px;
}

.image-grid-discovery .col {
    position: relative;
    width: 100%;
    padding: 0 5px;
}


.image-grid-discovery .gallery-item img {
    max-width: 100% !important;
}

.admin .image-grid-discovery-fullwidth{
    background-color: #616161 !important;
    padding: 120px 80px;
}

.btn-to-full-project.row,
.btn-to-full-project.col{
    /* display: flex; 
    flex-direction: row;  */
    align-items: center!important; 
    justify-content: space-between;

}

.btn-to-full-project .btn{
    /* width: 100%!important; */

}


.fullwidth-slider-01 .cb-screens {
    max-width: 90% !important;


}

.fullwidth-slider-01{
    padding: 80px 0 130px 0!important  ;
}


.citybox .fullwidth-slider-01.swiper-slide {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.fullwidth-slider-01.swiper-button-prev,
.fullwidth-slider-01.swiper-button-next {

    height: 80px !important;
    width: 80px !important;
    padding: 0px !important;
    background-size: cover;
    background-color: unset !important;
    opacity: 0.75 !important;


}

.fullwidth-slider-01.swiper-button-prev {
    /* margin: -15px 10px 0 0; */
    margin-left: 20px !important;
    background-image: url(../images/swiper-button-alpha-90px-prev.png) !important;

}

.fullwidth-slider-01.swiper-button-next {
    /* margin: 10px 0  0 0; */
    margin-right: 20px !important;
    background-image: url(../images/swiper-button-alpha-90px-next.png) !important;
}

.swiper-button-next.swiper-button-black-highlight,
.swiper-button-prev.swiper-button-black-highlight {
    border-radius: 0px;
}
.fullwidth-atlas-microsite-animation{
    background-color: #858586;
}

.fullwidth-atlas-microsite-animation img{
    max-width: 90%!important;
}

.fullwidth-atlas-microsite-animation .col-12{
    text-align: center!important;
}

.dark-header nav{
    border: 2px solid red;
}



/* .atlas #block-intro-slider img{
   max-width: 95%;

} */

.atlas #block-intro-slider{

    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding:  0 !important;
    background: #071f69 url('projects/atlas-design-system/atlas-topo-bg-alpha.png') left no-repeat!important;
    background-size: 70%!important;
}


.atlas .image-grid-discovery img{
    min-width: 100%!important;
}

/*-------------------Adding grid lines ------------------*/

.grid-test header .col{
          border-right: 1px solid rgba(0, 0, 0, 0.5)!important;
              height: 100% !important;
  
}




.bottom-row {
    min-height: 80px;
}

.grid-columns .col{
            border-right: 1px solid rgba(0, 0, 0, 0.5)!important;
            height: 100%!important;
            display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 20px!important;

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

.grid-columns .row{
    border-bottom: 1px solid rgba(0, 0, 0, 0.5)!important;
    padding: 0 40px!important;
}

.grid-columns .row-grid-top{
    height: 100px;
}

.grid-columns .row-grid-bottom{
    height: 80px;
        flex-direction: row!important;
}

.grid-columns.col{
    min-height: 100%!important;
}
.grid-columns .navbar-nav{
    flex-direction: row;
}



.musicasa #block-intro-slider{

    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 100px 0 0 0 !important;
    flex-direction: column;
      padding: 130px 0 0 0 !important;
      background-color: #484848!important;
    /* background: #484848 url('projects/musicasa/musicasa-fullwidth-02.png') center top no-repeat!important;
    background-size: 70%!important; */


  
}

.musicasa .image-grid-discovery{
    padding: 130px 0!important;
}


.musicasa #block-intro-slider img{
    max-width: 90%;
}


.fullwidth-musicasa-demo .section-divider-light{
    background-color: unset !important;
}


.musicasa .fullwidth-musicasa-demo{
    background-color: #777!important;
     padding: 80px 0 130px 0!important;
}

.musicasa .video-area{
       display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 100px 0!important;
}

.musicasa .fullwidth-musicasa-demo video{
        width: 85% !important;
    max-width: 1000px;
}

.musicasa .portfolio-img{
        /* background-color: #c4c4c4 !important; */
        background-color: #fab336 !important;
        overflow: hidden!important;
}



.portfolio-img .card-description{
    background-color: #00000080;
    padding: 40px;
    color: white;
    position: absolute;
    right: 7px;
    margin-left: 7px;
    width: 100%;
    overflow: hidden;
}



.musicasa .fullwidth-musicasa-area img {
    max-width: 95% !important;

}
.musicasa .fullwidth-musicasa-area {
    background-color: rgb(133, 133, 134);

}



.musicasa .workflows-fullwidth{
    background-color: #fcba2e !important;
    padding: 100px 50px;
}



/* .musicasa #video-demo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #333;
}

.musicasa #video-demo video{
    width: 85%!important;
    max-width: 1000px!important;
}

.musicasa .tab-pane{
    text-align: right;
    background-color: rgba(0, 0, 0, 0.15);
} */

.admin-journey-fullwidth{
    background-color: #3e3078;
}

.idd .fullwidth-idd-demo{
    background-color: #444!important;
     padding: 80px 0 130px 0!important;
}


.fullwidth-idd-demo {
       display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 100px 0!important;
}


.fullwidth-idd-demo video{
    width: 50%!important;
    max-width: 1000px!important;
    background-color: #161616;

}

.idd .all-screens-fullwidth{
    background-color: #333333;
}


.map-tools .diagrams{
    background-color: #444;
}

.map-tools .diagrams .row{
    margin-bottom: 60px;

}



.fullwidth-map-tools-animation{
    background-color: #000;

}

.map-tools #block-intro-slider{
    background-color: #666;
    background-image: url("/projects/map-tools/project-page-detail.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 100px;
    height: 70vh!important;
}

.map-tools-detail{
    padding: 40px 80px;

}

/*------------- USIC -------------*/


.usic #block-intro-slider{

/* align-items: center!important; */
background-color: #ffb115 !important;
background: #FFB115 url(/projects/usic/usic-hero-header.png);
background-size: cover;
background-repeat: no-repeat;
background-position-x: left;
background-position-y: center;
height: 70vh!important;
}
.usic-hero-image{
    padding: 0 80px;
}


.usic .journey-map-fullwidth{
    background-color: #555555;
    padding: 80px 0px 130px 0px;
    /* margin-bottom: 80px; */
}


.usic .personas-fullwidth-slider{
    background-color: #666666 !important;
}
.usic .personas-fullwidth-slider .container{
    flex-direction: row;
    justify-content: center;
}


.usic .personas-fullwidth-slider .row{
    max-width: 90% !important;
}

.usic .fullwidth-slider-01, .section-divider-light{
        margin-top: 0px;
    padding: 40px 0 80px 0!important;
    font-size: 20px;
    font-family: var(--ibm-mono-01);
    font-weight: 500;
    background-color: transparent!important;
    
}


.usic .workshop-grid .section-title{
        margin: 0 10px;
        font-family: var(--alt-text-2);
        font-weight: 400!important;
        color: var(--primary-color)!important;
        padding: 0 6px; 
} 

.usic .mfp-content{
    max-width: 85% !important ; 
        /* border: 3px solid pink; */
}



/*

.research-readout .lightbox-group-gallery-item{
    border: 4px solid green;
     max-width: 90% !important ; 
}

.research-readout figure{
    padding: 0 5%;

}

*/