/*
Theme Name: Cludes
Discription: Cludes Wordpress Theme
Author: Cludes
Version: 1.0
*/

@charset "UTF-8";
@import "inc/css/animation.css";
/* CSS Document */

/*Global*/
html body {height:100%;}
body {font-family:'Open Sans', Helvetica Neue, Helvetica, sans-serif; font-size:15px; color:rgba(0,0,0,1.00);}

a {text-decoration:none; color:rgb(9,181,200); transition: color .3s ease;}
a:hover {text-decoration: none; color:rgb(13,135,148);}

h1, h2, h3, h4, h5, h6 {margin:0; padding:0; font-weight:100; -webkit-font-smoothing:antialiased;}

::selection {background:rgba(9,181,200,1.0); color:rgba(255,255,255,1.00);}

.btn-primary {background:rgba(0,175,195,0.0); color:rgba(255,255,255,1.0); border:1px solid rgba(9,181,200,1.0); transition: background 0.3s ease, color 0.3s ease; font-weight:100; font-size:1.5em; padding:12px 54px; margin:70px 0 0 0; opacity:1;}
.btn-secondary {background:rgba(0,175,195,0.0); color:rgb(0,0,0); border:1px solid rgba(9,181,200,1.0); transition: all 0.3s ease; font-weight:100; font-size:1.2em; padding:10px 50px; margin:60px 0 0 0; opacity:1;}

.btn-primary:hover {background:rgba(9,181,200,1.0); border:1px solid rgba(9,181,200,1.0);}
.btn-secondary:hover {background:rgba(9,181,200,1.0); color: rgb(255,255,255); border:1px solid rgba(9,181,200,1.0);}

@media only screen and (max-width: 500px)
{
    .btn {padding: 12px 0!important; margin-left: 3%!important; margin-right: 3%!important; width: 94%!important; text-align: center;}
}

.play_button {position:relative; display:inline-block; top:4px; left:-7px; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 12px solid rgba(255,255,255,255.8);}

a:focus, button:focus { outline: none;}

.customer > img {max-width: 210px; margin:15px auto;}




/*Navbar*/

@media only screen and (min-width: 1200px)
{
.container  {width:70%!important; max-width:1400px!important; min-width: 1160px; transition: all 0.3s ease;}
}

/*Navbar - Start*/
nav.nav-global-start {background:rgba(255,255,255,0.0)!important; border-bottom:1px solid rgba(255,255,255,0.15)!important; }

/*Navbar - Global*/
nav.nav-global {position:fixed; z-index:100; width:100%; height:100px; background:rgba(255,255,255,1.0); border-bottom:1px solid rgba(0,0,0,0.10); -webkit-animation: fade-in .5s;
-moz-animation: fade-in .5s; animation: fade-in .5s; transition: all 0.5s ease;}

/*Navbar - Sub*/
nav.sub-nav {width:100%; min-height:60px; background:rgba(9,181,200,1.0); -webkit-animation: fade-in .7s; -moz-animation: fade-in .7s; animation: fade-in .7s; padding:24px 0;}
nav.sub-nav-left {position:fixed; top:90px; left:-60px; width:60px; background:rgba(9,181,200,0.94); border-radius:0 4px 4px 0; z-index:999; box-shadow:2px 2px 2px rgba(0,0,0, 0.05); transition: all 0.5s ease;}
nav.sub-nav-left-show {left:0px!important;}

/*Navbar - Breadcrumb*/
nav.breadcrumb-nav {position: relative; left: 50%; display: inline-block; height:50px;}
nav.breadcrumb-nav ul {position:relative; left: -50%; width: auto; height:50px; padding: 0; border: 1px solid rgba(9,181,200,1.0); border-radius: 4px;}
nav.breadcrumb-nav ul li {float:left!important; display:inline-block; clear:none!important; padding: 0 15px; border-right: 1px solid rgb(9,181,200); text-align: center; margin: 0!important; height:50px; position:relative; top:-1px; line-height:normal;}
nav.breadcrumb-nav ul li:first-child {border-radius:4px 0 0 4px;}
nav.breadcrumb-nav ul li:last-child {border-radius:0 4px 4px 0; border-right: none}
nav.breadcrumb-nav ul li a {color:inherit; display:block; font-weight:300; text-decoration:inherit; padding: 14px 0;}
nav.breadcrumb-nav ul li.activeSlide {background:rgba(9,181,200,1.0); color:rgba(255,255,255,1.00); text-decoration:none;}

@media only screen and (min-width: 768px) and (max-width: 1200px)
{
    main .breadcrumb-nav-referenzen {height: 80px;}
    main .breadcrumb-nav-referenzen ul {height: 100px;}
    main .breadcrumb-nav-referenzen li {width: 25%; padding: 0; border-bottom: 1px solid rgb(9,181,200); border-right: 1px solid rgb(9,181,200);}
    main .breadcrumb-nav-referenzen li:nth-child(4), main .breadcrumb-nav-referenzen li:nth-child(8) {border-right: none;}
    main .breadcrumb-nav-referenzen li:nth-child(5), main .breadcrumb-nav-referenzen li:nth-child(8) {border-bottom: none;}

    main .breadcrumb-nav-referenzen li:first-child {border-radius: 4px 0 0 0!important;}
    main .breadcrumb-nav-referenzen li:nth-child(4) {border-radius:0 4px 0 0;}
    main .breadcrumb-nav-referenzen li:nth-child(5) {border-radius: 0 0 0 4px;}
    main .breadcrumb-nav-referenzen li:last-child {border-radius: 0 0 4px 0!important;}

    main .breadcrumb-nav-ondemand {width: 480px; height: 50px;}
    main .breadcrumb-nav-ondemand ul {height: 50px;}
    main .breadcrumb-nav-ondemand li {width: 33.333%; padding: 0; border-bottom: none; border-right: 1px solid rgb(9,181,200);}

    main .breadcrumb-nav-ondemand li:last-child {border-right: none;}
}

