:root {
    --primary: #0071bc;
    --white: #fff;
    --black: #000;
    --text: #2e353e;
    --grey: #727c93;
    --background: #777;
    --h: #1f1e1c;
    --article: #B6D6EB;
    --backgroundHead: #00101a;
    --headSecondary: #daeaf5;
    --sectionExp: #ecf1f7;

    --modal-border-width: 1px;
    --modal-border-color: #dee2e6;
    --modal-border-color-translucent: rgba(0, 0, 0, 0.175);
    --modal-border-radius: 0.375rem;
    --modal-border-radius-sm: 0.25rem;
    --modal-border-radius-lg: 0.5rem;
    --modal-border-radius-xl: 1rem;
    --modal-border-radius-xxl: 2rem;
    --modal-border-radius-pill: 50rem;
    --modal-modal-zindex: 1055;
    --modal-modal-width: 75%;
    --modal-modal-padding: 1rem;
    --modal-modal-margin: 0.5rem;
    --modal-modal-color: ;
    --modal-modal-bg: var(--white);
    --modal-modal-border-color: var(--modal-border-color-translucent);
    --modal-modal-border-width: var(--modal-border-width);
    --modal-modal-border-radius: var(--modal-border-radius-lg);
    --modal-modal-inner-border-radius: calc(var(--modal-border-radius-lg) - (var(--modal-border-width)));
    --modal-modal-header-padding-x: 1rem;
    --modal-modal-header-padding-y: 1rem;
    --modal-modal-header-padding: 1rem 1rem;
    --modal-modal-header-border-color: var(--modal-border-color);
    --modal-modal-header-border-width: var(--modal-border-width);
    --modal-modal-title-line-height: 1.5;
}

*, ::after, ::before {
    box-sizing: border-box
}

@-ms-viewport {
    width: device-widthf
}

html {
    direction: ltr;
    overflow-x: hidden;
    box-shadow: none !important
}

body {
    margin: 0;
    font-family: Open Sans;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
    color: var(--background) !important;
    background-repeat: repeat;
    background-size: auto;
    background-attachment: scroll;
    background-position: initial;
    background-image: none;
    background-color:var(--white) !important
}

img {
    max-width: 100%;
    height: auto
}

h1, h2, h4 {
    margin-top: 0;
    margin-bottom: .5rem
}

h1 {
    font-weight: 200;
    letter-spacing: -1px;
    margin: 0;
    text-transform: uppercase;

    font-size: 2.6em;
    line-height: 44px;
    margin: 0 0 32px 0;

    font-family: Open Sans;
    font-weight: 800;
    font-size: 25px;
    line-height: 42px;
    letter-spacing: -1px;
    color: var(--h) !important
}

h2 {
    font-family: Open Sans;
    font-weight: 600;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: -1px;
    color: var(--text) !important
}

h4 {

    font-family: Open Sans;
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: 0;
    color: var(--h);
    font-weight: 600;

}

h4>a>i {
    color: var(--grey) !important
}

p {
    margin-top: 0;
    margin-bottom: 1rem
}

ul {
    margin-top: 0;
    margin-bottom: 10px
}



li {
    line-height: 24px
}

a {
    text-decoration: none;
    color: var(--grey)
}

a :hover{

    cursor: pointer;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}
.row > .col-md-12 {
    margin-top: 30px;
}

.col-lg-3, .col-lg-5, .col-lg-9, .col-md-12, .col-md-3, .col-md-4, .col-md-5, .col-md-7,
.col-xl-5 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px
}


.locale-switcher {
    text-align: right;
}

.locale-switcher > label > input {
    display: none;
}

.locale-switcher > label > input[type="radio"]:checked+span { 
    text-decoration: underline; 
}

.locale-switcher > label:hover {
    background: var(--background) !important;
    color: var(--backgroundHead) !important;
}
  
.locale-switcher > label  > img {
    width: 50px;
}

.pb-100 {
    padding-bottom: 100px;
}
 

.icon {
    margin-right: 20px;
    color: var(--primary) !important;
    font-size: 22px;
}

.icon > span {
        vertical-align: middle;
        font-size: 17px;
        color: var(--grey);
    
}


