/* ----------- COLORS USED ------------ 

  adecco-red1:#d8392e;
  adecco-red2:#E15449;
  adecco-red3:#E97F77;
  adecco-red4:#F0A9A4;
  adecco-red5:#F8D4D2;
  adecco-red6:#FBE9E8;
  adecco-lightgray:#F2F2F2;
  adecco-darkgray:#404040;
  adecco-blue:#0098b0

/* ------- END OF COLORS USED --------- */

/* ------------- FIXES -------------- */
/* >> Reset header stylings for IE */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  color: unset;
  font-family: unset;
  font-weight: unset;
  line-height: unset;
}
/* >> fix for navbar / body top padding */
.big_banner-container {
  display: block!important
}

#my_nav {
  position: relative!important;
  padding: 0!important
}

#skip {
display: none;
}

/* >> padding fix for spotlights */
.panel {
  border: 0;
  margin: 0;
  box-shadow: none;
}
.spotlight-container,.spotlight-container .panel {
  padding: 0!important;
  border: 0;
  margin-bottom: 0;
}
.panel.panel-default {
  border-color: transparent;
}

/* >> same height columns */
@media (min-width: 768px) {
.row.full-height {
  display: flex;
  flex-wrap: wrap;
}
.row.full-height > [class*='col-'] {
  display: flex;
  flex-direction: column;
}
}
@media (min-width: 1200px) {
  .col-lg-offset-2 {
      margin-left: 16.66666667%;
  }
}

/* ---------- END OF FIXES ----------- */

/* ------------- TAGS --------------- */


h1,h2,h3,h4,h5,h6 {
  font-family: Nunito,sans-serif;
  color: #d8392e;
  line-height: 1.2;
  letter-spacing: normal;
  margin: 30px 0 20px 0;
  font-weight: 600;
}

h1 {
  font-size: 32px
}

h2 {
  font-size: 26px
}

h3 {
  font-size: 22px
}

h4 {
  font-size: 18px
}

a,li,p {
  font-family: Nunito,sans-serif;
  font-size: 14px;
  letter-spacing: normal;
  line-height: 1.5
}

p {
  color: #404040
}

a:not(.button):not(.text-white):not(.text-blue):not(.text-lightgray):not(.text-darkgray):not(.text-red2):not(.text-red3):not(.text-red4):not(.text-red5):not(nav a):not(.chat-container a) {
  color: #d8392e;
  cursor: pointer;
}

a:not(.button):not(.text-white):not(.text-blue):not(.text-lightgray):not(.text-darkgray):not(.text-red2):not(.text-red3):not(.text-red4):not(.text-red5):not(nav a):not(.chat-container a):hover,
a:not(.button):not(.text-white):not(.text-blue):not(.text-lightgray):not(.text-darkgray):not(.text-red2):not(.text-red3):not(.text-red4):not(.text-red5):not(nav a):not(.chat-container a):focus {
  color: #bb2d23;
}

a.text-blue:hover {
  color: #018094;
  text-decoration:none;
}

a.text-white:hover,
a.text-white:focus {
  color: #f8d4d2;
}

a.text-blue:hover,
a.text-blue:focus {
  color: #018094;
}

a.text-darkgray:hover,
a.text-darkgray:focus {
  font-weight:600;
  color: #404040;
}

a:not(.text-underline):hover,
a:not(.text-underline):focus {
  text-decoration:none;
  cursor: pointer
}
a.text-underline:hover
a.text-underline:focus {
  text-decoration:underline;
  cursor: pointer
}

ol,ul {
  list-style: none;
  counter-reset: count;
  padding-left: 20px;
}

ol li,ul li {
  color: #404040;
  counter-increment: count;
  position: relative;
  margin-bottom: 10px;
  padding-left:10px;
}

ol li::before,ul li::before {
  position: absolute;
  left: -35px;
  top: -1px;
  content: counter(count) ".";
  color: #404040;
  font-weight: 700;
  width: 30px;
  text-align: right;
}

ul li::before {
  content: "●";
}
ul.checkmark li::before {
 content: '\2713';
 top: 0px;
}

ul.arrow li::before {
  content: url(/~/media/adeccogroup/brands/adecco-global-2016/norway/v2/images/icons/arrow-right-red);
  top: 3px;
}

ol.white li::before,
ul.red li::before {
  color: #d8392e;
}
ol.white li::before,
ul.white li::before {
  color: #fff;
}


hr {
  border: 0;
  border-top: 1px solid #eee;
}

/* >> radio button */
.pricerObject [type=radio]:checked,.pricerObject [type=radio]:not(:checked) {
  position: absolute;
  left: -9999px
}

.pricerObject [type=radio]:checked+label,.pricerObject [type=radio]:not(:checked)+label {
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  line-height: 18px;
  display: inline-block;
  color: #404040;
  font-weight: 400
}

.pricerObject [type=radio]:checked+label:before,.pricerObject [type=radio]:not(:checked)+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #fff
}

.pricerObject [type=radio]:checked+label:after,.pricerObject [type=radio]:not(:checked)+label:after {
  content: '';
  width: 12px;
  height: 12px;
  background: #da291c;
  position: absolute;
  top: 3px;
  left: 3px;
  border-radius: 100%;
  -webkit-transition: all .2s ease;
  transition: all .2s ease
}

.pricerObject [type=radio]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0)
}

.pricerObject [type=radio]:checked+label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1)
}

/* >> range slider */
.pricerObject [type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%
}

.pricerObject [type=range].chrome {
  background: #f2f2f2;
  border-radius: 25px;
  height: 10px;
  outline: 0
}

.pricerObject [type=range]:focus {
  outline: 0
}

.pricerObject [type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: .2s;
  box-shadow: 0 0 0 #000,0 0 0 #0d0d0d;
  border: 0 solid #000101
}

.pricerObject [type=range]::-webkit-slider-thumb {
  box-shadow: 0 0 0 #000,0 0 0 #0d0d0d;
  border: 0 solid #000;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #da291c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px
}

.pricerObject [type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: .2s;
  box-shadow: 0 0 0 red,0 0 0 red;
  border-radius: 25px;
  border: 4px solid #fafafa;
  outline: 0
}

.pricerObject [type=range].chrome::-moz-range-track {
  opacity: 0
}

.pricerObject [type=range]::-moz-focus-outer {
  border: 0
}

.pricerObject [type=range]::-moz-range-thumb {
  box-shadow: 0 0 0 red,0 0 0 red;
  border: 0 solid red;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: #da291c;
  cursor: pointer
}

