/*
NON-MINIFIED CSS FILE FOR WWW.ADECCO.SE 

THIS FILE IS ONLY FOR CRITICAL CSS! (ABOVE THE FOLD)

MOBILE STYLING FIRST! 
BIGGER SCREENS IN MEDIA QUERIES!

CONTACT MHER.AVETIAN@ADECCOGROUP.COM BEFORE DOING ANY CHANGES!

COMMENTS WITH "TBR" IS TO BE REMOVED!
*/

  /* NAVBAR */
  body {
    padding-top: 60px !important;
  }

  html.nav-open,
  body.nav-open {
    overflow: hidden;
  }

  nav * {
    font-family: Nunito;
  }

  nav {
    min-height: 60px;
    background-color: white;
    text-align: center;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    border-bottom: 1px solid lightgray;
    z-index: 1000;
    box-shadow: 0 -3px 10px #6b7a80;
  }

  nav .container>a {
    position: absolute;
    left: 16px;
    top: 20px;
    height: 20px;
  }

  nav .container>a>img {
    height: 20px;
  }

  nav .toggleNav {
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0px;
    top: 0px;
    -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;
  }

  nav .toggleNav span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    max-width: 18px;
    background: black;
    opacity: 1;
    left: 23px;
    -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;
  }

  nav .toggleNav span:nth-child(1) {
    top: 24px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  nav .toggleNav span:nth-child(2) {
    top: 30px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  nav .toggleNav span:nth-child(3) {
    top: 36px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  nav .toggleNav.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 22px;
    left: 24px;
  }

  nav .toggleNav.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  nav .toggleNav.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 34px;
    left: 24px;
  }

  nav .knappar {
    display: none;
    z-index: 99999;
    max-height: calc(100vh - 60px);
    width: 100%;
    position: fixed;
    top: 60px;
    left: 0;
    overflow: scroll;
  }

  nav .knapp {
    display: block;
    position: relative;
  }

  nav .knapp.drop {
    position: relative;
  }

  nav .knapp.drop .uteknapp {
    padding-left: 35px;
  }

  nav .knapp.drop .uteknapp::before {
    content: "";
    position: absolute;
    background-color: black;
    width: 11px;
    height: 1px;
    left: 24px;
    margin-left: -7px;
    top: 29px;
    margin-top: -2.5px;
    transition: all 0.3s ease-in-out;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  nav .knapp.drop .uteknapp::after {
    content: "";
    position: absolute;
    background-color: black;
    width: 1px;
    height: 11px;
    left: 24px;
    margin-left: -2.5px;
    top: 29px;
    margin-top: -7px;
    transition: all 0.5s ease-in-out;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 1;
  }

  nav .knapp.drop .uteknapp.open::before {
    transition: all 0.3s ease-in-out;
    -webkit-transform: rotate(22deg);
    -moz-transform: rotate(22deg);
    -o-transform: rotate(22deg);
    transform: rotate(22deg);
    opacity: 0;
  }

  nav .knapp .uteknapp {
    display: block;
    text-align: left;
    padding: 15px 16px;
    min-height: 56px;
    border-bottom: 1px solid #cbcbcb;
    background-color: white;
  }

  nav .knapp .uteknapp.clicked {
    background-color: whitesmoke;
    padding-left: 22px;
    transition: all 0.3s ease;
  }

  nav .knapp .uteknapp.open {
    border-bottom: 1px solid #d3d3d3;
    padding-left: 35px;
  }

  nav .knapp .uteknapp>p {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    color: black;
  }

  nav .knapp .content {
    display: none;
  }
  nav .knapp .content > .row {
     width: unset !important;
  }
  nav .knapp .inneknapp {
    margin: 0 -15px;
    padding: 17px 35px;
    display: block;
    text-align: left;
    color: black;
    border-bottom: 1px solid #d8d8d8;
    background-color: #f2f2f2;
    transition: padding-left 0.3s ease;
    font-size: 15px;
    max-height: 56px;
  }

  nav .knapp .inneknapp.clicked {
    background-color: #d8d8d8;
    padding-left: 40px;
    transition: all 0.3s ease;
  }

  nav .redButtons {
    background-color: #fbe9e8;
  }

  nav .redButtons a {
    font-size: 14px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.71;
    letter-spacing: normal;
    color: #da291c;
    display: block;
    text-align: left;
    padding: 15px 16px;
    position: relative;
  }

  nav .redButtons a::after {
    content: "";
    height: 2px;
    width: calc(100vw - 32px);
    margin: auto;
    background-color: #f0a9a4;
    display: block;
    position: absolute;
    bottom: 0px;
  }

  nav .redButtons a:last-child::after {
    display: none;
  }

  @media (min-width: 992px) {

    body {
      padding-top: 103px !important;
    }

    html.nav-open,
    body.nav-open {
      overflow: unset;
    }

    nav {
      padding-top: 30px;
      text-align: right;
      margin: auto;
    }

    nav .container {
      position: relative;
    }

    nav .container>a {
      left: 10px;
      top: calc(50% - 16px);
      height: 32px;
    }

    nav .container>a>img {
      height: 30px;
    }

    nav .toggleNav {
      display: none !important;
    }

    nav .knappar {
      display: block !important;
      overflow: visible;
      border-top: none;
      position: static;
    }

    nav .knapp {
      display: inline-block;
      min-height: 70px;
      margin: 0 -2px;
    }

    nav .knapp:hover {
      background-color: whitesmoke;
      cursor: pointer;
    }



    nav .knapp:hover .content {
      display: block !important;
      height: auto;
    }

    nav .knapp .content {
      transition: height 0.3s ease;
      height: 0;
      width: 250px;
      left: 0;
      position: absolute;
      top: 72px;
      border-right: 1px solid #d3d3d3;
      border-top: 1px solid #d3d3d3;
      box-shadow: unset;
      padding: 0 15px;
    }

    nav .knapp .uteknapp {
      padding: 24px 25px 24px 25px;
      background-color: transparent;
      border: none;
      transition: 0.4s;
    }

    nav .knapp.drop .uteknapp {
      padding-left: 25px;
    }

    nav .knapp.drop .uteknapp:hover {
      cursor: default;
    }

    nav .knapp.drop .uteknapp::before,
    nav .knapp.drop .uteknapp::after {
      display: none;
    }


    nav .knapp.drop .uteknapp p {
      position: relative;
      left: 0;
      transition: 0.4s ease;
    }

    nav .knapp.drop:hover .uteknapp p {
      left: -5px;
    }

    nav .knapp.drop .uteknapp p::after {
      content: '\f107';
      font-family: "FontAwesome";
      position: absolute;
      opacity: 0;
      top: 2px;
      right: -18px;
      transition: 0.4s ease;
      font-size: 15px;
      color: black;
    }

    nav .knapp.drop:hover .uteknapp p::after {
      opacity: 1;
    }

    nav .knapp:not(.drop) .uteknapp:after {
      content: '\f105';
      font-family: "FontAwesome";
      position: absolute;
      opacity: 0;
      top: 25px;
      right: 10px;
      transition: 0.4s ease;
      font-size: 15px;
      color: black;
    }

    nav .knapp:not(.drop):hover .uteknapp:after {
      opacity: 1;
      right: 15px;
    }

    nav .knapp:not(.drop):hover .uteknapp {
      padding: 24px 30px 24px 20px;
    }

    nav .knapp .inneknapp {
      border-left: 1px solid #d3d3d3;
      padding: 12px 25px;
      background-color: white;
    }

    nav .knapp .inneknapp:hover {
      background-color: #f2f2f2;
      padding-left: 30px;
    }

    nav .redButtons {
      height: 30px;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    nav .redButtons div {
      max-width: 970px;
      margin: auto;
      padding-right: 14px;
    }

    nav .redButtons a {
      display: inline-block;
      float: right;
      padding: 3px 15px;
    }

    nav .redButtons a:hover {
      background-color: #f5e1dc;
    }

    nav .redButtons a::after {
      display: none;
    }
  }

  @media (min-width: 1200px) {
    nav .redButtons div {
      max-width: 1170px;
    }
  }

  /* END OF NAVBAR */


/* HERO */
.ADSE-Hero-Fluid {
  background-color: #dc7973;
  background-size: cover;
  height: calc(100vh - 60px);
  padding: 0;
  max-height: 580px;
}

/* HERO IMAGES FOR SMALL SCREENS */
.ADSE-Hero-Fluid.tjanster {
  background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/mobile/red-tjanster.jpg);
}

.ADSE-Hero-Fluid.bemanning {
  background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/mobile/red-bemanning.jpg);
}

.ADSE-Hero-Fluid.rekrytering {
  background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/mobile/red-rekrytering.jpg);
}