@media only screen and (min-width: 401px) and (max-width: 767px)
{
    main .breadcrumb-nav-referenzen {height: 160px;}
    main .breadcrumb-nav-referenzen ul {height: 200px;}
    main .breadcrumb-nav-referenzen li {width: 50%; padding: 0; border-bottom: 1px solid rgb(9,181,200); border-right: 1px solid rgb(9,181,200);}
    main .breadcrumb-nav-referenzen li:nth-child(2), main .breadcrumb-nav-referenzen li:nth-child(4), main .breadcrumb-nav-referenzen li:nth-child(6), main .breadcrumb-nav-referenzen li:nth-child(8) {border-right: none;}
    main .breadcrumb-nav-referenzen li:nth-child(7), main .breadcrumb-nav-referenzen li:nth-child(8) {border-bottom: none;}

    main .breadcrumb-nav-referenzen li:first-child {border-radius: 4px 0 0 0!important;}
    main .breadcrumb-nav-referenzen li:nth-child(2) {border-radius:0 4px 0 0;}
    main .breadcrumb-nav-referenzen li:nth-child(7) {border-radius: 0 0 0 4px;}
    main .breadcrumb-nav-referenzen li:last-child {border-radius: 0 0 4px 0!important;}

    main .breadcrumb-nav-ondemand {width: 480px; height: 50px;}
    main .breadcrumb-nav-ondemand ul {height: 50px;}
    main .breadcrumb-nav-ondemand li {width: 33.333%; padding: 0; border-bottom: none; border-right: 1px solid rgb(9,181,200)!important;}

    main .breadcrumb-nav-ondemand li:last-child {border-right: none!important;}
}

@media only screen and (max-width: 400px)
{
    main .breadcrumb-nav-referenzen {height: 340px;}
    main .breadcrumb-nav-referenzen ul {height: 400px;}
    main .breadcrumb-nav-referenzen li {width: 100%; padding: 0; border-bottom: 1px solid rgb(9,181,200); border-right: none;}
    main .breadcrumb-nav-referenzen li:last-child {border-bottom: none;}

    main .breadcrumb-nav-referenzen li:first-child {border-radius: 4px 4px 0 0!important;}
    main .breadcrumb-nav-referenzen li:last-child {border-radius: 0 0 4px 4px!important;}

    main .breadcrumb-nav-ondemand {height: 120px;}
    main .breadcrumb-nav-ondemand ul {height: 150px;}
    main .breadcrumb-nav-ondemand li {width: 100%; padding: 0; border-bottom: 1px solid rgb(9,181,200); border-right: none;}
    main .breadcrumb-nav-ondemand li:last-child {border-bottom: none;}

    main .breadcrumb-nav-ondemand li:first-child {border-radius: 4px 4px 0 0!important;}
    main .breadcrumb-nav-ondemand li:last-child {border-radius: 0 0 4px 4px!important;}

}

/*Navbar - Logo*/
nav.nav-global .cludes-logo {background-image: url('inc/img/logoBlack.svg'); background-repeat: no-repeat; background-position: 0 45%; background-size: 170px; height: 100px; line-height: 100px; min-width: 190px; padding: 0; text-indent: -9999em; overflow: hidden; float: left; zoom: 1; -webkit-animation: fade-in .6s;
-moz-animation: fade-in .6s; animation: fade-in .6s;}
nav.nav-global-start .cludes-logo {background-image: url('inc/img/logo.svg');}


.navbar-collapse {margin: 0; padding: 0;}


/*Navigation - Ebene 1*/
nav.nav-global-start ul li a {color:rgba(255,255,255,0.96)!important; height:99px;}
nav.nav-global-start ul li:hover {background:rgba(255,255,255,0.15)!important;}
nav.nav-global-start ul li:hover a {text-decoration:none; color:rgba(255,255,255,1.00)!important;}

nav.nav-global-start .btn-demo {color:rgb(255,255,255)!important;}


nav.nav-global ul {float:left; list-style:none; padding:0; width:auto; height:99px;}
nav.nav-global ul li {float:left; display:inline-block; padding:0; width:auto; height:99px; }
nav.nav-global ul li a {display:block; font-size: 1.1em; height:99px; font-weight:300; padding:40px 17px 0 17px; color:rgba(0,0,0,0.96); transition: all 0.3s ease;}
nav.nav-global ul li:hover {background:rgba(123,123,123,0.06);}
nav.nav-global ul li:hover a {text-decoration:none; color:rgba(0,0,0,1.00);}
nav.nav-global ul li.current-menu-item, nav.nav-global ul li.current-menu-parent, nav.nav-global ul li.current-menu-ancestor {border-top:3px solid rgba(9,181,200,1.0);}
nav.nav-global ul li.current-menu-item  a, nav.nav-global ul li.current-menu-parent a, nav.nav-global ul li.current-menu-ancestor a {position:relative; top:-3px;}
nav.nav-global li#menu-item-45, nav.nav-global li#menu-item-6, nav.nav-global li#menu-item-1358 {border-top:none!important;}
nav.nav-global li#menu-item-45, nav.nav-global li#menu-item-900, nav.nav-global li#menu-item-1620 {border-top:none!important;}

nav.nav-global ul li.menu-item-has-children li.current-menu-item {border-top:none!important;}

nav.nav-global .btn-demo {background:rgba(9,181,200,1.0); color:rgb(255,255,255); transition: all 0.3s ease; font-weight:100; font-size:1.1em; padding:7px 12px; margin:32px 0 0 17px; opacity:1;}
nav.nav-global .btn-demo:hover {background:rgba(9,181,200,1.0); color: rgb(255,255,255); border:1px solid rgba(9,181,200,1.0);}