.pricerObject [type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: .2s;
  background: 0 0;
  border-color: transparent;
  border-width: 5px 0;
  color: transparent
}

.pricerObject [type=range]::-ms-fill-lower {
  background: #da291c;
  border: 0 solid #000101;
  border-radius: 50px;
  box-shadow: 0 0 0 #000,0 0 0 #0d0d0d
}

.pricerObject [type=range]::-ms-fill-upper {
  background: #f2f2f2;
  border: 0 solid #000101;
  border-radius: 50px;
  box-shadow: 0 0 0 #000,0 0 0 #0d0d0d
}

.pricerObject [type=range]::-ms-thumb {
  box-shadow: 0 0 0 #000,0 0 0 #0d0d0d;
  border: 0 solid #000;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-top: 0;
  background: #da291c;
  cursor: pointer
}

.pricerObject [type=range]:focus::-ms-fill-lower {
  background: #da291c
}

.pricerObject [type=range]:focus::-ms-fill-upper {
  background: #f2f2f2
}

/* >> desktop */
@media only screen and (min-width: 768px) {
  h1 {
      font-size:48px
  }

  h2 {
      font-size: 36px
  }

  h3 {
      font-size: 28px
  }

  h4 {
      font-size: 18px
  }

  a,li,p {
      font-size: 16px
  }
}

/* ---------- END OF TAGS ----------- */

/* ----------- COMPONENTS ------------ */
/* >> components (container-fluids) */
.component {
  padding: 40px 0
}

.component>.row {
  margin-left: auto;
  margin-right: auto
}

.component [class*=col-]:first-child h1:first-child,.component [class*=col-]:first-child h2:first-child,.component [class*=col-]:first-child h3:first-child,.component [class*=col-]:first-child h4:first-child,.component [class*=col-]:first-child h5:first-child,.component [class*=col-]:first-child h6:first-child {
  margin-top: 0
}

@media (min-width: 768px) {
  .component {
      padding:60px 0
  }

  .component>.row {
      width: 750px;
  }

  .component h1:first-child,.component h2:first-child,.component h3:first-child,.component h4:first-child,.component h5:first-child,.component h6:first-child {
      margin-top: 0
  }
}

@media (min-width: 992px) {
  .component>.row {
      width:970px
  }
}

@media (min-width: 1200px) {
  .component {
    padding:80px 0
}
  .component>.row {
      width:1170px
  }
}


/* >> hero containers */
#heroBanner {
  background-size: cover;
  background-position: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (min-width: 768px) {
  #heroBanner {
    padding-top: 150px;
    padding-bottom: 150px;
  } 
}
@media (min-width: 2560px) {
  #heroBanner {
    padding-top: 200px;
    padding-bottom: 200px;
  } 
}

/* >> Hero Input fields */ 

.heroInput,
.heroSubmit {
  border: none;
  border-radius: 4px;
  min-height: 45px !important;
  max-height: 45px !important;
  height: 45px !important;
  width: 100%;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.10));
  margin-bottom: 10px;
  padding: 10px 30px;
  font-size: 16px;
}

/* >> navbar */
body {
  padding-top: 60px!important
}

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

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

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

nav>.row>a>img {
  height: 20px
}

nav .toggleNav {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  -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: #000;
  opacity: 1;
  left: 23px;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  -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: #000;
  width: 11px;
  height: 1px;
  left: 24px;
  margin-left: -7px;
  top: 29px;
  margin-top: -2.5px;
  transition: all .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: #000;
  width: 1px;
  height: 11px;
  left: 24px;
  margin-left: -2.5px;
  top: 29px;
  margin-top: -7px;
  transition: all .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 .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: #fff
}

nav .knapp .uteknapp.clicked {
  background-color: #f5f5f5;
  padding-left: 22px;
  transition: all .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: #000
}

nav .knapp .content {
  display: none
}
nav .knapp .content > .row {
width: 100%;
}

nav .knapp .inneknapp {
  margin: 0 -15px;
  padding: 17px 35px;
  display: block;
  text-align: left;
  color: #404040;
  border-bottom: 1px solid #d8d8d8;
  background-color: #f2f2f2;
  transition: padding-left .3s ease;
  font-size: 15px;
  max-height: 56px
}

nav .knapp .inneknapp.clicked {
  background-color: #d8d8d8;
  padding-left: 40px;
  transition: all .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: #d8392e;
  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: 0
}

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

nav .mega-only {
  display: none
}

@media (min-width: 992px) {
  body {
      padding-top:103px!important
  }

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

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

  nav>.row {
      position: relative
  }

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

  nav>.row>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 {
      cursor: pointer
  }

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

  nav .knapp .content {
      transition: height .3s ease;
      height: 0;
      width: 100vw;
      left: calc(50% - 488px);
      position: fixed;
      top: 102px;
      border-bottom: 1px solid #d3d3d3;
      padding: 20px 5px 20px;
      cursor: auto;
      background-color: rgba(255, 255, 255, 0.96);
      box-shadow: 0 3px 3px rgba(0,0,0,.2);
      max-width: 975px;
  }

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

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

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

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

  nav .knapp.drop .uteknapp p {
      position: relative;
      left: 0;
      transition: .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: .4s ease;
      font-size: 15px;
      color: #000
  }

  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: .4s ease;
      font-size: 15px;
      color: #000
  }

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

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

  nav .knapp .thumbButton {
      background-color: #fff;
      box-shadow: 0 0 28px 0 rgba(0,0,0,.09);
      position: relative;
      top: 0;
      transition: top .3s ease;
  }

  nav .knapp .thumbButton:hover {
      cursor: pointer;
      top: -10px;
      box-shadow: 0 0 28px 0 rgba(0,0,0,.15)
  }

  nav .knapp a.mega-only {
      margin-top: 5px;
      color: #404040;
      transition: all .4s ease
  }
  nav .knapp .inneknapp.text:after,
  nav .knapp a.mega-only:after {
      content: '\f105';
      font-family: FontAwesome;
      position: relative;
      right: -20px;
      transition: .4s ease;
      font-size: 16px;
      color: #404040;
      opacity: 0
  }
  nav .knapp .inneknapp.text:hover:after,
  nav .knapp a.mega-only:hover:after {
      opacity: 1
  }

  nav .knapp .inneknapp {
      background-color: transparent;
      color: #d8392e;
      font-size: 17px;
      border: 0;
      position: relative;
      transition: .4s ease;
      font-weight: 600;
  }
  
    nav .knapp .inneknapp.text {
    font-size: 16px;
    margin-top: 5px;
    color: #404040;
    transition: all .4s ease;
    font-weight: 400;
      padding: 3px 15px;
  }

  nav .knapp .inneknapp.extra {
      text-transform: uppercase;
      padding: 0;
      color: #d8392e;
      font-size: 14px;
      font-weight: 700;
      margin: 40px 0 0 0;
      position: relative;
      transition: all .4s ease
  }

  nav .knapp .inneknapp.extra:hover {
      margin-left: 10px;
      text-decoration: none;
  }

  nav .knapp .inneknapp.extra:after {
      content: '\f105';
      font-family: FontAwesome;
      position: relative;
      right: -20px;
      transition: .4s ease;
      font-size: 16px;
      color: #d8392e;

  }

  nav .knapp .thumbButton:hover .inneknapp {
      text-decoration: none
  }

  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
  }

  nav .mega-only {
      display: block
  }
  nav .fl {
    float:left !important;
  }

  nav .cat1 {min-height: 450px}
  nav .cat2 {min-height: 400px}
  nav .cat3 {min-height: 326px}
  nav .cat4 {min-height: 303px}
  nav .cat5 {min-height: 350px}
  nav .cat6 {min-height: 302px}
    
}

