@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/open-sans-400-normal.eot);
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/open-sans-400-normal.woff2) format('woff2'), url(../fonts/open-sans-400-normal.woff) format('woff'), url(../fonts/open-sans-400-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/open-sans-600-normal.eot);
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../fonts/open-sans-600-normal.woff2) format('woff2'), url(../fonts/open-sans-600-normal.woff) format('woff'), url(../fonts/open-sans-600-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Montserrat';
    font-display: swap;
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/montserrat-100-normal.eot);
    src: local('Montserrat Thin'), local('Montserrat-Thin'), url(../fonts/montserrat-100-normal.woff2) format('woff2'), url(../fonts/montserrat-100-normal.woff) format('woff'), url(../fonts/montserrat-100-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Montserrat';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/montserrat-300-normal.eot);
    src: local('Montserrat Light'), local('Montserrat-Light'), url(../fonts/montserrat-300-normal.woff2) format('woff2'), url(../fonts/montserrat-300-normal.woff) format('woff'), url(../fonts/montserrat-300-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Montserrat';
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/montserrat-600-normal.eot);
    src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'), url(../fonts/montserrat-600-normal.woff2) format('woff2'), url(../fonts/montserrat-600-normal.woff) format('woff'), url(../fonts/montserrat-600-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Montserrat';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/montserrat-700-normal.eot);
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(../fonts/montserrat-700-normal.woff2) format('woff2'), url(../fonts/montserrat-700-normal.woff) format('woff'), url(../fonts/montserrat-700-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 100;
    src: url(../fonts/raleway-100-normal.eot);
    src: local('Raleway Thin'), local('Raleway-Thin'), url(../fonts/raleway-100-normal.woff2) format('woff2'), url(../fonts/raleway-100-normal.woff) format('woff'), url(../fonts/raleway-100-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/raleway-200-normal.eot);
    src: local('Raleway ExtraLight'), local('Raleway-ExtraLight'), url(../fonts/raleway-200-normal.woff2) format('woff2'), url(../fonts/raleway-200-normal.woff) format('woff'), url(../fonts/raleway-200-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/raleway-300-normal.eot);
    src: local('Raleway Light'), local('Raleway-Light'), url(../fonts/raleway-300-normal.woff2) format('woff2'), url(../fonts/raleway-300-normal.woff) format('woff'), url(../fonts/raleway-300-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/raleway-400-normal.eot);
    src: local('Raleway'), local('Raleway-Regular'), url(../fonts/raleway-400-normal.woff2) format('woff2'), url(../fonts/raleway-400-normal.woff) format('woff'), url(../fonts/raleway-400-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/raleway-500-normal.eot);
    src: local('Raleway Medium'), local('Raleway-Medium'), url(../fonts/raleway-500-normal.woff2) format('woff2'), url(../fonts/raleway-500-normal.woff) format('woff'), url(../fonts/raleway-500-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url(../fonts/raleway-600-normal.eot);
    src: local('Raleway SemiBold'), local('Raleway-SemiBold'), url(../fonts/raleway-600-normal.woff2) format('woff2'), url(../fonts/raleway-600-normal.woff) format('woff'), url(../fonts/raleway-600-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/raleway-700-normal.eot);
    src: local('Raleway Bold'), local('Raleway-Bold'), url(../fonts/raleway-700-normal.woff2) format('woff2'), url(../fonts/raleway-700-normal.woff) format('woff'), url(../fonts/raleway-700-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/raleway-800-normal.eot);
    src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url(../fonts/raleway-800-normal.woff2) format('woff2'), url(../fonts/raleway-800-normal.woff) format('woff'), url(../fonts/raleway-800-normal.ttf) format('truetype')
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/raleway-900-normal.eot);
    src: local('Raleway Black'), local('Raleway-Black'), url(../fonts/raleway-900-normal.woff2) format('woff2'), url(../fonts/raleway-900-normal.woff) format('woff'), url(../fonts/raleway-900-normal.ttf) format('truetype')
}

/*
@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/ebrima.ttf);
}

@font-face {
    font-family: 'Raleway';
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/ebrimabd.ttf);
}
*/

