/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {

    /* Colors: */
    --sos-base-1134b7: #1134B7;
    --white: #FFFFFF;
    --sos-1e8bf0: #1E8BF0;
    --unnamed-color-2341c2: #2341C2;
    --unnamed-color-2838c3: #2838C3;
    --sos-6cceff: #6CCEFF;
    --sos-d4f5ff: #D4F5FF;
    --unnamed-color-2252bd: #2252BD;

    /* Font/text values */
    --unnamed-font-family-trebuchet-ms: Trebuchet MS;
    --unnamed-font-family-montserrat: Montserrat;
    --unnamed-font-family-merriweather: Merriweather;
    --unnamed-font-family-din: DIN;
    --unnamed-font-style-italic: Italic;
    --unnamed-font-style-regular: Regular;
    --unnamed-font-style-black: Black;
    --unnamed-font-style-bold: Bold;
    --unnamed-font-style-medium: Medium;
    --unnamed-font-size-16: 16px;
    --unnamed-font-size-20: 20px;
    --unnamed-font-size-21: 21px;
    --unnamed-font-size-24: 24px;
    --unnamed-font-size-32: 32px;
    --unnamed-font-size-44: 44px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-26: 26px;
    --unnamed-line-spacing-27: 27px;
    --unnamed-line-spacing-32: 32px;
    --unnamed-line-spacing-42: 42px;
    --unnamed-line-spacing-43: 43px;
    --unnamed-line-spacing-52: 52px;
    --unnamed-text-transform-uppercase: uppercase;
}


/* Character Styles */
.notas-de-michelle {
font-family: var(--unnamed-font-family-trebuchet-ms);
font-style: var(--unnamed-font-style-italic);
font-size: var(--unnamed-font-size-20);
line-height: var(--unnamed-line-spacing-27);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
}
.-16px-buttons {
font-family: var(--unnamed-font-family-montserrat);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-16);
line-height: var(--unnamed-line-spacing-26);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
text-transform: var(--unnamed-text-transform-uppercase);
}
.-h2-—-32pt {
font-family: var(--unnamed-font-family-merriweather);
font-style: var(--unnamed-font-style-black);
font-size: var(--unnamed-font-size-32);
line-height: var(--unnamed-line-spacing-42);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--unnamed-color-2838c3);
}
.-h2-—-32pt-white {
font-family: var(--unnamed-font-family-merriweather);
font-style: var(--unnamed-font-style-black);
font-size: var(--unnamed-font-size-32);
line-height: var(--unnamed-line-spacing-42);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
}
.-h1-—-44pt {
font-family: var(--unnamed-font-family-merriweather);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-44);
line-height: var(--unnamed-line-spacing-52);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--white);
}

.-h1-—-44pt-blue {
font-family: var(--unnamed-font-family-merriweather);
font-style: var(--unnamed-font-style-regular);
font-size: var(--unnamed-font-size-44);
line-height: var(--unnamed-line-spacing-52);
letter-spacing: var(--unnamed-character-spacing-0);
color: var(--sos-base-1134b7);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
 .nav-menu, .nav-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu > ul > li {
    position: relative;
    white-space: nowrap;
    float: left;
}

.nav-menu a {
    display: block;
    position: relative;
    padding: 8px 0 12px 25px;
    transition: 0.3s;
    font: Medium 15px/22px var(--unnamed-font-family-din);
    color: var(--white);
    text-align: right;
    letter-spacing: -0.1px;
    opacity: 1;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
    color: #3498db;
    text-decoration: none;
}


/*--------------------------------------------------------------
# Intro
--------------------------------------------------------------*/

#join-us-hero-section {
    position: relative;
    margin-top: 65px;
    left: 0px;
    width: 100%;
    height: 0;
    background: transparent url('../img/join_us_1.jpg') 0% 0% no-repeat;
    padding: 0%;
    background-size: 100% 100%;
    padding-top: 67%;
}

.join-us-hero {
    position: absolute;
    height: 100%;
    width: 100%; 
    margin-left: 0%;
    margin-right:0%;
    top:0; bottom:0; left:0; right:0;
    background-color: rgba(17, 52, 183, 0.8);
}


.hero-text-align {
    padding-left: 5%;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: white;
}

.hero-town-align {
    padding-left: 7%;
    position: absolute;
    top: 95%;
    -ms-transform: translateY(-95%);
    transform: translateY(-95%);
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-regular);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
}


.normal-text{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
}

/*--------------------------------------------------------------
# Our Team
--------------------------------------------------------------*/
#our-team-section {
    position: relative;
    padding: 30px 0px 30px 0px;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(1deg, #1a0f53 0%, #1a0f53 3%, #1d1766 14%, #272f9c 54%, #2d3ebe 84%, #3044cb 100%);
}

