@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('open-sans.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('open-sans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('open-sans.woff2') format('woff2'), /* Super Modern Browsers */
       url('open-sans.woff') format('woff'), /* Modern Browsers */
       url('open-sans.ttf') format('truetype'), /* Safari, Android, iOS */
       url('open-sans.svg#OpenSans') format('svg'); /* Legacy iOS */
}

body {font-family: 'Open Sans', Arial, Helvetica, sans-serif;}


@font-face {font-family: "Cleanwork";
    src: url("cleanwork.eot");
    src: url("cleanwork.eot?#iefix") format("embedded-opentype"),
    url("cleanwork.woff2") format("woff2"),
    url("cleanwork.woff") format("woff"),
    url("cleanwork.svg#Cleanwork") format("svg");
}

h1 {font-family: 'Cleanwork', Arial; font-size: 50px; letter-spacing: 1px; font-weight: normal; color: #333;}
h2 {font-family: 'Cleanwork', Arial; font-size: 40px; letter-spacing: 1px; font-weight: normal; color: #333;}
h3 {font-family: 'Cleanwork', Arial; font-size: 30px; letter-spacing: 0px; font-weight: normal; color: #333;}


.sp-megamenu-parent > li > a:after {
content: '';
width: 2px;
height: 20px;
top: 50%;
margin-top: -10px;
background-color: #ede2d8;
position: absolute;
right: 0;
left: auto;
}
.sp-megamenu-parent > li:last-child > a:after {display: none;}

img.sp-default-logo.visible-xs a{display: inline-table; position: relative; margin: auto; text-align: center;}

a {
  color: #777;
}
a:hover {
  color: #333;
  text-decoration: underline;
}

#sp-top-bar a {color: #ede2d8;}
sp-top-bar a:hover {color: #fac51c; text-decoration: underline;}

#sp-footer a:hover {color: #fac51c; text-decoration: none;}

.sp-megamenu-parent >li.active>a,
.sp-megamenu-parent >li:hover>a {
  color: #fac51c;
  text-decoration: none;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item >a:hover {
  background: #22b8f0;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a, ul.nav.menu li.current.active a{
  color: #fac51c;
}
#offcanvas-toggler >i {
  color: #ede2d8;
}
#offcanvas-toggler >i:hover {
  color: #fac51c;
}
.btn-primary,
.sppb-btn-primary {
  border-color: #0faae4;
  background-color: #22b8f0;
}
.btn-primary:hover,
.sppb-btn-primary:hover {
  border-color: #0d8ab9;
  background-color: #0e9cd1;
}
ul.social-icons >li a:hover {
  color: #22b8f0;
}
.sp-page-title {
  background: #22b8f0;
}
.layout-boxed .body-innerwrapper {
  background: #ffffff;
}
.sp-module ul >li >a {
  color: #000000;
}
.sp-module ul >li >a:hover {
  color: #22b8f0;
}
.sp-module .latestnews >div >a {
  color: #000000;
}
.sp-module .latestnews >div >a:hover {
  color: #22b8f0;
}
.sp-module .tagscloud .tag-name:hover {
  background: #22b8f0;
}
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a,
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a:hover {
  background: #22b8f0;
}
.search .btn-toolbar button {
  background: #22b8f0;
}
.post-format {
  background: #22b8f0;
}
.voting-symbol span.star.active:before {
  color: #22b8f0;
}
.sp-rating span.star:hover:before,
.sp-rating span.star:hover ~ span.star:before {
  color: #0e9cd1;
}
.entry-link,
.entry-quote {
  background: #fff;
}
blockquote {
  border-color: #fff;
}
.carousel-left:hover,
.carousel-right:hover {
  background: #fff;
}
#sp-footer {

}
.sp-comingsoon body {
  background-color: #08090d;
}
.pagination>li>a,
.pagination>li>span {
  color: #fff;
}
.pagination>li>a:hover,
.pagination>li>a:focus,
.pagination>li>span:hover,
.pagination>li>span:focus {
  color: #fff;
}
.pagination>.active>a,
.pagination>.active>span {
  border-color: #fff;
  background-color: #fff;
}
.pagination>.active>a:hover,
.pagination>.active>a:focus,
.pagination>.active>span:hover,
.pagination>.active>span:focus {
  border-color: #fff;
  background-color: #fff;
}

.startseite #sp-sliderbereich {background: url(../startseite.jpg) no-repeat center center; background-size: cover; background-color: #08090d; background-attachment: fixed;}
.startseite #sp-sliderbereich .container {width: 100%;}
.startseite .sp-default-logo, .startseite #sp-headerlogo {display: none;}
#sp-main-body {background: #fff; -webkit-box-shadow: 0px -20px 60px 10px rgba(0,0,0,1); -moz-box-shadow: 0px -20px 60px 10px rgba(0,0,0,1); box-shadow: 0px -20px 60px 10px rgba(0,0,0,1); color: #333;}
.startseite #sp-main-body {padding-top: 30px;}
/*.startseite #sp-sliderbereich {padding: 12% 0 38% 0;}*/
.startseite #sp-sliderbereich {padding: 100px 0 100px 0;}

.startseite #sp-sliderbereich {min-height: 400px;}

.startseite #sp-header {background: #111;}
/*.startseite #sp-sliderbereich h1 {font-size: 120px; background: -webkit-linear-gradient(#aaa, #fff, #fff, #aaa); -webkit-text-fill-color: transparent; -webkit-background-clip: text;}
.startseite #sp-sliderbereich h2 {font-size: 45px; line-height: 0px; color: #eee; text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.7);}
.startseite #sp-sliderbereich h1::first-letter {margin-right: -10px;}*/

.startseite #sp-sliderbereich h1 {font-size: 120px; color:#fff; text-shadow: 0px 0px 25px rgba(0, 0, 0, 1);}
.startseite #sp-sliderbereich h2 {font-size: 45px; line-height: 0px; color: #eee; text-shadow: 0px 0px 25px rgba(0, 0, 0, 1);}
.startseite #sp-sliderbereich h1::first-letter {margin-right: -10px;}

@media (max-width: 768px) {.startseite {background-size: 100%;} .startseite #sp-sliderbereich {padding: 15% 0 45% 0;} .startseite #sp-sliderbereich h1 {font-size: 15vw;} .startseite #sp-sliderbereich h2 {font-size: 6vw;}}
/*@media (min-width: 769px) and (max-height: 800px) {.startseite #sp-sliderbereich {padding: 10% 0 25% 0;}}
@media (min-width: 769px) and (max-height: 700px) {.startseite #sp-sliderbereich {padding: 7% 0 16% 0;}}*/

.sp-column.menumove {margin-left: -16.666667%;}

@media (max-width: 768px) {.menu-fixed #sp-menu {margin-top: -55px;}}
@media (max-width: 768px) {.menu-fixed-out #sp-menu {margin-top: -65px;}}

/*.menu-fixed #sp-position2 img {margin-top: 25px; min-width: 180px; visibility: visible; opacity: 1; -webkit-transition: opacity 1s, visibility 1ms; transition: opacity 1s, visibility 1s;}
.menu-fixed-out #sp-position2 img {visibility: hidden; opacity: 0;}*/

#sp-position2 {max-width:250px;}
#sp-position2 img {margin-top: 25px; min-width: 180px; opacity: 0; visibility: hidden; -webkit-transition: opacity 500ms, visibility 500ms; transition: opacity 500ms, visibility 500ms;}
#sp-position2 img.logonav {margin-top: 25px; min-width: 180px; visibility: visible; opacity: 1; -webkit-transition: opacity 1s, visibility 1ms; transition: opacity 1s, visibility 1s;}

#sp-footer {background: rgba(0,0,0,0.5);}

.img-parallax {
margin-top: -350px;
z-index: 5;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
pointer-events: none
}
/*@media (max-width: 1200px) { .img-parallax{max-width: 300px; margin-top: -300px;}}
@media (max-width: 800px) { .img-parallax{max-width: 250px; margin-top: -200px;}}
@media (max-width: 450px) { .img-parallax{max-width: 250px; margin-top: -80px;}}
*/

body #sp-main-body:before {
background-image: url(risskante.png);
height: 100px;
background-position: center;
margin-top: -105px;
position: absolute;
width: 100%;
z-index: 100;
content: ' ';
}

body.startseite #sp-main-body:before {margin-top: -95px;}

#sp-bottom1, #sp-bottom2, #sp-bottom3, #sp-bottom4 {vertical-align: bottom;}

.teaser {
color: #fff; padding: 15px 0px; margin: 0;
background: -moz-linear-gradient(top, #ff0000 0%, #ba0000 100%);
background: -webkit-linear-gradient(top, #ff0000 0%,#ba0000 100%);
background: linear-gradient(to bottom, #ff0000 0%,#ba0000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ba0000',GradientType=0 );
}

/* Startkreise Beginn */

.sp-module .startkreis {width: 33%; float: left;}

.startcontainer {width: 250px; height: 250px; position: relative; margin: auto; border-radius: 50%;}

.startbild {background-size: 100% !important; display: block; width: 100%; height: 100%; transition: background-size 0.8s ease; -moz-transition: background-size 0.8s ease; -ms-transition: background-size 0.8s ease; -o-transition: background-size 0.8s ease; -webkit-transition: background-size 0.8s ease; background-position: center !important; border-radius: 50%;}

.startoverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .8s ease;
border-radius: 50%;
background-color: rgba(0,0,0,0);
cursor: pointer;
}

.startcontainer:hover .startoverlay {background-color: rgba(0,0,0,0.5);}

.startbild:hover {background-size: 110% !important;} 

.starttext {
color: white;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-shadow: 0px 0px 15px #000000;
}

@media (max-width: 980px) {
.starttext { font-size: 23px;}
.startcontainer {max-width: 180px; max-height: 180px;}
}

@media (max-width: 768px) {
.starttext { font-size: 16px;}
.startcontainer {max-width: 130px; max-height: 130px;}
}
@media (max-width: 500px) {
.starttext { font-size: 23px;}
.startcontainer {max-width: 200px; max-height: 200px;}
.sp-module .startkreis {width: 100%; float: none;}
}

/* Startkreise Ende */

table tr td {padding: 10px 12px;}
table tr:nth-child(even) {background: #eee;}

@media (max-width: 400px) {table tr td {padding: 10px 5px;} table tr {font-size: 13px;}}

.picker__header img {display: inline-table;} 

.centerit {width: 100%; text-align: center;}
.startbutton {display: flex; width: 420px; height: 115px; background: #fff; border-radius: 25px; padding: 15px 20px; font-size: 23px; text-transform: uppercase; font-weight: bold; margin: 15px; text-align: left; float:left;}
@media (max-width: 998px) {.startbutton {display: inline-table; float: none; height: auto;}}
.startbutton img {display: inline-table; padding: 0 10px; }
.buttonemail {margin: -25px 0 0px 100px; font-size: 15px; position: absolute;}
.buttonemail a {color: #333;}
.telefon {font-size: 28px;}

.startbuttoninhalt {margin: auto 0;}


@media (max-width: 520px) {.startbutton {width: 350px; font-size: 19px; padding: 10px; margin: 10px 5px; height: auto; } .startbutton img {width: 60px; height: auto;} .buttonemail {margin: 0; position: relative; text-align: center; font-size: 15px;}}

.clickable {transition: background-color 0.5s ease;}
.clickable:hover {background-color: #FFF7D7;}
.clickable:hover img {transform: scale(0.9);}
.clickable img {transition: all 0.5s ease;}
.clickablebild:hover {transform: scale(0.9);}
.clickablebild {transition: all 0.5s ease;}

a[href^="tel:"] {color: #333; text-decoration: none;}

.telani  {animation-name: Wait-And-Start;
   animation: Wait-And-Start 7s 2s 30;
}
@keyframes Wait-And-Start {
    0%   { transform: rotate(0deg) }
    2%  { transform: rotate(15deg) }
	4% { transform: rotate(-15deg) }
    6%   { transform: rotate(15deg) }
	8% { transform: rotate(-15deg) }
    10%   { transform: rotate(0deg) }
	100%   { transform: rotate(0deg) }
}

@media (min-width: 961px) {.wf-column {padding: 0 15px;} .wf-column:first-child {padding-left: 0;} .wf-column:last-child {padding-right: 0;}}
.wf-column:first-child {border-right: 1px dotted #bdbdbd;}
.wf-column:last-child {border-left: 1px dotted #bdbdbd;}
}