/* INICIA COMUN A TODOS */
    @font-face {
        font-family: 'DINPro Medium';
        font-style: normal;
        font-weight: normal;
        src: local('font/DINPro Medium'), url('font/DINPro-Medium tr.woff') format('woff');
    }
    @font-face {
        font-family: 'DINPro Light';
        font-style: normal;
        font-weight: normal;
        src: local('font/DINPro Light'), url('font/DINPro-Light tr.woff') format('woff');
    }  
    @font-face {
    font-family: 'DINPro Bold';
    font-style: normal;
    font-weight: normal;
    src: local('font/DINPro Bold'), url('font/DINPro-Bold tr.woff') format('woff');
    }
    @font-face {
    font-family: 'DINPro Black';
    font-style: normal;
    font-weight: normal;
    src: local('font/DINPro Black'), url('font/DINPro-Black tr.woff') format('woff');
    }
    .tith1{
        font-size: 2rem;
        z-index: 900;
        margin-left: 0px;
        font-weight: 500;
    }
    p{
        font-size: 18px;
        line-height: 24px;
    }
    .mayuscula{
        text-transform: uppercase;
    }
    .display-relative{
        position: relative;
    }
    .mt-7 {
        margin-top: 6rem !important;
    }
    .mt-6 {
        margin-top: 5rem !important;
    }

    .fullscreen-modal .modal-dialog {
        margin: 0;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
      }
      @media (min-width: 768px) {
        .fullscreen-modal .modal-dialog {
          width: 750px;
        }
      }
      @media (min-width: 992px) {
        .fullscreen-modal .modal-dialog {
          width: 970px;
        }
      }
      @media (min-width: 1200px) {
        .fullscreen-modal .modal-dialog {
           width: 1170px;
        }
      }