@media (min-width: 1200px) {
  nav .redButtons div {
      max-width:1170px
  }
      nav .knapp .content {
      left: calc(50% - 583px);
      max-width: 1170px;
  }
  nav .knapp .inneknapp:not(.text):not(.extra) {
    font-size: 20px;
  }  
  nav .cat1 {min-height: 378px}
  nav .cat2 {min-height: 378px}
  nav .cat3 {min-height: 330px}
  nav .cat4 {min-height: 307px}
  nav .cat5 {min-height: 330px}
  nav .cat6 {min-height: 330px}
}

/* >> buttons */
.button {
  font-family: Nunito,sans-serif;
  letter-spacing: 2px;
  text-align: center;
  padding: 13px 30px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  transition: all .2s ease;
  min-height:50px;
  max-width:100%;
  cursor: pointer
}

.button.short {
  width: 300px;
}
.button.long {
  width: 400px;
}

.button.red-button {
  background-color: #da291c;
  border: solid 1px #da291c;
  color: #fff
}

.button.red-button:hover {
  background-color: #bb2d23;
  border: solid 1px #bb2d23
}

.button.pink-button {
  background-color: #fbe9e8;
  border: solid 1px #fbe9e8;
  color: #da291c
}

.button.white-button {
  background-color: #fff;
  border: solid 1px #fff;
  color: #da291c
}


.button.pink-button:hover {
  background-color: #f8d6d4;
  border: solid 1px #f8d6d4
}
.button.white-button:hover {
  background-color: #fff9f9;
  border: solid 1px #fff9f9
}
.button.blue-button {
  background-color: #0098b0;
  border: solid 1px #0098b0;
  color: #fff
}

.button.blue-button:hover {
  background-color: #018094;
  border: solid 1px #018094
}

.button.red-button.outline {
  border: solid 1px #da291c;
  background-color: transparent;
  color: #da291c
}

.button.red-button.outline:hover {
  background-color: #fbe9e8
}

.button.pink-button.outline {
  border: solid 1px #fbe9e8;
  background-color: transparent;
  color: #fbe9e8
}

.button.white-button.outline {
  border: solid 1px #fff;
  background-color: transparent;
  color: #fff;
}
.button.white-button.outline:hover {
  background-color: #fff;
  color: #da291c
}
.button.pink-button.outline:hover {
  background-color: #fefbfa;
  color: #da291c
}

.button.blue-button.outline {
  border: solid 1px #0098b0;
  background-color: transparent;
  color: #0098b0
}

.button.blue-button.outline:hover {
  background-color: #e6edf6
}

.button.disabled,.button.disabled:hover {
  background-color: #f2f2f2;
  border: solid 1px #f2f2f2;
  color: #cecec0
}

.button.outline.disabled,.button.outline.disabled:hover {
  background-color: transparent;
  border: solid 1px #cecec0;
  color: #cecec0
}

.button.disabled:hover {
  cursor: not-allowed
}

/* >> form fields */
.inputContainer {
  position: relative;
  font-family: Nunito,sans-serif
}

.inputContainer .input {
  width: 100%;
  border: solid 2px #ececec;
  border-radius: 4px;
  margin: 5px 0;
  font-size: 16px;
  outline: 0;
  font-family: Nunito,sans-serif
}

.inputContainer .input:hover {
  border: solid 2px #cfcfcf
}

.inputContainer .input.valid,.inputContainer .input:focus,.inputContainer .input:valid {
  border: solid 2px #0098b0
}

.inputContainer .input+label {
  position: absolute;
  top: 23px;
  left: 18px;
  transition: all .2s ease;
  pointer-events: none;
  font-size: 16px;
  color: #7d7d7d;
  font-weight: 400;
  z-index: 1;
  font-family: Nunito,sans-serif
}

.inputContainer .input.invalid+label,.inputContainer .input.valid+label,.inputContainer .input:focus+label,.inputContainer .input:valid+label {
  top: 18px;
  color: #0098b0;
  font-size: 12px;
  background-color: #fff;
  line-height: 0
}

.inputContainer .input.input-text {
  height: 56px;
  padding: 5px 0 0 16px
}

.inputContainer .input.input-textarea {
  padding: 19px 0 0 16px;
  resize: none
}

.inputContainer .input.valid+label::after {
  content: " ✓";
  font-weight: 700;
  color: green
}

.inputContainer .input.invalid {
  border: 2px solid #da291c
}

.inputContainer .input.invalid+label,.inputContainer .input.invalid+label::after {
  color: #da291c
}

.inputContainer .input.invalid.format+label::after {
  content: " - Tarkista oikeinkirjoitus"
}

.inputContainer .input.invalid.empty+label::after {
  content: " - Pakollinen kenttä"
}

.inputContainer .input-dropdown {
  height: 56px;
  padding: 5px 0 0 16px
}

.inputContainer[for=dropdown]::after {
  font-family: FontAwesome;
  content: "\f078";
  position: absolute;
  top: 22px;
  right: 20px;
  font-size: 10px;
  color: #404040;
  pointer-events: none
}

.inputContainer .input-dropdown:not(:focus):hover {
  cursor: pointer
}

