/* -----------   IMPORT DEFAULT   ---------------------------------------
   ---------------------------------------------------------------------- */
/* ----------------------------------------------------------------------
	LESS > MIXINS / SHORTCUTS / PRESETS
   ---------------------------------------------------------------------- */
/* Misc */
/*

    .opacity (@opacity: 0.5)
    .scroll-flow-touch
    .noisy-bg (@bg-color)
    .background-size (@size) */
/* Element Appearance */
/*

    .box-shadow (@x, @y, @blur, @color)
    .drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25)
    .inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25)
    .border-radius (@top-left: 0, @top-right: 0, @bottom-right: 0, @bottom-left: 0)
    .gradient (@startColor: #eee, @endColor: white)
    .horizontal-gradient (@startColor: #eee, @endColor: white)
        .box-sizing (@type: border-box) */
/* Text / Font */
/*

    .font-size(@size)
    .text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25))
    .no-wrap
    .word-wrap */
/* Transition & Transform */
/* Quick-Presets */
/*
    .scale (@factor)
    .rotate (@deg)
    .skew (@deg, @deg2) */
/* Animation & Transition */
/*
    .animation (@name, @duration: 300ms, @delay: 0, @ease: ease)
    .transition (@transition)
         * transition-property
         * transition-duration
         * transition-timing-function --- linear | ease | ease-in | ease-out | ease-in-out
         * transition-delay */
/* Transform */
/*
    .transform-simple (@transform-function, @transform-origin: 50% 50% 0)
         * @transform-function ---
           scale(x,y) | scale3d(x,y,z) | scaleX(x) | scaleY(y) | scaleZ(z)
           rotate(angle) | rotate3d(x,y,z,angle) | rotateX(angle) | rotateY(angle) | rotateZ(angle)
           translate(x,y) | translate3d(x,y,z) | translateX(x) | translateY(y) | translateZ(z)
           skew(x-angle,y-angle) | skewX(angle) | skewY(angle)
           matrix(n,n,n,n,n,n) | matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
           perspective(n)
    .transform (@transform-function, @transform-origin: 50% 50% 0, @transform-style: flat, @perspective: none, @perspective-origin: 50% 50%, @backface-visibility: visible)
         * --- http://www.w3schools.com/cssref/css3_pr_transform.asp ---
         *
         * @transform-function:  scale(x,y) | scale3d(x,y,z) | scaleX(x) | scaleY(y) | scaleZ(z)
         *                       rotate(angle) | rotate3d(x,y,z,angle) | rotateX(angle) | rotateY(angle) | rotateZ(angle)
         *                       translate(x,y) | translate3d(x,y,z) | translateX(x) | translateY(y) | translateZ(z)
         *                       skew(x-angle,y-angle) | skewX(angle) | skewY(angle)
         *                       matrix(n,n,n,n,n,n) | matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
         *                       perspective(n)
         *
         * @transform-origin
         *           x-axis:     left | center | right | length | %
         *           y-axis:     top | center | bottom | length | %
         *           z-axis:     length
         *
         * @transform-style:     flat | preserve-3d
         *
         * @perspective:         length (recommended range: 0-2000)
         *
         * @perspective-origin
         *            x-axis:    left | center | right | length | %
         *            y-axis:    top | center | bottom | length | %
         *
         * @backface-visibility: visible | hidden
    .alt--- !

/* Translate */
/*
    .translate (@x, @y:0)
    .translate3d (@x, @y: 0, @z: 0) */
#less {
  /* Misc */
  /* Text / Font */
  /* Element Appearance */
  /* Shortcut needed? */
  /* Transition & Transform */
  /* Quick-Presets */
  /* scale  rotate  skew */
  /* Animation & Transition */
  /* NOT WORKING !!!
   .keyf (@name, @frames) {
      @-webkit-keyframes @name {
          @frames;
      }
      @keyframes @name {
          @frames;
      }
  } */
  /* Transform */
  /* transform  transform-origin  perspective */
  /* Alternativ (nicht immer vollständige Definition inkl. vordefinierter Regeln) */
  /* Translate */
  /* translate  translate3d */
}
#less .pointer {
  cursor: pointer;
}
#less .scroll-flow-touch {
  /** softer scrolling on iOS/Android for containers */
  -webkit-overflow-scrolling: touch;
}
#less .no-wrap {
  white-space: nowrap;
}
#less .word-wrap {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
/* ----------------------------------------------------------------------
	FONTS
   ---------------------------------------------------------------------- */