/* INICIA HEADER */
    .text-justify{
        text-align: justify;
    }
    .card-text{
        text-align: justify;
    }

    body{
        font-family: 'DINPro Light';
        
    }
    h1,h2,h3,h4,h5{
        font-family: 'DINPro Medium';
        
    }
    p.p-normal{
        font-family: 'DINPro Medium';
    }
    span.errorFuente{
        font-family: 'Open Sans', sans-serif !important;
    }
    .sticky-top{
        top:40px;
    }
    div.div-logo{
        position: relative;
        width: 150px;
    }
    img.logo-head{
        position: absolute;
        left: 0px;
        top: -50px;
    }
    #menu{
        padding-left: 150px;
    }
    #menu .nav-item{
        margin-left:30px
    }
    #menu .fr , #menu .es{
        margin-left:10px
    }
    .navbar-dark .navbar-nav .nav-link {
        font-weight: 900;
        font-size: 1.2rem;
    }
    nav.img-nav {
        background-color: #ED344C  !important;
    }
    a.nav-link{
        color:#fff !important;
    }
    a.nav-link:hover{
        opacity: 0.8;
    }
    a.active{
        opacity: 0.8;
    }
    a.navbar-brand img{
        max-width: 180px;
    }
    ul.redes{
        position: absolute;
        right: 0;
        bottom:-40px
    }
    ul.redes img{
        width: 55px;
    }
    .redes .nav-link{
        padding:0px !important;
    }
    div.idiomas{
        text-align: right;
        display: block;
        width: 100%;
        position: fixed;
        background-color: #fff;;
        right: 0;
        left: 0;
        margin-right: auto;
        margin-left: auto;
        z-index: 999;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    div.idiomas a{
        color:#989898;
        font-weight: 900;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        font-size: 1.2rem;
        padding-left:10px;
    }
    div.idiomas a.selected{
        color:#22B19C ;
        font-weight: 900;
    }
    .navbar-toggler {
        border-color: #fff !important;
        margin-top:5px;
        margin-bottom:5px;
    }
/* TERMINA HEADER */
/* INICIA HOME */
    #home{
        margin-top:9rem;
    }
    #home .card{
        border:none;
    }

    img.puntos{
        position: absolute;
    }
    img.logo-uni-home{
        position: absolute;
        width:110px ;
        bottom:30px   ;
        left:-30px;
    }
    img.carteles-home1{
        position: absolute;        
        top: 0px;
        right:160px;
    }
    img.carteles-home2{
        position: absolute;
        bottom: 0;
        right:0;
    }
    div.positon-relative{
        position:relative;
    }
    div.quienes-somos-texto{
        background-color: #41A6C3  !important;
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
        color:#fff;
        border-bottom: solid #fff 1px;
        padding: 1rem 5rem 3rem 2rem ;
        margin: 1.5rem 1.5rem 0 1.5rem !important;
    }
    div.quienes-somos-texto{
        text-align: justify;
    }
    p.hashtag{
        -webkit-transform: rotate(-6deg); 
      -moz-transform: rotate(-6deg); 
      -ms-transform: rotate(-6deg); 
      -o-transform: rotate(-6deg); 
      transform: rotate(-6deg); 
      
      -webkit-transform-origin: 50% 50%; 
      -moz-transform-origin: 50% 50%; 
      -ms-transform-origin: 50% 50%; 
      -o-transform-origin: 50% 50%; 
      transform-origin: 50% 50%; 
      text-transform: uppercase;
      text-align: center;
      font-size: 1.3rem;
      
    }
    p.hashtag span{
        padding:0px 10px;
        font-weight: 900;
        color:#ED344C ;
    }
    div.bloques{
        margin-bottom:7rem;
    }
    h2.tit-h2-white{
        color:#fff ;        
        font-size: 1.5rem;
        margin-bottom:2rem;

    }
    h2.tit-h2-blue{
        color:#41A6C3 ;        
        font-size: 1.5rem;
        margin-bottom:2rem;

    }
    h2.tit-h2-green{
        color:#22B19C;        
        font-size: 1.5rem;
        z-index: 900;
        margin-bottom:2rem;
    }
    #violencia-pandemia .tit-violencia-pandemia{
        padding: 15px 15px 15px 70px;
        margin-top:10px;
        color: #fff;
        margin-top: 1rem;
        position: relative;
        display: block;
        background: #ED344C;
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
    }
    #violencia-pandemia .cartel{    
        position: absolute;    
        left: -60px;
        top: -60px;
        width: 150px;
        transform: rotate(-15deg);
        z-index: 90;
    }
    #violencia-pandemia .alinear-flex {
        /* padding-top: 8rem; */
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        align-items: center;
    }
    #violencia-pandemia img.puntostriangulos {
        position: absolute;
        right: -30px;
        top: -30px;
        width: 100px;
    }
    #violencia-pandemia .btn-posters{
        cursor: pointer;
    }
    #violencia-pandemia .div-info-posters{
        display: none;
    }
    #violencia-pandemia .bold{
        font-weight: 900;
    }
    #violencia-pandemia  p{
        color:#404041;
    }
    #violencia-pandemia  p span{
        
        font-weight: 900;
    }
    #violencia-pandemia  p.mayuscula{
        text-transform: uppercase;
    } 
    #violencia-pandemia  p span.violeta{
        color:#563878;
    }
    #violencia-pandemia div.video img {
        position: absolute;
        z-index: 999;
        cursor: pointer;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
    }
    #violencia-pandemia a.infografia-link{
        display: block;
        text-align: center;
    }
    #violencia-pandemia a.infografia-link img{
        display: inline;
        max-width:200px ;
    }
    .tit-world-mental{
        padding: 15px 15px 15px 25px;
        margin-top:10px;
        margin-left:30px;
        color: #fff;
        margin-top: 1rem;
        position: relative;
        display: inline-block;
        background: #ED344C;
        clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 100%);
    }
    #mental-health .megafono{    
        position: absolute;    
        left:-90px;
        top:15px;
        width: 150px;
        transform: rotate(-15deg);
        z-index: 90;
    }
    #mental-health .alinear-flex {
        /* padding-top: 8rem; */
        display: flex;
        flex-direction: column;
        justify-content:flex-start;
        align-items: center;
    }
    #mental-health img.puntostriangulos {
        position: absolute;
        right: -30px;
        top: -30px;
        width: 100px;
    }
    #mental-health .btn-posters{
        cursor: pointer;
    }
    #mental-health .div-info-posters{
        display: none;
    }
    #mental-health .bold{
        font-weight: 900;
    }
    
    .texto-right{
        text-align: right;
    }
    div.videos-home{
        position: relative;
    }
    div.videos-home p{
        color:#4d4d4d;
    }
    div.videos-home h5.azul{
        color:#41A6C3;
    }
    
    div.videos-home h5.verde{
        color:#22B19C;
    }
    
    div.videos-home h5.rojo{
        color:#ED344C ;
    }
   
    img.amigos{
        position: absolute;
        top:-100px;
        right:0px;
    }
    .galeria-home{
        position:relative;
        
    }
    
    .galeria-home img.lineascurvas{
        position: absolute;
        left:-20px;
        top:-40px;
        width: 200px;
    }
    .galeria-home img.puntostriangulos{
        position: absolute;
        right:-30px;
        top:-30px;
        width: 100px;
    }
    
    .galeria-home img.cerro{
        position: absolute;
        right:-50px;
        bottom:-10px;
        width: 150px;
    }
    .mas-galeria{
        text-align: center;
        
    }
    .mas-galeria a{
        display: block;
        width: 100%;
        background-color:#41a6c3 ;
        margin-top:15px;
        color:#fff;
        padding: 5px 0px;
    }
    .mas-galeria a:hover{
        opacity: 0.8;
    }
    .videos-home{
        position:relative;
        
    }
    .videos-home img.rectangulosverticales{
        position: absolute;
        left:-20px;
        top:40px;
        width: 80px;
    }
    .owl-next {
        right: 0px;
        left: inherit;
    }
    .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next {
        border-radius: 0px;
        border:0px solid white;
        color: #fff;
        background: #333;
        font-size: 18px;
        line-height: 80px;
        padding: 0px 15px;
        margin: 0px;
        margin-top: -60px;
        position: absolute;
        z-index: 45;
        top: 57%;
        -webkit-transition: .25s;
        -moz-transition: .25s;
        -o-transition: .25s;
        -ms-transition: .25s;
        transition: .25s;
        left: -5px;
        cursor: pointer;
        width:30px;
        opacity:0.5;
    }
    .owl-carousel .owl-nav button.owl-next {
        right: -10px;
        left: inherit;
        
    }
    .owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-next:hover{
        opacity:0.8;        
        border: yelow;
    }
    .owl-carousel .owl-nav button.owl-prev:active, .owl-carousel .owl-nav button.owl-next:active{
        opacity:0.5;
        border:solid 0px #fff;
    }
    .owl-carousel .owl-nav button.owl-prev:focus, .owl-carousel .owl-nav button.owl-next:focus{
        background-color: fff;
        border:solid 0px #fff;
    }
    .owl-dots{display: none;}
    .owl-prev i, .owl-next i {transform : scale(1,6); color: #fff;}
/* TERMINA HOME */
/* INICIA ABOUTUS */
    #aboutus{
        margin-top:9rem;
    }
    #aboutus .tith1{
       
        color:#ED344C;
    }
    #aboutus .tith2{
        font-size: 1.5rem;
        z-index: 900;
        margin-bottom: 2rem;
    }
    #aboutus p{
        text-align: justify;
    }
    #aboutus .div-rojo{
        padding:30px 30px;
        color:#fff;
        position: relative;
        background: #ED344C ;
        clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 100%);

    }
    #aboutus  img.logo-uni{
        position: absolute;
        top: 30px   ;
        left:-70px;
        z-index: 99;
        height: 130px;
    }
    #aboutus .div-azul{
        padding:50px 30px;
        color:#fff;
        margin-top: 1rem;
        position: relative;
        background: #41A6C3 ;
        clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 100%);

    }
   
    #aboutus  img.logo-uni-youth{
        position: absolute;
        top: 50px   ;
        left:-60px;
        z-index: 99;
        height: 110px;
    }
    #aboutus  img.trama{
        position: absolute;
        bottom: -50px   ;
        left:-60px;
        z-index: 9999;
    }
    #aboutus  img.protesta{
        position: absolute;
        bottom:-30px   ;
        right:-80px;
        z-index: 9999;
    }