.inputContainer .input-dropdown~.optionsCounter {
  position: absolute;
  bottom: 7px;
  right: 8px;
  font-size: 12px;
  font-style: italic
}

.inputContainer .input-dropdown~.results {
  cursor: pointer;
  display: none;
  position: absolute;
  border: 2px solid #0098b0;
  background-color: #fff;
  z-index: 3;
  top: 58px;
  width: 100%;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: scroll
}

.inputContainer .input-dropdown.invalid~.results {
  border: 2px solid #da291c
}

.inputContainer .input-dropdown~.results span {
  display: block;
  padding: 10px;
  padding-left: 16px
}

.inputContainer .input-dropdown~.results span:hover {
  cursor: pointer;
  background-color: #0098b0;
  color: #fff
}

.inputContainer .input-dropdown:focus {
  border-radius: 4px 4px 0 0
}

.inputContainer .input-dropdown:focus~.results {
  display: block
}

.inputContainer .input-dropdown.noresults:focus {
  border-radius: 4px
}

.inputContainer .input-dropdown.noresults:focus~.results {
  border-width: 0
}

.inputContainer .input-dropdown::placeholder {
  opacity: 0;
  transition: opacity .3s ease
}

.inputContainer .input-dropdown::-webkit-input-placeholder {
  opacity: 0;
  transition: opacity .3s ease
}

.inputContainer .input-dropdown:-ms-input-placeholder {
  opacity: 0;
  transition: opacity .3s ease
}

.inputContainer .input-dropdown:focus::placeholder {
  opacity: 1
}

.inputContainer .input-dropdown:focus::-webkit-input-placeholder {
  opacity: 1
}

.inputContainer .input-dropdown:focus:-ms-input-placeholder {
  opacity: 1
}

/* -------- END OF COMPONENTS -------- */
/* ------------ UTILITY -------------- */
.bg-red1 {
  background-color: #d8392e
}

.bg-red2 {
  background-color: #E15449
}

.bg-red3 {
  background-color: #E97F77
}

.bg-red4 {
  background-color: #F0A9A4
}

.bg-red5 {
  background-color: #F8D4D2
}

.bg-red6 {
  background-color: #FBE9E8
}

.bg-lightgray {
  background-color: #f6f7f7
}

.bg-darkgray {
  background-color: #404040
}

.bg-blue {
  background-color: #0098b0
}

.bg-white {
  background-color: #fff
}

.bg-form {
  background-color: #F2F2F2
}
.text-size1 {
  font-size: 34px
}

.text-size2 {
  font-size: 32px
}

.text-size3 {
  font-size: 26px
}

.text-size4 {
  font-size: 22px
}

.text-size5 {
  font-size: 20px
}

.text-size6 {
  font-size: 16px
}

.text-size7 {
  font-size: 10px
}

.text-red1 {
  color: #d8392e
}

.text-red2 {
  color: #E15449
}

.text-red3 {
  color: #E97F77
}

.text-red4 {
  color: #F0A9A4
}

.text-red5 {
  color: #F8D4D2
}

.text-red6 {
  color: #FBE9E8
}

.text-lightgray {
  color: #F2F2F2
}

.text-darkgray {
  color: #404040
}

.text-blue {
  color: #0098b0
}

.text-white {
  color: #fff
}
.text-underline {
  text-decoration: underline;
}

.semi-bold {
font-weight: 600;
}
.bold {
  font-weight: 700;
}
.circle {
  border-radius: 50%
}

.pos-relative {
  position: relative
}

.pos-absolute {
  position: absolute
}

.pos-fixed {
  position: fixed
}

.cur-pointer {
  cursor: pointer
}

.hov-text-blue {
  transition: all .3s ease
}

.hov-text-blue:hover {
  color: #0098b0
}

.v-align-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.float-left {
  float: left
}

.float-right {
  float: right
}

.float-none {
  float: none
}

.d-none {
  display: none
}

.d-block {
  display: block
}

.d-inline-block {
  display: inline-block
}

.d-inline {
  display: inline
}

.invisible {
  visibility: hidden!important
}

.visible {
  visibility: visible!important
}

.wid-auto {
  width: auto
}

.wid-100 {
  width: 100%
}

.wid-max {
  width: max-content
}
.mwid-100 {
  max-width: 100%
}
.mwid-300 {
  max-width: 300px;
}
.mwid-max {
  max-width: max-content
}

.bor-rad4 {
  border-radius: 4px;
}
.bor-rad10 {
  border-radius: 10px;
}

.box-shadow {
  box-shadow: 0 4px 10px rgba(0,0,0,.4)
}
.box-shadow-light {
  box-shadow: 0 4px 10px rgba(0,0,0,.25)
}

.mar-15- {
  margin: -15px;
}

.mar-50- {
  margin: -50px;
}
.mar-auto {
  margin: auto
}

.mar-0 {
  margin: 0
}
.mar-5 {
  margin: 5px
}
.mar-10 {
  margin: 10px
}
.mar-15 {
  margin: 15px
}
.mar-20 {
  margin: 20px
}

.mar-30 {
  margin: 30px
}

.mar-40 {
  margin: 40px
}

.mar-50 {
  margin: 50px
}

.mar-60 {
  margin: 60px
}

.mar-70 {
  margin: 70px
}

.mar-80 {
  margin: 80px
}

.mar-90 {
  margin: 90px
}

.mar-100 {
  margin: 100px
}

.mart-auto {
  margin-top: auto
}

.mart-0 {
  margin-top: 0
}
.mart-5 {
  margin-top: 5px
}
.mart-10 {
  margin-top: 10px
}
.mart-15 {
  margin-top: 15px
}
.mart-20 {
  margin-top: 20px
}

.mart-30 {
  margin-top: 30px
}

.mart-40 {
  margin-top: 40px
}

.mart-50 {
  margin-top: 50px
}

.mart-60 {
  margin-top: 60px
}

.mart-70 {
  margin-top: 70px
}

.mart-80 {
  margin-top: 80px
}

.mart-90 {
  margin-top: 90px
}

.mart-100 {
  margin-top: 100px
}

.mart-120 {
  margin-top: 120px
}

.mart-160 {
  margin-top: 160px
}

.marr-auto {
  margin-right: auto
}

.marr-0 {
  margin-right: 0
}
.marr-5 {
  margin-right: 5px
}
.marr-10 {
  margin-right: 10px
}
.marr-15 {
  margin-right: 15px
}
.marr-20 {
  margin-right: 20px
}

.marr-30 {
  margin-right: 30px
}