/* HEAD */
.headCss {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    background-color: var(--backgroundHead);
    margin-bottom: 59px !important;
}

.headCss>div>h1 {
    font-size: 60px;
    color: var(--primary) !important;
    font-weight: 400;
    font-style: normal
}

.headCss>div>h4 {
    margin-top: 60px;
}

.headCss>div>p>i {
    font-weight: 400;
    font-size: 20px;
    letter-spacing: 0;
    color: var(--grey) !important
}

.headCss>div>div>img {
    border: 10px solid var(--white) !important
}

.headCss>div>span {
    font-size: 21px;
    color: var(--white);
    letter-spacing: -0.5px;
}

/* EXP */

.experience-info {
    color: var(--white);
    background-color: var(--primary) !important
}
.experience-info>div {
    bottom: 13%;
    position: absolute;
}
.experience-info>div>span {
    opacity: .5;
    text-transform: uppercase;
    margin-right: 17px;
    font-size: 11px
}

.experience-info>span {
    opacity: .5;
    text-transform: uppercase;
    font-size: 11px
}

.experience-description>h4 {
    color: var(--text) !important;
    font-weight: 600
}

.timeline {
    width: 74%;
    margin: 50px 13% 0;
    position: relative;
    float: left;
    padding-bottom: 120px
}

.exp-timeline {
    width: calc(100% - 30px);
    margin: 0 0 0 30px;
    padding: 0
}

.exp-timeline .timeline-bar {
    position: absolute;
    width: 3px;
    left: -2.9%;
    z-index: 0

}


.timeline .timeline-box {
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .04);
    margin: 20px 3% 10px;
    padding: 10px;
    position: relative;
    width: 44%;
    float: left;
    z-index: 1;
    margin-bottom: 30px;

    border: 0 !important;
    margin: 15px 0 !important;
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: 0 12px 90px -10px rgba(171, 191, 216, .6) !important;
    
}


.exp-timeline .timeline-box.right {
    max-width: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.timeline .timeline-box.right:before {
    border-radius: 50%;
    content: "";
    display: block;
    height: 7px;
    margin-left: -8px;
    left: -6%;
    position: absolute;
    top: 32px;
    width: 8px;

    top: 50%;
    left: -2.5%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.timeline .timeline-box.right:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: -8px;
    content: "";
    display: block;
    height: 14px;
    position: absolute;
    top: 30px;
    width: 14px;
    z-index: 0;

    border: none;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -moz-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    -o-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg)
}

.experience-description, .experience-info {
    padding: 40px
}


.exp-timeline .timeline-box .experience-info p {
    text-transform: uppercase;
    font-size: 11px
}

.from, .to {
    display: inline-block;
    width: 50%;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600
}

.date {
    
    display: inline-block;
    text-transform: none;
    font-size: 16px;
    
}

.company {
    font-size: 18px;
    font-weight: 600
}

.company>span {
    display: block;
    opacity: .5;
    text-transform: uppercase;
    font-size: 11px
}

.exp-timeline .timeline-bar {
    background: var(--text) !important
    
}

.exp-timeline .timeline-box.right:before {
    background: var(--text) !important;
    box-shadow: 0 0 0 3px var(--sectionExp), 0 0 0 6px var(--text) !important;
}




.formacion {
    background-color:var(--white) !important;
    box-shadow: px px 3px px var(--black) !important;
    padding-bottom: 30px;
    padding-left: 40px;
    text-align: left;
}

.formacion>i {
    color: var(--primary) !important;
    font-size: 32px;
    display: inline-block;
}

.formacion>h2 {
    font-weight: bold;
}

.formacion>p {
    text-align: left;
    margin-bottom: 5px;
}

.formacion>span {
    color: var(--primary);
    font-weight: bold;
}


/* Slider */

.slick-slider .slick-dots li i {
    display: none
}

.slick-slider .slick-dots li {
    position: relative;
    width: 12px;
    height: 12px;
    margin: 5px 2px;
    background: 0 0 !important;
    border: 2px solid var(--text) !important;
    border-radius: 50%
}