/* TERMINA ABOUTUS */
/* INICIA GALERIA */
    #galeria{
        margin-top:9rem;
    }
    #galeria .tith1{
        color:#22B19C ;       
        text-align: right;
    }
    #galeria img{
        z-index: 10;
        position: relative;
        width: 100%;
        margin: auto;
        vertical-align:middle;
    }
    
    #galeria .cuadro-color{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    .img-galeria{
        display: block;
        margin:auto 0;
    }
    #galeria .sup-izq,#galeria  .sup-der,#galeria  .inf-izq,#galeria  .inf-der{
        
        position: absolute;
    }
  
    #galeria .sup-izq{
        width: 150px;
        top:-20px;
        left:-20px
    }
    #galeria .sup-der{
        width: 100px;
        top:-20px;
        right:-20px
    }
    #galeria .inf-izq{
        bottom:-20px;
        left:-20px;
        width: 80px;
    }
    #galeria .inf-der{
        bottom:-50px;
        right:-50px;
        width: 200px;
    }
 /* TERMINA GALERIA */
    
 /* INICIA WHOWEARE */
    #whoweare{
        margin-top:9rem;
    }
    #whoweare .tith1{
        color:#ED344C  ;  
        font-weight: 900;
    }
    
    #whoweare .tith2{
        color:#ED344C  ;  
    }
    #whoweare p{
        text-align: justify;
    }
    #whoweare .nombre,#whoweare .sindicato,#whoweare .pais {
        text-align: center;
        margin-bottom: 0px;
        padding-bottom: 0px;
        color:#333;
    }
    #whoweare .sindicato{
        font-size: 14px;
        color:#666;
        margin-bottom:20px;
        
    }
    #whoweare img.adelante{
        z-index: 999;
    }
    #whoweare .rojo{    
        background: url(../imagenes/caras/fondo.jpg) repeat-x bottom left;
        background-color: #ED344C ;
    }
    #whoweare .verde{    
        background: url(../imagenes/caras/fondo.jpg) repeat-x bottom left;
        background-color: #22B19C ;
    }
    #whoweare .azul{    
        background: url(../imagenes/caras/fondo.jpg) repeat-x bottom left;
        background-color: #41A6C3 ;
    }
    #whoweare .fondo-19{
        position: absolute;
        height: 100px;
        right: 300px;
        top:-50px;
    }
    #whoweare .fondo-20{
        position: absolute;
        height: 150px;
        left: -40px;
        top:300px;
    }
    
    #whoweare .fondo-21{
        position: absolute;
        height: 80px;
        right: -50px;
        top:350px;
    }
    #whoweare .fondo-11{
        position: absolute;
        height: 80px;
        right: 50px;
        top:-50px;
    }
    #whoweare .fondo-12{
        position: absolute;
        height: 80px;
        left: -40px;
        top:650px;
    }
    
    #whoweare .fondo-13{
        position: absolute;
        height: 90px;
        right: -40px;
        top:400px;
    }
    #whoweare .fondo-14{
        position: absolute;
        height: 150px;
        left: -40px;
        top:320px;
    }
    
    #whoweare .fondo-15{
        position: absolute;
        height: 80px;
        right: -50px;
        top:30px;
    }
    #whoweare .fondo-16{
        position: absolute;
        height: 90px;
        right: -40px;
        top:0px;
    }
    #whoweare .cont-btn-hist{
        position: relative;
        display: inline-block;
        text-align: center;
    }
    #whoweare .centrado{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size:19px;
        font-weight: 900;
        cursor: pointer;
    }
    #whoweare .cont-btn-hist:hover {
        filter: brightness(150%);
        -webkit-transition: opacity 500ms;
        -moz-transition: opacity 500ms;
        -o-transition: opacity 500ms;
        -ms-transition: opacity 500ms;
        transition: opacity 500ms;
    }
    #modal-hist .mod-nombre{
        font-weight: 900;
        margin-bottom: 0px;
        font-size: 19px;
    }

    #modal-hist  .mod-info{
        font-size: 17px;
        margin-bottom: 0px;
        font-weight: 900;
        margin-bottom: 15px;
        font-weight: 900;
    }
   
    #modal-hist  .mod-hist{
        font-size: 17px;
        text-align: justify;
    }
    #modal-hist  .tit-modal{
        text-align: center;
        margin: 20px 0px;
    }
    #modal-hist   .header-hist{
        position: relative;
    }
    #modal-hist    .header-hist h3{
        text-transform: uppercase;
        padding: 5px 35px 15px 30px;
        margin-top: 10px;
        margin-left: 30px;
        color: #fff;
        margin-top: 1rem;
        position: relative;
        display: inline-block;
        background: #ED344C;
        clip-path: polygon(3% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    #modal-hist    .modal-body{
        padding:0px 30px 0px 70px;
    }
    #modal-hist    .pop-megafono{
        position: absolute;
        max-width: 170px;
        right: -120px;
        z-index: 9999;
    }
    
    #modal-hist  .modal-opcion {
        margin-top: 50px;
    }
    #modal-hist  .modal-opcion  .modal-fondo{
        padding: 30px 10px 0px 10px;
        margin-bottom: 0px;
        color: #fff;
        margin-bottom: 30px;    
        clip-path: polygon(0% 0%, 100% 0%, 100% 98%, 0% 100%); 
    }
    #modal-hist  .modal-fondo-rojo{
        background-color: #ED344C;
    }
    #modal-hist  .modal-fondo-azul{
        background-color: #41A6C3;
    }
    #modal-hist  .modal-fondo-verde{
        background-color: #22B19C;
    }
    #modal-hist  .modal-opcion .marco-blanco{
        background-color: #fff;
    }
    
    #modal-hist  .modal-opcion  .img-principal{
        z-index: 9999;
    }
    #modal-hist  .modal-opcion .img-flecha-curva{
        position: absolute;
        z-index: 99;
        left:100px;
        top:10px;
        width: 100px;
    }
    #modal-hist  .modal-opcion .img-flecha-curva-2{
        position: absolute;
        z-index: 99;
        left:40px;
        top:260px;
        width: 150px;
        
    }    
    #modal-hist  .modal-opcion .img-pancarta{
        position: absolute;
        z-index: 99;
        right: -40px;
        bottom: -40px;
        width: 170px;
    }
    #modal-hist  .modal-opcion .texto-hist{
        text-align: justify;
        background-color:#fff; 
        color:#000; 
        padding:10px; 
        padding-left:20px; 
        clip-path: polygon(0% 0%, 100% 0%, 100% 98%, 0% 100%); font-size:17px
    }
    #modal-hist .pos1{
        position: absolute; left: -70px;  bottom:300px; width:100px
    }
    #modal-hist .pos2{
        position: absolute; right: -40px; top: -50px; z-index: 99; width:200px
    }
    #modal-hist .pos3{
        position: absolute; left: -70px;  bottom:0px;   z-index:99; width:200px
    }
    #modal-hist .pos4{
        position: absolute; left: -30px;  top:0px;   z-index:99; width:50px
    }
    #modal-hist .pos5{
        position: absolute; left: -70px;  top:-40px;  width:100px
    }
    #modal-hist .pos6{
        position: absolute; right: -20px; top: -50px; z-index: 99; width:150px
    }
    #modal-hist .pos7{
        position: absolute; left: -70px;  bottom:0px;   z-index:99; width:200px
    }
    #modal-hist .pos8{
        position: absolute; left: -70px;  bottom:400px; width:100px;
    }
    #modal-hist .pos9{
        position: absolute; left: -50px;  bottom:0px;   z-index:99; width:120px;
    }
    #modal-hist .pos10{
        position: absolute; left: 200px;  top:-40px;; width:100px;
    }
    #modal-hist .pos11{
        position: absolute; right: -40px; top: -70px; z-index: 99; width:200px;
    }
    @media (min-width: 992px){
        #modal-hist  .modal-lg, #modal-hist  .modal-xl {
            max-width: 950px;
        }
       
    }
    @media (max-width: 991px){        
        #modal-hist   .modal-body {
            padding: 0px 30px;
        }
    }

 /* TERMINA WHOWEARE */
  /* INICIA HISTORY */
    #history {
        margin-top: 9rem;
    }
    #history .btn-continentes{
        margin-bottom: 100px;
    }
    #history .cont-btn-hist{
        position: relative;
        display: inline-block;
        text-align: center;
    }
    #history .centrado{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        font-size:19px;
        font-weight: 900;
        cursor: pointer;
    }
    #history .btn-limpio:hover{
        filter: brightness(150%);
        -webkit-transition: opacity 500ms;
        -moz-transition: opacity 500ms;
        -o-transition: opacity 500ms;
        -ms-transition: opacity 500ms;
        transition: opacity 500ms;
    }
    #history .mod-nombre{
        font-weight: 900;
        margin-bottom: 0px;
        font-size: 20px;
    }

    #history  .mod-info{
        font-size: 17px;
        margin-bottom: 0px;
        font-weight: 900;
        margin-bottom: 15px;
        font-weight: 900;
    }

    #history  .mod-hist{
        font-size: 17px;
        text-align: justify;
    }
    #history  .tit-modal{
        text-align: center;
        margin: 20px 0px;
    }
    #history   .header-hist{
        position: relative;
        display: inline-block;
    }
    #history    .header-hist h3{
        text-transform: uppercase;
        padding: 5px 35px 15px 30px;
        margin-top: 10px;
        color: #fff;
        margin-top: 1rem;
        position: relative;
        display: inline-block;
        background: #ED344C;
        clip-path: polygon(3% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
    #history  .modal-body{
        padding:0px 30px 0px 70px;
    }
    #history .pop-megafono{
        position: absolute;
        max-width: 170px;
        right: -120px;
        z-index: 99;
    }

    #history  .modal-opcion {
        margin-top: 50px;
    }
    #history  .modal-opcion  .modal-fondo{
        padding: 30px 10px 0px 10px;
        margin-bottom: 0px;
        color: #fff;
        margin-bottom: 30px;    
        clip-path: polygon(0% 0%, 100% 0%, 100% 98%, 0% 100%); 
    }
    #history  .modal-fondo-rojo{
        background-color: #ED344C;
    }
    #history  .modal-fondo-azul{
        background-color: #41A6C3;
    }
    #history  .modal-fondo-verde{
        background-color: #22B19C;
    }
    #history  .modal-opcion .marco-blanco{
        background-color: #fff;
    }

    #history  .modal-opcion  .img-principal{
        z-index: 9999;
    }
    #history  .modal-opcion .img-flecha-curva{
        position: absolute;
        z-index: 99;
        left:100px;
        top:10px;
        width: 100px;
    }
    #history  .modal-opcion .img-flecha-curva-2{
        position: absolute;
        z-index: 99;
        left:40px;
        top:260px;
        width: 150px;
        
    }    
    #history  .modal-opcion .img-pancarta{
        position: absolute;
        z-index: 99;
        right: -40px;
        bottom: -40px;
        width: 170px;
    }
    #history  .modal-opcion .texto-hist{
        text-align: justify;
        background-color:#fff; 
        color:#000; 
        padding:10px; 
        padding-left:20px; 
        clip-path: polygon(0% 0%, 100% 0%, 100% 98%, 0% 100%); font-size:17px
    }
    #history .pos1{
        position: absolute; left: -70px;  bottom:300px; width:100px
    }
    #history .pos2{
        position: absolute; right: -40px; top: -50px; z-index: 99; width:200px
    }
    #history .pos3{
        position: absolute; left: -70px;  bottom:0px;   z-index:99; width:200px
    }
    #history .pos4{
        position: absolute; left: -30px;  top:0px;   z-index:99; width:50px
    }
    #history .pos5{
        position: absolute; left: -70px;  top:-40px;  width:100px
    }
    #history .pos6{
        position: absolute; right: -20px; top: -50px; z-index: 99; width:150px
    }
    #history .pos7{
        position: absolute; left: -70px;  bottom:0px;   z-index:99; width:200px
    }
    #history .pos8{
        position: absolute; left: -70px;  bottom:400px; width:100px;
    }
    #history .pos9{
        position: absolute; left: -50px;  bottom:0px;   z-index:99; width:120px;
    }
    #history .pos10{
        position: absolute; left: 200px;  top:-40px;; width:100px;
    }
    #history .pos11{
        position: absolute; right: -40px; top: -70px; z-index: 99; width:200px;
    }
    @media (min-width: 1200px){
        #history .height-ext{
            height: 1250px;
        }
    
    }
    
    @media (min-width: 992px){
        #history  .modal-lg, #history  .modal-xl {
            max-width: 950px;
        }
    
    }
    @media (max-width: 991px){        
        #modal-hist   .modal-body {
            padding: 0px 30px;
        }
        #history {
            margin-top: 5rem;
        }
    }
   /* TERMINA HISTORY */
