/* -----------------------------------------------------------
// Contact Verification Suspension Page CSS
// C.Marck (Key-Systems GmbH, Germany)
// 05.02.2018 16:00 MEZ
// -----------------------------------------------------------
*/


/* BASICS
-----------------------------------------------------------*/
html,
body {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
  font-family: 'Arial', sans-serif;
  /*font-family: 'Open Sans', sans-serif;'*/
  font-size: 16px;
  line-height: 24px;
  color: #5f5f5f;
  background-color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
}

@media only screen and (max-width: 1400px) and (min-width: 315px) {
  body { /* Break long words and hyphenate them */
    -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  }
}

a {
  color: #00719c;
  text-decoration: none;
  -webkit-transition: 300ms;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  transition: 300ms;
}

a:focus,
a:hover {
  color: #333;
  text-decoration: none;
  outline: none
}

a:active {
  color: #333;
}

.clear {
  clear: both;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.bold {
  font-weight: bold;
}

.center {
  text-align: center;
}

.left {
  float: left;
}

.right {
  float: right;
}

.parallax {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-attachment: fixed !important;
}

.parallax input[type="text"],
.parallax input[type="text"]:hover,
.parallax input[type="email"],
.parallax input[type="email"]:hover,
.parallax input[type="url"],
.parallax input[type="url"]:hover,
.parallax input[type="password"],
.parallax input[type="password"]:hover,
.parallax textarea,
.parallax textarea:hover {
  font-weight: 300;
  color: #fff;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.overlay.dark {
  background-color: rgba(0,0,0,0.4);
}

.overlay.bright {
  background-color: rgba(255,255,255,0.6);
}

section {
  padding: 190px 0 90px 0;
}

.heading {
  padding-bottom: 90px;
}

.col-sm-8 {
  padding-bottom: 60px;
}


/* Header
-----------------------------------------------------------*/
header {
  position: relative;
  min-height: 420px;
  background: no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-bottom: 8px solid #00719c;
  background-image: url('../img/header_bg.jpg');
}

header .row {
  margin: 0 auto;
  max-width: 1025px;
  text-shadow: 1px 1px 0 #333;
}

header .heading {
  padding: 0;
  /* Center items horizontally & vertically */
  position: absolute;
  max-width: 1250px;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%) 
}

header ul.fa-ul .fa-power-off {
  text-shadow: none;
  margin-right: 5px;
  font-size: 12pt;
  color: #00719c;
}

header h1 {
  background-color: rgba(0, 135, 156, 0.9);
  padding: 15px 65px;
  color: #2c2c2c !important;
  text-shadow: none !important;
  text-align: center;
  font-size: 32px;
}

header .startpage h1 {
  padding: 15px 65px;
}

header p {
  padding: 5px 15px;
  text-align: justify;
  padding: 15px 65px;
  background-color: rgba(95, 95, 95, 0.7);
  color: #fff !important;
  text-shadow: none;
}

/* Center non-inline list items horizontally */
header ul.fa-ul {
  float: right;
  position: relative;
  left: -50%;
  text-align: left;
}

header ul.fa-ul li {
  position: relative;
  left: 50%;
}

/* Firefox Specifics */
@supports (-moz-appearance:none) and (display:contents) {
    header::after {
      background-position: top right;
      background-size: 100% 100%;
      min-height: 0;
      content: "";
    }
}

@media only screen and (max-width: 1200px) {
  header ul.fa-ul .fa-power-off {
    margin-left: -18px;
  }
}