.marr-40 {
  margin-right: 40px
}

.marr-50 {
  margin-right: 50px
}

.marr-60 {
  margin-right: 60px
}

.marr-70 {
  margin-right: 70px
}

.marr-80 {
  margin-right: 80px
}

.marr-90 {
  margin-right: 90px
}

.marr-100 {
  margin-right: 100px
}

.marr-120 {
  margin-right: 120px
}

.marr-160 {
  margin-right: 160px
}

.marb-auto {
  margin-bottom: auto
}

.marb-0 {
  margin-bottom: 0
}
.marb-5 {
  margin-bottom: 5px
}
.marb-10 {
  margin-bottom: 10px
}
.marb-15 {
  margin-bottom: 15px
}
.marb-20 {
  margin-bottom: 20px
}

.marb-30 {
  margin-bottom: 30px
}

.marb-40 {
  margin-bottom: 40px
}

.marb-50 {
  margin-bottom: 50px
}

.marb-60 {
  margin-bottom: 60px
}

.marb-70 {
  margin-bottom: 70px
}

.marb-80 {
  margin-bottom: 80px
}

.marb-90 {
  margin-bottom: 90px
}

.marb-100 {
  margin-bottom: 100px
}

.marb-120 {
  margin-bottom: 120px
}

.marb-160 {
  margin-bottom: 160px
}

.marl-auto {
  margin-left: auto
}

.marl-0 {
  margin-left: 0
}
.marl-5 {
  margin-left: 5px
}
.marl-10 {
  margin-left: 10px
}
.marl-15 {
  margin-left: 15px
}
.marl-20 {
  margin-left: 20px
}

.marl-30 {
  margin-left: 30px
}

.marl-40 {
  margin-left: 40px
}

.marl-50 {
  margin-left: 50px
}

.marl-60 {
  margin-left: 60px
}

.marl-70 {
  margin-left: 70px
}

.marl-80 {
  margin-left: 80px
}

.marl-90 {
  margin-left: 90px
}

.marl-100 {
  margin-left: 100px
}

.marl-120 {
  margin-left: 120px
}

.marl-160 {
  margin-left: 160px
}

.pad-0 {
  padding: 0
}
.pad-5 {
  padding: 5px
}
.pad-10 {
  padding: 10px
}
.pad-15 {
  padding: 15px
}
.pad-20 {
  padding: 20px
}

.pad-30 {
  padding: 30px
}

.pad-40 {
  padding: 40px
}

.pad-50 {
  padding: 50px
}

.pad-60 {
  padding: 60px
}

.pad-70 {
  padding: 70px
}

.pad-80 {
  padding: 80px
}

.pad-90 {
  padding: 90px
}

.pad-100 {
  padding: 100px
}

.padt-0 {
  padding-top: 0
}
.padt-5 {
  padding-top: 5px
}

.padt-10 {
  padding-top: 10px
}
.padt-15 {
  padding-top: 15px
}

.padt-20 {
  padding-top: 20px
}

.padt-30 {
  padding-top: 30px
}

.padt-40 {
  padding-top: 40px
}

.padt-50 {
  padding-top: 50px
}

.padt-60 {
  padding-top: 60px
}

.padt-70 {
  padding-top: 70px
}

.padt-80 {
  padding-top: 80px
}

.padt-90 {
  padding-top: 90px
}

.padt-100 {
  padding-top: 100px
}

.padr-0 {
  padding-right: 0
}
.padr-5 {
  padding-right: 5px
}
.padr-10 {
  padding-right: 10px
}
.padr-15 {
  padding-right: 15px
}
.padr-20 {
  padding-right: 20px
}

.padr-30 {
  padding-right: 30px
}

.padr-40 {
  padding-right: 40px
}

.padr-50 {
  padding-right: 50px
}

.padr-60 {
  padding-right: 60px
}

.padr-70 {
  padding-right: 70px
}

.padr-80 {
  padding-right: 80px
}

.padr-90 {
  padding-right: 90px
}

.padr-100 {
  padding-right: 100px
}

.padb-0 {
  padding-bottom: 0
}
.padb-5 {
  padding-bottom: 5px
}
.padb-10 {
  padding-bottom: 10px
}
.padb-15 {
  padding-bottom: 15px
}
.padb-20 {
  padding-bottom: 20px
}

.padb-30 {
  padding-bottom: 30px
}

.padb-40 {
  padding-bottom: 40px
}

.padb-50 {
  padding-bottom: 50px
}

.padb-60 {
  padding-bottom: 60px
}

.padb-70 {
  padding-bottom: 70px
}

.padb-80 {
  padding-bottom: 80px
}

.padb-90 {
  padding-bottom: 90px
}

.padb-100 {
  padding-bottom: 100px
}

.padl-0 {
  padding-left: 0
}
.padl-5 {
  padding-left: 5px
}
.padl-10 {
  padding-left: 10px
}
.padl-15 {
  padding-left: 15px
}
.padl-20 {
  padding-left: 20px
}

.padl-30 {
  padding-left: 30px
}

.padl-40 {
  padding-left: 40px
}

.padl-50 {
  padding-left: 50px
}

.padl-60 {
  padding-left: 60px
}

.padl-70 {
  padding-left: 70px
}

.padl-80 {
  padding-left: 80px
}

.padl-90 {
  padding-left: 90px
}

.padl-100 {
  padding-left: 100px
}