/* INICIA WHAT WE DO */
    #whatwedo{
        margin-top:9rem;
    }
    #whatwedo .tith1{
        color:#ED344C  ;  
        font-weight: 900;
    }
    #whatwedo h2{
        display: inline-block;
        background:gray;
        padding:5px 15px ;
        color:#fff;
        margin-bottom: 20px;
        box-shadow: 30px 10px 0px #cbcccd;
        z-index: 999;
        
    }
    #whatwedo h2.rojo{
        background-color:#ED344C  ;
    }
    #whatwedo h2.verde{
        background-color:#22B19C  ;
    }
    #whatwedo h2.azul{
        background-color:#41A6C3   ;
    }
    #whatwedo div.info p{
        text-align: justify;
    }
    #whatwedo .fondo-19{
        height: 70px;
        position: absolute;
        left:-10px;
        top:-10px;
        z-index: -1;
    }
    #whatwedo .huellas{
        height: 50px;
        position: absolute;
        left:-10px;
        top:-20px;
        z-index: -1;
    }
    #whatwedo .triangulospuntos{
        height: 50px;
        position: absolute;
        left:150px;
        top:-30px;
        z-index: -1;
    }
    #whatwedo .olas{
        height: 50px;
        position: absolute;
        left:0px;
        top:-40px;
        z-index: -1;
    }
    #whatwedo img.fondo{
        max-width: 100%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: -1;
    }
    #whatwedo img.fondo-en{
        bottom: 5px;
    }
    #whatwedo img.fondo-es,#whatwedo img.fondo-fr{
        bottom: -20px;
    }

    #whatwedo .fondo-verde-leadership{
        
        background:  url(../imagenes/lineavertical.jpg) repeat-x bottom left,url(../imagenes/lineavertical.jpg) repeat-x top left;
        background-color: #22B19C;
    }
    #whatwedo .es-lg{
        display: none;   
       }
    #whatwedo .es-primero{
        display: flex;   
    }
    #whatwedo .ver-video-modal{
        cursor: pointer;
    }
    .read-more{
        display: inline;
        text-align: right;
        padding-right: 60px;
    }
    .read-more img{
        max-width: 100px;
        position:absolute;
        right:40px;
        top:-11px;
        z-index:-1
    }
    .read-more img:hover{
        opacity: 0.8;
    }
    .read-more a span{
        font-size:11px;
        color:#fff
    }
    .read-more a{        
        z-index:999
    }
   
    .text-right{
        text-align: right;
    }
    #whatwedo .centrar-solidarity{
        position: relative;
    }
    
    #whatwedo .alinear-flex{
        /*padding-top: 8rem;*/
        display: flex;
        flex-direction: column;
        justify-content:center;

    }
    #whatwedo .centrar-training{
        margin-top: 90px;
    }
    .international{
        position: relative;
    }
    #whatwedo .cont-international h2{
        background: none;
        box-shadow: none;
        padding: 0px;
    }
    #whatwedo .cont-international{
        padding: 30px 30px;
        color: #fff;
        position: relative;
        background: #41A6C3;
        clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
        padding-bottom: 25rem;
    }
    #whatwedo .cont-international-es{
        padding-bottom: 40em;
    }
    #whatwedo .international-abslute{
        position: absolute;
        top: 100px;
        left: 30px;
    }
    #whatwedo .col-international{
        display: flex;
        flex-direction: row;
        justify-content:flex-start

    }
    #whatwedo .poster-inter{
        display: flex;
        flex-direction: column;
    }
   
    #whatwedo .video-inter-2 img{
        margin-left: 22px;
        margin-bottom:22px
    }
    #whatwedo .primero-es{
        display: block;
    }

 /* TERMINA  WHAT WE DO */
 /* INICIA RESOURCES */
    #resource{
        margin-top:9rem;
    }
    #resource .tith1{
        color:#ED344C  ;  
        font-weight: 900;
        margin-bottom:20px;
    }
    #resource h2.azul {
        background-color: #41A6C3;
    }
    #resource h2.verde {
        background-color: #22B19C;
    }
    #resource h2.rojo {
        background-color: #ED344C;
    }
    #resource h2 {
        
        background: gray;
        padding: 5px 15px;
        color: #fff;
        margin-bottom: 20px;
        box-shadow: 30px 10px 0px #cbcccd;
        z-index: 999;
        margin-top:2rem;
    }
    #resource div.rojo,#resource div.azul,#resource div.verde {       
        text-align: center;
        margin-top:40px;
        padding:1rem;
    }
    #resource div.rojo{
        background: url(../imagenes/caras/fondo.jpg) repeat-x bottom left;
        background-color: #ED344C;
        
    }
    #resource div.azul {
        background: url(../imagenes/caras/fondo.jpg) repeat-x bottom left;
        background-color: #41A6C3;
    }
    #resource div.verde {
        background: url(../imagenes/caras/fondo.jpg) repeat-x bottom left;
        background-color: #22B19C;
    }
    #resource span.tit-resource{
        background-color: #fff;
        display: block;
        margin-top:20px;
        color:#333;
        text-align: center;
        font-size: 1rem;
        font-weight: 700;
    }
    #resource img.sombra-roja{
        box-shadow: 10px 10px 0px #ED344C;
    }
    
    #resource img.sombra-azul{
        box-shadow: 10px 10px 0px #41A6C3;
    }
    
    #resource img.sombra-verde{
        box-shadow: 10px 10px 0px #22B19C;
    }
    #resource img.sombra-gris{
        box-shadow: 10px 10px 0px #b8b8b8;
    }
    #resource .text-center{
        text-align: center;
    }
    #resource img.more-posters{
        max-width: 200px;
        display: inline;
    }
    #resource .more-posters{
        text-align: center;
        display: block;
        width: 100%;
        padding-top: 10px;
    }
    #resource .more-posters-img{
        display: none;
    }