@media only screen and (max-width: 1070px) {
  header .heading {
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media only screen and (max-width: 768px) {
  header h1,
  header p {
    padding: 15px;
  }
}

@media only screen and (max-width: 645px) {
  header {
    min-height: 875px;
  }
}


/* Slice
-----------------------------------------------------------*/
.slicewrap {
  position: relative; 
}
.slicewrap svg {
  height: 0;
  display: none;
}

.slice {
  margin: 20px 0;
  padding: 25px;
}

.slice .icon_left {
  margin: 0 25px 25px 0;
  float: left;
  max-width: 11%;
}

.slice.image .icon_left img {
  padding: 2px;
  border: 1px solid #ccc;
  margin-left: auto;
  margin-right: auto;
}

.slice .fa {
  font-size: 55pt;
  color: #00719c;
}

.slice a:hover {
  text-decoration: underline;
}

.slice h2 {
  text-align: left;
  font-weight: bold;
  margin-bottom: 25px;
}

.slice p {
  font-size: 16px;
  text-align: justify;
}

.slice ul {
  margin-top: 20px;
  list-style-type: none;
}

.slice ul li {
  margin-bottom: 8px;
  padding: 2px;
  text-align: justify;
}

.slice ul:not(.fa-ul) li:before {
  font-family: "FontAwesome";
  content: "\f04b";
  color: #00719c;
  margin-right: 5px;
  font-size: 14px;
  margin-left: -16px;
}

.slice .fa-ul .fa {
  font-size: 10pt;
  color: #00719c;
  margin-right: 5px;
  margin-left: -15px;
}

.slice .slice_content {
  float: right;
  text-align: justify;
  max-width: 85%;
  width: 85%;
}

.slice .slice_content .fa-download,
.slice .slice_content .fa-share {
  margin-left: 10px;
  margin-right: 5px;
  font-size: 14px;
}

.slice .fa-user-circle {
  font-size: 63px;
}

.slice_links {
  float: left;
  width: 100%;
  margin-top: 45px;
}

.slice_links a {
  min-width: 200px;
  padding: 15px;
  padding-left: 0;
  color: #97be0d;
  border: 1px solid #97be0d;
  text-align: center;
  outline: none;
  text-decoration: none;
  border-radius: 5px; 
  margin-bottom: 2px;
}

.slice_links a:hover {
  color: #fff;
  background-color: #97be0d;
  border-color: #97be0d;
  text-decoration: none;
}

.slice_links a:active {
  background-color: #97be0d;
  border-color: #ceff00;
  color: #fff;
  transition: color 0.3s ease-in,
  background-color 0.3s ease-in,
  border-color 0.3s ease-in;
}

.slice h3 {
  color: #333;
}

@media only screen and (max-width: 1800px) {
  .slice.image {
    float: none;
    text-align: center;
  }
  .slice.image .icon_left {
    float: none;
    margin: 0 auto;
    max-width: 20%;
  }
  .slice.image .icon_left img {
    margin-bottom: 20px;
  }
  .slice.image h2 {
    text-align: center;
  }
  .slice.image .slice_content {
    float: none;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width: 1270px) {
  .slice .fa.fa-balance-scale,
  .slice .fa.fa-handshake-o {
    font-size: 40pt;
  }
  .slice .slice_links {
    float: none;
    text-align: center;
  }
}

@media only screen and (max-width: 1100px) {
  .slice .icon_left {
    margin: 0 0 25px 0;
  }
  .slice h2 {
    text-align: center;
  }
  .slice .icon_left {
    float: none;
    margin: 0 auto;
  }
  .slice .slice_content {
    float: none;
    text-align: left;
    width: 100%;
    max-width: 100%;
  }
  .slice .fa:not(.fa-play) {
    margin-bottom: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .slice h1, .slice h2, .slice h3 {
    margin-top: 10px;
  }
  .slice .icon_left {
    max-width: none;
  }
  .slice ul {
    padding-left: 10px;
  }
}

@media only screen and (max-width: 480px) {
  .slice .slice_links a {
    display: block;
    padding: 15px !important;
  }
  .slice .slice_links a i {
    display: none;
  }
  .slice.image .icon_left { 
    max-width: 50%;
  }
}


/* Owner Block Exceptions */
.row.owner {
  background-color: #ebebeb; 
  border-top: 1px solid #009c54;
  border-bottom: 1px solid #009c54;
}

.row.owner .fa,
.row.owner a {
  color: #009c54;
}

.row.owner a:hover {
  color: #333;
}


/* Footer
-----------------------------------------------------------*/
footer {
  background-color: #1991a3;
  padding-top: 5px;
  padding-bottom: 5px;
}

footer a {
  display: block;
  color: #333;
  text-align: center;
}

footer a:hover {
  color: #fff;
}