nav.sub-nav ul {list-style:none; padding:0; }
nav.sub-nav ul li {padding:7px 0; width: 188px; float:left; margin:0;}
nav.sub-nav ul li  img {float: left; max-width: 25px; max-height: 22px; margin: 1px 8px 0 0;}
nav.sub-nav ul li a {color:rgba(255,255,255,1.00); font-size:0.95em; font-weight:300;}

nav.sub-nav-left ul {list-style:none; padding:8px;}
nav.sub-nav-left ul li {position:relative; width:44px; margin:14px 0; transition: all .28s ease;}
nav.sub-nav-left ul li img {max-width:68%; margin:0 18% 0 14%;}
nav.sub-nav-left ul li:hover {width:55px;}
nav.sub-nav-left ul li a section {position:absolute; left:58px; top:0; display:none; background:rgba(245,245,245,0.95); padding:8px 10px; border-radius:4px; color:rgba(0,0,0,1.00); font-size:0.85; font-weight:300;}
nav.sub-nav-left ul li:hover  a section {display:block; color:rgba(0,0,0,1.00);}


nav.nav-global-start ul li.menu-item-has-children a:after {content: "▼"; position: relative; top: -1px; right: 0; bottom: 0; font-size: 60%; margin:0 0 0 4px; color:rgba(255,255,255,0.25)!important;}
nav.nav-global  ul li.menu-item-has-children a:after {content: "▼"; position: relative; top: -1px; right: 0; bottom: 0; font-size: 60%; margin:0 0 0 4px; color:rgba(0,0,0,0.18);}
nav.scroll  ul li.menu-item-has-children a:after {content: "▼"; position: relative; top: -1px; right: 0; bottom: 0; font-size: 60%; margin:0 0 0 4px; color:rgba(0,0,0,0.18)!important;}

nav li.menu-item-has-children li a:after {content: ""!important;}

/*Navigation - Ebene 2*/
nav.nav-global-start li ul {background:rgba(255,255,255,0.15)!important;}

nav.nav-global li:hover ul {display:block;}
nav.nav-global li ul, nav.scroll li ul {position:absolute; padding:28px; background:rgba(245,245,245,0.95); height:auto; top:100px; display:none; z-index:999; min-width:156px;}
nav.nav-global li#menu-item-42  ul, nav.scroll li#menu-item-42 ul {padding:35px 8px 35px 35px;}
nav.nav-global li ul li {clear:both; float:left; height:auto; margin:22px 0 0 0;}
nav.nav-global li ul li:first-child, nav.scroll li ul li:first-child {margin:0;}
nav.nav-global li#menu-item-42 ul li, nav.scroll li#menu-item-42 ul li {clear:none; float:left; width:190px; height:auto; margin:0 30px 0 0;}
nav.nav-global li#menu-item-42 ul li:last-child, nav.scroll li#menu-item-42 ul li:last-child {margin:0;}
nav.nav-global li ul li  a, nav.scroll li ul li  a {padding:0; margin:0; float:left; height:25px; background:none; font-weight:300; color:rgba(0,0,0,0.65)!important;}
nav.nav-global li ul li:hover a, nav.scroll li ul li:hover a {color:rgba(0,0,0,0.95)!important;}
nav.nav-global li#menu-item-42 ul li  a, nav.scroll li#menu-item-42 ul li  a {padding:0; margin:0; float:left; height:25px; background:none; font-weight:600; color:rgba(0,0,0,1.00)!important;}
nav.nav-global-start li#menu-item-42 ul li  a {color:rgba(255,255,255,1.00)!important;}
nav.nav-global li:hover li, nav.scroll li:hover li {background:none!important;}
nav.nav-global li ul li  a:after, nav.scroll li ul li  a:after  {content: ""}

/*Navigation - Ebene 3*/
nav.nav-global-start li#menu-item-42 li ul {background:none!important;}
nav.nav-global-start li li a {background:none!important; color:rgba(255,255,255,1.00)!important;}

nav.nav-global li#menu-item-42 li ul, nav.scroll li li ul {position:static; float:left; padding:0; box-shadow:none; background:none;}
nav.nav-global li#menu-item-42 li ul li, nav.scroll li li ul li {clear:both; float:left; margin:17px 0 0 0;}
nav.nav-global li#menu-item-42 li ul li:last-child, nav.scroll li li ul li:last-child {margin:17px 0 0 0;}
nav.nav-global li#menu-item-42 li ul li a, nav.scroll li li ul li a {text-transform:none; color:rgba(0,0,0,0.65)!important; height:auto; line-height: 1.6em!important; font-weight:300;}
nav.nav-global-start li#menu-item-42 li ul li a {background:none!important; color:rgba(255,255,255,1.00)!important;}
nav.nav-global li#menu-item-42 li ul li:hover a {color:rgba(0,0,0,0.95)!important;}
nav.nav-global li#menu-item-42 li ul li a.current {color:rgba(0,175,195,1.0);}