/* TERMINA RESOURCES */
/* INICIA PRECARIOUS WORK */
    #precarious-work{
        margin-top:9rem;
    }
    #precarious-work .tith1{
        color:#ED344C  ;  
        font-weight: 900;
        margin-bottom:20px;
    }
    #precarious-work h2{
        text-transform: uppercase;
        width: 100%;
        display: block;
    }
    
    #precarious-work p{
        text-align: justify;
    }
    #precarious-work .div-azul {
        padding: 30px 30px;
        color: #fff;
        position: relative;
        background: #41A6C3;
        clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 100%);
        padding-bottom: 15rem;
    }
    #precarious-work  .div-rojo {
        padding: 50px 30px;
        color: #fff;
        margin-top: 1rem;
        position: relative;
        background: #ED344C;
        clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 100%);
    }
    #precarious-work .sup-der,#precarious-work .inf-izq,#precarious-work .inf-der,#precarious-work .centro{
        position: absolute;
        z-index: 99;
        width: 350px;
        height: 200px;
    }
    #precarious-work .centro{
        top:150px;
        right:40px;
        width: 450px;
        height: 250px;
    }
    #precarious-work .sup-der{
        top: 40px;
        right: 40px;
    }
    #precarious-work .inf-der{
        bottom: 0px;
        right: 40px;
    }
    #precarious-work .inf-izq{
        bottom: 0px;
        left: 330px;
    }
    #precarious-work a.link-recursos{
        display: block;
        text-align: right;
        margin-top: 3rem;
    }
    #precarious-work a.link-recursos img{
        max-width: 100px;
    }
    #precarious-work a.link-recursos img:hover{
        opacity: 0.8;
    }
    #precarious-work img.amigos-precarious{
        position: absolute;
        bottom:20px;
        left:20px;
    }
    @media only screen and (max-width: 767px) {
        .mt-5-991{
            padding-top: 3rem !important;
        }
    }