/**
 * Animations
 */

 .fromTopIn
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: translate(0,0);
     opacity: 1.0;
 }
 
 .fromTopOut
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: translate(0,-30px);
     opacity: 0.0;
 }
 
 .fromBottomIn
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: translate(0,0);
     opacity: 1.0;
 }
 
 .fromBottomOut
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: translate(0,30px);
     opacity: 0.0;
 }
 
 .fromLeftIn
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: translate(0,0);
     opacity: 1.0;
 }
 
 .fromLeftOut
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: translate(-30px,0);
     opacity: 0.0;
 }
 
 .fromRightIn
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: translate(0,0);
     opacity: 1.0;
 }
 
 .fromRightOut
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: translate(30px, 0);
     opacity: 0.0;
 }
 
 .scaleUpIn
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: scale(1.0,1.0);
     opacity: 1.0;
 }
 
 .scaleUpOut
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: scale(1.3,1.3);
     opacity: 0.0;
 }
 
 .scaleDownIn
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: scale(1.0,1.0);
     opacity: 1.0;
 }
 
 .scaleDownOut
 {
     transition: transform 1.0s ease, opacity 1.0s ease;
     
     transform: scale(0.7,0.7);
     opacity: 0.0;
 }

* {
    padding: 0;
    margin: 0;
}
body {
    width: 100vw;
    overflow-x: hidden;
}
@media (max-width: 960px) {
    body {
        font-size: calc(100vw * 16 / 700);
        line-height: calc(100vw * 26 / 700);
    }
}
.header {
    width: 100vw;
    height: 5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
    margin-bottom: auto;
    position: fixed;
    z-index: 10;
    padding-left: 3vw;
    background: #FFD700;
}
.header .logo {
    height: 4.5vw;
}

.header .logoname {
    height: 50%;
    margin-left: 1vw;
}

.header .menu.desktop {
    width: 100vw;
    margin-right: 5.5vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    right: 0;
}

.header .menu.mobile {
    width: 100vw;
    margin-right: 5.5vw;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    right: 0;
}

.header .item {
    color: black;
    margin-left: 1vw;
    margin-right: 1vw;
    text-decoration: none;
    cursor: pointer;
}
body.dark .header .item {
    color: black;
    font-family: Raleway;
    font-weight: 700;
    font-size: 1.25vw;
    line-height: 1vw;
    text-align: center;
}
body.dark .header a.item.selectedItem {
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}
  
  /* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}
  
  /* Dropdown Content (Hidden by Default) */
.dropdown-content, .dropdown-content-mobile, .dropdown-content-mobile-service {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
  
  /* Links inside the dropdown */
.dropdown-content a, .dropdown-content-mobile a, .dropdown-content-mobile-service a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-family: Raleway;
    font-weight: 600;
    font-size: 1.1vw;
    line-height: 1vw;
}
  
/* Change color of dropdown links on hover */
.dropdown-content a:hover, .dropdown-content-mobile a:hover, .dropdown-content-mobile-service a:hover {}
  
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    margin-top: 1vw;
    display:block;
}


.page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#titleSection {
    height: 20vh;
    width: 85vw;
    display: flex;
    margin: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

#titleSection.center {
    align-items: center;
    margin-bottom: 2vw;
}

h1 {
    font-family: Raleway;
    font-weight: 700;
    font-size: 3vw;
    line-height: 2.75vw;
    text-align: center;
    color: black;
    margin-bottom: 2.5%;
}

.text_presentation_panel {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100vw;
}

.text_presentation_column {
    width: 40vw;
}

.text_presentation_icon {
    height: 5vw;
    margin: 0.1vw;
    margin-left: 0;
    /*filter: brightness(0);*/
    padding-left: 17vw;
    padding-right: 17vw;
}

.text_presentation_column .text_presentation_icon.space {
    margin-top: 3vw;
}

.text_presentation_image {
    max-width: 40vw;
    max-height: 40vw;
    margin: auto;
}

.text_presentation_image.agile_hr1 {
    margin-top: 0vw;
    margin-bottom: -1vw;
    margin-top: 2vw;
}

.text_presentation_image.agile_hr2 {
    margin-top: 1vw;
    margin-left: 1.25vw;
    margin-bottom: -1vw;
    margin-top: 2vw;
}

.text_presentation_title {
    font-family: Raleway;
    font-weight: 700;
    font-size: 1.4vw;
    line-height: 1.5vw;
    width: 40vw;
    padding-top: 2vw;
    padding-left: 3.5%;
    padding-right: 3.5%;
}
.text_presentation_title.design_thinking {
    padding-top: 4vw;
}

.text_presentation_title_small {
    font-family: Raleway;
    font-weight: 700;
    font-size: 1.2vw;
    line-height: 1.2vw;
    width: 40vw;
    padding-top: 1.5vw;
    padding-left: 3.5%;
    padding-right: 3.5%;
}

