@charset 'iso-8859-1';
@import  url('/csp/shop/bpmweb/css/web-base.css');

/*
file     web-customer.css
license  (c) 2013 bpm consult ag, CH-Birsfelden - all rights reserved.

version history:
3.1.0-0  08.08.2013  sb  initial version
 
bpm colors:
blue:    #0b479d #3b6cb1 #6c90c4 #9db5d8 #cedaeb
ocean:   #00705a #338c7b #66a99c #99c5bd #cce2de
green:   #5f7000 #7f8c33 #9fa966 #bfc599 #dfe2cc
yellow:  #be8500 #cb9d33 #d8b666 #e5ce99 #f2e6cc
brown:   #964000 #ab6633 #c08c66 #d5b299 #ead8cc
red:     #a0001b #b33348 #c66676 #d999a3 #ecccd1
purple:  #5e009b #7e33af #9e66c3 #be99d7 #decceb
grey:    #868e90 #9ea5a6 #b6bbbc #ced2d2 #e6e8e8
black:   #333333 #5b5b5b #848484 #adadad #d6d6d6 #eeeeee #ffffff
*/

/* ----------------------------- fonts */
@font-face {
  font-family:                   'Fira Sans Bold';
  src:                           url('fonts/FiraSans-Bold.eot');
  src:                           local('Fira Sans Bold'),
                                 url('fonts/FiraSans-Bold.eot?#iefix') format('embedded-opentype'),
                                 url('fonts/FiraSans-Bold.woff') format('woff'),
                                 url('fonts/FiraSans-Bold.ttf') format('truetype'),
                                 url('fonts/FiraSans-Bold.svg#fira_sans_otbold') format('svg');
  font-weight:                   normal;
  font-style:                    normal;
}
@font-face {
  font-family:                   'Fira Sans Light';
  src:                           url('fonts/FiraSans-Light.eot');
  src:                           local('Fira Sans Light'),
                                 url('fonts/FiraSans-Light.eot?#iefix') format('embedded-opentype'),
                                 url('fonts/FiraSans-Light.woff') format('woff'),
                                 url('fonts/FiraSans-Light.ttf') format('truetype'),
                                 url('fonts/FiraSans-Light.svg#fira_sans_otlight') format('svg');
  font-weight:                   normal;
  font-style:                    normal;
}
@font-face {
  font-family:                   'Fira Sans Medium';
  src:                           url('fonts/FiraSans-Medium.eot');
  src:                           local('Fira Sans Medium'),
                                 url('fonts/FiraSans-Medium.eot?#iefix') format('embedded-opentype'),
                                 url('fonts/FiraSans-Medium.woff') format('woff'),
                                 url('fonts/FiraSans-Medium.ttf') format('truetype'),
                                 url('fonts/FiraSans-Medium.svg#fira_sans_otmedium') format('svg');
  font-weight:                   normal;
  font-style:                    normal;
}
@font-face {
  font-family:                   'Fira Sans Regular';
  src:                           url('fonts/FiraSans-Regular.eot');
  src:                           local('Fira Sans Regular'),
                                 url('fonts/FiraSans-Regular.eot?#iefix') format('embedded-opentype'),
                                 url('fonts/FiraSans-Regular.woff') format('woff'),
                                 url('fonts/FiraSans-Regular.ttf') format('truetype'),
                                 url('fonts/FiraSans-Regular.svg#fira_sans_otregular') format('svg');
  font-weight:                   normal;
  font-style:                    normal;
}

/* ----------------------------- media queries */
/* desktop */
html {
  height:                        100%;
  font-family:                   'Fira Sans Light', sans-serif;
  font-size:                     62.5%;
}
/* tablet and smartphone */
@media screen and (max-width: 1024px) and (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  html {
  font-size:                     50%;
  }
}

/* ----------------------------- body */
body {
  margin:                        0 auto 0 auto;
  box-shadow:                    inset 0 0.4rem 0.4rem 0 rgba(0,0,0,0.2);
  background-color:              #e6e8e8;
  background-image:              url('images/header.jpg');
  background-position:           center top;
  background-repeat:             no-repeat;
  background-size:               100% 9rem;
  font-size:                     1.6rem;
  text-align:                    center;
}
body > .body {
  display:                       inline-block;
  min-height:                    calc(100% - 29rem);
  width:                         100%;
  white-space:                   nowrap;
}
body > .body > div {
  text-align:                    left;
  white-space:                   normal;
}

/* ----------------------------- headings */
h2 {
  margin:                        1.6rem;
  color:                         #0b479d;
  line-height:                   120%;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     3.2rem;
  font-weight:                   normal;
}

/* ----------------------------- clip icon */
.clipIcon {
  position:                      relative;
  display:                       inline-block;
  height:                        2.2rem;
  min-width:                     2.2rem;
  cursor:                        pointer;
  text-align:                    left;
}
.clipIcon img {
  position:                      absolute;
  clip:                          rect(0, 2.2rem, 2.2rem, 0);
}
.clipIcon:hover img  {
  margin-top:                    -2.2rem;
  clip:                          rect(2.2rem, 2.2rem, 4.4rem, 0);
}

/* ----------------------------- links */
a {
  color:                         #0b479d;
  text-decoration:               none;
}
a:hover,
a:focus,
a:active {
  color:                         #a0001b;
  text-decoration:               none;
}
.link {
  display:                       block;
}
.link:first-child {
  margin-top:                    1.6rem;
}

/* link with icon */
.link.clipIcon {
  margin:                        1.6rem 0 1.6rem 0;
  padding-left:                  2.6rem;
  line-height:                   2.4rem;
}
.link.clipIcon img {
  left:                          0;
  width:                         2.2rem;
  height:                        4.4rem;
}

