/* ----------------------------------------------------------- // 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; }