/* TERMINA PRECARIOUS WORK */
/* INICIA FOOTER */
    footer{
        margin-top: 80px;
        background-color: #4d4d4d !important;
        
    }
    img.logo-footer{
        position: absolute;
        top: -60px;
    }
    a.nav-footer {
        color: #fff !important;
        font-weight: 900;
        
    }
    .nav-footer {
        display: block;
        padding: 0.1rem 1rem;
    }

    div.redes-footer{
        margin-bottom:15px;
    }
    div.redes-footer a{
        margin:5px 5px;
    }
    div.redes-footer img{
        width: 50px;
        margin-bottom:15px
    }
    div.logo-uni{
        text-align:right;
        padding-top: 1rem;
    }
    div.logo-uni img{
        max-width: 100px;        
    }
    div.logo-uni img.app{
        max-width: 130px;
    }
    .contenido-footer{
        padding-top: 1rem;
    }
    .solo-lg{
        padding-top: 30px;
    }
 @media only screen and (min-width: 1199px) {    
    .footer-es-3,.footer-fr-3{
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .footer-es-5,.footer-fr-5{
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    
    
   
}
/* TERMINA FOOTER */
@media only screen and (max-width: 1199px) {
    
    /*home*/
    img.carteles-home1,img.carteles-home2{
        max-width: 300px;        
        right: 100px;
        top:20px
    }

    ul.redes {
        position: absolute;
        right: 0;
        bottom: -50px;
    }
    p.hashtag{
        -webkit-transform: rotate(-9deg); 
      -moz-transform: rotate(-9deg); 
      -ms-transform: rotate(-9deg); 
      -o-transform: rotate(-9deg); 
      transform: rotate(-9deg); 
    }
    #precarious-work .sup-der, #precarious-work .inf-der,#precarious-work .inf-izq,#precarious-work .centro{
        position: relative;
        width: 100%;
        height: 350px;
        top: 0;
        left: 0;
        right: 0px;
    }
    div.azul-responsive{
        background: #41A6C3;
        clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 100%);
        padding:1rem;
        padding-bottom: 5rem;
    }
  
    div.rojo-responsive {
        padding: 50px 30px;
        color: #fff;
        margin-top: 1rem;
        position: relative;
        background: #ED344C;
        clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 100%);
    }
    div.azul-responsive iframe{
        margin-bottom: 1rem;
    }
    #precarious-work .div-azul {
       
        padding-bottom: 2rem;
        
    }
    #whatwedo .fondo-verde-leadership{
        background-color: #fff;
    }
    #whatwedo .fondo-verde-leadership div{
    background-color: #22B19C;
    text-align: center;
    }

    #whatwedo img.fondo-en,#whatwedo img.fondo-es, #whatwedo img.fondo-fr{
        bottom:auto ;
    }
    #precarious-work img.amigos-precarious{
        display: none;
    }
    #whatwedo .international{
        background-color: #41A6C3;
    }
    #whatwedo .cont-international{
        padding-bottom: 0rem;
        position: relative;
        background-color: none;
    }
    
    #whatwedo .international-abslute{
        position: relative;
        top: 0;
        left: 0;
    }
    #whatwedo .primero-es{
        display: inline;
    }
    #whatwedo .video-inter-2{
        text-align: center;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: left;
    }
    #whatwedo  .poster-inter{
        align-content:center;
        padding:0px 30px ;
    }
    #whatwedo .en-lg{
     display: none;   
    }
    #whatwedo .es-primero{
        display: inline;   
    }
}
@media only screen and (max-width: 991px) {

     /* header */
        #menu .nav-item{
            margin-left:0px
        }
        a.navbar-brand img{
            max-width: 80px;
        }
        nav.img-nav {
            background-color: #ee344c !important;
        }
        nav.img-nav-responsive{
            background-color: #ee344c !important;
        } 
        ul.redes, .solo-lg{
            display: none;
        }
        img.logo-head{            
            top: -10px;
        }
        #menu{
            padding-left: 0px;
            padding-top:20px
        }
        quienes-somos
    /* footer */
        .nav-footer{
            display: inline;
        }
        .contenido-footer{
            text-align: center;
            padding-top: 2rem;
        }
        div.logo-uni{
            padding-top: 1rem;
        }
    /*home*/
        img.carteles-home1,img.carteles-home2{
            display: none;
        }
        div.logo-uni img{
            max-width: 80px;        
        }
        p.hashtag{
            -webkit-transform: rotate(-6deg); 
          -moz-transform: rotate(-6deg); 
          -ms-transform: rotate(-6deg); 
          -o-transform: rotate(-6deg); 
          transform: rotate(-6deg); 
        }
    /* WHAT WE DO*/
        #whatwedo .cont-img{
            text-align: center;
        }    
        #whatwedo img.fondo{
            max-width: 70%;
        }
       
    }       
@media (max-width: 767px){
    div.quienes-somos-texto{
      padding: 2rem 2rem 4rem 2rem;  
    }
    #whatwedo  .col-international{
        flex-wrap: wrap;
        
    }
    #whatwedo  .poster-inter{
        width: 100%;
        text-align: center;
    }
    #whatwedo  .poster-inter a {
        display: inline;
        margin-bottom: 20px;
    }
    #whatwedo .video-inter-2{
        justify-content: center;
    }
}
@media (min-width: 992px){
    .cont-caras {
        flex: 0 0 20%;
        max-width: 20%;
    }
    .footer-es-3,.footer-fr-3{
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .footer-es-5,.footer-fr-5{
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
}

@media only screen and (max-width: 605px) {
    .galeria-home img.puntostriangulos{
        right: 0px;
    }
    .galeria-home img.cerro{
        right:0px;
    }
    img.amigos{
        right: 20px;
        width: 200px;

    }
    img.logo-uni-home {
        position: absolute;
        bottom: 30px;
        left: 20px;
        width: 40px;
    }
    div.quienes-somos-texto {
        background-image: none;
        padding: 1rem 2rem 3rem 2rem;
    }
    
}