.ADSE-Hero-Fluid.extrapersonal {
  background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/mobile/red-extrapersonal2.jpg);
}

.ADSE-Hero-Fluid.sommarvikarie {
  background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/mobile/red-sommarvikarie.jpg);
  background-position: top right;
}

.ADSE-Hero-Fluid.adeccojour.old { /* Used for all screen sizes for now */
  background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/desktop/red-herojour-blurred.jpg);
  background-position: 545px;
}

.ADSE-Hero-Fluid.adeccojour { /* Used for all screen sizes for now */
  background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/desktop/red-herojour-ver-2.jpg);
  background-position: 545px;
}

/*TBR*/
.ADSE-Hero * {
  font-family: Nunito;
}

.ADSE-Hero,
.ADSE-Hero .row,
.ADSE-Hero .col-xs-12 {
  min-height: inherit;
  max-height: inherit;
  height: inherit;
  position: relative;
}

.ADSE-Hero .subtitle {
  text-align: center;
  font-size: 16px !important;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5 !important;
  letter-spacing: normal;
  color: #ffffff;
  margin-bottom: 25px;
}

.ADSE-Hero .title {
  text-align: center;
  font-size: 39px !important;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.28;
  letter-spacing: normal;
  color: #ffffff;
}

.ADSE-Hero .buttons {
  width: 100%;
  position: absolute;
  bottom: 60px;
  left: 0;
}