/* >> desktop */
@media only screen and (min-width: 768px) {
  .text-size1 {
      font-size:60px
  }

  .text-size2 {
      font-size: 48px
  }

  .text-size3 {
      font-size: 36px
  }

  .text-size4 {
      font-size: 28px
  }

  .text-size5 {
      font-size: 24px
  }

  .text-size6 {
      font-size: 20px
  }

  .text-size7 {
      font-size: 12px
  }

  .d\:text-size1 {
      font-size: 60px
  }

  .d\:text-size2 {
      font-size: 48px
  }

  .d\:text-size3 {
      font-size: 36px
  }

  .d\:text-size4 {
      font-size: 28px
  }

  .d\:text-size5 {
      font-size: 24px
  }

  .d\:text-size6 {
      font-size: 20px
  }

  .d\:text-size7 {
      font-size: 12px
  }

  .d\:invisible {
      visibility: hidden!important
  }

  .d\:visible {
      visibility: visible!important
  }

  .d\:wid-auto {
      width: auto
  }

  .d\:wid-100 {
      width: 100%
  }
  .d\:mwid-100 {
    max-width: 100%
  }
  .d\:wid-max {
      width: max-content
  }
  .d\:mwid-max {
      max-width: max-content
  }
  .d\:mwid-300 {
      max-width: 300px
  }
  .hov-pop {
    transition: all .3s ease;
    position: relative;
    top: 0;
  }
  .hov-pop:hover {
    top: -10px;
    box-shadow: 0 4px 10px rgba(0,0,0,.4)
  }
  .d\:text-center {
      text-align: center
  }

  .d\:text-left {
      text-align: left
  }

  .d\:text-right {
      text-align: right
  }
.d\:v-align-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}


  .d\:pos-relative {
      position: relative
  }

  .d\:pos-absolute {
      position: absolute
  }

  .d\:pos-fixed {
      position: fixed
  }

  .d\:float-left {
      float: left
  }

  .d\:float-right {
      float: right
  }

  .d\:float-none {
      float: none
  }

  .d\:d-none {
      display: none
  }

  .d\:d-block {
      display: block
  }

  .d\:d-inline-block {
      display: inline-block
  }

  .d\:d-inline {
      display: inline
  }
  .d\:mar-15- {
    margin: -15px;
  }

  .d\:mar-50- {
    margin: -50px;
  }
  .d\:mar-auto {
      margin: auto
  }

  .d\:mar-0 {
      margin: 0
  }
  .d\:mar-5 {
    margin: 5px
}
  .d\:mar-10 {
      margin: 10px
  }
  .d\:mar-15 {
    margin: 15px
}
  .d\:mar-20 {
      margin: 20px
  }

  .d\:mar-30 {
      margin: 30px
  }

  .d\:mar-40 {
      margin: 40px
  }

  .d\:mar-50 {
      margin: 50px
  }

  .d\:mar-60 {
      margin: 60px
  }

  .d\:mar-70 {
      margin: 70px
  }

  .d\:mar-80 {
      margin: 80px
  }

  .d\:mar-90 {
      margin: 90px
  }

  .d\:mar-100 {
      margin: 100px
  }

  .d\:mart-auto {
      margin-top: auto
  }

  .d\:mart-0 {
      margin-top: 0
  }
  .d\:mart-5 {
    margin-top: 5px
}
  .d\:mart-10 {
      margin-top: 10px
  }
  .d\:mart-15 {
    margin-top: 15px
}
  .d\:mart-20 {
      margin-top: 20px
  }

  .d\:mart-30 {
      margin-top: 30px
  }

  .d\:mart-40 {
      margin-top: 40px
  }

  .d\:mart-50 {
      margin-top: 50px
  }

  .d\:mart-60 {
      margin-top: 60px
  }

  .d\:mart-70 {
      margin-top: 70px
  }

  .d\:mart-80 {
      margin-top: 80px
  }

  .d\:mart-90 {
      margin-top: 90px
  }

  .d\:mart-100 {
      margin-top: 100px
  }

  .d\:mart-120 {
      margin-top: 120px
  }

  .d\:mart-160 {
      margin-top: 160px
  }

  .d\:marr-auto {
      margin-right: auto
  }

  .d\:marr-0 {
      margin-right: 0
  }
  .d\:marr-5 {
    margin-right: 5px
}
  .d\:marr-10 {
      margin-right: 10px
  }
  .d\:marr-15 {
    margin-right: 15px
}
  .d\:marr-20 {
      margin-right: 20px
  }

  .d\:marr-30 {
      margin-right: 30px
  }

  .d\:marr-40 {
      margin-right: 40px
  }

  .d\:marr-50 {
      margin-right: 50px
  }

  .d\:marr-60 {
      margin-right: 60px
  }

  .d\:marr-70 {
      margin-right: 70px
  }

  .d\:marr-80 {
      margin-right: 80px
  }

  .d\:marr-90 {
      margin-right: 90px
  }

  .d\:marr-100 {
      margin-right: 100px
  }

  .d\:marr-120 {
      margin-right: 120px
  }

  .d\:marr-160 {
      margin-right: 160px
  }

  .d\:marb-auto {
      margin-bottom: auto
  }

  .d\:marb-0 {
      margin-bottom: 0
  }
  .d\:marb-5 {
    margin-bottom: 5px
}
  .d\:marb-15 {
      margin-bottom: 15px
  }

  .d\:marb-20 {
      margin-bottom: 20px
  }

  .d\:marb-30 {
      margin-bottom: 30px
  }

  .d\:marb-40 {
      margin-bottom: 40px
  }

  .d\:marb-50 {
      margin-bottom: 50px
  }

  .d\:marb-60 {
      margin-bottom: 60px
  }

  .d\:marb-70 {
      margin-bottom: 70px
  }

  .d\:marb-80 {
      margin-bottom: 80px
  }

  .d\:marb-90 {
      margin-bottom: 90px
  }

  .d\:marb-100 {
      margin-bottom: 100px
  }

  .d\:marb-120 {
      margin-bottom: 120px
  }

  .d\:marb-160 {
      margin-bottom: 160px
  }

  .d\:marl-auto {
      margin-left: auto
  }

  .d\:marl-0 {
      margin-left: 0
  }
  .d\:marl-5 {
    margin-left: 5px
}
  .d\:marl-10 {
      margin-left: 10px
  }
  .d\:marl-15 {
    margin-left: 15px
}

  .d\:marl-20 {
      margin-left: 20px
  }

  .d\:marl-30 {
      margin-left: 30px
  }

  .d\:marl-40 {
      margin-left: 40px
  }

  .d\:marl-50 {
      margin-left: 50px
  }

  .d\:marl-60 {
      margin-left: 60px
  }

  .d\:marl-70 {
      margin-left: 70px
  }

  .d\:marl-80 {
      margin-left: 80px
  }

  .d\:marl-90 {
      margin-left: 90px
  }

  .d\:marl-100 {
      margin-left: 100px
  }

  .d\:marl-120 {
      margin-left: 120px
  }

  .d\:marl-160 {
      margin-left: 160px
  }

  .d\:pad-0 {
      padding: 0
  }
  .d\:pad-5 {
    padding: 5px
}
  .d\:pad-10 {
      padding: 10px
  }
  .d\:pad-15 {
    padding: 15px
}
  .d\:pad-20 {
      padding: 20px
  }

  .d\:pad-30 {
      padding: 30px
  }

  .d\:pad-40 {
      padding: 40px
  }

  .d\:pad-50 {
      padding: 50px
  }

  .d\:pad-60 {
      padding: 60px
  }

  .d\:pad-70 {
      padding: 70px
  }

  .d\:pad-80 {
      padding: 80px
  }

  .d\:pad-90 {
      padding: 90px
  }

  .d\:pad-100 {
      padding: 100px
  }

  .d\:padt-0 {
      padding-top: 0
  }
  .d\:padt-5 {
    padding-top: 5px
}
  .d\:padt-10 {
      padding-top: 10px
  }
  .d\:padt-15 {
    padding-top: 15px
}
  .d\:padt-20 {
      padding-top: 20px
  }

  .d\:padt-30 {
      padding-top: 30px
  }

  .d\:padt-40 {
      padding-top: 40px
  }

  .d\:padt-50 {
      padding-top: 50px
  }

  .d\:padt-60 {
      padding-top: 60px
  }

  .d\:padt-70 {
      padding-top: 70px
  }

  .d\:padt-80 {
      padding-top: 80px
  }

  .d\:padt-90 {
      padding-top: 90px
  }

  .d\:padt-100 {
      padding-top: 100px
  }

  .d\:padr-0 {
      padding-right: 0
  }
  .d\:padr-5 {
    padding-right: 5px
}
.d\:padr-10 {
  padding-right: 10px
}
  .d\:padr-15 {
      padding-right: 15px
  }

  .d\:padr-20 {
      padding-right: 20px
  }

  .d\:padr-30 {
      padding-right: 30px
  }

  .d\:padr-40 {
      padding-right: 40px
  }

  .d\:padr-50 {
      padding-right: 50px
  }

  .d\:padr-60 {
      padding-right: 60px
  }

  .d\:padr-70 {
      padding-right: 70px
  }

  .d\:padr-80 {
      padding-right: 80px
  }

  .d\:padr-90 {
      padding-right: 90px
  }

  .d\:padr-100 {
      padding-right: 100px
  }

  .d\:padb-0 {
      padding-bottom: 0
  }

  .d\:padb-5 {
      padding-bottom: 5px
  }
  .d\:padb-10 {
    padding-bottom: 10px
}
.d\:padb-15 {
  padding-bottom: 15px
}

  .d\:padb-20 {
      padding-bottom: 20px
  }

  .d\:padb-30 {
      padding-bottom: 30px
  }

  .d\:padb-40 {
      padding-bottom: 40px
  }

  .d\:padb-50 {
      padding-bottom: 50px
  }

  .d\:padb-60 {
      padding-bottom: 60px
  }

  .d\:padb-70 {
      padding-bottom: 70px
  }

  .d\:padb-80 {
      padding-bottom: 80px
  }

  .d\:padb-90 {
      padding-bottom: 90px
  }

  .d\:padb-100 {
      padding-bottom: 100px
  }

  .d\:padl-0 {
      padding-left: 0
  }

  .d\:padl-5 {
      padding-left: 5px
  }
  
  .d\:padl-10 {
    padding-left: 10px
}