/*Navigation - Scroll*/
nav.scroll {background:rgba(255,255,255,0.98)!important; height:60px; border-bottom:1px solid rgba(225,225,225,0.9)!important;}
nav.scroll .container {height: 60px;}
nav.scroll ul li a {height: 59px; line-height: 60px; font-size: .9em; color:rgba(0,0,0,1.00)!important;}
nav.scroll .cludes-logo {background:url('inc/img/logoBlack.svg'); background-repeat: no-repeat; background-position: 0 45%; background-size: 120px; min-width: 140px; height:60px;}
nav.scroll ul {height:59px;}
nav.scroll ul li {height:59px;}
nav.scroll ul li:hover {background:rgba(245,245,245,0.95)!important;}
nav.scroll ul li a {padding: 0 18px; font-size: .95em;}
nav.scroll ul li:hover a {color:rgba(0,0,0,1.00)!important;}
nav.scroll li:hover ul {display:block;}
nav.scroll li:hover li {background:none!important;}
nav.scroll li ul li {clear:both; float:left; height:auto; margin:18px 0 0 0!important;}
nav.scroll li ul {position:absolute; padding: 10px 30px; background:rgba(245,245,245,0.95)!important; height:auto; top:60px; display:none; z-index:100; min-width:141px;}
nav.scroll li ul li a {height:25px; padding:0; line-height:1em; color:rgba(0,0,0,1.00)!important;}
nav.scroll li#menu-item-42 ul {padding:20px 8px 20px 35px;}
nav.scroll li#menu-item-42 ul li ul {background:none!important;}
nav.scroll li#menu-item-42 ul li a {color:rgba(0,0,0,1.00)!important;}
nav.scroll li#menu-item-42 ul li li a {color:rgba(0,0,0,1.00)!important;}

nav.scroll .btn-demo {font-size:0.95em; padding:5px 9px; margin:14px 0 0 10px;}
nav.scroll .btn-demo:hover {color: rgb(255,255,255)!important;}



/*Headers*/

/*Header Start*/
header.start {position:relative; float:left; width:100%; height:auto; background:url('inc/img/header.jpg'); background-size:cover; overflow: hidden;}
header.start #hero-slider {float:left; max-width:100%; height:780px; position:relative; z-index: 10!important;}
header.start #hero-static {display: none;}

header.start #hero-pager {position:absolute; bottom:25px; left:50%; margin: 0 0 0 -27px; z-index: 10;}
header.start #hero-pager a {float:left; width:18px; height:18px; background:none; border:1px solid rgba(9,181,200,1.0); border-radius:9px; transition: all 0.5s ease; margin:0 12px 0 0;}
header.start #hero-pager a:last-child {margin:0;}
header.start #hero-pager a.activeSlide {background: rgba(9,181,200,1.0);}

header.start #hero-prev {position: absolute; z-index: 10; height: 70px; width: 40px; background: url('inc/img/arrow.svg'); background-repeat: no-repeat; top:370px; left: 50px;  -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); cursor:pointer;}
header.start #hero-next {position: absolute; z-index: 10; height: 70px; width: 40px; background: url('inc/img/arrow.svg'); background-repeat: no-repeat; top:370px; right: 50px; cursor:pointer;}

header.start .slide {clear:both; margin:240px 0 210px 0; text-align:center; color:rgba(255,255,255,1.00); -webkit-animation: fade-in .8s; -moz-animation: fade-in .8s; animation: fade-in .8s;}

header.start .slide1 h1 {font-size:8.5em; font-weight:100; opacity:1;}
header.start .slide1 h2 {font-size:3.5em; font-weight:100; opacity:1;}
header.start .slide1 > span {display: block; font-size: 1.9em; font-weight: 100; margin: 75px 0px 0px; opacity: 1;}
header.start .slide1 .btn-primary {padding: 12px 54px 12px 60px; margin: 20px 0 0 0;}

header.start .slide2 {padding-top: 20px;}
header.start .slide2 ul {display: block; list-style: none; padding: 0; opacity: 1; width: 85%; position: relative; left: 50%; margin-left: -40%;}
header.start .slide2 ul li {width: 50%; height: 75px; text-align: left; font-size: 2vw; font-weight: 100; background: url(inc/img/check.svg) no-repeat;background-size: 40px 41px; background-position: 25px 16px; padding: 10px 0 0 90px;}
header.start .slide2 ul li:nth-child(1), header.start .slide2 ul li:nth-child(2), header.start .slide2 ul li:nth-child(4) {float: left;}
header.start .slide2 ul li:nth-child(3) {clear: both; float: left; border-right: 1px solid rgba(255,255,255,.6);}
header.start .slide2 ul li:nth-child(1) {border-bottom: 1px solid rgba(255,255,255,.6); border-right: 1px solid rgba(255,255,255,.6);}
header.start .slide2 ul li:nth-child(2) {border-bottom: 1px solid rgba(255,255,255,.6);}
header.start .slide2 .btn-slide-2 {clear: both; float: left; position: relative; left: 50%; margin: 100px 0 0 -154px;}

header.start .slide3 h1 {font-size:7em; line-height: 1.35em; font-weight:100; opacity:1;}
header.start .slide3 h2 {font-size:3.5em; font-weight:100; opacity:1;}

header.start .slide4 h1 {font-size:10em; width: 80%; margin: 0 10%; padding: 0 0 16px 0; border-bottom: 1px solid rgba(9,181,200,1.0); line-height: 1.1em; font-weight:100; opacity:1;}
header.start .slide4 h2 {font-size:3em; font-weight:100; opacity:1; padding: 8px 0 0 0; line-height: 1.25em;}

header.start .slide #vid-container {position:absolute; top:-80px; width:80%; height:520px; margin:0 10%; display:none;}
header.start .slide #vid-container-close {position: absolute; width:30px; height: 30px; border-radius: 15px; background: rgba(255,255,255,1.0); right: -15px; top: -15px; color: rgba(0,0,0,1.00); font-size: 1.2em; padding: 1px 0 0 1px; cursor:pointer;}
header.start .slide #vid-container video {width:100%; height:auto; border:5px solid rgba(255,255,255,1.00); border-radius:4px;}

/*Header POS*/
header.pos {position:relative; float:left; width:100%; height:auto; background:url('inc/img/header-pos.jpg'); background-size:cover;}
header.pos > img {position: absolute; bottom: 0; left : 0; width: 100%;}
header.pos #hero-slider {float:left; height:780px; position:relative;}