.slick-slider .slick-dots li.slick-active,
.slick-slider .slick-dots li:hover {
    border-color: var(--text) !important;
    background-color: var(--text) !important
}

.slick-slide {
    float: left;
    height: auto;
    min-height: 1px;
    display: none;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0
}

.slick-initialized .slick-slide {
    display: block;
    outline: 0
}

.slick-dots {
    position: absolute;
    bottom: -45px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    width: 100%
}

.slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    padding: 0 2px;
    cursor: pointer
}

.slick-prev,
.slick-next {
    line-height: 0;
    padding: 0;
    border: none;
    outline: none
}

.slick-dots {
    bottom: 0;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%)
}
.slick-slider .slick-dots li {
    opacity: 1 !important
}

.slick-slider .slick-prev {
    width: auto;
    height: auto;
    left: 0;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, .3)
}

.slick-slider .slick-next {
    width: auto;
    height: auto;
    right: 0;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, .3)
}



.slick-slider ul.slick-dots {
    position: absolute !important;
    bottom: 10px !important
}


.btn-close {
    --modal-btn-close-bg: url("../img/x.svg");
    --modal-btn-close-opacity: 0.5;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: var(--modal-btn-close-color);
    background: transparent var(--modal-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: var(--modal-btn-close-opacity);
  }
  
  .btn-close:hover {
    opacity: var(--modal-btn-close-hover-opacity);
  }
  
  
  .modal {  
    position: fixed;
    z-index: var(--modal-modal-zindex);  
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
   
  }
  
  .modal-dialog {
    position: relative;
    width: auto;
    margin: var(--modal-modal-margin);
    pointer-events: none;
  }
  
  .modal.show .modal-dialog {
    transform: none;
  }
  
  
  
  .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--modal-modal-color);
    pointer-events: auto;
    background-color: var(--modal-modal-bg);
    background-clip: padding-box;
    border: var(--modal-modal-border-width) solid var(--modal-modal-border-color);
    border-radius: var(--modal-modal-border-radius);
    outline: 0;
  }
  
  .modal-backdrop {
    --modal-backdrop-zindex: 1050;
    --modal-backdrop-bg: #000;
    --modal-backdrop-opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--modal-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    background-color: var(--modal-backdrop-bg);
  }
  .modal-backdrop.fade {
    opacity: 0;
  }
  .modal-backdrop.show {
    opacity: var(--modal-backdrop-opacity);
  }
  
  .modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: var(--modal-modal-header-padding);
    border-bottom: var(--modal-modal-header-border-width) solid var(--modal-modal-header-border-color);
    border-top-left-radius: var(--modal-modal-inner-border-radius);
  }
  .modal-header .btn-close {
    padding: calc(var(--modal-modal-header-padding-y) * 0.5) calc(var(--modal-modal-header-padding-x) * 0.5);
    margin: calc(-0.5 * var(--modal-modal-header-padding-y)) calc(-0.5 * var(--modal-modal-header-padding-x)) calc(-0.5 * var(--modal-modal-header-padding-y)) auto;
  }
  
  .modal-title {
    margin-bottom: 0;
    line-height: var(--modal-modal-title-line-height);
  }
  
  .modal-body {
    position: relative;
    padding: var(--modal-modal-padding);
  }
  .modal-body > div {
      text-align: center;
  }
  
  .modal-body > div > img {
      width: 25%;
  }

  .modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--modal-modal-margin) * 2);
  }
  
.proyectos:hover {
    cursor: pointer;
}
[dir=rtl] .slick-next:before {
    display: none
}

[dir=rtl] .slick-prev i:before {
    content: "\e60d"
}

[dir=rtl] .slick-next i:before {
    content: "\e60c"
}


@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%)
    }

    50% {
        opacity: 0;
        -webkit-transform: translate(-100%)
    }

    51% {
        opacity: 1
    }
}

@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(100%)
    }

    50% {
        opacity: 0;
        -moz-transform: translate(-100%)
    }

    51% {
        opacity: 1
    }
}

@keyframes toRightFromLeft {
    49% {
        transform: translate(100%)
    }

    50% {
        opacity: 0;
        transform: translate(-100%)
    }

    51% {
        opacity: 1
    }
}