/*
    * see assets/font/fonts.css
    * Cross-Browser Support :: WOFF or TTF/OTF
 */
/* ----------------------------------------------------------------------
	COLOR PALETTE
   ----------------------------------------------------------------------

	/* Corporate Design Colors */
/*neutral*/
/*main 1*/
/*main 2*/
/*accents*/
/* Accent Shades */
/* Default Colors */
/* Text | Light Theme */
/* Text | Dark Theme */
/* Backgrounds | Light / Dark Theme (e.g. Apps) */
/* grey 50 */
/* dialog/cars */
/* app bar, grey 100 */
/* os status bar, grey 300 */
/* default */
/* dialog/cars, grey 800 */
/* app bar, grey 900 */
/* os status bar, black */
/* -----------   PAGE STATIC   ------------------------------------------
   ---------------------------------------------------------------------- */
#header__main,
#header__main > .section__inner > .header__inner > .header__bar {
  background-image: url("/jakarta.faces.resource/emobility/andynformatics_header-emobility.png.html?ln=img");
}
/*.section__inner {
      .center-block {
          display: inline-block;
          width: auto;
          margin: 0 auto;
          text-align: left;
      }
  }*/
/* TOP */
.section--1 > .section__inner h3 {
  margin-bottom: 0px !important;
}
.section--1 > .section__inner h4 {
  margin-top: 0px !important;
  line-height: 1 !important;
}
section > .section__inner .card {
  display: inline-block;
  width: 48.5%;
  margin: 1.5%;
  padding-top: 5px;
  position: relative;
  float: left;
  font-size: 12.75px;
  font-size: 85%;
  font-size: 0.85rem;
  /*font-size: ~"@{vwSize}vw"; */
  background: #046cb4;
  border: 6px solid #046cb4;
}
section > .section__inner .card:nth-of-type(odd) {
  margin-left: 0;
}
section > .section__inner .card:nth-of-type(even) {
  margin-right: 0;
}
section > .section__inner .card > .card_img {
  width: 100px;
  height: 130px;
  margin: 0 2%;
  position: relative;
  overflow: visible;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
section > .section__inner .card > .card_img > span {
  width: 100px;
  height: 80px;
  position: absolute;
  top: 25px;
}
section > .section__inner .card > .card_img > span:before {
  content: "";
  position: absolute;
  top: -25px;
  left: -3px;
  width: 0;
  height: 0;
  border-right: 53px solid #046cb4 !important;
  border-left: 53px solid #046cb4 !important;
  border-bottom: 25px solid transparent;
}
section > .section__inner .card > .card_img > span:after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: -3px;
  width: 0;
  height: 0;
  border-right: 53px solid #ffffff;
  border-left: 53px solid #ffffff;
  border-top: 25px solid transparent;
}
section > .section__inner .card > h5 {
  display: block;
  font-size: 21px;
  font-size: 140%;
  font-size: 1.4rem;
  /*font-size: ~"@{vwSize}vw"; */
  color: rgba(255, 255, 255, 0.87);
  overflow: hidden;
  padding: 24px;
}
section > .section__inner .card .card_desc {
  display: block;
  min-height: 150px;
  padding: 24px 24px 24px 34px;
  background: #ffffff;
  border-top: 6px solid #b52822;
  line-height: 1.6;
  font-size: 135%;
}
section > .section__inner .card .card_desc > ul {
  padding: 0 15px;
  list-style-image: url("/jakarta.faces.resource/andynformatics-star-small.png.html?ln=img");
}
section > .section__inner .card.highlight {
  background: #b52822 !important;
  border: 6px solid #b52822 !important;
}
section > .section__inner .card.highlight > .card_img > span:before {
  border-right-color: #b52822 !important;
  border-left-color: #b52822 !important;
}
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* ---------------------------------------------------------------------- */
/* -----------   IMPORT DEFAULT   ---------------------------------------
   ---------------------------------------------------------------------- */
/* -----------   RESPONSIVE   -------------------------------------------
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  section > .section__inner .card > h5 {
    font-size: 18px;
    font-size: 120%;
    font-size: 1.2rem;
    /*font-size: ~"@{vwSize}vw"; */
  }
}
@media (max-width: 768px) {
  section > .section__inner .card {
    display: block;
    width: 100%;
    margin: 30px 0;
    float: none;
  }
}