.d\:padl-15 {
  padding-left: 15px
}

  .d\:padl-20 {
      padding-left: 20px
  }

  .d\:padl-30 {
      padding-left: 30px
  }

  .d\:padl-40 {
      padding-left: 40px
  }

  .d\:padl-50 {
      padding-left: 50px
  }

  .d\:padl-60 {
      padding-left: 60px
  }

  .d\:padl-70 {
      padding-left: 70px
  }

  .d\:padl-80 {
      padding-left: 80px
  }

  .d\:padl-90 {
      padding-left: 90px
  }

  .d\:padl-100 {
      padding-left: 100px
  }
}

@media only screen and (min-width: 1200px) {
  .xl\:mar-15- {
    margin: -15px;
  }

  .xl\:mar-50- {
    margin: -50px;
  }
  .xl\:mar-auto {
      margin: auto
  }

  .xl\:mar-0 {
      margin: 0
  }

  .xl\:mar-5 {
    margin: 5px
}
.xl\:mar-10 {
  margin: 10px
}
  .xl\:mar-15 {
      margin: 15px
  }

  .xl\:mar-20 {
      margin: 20px
  }

  .xl\:mar-30 {
      margin: 30px
  }

  .xl\:mar-40 {
      margin: 40px
  }

  .xl\:mar-50 {
      margin: 50px
  }

  .xl\:mar-60 {
      margin: 60px
  }

  .xl\:mar-70 {
      margin: 70px
  }

  .xl\:mar-80 {
      margin: 80px
  }

  .xl\:mar-90 {
      margin: 90px
  }

  .xl\:mar-100 {
      margin: 100px
  }

  .xl\:mart-auto {
      margin-top: auto
  }

  .xl\:mart-0 {
      margin-top: 0
  }

  .xl\:mart-5 {
      margin-top: 5px
  }
  .xl\:mart-10 {
    margin-top: 10px
}
.xl\:mart-15 {
  margin-top: 15px
}
  .xl\:mart-20 {
      margin-top: 20px
  }

  .xl\:mart-30 {
      margin-top: 30px
  }

  .xl\:mart-40 {
      margin-top: 40px
  }

  .xl\:mart-50 {
      margin-top: 50px
  }

  .xl\:mart-60 {
      margin-top: 60px
  }

  .xl\:mart-70 {
      margin-top: 70px
  }

  .xl\:mart-80 {
      margin-top: 80px
  }

  .xl\:mart-90 {
      margin-top: 90px
  }

  .xl\:mart-100 {
      margin-top: 100px
  }

  .xl\:mart-120 {
      margin-top: 120px
  }

  .xl\:mart-160 {
      margin-top: 160px
  }

  .xl\:marr-auto {
      margin-right: auto
  }

  .xl\:marr-0 {
      margin-right: 0
  }
  .xl\:marr-5 {
    margin-right: 5px
}
.xl\:marr-10 {
  margin-right: 10px
}
  .xl\:marr-15 {
      margin-right: 15px
  }

  .xl\:marr-20 {
      margin-right: 20px
  }

  .xl\:marr-30 {
      margin-right: 30px
  }

  .xl\:marr-40 {
      margin-right: 40px
  }

  .xl\:marr-50 {
      margin-right: 50px
  }

  .xl\:marr-60 {
      margin-right: 60px
  }

  .xl\:marr-70 {
      margin-right: 70px
  }

  .xl\:marr-80 {
      margin-right: 80px
  }

  .xl\:marr-90 {
      margin-right: 90px
  }

  .xl\:marr-100 {
      margin-right: 100px
  }

  .xl\:marr-120 {
      margin-right: 120px
  }

  .xl\:marr-160 {
      margin-right: 160px
  }

  .xl\:marb-auto {
      margin-bottom: auto
  }

  .xl\:marb-0 {
      margin-bottom: 0
  }

  .xl\:marb-5 {
      margin-bottom: 5px
  }
  .xl\:marb-10 {
    margin-bottom: 10px
}
.xl\:marb-15 {
  margin-bottom: 15px
}

  .xl\:marb-20 {
      margin-bottom: 20px
  }

  .xl\:marb-30 {
      margin-bottom: 30px
  }

  .xl\:marb-40 {
      margin-bottom: 40px
  }

  .xl\:marb-50 {
      margin-bottom: 50px
  }

  .xl\:marb-60 {
      margin-bottom: 60px
  }

  .xl\:marb-70 {
      margin-bottom: 70px
  }

  .xl\:marb-80 {
      margin-bottom: 80px
  }

  .xl\:marb-90 {
      margin-bottom: 90px
  }

  .xl\:marb-100 {
      margin-bottom: 100px
  }

  .xl\:marb-120 {
      margin-bottom: 120px
  }

  .xl\:marb-160 {
      margin-bottom: 160px
  }

  .xl\:marl-auto {
      margin-left: auto
  }

  .xl\:marl-0 {
      margin-left: 0
  }

  .xl\:marl-5 {
      margin-left: 5px
  }
  .xl\:marl-10 {
    margin-left: 10px
}
.xl\:marl-15 {
  margin-left: 15px
}

  .xl\:marl-20 {
      margin-left: 20px
  }

  .xl\:marl-30 {
      margin-left: 30px
  }

  .xl\:marl-40 {
      margin-left: 40px
  }

  .xl\:marl-50 {
      margin-left: 50px
  }

  .xl\:marl-60 {
      margin-left: 60px
  }

  .xl\:marl-70 {
      margin-left: 70px
  }

  .xl\:marl-80 {
      margin-left: 80px
  }

  .xl\:marl-90 {
      margin-left: 90px
  }

  .xl\:marl-100 {
      margin-left: 100px
  }

  .xl\:marl-120 {
      margin-left: 120px
  }

  .xl\:marl-160 {
      margin-left: 160px
  }

  .xl\:pad-0 {
      padding: 0
  }

  .xl\:pad-5 {
      padding: 5px
  }
  .xl\:pad-10 {
    padding: 10px
}
.xl\:pad-15 {
  padding: 15px
}

  .xl\:pad-20 {
      padding: 20px
  }

  .xl\:pad-30 {
      padding: 30px
  }

  .xl\:pad-40 {
      padding: 40px
  }

  .xl\:pad-50 {
      padding: 50px
  }

  .xl\:pad-60 {
      padding: 60px
  }

  .xl\:pad-70 {
      padding: 70px
  }

  .xl\:pad-80 {
      padding: 80px
  }

  .xl\:pad-90 {
      padding: 90px
  }

  .xl\:pad-100 {
      padding: 100px
  }

  .xl\:padt-0 {
      padding-top: 0
  }

  .xl\:padt-5 {
      padding-top: 5px
  }
  .xl\:padt-10 {
    padding-top: 10px
}
.xl\:padt-15 {
  padding-top: 15px
}

  .xl\:padt-20 {
      padding-top: 20px
  }

  .xl\:padt-30 {
      padding-top: 30px
  }

  .xl\:padt-40 {
      padding-top: 40px
  }

  .xl\:padt-50 {
      padding-top: 50px
  }

  .xl\:padt-60 {
      padding-top: 60px
  }

  .xl\:padt-70 {
      padding-top: 70px
  }

  .xl\:padt-80 {
      padding-top: 80px
  }

  .xl\:padt-90 {
      padding-top: 90px
  }

  .xl\:padt-100 {
      padding-top: 100px
  }

  .xl\:padr-0 {
      padding-right: 0
  }

  .xl\:padr-5 {
      padding-right: 5px
  }
  .xl\:padr-10 {
    padding-right: 10px
}
.xl\:padr-15 {
  padding-right: 15px
}

  .xl\:padr-20 {
      padding-right: 20px
  }

  .xl\:padr-30 {
      padding-right: 30px
  }

  .xl\:padr-40 {
      padding-right: 40px
  }

  .xl\:padr-50 {
      padding-right: 50px
  }

  .xl\:padr-60 {
      padding-right: 60px
  }

  .xl\:padr-70 {
      padding-right: 70px
  }

  .xl\:padr-80 {
      padding-right: 80px
  }

  .xl\:padr-90 {
      padding-right: 90px
  }

  .xl\:padr-100 {
      padding-right: 100px
  }

  .xl\:padb-0 {
      padding-bottom: 0
  }

  .xl\:padb-5 {
      padding-bottom: 5px
  }
  .xl\:padb-10 {
    padding-bottom: 10px
}
.xl\:padb-15 {
  padding-bottom: 15px
}

  .xl\:padb-20 {
      padding-bottom: 20px
  }

  .xl\:padb-30 {
      padding-bottom: 30px
  }

  .xl\:padb-40 {
      padding-bottom: 40px
  }

  .xl\:padb-50 {
      padding-bottom: 50px
  }

  .xl\:padb-60 {
      padding-bottom: 60px
  }

  .xl\:padb-70 {
      padding-bottom: 70px
  }

  .xl\:padb-80 {
      padding-bottom: 80px
  }

  .xl\:padb-90 {
      padding-bottom: 90px
  }

  .xl\:padb-100 {
      padding-bottom: 100px
  }

  .xl\:padl-0 {
      padding-left: 0
  }

  .xl\:padl-5 {
      padding-left: 5px
  }
  .xl\:padl-10 {
    padding-left: 10px
}
.xl\:padl-15 {
  padding-left: 15px
}

  .xl\:padl-20 {
      padding-left: 20px
  }

  .xl\:padl-30 {
      padding-left: 30px
  }

  .xl\:padl-40 {
      padding-left: 40px
  }

  .xl\:padl-50 {
      padding-left: 50px
  }

  .xl\:padl-60 {
      padding-left: 60px
  }

  .xl\:padl-70 {
      padding-left: 70px
  }

  .xl\:padl-80 {
      padding-left: 80px
  }

  .xl\:padl-90 {
      padding-left: 90px
  }

  .xl\:padl-100 {
      padding-left: 100px
  }
}

/* ---------- END OF UTILITY --------- */