.text_presentation_title_center {
    font-family: Raleway;
    font-weight: 700;
    font-size: 3vw;
    line-height: 3vw;
    padding-top: 2vw;
    padding-left: 3.5%;
    padding-right: 3.5%;
}

.text_presentation_subtitle_center {
    font-family: Raleway;
    font-weight: 700;
    font-size: 1.4vw;
    line-height: 1.5vw;
    padding-top: 2vw;
    padding-left: 3.5%;
    padding-right: 3.5%;
    margin-left: 2vw;
    margin-right: 0vw;
    text-align: center;
}

.text_presentation_title_center_small {
    font-family: Raleway;
    font-weight: 700;
    font-size: 1.4vw;
    line-height: 1.5vw;
    padding-top: 2vw;
    padding-left: 3.5%;
    padding-right: 3.5%;
}

.text_presentation {
    font-family: Raleway;
    font-weight: 500;
    font-size: 1vw;
    line-height: 1.75vw;
    width: 40vw;
    padding-top: 2.5vh;
    padding-left: 3.5%;
    padding-right: 3.5%;
}

.text_presentation.long {
    width: 89vw;
}

.text_presentation.long_ul {
    width: 85vw;
    padding-left: 1.5vw;
}

.text_presentation.longwithmargin {
    width: 83.5vw;
}

.text_presentation.semilong {
    width: 60vw;
    font-size: 1.75vw;
    line-height: 2.25vw;
    margin-top: -2vw;
}

.text_presentation.short {
    width: 30vw;
}

.text_destacado {
    font-family: Raleway;
    font-weight: 700;
    font-size: 2.5vw;
    line-height: 1.75vw;
    width: 75vw;
    padding-top: 5vh;
}

.invisible {
    transition: opacity 0.5s ease;
    opacity: 0.0;
}
  
.visible {
    transition: opacity 0.5s ease;
    opacity: 1.0;
}

.whiteGradient {
    width: 100vw;
    height: 40vh;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); /* Standard syntax (must be last) */
}

.servicePanel {
    margin-top: 10vh;
    padding-top: 2.5vw;
    width: 100vw;
    margin: auto;
}

.servicePanelTitle {
    font-family: Raleway;
    font-weight: 700;
    font-size: 3vw;
    line-height: 3vw;
    padding-top: 3vw;
    padding-left: 3.5%;
    padding-right: 3.5%;
    text-align: center;
}

.servicePanel .services {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
    cursor: pointer;
    width: 100vw;
    margin: auto;
}