/* ----------------------------- button */
.button {
  display:                       inline-block;
  height:                        2.8rem;
  box-shadow:                    inset 0 0.1rem 0 0 rgba(255,255,255,0.4);
  transition:                    all 0.2s ease-in-out;
  margin:                        0.4rem 0.4rem 0.4rem 0;
  border:                        0.1rem solid #3b6cb1;
  border-top-color:              #6c90c4;
  border-radius:                 0.8rem;
  background-color:              #0b479d;
  background-image:              -webkit-linear-gradient(top, #6c90c4, #0b479d);
  background-image:                 -moz-linear-gradient(top, #6c90c4, #0b479d);
  background-image:                  -ms-linear-gradient(top, #6c90c4, #0b479d);
  background-image:                      linear-gradient(top, #6c90c4, #0b479d);
  cursor:                        pointer;
  white-space:                   nowrap;
}
.button:hover, .button:focus, .button:active {
  box-shadow:                    inset 0 0.1rem 0 0 rgba(255,255,255,0.2);
  background-image:              -webkit-linear-gradient(top, #3b6cb1, #0b479d);
  background-image:                 -moz-linear-gradient(top, #3b6cb1, #0b479d);
  background-image:                  -ms-linear-gradient(top, #3b6cb1, #0b479d);
  background-image:                      linear-gradient(top, #3b6cb1, #0b479d);
}
.button input[type=submit],
.button input[type=reset],
.button button,
.button span,
.button a {
  display:                       inline-block;
  outline:                       none;
  height:                        1.6rem;
  padding:                       0.5rem 0.8rem 0.5rem 0.8rem;
  background-color:              transparent;
  color:                         #ffffff;
  line-height:                   1.8rem;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     1.4rem;
  font-weight:                   normal;
  text-decoration:               none;
  text-align:                    left;
}
.button input[type=submit],
.button input[type=reset] {
  -webkit-box-sizing:            content-box;
     -moz-box-sizing:            content-box;
          box-sizing:            content-box;
}
.button input[type=submit]:hover,
.button input[type=reset]:hover,
.button button:hover,
.button span:hover,
.button a:hover {
  outline:                       none;
}

/* buttons with icon */
.button.clipIcon:before {
  content:                       "\00a0";
  float:                         left;
  height:                        2.8rem;
  width:                         2.8rem;
  box-shadow:                    0.1rem 0 0 0 rgba(0,0,0,0.5), 0.2rem 0 0 0 rgba(255,255,255,0.2);
  border-radius:                 0.2rem 0 0 0.2rem;
  background-color:              rgba(0,0,0,0.04);
  pointer-events:                none;
}
.button.clipIcon img {
  top:                           0.3rem;
  left:                          0.3rem;
  width:                         2.2rem;
  height:                        4.4rem;
}
.button.clipIcon input[type=submit],
.button.clipIcon input[type=reset],
.button.clipIcon button,
.button.clipIcon span,
.button.clipIcon a {
  margin-left:                   -2.2rem;
  padding-left:                  3rem;
}

/* download button */
.button.download {
  display:                       block;
  width:                         30rem;
  margin-bottom:                 0.8rem;
  margin-left:                   15rem;
}
.button.download div {
  display:                       inline;
}
.button.download a {
  height:                        2.4rem;
  padding:                       0.2rem 0.8rem 0.2rem 0.8rem;
  font-size:                     1.6rem;
  line-height:                   2.4rem;
  vertical-align:                bottom;
}
.button.download > a {
  display:                       block;
}
.button.download > a div span {
  display:                       inline;
  vertical-align:                top;
}
.button.download div:first-child a {
  padding-right:                 0;
}
.button.download a img {
  height:                        2.4rem !important;
  width:                         auto !important;
}
.button.download a span {
  height:                        auto;
  padding:                       0;
  font-size:                     inherit;
  line-height:                   inherit;
  vertical-align:                middle;
}

/* ----------------------------- form */
.form {
  max-width:                     100rem;
  margin:                        1.6rem;
}
.form > div {
  white-space:                   nowrap;
}
.form .key,
.form .value {
  padding-top:                   0.8rem;
  line-height:                   2.4rem;
}
.form .key {
  width:                         16.8rem;
  padding-right:                 0.2rem;
}
.form .value {
  width:                         calc(100% - 17rem);
}
.form .value img:only-child {
  height:                        10rem;
  width:                         auto;
}
.form .half {
  display:                       inline-block;
  width:                         45%;
  padding-top:                   1rem;
  vertical-align:                top;
}
.form .textAfter {
  position:                      relative;
  display:                       inline-block;
  width:                         40%;
  line-height:                   2.4rem;
}
.form .textAfter .key {
  width:                         auto;
  padding:                       1rem 0 0 2.4rem;
}
.form .textAfter .value {
  position:                      absolute;
  left:                          0;
  width:                         auto;
}
.form .actions {
  display:                       inline-block;
  margin-left:                   17rem;
}
.form .actions .button {
  min-width:                     12rem;
}
.form .actions .button input {
  display:                       block;
  height:                        calc(100% - 1rem);
  width:                         calc(100% - 1.6rem);
  text-align:                    center;
}
.form .formHeading {
  margin-top:                    1.6rem;
  word-spacing:                  normal;
}

/* counter */
.counter {
  width:                         100%;
  color:                         #868e90;
  font-size:                     1.2rem;
  line-height:                   normal;
}
.counter input[type=text] {
  width:                         2.4rem;
  max-width:                     2.4rem;
  box-shadow:                    inset 0 0 0 0 transparent;
  padding:                       0;
  color:                         #868e90;
  cursor:                        default;
  font-size:                     1.2rem;
  text-align:                    right;
}

/* fields */
input::-moz-placeholder {
  color:                         #868e90;
}
input::-webkit-input-placeholder {
  color:                         #868e90;
}
input[type=text],
input[type=password],
input[type=file],
input[type=email],
input[type=url],
input[type=number],
input[type=date],
input[type=time],
input[type=search],
input[type=tel],
select,
textarea {
  -webkit-box-sizing:            border-box;
     -moz-box-sizing:            border-box;
      -ms-box-sizing:            border-box;
          box-sizing:            border-box;
  width:                         100%;
  box-shadow:                    inset 0.1rem 0.1rem 0.2rem 0 rgba(0,0,0,0.2);
  border:                        0.1rem solid #868e90;
  border-radius:                 0.2rem;
  padding:                       0.2rem;
  background-color:              #ffffff;
  color:                         #333333;
  font-family:                   'Fira Sans Light', sans-serif;
  font-size:                     1.4rem;
}
textarea {
  height:                        10rem;
}
input[type="checkbox"],
input[type="radio"] {
  margin-right:                  0.4rem;
  vertical-align:                middle;
}

/* actions */
.actions,
.pagination {
  margin:                        1.6rem;
}

/* ----------------------------- bold */
b, strong, bold {
  font-family:                   'Fira Sans Medium', sans-serif;
  font-weight:                   normal;
}

/* ----------------------------- paging */
.paging {
  letter-spacing:                -0.4rem;
}
.paging > * {
  padding:                       0 0.2rem 0 0.2rem;
  letter-spacing:                normal;
}
.pagination.genericExpand {
  text-align:center;
}
.pagination.genericExpand a {
  -moz-border-bottom-colors:     none;
  -moz-border-left-colors:       none;
  -moz-border-right-colors:      none;
  -moz-border-top-colors:        none;
  background-color:              #CED2D2;
  background-image:              -moz-linear-gradient(center top , #E6E8E8, #CED2D2);
  border-color:                  #CED2D2 #B6BBBC #B6BBBC;
  border-image:                  none;
  border-radius:                 0.4rem;
  border-right:                  0.1rem solid #B6BBBC;
  border-style:                  solid;
  border-width:                  0.1rem;
  padding:                       1rem;
  vertical-align:                top;
  padding:                       1rem 3rem;
  color:                         #848484;
}
.pagination.genericExpand a:hover {               
  color:                         #5b5b5b;
}
/* ----------------------------- header */
.header {
  position:                      relative;
  z-index:                       100;
  height:                        12.8rem;
  width:                         100%;
  background-image:              url('images/cloud.png');
  background-repeat:             no-repeat;
  background-size:               15rem 9rem;
  text-align:                    left;
}
.header .top a {
  display:                       block;
  height:                        6rem;
  /* background-image:              url('images/bpmBodies_xmas.png'); */
  background-image:              url('images/bpmBodies.png');
  background-repeat:             no-repeat;
  background-size:               10rem 6rem;
}
.header .nav {
  height:                        3rem;
  background-color:              #0b479d;
  opacity:                       0.8;
  overflow:                      hidden;
  white-space:                   nowrap;
}
.header .nav.fixed {
  position:                      fixed;
  z-index:                       1000;
  top:                           0;
  width:                         100%;
}
.header .nav > a:first-child {
  float:                         left;
  height:                        3rem;
  width:                         10rem;
  background-image:              url('images/bpmText.png');
  background-repeat:             no-repeat;
  background-size:               10rem 3rem;
}
.header .nav > div {
  display:                       inline-block;
  width:                         calc(100% - 10.4rem);
  white-space:                   nowrap;
}
.header .nav ul {
  display:                       table;
  height:                        3rem;
  width:                         70%;
  margin-left:                   10%;
}
.header .nav li ul {
  position:                      absolute;
  display:                       block;
  overflow:                      hidden;
  left:                          0;
  width:                         calc(90% - 6.6rem);
  margin-top:                    0.8rem;
  padding-left:                  6.6rem;
  text-align:                    left;
}
.header .nav .closed ul {
  display:                       none;
}
.header .nav li {
  display:                       table-cell;
  padding:                       0.4rem;
  line-height:                   2.1rem;
}
.header .nav li a {
  display:                       inline-block;
  border-radius:                 0.4rem;
  padding:                       0.1rem 0.8rem 0 0.8rem;
  color:                         #ffffff;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     2rem;
  opacity:                       1;
  vertical-align:                bottom;
}
.header .nav li a:hover {
  background-color:              #3b6cb1;
}
.header .nav li.active > a {
  background-color:              #6c90c4;
}
.header .nav li ul li {
  display:                       inline-block;
  padding-left:                  0.1%;
}
.header .nav li ul li:first-child {
  padding-left:                  3%;
}
.header .nav li ul li a {
  color:                         #333333;
  font-size:                     1.6rem;
}
.header .nav li ul li a:hover {
  background-color:              #ced2d2;
}
.header .nav li ul li.active a {
  background-color:              #9ea5a6;
  color:                         #ffffff;
}
.header .nav li ul li ul li {
  display:                       none;
}

/* print view */
.header .print {
  display:                       none;
}

/* ----------------------------- footer */
.footer {
  position:                      relative;
  display:                       table;
  height:                        14.5rem;
  width:                         100%;
  overflow:                      hidden;
  margin-top:                    1.6rem;
  border-top:                    0.1rem solid #ced2d2;
  box-shadow:                    inset 0 0.1rem 0 0 #ffffff;
  background-color:              #e6e8e8;
  background-image:              -webkit-linear-gradient(top, #e6e8e8, #ced2d2);
  background-image:                 -moz-linear-gradient(top, #e6e8e8, #ced2d2);
  background-image:                  -ms-linear-gradient(top, #e6e8e8, #ced2d2);
  background-image:                      linear-gradient(top, #e6e8e8, #ced2d2);
  text-align:                    left;
}
.footer > .col {
  display:                       table-cell;
  padding:                       0.8rem;
  vertical-align:                top;
}
.footer > .col:first-child {
  width:                         20rem;
}
.footer > .col:last-child {
  text-align:                    right;
}

/* address */
.footer .address {
  margin-left:                   0.8rem;
  line-height:                   150%;
  font-size:                     1.2rem;
}
.footer .address .articleHeading {
  margin:                        0;
  color:                         #333333;
  font-size:                     1.4rem;
}

/* text search */
.footer .articleSearch {
  line-height:                   2.3rem;
  margin:                        0 0.8rem 1.6rem 0;
  white-space:                   nowrap;
}
.footer .articleSearch input[type=text] {
  height:                        2.6rem;
  width:                         6rem;
  box-shadow:                    inset 0.1rem 0.1rem 0 0 rgba(255,255,255,0.4);
  border:                        0.1rem solid #ced2d2;
  border-radius:                 0.4rem 0 0 0.4rem;
  padding:                       0 0.2rem 0 0.4rem;
  background-color:              #e6e6e8;
  line-height:                   2.3rem;
  text-align:                    left;
  text-overflow:                 ellipsis;
  transition:                    all 1.2s ease-in-out;
  vertical-align:                top;
}
.footer .articleSearch input[type=text]:hover,
.footer .articleSearch input[type=text]:focus,
.footer .articleSearch input[type=text]:active {
  width:                         calc(100% - 4rem);
  box-shadow:                    inset 0.1rem 0.1rem 0 0 rgba(0,0,0,0.4);
  background-color:              #ffffff;
}
.footer .articleSearch .button {
  height:                        2.4rem;
  margin:                        0 0 0 -0.5rem;
  border:                        0.1rem solid #b6bbbc;
  border-top-color:              #ced2d2;
  border-radius:                 0 0.4rem 0.4rem 0;
  background-color:              #ced2d2;
  background-image:              -webkit-linear-gradient(top, #e6e8e8, #ced2d2);
  background-image:                 -moz-linear-gradient(top, #e6e8e8, #ced2d2);
  background-image:                  -ms-linear-gradient(top, #e6e8e8, #ced2d2);
  background-image:                      linear-gradient(top, #e6e8e8, #ced2d2);
  vertical-align:                top;
}
.footer .articleSearch .button:hover {
  background-image:              -webkit-linear-gradient(top, #ffffff, #ced2d2);
  background-image:                 -moz-linear-gradient(top, #ffffff, #ced2d2);
  background-image:                  -ms-linear-gradient(top, #ffffff, #ced2d2);
  background-image:                      linear-gradient(top, #ffffff, #ced2d2);
}
.footer .articleSearch .button input[type=submit] {
  height:                        1.2rem;
  width:                         2.3rem;
  background-image:              url(images/search.png);
  background-position:           center top;
  background-repeat:             no-repeat;
  background-size:               2.2rem 4.4rem;
  font-size:                     0;
  line-height:                   1.2rem;
  text-indent:                   -100000rem;
  vertical-align:                middle;
}
.footer .articleSearch .button:hover input[type=submit] {
  background-position:           center bottom;
}

/* navigation */
.footer li {
  display:                       inline-block;
  line-height:                   2rem;
}
.footer li a {
  display:                       block;
  border-radius:                 0.4rem;
  padding:                       0.2rem 0.8rem 0.2rem 0.8rem;
  color:                         #333333;
}
.footer li a:hover {
  color:                         #333333;
  background-color:              #ced2d2;
}
.footer li ul li {
  display:                       none;
}

/* siwss made */
.footer .swissmade {
  display:                       inline-block;
  margin:                        0.8rem 0 0.8rem 0;
  border-radius:                 0.4rem;
  padding:                       0.2rem 0.8rem 0.2rem 3.4rem;
}
.footer .swissmade:hover {
  background-color:              #ced2d2;
}
.footer .swissmade a {
  color:                         #333333;
}
.footer .swissmade img {
  left:                          0.6rem;
}

/* copyright */
.footer .copyright {
  margin-right:                  0.8rem;
}
.footer .copyright h2 {
  display:                       none;
}
.footer .copyright div {
  color:                         #868e90;
  font-size:                     1.2rem;
}

/* scroll top */
.footer .scrollTop {
  position:                      absolute;
  display:                       block;
  bottom:                        0.8rem;
  left:                          50%;
  height:                        6rem;
  width:                         6rem;
  margin-left:                   -3rem;
  border-radius:                 3rem;
  opacity:                       0.5;
  transition:                    all 0.2s ease-in-out;
}
.footer .scrollTop:hover {
  opacity:                       1;
  background-color:              #b6bbbc;
}
.footer .scrollTop a {
  display:                       block;
  height:                        100%;
  width:                         100%;
  color:                         transparent;
  font-size:                     0;
}
.footer .scrollTop a img {
  height:                        100%;
  width:                         100%;
}

/* ----------------------------- left */
.left {
  width:                         20rem;
  padding-right:                 0.8rem;
  font-size:                     1.4rem;
}
.left:empty {
  width:                         0;
  padding:                       0;
}
.left > h2,
.left > .articleHeading {
  display:                       block;
  margin:                        2.4rem 0 0.8rem 0;
  line-height:                   120%;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     2rem;
}
.left .button a {
  width:                         16rem;
}

/* ----------------------------- main */
.main {
  width:                         100%;
  border-radius:                 0.4rem;
  background-color:              #ffffff;
}
.left + .main {
  width:                         calc(100% - 21.2rem);
  max-width:                     100rem;
}
.left:empty + .main {
  width:                         100%;
  max-width:                     121.2rem;
}
.main li {
  position:                      relative;
  z-index:                       10;
  left:                          1.6rem;
  list-style-image:              url('images/liSquare.png');
  background-size:               0.8rem 1rem;
}
.main > h2 + div {
  margin:                        1.6rem;
}

/* ----------------------------- navigation */
.navigation {
  margin-top:                    0.8rem;
}
.navigation:first-child {
  margin-top:                    2.4rem;
}
.navigation a {
  line-height:                   3.2rem;
  font-size:                     1.6rem;
} 
.navigation .active a {
  color:                         #a0001b;
}

/* ----------------------------- sitemap */
.sitemap li {
  line-height:                   3.2rem;
  font-size:                     1.6rem;
}
.sitemap div > ul {
  margin:                        1.6rem;
}
.sitemap ul > ul {
  margin-left:                   1.6rem;
}
.sitemap ul > ul > li {
  line-height:                   2.4rem;
  font-size:                     1.4rem;
  list-style-image:              none;
}

/* ----------------------------- article */
.article {
  margin-bottom:                 1.6rem;
}
.article .position {
  display:                       table-row;
}
.article .position .section {
  display:                       table-cell;
  border-top:                    0.4rem solid #e6e8e8;
  padding:                       1.6rem 1.6rem 1.6rem 0;
  vertical-align:                top;
}
.article .position:first-child .section {
  border-top:                    0;
}
.article .position .section:first-child {
  padding-left:                  1.6rem;
}
.article .articleCover img {
  height:                        auto !important;
  box-shadow:                    0 0 0.4rem 0 rgba(0,0,0,0.4);
}
.article .articleCover a:hover img {
  box-shadow:                    0 0 0.8rem 0 rgba(0,0,0,0.8);
}
.article.noShadow .articleCover img {
  box-shadow:                    0 0 0 0 transparent;
}
.article.noShadow .articleCover a:hover img {
  box-shadow:                    0 0 0 0 transparent;
}
.article .articleDate {
  color:                         #868e90;
  font-size:                     1.4rem;
}
.article .articleHeading {
  margin:                        0.4rem 0 0.2rem 0;
  color:                         #0b479d;
  line-height:                   120%;
}
.article .articleHeading a {
  text-decoration:               none;
}
.article .articleText {
  line-height:                   150%;
}

/* list */
.article.list {
  display:                       table;
}
.article.list .sectionCover {
  width:                         30%;
}
.article.list .sectionDesc {
  width:                         70%;
}
.article.list .articleCover img {
  width:                         100% !important;
}
.article.list .articleHeading {
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     2.4rem;
}
.left .article.list {
  margin-top:                    0.8rem;
}
.left .article.list .articleDate {
  margin-top:                    0.4rem;
  font-size:                     1.2rem;
}
.left .article.list .articleHeading {
  margin:                        0 0 0.8rem 0;
  line-height:                   150%;
  font-family:                   'Fira Sans Light', sans-serif;
  font-size:                     1.6rem;
}

/* partner */

.partner.article.list .sectionCover {
  width:                         110rem;
  min-width:                     34rem;
}
.partner .articleListItem {
  border-top:                    0.4rem solid #e6e8e8;
}
.partner .tabs {
  display:                       none;
}

/* detail */
.article.detail {
  word-spacing:                  normal;
  padding:                       1.6rem;
}
.article.detail .section {
  overflow:                      visible;
}
.article.detail .articleDate {
  margin-top:                    1.6rem;
}
.article.detail .articleHeading {
  margin-bottom:                 0.8rem;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     3.2rem;
}
.article.detail .articleCover,
.article.detail .googleMaps {
  float:                         left;
  width:                         56rem; 
  margin:                        0.2rem 3rem 1.6rem 0.2rem;
}
.article.detail .googleMaps + .articleText {
  margin-left:                   59rem;
}
.article.detail .articleCover img {
  width:                         auto !important;
  max-width:                     100%;
  /* set to relative to prevent li overlay */
  position:                      relative;
  z-index:                       20;
}
.article.detail .articleLink {
  margin:                        0.8rem 0.8rem 0.8rem 0;
}
.article.detail .articleLink a {
  min-width:                     8rem;
}

/* face + beeparade */
.article.face,
.article.beep {
  margin:                        1.6rem;
  word-spacing:                  -0.4rem;
}
.article.face .articleCover,
.article.beep .articleCover {
  position:                      relative;
  display:                       inline-block;
  margin:                        0 0.4rem 0 0.4rem;
  font-size:                     0;
}
.article.face .articleCover:hover {
  z-index:                       100;
}
.article.face .articleCover a,
.article.beep .articleCover a {
  display:                       block;
  background-color:              #d6d6d6;
}
.article.face .articleCover img {
  margin:                        0;
  transition:                    all 150ms ease-in-out;
  -ms-transition:                all 150ms ease-in-out;
  -webkit-transition:            all 150ms ease-in-out;
  -o-transition:                 all 150ms ease-in-out;
}
.article.beep .articleCover img {
  margin:                        0;
}
.article.face .articleCover:hover img {
  z-index:                       100;
  transform:                     scale(1.25);
  -ms-transform:                 scale(1.25);
  -webkit-transform:             scale(1.25);
  -o-transform:                  scale(1.25);
  transition:                    all 200ms ease-in-out;
  -ms-transition:                all 200ms ease-in-out;
  -webkit-transition:            all 200ms ease-in-out;
  -o-transition:                 all 200ms ease-in-out;
}
.article.face .articleCover.hide a,
.article.beep .articleCover.hide a {
  background-color:              #ffffff;
}
.article.face .articleCover.hide img,
.article.beep .articleCover.hide img {
  opacity:                       0.1;
}
.article.face .articleCover:hover .name,
.article.beep .articleCover:hover .name {
  display:                       block;
  position:                      absolute;
  bottom:                        0;
  width:                         100%;
  background-color:              #333333;
  line-height:                   2rem;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     1.2rem;
  opacity:                       0.8;
  text-align:                    center;
  word-spacing:                  normal;
}
.article.face .articleCover:hover .name {
  z-index:                       101;
  transform:                     scale(1.25);
  -ms-transform:                 scale(1.25);
  -webkit-transform:             scale(1.25);
  -o-transform:                  scale(1.25);
  transition:                    all 200ms ease-in-out;
  -ms-transition:                all 200ms ease-in-out;
  -webkit-transition:            all 200ms ease-in-out;
  -o-transition:                 all 200ms ease-in-out;
}
.article.face .articleCover.hide:hover .name,
.article.beep .articleCover.hide:hover .name {
  display:                       none;
}
.article.face .articleCover:hover .name .value,
.article.beep .articleCover:hover .name .value {
  display:                       block;
  color:                         #ffffff;
  opacity:                       1;
}
.article.face .articleCover:hover .about,
.article.beep .articleCover:hover .about {
  display:                       block;
  position:                      absolute;
  border-radius:                 0.3rem;
  bottom:                        105%;
  left:                          3%;
  width:                         100%;
  background-color:              #333333;
  line-height:                   2rem;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     1.2rem;
  opacity:                       0.9;
  text-align:                    center;
  word-spacing:                  normal;
  z-index:                       98;
}
.article.face .articleCover:hover .about:before,
.article.beep .articleCover:hover .about:before {
  border:                        solid;
  border-color:                  #333333 transparent;
  border-width:                  0.6rem 0.6rem 0 0.6rem;
  bottom:                        -0.6rem;
  content:                       "";
  left:                          1rem;
  position:                      absolute;
  z-index:                       99;
}
.article.face .articleCover:hover .about .value,
.article.beep .articleCover:hover .about .value {
  display:                       block;
  color:                         #ffffff;
  opacity:                       1;
}
/* ----------------------------- team */
.article.detail.team {
  border-bottom:                 0.4rem solid #e6e8e8;
}
.article.detail.team > div {
  display:                       inline-block;
  word-spacing:                  normal;
}
.article.detail.team .sectionCover {
  float:                         none;
  width:                         30%;
  margin:                        0.8rem 0 0 0;
  padding-right:                 5%;
}
.article.detail.team .sectionCover img {
  height:                        auto !important;
}
.article.detail.team .sectionDesc {
  width:                         65%;
}
.article.groups.team span {
  display:                       block;
  color:                         #0b479d;
  cursor:                        pointer;
  line-height:                   3.2rem;
  font-size:                     1.6rem;
  word-spacing:                  normal;
}
.article.groups.team span:hover,
.article.groups.team span.active {
  color:                         #a0001b;
}
.article.groups.team span.fbm {
  font-weight:                   bold;
  font-size:                     1.8rem;
}
.article.groups.team span.team {
  margin-top:                    1.6rem;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     2rem;
}
.article.interests.team {
  display:                       table;
}
.article.interests.team .sectionCover {
  width:                         10%;
}
.article.interests.team .sectionCover img {
  width:                         10rem !important;
}

/* ----------------------------- results */
.results .articleSearchListItem {
  clear:                         left;
  border-top:                    0.4rem solid #e6e8e8;
  padding:                       1.6rem;
}
.results .sectionPicture {
  float:                         left;
  margin:                        0.6rem 1.6rem 1.6rem 0;
}
.results .articlePicture {
  box-shadow:                    0 0 0.4rem 0 rgba(0,0,0,0.4);
  font-size:                     0;
}
.results .articlePicture img {
  width:                         10rem;
}
.results .articleHeading {
  margin-top:                    0;
  font-size:                     2.4rem;
}

.result .articleDetail {
  padding:                       1%;
}
.result .articleDetail .section.sectionPicture {
  width:                         30%;
  margin:                        0.8rem 0 0;
  padding-right:                 3%;
}
.result .articleDetail .section.sectionPicture img {
  max-width:                     100%;
  height:                        auto !important;
  width:                         auto !important;
}
.result .articleDetail .section.sectionData {
  width:                         65%
}
.result .articleDetail .section.sectionData .articleHeading {
  font-family:                   'Fira Sans Regular',sans-serif;
  font-size:                     3.2rem;
  color:                         #0B479D;
  line-height:                   120%;
  margin:                        0.4rem 0 0.8rem 0;
}
.result .articleDetail .section.sectionData .articleText {
  line-height:                   150%;
  margin:                        1rem 0 0.8rem 0;
} 


/* ----------------------------- fair contact */
.fair input[type="radio"] + label {
  margin-right:                  1.6rem;
}
.fair input[type="radio"] ~ br {
  display:                       none;
}
.fair .value {
  display:                       inline-block;
}
.fair .value input[maxlength] {
  width:                         25%;
  margin-left:                   2.4rem;
}
.fair .appointment {
  display:                       inline-block;
  width:                         40%;
  margin:                        0.8rem 0 0.8rem 0;
  vertical-align:                top;
}
.fair .appointment .value label {
  display:                       inline-block;
  width:                         6.4rem;
}
.fair .appointment + .appointment .value label {
  width:                         4rem;
}
.fair .appointment input[type="radio"] ~ br {
  display:                       inline-block;
  margin-bottom:                 0.4rem;
}
.fair .captcha .value input[maxlength] {
  margin-left:                   0;
}

/* ----------------------------- parallax scrolling */
.parallax {
  margin-top:                    -12.8rem;
}
.parallax .slide {
  position:                      relative;
  width:                         100%;
  height:                        100%;
}
.parallax + .downloads .download.button {
  margin-left:                   0;
}

/* slide images */
.parallax .slide.image {
  height:                        70rem;
  max-height:                    100rem;
  background-color:              #9db5d8;
  background-attachment:         fixed;
  background-repeat:             no-repeat;
  -webkit-background-size:       cover;
     -moz-background-size:       cover;
       -o-background-size:       cover;
          background-size:       cover;
  background-position-x:         50% !important;
  box-shadow:                    inset 0 0.8rem 0.8rem 0 rgba(0,0,0,0.2);
}
.parallax .slide.image:first-child {
  height:                        100%;
  max-height:                    100%;
  box-shadow:                    inset 0 0.4rem 0.4rem 0 rgba(0,0,0,0.2);
}
.parallax .slide.image:first-child > div {
  position:                      absolute;
  top:                           50%;
  left:                          50%;
  height:                        40rem;
  width:                         100rem;
  margin:                        -20rem 0 0 -50rem;
  padding:                       0;
  color:                         #ffffff;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     3.2rem;
  text-align:                    center;
  text-shadow:                   0 0 0.4rem rgba(0,0,0,1);
}
.parallax .slide.image:first-child > div h2 {
  max-width:                     95rem;
  margin:                        0 auto 0 auto;
  color:                         #ffffff;
  font-size:                     8rem;
}
.parallax .slide.image:first-child {
  position:                      relative;
}
.parallax .slide.image:first-child a {
  position:                      absolute;
  left:                          45%;
  bottom:                        -5%;
  display:                       inline-block;
  height:                        16rem;
  width:                         16rem;
  border-radius:                 8rem;
  margin-top:                    4rem;
  background-image:              url(images/bottomblue.png);
  background-repeat:             no-repeat;
  background-size:               6rem;
  background-position:           center 70%;
  transition:                    all 0.2s ease-in-out;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     2rem;
  background-color:              #ffffff;
  text-shadow:                   none; 
  opacity:                       0.6;
}
.parallax .slide.image:first-child a span {
  height:                        100%;
  width:                         100%;
  display:                       inline-block;
  margin-top:                    15%;
  text-align:                    center;
}
.parallax .slide.image:first-child a:hover {
  color:                         #0b479d;
  opacity:                       0.8;
}

/* slide stories */
.parallax .slide.story {
  background-color:              #ffffff;
}
.parallax .slide.story > div {
  font-size:                     0;
  text-align:                    center;
}
.parallax .slide.story:last-child > div {
  box-shadow:                    0 0.8rem 0.8rem 0 rgba(0,0,0,0.2);
}
.parallax .slide.story > div > div {
  width:                         80%;
  margin:                        0 auto 0 auto;
}
.parallax .slide.story h2 {
  padding-top:                   4.9rem;
  font-family:                   'Fira Sans Medium', sans-serif;
  font-size:                     4rem;
  text-align:                    left;
}
.parallax .slide.story h2 + div {
  margin:                        1.6rem;
  padding-bottom:                1.7rem;
  font-size:                     2rem;
  text-align:                    left;
}
.parallax .slide.story a[data-parallaxscrolling-role=button] {
  display:                       inline-block;
  width:                         7.2rem;
  height:                        3.3rem !important;
  border-radius:                 3.6rem 3.6rem 0 0;
  background-image:              url(images/next.png);
  background-repeat:             no-repeat;
  background-size:               7.3rem 3.3rem;
  transition:                    all 0.2s ease-in-out;
}
.parallax .slide.story a[data-parallaxscrolling-role=button]:hover {
  background-color:              #0b479d;
}
.parallax .slide.story:last-child a[data-parallaxscrolling-last=true] {
  background-image:              url(images/prev.png);
}

/* downloads on landingpage */

.parallax + .article.downloads {
  margin-top:                    2.5rem;
  margin-left:                   auto;
  margin-right:                  auto;
}
.parallax + .article.downloads .position {
  display:                       table-cell;
  width:                         55%;
  vertical-align:                top;
}
.parallax + .article.downloads .section {
  display:                       block;
  border-top:                    none;
}
.parallax + .article.downloads .sectionCover {
  width:                         70%;
  min-height:                    21rem;
}
.parallax + .article.downloads .sectionCover img {
  width:                         auto !important;
  max-height:                    20rem;
}

/* ----------------------------- sky animation */
.skyCarousel {
  position:                      relative;  
  overflow:                      hidden;
  margin-top:                    1.6rem;
  background-color:              #ffffff;
}
.skyDescription {
  margin:                        1.6rem 21% 1.6rem 21%;
}

/* navigation */
.skyCarouselNavigation div {
  position:                      absolute;
  top:                           0;
  bottom:                        0;
}
.skyCarouselNavigation .prev {
  z-index:                       100;
  left:                          0;
  width:                         20%;
  background-image:              -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image:                 -moz-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image:                  -ms-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image:                      linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));
}
.skyCarouselNavigation .center {
  left:                          20%;
  width:                         60%;
}
.skyCarouselNavigation .next {
  z-index:                       100;
  right:                         0;
  width:                         20%;
  background-image:              -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:                 -moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:                  -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
  background-image:                      linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
}
.skyCarouselNavigation div span {
  position:                      absolute;
  top:                           50%;
  height:                        6rem;
  width:                         3rem;
  margin-top:                    -3rem;
  background-color:              #b6b6b6;
  background-repeat:             no-repeat;
  background-size:               1.1rem 1.6rem;
  cursor:                        pointer;
  transition:                    all 0.2s ease-in-out;
}
.skyCarouselNavigation div span:hover {
  background-color:              #0b479d;
}
.skyCarouselNavigation .prev span {
  left:                          0;
  border-radius:                 0 3rem 3rem 0;
  background-image:              url('images/goLeft.png');
  background-position:           30% 50%;
}
.skyCarouselNavigation .next span {
  right:                         0;
  border-radius:                 3rem 0 0 3rem;
  background-image:              url('images/goRight.png');
  background-position:           70% 50%;
}

/* container */
.skyCarouselContainer {
  position:                      relative;
  left:                          -40%;
  white-space:                   nowrap;
  word-spacing:                  -0.4rem;
  transition:                    all 0.5s ease-in-out;
}
.skyCarousel .skyCarouselContainer li {
  display:                       inline-block;
  width:                         58%;
  margin:                        0;
  padding:                       0 1% 0 1%;
  list-style-type:               none;
  text-align:                    center;
  transition:                    all 0.3s ease-in-out;
  vertical-align:                top;
  white-space:                   normal;
  word-spacing:                  normal;
  opacity:                       0.6;
}
.skyCarousel .skyCarouselContainer li.active {
  opacity:                       1;
}
.skyCarousel .skyCarouselContainer li .images {
  width:                         100%;
  max-width:                     70rem;
  font-size:                     0;
  overflow:                      hidden;
  white-space:                   nowrap;
}
.skyCarousel .skyCarouselContainer li .images img {
  display:                       inline-block;
  width:                         0;
  cursor:                        pointer;
  vertical-align:                top;
}
.skyCarousel .skyCarouselContainer li .images img.show {
  width:                         100%;
}
.skyCarousel .skyCarouselContainer li .imageCounter {
  margin-top:                    0.8rem;
}
.skyCarousel .skyCarouselContainer li .imageCounter span {
  display:                       inline-block;
  height:                        1.2rem;
  width:                         1.2rem;
  margin:                        0.4rem;
  border-radius:                 0.6rem;
  background-color:              #9ea5a6;
  cursor:                        pointer;
  transition:                    all 0.2s ease-in-out;
}
.skyCarousel .skyCarouselContainer li .imageCounter span:hover {
  box-shadow:                    0 0 0.3rem 0 rgba(0,0,0,0.8);
}
.skyCarousel .skyCarouselContainer li .imageCounter span:only-child {
  display:                       none;
}
.skyCarousel .skyCarouselContainer li .imageCounter span.show {
  background-color:              #0b479d;
}
.skyCarousel .skyCarouselContainer li .sectionDesc {
  margin-top:                    1.6rem;
  transition:                    all 0.3s ease-in-out;
  visibility:                    hidden;
}
.skyCarousel .skyCarouselContainer li .sectionDesc h2,
.skyCarousel .skyCarouselContainer li .sectionDesc p {
  overflow:                      hidden;
  text-overflow:                 ellipsis;
  white-space:                   nowrap;
}
.skyCarousel .skyCarouselContainer li.active div {
  visibility:                    visible;
}

/* ----------------------------- dialog */
.ui-widget-overlay {
  position:                      fixed;
  z-index:                       900;
  top:                           0;
  left:                          0;
  height:                        100%;
  width:                         100%;
  background-color:              rgba(0,0,0,0.3);
}
.dialog {
  position:                      fixed;
  z-index:                       1000;
  max-height:                    90%;
  min-width:                     20rem;
  max-width:                     90%;
  box-shadow:                    0 0.1rem 0.5rem 0 rgba(0,0,0,0.8), inset 0 0.1rem 0 0 rgba(255,255,255,0.3);
  border:                        0.1rem solid #adadad;
  border-radius:                 0.4rem;
  background-color:              #ffffff;
}

/* workaround for higher content */
/* this will disable the resize functionallity */
.dialog {
 /* overflow:                      hidden; */
  overflow-y:                    auto;
  overflow-x:                    hidden;
}
.ui-resizable-handle {
  display:                       none !important;
}

/* titlebar */
.dialog .ui-widget-header {
  overflow:                      hidden;
  box-shadow:                    0 0.1rem 0 0 #ffffff;
  border-bottom:                 0.1rem solid #adadad;
  padding:                       0.2rem 0 0.2rem 0;
  background-color:              #d6d6d6;
  color:                         #848484;
  line-height:                   1.6rem;
  font-family:                   'Fira Sans Regular', sans-serif;
  font-size:                     1.2rem;
  text-align:                    center;
  text-overflow:                 ellipsis;
  white-space:                   nowrap;
  word-spacing:                  -0.4rem;
}
.dialog .ui-widget-header span {
  display:                       inline-block;
  width:                         calc(100% - 2.8rem);
  padding:                       0.4rem 0.4rem 0 0.4rem;
  word-spacing:                  normal;
  cursor:                        move;
}
.dialog .ui-widget-header button {
  display:                       inline-block;
  height:                        1.6rem;
  width:                         1.6rem;
  margin:                        0.2rem;
  background-color:              transparent;
  background-image:              url(images/windowClose.png);
  background-repeat:             no-repeat;
  background-size:               1.6rem 3.2rem;
  vertical-align:                top;
}
.dialog .ui-widget-header button:hover {
  background-position:           bottom;
}
.dialog .ui-widget-header button span {
  display:                       none;
}

/* content */
.dialog .ui-dialog-content {
  max-height:                    calc(100% - 2.5rem) !important;
  overflow:                      auto;
  text-align:                    center;
}
.dialog .ui-dialog-content > img {
  max-height:                    100%;
  max-width:                     100%;
  vertical-align:                middle;
}

/* resize handle */
.dialog .ui-resizable-handle {
  position:                      absolute;
}
.dialog .ui-resizable-nw {
  top:                           -0.6rem;
  left:                          -0.6rem;
  height:                        0.6rem;
  width:                         0.6rem;
  cursor:                        nw-resize;
}
.dialog .ui-resizable-n {
  top:                           -0.6rem;
  left:                          0;
  height:                        0.6rem;
  width:                         100%;
  cursor:                        n-resize;
}
.dialog .ui-resizable-ne {
  top:                           -0.6rem;
  right:                         -0.6rem;
  height:                        0.6rem;
  width:                         0.6rem;
  cursor:                        ne-resize;
}
.dialog .ui-resizable-e {
  top:                           0;
  right:                         -0.6rem;
  height:                        100%;
  width:                         0.6rem;
  cursor:                        e-resize;
}
.dialog .ui-resizable-se {
  bottom:                        -0.6rem;
  right:                         -0.6rem;
  height:                        0.6rem;
  width:                         0.6rem;
  cursor:                        se-resize;
}
.dialog .ui-resizable-s {
  bottom:                        -0.6rem;
  left:                          0;
  height:                        0.6rem;
  width:                         100%;
  cursor:                        s-resize;
}
.dialog .ui-resizable-sw {
  bottom:                        -0.6rem;
  left:                          -0.6rem;
  height:                        0.6rem;
  width:                         0.6rem;
  cursor:                        sw-resize;
}
.dialog .ui-resizable-w {
  top:                           0;
  left:                          -0.6rem;
  height:                        100%;
  width:                         0.6rem;
  cursor:                        w-resize;
}

/* dialog download */
.dialog.iframe {
  height:                        57rem !important;
  width:                         50% !important;
}
.dialog.iframe iframe {
  height:                        53rem;
  width:                         100%;
  overflow:                      hidden;
}
.body > form:only-child {
  display:                       block;
  height:                        100%;
  width:                         100%;
  padding-bottom:                4.8rem;
  background-color:              #ffffff;
  text-align:                    left;
}
.body > form:only-child > div {
  margin:                        0;
  padding:                       0.8rem;
}
.body > form:only-child > div h2 {
  margin:                        0;
}
.body > form:only-child > div h2 + div {
  word-spacing:                  normal;
  white-space:                   normal;
}
.body > form:only-child .button {
  min-width:                     12rem;
}
.body > form:only-child .button input {
  display:                       block;
  height:                        calc(100% - 1rem);
  width:                         calc(100% - 1.6rem);
  text-align:                    center;
}

/* dialog big cover */
.dialog .bigCover {
  font-size:                     0;
}
.dialog .bigCover .value {
  display:                       block;
  padding:                       0 0.2rem 0 0.2rem;
  font-size:                     1.2rem;
  text-align:                    left;
}

/* ----------------------------- tiny mce */
.mce-content-body {
  box-shadow:                    0 0 0 0 transparent;
  text-align:                    left;
}
.mce-content-body li {
  margin-left:                   1.6rem;
  list-style-image:              url('images/liSquare.png');
  background-size:               0.8rem 1rem;
}
.specialOverlay {
  position:                      absolute;
  top:                           10%;
  right:                         5%;
  max-width:                     20%;
  z-index:                       100;
}
.specialOverlay img {
  height:                        auto !important;
  max-width:                     100%;
}

/* messages */

form .messages {
  color:                         #a0001b;
  margin-top:                    2rem;
  font-weight:                   bold;
  white-space:                   normal;
}
.refreshCaptcha {
  margin-top:                    1rem;
  margin-left:                   16.8rem;
  word-spacing:                  0;
}

/*
.specialOverlayCovers {
  bottom:                        -20%;
  left:                          50%;
  position:                      absolute;
}
.specialOverlayCovers .section.sectionCover.articleCover {
  left:                          -50%;
  position:                      relative;
}
*/

.downloadRequestForm .text {
  max-width:                     57rem;
  margin-top:                    0.4rem;
  font-size:                     1.2rem;
  white-space:                   normal;
}
.downloadInfo {
  padding:                       4rem;
  background-color:              #e6e8e8;
}