.our-team-lines {
    position: absolute;
    width: 180%;
    margin-left: 0%;
    margin-right:0%;
    top:-150px;
    right:-280px;
    filter: invert(100%) opacity(15%);
}

.our-team-akcelita {
    position: absolute;
    width: 70%;
    margin-left: 0%;
    margin-right:0%;
    bottom:0;
    right:0;
}

.our-team-text{
    margin: 80px;
    padding: 40px;
    background-color: #2a2f96;
    opacity: 0.63;
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-21);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
}


/*--------------------------------------------------------------
# People
--------------------------------------------------------------*/
#people-section {
    position: relative;
    padding: 60px 0px 50px 0px;
    width: 100%;
    height: 100%;
    background-color: #1134b7;
}

.people-text{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-21);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
    text-align: center;
}

.people-blocks{
    margin: 2%;
}

.people-blocks-img{
    width: 220px;
    height: 220px;
    border-radius: 50%;
}

.people-blocks-div{
    margin-top: 15px;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 1px solid white;
}

.people-blocks-name{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
}

.people-blocks-position{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-21);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: #6cceff;
}

.people-blocks-town{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: #6cceff;
}

.people-blocks-info{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-regular);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
}


/*--------------------------------------------------------------
# Join Us
--------------------------------------------------------------*/
#join-us-section {
    position: relative;
    padding: 80px 0px 80px 0px;
    width: 100%;
    height: 100%;
    background-color: #1e8bf0;
}

.jobs-header{
    margin: 2%;
    padding: 15px;
    border: 1px solid white;
    border-radius: 5px;
}

.jobs-blocks{
    margin: 2%;
    padding: 15px;
    background-color: #d4f5ff;
    border-radius: 5px;
}

.jobs-blocks-title{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-32);
    line-height: var(--unnamed-line-spacing-42);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--white);
}

.jobs-blocks-date{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-26);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: #1e8bf0;
}

.jobs-blocks-line{
    border-bottom: 1px solid #1e8bf0;
    width: 15%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: -15px;
}

.jobs-blocks-position{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-24);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: #1134b7;
}

.jobs-blocks-town{
    font-family: var(--unnamed-font-family-din);
    font-style: var(--unnamed-font-style-medium);
    font-size: var(--unnamed-font-size-21);
    line-height: var(--unnamed-line-spacing-32);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: #1e8bf0;
}

.jobs-blocks-arrow{
    color: #1134b7;
    text-align: right;
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

footer.bg-dark a {
  color: #fff;
}

.footer-1 .logo {
  max-height: 30px;
}

.footer-1 .sub {
  opacity: .5;
}

footer.bg-dark p,
footer.bg-dark span,
footer.bg-dark li {
  color: #fefefe;
}

.copyright-info {
    text-align: right;
    float: right;
    margin-top:0;
    padding-top: 6em;
    padding-bottom: 15px;
}

/*--------------------------------------------------------------
# Adjusting phone screen
--------------------------------------------------------------*/

/*Extra small Screens*/
@media only screen and (max-width: 575px) {
    .our-team-lines {
        top:-30px;
        right:-240px;
    }

    .homepage-hero-text{
        font-size: var(--unnamed-font-size-20);
    }

    .hero-town-align {
        font-size: 12px;
    }

    .our-team-akcelita {
        width: 95%;
    }

    .our-team-text{
        margin: 40px;
        padding: 20px;
    }

    .people-text{
        margin:0px 10px 0px 10px;
    }

    .people-blocks{
        margin-left: 8%;
        margin-right: 8%;
    }

    .people-blocks-img{
        width: 180px;
        height: 180px;
    }

    .jobs-header{
        margin-left: 8%;
        margin-right: 8%;
        border: none;
    }

    .jobs-blocks{
        margin-left: 8%;
        margin-right: 8%;
    }
}

/*Small Screens*/
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .our-team-lines {
        top:-90px;
    }

    .our-team-akcelita {
        width: 85%;
    }
}

/*Extra small and Small Screens*/
@media only screen and (max-width: 767px) {
    .-h1-—-44pt {
        font-size: var(--unnamed-font-size-32);
    }
    .-h2-—-32pt-white {
        font-size: var(--unnamed-font-size-24);
    }
}

/*Medium Screens*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .our-team-akcelita {
        width: 80%;
    }
    .people-blocks-img{
        width: 200px;
        height: 200px;
    }
}

/*Up to Medium Screens*/
@media only screen and (max-width: 991px) {
    
}

/*Large and Extra Large Screens*/
@media only screen and (min-width: 992px) {
    
}