.ADSE-Hero .CTA {
  padding: 10px 25px;
  border-radius: 4px;
  width: 100%;
  max-width: 290px;
  display: block;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: 2.14;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  color: white;
  margin: 10px auto;
  height: 50px;
  transition: all 0.3s ease;
}

.ADSE-Hero .CTA:hover {
  cursor: pointer;
  text-decoration: none;
  color: white;
}

.ADSE-Hero .CTA.Primary {
  background-color: #0098b0;
  border: 2px solid #0098b0;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
}

.ADSE-Hero .CTA.Primary:hover {
  background-color: #00aeca;
  border: 2px solid #00aeca;
}

.ADSE-Hero .CTA.Secondary:hover {
    background-color: #ec0000;
    border: 2px solid #ec0000;
}

.ADSE-Hero .CTA.Secondary {
    border: 2px solid #d10000;
    background-color: hsl(0, 100%, 41%);
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
}

@media screen and (min-width: 567px) {

  /* HERO IMAGES FOR LARGER SCREENS */
  .ADSE-Hero-Fluid.tjanster {
    background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/desktop/red-tjanster.jpg);
    background-position: top center;
  }

  .ADSE-Hero-Fluid.bemanning {
    background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/desktop/red-bemanning.jpg);
    background-position: top right;
  }

  .ADSE-Hero-Fluid.rekrytering {
    background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/desktop/red-rekrytering.jpg);
    background-position: top right;
  }

  .ADSE-Hero-Fluid.extrapersonal {
    background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/desktop/red-extrapersonal.jpg);
    background-position: top right;
  }

  .ADSE-Hero-Fluid.sommarvikarie {
    background-image: url(https://resources-01.adeccogroup.com/~/media/adeccogroup/brands/adecco-global-2016/sweden/new-adecco/images/hero-images/desktop/red-sommarvikarie.jpg);
  }
  /* HERO IMAGES FOR EVEN LARGER SCREENS */
  @media screen and (min-width: 768px) {
    .ADSE-Hero-Fluid.adeccojour {
      background-position: right;
    }
    .ADSE-Hero-Fluid.adeccojour {
      background-position: top center;
    }
  }

  /* HERO IMAGES FOR THE LARGEST OF SCREENS */
  @media screen and (min-width: 992px) {
    .ADSE-Hero-Fluid.adeccojour {
      background-position: top center;
    }
  }  

  .ADSE-Hero .title {
    font-size: 72px !important;
    text-align: left;
    margin: 35px 0 0 -5px;
  }

  .ADSE-Hero .subtitle {
    text-align: left;
    margin: 0 0 30px;
    font-size: 22px !important;
  }

  .ADSE-Hero .inline {
    display: inline !important;
  }

  .ADSE-Hero .buttons {
    bottom: unset;
    top: 25%;
    left: unset;
  }

  .ADSE-Hero .buttons .CTA {
    display: inline-block;
    margin-right: 15px;
  }
}

/* FIX FOR ROTATING SCREENS */
@media screen and (max-width: 566px) and (max-height: 450px) {
  .ADSE-Hero-Fluid {
    min-height: 400px;
  }
}

@media screen and (min-width: 567px) and (max-height: 550px) {
  .ADSE-Hero-Fluid {
    min-height: 500px;
  }
}

/* END OF FIX */