.servicePanel .services .service {
    width: 15vw;
    height: 15vw;
    background-size: contain;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-bottom: 2vw;
    padding-bottom: 2vw;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.servicePanel .services .service .overlay {
    width: 100%;
    height: 113%;
    position: absolute;
    bottom: 0vw;
    background-color: #00000044;
}

.index .servicePanel .services .service .overlay {
    width: 25vw;
    height: 29vw;
}

.servicePanel .services .service .text {
    width: 15vw;
    height: 19vw;
    font-family: Raleway;
    font-weight: 700;
    font-size: 1.25vw;
    line-height: 1.5vw;
    text-align: justify;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.servicePanel .services .service.digital_transformation {
    background: url(../images/digital_hr_transformation_1.jpg) no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}

.servicePanel .services .service.people_analytics {
    background: url(../images/people_analytics_2.jpg) no-repeat;
    background-size: cover;
    background-position-x: left;
    background-position-y: center;
}

.servicePanel .services .service.agile_hr {
    background: url(../images/agile_hr_1.jpg) no-repeat;
    background-size: cover;
    background-position-x: right;
    background-position-y: center;
}

.servicePanel .services .service.practicas_actividades_in_house {
    background: url(../images/practicas_actividades_in_house.jpg) no-repeat;
    background-size: cover;
    background-position-y: center;
}

.servicePanel .services .service.diversity_inclusion {
    background: url(../images/diversity_inclusion.jpg) no-repeat;
    background-size: cover;
    background-position-y: center;
}

.servicePanel .services .service.recruitment {
    background: url(../images/coaching.jpg) no-repeat;
    background-size: cover;
    background-position-x: center;
    background-position-y: center;
}

.text_presentation.service {
    margin-top: 1vw;
}

.diagram {
    margin: auto;
    width: 35vw;
}

.diagram.design_thinking {
    margin: auto;
    width: 25vw;
    padding-left: 7.5vw;
    padding-right: 7.5vw;
    margin-top: 4vw;
}

.diagram.hrm {
    margin-top: 0.5vw;
    width: 40vw;
    margin-bottom: 1vw;
}

.diagram.recruitment {
    margin-top: 5vw;
    width: 40vw;
}

.diagram.recruitment2 {
    width: 30vw;
    margin-left: 5vw;
}

.divider {
    width: 100vw;
    height: 2px;
    background: #017bbc;
    margin-top: 4vw;
}

.footer {
    width: 99vw;
    height: 8vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
    margin-bottom: auto;
    padding-left: 5vw;
    background: #FFD700;
    overflow: hidden;
    margin-top: 1vw;
    position: relative;
}

.footer .title img {
    height: 3vw;
    margin-left: 1vw;
}

.footer .socialBar {
    position: absolute;
    bottom: 0;
    width: 100vw;
    height: 8vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.footer .socialBar .social {
    margin: auto;
}

.footer .facebook, .footer .linkedin, .footer .whatsapp, .footer .email {
    height: 3vw;
    text-decoration: none;
    cursor: pointer;
    text-decoration: none;
    color: black;
    margin-left: 2vw;
    margin-right: 2vw;
}

.footer .facebook img, .footer .linkedin img, .footer .whatsapp img, .footer .email img {
    height: 3vw;
}

.blueText {
    background: #017bbc;
    color: white;
}

@media (max-width: 960px) {
    h1 {
        font-size: 6vw;
        line-height: 7vw;
    }

    .text_presentation_column {
        width: 90vw;
    }

    .text_presentation_title_small {
        font-size: 3.4vw;
        line-height: 3.4vw;
        width: 90vw;
        text-align: center;
    }

    .text_presentation_title {
        font-size: 4vw;
        line-height: 4vw;
        width: 80vw;
        padding-top: 2vw;
        padding-left: 3.5%;
        padding-right: 3.5%;
        text-align: center;
    }
    .text_presentation_title_center {
        font-size: 7vw;
        line-height: 8vw;
    }

    .text_presentation_subtitle_center {
        font-size: 4vw;
        line-height: 4vw;
    }

    .text_presentation_title_center_small {
        font-size: 4vw;
        line-height: 4vw;
    }

    .text_presentation_icon {
        height: 12vw;
        margin: 0.1vw;
        margin-left: 0;
        padding-left: 38vw;
        padding-right: 38vw;
    }

    .text_presentation_image {
        max-width: 85vw;
        max-height: 85vw;
        margin: auto;
    }

    .text_presentation_image.agile_hr1 {
        margin-top: 0vw;
        margin-bottom: -2vw;
    }

    .text_presentation_image.agile_hr2 {
        margin-top: 2vw;
        margin-left: 2.5vw;
        margin-bottom: -2vw;
    }


    .text_presentation {
        font-size: 3.5vw;
        line-height: 4.5vw;
        width: 90vw;
        padding-right: 0;
        padding-left: 0;
    }

    .servicePanelTitle {
        font-size: 6vw;
        line-height: 6vw;
        padding-top: 6vw;
        padding-bottom: 5vw;
    }

    .servicePanel .services .service {
        width: 100vw;
        height: 100vw;
    }

    .index .servicePanel .services .service .overlay {
        width: 100vw;
        height: 100vw;
    }
    
    .servicePanel .services .service .text {
        width: 100vw;
        height: 110vw;
        font-size: 5vw;
        line-height: 6vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .footer {
        width: 100vw;
        height: 25vw;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-top: auto;
        margin-bottom: auto;
        padding-left: 5vw;
        background: #FFD700;
        overflow: hidden;
        margin-top: 1vw;
    }

    .footer .title img {
        height: 7vw;
        margin-left: 1vw;
    }

    .footer .linkedin {
        height: 3vw;
        text-decoration: none;
        margin-left: 10vw;
    }

    .footer .linkedin img {
        height: 3vw;
        margin-left: 2vw;
    }

    .footer .facebook {
        height: 3vw;
        text-decoration: none;
        margin-left: 10vw;
    }

    .footer .facebook img {
        height: 3vw;
        margin-left: 2vw;
    }

    .diagram {
        margin: auto;
        width: 75vw;
    }
    
    .diagram.design_thinking {
        margin: auto;
        width: 75vw;
        padding-left: 7.5vw;
        padding-right: 7.5vw;
        margin-top: 4vw;
    }
    
    .diagram.hrm {
        margin-top: 0.5vw;
        width: 90vw;
        margin-bottom: -1vw;
    }
    
    .diagram.recruitment {
        margin-top: 3vw;
        width: 90vw;
    }
    
    .diagram.recruitment2 {
        width: 80vw;
        margin-left: 5vw;
    }
    
    .header {
        width: 100vw;
        height: 15vw;
        padding-left: 6vw;
    }
    .header .logo {
        height: 12vw;
    }
    .header .menu .homelink {
        text-decoration: none;
        cursor: pointer;
    }
    .header .menu.desktop {
        width: 94vw;
        margin-right: 5.5vw;
        display: none;
    }
    .header .menu.mobile {
        display: flex;
    }
    body.dark .header .item {
        font-size: 2.5vw;
        line-height: 2vw;
    }

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-family: Raleway;
        font-weight: 600;
        font-size: 3vw;
        line-height: 4vw;
    }
    
    /* Change color of dropdown links on hover */
    .dropdown-content a:hover {}

    .header .menu.desktop {
        display: none;
    }
    .header .menu.mobile {
        width: 94vw;
        margin-right: 9.5vw;
        display: flex;
    }
    
    .toggle-menu-button .toggle-menu-button-icon {
        width: 22px;
        height: 17px;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
        position: relative;
        top: -2px;
    }

    header-color-white *, .header.header-color-white .navbar .navbar-nav>li>a {
        color: #fff;
    }

    .toggle-menu-button .toggle-menu-button-icon span:nth-child(1), .toggle-menu-button .toggle-menu-button-icon span:nth-child(2) {
        top: 0;
    }
    
    .toggle-menu-button .toggle-menu-button-icon span:nth-child(even) {
        left: 50%;
        border-radius: 0 9px 9px 0;
    }

    .toggle-menu-button .toggle-menu-button-icon span:nth-child(odd) {
        left: 0;
        border-radius: 9px 0 0 9px;
    }

    .toggle-menu-button .toggle-menu-button-icon span {
        display: block;
        position: absolute;
        height: 2px;
        width: 50%;
        background: #eee;
        opacity: 1;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    body.dark .header .menu.mobile a.item {
        font-size: 10vw;
    }

      /* Dropdown Content (Hidden by Default) */
    .dropdown-content-mobile, .dropdown-content-mobile-service {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }
    
    /* Links inside the dropdown */
    .dropdown-content-mobile a, .dropdown-content-mobile-service a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        font-family: Raleway;
        font-weight: 600;
        font-size: 3vw;
        line-height: 4vw;
    }
    
    /* Change color of dropdown links on hover */
    .dropdown-content-mobile a:hover, .dropdown-content-mobile-service a:hover {}
    
    .show {
        margin-top: 1vw;
        display:block;
        left: -30vw;
    }
    #dropdownServiceMobile.show {
        left: -58vw; 
        top: -1vw;
    }
    .footer .socialBar {
        height: 25vw;
    }
    .footer .socialBar .social {
        margin: auto;
        margin-left: 10vw;
    }
    .footer .title img {
        height: 5vw;
        margin-left: 1vw;
    }
    .footer .facebook {
        height: 6vw;
        text-decoration: none;
        margin-left: 20vw;
    }
    .footer .facebook img {
        height: 6vw;
        margin-left: 4vw;
    }
    .footer .linkedin, .footer .whatsapp, .footer .email {
        height: 6vw;
        margin-left: 2vw;
        margin-right: 2vw;
    }
    
    .footer .linkedin img, .footer .whatsapp img, .footer .email img {
        height: 6vw;
    }

    .text_presentation.longwithmargin {
        width: 89vw;
    }
    
    .text_presentation.long_ul {
        width: 90vw;
        padding-left: 0;
    }
    
}
@media (max-width: 960px) and (orientation: landscape) {
    .header {
        height: 15vh;
    }
    .header .logo {
        height: 12vh;
    }
    header.light .dropdown {
        margin-top: -10vh;
    }
    header .dropdown {
        margin-top: 0vh;
    }
    .show {
        margin-top: 1vw;
        display:block;
        left: -30vh;
    }
    #dropdownServiceMobile.show {
        left: -5hvw; 
        top: -1vh;
    }
    .dropdown-content-mobile, .dropdown-content-mobile-service {
        min-width: 170px;
    }
}