header.pos .slide {clear:both; margin:350px 0 210px 0; color:rgb(255,255,255); -webkit-animation: fade-in .8s; -moz-animation: fade-in .8s; animation: fade-in .8s;}
header.pos .slide h1 {font-size:5em; font-weight:100; opacity:1;}
header.pos .slide h2 {font-size:3.2em; font-weight:100; opacity:1;}

/*Main*/
main {position:relative; top:100px; clear:both; float:left; width:100%;}
.main-start {position:static; top:0;}

/*Main - Global*/
main h3 {color:inherit; font-size:2.55em; line-height: 1.3em; margin:0 0 35px 0;}
main h4 {color:inherit; font-size:1.8em; margin:0 0 32px 0;}
main h5 {color:inherit; font-size:1.5em; margin:0 0 32px 0;}
main p {color:inherit; font-size:1.05em; line-height:1.9em; font-weight:300; margin:0;}
main strong {font-weight:500;}
main .content-center {text-align:center;}
main .aligncenter {display:block; margin:0 auto;}
main hr.thin-line {position: relative; top: -20px; border-top: 1px solid #d8d8d8; margin-bottom: 10px}
main .top-80 {margin-top:80px;}
main .top-100 {margin-top:100px;}
main .top-110 {margin-top:110px;}
main ul {list-style:circle; padding:20px;}
main ul li {font-weight:300; margin:0 0 18px 0; font-size:1.05em; line-height:1.9em;} 
main ul li:last-child {margin:0;}


main .container-main-child {-webkit-animation: fade-in .8s; -moz-animation: fade-in .8s; animation: fade-in .8s;}

/*Main - Startseite*/
main .cludes-info {clear:both; float:left; width:100%; background:rgba(9,181,200,1.0); color:rgba(255,255,255,1.00); text-align:center; padding:56px 0px;}
main .cludes-info h3 {margin:0 0 13px 0!important;}
main .cludes-info p {margin:18px 0 0 0!important;}

main .cludes-headline {clear:both; float:left; width:100%; background:rgba(9,181,200,1.0); color:rgba(255,255,255,1.00); text-align:center; padding:34px 0px;}
main .cludes-headline h3 {margin:0 0 10px 0!important;}
main .cludes-headline p {margin:15px 0 0 0!important;}

/*Main - Content*/
main .content-main {clear:both; float:left; width:100%; padding:90px 0 70px 0; background:rgba(255,255,255,1.00); color:rgba(0,0,0,1.00); border-bottom:1px solid rgba(225,225,225,0.7);}
main .content-main:nth-child(2n) {clear:both; float:left; width:100%; padding:70px 0; background:rgba(0,0,0,0.05); color:rgba(0,0,0,1.00);}

/*Main - Kontakt*/
main td {vertical-align:top; padding:0 6px 16px 0; font-size:1.05em; line-height:1.9em; font-weight:300;}

main .main-form ul {list-style:none; padding:0;  width:100%;}
main .main-form ul hr {clear: both; float: left; width: 100%; height: 1px; border: none; margin: 25px 0; background-color: rgb(220,220,220);}
main .main-form ul li {clear:both; float:left; width:100%; margin:0 0 18px 0;}
main .main-form ul li label {clear:both; float:left; font-weight:500; font-size:1.05em;}
main .main-form ul li .wpcf7-radio {clear:both; float:left;}
main .main-form ul li .wpcf7-list-item-label {font-size:1.3em; font-weight:100; margin:0 20px 0 10px;}
main .main-form ul li .wpcf7-form-control-wrap {clear: both; float: left; width: 100%;}
main .main-form ul li .wpcf7-form-control {clear: both; float: left; width: 100%;}
main .main-form ul li .wpcf7-checkbox {border-radius:4px; border:1px solid rgba(9,181,200,1.0); background:rgba(255,255,255,1.00); outline:0; padding: 10px;}
main .main-form ul li .wpcf7-list-item {margin: 0; float: left; width: 50%;}
main .main-form ul li #gender .wpcf7-list-item {width: auto;}

main .main-form ul li input[type=text],
main .main-form ul li input[type=tel],
main .main-form ul li input[type=email],
main .main-form ul li input[type=file],
main .main-form ul li select,
main .main-form ul li textarea {clear:both; float:left; border-radius:4px; border:1px solid rgba(9,181,200,1.0); background:rgba(255,255,255,1.00); outline:0;  width:100%; height:40px; padding:0 0 0 7px;}
main .main-form ul li textarea {height:200px; resize:vertical; padding:0 0 0 7px;}
main .main-form ul li input[type=submit] {clear:both; float:left; border-radius:4px; border:1px solid rgba(9,181,200,1.0); background:rgba(255,255,255,1.00); outline:0;  width:100%; height:50px; font-weight:100; font-size:1.3em; margin:20px 0 0 0; transition: all 0.3s ease;}
main .main-form ul li input[type=submit]:hover {background:rgba(9,181,200,1.0); color:rgba(255,255,255,1.00);}

div.wpcf7-validation-errors {border:none!important;} 

/*Step Line*/
main .step-line {clear: both; float: left; position: relative; width: 100%; height: 30px; top: 40px;}
main .step-line hr {position: relative; width: 100%; height: 1px; margin: 15px 0 14px 0; background: rgb(180,180,180); border: none;}
main .step-line .step-line-arrow {position: absolute; width: 30px; height: 30px; top: 0; left: 50%; margin: 0 0 0 -15px; background: url(inc/img/arrow-down.svg) no-repeat;}

/*Feature List*/
main .feature-list ul {list-style: none; padding: 0 10px 0 0;}
main .feature-list ul li {background: url(inc/img/check.svg) no-repeat; background-size: 36px 37px; font-size: 1.15em; line-height: 1.45em; padding: 4px 0 0 55px; min-height: 40px; margin: 0 0 30px 0;}

/*Download List*/
main ul.download-list {list-style: none; padding: 15px 10px 0 0;}
main ul.download-list li {background: url(inc/img/download.svg) no-repeat; background-size: 30px; background-position: 0 3px; font-size: 1.05em; line-height: 1.45em; padding: 4px 0 0 40px; min-height: 36px; margin: 0 0 2px 0;}
main ul.download-list li a:hover {color: rgb(8,181,200); text-decoration: none;}
main a.download-link {background: url(inc/img/download.svg) no-repeat; background-size: 30px; background-position: 0 3px; font-size: 1.05em; line-height: 1.45em; padding: 4px 0 0 40px; min-height: 36px; margin: 0 0 2px 0;}
main a.download-link:hover {color: rgb(8,181,200); text-decoration: none;}

/*Drop-List*/
main .drop-list ul {clear: both; float: left; width: 100%; padding: 0; margin: 0; list-style: none;}
main .drop-list ul li {clear: both; float: left; width: 100%; margin: 0;}
main .drop-list ul li a {position: relative; clear: both; float: left; width: 100%; font-weight: 600; color: rgb(255,255,255); border-radius: 5px; padding: 12px 30px; margin-bottom: 10px; cursor: default;}

main .drop-list li.has-children > a {cursor: pointer;}
main .drop-list li.has-children > a:after {content: "+"; position: absolute; top: 0; right: 0; width: 6%; height: 100%; text-align: center; font-size: 1.8em; padding: 10px 0 0 0; border-radius: 0 5px 5px 0;}
main .drop-list li.has-children > a.open:after {content: "–";}
main .drop-list li.has-children ul {max-height: 0; overflow: hidden; transition: .3s ease;}
main .drop-list li.has-children ul.show {max-height: 2000px;}

main .drop-list > ul > li > a {font-size: 1.1em; background: rgb(54,181,200);}
main .drop-list > ul > li.has-children > a:after  {background: rgb(106,205,220); transition: .3s ease;}
main .drop-list > ul > li.has-children > a:hover:after {background: rgb(106, 212, 227);}

main .drop-list ul ul > li > a {font-size: 1.1em; background: rgb(106,205,220);}
main .drop-list ul ul > li.has-children > a:after  {background: rgb(124,222,236); transition: .3s ease;}
main .drop-list ul ul > li.has-children > a:hover:after {background: rgb(148,234,246);}

main .drop-list ul ul ul > li > a {font-size: 1.1em; background: rgb(106,205,220);}
main .drop-list ul ul ul > li.has-children > a:after  {background: rgb(124,222,236); transition: .3s ease;}
main .drop-list ul ul ul > li.has-children > a:hover:after {background: rgb(148,234,246);}

main .drop-list ul > li > ul > li > a {margin-left: 2%; width: 98%; background: rgb(106,205,220);}
main .drop-list ul > li > ul > li > ul > li > a {margin-left:4%; width: 96%; background: rgb(124,222,236);}
main .drop-list ul > li > ul > li > ul > li  > ul > li > a {margin-left:6%; width: 94%; background: rgb(124,222,236);}

/*Pricing Table*/
.pricing-table {float: left; width: 100%; border-radius: 5px; background: rgb(243,243,243); pointer-events: none;}
.pricing-table h1  {clear: both; float: left; width: 100%; padding: 12px 0; border-radius: 5px 5px 0 0; text-align: center; font-size: 1.2em; font-weight: 600; color: rgb(255,255,255); background: rgb(54,181,200);}
.pricing-table .price-row {position: relative; clear: both; float: left; width: 100%; height: 130px; background: rgb(106,205,220);}
.pricing-table .price-row:after {top: 100%; left: 50%; border: solid transparent; content: " "; position: absolute; border-color: rgba(136, 183, 213, 0); border-top-color: rgb(106,205,220); border-width: 14px; margin-left: -14px;
}
.pricing-table .price-row h2 {clear: both; float: left; width: 100%; margin: 18px 0 0 0; color: rgb(255,255,255); text-align: center; font-size: 3.2em;}
.pricing-table .price-row span, .pricing-table .price-row p {clear: both; float: left; width: 100%; color: rgb(255,255,255); text-align: center; font-size: 1.25em; font-weight: 100;}

.pricing-table ul {clear: both; float: left; width: 100%; padding: 10px 0 0 0; list-style: none;}
.pricing-table ul li {clear: both; float: left; width: 100%; padding: 17px 0; margin: 0; text-align: center; border-bottom: 1px solid rgb(227,227,227); color: rgb(96,96,96);}
.pricing-table ul li:last-child {border: none;}

.pricing-table ul li.one-user {background: url("inc/img/one-user.png") no-repeat; background-position: 38% 20px; padding: 17px 0 17px 16%;}
.pricing-table ul li.two-user {background: url("inc/img/two-user.png") no-repeat; background-position: 34% 20px; padding: 17px 0 17px 18%;}
.pricing-table ul li.three-user {background: url("inc/img/three-user.png") no-repeat; background-position: 30% 20px; padding: 17px 0 17px 24%;}
.pricing-table ul li.four-user {background: url("inc/img/four-user.png") no-repeat; background-position: 28% 20px; padding: 17px 0 17px 34%;}

.pricing-table a.pricing-overview{clear: both; float: left; width: 100%; height: 64px; padding: 18px; background: rgb(106,205,220); text-align: center; color: rgb(255,255,255); font-size: 1.2em; pointer-events: auto; transition: background .3s ease;}

.pricing-table a.pricing-call-to-action {clear: both; float: left; width: 100%; height: 64px; padding: 18px; background: rgb(140,140,140); border-radius: 0 0 5px 5px; text-align: center; color: rgb(255,255,255); font-size: 1.2em; pointer-events: auto; transition: background .3s ease;}
.pricing-table a.pricing-call-to-action:hover {text-decoration: none; background: rgb(54,181,200);}

/*Modules Table*/
.modules-table {float: left; width: 100%; height: auto; border-radius: 5px; background: rgb(243,243,243); margin: 0 0 35px 0;}
.modules-table h1 {position: relative; clear: both; float: left; width: 100%; padding: 24px 35px; border-radius: 5px 5px 0 0; font-size: 1.2em; font-weight: 600; color: rgb(255,255,255); background: rgb(54,181,200);}
.modules-table h1 span.show-hide-label {position: absolute; top: 0; right: 0; width: 80px; height: 100%; padding: 11px 0; border-radius: 0 5px 0 0; text-align: center; font-size: 2em; font-weight: 600; background: rgb(106,205,220); color: rgb(255,255,255); cursor: pointer; transition: background .3s ease;}
.modules-table h1 span.show-hide-label:hover {background: rgb(106, 212, 227);}

.modules-table .show-hide-section {clear: both; float: left; width: 100%; height: auto;}

.modules-table table {clear: both; float: left; width: 100%;}
.modules-table table tr {clear: both; float: left; width: 100%; padding: 28px 35px; border-bottom: 1px solid rgb(227,227,227);}
.modules-table table tr:first-child {background: rgb(151,227,238); color: rgb(255,255,255); padding: 10px 35px; border: none;}
.modules-table table tr:last-child {border: none;}
.modules-table table tr th {font-weight: 500;}
.modules-table table tr td {color: rgb(96,96,96); font-weight: 400;}
.modules-table table tr th, .modules-table table tr td {float: left; width: 33.33%; padding: 0; line-height: 1.7em;}
.modules-table table tr th:first-child, .modules-table table tr td:first-child {text-align: left;}
.modules-table table tr th:nth-child(2), .modules-table table tr td:nth-child(2) {text-align:  center;}
.modules-table table tr th:last-child, .modules-table table tr td:last-child {text-align: right;}

.modules-table.hide {display: block!important;}
.modules-table.hide h1 {border-radius: 5px;}
.modules-table.hide span.show-hide-label {padding: 14px 0; border-radius: 0 5px 5px 0;}
.modules-table.hide .show-hide-section {max-height: 0; overflow: hidden;}

/*Features Tables*/
.feature-table {padding: 30px 35px 25px 35px; margin: 0 0 30px 0; width: 100%; background: rgb(245,245,245);}
.feature-table img {width: auto; height: auto; max-width: 100%; max-height: 80px;}
.feature-table h4, .feature-table p, .feature-table a {display: block; width: 100%; text-align: center;}
.feature-table h4 {font-weight: 500; margin: 28px 0 15px 0; font-size: 18px; line-height: 19px;}
.feature-table p {font-weight: 300; margin: 0; font-size: 15px; line-height: 21px; }
.feature-table a {margin: 25px 0 0 0; font-size: 15px; font-weight: 400;}

/*Dates*/
.date-post {padding: 50px 0 ; border-bottom: 1px solid rgb(227,227,227);}
.date-post:first-child {padding: 0 0 50px 0;}
.date-post:last-child {padding: 50px 0 0 0; border: none;}
.date-post img {width: 100%;}
.date-post span.date {display: block; font-size: 1.25em; font-weight: 300; color: rgb(150,150,150); padding: 0 0 5px 0;}

/*Referenzen*/
#referenzen-slider {position: relative; clear: both; float: left; width: 100%; height: 1500px; z-index: 10!important;}
.referenz-slide {width: 100%; margin: 0 0 80px 0;}

/*Footer*/

footer {clear:both; float:left; width:100%; position:relative; top:100px;}
.footer-start {position:static; top:0;}

/*Footer - Contact*/
footer .footer-contact{float:left; width:100%; background:rgba(48,71,74,1.0); color:rgba(255,255,255,1.00); text-align:center; padding:50px 0;}
footer .footer-contact p {font-size:1.2em;}
footer .footer-contact .btn-primary {margin:40px 0 0 0;}

/*Footer - Overview*/
footer .footer-overview {float:left; width:100%; background:rgba(9,181,200,1.0); color:rgba(255,255,255,1.00); padding:60px 0 15px 0;}

@media only screen and (min-width: 1000px)
{
    footer .footer-overview .col-md-2 {width: 20%;}
}
footer .footer-overview h6 {clear:both; float:left; font-size:1.05em; font-weight:700; margin:10px 0 8px 0;}
footer .footer-overview h6 a {color:rgba(255,255,255,1.00);}
footer .footer-overview h6 a:hover {color:rgba(255,255,255,1.00);}
footer .footer-overview ul {padding:0; list-style:none;}
footer .footer-overview ul li {clear:both; float:left; color:rgba(255,255,255,1.00); font-weight:300; font-size:0.95em; margin:15px 0 0 0;}
footer .footer-overview ul li:last-child {margin:15px 0 21px 0;}
footer .footer-overview ul li a {font-weight: 400; color: rgba(255,255,255,0.75); transition: .3s ease;}
footer .footer-overview ul li a:hover {color: rgb(255,255,255);}

footer .footer-overview .social-group {float: left; margin: 12px 45px 20px 0; opacity: 0.75; transition: .3s ease;}
footer .footer-overview .social-group:hover {opacity: 1;}
footer .footer-overview .social-group img {clear: both; float: left; width: 58px!important; height: 58px!important; max-width: auto!important;}
footer .footer-overview .social-group .social-label {clear: both; float: left; margin: 4px 0 0 0; font-size: 0.95em; font-weight: 400; color: rgb(255,255,255);}

footer .footer-overview .footer-close {margin:60px 0 0 0;}
footer .footer-overview img {float:left; max-width:130px; height: 31px;}
footer .footer-overview p {float:left; font-size:0.85em; color:rgba(255,255,255,1.00); padding:9px 0 0 15px; font-weight:300;}
footer .footer-overview p a {color:rgba(255,255,255,1.00);}


@media only screen and (min-width: 1200px)
{
    nav.navbar-collapsing {display: none;}

    /*#wpcf7-f1043-p1015-o1 ul li:nth-child(9) {width: 48%;}
    #wpcf7-f1043-p1015-o1 ul li:nth-child(10) {width: 48%; clear: none; margin-left: 4%;}*/
}

@media only screen and (min-width: 992px) and (max-width: 1200px)
{
    nav.nav-global .cludes-logo  {background-position: 0 46%; background-size: 150px; min-width: 155px;}
    nav.scroll .cludes-logo {background-position: 0 45%; background-size: 120px; min-width: 140px;}

    nav.nav-global ul li a {padding:40px 12px 0 12px; font-size: 1.05em;}
    nav.scroll ul li a {padding: 0 13px; font-size: 1em;}

    nav.nav-global .btn-demo {font-size: 1em; padding: 7px 9px; margin: 32px 0 0 12px;}
    nav.scroll .btn-demo {font-size: 0.95em; padding: 5px 9px; margin: 14px 0 0 10px;}

    nav.navbar-collapsing {display: none;}

    /*#wpcf7-f1043-p1015-o1 ul li:nth-child(9) {width: 48%;}
    #wpcf7-f1043-p1015-o1 ul li:nth-child(10) {width: 48%; clear: none; margin-left: 4%;}*/

}

@media only screen and (max-width: 992px)
{
    nav.nav-global .cludes-logo  {background-position: 0 46%; background-size: 150px; min-width: 160px; height: 80px;}

    /*Navbar - Collapse Icon*/
    .navbar-toggle {margin-right: -5px; margin-top: 20px;}
    .navbar-toggle .icon-bar {width: 35px; background-color: rgba(0,0,0,0.75);}
    nav.scroll .navbar-toggle .icon-bar {width: 35px; background-color: rgba(0,0,0,0.75)!important;}
    nav.nav-global-start .navbar-toggle .icon-bar {width: 35px; background-color: rgba(255,255,255,0.75);}
    .navbar-toggle .icon-bar+.icon-bar {margin-top:6px;}

    /*Navbar - Global*/
    nav.nav-global {position:fixed; z-index:100; width:100%; height:80px;}
    nav.nav-global .nav-menu {display: none;}

    .navbar-toggle {position: fixed; z-index: 102; right: 15px; padding: 9px 10px; top: 0; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px;}
    .navbar-toggle-start .icon-bar {background: rgba(255,255,255,.85);}

    /*Navbar - Collapsing*/
    nav.navbar-collapsing {position: fixed; overflow: scroll; top: 0; bottom: 0; left: 0; right: 0; z-index: 101; opacity: 0; visibility: hidden; background: rgba(9,181,200,1.0); font-size: 1.2em; font-weight: 100; transition: .8s ease;}
    nav.navbar-collapsing.show {opacity: 1; visibility: visible;}

    nav.navbar-collapsing ul {clear: both; float: left; padding: 0; width: 100%; list-style: none;}
    nav.navbar-collapsing li {clear: both; float: left; width: 100%;}
    nav.navbar-collapsing a {clear: both; float: left; width: 100%; padding: 20px 0; text-align: center; border-bottom: 1px solid rgba(0,0,0,0.1);}

    nav.navbar-collapsing li.has-children > a:after {content: "▼"!important; position: relative; top: -1px; right: 0; bottom: 0; font-size: 60%; margin:0 0 0 4px; color:rgba(0, 0, 0, 0.65)!important;}

    nav.navbar-collapsing ul.sub-menu {height: 0; overflow: hidden; transition: .3s ease;}
    nav.navbar-collapsing ul.sub-menu.show {height: auto; background: rgba(103, 103, 103, 1);}
    nav.navbar-collapsing a.open {background: rgba(12, 149, 169, 1);}

    nav.navbar-collapsing > ul {padding: 80px 0 0 0; margin: 0;}
    nav.navbar-collapsing > ul > li > a {color: rgb(255,255,255);}

    nav.navbar-collapsing > ul ul > li > a {color: rgb(255,255,255);}

    nav.navbar-collapsing .btn-demo  {padding: 20px 0;  color: rgb(255,255,255); font-size: 1em; font-weight: 100; border-radius: 0; margin: 0;}

    /*Slider*/
    header.start #hero-slider {float:left; max-width:100%; height:650px; position:relative; z-index: 10!important;}

    header.start #hero-prev {left: 5px; display: none;}
    header.start #hero-next {right: 5px; display: none;}
    header.start #hero-pager {display: none;}

    header.start #hero-slider {display: none!important;}
    header.start #hero-static {display: block; margin-top: 150px; height: 240px; color: rgb(255,255,255); text-align: center; -webkit-animation: fade-in .8s; -moz-animation: fade-in .8s; animation: fade-in .8s;}
    header.start #hero-static h1 {font-size: 4.5em;}
    header.start #hero-static h2 {font-size: 2.2em;}

    main {max-width: 100%; top:80px; overflow: hidden;}

    main .sub-nav {display: none;}
    main .sub-nav-left {display: none;}

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {margin: 0 0 30px 0;}

    footer {max-width: 100%; overflow: hidden;}

    #livelychatsupport-chatbox {display: none!important;}

}

@media only screen and (max-width: 767px)
{
    .img-start {width: 100%!important; padding: 20px 35px!important; margin: 0!important;}

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {margin: 0 0 30px 0; width: 100%; clear: both; float: left;}
}
.menu-home {text-indent: -9999px; background-image: url(https://www.cludes.de/wp-content/uploads/2019/12/1526481336.png) !important; background-repeat: no-repeat !important
}