/* ----------------------------------------------------------------
Custom CSS
Add all your Custom Styled CSS here for New Styles or
Overwriting Default Theme Styles for Better Hanlding Updates
-----------------------------------------------------------------*/
@font-face {
font-family: "Capitolium2";
src: url(fonts/capitolium-2-bold.woff2) format("woff2");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Capitolium2";
src: url(fonts/capitolium-2-regular.woff2) format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Capitolium2";
src: url(fonts/capitolium-2-italic.woff2) format("woff2");
font-weight: normal;
font-style: italic;
}
::selection {
background: #0077b6; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #0077b6; /* Gecko Browsers */
}
@media (min-width: 1200px) {
.container {
max-width: 1300px !important;
}
#cs-header-row-top .container,
#cs-header-row-bottom .container,
#cs-super-5.container,
.cs-contact-top-border .container,
.cs-impressum-top-border .container,
.cs-datenschutz-top-border .container {
max-width: 1170px !important;
}
}
.css3-spinner > .cs-page-loader {
width: 42px;
height: 42px;
margin-top: -21px;
margin-left: -21px;
background-color: transparent !important;
background-image: url(../images/commsult/graphic/loader_icon.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
-webkit-animation: csspin 1s infinite linear, csspinopacity 1s ease;
animation: csspin 1s infinite linear, csspinopacity 1s ease;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px white inset !important;
}
#gotoTop:hover {
background-color: #00a7dd !important;
}
a[href^="tel"],
a[href^="tel"]:hover,
a[href^="tel"]:active {
color: inherit;
text-decoration: none;
}
html {
min-width: 330px;
}
body {
-webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar {
display: none;
}
.cs-marginbottommd {
margin-bottom: 100px !important;
}
.cs-marginbottomlg {
margin-bottom: 160px !important;
}
.cs-marginbottomsm {
margin-bottom: 60px !important;
}
.cs-marginbottomxs {
margin-bottom: 30px !important;
}
.cs-hidden-animate {
opacity: 0;
}
.cs-hidden-md-up {
display: none;
}
.cs-hidden-sm-down {
display: block;
}
@media (max-width: 767px) {
.cs-hidden-md-up {
display: block;
}
.cs-hidden-sm-down {
display: none;
}
.counter {
font-size: 60px !important;
line-height: 90px !important;
}
}
.cs-standard-img-1-1 {
width: 100%;
padding-top: 100%;
background-size: cover;
background-position: center;
}
.cs-standard-img-16-9 {
width: 100%;
padding-top: 56.25%;
background-size: cover;
background-position: center;
}
/* Header
============================================= */
#header.sticky-header,
#header {
height: 80px;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
background-color: rgb(59, 66, 78);
}
#header.sticky-header #header-wrap,
#header #header-wrap {
position: fixed;
width: 100%;
height: 80px;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
z-index: 99;
}
@keyframes csheadertobottom {
0% {
height: 80x;
}
100% {
height: 50vh;
}
}
@keyframes cslinetobottom {
from {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
to {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
}
@keyframes csheadertotop {
0% {
height: 50vh;
}
100% {
height: 80px;
}
}
@keyframes cslinetotop {
from {
-webkit-transform: translateY(400px);
transform: translateY(400px);
}
to {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.cs-company #header.sticky-header #header-wrap,
#header #header-wrap {
box-sizing: content-box;
}
#cs-header-row-top {
height: 80px;
overflow: hidden;
/* border-bottom: 10px solid #0077B6; */
}
.cs-header-line {
position: absolute;
width: 100%;
top: 80px;
z-index: 121;
margin: 0;
padding: 5px 0;
background: linear-gradient(
-135deg,
rgb(0, 119, 182) 0%,
rgb(0, 82, 127) 100%
);
}
.cs-company #cs-header-row-top {
background: none;
background-color: rgb(59, 66, 78);
}
@media (max-width: 991px) {
#cs-primary-menu > ul {
text-align: left;
}
}
#cs-header-row-top .container {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#cs-header-row-top.cs-header-expanded .container.cs-expanded-side-clear {
padding-left: 0px !important;
padding-right: 0px !important;
margin-left: 0px !important;
margin-right: 0px !important;
max-width: unset !important;
}
#cs-header-row-top .row {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#cs-header-row-top.cs-header-expanded .row.cs-expanded-side-clear {
width: 100%;
margin-left: 0px;
margin-right: 0px;
}
.cs-company #cs-header-row-top.cs-header-expanded .row.cs-expanded-side-clear {
width: auto;
}
#cs-header-row-top [class*="col-"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#cs-header-row-top.cs-header-expanded #cs-primary-menu {
padding-left: 0px;
padding-right: 0px;
}
/* #cs-header-row-top.cs-header-expanded #cs-logo, #cs-header-row-top.cs-header-expanded #cs-responsive-menu, #cs-header-row-top.cs-header-expanded #cs-demo-button {
padding: 40px;
} */
/* #cs-header-row-top.cs-header-expanded #cs-responsive-menu {
padding: 27px 40px;
} */
#cs-header-row-top .row {
height: 100%;
position: relative;
}
#cs-logo {
padding-top: 30px;
width: 100%;
display: block;
/* margin-top: auto;
margin-right: auto; */
}
.cs-company #cs-logo {
-webkit-transition: padding 0.3s ease;
-o-transition: padding 0.3s ease;
transition: padding 0.3s ease;
}
.cs-company #cs-header-row-top.cs-header-expanded #cs-logo {
padding-top: 33px;
}
#cs-logo {
text-emphasis: center;
}
.cs-company #cs-logo {
text-align: center;
}
#cs-logo img {
height: 22px;
}
.cs-company #cs-logo img {
height: 19px;
}
#cs-logo svg {
height: 24px;
}
@keyframes cscontlogobig {
0% {
height: 21px;
}
100% {
height: 50vh;
}
}
@keyframes csanimatelogobig {
0% {
transform: scale(0);
}
10% {
padding-top: 0;
transform: translateY(38vh) scale(4.5);
}
100% {
padding-top: 0;
transform: translateY(38vh) scale(4.5);
}
}
@keyframes csanimatelogoup {
0% {
opacity: 1;
padding-top: 0;
transform: translateY(38vh) scale(4.5);
}
100% {
opacity: 1;
margin-top: 0px;
transform: translateY(0px) scale(1);
}
}
#cs-responsive-menu {
position: absolute;
right: 0px;
z-index: 1;
padding-right: 15px;
}
#cs-responsive-menu i {
font-size: 22px;
line-height: 22px;
padding-top: 13px;
padding-bottom: 13px;
color: #ffffff;
cursor: pointer;
}
#cs-primary-menu > ul {
list-style: none;
margin: 0px;
height: 100%;
text-align: center;
font-size: 0px;
}
.cs-company #cs-primary-menu > ul {
text-align: left;
}
#cs-primary-menu > ul > li {
display: inline-block;
line-height: 48px;
width: 140px;
vertical-align: top;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cs-company #cs-primary-menu > ul > li {
width: auto;
margin: 0 15px;
}
.cs-company #cs-primary-menu > ul > li:first-child {
margin-left: 0px;
}
.cs-company #cs-primary-menu > ul > li:last-child {
margin-right: 0px;
}
@media (max-width: 991px) {
#cs-primary-menu > ul > li {
width: 25%;
line-height: 67px;
border-top: 1px solid transparent;
}
#cs-header-row-top.cs-header-expanded #cs-primary-menu > ul > li {
border-top: 1px solid #ffffff;
}
.cs-company #cs-header-row-top.cs-header-expanded #cs-primary-menu > ul > li {
border-top-color: transparent;
}
.cs-company #cs-primary-menu > ul > li {
display: block;
margin: 0;
line-height: 48px;
}
}
#cs-primary-menu > ul > li > a {
color: #ffffff;
font-family: Roboto;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-company #cs-primary-menu > ul > li > a {
text-align: center;
}
/* @media (max-width: 991px) {
#cs-primary-menu > ul > li > a {
font-size: 18px;
}
} */
#cs-primary-menu > ul > li:hover {
background: #ffffff !important;
}
.cs-company #cs-primary-menu > ul > li:hover {
background: none !important;
}
#cs-primary-menu > ul > li:hover > a {
color: #0077b6 !important;
}
.cs-company #cs-primary-menu > ul > li:hover > a {
color: #00a7dd !important;
}
#cs-primary-menu > ul > li.cs-active-nav {
background: #ffffff;
}
#cs-primary-menu > ul > li.cs-active-nav > a {
color: #0077b6;
}
#cs-primary-menu > ul:hover > li.cs-active-nav {
background: transparent;
}
#cs-primary-menu > ul:hover > li.cs-active-nav > a {
color: #ffffff;
}
#cs-demo-button {
padding-top: 8px;
padding-bottom: 8px;
}
.cs-company #cs-demo-button {
text-align: right;
}
#cs-demo-button .cs-button {
height: 32px;
min-width: 150px;
width: 100%;
font-size: 12px;
line-height: 29px;
font-weight: normal;
border-width: 1px;
}
.cs-company #cs-demo-button .cs-button {
min-width: 100px;
width: auto;
}
.cs-company #cs-demo-button .cs-link-4 {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.2px;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-company #cs-demo-button .cs-link-4:hover {
color: #00a7dd;
}
.cs-company #cs-demo-button .cs-link-4 .cs-arrow {
width: 9px;
margin-left: 10px;
margin-right: 25px;
}
@media (max-width: 991px) {
.cs-company #cs-demo-button .cs-link-4 {
display: block;
text-align: center;
line-height: 48px;
margin-bottom: 24px;
}
.cs-company #cs-demo-button .cs-link-4 .cs-arrow {
margin-right: 0;
}
#cs-demo-button .cs-button {
display: none;
}
.cs-company #cs-demo-button {
position: absolute;
top: 310px;
}
.cs-company #cs-demo-button .cs-button {
display: block;
}
}
#cs-demo-button .cs-button.cs-button-arrow:after {
line-height: 30px;
height: 30px;
}
@media (max-width: 991px) {
#cs-demo-button .cs-button.cs-button-arrow:after {
height: 44px;
line-height: 48px;
}
}
/* #cs-demo-button .cs-arrow {
line-height: 32px;
height: 32px;
}
#cs-demo-button .button-cs-outline-left, #cs-demo-button .button-cs-outline-right {
width: 1px;
}
#cs-demo-button .button-cs-outline-top, #cs-demo-button .button-cs-outline-bottom {
height: 1px;
width: calc(100% - 2px);
left: 1px;
}
#cs-demo-button .button-cs-background {
height: calc(100% - 2px);
width: calc(100% - 2px);
top: 1px;
left: 1px;
} */
#cs-header-row-bottom {
box-shadow: 0 20px 29px 0 rgba(0, 0, 0, 0.15);
background: #ffffff;
padding-top: 17px;
padding-bottom: 17px;
height: 93px;
}
@media (max-width: 991px) {
#cs-header-row-bottom {
display: none;
}
/* #cs-header-row-bottom .container {
padding-left: 55px !important;
padding-right: 55px !important;
}
#cs-header-row-bottom .row {
flex-wrap: nowrap;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
overflow-y: hidden;
border-left: 2px solid #F5F5F5;
border-right: 2px solid #F5F5F5;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#cs-header-row-bottom .row.cs-scroll-start {
border-left: 2px solid transparent;
border-right: 2px solid #F5F5F5;
}
#cs-header-row-bottom .row.cs-scroll-end {
border-left: 2px solid #F5F5F5;
border-right: 2px solid transparent;
}
#cs-header-row-bottom .cs-dropdown-logo {
padding-left: 0px !important;
margin-bottom: 0px;
}
#cs-header-row-bottom .cs-dropdown-submenu-wrapper {
padding-right: 0px !important;
width: auto !important;
white-space: nowrap !important;
} */
}
/* Header Dropdown
============================================= */
.cs-dropdown-wrapper {
z-index: 1;
/* display: block; */
/* visibility: hidden; */
opacity: 0;
max-height: 0px;
position: fixed;
width: 100vw;
left: 0px;
box-shadow: 0 20px 29px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
-webkit-transition: opacity 0.4s ease,
max-height 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: opacity 0.4s ease,
max-height 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: opacity 0.4s ease,
max-height 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#cs-primary-menu > ul > li.cs-expand-dropdown-li {
background: #ffffff;
}
#cs-primary-menu > ul > li.cs-expand-dropdown-li > a {
color: #0077b6;
}
#cs-primary-menu > ul > li:hover > .cs-dropdown-wrapper {
opacity: 1;
transition-delay: 0s;
max-height: 2000px !important;
-webkit-transition: opacity 0s ease,
max-height 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: opacity 0s ease,
max-height 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: opacity 0s ease,
max-height 0.1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
z-index: 10;
}
@media (max-width: 991px) {
.cs-dropdown-wrapper {
max-height: 0px;
overflow: hidden;
box-shadow: none;
position: absolute;
-webkit-transition: none;
-o-transition: none;
transition: none;
padding-left: 15px;
-webkit-transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-o-transition: padding 0.3s ease;
transition: padding 0.3s ease;
}
#cs-primary-menu > ul > li.cs-active-nav > .cs-dropdown-wrapper {
opacity: 1;
transition-delay: 0s;
max-height: 2000px !important;
}
#cs-header-row-top.cs-header-expanded
#cs-primary-menu
> ul:hover
> li.cs-active-nav
> .cs-dropdown-wrapper {
max-height: 0px;
}
#cs-header-row-top.cs-header-expanded .cs-dropdown-wrapper {
padding-left: 0px;
}
.cs-company #cs-header-row-top #cs-primary-menu {
position: absolute;
top: 70px;
}
}
.cs-dropdown-row-multi,
.cs-dropdown-row {
background: #ffffff;
padding-top: 27px;
padding-bottom: 27px;
}
.cs-dropdown-row-multi:hover {
background: #f5f5f5;
}
.cs-dropdown-logo {
text-align: left;
padding-left: 75px;
}
.cs-dropdown-logo img {
max-width: none;
}
.cs-dropdown-submenu-wrapper {
font-size: 0px;
text-align: left;
}
.cs-dropdown-submenu-wrapper ul.tab-nav {
border-bottom: none;
white-space: nowrap;
}
.cs-dropdown-submenu-wrapper ul.tab-nav li,
.cs-dropdown-submenu-wrapper ul.tab-nav li:first-child {
/* width: 155px; */
box-sizing: content-box;
margin: 0px;
border: none;
height: auto;
display: inline-block;
float: none;
}
.cs-dropdown-submenu-wrapper ul.tab-nav li {
padding-left: 70px;
}
.cs-dropdown-submenu-wrapper ul.tab-nav li:first-child {
padding-left: 100px;
}
@media (max-width: 991px) {
.cs-dropdown-submenu-wrapper ul.tab-nav li {
padding-left: 50px;
}
.cs-dropdown-submenu-wrapper ul.tab-nav li:first-child {
padding-left: 20px;
}
}
.cs-dropdown-submenu-wrapper ul.tab-nav li a {
padding: 0px;
height: auto;
background: transparent;
}
.cs-dropdown-submenu-wrapper ul.tab-nav li.cs-active-tab a,
.cs-dropdown-submenu-wrapper ul.tab-nav li.cs-initial-active-tab a {
background: transparent;
top: 0px;
}
.cs-dropdown-submenu-wrapper ul.tab-nav li a span {
border-bottom: 2px solid transparent;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cs-dropdown-submenu-wrapper ul.tab-nav li.cs-active-tab a span,
.cs-dropdown-submenu-wrapper
ul.tab-nav
li.cs-initial-active-tab:not(.cs-inactive-tab)
a
span {
border-bottom: 2px solid #0e75c4;
}
.cs-dropdown-submenu-wrapper .tab-container {
padding: 0px;
}
.cs-dropdown-submenu-wrapper .tab-container ul {
padding-left: 100px;
list-style: none;
margin: 0px;
text-align: left;
font-size: 0px;
white-space: nowrap;
/* height: 0px; */
display: none;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cs-dropdown-submenu-wrapper .tab-container ul.cs-active-tab,
.cs-dropdown-submenu-wrapper
.tab-container
ul.cs-initial-active-tab:not(.cs-inactive-tab) {
/* height: 24px; */
display: block;
opacity: 1;
pointer-events: auto;
}
@media (max-width: 991px) {
.cs-dropdown-submenu-wrapper .tab-container ul {
padding-left: 20px;
}
}
.cs-dropdown-submenu-wrapper .tab-container ul li {
margin-right: 30px;
display: inline-block;
line-height: 24px;
vertical-align: top;
-webkit-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.cs-dropdown-submenu-wrapper .tab-container ul li a {
color: #383d47;
font-family: Roboto;
font-size: 13px;
font-weight: 300;
letter-spacing: 0.2px;
}
.cs-dropdown-submenu-wrapper .tab-container ul li a .cs-external-link:after {
content: "";
display: inline-block;
width: 0px;
height: 8px;
background-image: url(../images/commsult/graphic/arrow_blue.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: 0px;
opacity: 0;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cs-dropdown-submenu-wrapper .tab-container ul li:hover a {
color: #0077b6 !important;
font-weight: 500 !important;
}
.cs-dropdown-submenu-wrapper .tab-container ul li.cs-active-subnav a {
color: #0077b6;
font-weight: 500;
}
.cs-dropdown-submenu-wrapper .tab-container ul:hover li.cs-active-subnav a {
color: #383d47;
font-weight: 300;
}
.cs-dropdown-submenu-wrapper
.tab-container
ul
li:hover
a
.cs-external-link:after {
width: 11px;
margin-left: 6px;
opacity: 1;
}
.cs-dropdown-submenu-wrapper .cs-tabs {
margin: 0px;
}
.cs-dropdown-submenu {
padding-left: 70px;
box-sizing: content-box;
display: inline-block;
vertical-align: top;
}
.cs-dropdown-submenu:first-of-type {
padding-left: 100px;
}
@media (max-width: 991px) {
.cs-dropdown-row-multi .cs-dropdown-logo {
padding: 0;
margin-bottom: 30px;
text-align: center;
}
.cs-dropdown-submenu {
padding-left: 0px !important;
margin-bottom: 30px;
display: block;
}
/* .cs-dropdown-row-multi .cs-dropdown-submenu {
margin-left: 155px;
} */
.cs-dropdown-submenu {
padding-left: 0px;
}
.cs-dropdown-row-multi,
.cs-dropdown-row {
padding-top: 50px;
padding-bottom: 50px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
}
.cs-dropdown-submenu-title {
font-family: Capitolium2;
color: #2d333d;
font-size: 20px;
font-weight: bold;
line-height: 26px;
text-align: left;
margin-bottom: 9px;
}
.cs-dropdown-submenu:hover .cs-dropdown-submenu-title span {
border-bottom: 2px solid #0e75c4 !important;
}
.cs-dropdown-submenu > p {
color: #96999e;
font-family: Capitolium2;
font-size: 14px;
font-style: italic;
letter-spacing: 0.1px;
line-height: 20px !important;
width: 150px;
}
.cs-dropdown-submenu > ul {
list-style: none;
margin: 0px;
text-align: left;
}
.cs-dropdown-submenu > ul > li {
line-height: 24px;
vertical-align: top;
-webkit-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
}
.cs-dropdown-submenu > ul > li > a {
color: #383d47;
font-family: Roboto;
font-size: 13px;
font-weight: 300;
letter-spacing: 0.2px;
}
.cs-dropdown-submenu > ul > li > a .cs-external-link:after {
content: "";
display: inline-block;
width: 0px;
height: 8px;
background-image: url(../images/commsult/graphic/arrow_blue.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-left: 0px;
opacity: 0;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cs-dropdown-submenu > ul > li:hover > a {
color: #0077b6 !important;
font-weight: 500 !important;
}
.cs-dropdown-submenu > ul > li:hover > a .cs-external-link:after {
width: 11px;
margin-left: 6px;
opacity: 1;
}
@media (max-width: 991px) {
.cs-dropdown-submenu-title {
text-align: center;
}
.cs-dropdown-submenu-title span {
margin: 0px !important;
}
.cs-dropdown-submenu.cs-mobile-active .cs-dropdown-submenu-title span {
border-bottom: 2px solid #0e75c4;
}
.cs-dropdown-submenu-wrapper:hover
.cs-dropdown-submenu.cs-mobile-active
.cs-dropdown-submenu-title
span {
border-bottom: 2px solid transparent;
}
.cs-dropdown-submenu > p {
margin: auto;
text-align: center;
}
.cs-dropdown-submenu > ul > li > a {
text-align: center;
line-height: 36px;
}
.cs-dropdown-submenu > ul > li.cs-mobile-active > a {
color: #0077b6;
font-weight: 500;
}
.cs-dropdown-submenu-wrapper:hover li.cs-mobile-active > a {
color: #383d47;
font-weight: 300;
}
}
.content-wrap {
padding-bottom: 0px;
padding-top: 93px;
}
@media (max-width: 991px) {
.content-wrap {
padding-top: 47px;
}
}
#content [class*="col-"] {
margin-bottom: 60px;
}
#content .cs-section {
margin-bottom: 100px;
}
@media (max-width: 767px) {
#content .cs-section {
margin-bottom: 60px;
}
}
#content .cs-section:first-child {
margin-top: 160px;
}
#content .cs-section.cs-blue-img-ol-bg {
padding-top: 50px;
padding-bottom: 50px;
position: relative;
background-size: cover;
background-repeat: no-repeat;
}
#content .cs-section.cs-blue-img-ol-bg:before {
content: " ";
position: absolute;
background: linear-gradient(217.26deg, #0897c7 0%, #08395a 100%);
opacity: 0.8;
width: 100%;
height: 101%;
top: 0px;
left: 0px;
}
/* Hero Slider
============================================= */
@media (max-width: 991px) {
#slider {
margin-top: 47px !important;
}
#slider .swiper-slide {
height: 580px !important;
}
}
#slider .slider-arrow-left,
#slider .slider-arrow-right {
height: 100%;
width: 200px;
top: 0px;
margin-top: 0px;
border-radius: 0px;
background: transparent;
cursor: w-resize;
}
#slider .slider-arrow-left i,
#slider .slider-arrow-right i {
display: none !important;
}
#slider .slider-arrow-right {
cursor: e-resize;
}
#slider .slider-arrow-left:hover,
#slider .slider-arrow-right:hover {
background: transparent !important;
}
#slider + #content .content-wrap {
padding-top: 0px;
}
#slider .cs-caption-wrapper {
width: 450px;
z-index: 1;
}
@media (max-width: 991px) {
#slider .cs-caption-wrapper {
width: 350px !important;
}
}
#slider h1 {
margin-bottom: 20px;
}
#slider .cs-slider-circle-wrapper {
opacity: 0.85;
position: absolute;
}
#slider .not-animated {
opacity: 1;
animation: csfadeout 1s ease;
animation-fill-mode: forwards;
}
@keyframes csfadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.dark .slider-caption {
text-shadow: none;
}
.swiper-pagination span {
background-color: #fff;
border: none;
width: 7px;
height: 7px;
}
.swiper-pagination span:hover,
.swiper-pagination span.swiper-pagination-bullet-active {
background-color: #00a7dd !important;
}
@media (max-width: 1340px) {
#slider .slider-arrow-left,
#slider .slider-arrow-right {
width: 100px;
}
}
@media (max-width: 991px) {
#slider .slider-arrow-left,
#slider .slider-arrow-right {
display: none;
}
}
/* Hero Slider Slide 1
============================================= */
.cs-slider-slide-1 .cs-slider-circle-wrapper {
left: -695px;
top: calc(52% - 465px);
z-index: 18;
}
.cs-slider-slide-1 .cs-slider-circle {
height: 930px;
width: 930px;
background-image: url(../images/commsult/graphic/O_medium_blue.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 18;
}
/* Hero Slider Slide 2
============================================= */
.cs-slider-slide-2 .cs-slider-circle-wrapper {
right: -15px;
top: calc(50% - 337.5px);
z-index: 18;
}
.cs-slider-slide-2 .cs-slider-circle {
height: 675px;
width: 675px;
background-image: url(../images/commsult/graphic/O_medium_blue.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 18;
}
/* Hero Slider Slide 3
============================================= */
.cs-slider-slide-3 .cs-slider-circle-wrapper {
right: -30px;
top: calc(50% - 272.5px);
z-index: 18;
}
.cs-slider-slide-3 .cs-slider-circle {
height: 545px;
width: 545px;
background: #0077b6;
border-radius: 1000px;
}
.cs-slider-slide-3 .cs-caption-wrapper {
text-align: center;
}
/* Hero Slider Slide 4
============================================= */
.cs-slider-slide-4 .cs-slider-circle-wrapper {
left: -270px;
top: calc(50% - 337.5px);
z-index: 18;
}
.cs-slider-slide-4 .cs-slider-circle {
height: 675px;
width: 675px;
background-image: url(../images/commsult/graphic/O_medium_blue.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Hero Slider Slide 5
============================================= */
.cs-slider-slide-5 .cs-slider-circle-wrapper {
right: -695px;
top: calc(52% - 465px);
z-index: 18;
}
.cs-slider-slide-5 .cs-slider-circle {
height: 930px;
width: 930px;
background-image: url(../images/commsult/graphic/O_medium_blue.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Button
============================================= */
.cs-button {
border: 2px solid #0077b6;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
position: relative;
height: 44px;
display: inline-block;
min-width: 160px;
padding-left: 32px;
padding-right: 32px;
text-align: center;
font-size: 14px;
background-image: linear-gradient(270deg, #0077b6 0%, #00527f 100%);
background-size: 0% 100%;
background-repeat: no-repeat;
background-origin: border-box;
cursor: pointer;
line-height: 40px;
position: relative;
z-index: 1;
font-family: Roboto;
font-weight: 500;
letter-spacing: 0.16px;
font-size: 14px;
color: #0077b6;
-webkit-transition: all 0.2s ease-in-out, background-size 0.3s ease;
-o-transition: all 0.2s ease-in-out, background-size 0.3s ease;
transition: all 0.2s ease-in-out, background-size 0.3s ease;
}
.cs-company .cs-button {
border: 2px solid #00527f;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
color: #00527f;
border-radius: 5px;
}
@media (max-width: 767px) {
.cs-button {
height: 48px;
line-height: 44px;
}
}
.cs-button.cs-button-disabled {
opacity: 0.6;
cursor: default;
}
.cs-button:not(.cs-button-disabled):hover {
color: #ffffff;
background-size: 100% 100%;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
@media (max-width: 767px) {
.cs-button:not(.cs-button-disabled):hover {
color: #0077b6;
background-size: 0% 100%;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
}
.cs-button:not(.cs-button-disabled):active {
color: #ffffff;
-webkit-border-image: none;
-moz-border-image: none;
-o-border-image: none;
border-image: none;
border-color: #00527f;
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
background-image: none;
background-color: #00527f;
}
.cs-button.cs-button-arrow {
padding-left: 16px;
padding-right: 50px;
text-align: left;
}
.cs-button.cs-button-arrow:after {
content: "";
position: absolute;
background-image: url(../images/commsult/graphic/arrow_light_blue.svg);
line-height: 44px;
top: 0px;
right: 16px;
z-index: 1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 18px;
height: 40px;
-webkit-transition: all 0.2s ease-in-out, background-size 0.3s ease;
-o-transition: all 0.2s ease-in-out, background-size 0.3s ease;
transition: all 0.2s ease-in-out, background-size 0.3s ease;
}
.cs-company .cs-button.cs-button-arrow:after {
background-image: url(../images/commsult/graphic/arrow_dark_blue.svg);
}
@media (max-width: 767px) {
.cs-button.cs-button-arrow:after {
height: 44px;
line-height: 48px;
}
}
.cs-button.cs-button-arrow.cs-button-download:after {
transform: rotate(90deg);
}
.cs-button.cs-button-arrow:not(.cs-button-disabled):hover:after {
animation: switchtowhitearrow 0.3s ease;
animation-fill-mode: forwards;
}
@media (max-width: 767px) {
.cs-button.cs-button-arrow:not(.cs-button-disabled):hover:after {
animation: none;
}
.cs-button.cs-button-arrow:not(.cs-button-disabled):active:after {
background-image: url(../images/commsult/graphic/arrow_white.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 44px;
line-height: 48px;
}
}
.cs-button.cs-button-white {
border: 2px solid #ffffff;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
background-image: linear-gradient(270deg, #ffffff 0%, #ffffff 100%);
color: #ffffff;
}
.cs-button.cs-button-white:not(.cs-button-disabled):hover {
color: #0077b6;
background-size: 100% 100%;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
.cs-button.cs-button-white:not(.cs-button-disabled):active {
color: #00527f;
background-color: #ffffff;
}
.cs-button.cs-button-arrow.cs-button-white:after {
background-image: url(../images/commsult/graphic/arrow_white.svg);
}
.cs-button.cs-button-arrow.cs-button-white:not(
.cs-button-disabled
):hover:after {
animation: switchtobluearrow 0.3s ease;
animation-fill-mode: forwards;
}
.cs-button.cs-button-arrow.cs-button-white:not(
.cs-button-disabled
):active:after {
background-image: url(../images/commsult/graphic/arrow_dark_blue.svg);
}
@keyframes switchtowhitearrow {
45% {
opacity: 0;
}
50% {
opacity: 0;
background-image: url(../images/commsult/graphic/arrow_white.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
55% {
opacity: 0;
background-image: url(../images/commsult/graphic/arrow_white.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
100% {
opacity: 1;
background-image: url(../images/commsult/graphic/arrow_white.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
@keyframes switchtobluearrow {
45% {
opacity: 0;
}
50% {
opacity: 0;
background-image: url(../images/commsult/graphic/arrow_blue.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
55% {
opacity: 0;
background-image: url(../images/commsult/graphic/arrow_blue.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
100% {
opacity: 1;
background-image: url(../images/commsult/graphic/arrow_blue.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
/* .button-cs-arrow {
font-size: 0px;
}
.button-cs-arrow .button-cs-outer-wrapper {
background: transparent;
position: relative;
height: 44px;
display: inline-block;
min-width: 160px;
padding-left: 16px;
padding-right: 50px;
text-align: left;
font-size: 14px;
}
.button-cs-arrow .button-cs-text {
line-height: 44px;
position: relative;
z-index: 1;
font-family: Roboto;
font-weight: 500;
letter-spacing: 0.16px;
font-size: 14px;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease
}
.button-cs-arrow .cs-arrow {
position: absolute;
line-height: 44px;
top: 0px;
right: 16px;
z-index: 1;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
width: 18px;
height: 44px;
}
.button-cs-arrow .button-cs-outline-left {
position: absolute;
height: 100%;
width: 2px;
top: 0px;
left: 0px;
-webkit-transition: background .3s ease;
-o-transition: background .3s ease;
transition: background .3s ease;
}
.button-cs-arrow .button-cs-outline-right {
position: absolute;
height: 100%;
width: 2px;
top: 0px;
right: 0px;
-webkit-transition: background .3s ease;
-o-transition: background .3s ease;
transition: background .3s ease;
}
.button-cs-arrow .button-cs-outline-top {
position: absolute;
height: 2px;
width: calc(100% - 4px);
top: 0px;
left: 2px;
-webkit-transition: background .3s ease;
-o-transition: background .3s ease;
transition: background .3s ease;
}
.button-cs-arrow .button-cs-outline-bottom {
position: absolute;
height: 2px;
width: calc(100% - 4px);
bottom: 0px;
left: 2px;
-webkit-transition: background .3s ease;
-o-transition: background .3s ease;
transition: background .3s ease;
}
.button-cs-arrow .button-cs-background {
background: transparent;
position: absolute;
height: calc(100% - 4px);
width: calc(100% - 4px);
top: 2px;
left: 2px;
opacity: 0;
-webkit-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
transition: opacity .3s ease;
}
.button-cs-arrow:hover .button-cs-background {
opacity: 1;
} */
/* Button Center
============================================= */
/* .button-cs-center {
font-size: 0px;
}
.button-cs-center .button-cs-outer-wrapper {
background: transparent;
position: relative;
height: 44px;
display: inline-block;
min-width: 160px;
padding-left: 32px;
padding-right: 32px;
text-align: center;
font-size: 14px;
}
.button-cs-center .button-cs-text {
line-height: 44px;
position: relative;
z-index: 1;
font-family: Roboto;
font-weight: 500;
letter-spacing: 0.16px;
font-size: 14px;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease
}
.button-cs-center .button-cs-outline-left {
position: absolute;
height: 100%;
width: 2px;
top: 0px;
left: 0px;
}
.button-cs-center .button-cs-outline-right {
position: absolute;
height: 100%;
width: 2px;
top: 0px;
right: 0px;
}
.button-cs-center .button-cs-outline-top {
position: absolute;
height: 2px;
width: calc(100% - 4px);
top: 0px;
left: 2px;
}
.button-cs-center .button-cs-outline-bottom {
position: absolute;
height: 2px;
width: calc(100% - 4px);
bottom: 0px;
left: 2px;
}
.button-cs-center .button-cs-background {
background: transparent;
position: absolute;
height: calc(100% - 4px);
width: calc(100% - 4px);
top: 2px;
left: 2px;
opacity: 0;
-webkit-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
transition: opacity .3s ease;
}
.button-cs-center:hover .button-cs-background {
opacity: 1;
} */
/* Button Blue
============================================= */
/* .button-cs-blue .button-cs-text {
color: #0077B6;
}
.button-cs-blue .cs-arrow {
background-image: url(../images/commsult/graphic/arrow_light_blue.svg);
}
.button-cs-blue .button-cs-outline-left {
background: #0077B6;
}
.button-cs-blue .button-cs-outline-right {
background: #00A7DD;
}
.button-cs-blue .button-cs-outline-top {
background: linear-gradient(270deg, #00A7DD 0%, #0077B6 100%);
}
.button-cs-blue .button-cs-outline-bottom {
background: linear-gradient(270deg, #00A7DD 0%, #0077B6 100%);
}
.button-cs-blue .button-cs-background {
background: linear-gradient(270deg, #0077B6 0%, #00527F 100%);
}
.button-cs-blue:hover .button-cs-text {
color: #FFFFFF;
}
.button-cs-blue:hover .cs-arrow {
background-image: url(../images/commsult/graphic/arrow_white.svg);
}
.button-cs-blue:hover .button-cs-outline-left {
background: #00527F;
}
.button-cs-blue:hover .button-cs-outline-right {
background: #0077B6;
}
.button-cs-blue:hover .button-cs-outline-top {
background: linear-gradient(270deg, #0077B6 0%, #00527F 100%);
}
.button-cs-blue:hover .button-cs-outline-bottom {
background: linear-gradient(270deg, #0077B6 0%, #00527F 100%);
}
.button-cs-blue:active .button-cs-outline-left {
background: #00527F;
}
.button-cs-blue:active .button-cs-outline-right {
background: #00527F;
}
.button-cs-blue:active .button-cs-outline-top {
background: #00527F;
}
.button-cs-blue:active .button-cs-outline-bottom {
background: #00527F;
}
.button-cs-blue:active .button-cs-background {
background: #00527F;
} */
/* Button White
============================================= */
/* .button-cs-white .button-cs-text {
color: #FFFFFF;
}
.button-cs-white .cs-arrow {
background-image: url(../images/commsult/graphic/arrow_white.svg);
}
.button-cs-white .button-cs-outline-left {
background: #FFFFFF;
}
.button-cs-white .button-cs-outline-right {
background: #FFFFFF;
}
.button-cs-white .button-cs-outline-top {
background: #FFFFFF;
}
.button-cs-white .button-cs-outline-bottom {
background: #FFFFFF;
}
.button-cs-white .button-cs-background {
background: #FFFFFF;
}
.button-cs-white:hover .button-cs-text {
color: #0077B6;
}
.button-cs-white:hover .cs-arrow {
background-image: url(../images/commsult/graphic/arrow_blue.svg);
}
.button-cs-white:active .button-cs-text {
color: #00527F;
}
.button-cs-white:active .cs-arrow {
background-image: url(../images/commsult/graphic/arrow_dark_blue.svg);
} */
/* Typography
============================================= */
h1 {
color: #383d47;
font-family: Capitolium2;
font-size: 56px;
font-weight: bold;
line-height: 60px;
margin-bottom: 0px;
}
@media (max-width: 575px) {
h1 {
font-size: 40px;
line-height: 48px;
}
}
h2 {
color: #2d333d;
font-family: Capitolium2;
font-size: 40px;
font-weight: bold;
line-height: 48px;
margin-bottom: 0px;
}
h3 {
color: #2d333d;
font-family: Capitolium2;
font-size: 30px;
font-weight: bold;
line-height: 36px;
margin-bottom: 0px;
}
h4 {
color: #2d333d;
font-family: Capitolium2;
font-size: 30px;
font-weight: normal;
line-height: 36px;
margin-bottom: 0px;
}
h5 {
color: #2d333d;
font-family: Capitolium2;
font-size: 26px;
font-weight: normal;
line-height: 32px;
margin-bottom: 4px;
}
h6 {
color: #383d47;
font-family: Capitolium2;
font-size: 24px;
font-weight: bold;
line-height: 28px;
margin-bottom: 0px;
}
label,
label.cs-label-16-regular {
color: #383d47;
font-family: Roboto;
font-size: 16px;
font-weight: normal;
letter-spacing: 0.2px;
line-height: 26px;
margin-bottom: 0px;
text-transform: none;
cursor: initial;
}
label.cs-label-16-medium {
color: #383d47;
font-family: Roboto;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 24px;
margin-bottom: 0px;
text-transform: none;
cursor: initial;
}
label.cs-label-14-regular {
color: #383d47;
font-family: Roboto;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.2px;
line-height: 20px;
margin-bottom: 0px;
text-transform: none;
cursor: initial;
}
label.cs-label-14-medium {
color: #2d333d;
font-family: Roboto;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 20px;
margin-bottom: 0px;
text-transform: none;
cursor: initial;
}
p,
p.cs-body-1 {
color: #383d47;
font-family: Roboto;
font-size: 16px;
letter-spacing: 0.2px;
line-height: 26px !important;
margin-bottom: 0px;
}
p.cs-body-2 {
color: #383d47;
font-family: Roboto;
font-size: 14px;
letter-spacing: 0.2px;
line-height: 20px !important;
margin-bottom: 0px;
}
ul.cs-ul {
list-style: none;
margin-bottom: 0px;
padding-left: 22px;
font-size: 30px;
}
ul.cs-ul > li {
color: #383d47;
font-family: Roboto;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 26px;
margin-bottom: 0px;
position: relative;
}
ul.cs-ul > li:not(:last-child) {
margin-bottom: 10px;
}
ul.cs-ul > li:before {
content: " ";
position: absolute;
left: -22px;
top: 0px;
height: 26px;
width: 8px;
background-image: url(../images/commsult/graphic/bullet_list_arrow.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
/* Links
============================================= */
a.cs-link-1 {
color: #0077b6;
font-family: Roboto;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.18px;
line-height: 26px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 0px;
border-bottom: 2px solid transparent;
position: relative;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cs-company a.cs-link-1 {
color: #00a7dd;
}
a.cs-link-1.cs-link-1-small {
font-size: 14px;
letter-spacing: 0.2px;
line-height: 20px !important;
}
a.cs-link-1 .cs-arrow {
vertical-align: top;
display: inline-block;
line-height: 26px;
width: 18px;
height: 26px;
margin-left: 20px;
}
a.cs-link-1.cs-link-1-small .cs-arrow {
line-height: 20px;
height: 20px;
}
a.cs-link-1 .cs-arrow .cs-svg-arrow {
stroke: #00a7dd;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.cs-link-1:hover {
color: #00527f;
}
.cs-company a.cs-link-1:hover {
color: #00a7dd;
}
a.cs-link-1:after {
content: "";
display: block;
border-bottom: 2px solid #00527f;
width: 0;
position: absolute;
left: 0;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.cs-company a.cs-link-1:after {
border-bottom: 2px solid #00a7dd;
}
a.cs-link-1:hover:after {
width: 100%;
}
a.cs-link-1:hover .cs-arrow .cs-svg-arrow {
stroke: #00527f;
}
a.cs-link-1.inactive {
color: #96999e;
pointer-events: none;
}
a.cs-link-1.inactive .cs-arrow .cs-svg-arrow {
stroke: #96999e;
}
a.cs-link-1.inactive:hover {
border-bottom: none;
}
.cs-link-2 {
color: #ffffff;
font-family: Roboto;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.18px;
line-height: 26px;
padding-top: 5px;
padding-bottom: 5px;
margin-bottom: 0px;
border-bottom: 2px solid transparent;
cursor: pointer;
position: relative;
}
.cs-link-2 .cs-arrow {
vertical-align: top;
display: inline-block;
line-height: 26px;
width: 18px;
height: 26px;
margin-left: 20px;
}
.cs-link-2:hover {
color: #ffffff;
}
.cs-link-2:after {
content: "";
display: block;
border-bottom: 2px solid #ffffff;
width: 0;
position: absolute;
left: 0;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.cs-link-2:hover:after {
width: 100%;
}
.cs-link-2.inactive {
opacity: 0.5;
pointer-events: none;
}
.cs-link-2.inactive:hover {
border-bottom: none;
}
.cs-link-3,
a.cs-link-3 {
cursor: pointer;
color: #ffffff;
font-family: Roboto;
font-size: 14px;
letter-spacing: 0.2px;
line-height: 22px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.cs-link-3:hover {
color: #00a7dd;
}
.cs-link-4 {
color: #ffffff;
font-family: Roboto;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.16px;
line-height: 20px;
margin-bottom: 0px;
}
.cs-link-4 .cs-arrow {
vertical-align: middle;
display: inline-block;
line-height: 20px;
width: 18px;
height: 20px;
margin-left: 20px;
}
.cs-link-4 .cs-arrow.cs-arrow-download {
transform: rotate(90deg);
}
hr {
margin: 0px;
border-top: 1px solid #979797;
}
/* Form Fields
============================================= */
.cs-form-field-group {
display: inline-block;
font-size: 0px;
vertical-align: top;
}
.cs-form-field-group input,
.cs-form-field-group textarea,
.cs-form-field-group .cs-button {
vertical-align: top;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: #abadb1;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #abadb1;
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: #abadb1;
}
input[type="text"] ~ .cs-button,
input[type="email"] ~ .cs-button {
margin-left: 12px;
}
input[type="text"],
input[type="email"],
textarea {
border-radius: 0;
border-width: 2px;
border-style: solid;
border-color: rgba(255, 0, 0, 0);
border-bottom-color: #0077b6;
padding: 10px 14px;
height: 44px;
width: 263px;
color: #383d47;
font-family: Roboto;
font-size: 14px;
letter-spacing: 0.16px;
line-height: 20px;
background: #f5f5f5;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media (max-width: 767px) {
input[type="text"],
input[type="email"],
textarea {
font-size: 16px !important;
}
}
textarea {
width: 100%;
height: auto;
resize: none;
}
input[type="text"]:placeholder-shown,
input[type="email"]:placeholder-shown,
textarea:placeholder-shown {
border-bottom-color: rgba(255, 0, 0, 0);
}
.cs-form-field-white-input input[type="text"],
.cs-form-field-white-input input[type="email"] {
background: #ffffff;
}
.cs-company .cs-form-field-white-input input[type="text"],
.cs-form-field-white-input input[type="email"] {
border-radius: 5px;
}
.cs-checkbox-container {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #62666e;
font-family: Roboto;
font-size: 12px;
letter-spacing: 0.2px;
line-height: 25px;
text-transform: none;
}
.cs-form-field-white-input .cs-checkbox-container {
color: #ffffff;
}
.cs-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.cs-checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background: #f5f5f5;
border-width: 2px;
border-style: solid;
border-color: rgba(255, 0, 0, 0);
}
.cs-form-field-white-input .cs-checkmark {
background: #ffffff;
}
.cs-checkbox-container:hover input ~ .cs-checkmark {
background: #f5f5f5;
}
.cs-form-field-white-input .cs-checkbox-container:hover input ~ .cs-checkmark {
background: #ffffff;
}
.cs-checkbox-container input:checked ~ .cs-checkmark {
background: #f5f5f5;
}
.cs-form-field-white-input
.cs-checkbox-container
input:checked
~ .cs-checkmark {
background: #ffffff;
}
.cs-checkmark:after {
content: " ";
position: absolute;
display: none;
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid #00a7dd;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
box-sizing: content-box;
}
.cs-checkbox-container input:checked ~ .cs-checkmark:after {
display: block;
}
.cs-chip-container {
display: block;
position: relative;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cs-chip-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.cs-chip-checkmark {
padding: 3px 16px 5px;
border-radius: 200px;
background: #f5f5f5;
line-height: 20px;
color: #abadb1;
font-family: Roboto;
font-size: 14px;
letter-spacing: 0.16px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.cs-chip-container:hover input ~ .cs-chip-checkmark {
background: #f5f5f5;
}
.cs-chip-container input:checked ~ .cs-chip-checkmark {
color: #ffffff;
background: linear-gradient(210.75deg, #0077b6 0%, #00527f 100%);
}
.cs-radio-container {
display: block;
position: relative;
padding-left: 35px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #383d47;
font-family: Roboto;
font-size: 16px;
letter-spacing: 0.2px;
line-height: 25px;
text-transform: none;
}
.cs-radio-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.cs-radio-checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background: transparent;
border: 2px solid #d0d0d0;
border-radius: 200px;
}
.cs-radio-container:hover input ~ .cs-radio-checkmark {
background: transparent;
}
.cs-radio-container input:checked ~ .cs-radio-checkmark {
background: transparent;
}
.cs-radio-checkmark:after {
content: " ";
position: absolute;
display: none;
left: 2px;
top: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
background-color: #0077b6;
border-radius: 200px;
}
.cs-radio-container input:checked ~ .cs-radio-checkmark:after {
display: block;
}
/* Standard Module 1
============================================= */
.cs-standard-module-1 h2 {
text-align: center;
margin-bottom: 16px;
}
.cs-standard-module-1 p {
margin-bottom: 24px;
}
.cs-standard-module-1 .cs-img {
width: 100%;
padding-top: 66.666%;
background-size: cover;
background-position: center;
}
/* Standard Module 2
============================================= */
.cs-standard-module-2 .cs-text-wrapper-outer {
display: table;
height: 100%;
}
.cs-standard-module-2 .cs-text-wrapper {
display: table-cell;
vertical-align: middle;
}
.cs-standard-module-2 h5 {
margin-bottom: 16px;
}
.cs-standard-module-2 p {
margin-bottom: 16px;
}
.cs-standard-module-2 .cs-img {
width: 100%;
padding-top: 75%;
background-size: cover;
background-position: center;
}
.cs-company .cs-standard-module-2 .cs-img {
border-radius: 10px;
}
@media (max-width: 575px) {
.cs-standard-module-2 h5 {
margin-top: 0px;
}
}
/* Standard Module 3
============================================= */
.cs-standard-module-3 .cs-col-txt {
display: flex;
flex-direction: column;
}
.cs-standard-module-3 .cs-text-wrapper-outer {
display: table;
height: 100%;
}
.cs-standard-module-3 .cs-text-wrapper {
display: table-cell;
vertical-align: middle;
}
.cs-standard-module-3 label {
margin-bottom: 13px;
color: #0077b6;
}
.cs-standard-module-3 h2 {
margin-bottom: 19px;
}
.cs-standard-module-3 h5 {
margin-bottom: 17px;
}
.cs-standard-module-3 .cs-img-wrapper {
width: 100%;
padding-top: 75%;
position: relative;
background-size: cover;
background-position: center;
display: block;
}
.cs-standard-module-3 .cs-img-button-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(45, 51, 61, 0.4);
}
.cs-standard-module-3 .cs-img-button-overlay-outer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: table;
}
.cs-standard-module-3 .cs-img-button-overlay-inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.cs-standard-module-3 .cs-img-button-overlay:hover .cs-button {
color: #ffffff;
background-size: 100% 100%;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
.cs-standard-module-3 .cs-img-button-overlay:active .cs-button {
-webkit-transition: all 0s;
-o-transition: all 0s;
transition: all 0s;
background-image: none;
-webkit-border-image: none;
-moz-border-image: none;
-o-border-image: none;
border-image: none;
background-color: #00527f;
}
.cs-standard-module-3
.cs-img-button-overlay:hover
.cs-button.cs-button-arrow:after {
animation: switchtowhitearrow 0.3s ease;
animation-fill-mode: forwards;
}
.cs-standard-module-3 .cs-img-button-overlay:hover .cs-button.cs-button-white {
color: #0077b6;
background-size: 100% 100%;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
.cs-standard-module-3 .cs-img-button-overlay:active .cs-button.cs-button-white {
color: #00527f;
background-color: #ffffff;
}
.cs-standard-module-3
.cs-img-button-overlay:hover
.cs-button.cs-button-arrow.cs-button-white:after {
animation: switchtobluearrow 0.3s ease;
animation-fill-mode: forwards;
}
.cs-standard-module-3
.cs-img-button-overlay:active
.cs-button.cs-button-arrow.cs-button-white:after {
background-image: url(../images/commsult/graphic/arrow_dark_blue.svg);
}
@media (max-width: 575px) {
.cs-standard-module-3 label {
margin-top: 0px;
}
}
/* Standard Module 4
============================================= */
.cs-standard-module-4 label {
margin-bottom: 10px;
color: #0077b6;
}
.cs-standard-module-4 h2 {
margin-bottom: 15px;
}
/* Questions Large
============================================= */
.cs-question-lg label {
margin-bottom: 15px;
color: #0077b6;
}
.cs-question-lg h4 {
margin-bottom: 15px;
}
.cs-question-lg h4 em {
font-style: normal;
color: #00a7dd;
}
/* Questions Medium 1
============================================= */
.cs-question-md-1 label {
margin-bottom: 12px;
color: #0077b6;
}
.cs-question-md-1 h4 {
margin-bottom: 12px;
}
.cs-question-md-1 p {
margin-bottom: 12px;
}
/* Questions Medium 2
============================================= */
.cs-question-md-2 .cs-wrapper {
height: 280px;
padding: 24px;
background-size: cover;
background-position: center;
position: relative;
}
.cs-question-md-2 .cs-wrapper:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0px;
right: 0px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #1c1d1d 100%);
opacity: 0.6;
}
.cs-question-md-2 .cs-wrapper::before {
position: absolute;
top: 0;
left: 0px;
height: 100%;
width: 100%;
content: " ";
background: #00a7dd;
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
z-index: 1;
}
.cs-question-md-2:hover .cs-wrapper:hover::before {
opacity: 1;
}
.cs-question-md-2 label {
position: relative;
z-index: 1;
margin-bottom: 3px;
color: #ffffff;
}
.cs-question-md-2 h4 {
position: relative;
line-height: 34px;
z-index: 1;
color: #ffffff;
max-width: 250px;
}
.cs-question-md-2 .cs-link-4 {
position: absolute;
bottom: 24px;
left: 24px;
z-index: 1;
}
/* Questions Small 1
============================================= */
.cs-question-sm-1 .cs-wrapper {
height: 280px;
padding: 20px;
border: 4px solid #009bd0;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
box-sizing: border-box;
position: relative;
-webkit-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.cs-question-sm-1 label {
margin-bottom: 15px;
color: #0077b6;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-question-sm-1 h5 {
height: 130px;
color: #0077b6;
font-size: 22px;
line-height: 26px;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
@media (max-width: 991px) {
.cs-question-sm-1 h5 {
height: auto;
}
}
.cs-question-sm-1 .cs-link-4 .cs-arrow {
-webkit-transition: background-image 0.2s ease;
-o-transition: background-image 0.2s ease;
transition: background-image 0.2s ease;
}
.cs-question-sm-1 .cs-wrapper:hover {
background: #009bd0;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
.cs-question-sm-1 .cs-link-4 {
color: #0077b6;
position: absolute;
bottom: 20px;
left: 20px;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-question-sm-1 .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #0077b6;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.cs-question-sm-1 .cs-wrapper:hover label,
.cs-question-sm-1 .cs-wrapper:hover h5,
.cs-question-sm-1 .cs-wrapper:hover .cs-link-4 {
color: #ffffff;
}
.cs-question-sm-1 .cs-wrapper:hover .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #ffffff;
}
/* Questions Small 2
============================================= */
.cs-question-sm-2 label {
margin-bottom: 5px;
color: #0077b6;
}
.cs-question-sm-2 h4 {
margin-bottom: 15px;
}
/* News Large
============================================= */
.cs-news-lg label {
margin-bottom: 15px;
color: #62666e;
}
.cs-news-lg h4 {
margin-bottom: 15px;
}
.cs-news-lg h4 em {
font-style: normal;
color: #00a7dd;
}
/* News Medium 1
============================================= */
.cs-news-md-1 label {
margin-bottom: 12px;
color: #62666e;
}
.cs-news-md-1 h4 {
margin-bottom: 12px;
}
/* News Medium 2
============================================= */
.cs-news-md-2 .cs-wrapper {
height: 280px;
padding: 24px;
background-size: cover;
background-position: center;
position: relative;
}
.cs-company .cs-news-md-2 .cs-wrapper {
border-radius: 10px;
overflow: hidden;
}
.cs-news-md-2 .cs-wrapper:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0px;
right: 0px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #1c1d1d 100%);
opacity: 0.6;
}
.cs-news-md-2 .cs-wrapper::before {
position: absolute;
top: 0;
left: 0px;
height: 100%;
width: 100%;
content: " ";
background: #00a7dd;
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
z-index: 1;
}
.cs-news-md-2:hover .cs-wrapper:hover::before {
opacity: 1;
}
.cs-news-md-2 label {
position: relative;
z-index: 1;
margin-bottom: 3px;
color: #ffffff;
}
.cs-news-md-2 h4 {
position: relative;
line-height: 34px;
z-index: 1;
color: #ffffff;
max-width: 250px;
}
.cs-news-md-2 .cs-link-4 {
position: absolute;
bottom: 24px;
left: 24px;
z-index: 1;
}
/* News Medium 3
============================================= */
.cs-news-md-3 .cs-wrapper {
height: 280px;
padding: 20px;
padding-right: calc(50% + 20px);
border: 4px solid #009bd0;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
position: relative;
-webkit-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.cs-company .cs-news-md-3 .cs-wrapper {
background-color: #ffffff;
border-radius: 10px;
border: 4px solid transparent;
}
.cs-news-md-3 .cs-img {
position: absolute;
top: 0px;
right: 0px;
height: 100.1%;
width: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.cs-company .cs-news-md-3 .cs-img {
top: -4px;
right: -4px;
height: calc(100.1% + 8px);
width: calc(50% + 4px);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.cs-news-md-3 label {
margin-bottom: 10px;
color: #0077b6;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-company .cs-news-md-3 label {
color: #2d333d;
}
.cs-news-md-3 h5 {
color: #0077b6;
font-size: 22px;
line-height: 26px;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-company .cs-news-md-3 h5 {
color: #2d333d;
}
.cs-news-md-3 .cs-link-4 .cs-arrow {
-webkit-transition: background-image 0.2s ease;
-o-transition: background-image 0.2s ease;
transition: background-image 0.2s ease;
}
.cs-news-md-3 .cs-wrapper:hover {
background: #009bd0;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
.cs-news-md-3 .cs-link-4 {
color: #0077b6;
position: absolute;
bottom: 20px;
left: 20px;
}
.cs-company .cs-news-md-3 .cs-link-4 {
color: #00527f;
}
.cs-news-md-3 .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #0077b6;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.cs-company .cs-news-md-3 .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #00527f;
}
.cs-news-md-3 .cs-wrapper:hover label,
.cs-news-md-3 .cs-wrapper:hover h5,
.cs-news-md-3 .cs-wrapper:hover .cs-link-4 {
color: #ffffff;
}
.cs-news-md-3 .cs-wrapper:hover .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #ffffff;
}
@media (max-width: 575px) {
.cs-news-md-3 .cs-wrapper {
padding-right: 20px;
}
.cs-news-md-3 .cs-img {
display: none;
}
}
/* News Small 1
============================================= */
.cs-news-sm-1 .cs-wrapper {
height: 280px;
padding: 20px;
border: 4px solid #009bd0;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
box-sizing: border-box;
position: relative;
-webkit-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.cs-company .cs-news-sm-1 .cs-wrapper {
background: #ffffff;
border: 4px solid transparent;
border-radius: 10px;
}
.cs-news-sm-1 label {
margin-bottom: 15px;
color: #0077b6;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-company .cs-news-sm-1 label {
color: #2d333d;
}
.cs-news-sm-1 h5 {
height: 130px;
color: #0077b6;
font-size: 22px;
line-height: 26px;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-company .cs-news-sm-1 h5 {
color: #2d333d;
}
@media (max-width: 991px) {
.cs-news-sm-1 h5 {
height: auto;
}
}
.cs-news-sm-1 .cs-link-4 .cs-arrow {
-webkit-transition: background-image 0.2s ease;
-o-transition: background-image 0.2s ease;
transition: background-image 0.2s ease;
}
.cs-news-sm-1 .cs-wrapper:hover {
background: #009bd0;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
.cs-news-sm-1 .cs-link-4 {
color: #0077b6;
position: absolute;
bottom: 20px;
left: 20px;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-company .cs-news-sm-1 .cs-link-4 {
color: #00527f;
}
.cs-news-sm-1 .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #0077b6;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.cs-company .cs-news-sm-1 .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #00527f;
}
.cs-news-sm-1 .cs-wrapper:hover label,
.cs-news-sm-1 .cs-wrapper:hover h5,
.cs-news-sm-1 .cs-wrapper:hover .cs-link-4 {
color: #ffffff;
}
.cs-news-sm-1 .cs-wrapper:hover .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #ffffff;
}
/* News Small 2
============================================= */
.cs-news-sm-2 label {
margin-bottom: 5px;
color: #62666e;
}
/* News Small 3
============================================= */
.cs-news-sm-3 label {
margin-bottom: 15px;
color: #62666e;
}
.cs-news-sm-3 h4 {
margin-bottom: 15px;
}
/* Quotes Large
============================================= */
.cs-quote-lg h1 {
font-style: italic;
font-size: 50px;
line-height: 60px;
font-weight: normal;
margin-bottom: 6px;
}
.cs-quote-lg p {
color: #62666e;
}
/* Quotes Medium 1
============================================= */
.cs-quote-md-1 .cs-wrapper {
padding: 24px;
padding-right: calc(33% + 24px);
background-size: cover;
background-position: center;
position: relative;
}
.cs-quote-md-1 .cs-wrapper:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0px;
right: 0px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #1c1d1d 100%);
opacity: 0.6;
}
.cs-quote-md-1 h3 {
position: relative;
z-index: 1;
margin-bottom: 17px;
line-height: 34px;
font-size: 28px;
font-style: italic;
font-weight: bold;
color: #ffffff;
}
.cs-quote-md-1 p {
position: relative;
z-index: 1;
color: #ffffff;
font-weight: 500;
line-height: 22px;
}
/* Quotes Medium 2
============================================= */
.cs-quote-md-2 .cs-wrapper {
padding: 26px 0px;
padding-right: calc(33% + 24px);
position: relative;
}
.cs-quote-md-2 h5 {
margin-bottom: 17px;
font-style: italic;
position: relative;
z-index: 1;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.46);
}
.cs-quote-md-2 p {
padding-right: calc(33% + 24px);
color: #62666e;
line-height: 22px;
position: relative;
z-index: 1;
}
.cs-quote-md-2 .cs-quote-img {
height: 260px;
width: 260px;
position: absolute;
top: 0px;
right: 0px;
z-index: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 300px;
}
/* Quotes Small 1
============================================= */
.cs-quote-sm-1 h1 {
font-style: italic;
font-size: 48px;
line-height: 58px;
font-weight: normal;
margin-bottom: 15px;
}
.cs-quote-sm-1 p {
color: #62666e;
}
/* Quotes Small 2
============================================= */
.cs-quote-sm-2 h5 {
font-style: italic;
margin-bottom: 25px;
}
.cs-quote-sm-2 p {
color: #62666e;
}
/* Teaser 1
============================================= */
.cs-teaser-1 .cs-wrapper {
padding: 20px;
border: 4px solid #009bd0;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
box-sizing: border-box;
position: relative;
}
.cs-company .cs-teaser-1 .cs-wrapper {
background-color: #ffffff;
border-radius: 10px;
border: 4px solid transparent;
-webkit-transition: background-color 0.3s ease;
-o-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
.cs-teaser-1 .cs-wrapper:hover {
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
.cs-company .cs-teaser-1 .cs-wrapper:hover {
background-color: #009bd0;
}
.cs-teaser-1 .cs-size-base {
width: 100%;
padding-top: 100%;
}
@media (max-width: 575px) {
.cs-teaser-1 .cs-size-base {
min-height: 120px;
padding-top: unset;
}
}
.cs-teaser-1 img {
position: absolute;
height: 55px;
width: 130px;
top: calc(50% - 27.5px);
left: calc(50% - 65px);
object-fit: contain;
}
.cs-teaser-1 .cs-txt-overlay {
position: absolute;
padding: 20px;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background: #009bd0;
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.cs-company .cs-teaser-1 .cs-txt-overlay {
height: calc(100% + 8px);
width: calc(100% + 8px);
top: -4px;
left: -4px;
border-radius: 10px;
padding: 24px;
}
.cs-teaser-1 p {
color: #ffffff;
}
.cs-teaser-1 .cs-link-4 {
position: absolute;
right: 20px;
bottom: 15px;
}
.cs-teaser-1 .cs-link-4 .cs-arrow {
margin-left: 0px;
}
.cs-teaser-1 .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #0077b6;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.cs-teaser-1 .cs-wrapper:hover .cs-txt-overlay {
opacity: 1;
}
.cs-teaser-1 .cs-wrapper:hover .cs-link-4 .cs-svg-arrow {
stroke: #ffffff;
}
/* Teaser 2
============================================= */
.cs-teaser-2 .cs-wrapper {
padding: 20px;
border: 4px solid #009bd0;
background: #009bd0;
box-sizing: border-box;
position: relative;
-webkit-transition: border 0.2s ease;
-o-transition: border 0.2s ease;
transition: border 0.2s ease;
}
.cs-company .cs-teaser-2 .cs-wrapper {
background: linear-gradient(210.75deg, #0077b6 0%, #00527f 100%),
linear-gradient(180deg, #eeeeee 0%, #d8d8d8 100%);
background-repeat: no-repeat;
background-position: center;
background-size: calc(100% + 8px) calc(100% + 8px);
border-radius: 10px;
overflow: hidden;
border: 4px solid transparent;
}
.cs-teaser-2 .cs-size-base {
width: 100%;
padding-top: 100%;
}
@media (max-width: 575px) {
.cs-teaser-2 .cs-size-base {
min-height: 120px;
padding-top: unset;
}
}
.cs-teaser-2 h5 {
color: #ffffff;
padding: 25px 20px;
font-weight: bold;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.cs-teaser-2 .cs-txt-overlay {
position: absolute;
padding: 20px;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background: #0077b6;
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.cs-teaser-2 p {
color: #ffffff;
padding: 25px 20px;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.cs-teaser-2 .cs-link-4 {
position: absolute;
right: 20px;
bottom: 15px;
}
.cs-teaser-2 .cs-link-4 .cs-arrow {
margin-left: 0px;
}
.cs-teaser-2 .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #ffffff;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.cs-teaser-2 .cs-wrapper:hover {
border-color: #0077b6;
}
.cs-teaser-2 .cs-wrapper:hover .cs-txt-overlay {
opacity: 1;
}
/* Teaser 3
============================================= */
.cs-teaser-3 .cs-wrapper {
padding: 20px;
border: 4px solid #009bd0;
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
box-sizing: border-box;
position: relative;
}
.cs-teaser-3 .cs-wrapper:hover {
-webkit-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-moz-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
-o-border-image: url("data:image/svg+xml;utf8,")
10% stretch;
border-image: url("data:image/svg+xml;utf8,")
10% stretch;
}
.cs-teaser-3 .cs-size-base {
width: 100%;
padding-top: 100%;
}
@media (max-width: 575px) {
.cs-teaser-3 .cs-size-base {
min-height: 120px;
padding-top: unset;
}
}
.cs-teaser-3 h5 {
color: #0077b6;
padding: 25px 20px;
font-weight: bold;
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.cs-teaser-3 .cs-txt-overlay {
position: absolute;
padding: 20px;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background: #009bd0;
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.cs-teaser-3 p {
color: #ffffff;
}
.cs-teaser-3 .cs-link-4 {
position: absolute;
right: 20px;
bottom: 15px;
}
.cs-teaser-3 .cs-link-4 .cs-arrow {
margin-left: 0px;
}
.cs-teaser-3 .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #0077b6;
-webkit-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.cs-teaser-3 .cs-wrapper:hover .cs-txt-overlay {
opacity: 1;
}
.cs-teaser-3 .cs-wrapper:hover .cs-link-4 .cs-arrow .cs-svg-arrow {
stroke: #ffffff;
}
/* Super Module 1
============================================= */
.cs-page-title-1 .cs-row-title {
margin-bottom: 40px;
position: relative;
}
.cs-page-title-1 .cs-col-txt {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
height: calc(100% - 60px);
}
.cs-page-title-1 .cs-text-wrapper {
display: table;
height: 100%;
}
.cs-page-title-1 .cs-img {
background-size: cover;
background-position: center;
position: relative;
width: 100%;
padding-top: 56.25%;
}
.cs-page-title-1 .cs-img:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0px;
right: 0px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
opacity: 0.6;
}
.cs-page-title-1 h1 {
display: table-cell;
vertical-align: middle;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.46);
}
.cs-page-title-1 h1 u {
text-decoration: none;
position: relative;
z-index: 0;
}
.cs-page-title-1 h1 u:after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: 6px;
border-bottom: 4px solid #0077b6;
z-index: -1;
}
@media (max-width: 767px) {
.cs-page-title-1 h1 u {
text-decoration: underline;
text-decoration-color: #0077b6;
-webkit-text-decoration-color: #0077b6;
}
.cs-page-title-1 h1 u:after {
display: none;
}
.cs-page-title-1 h1 {
line-height: 46px;
}
.cs-page-title-1 .cs-img {
padding-top: 75%;
}
.cs-page-title-1 .cs-col-txt {
position: relative;
height: auto;
}
.cs-page-title-1 .cs-img:before {
display: none;
}
}
/* Super Module 4
============================================= */
.cs-super-4 {
position: relative;
}
.cs-super-4 .cs-circle-wrapper {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
.cs-super-4 .cs-fixed {
position: fixed !important;
top: 101px !important;
}
.cs-super-4 .cs-circle {
height: calc(100vh - 101px);
background-image: url(../images/commsult/graphic/O_grey.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
.cs-super-4 .cs-container-wrapper {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.cs-super-4 .row {
height: calc(100vh - 101px);
}
.cs-super-4 .cs-col-txt,
.cs-super-4 .cs-col-img {
height: 100%;
margin-bottom: 0px !important;
display: table;
}
.cs-super-4 .cs-col-txt {
padding-top: 27vh;
max-height: 0px;
opacity: 0;
position: absolute;
top: 0px;
-webkit-transition: opacity 0.8s ease,
max-height 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: opacity 0.8s ease,
max-height 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: opacity 0.8s ease,
max-height 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.cs-super-4 .cs-col-txt.cs-active {
max-height: 2000px;
opacity: 1;
}
.cs-super-4 .cs-txt-wrapper {
display: table-cell;
vertical-align: middle;
}
.cs-super-4 p {
margin-top: 30px;
margin-bottom: 25px;
}
.cs-super-4 .cs-img-wrapper {
padding: 5vh;
height: calc(100vh - 101px);
}
.cs-super-4 .cs-img {
height: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 991px) {
.cs-super-4 .cs-circle-wrapper {
display: none;
}
.cs-super-4 .cs-container-wrapper {
position: relative;
}
.cs-super-4 .cs-col-txt {
position: relative;
opacity: 1;
max-height: 2000px;
padding-top: 0;
}
.cs-super-4 .row {
height: auto !important;
}
.cs-super-4 .cs-col-txt,
.cs-super-4 .cs-col-img {
height: auto !important;
}
.cs-super-4 .cs-col-txt {
margin-bottom: 60px !important;
}
.cs-super-4 .cs-col-img {
margin-bottom: 30px !important;
}
.cs-super-4 .cs-img-wrapper {
height: auto !important;
padding: 0 !important;
}
.cs-super-4 .cs-img {
height: auto !important;
width: 100%;
padding-top: 100%;
}
}
/* Super Module 5
============================================= */
.cs-super-5 h2 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.cs-super-5 .cs-circle {
height: 740px;
width: 740px;
box-sizing: border-box;
display: table;
padding: 205px;
float: left;
opacity: 0;
shape-outside: circle(40%);
background-image: url(../images/commsult/graphic/O_grey.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.cs-super-5 .cs-pointer-top-padding {
height: 100px;
}
.cs-super-5 .cs-pointer {
position: relative;
left: 1000px;
opacity: 0;
-webkit-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.cs-super-5 .cs-pointer.cs-animated {
position: relative;
left: 0px;
opacity: 1;
}
.cs-super-5 .cs-pointer .cs-header {
color: #0077b6;
font-family: Capitolium2;
font-size: 16px;
font-weight: bold;
line-height: 22px;
cursor: pointer;
-webkit-transition: color 0.2s ease;
-o-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.cs-super-5 .cs-pointer .cs-pointer-wrapper {
display: inline-block;
width: 465px;
padding-top: 25px;
padding-bottom: 25px;
position: relative;
}
.cs-super-5 .cs-pointer .cs-header:hover {
color: #00527f !important;
}
.cs-super-5 .cs-pointer p {
max-height: 0px;
overflow: hidden;
opacity: 0;
margin-top: 0px;
margin-bottom: 0px;
}
.cs-super-5 .cs-pointer-image {
height: 210px;
width: 280px;
position: absolute;
top: -200px;
right: 0px;
opacity: 0;
display: none;
background-size: cover;
background-position: center;
}
@media (max-width: 1199px) {
.cs-super-5 h2 {
text-align: left;
width: 330px;
position: absolute;
left: 15px;
top: 295px;
}
.cs-super-5 .cs-wrapper {
padding-left: 380px;
}
.cs-super-5 .cs-circle {
position: absolute;
left: 0px;
top: 0px;
height: 620px;
width: 620px;
}
}
@media (max-width: 991px) {
.cs-super-5 h2 {
text-align: left;
width: 100%;
position: relative;
left: 0;
top: 0;
}
.cs-super-5 .cs-wrapper {
padding-left: 0px;
}
.cs-super-5 .cs-circle {
display: none;
}
.cs-super-5 .cs-pointer-top-padding {
height: 50px;
}
.cs-super-5 .cs-pointer .cs-header {
font-size: 30px;
line-height: 36px;
cursor: default;
}
.cs-super-5 .cs-pointer .cs-pointer-wrapper {
display: inline-block;
width: auto;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 80px;
position: relative;
padding-right: 300px;
}
.cs-super-5 .cs-pointer .cs-header:hover {
color: #0077b6 important;
}
.cs-super-5 .cs-pointer p {
height: auto;
opacity: 1;
max-height: 500px;
margin-top: 0px;
margin-bottom: 0px;
}
.cs-super-5 .cs-pointer-image {
position: relative;
margin-bottom: 30px;
opacity: 1;
display: block;
width: 100%;
padding-top: 75%;
height: 0;
top: 0;
left: 0;
}
.cs-super-5 .cs-pointer {
left: 0px;
opacity: 1;
}
}
@media (max-width: 767px) {
.cs-super-5 .cs-pointer .cs-pointer-wrapper {
padding-right: 0px;
}
}
/* Custom Module 1 - Slider
============================================= */
.cs-custom-1 .flex-control-nav {
top: 0;
right: 0;
width: 100%;
font-size: 0px;
position: relative;
margin-top: 20px;
}
.cs-custom-1 .flex-control-nav li {
float: none;
display: inline-block;
width: 7px !important;
height: 7px !important;
margin: 0 4px;
}
.cs-custom-1 .flex-control-nav li a {
background-color: #d8d8d8;
border: none !important;
width: 7px !important;
height: 7px !important;
}
.cs-custom-1 .flex-control-nav li:hover a,
.cs-custom-1 .flex-control-nav li a.flex-active {
background-color: #00a7dd !important;
}
.cs-custom-1 .flex-prev,
.cs-custom-1 .flex-next,
.cs-custom-1 .flex-prev:hover,
.cs-custom-1 .flex-next:hover {
background: transparent !important;
top: 165px;
}
.cs-custom-1 .flex-prev i,
.cs-custom-1 .flex-next i {
color: #d0d0d0;
text-shadow: none;
-webkit-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.cs-custom-1 .flex-prev:hover i,
.cs-custom-1 .flex-next:hover i {
color: #00a7dd;
}
.cs-custom-1 .flex-prev {
left: -83px;
}
.cs-custom-1 .flex-next {
right: -83px;
}
.cs-custom-1 .flex-viewport,
.cs-custom-1 .slide {
/* height: 424px !important; */
}
.cs-custom-1 .slide a {
width: 100%;
padding-top: 56.25%;
height: 0px !important;
position: relative;
}
.cs-custom-1 .slide img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
width: 100% !important;
object-fit: cover;
}
.cs-custom-1 .slide p {
margin-top: 10px;
}
.cs-custom-1 .cs-row-slider {
margin-bottom: 10px;
}
.mfp-title,
.mfp-counter {
color: #ffffff;
font-family: Roboto;
font-size: 16px;
letter-spacing: 0.2px;
line-height: 26px !important;
max-width: 640px;
}
.mfp-arrow:after,
.mfp-arrow:before {
opacity: 0;
}
.mfp-arrow {
height: 100%;
top: 55px;
width: 50%;
}
.mfp-arrow-right {
cursor: e-resize !important;
}
.mfp-arrow-left {
cursor: w-resize !important;
}
img.mfp-img {
padding: 0 !important;
max-width: 1280px !important;
max-height: 800px !important;
width: 96vw;
height: 54vw;
object-fit: cover;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 1;
}
.mfp-figure:after {
top: 0 !important;
left: 0 !important;
}
.mfp-bottom-bar {
margin-top: 0;
top: calc(100% + 4px);
}
@media (max-width: 767px) {
.cs-custom-1 .slide a {
padding-top: 75%;
}
}
@media (max-width: 575px) {
.cs-custom-1 [class*="col-"] {
margin-bottom: 80px !important;
}
.cs-custom-1 .flex-control-nav {
bottom: -20px;
}
}
/* Custom Module 24 - Hauptgrafik Slider
============================================= */
.cs-custom-24 h3 .cs-bottom-unerline {
height: 3px;
background-color: #0077b6;
position: absolute;
bottom: 0;
width: 0;
left: 0;
cursor: default;
}
.cs-custom-24 h3 {
position: relative;
}
.cs-custom-24 h3 span {
color: #0077b6 !important;
cursor: pointer;
}
.cs-custom-24 .cs-wrapper {
position: relative;
width: 100%;
padding-top: 73%;
background-image: url(../images/commsult/graphic/hauptgrafik/background_grey.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.cs-custom-24 .cs-main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}
.cs-custom-24 .cs-arrow {
position: absolute;
}
.cs-custom-24 .cs-arrow-point {
position: absolute;
width: 1%;
height: 2.8%;
background-image: url(../images/commsult/graphic/hauptgrafik/arrow_right.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.cs-custom-24 .cs-label-wrapper {
margin-top: -20px;
height: 26px;
}
.cs-custom-24 .cs-label-wrapper label {
color: #96999e;
}
.cs-custom-24 .cs-page-wrapper {
margin-top: 14px;
height: 7px;
font-size: 0px;
}
.cs-custom-24 .cs-page-wrapper span {
height: 7px;
width: 7px;
border-radius: 50px;
background-color: #d8d8d8;
display: inline-block;
vertical-align: top;
margin: 0 4px;
cursor: pointer;
-webkit-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.cs-custom-24 .cs-page-wrapper span.cs-active,
.cs-custom-24 .cs-page-wrapper span:hover {
background-color: #00a7dd;
}
.cs-custom-24-flowup {
animation: dash 5s linear infinite;
animation-direction: alternate-reverse;
}
.cs-custom-24-flowdown {
animation: dash 5s linear infinite;
animation-direction: alternate;
}
@keyframes dash {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 100;
}
}
.cs-custom-24-rotatepoint0180 {
animation: rotatepoint0180 5s ease 2.5s infinite;
animation-direction: alternate;
}
.cs-custom-24-rotatepoint1800 {
animation: rotatepoint0180 5s ease 2.5s infinite;
animation-direction: alternate-reverse;
}
@keyframes rotatepoint0180 {
0% {
transform: rotate(0deg);
}
45% {
transform: rotate(0deg);
}
55% {
transform: rotate(180deg);
}
100% {
transform: rotate(180deg);
}
}
.cs-custom-24-rotatepoint27090 {
animation: rotatepoint27090 5s ease 2.5s infinite;
animation-direction: alternate;
}
@keyframes rotatepoint27090 {
0% {
transform: rotate(270deg);
}
45% {
transform: rotate(270deg);
}
55% {
transform: rotate(90deg);
}
100% {
transform: rotate(90deg);
}
}
@media (max-width: 767px) {
.cs-custom-24 .col-sm-12:not(.cs-title) {
display: none;
}
}
@media (max-width: 991px) {
.cs-custom-24 h3 .cs-bottom-unerline {
display: none !important;
}
}
/* Custom Module 2 - Left Tray
============================================= */
.cs-left-tray {
margin-top: 90px;
margin-bottom: 190px;
}
.cs-left-tray .container::after {
height: calc(100% + 180px);
content: " ";
position: absolute;
top: -90px;
width: 300vw;
background: #f5f5f5;
right: -100px;
border-top-right-radius: 287.5px;
border-bottom-right-radius: 287.5px;
}
.cs-left-tray .row {
position: relative;
z-index: 1;
}
.cs-left-tray [class*="col-"] {
margin-bottom: 0px !important;
}
@media (max-width: 767px) {
.cs-left-tray [class*="col-"]:first-child {
margin-bottom: 60px !important;
}
}
/* Custom Module 3 - Question Variation 1
============================================= */
.cs-custom-3 {
min-height: 340px;
}
.cs-custom-3 .cs-col-txt {
z-index: 1;
height: 340px;
display: table;
}
.cs-custom-3 .cs-text-wrapper {
display: table-cell;
vertical-align: middle;
}
.cs-custom-3 .cs-col-img {
background-size: cover;
background-position: center;
position: absolute;
top: 0px;
right: 0px;
height: 340px;
}
.cs-custom-3 .cs-col-img:before {
position: absolute;
content: "";
width: 100%;
height: 340px;
top: 0px;
right: 0px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0) 100%
);
opacity: 0.6;
}
.cs-custom-3 label {
margin-bottom: 15px;
color: #0077b6;
}
.cs-custom-3 h1 {
margin-bottom: 15px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.46);
}
.cs-custom-3 h1 u {
text-decoration: none;
position: relative;
z-index: 0;
}
.cs-custom-3 h1 u:after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: 6px;
border-bottom: 4px solid #0077b6;
z-index: -1;
}
@media (max-width: 767px) {
.cs-custom-3 h1 u {
text-decoration: underline;
text-decoration-color: #0077b6;
-webkit-text-decoration-color: #0077b6;
}
.cs-custom-3 h1 u:after {
display: none;
}
}
.cs-custom-3 p {
padding-left: 0px;
margin-bottom: 0px !important;
}
@media (max-width: 575px) {
.cs-custom-3 .cs-col-img {
display: none;
}
}
/* Custom Module 4 - Simple Header Page Title
============================================= */
.cs-custom-4 h1 u {
text-decoration: none;
position: relative;
z-index: 0;
}
.cs-custom-4 h1 u:after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: 6px;
border-bottom: 4px solid #0077b6;
z-index: -1;
}
@media (max-width: 767px) {
.cs-custom-4 h1 u {
text-decoration: underline;
text-decoration-color: #0077b6;
-webkit-text-decoration-color: #0077b6;
}
.cs-custom-4 h1 u:after {
display: none;
}
}
.cs-custom-4 h1 i {
font-weight: normal;
color: #383d47 !important;
}
/* Custom Module 5
============================================= */
.cs-custom-5 .cs-img-circle {
height: 390px;
width: 390px;
border-radius: 650px;
background-size: cover;
border: 80px solid #ffffff;
box-sizing: content-box;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.cs-custom-5 .cs-img-circle:after {
content: "";
position: absolute;
height: 550px;
width: 550px;
top: -80px;
left: -80px;
box-sizing: content-box;
background-image: url(../images/commsult/graphic/O_grey.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.cs-custom-5 h2 {
margin-top: 120px;
margin-bottom: 15px;
}
.cs-custom-5 p {
margin-bottom: 30px;
}
.cs-custom-5 p em {
font-family: Capitolium2;
font-size: 24px;
font-weight: bold;
font-style: italic;
line-height: 28px !important;
}
@media (max-width: 991px) {
.cs-custom-5 .cs-img-circle {
height: 270px;
width: 270px;
border: 70px solid #ffffff;
}
.cs-custom-5 .cs-img-circle:after {
height: 410px;
width: 410px;
top: -70px;
left: -70px;
}
.cs-custom-5 h2 {
margin-top: 15px;
}
}
@media (max-width: 767px) {
.cs-custom-5 .cs-img-circle {
height: 250px;
width: 250px;
margin-left: -70px;
}
.cs-custom-5 .cs-img-circle:after {
height: 390px;
width: 390px;
}
.cs-custom-5 h2 {
margin-top: 0px;
}
}
/* Custom Module 6
============================================= */
.cs-custom-6 h2 {
margin-top: 30px;
margin-bottom: 15px;
position: relative;
z-index: 1;
}
.cs-custom-6 p {
margin-bottom: 30px;
}
.cs-custom-6 p em {
font-family: Capitolium2;
font-size: 24px;
font-weight: bold;
font-style: italic;
line-height: 28px !important;
}
.cs-custom-6 .cs-col-img {
text-align: right;
}
.cs-custom-6 .cs-img-circle {
height: 420px;
width: 420px;
border-radius: 650px;
background-size: cover;
display: inline-block;
}
@media (max-width: 991px) {
.cs-custom-6 h2 {
margin-top: 0px;
}
}
@media (max-width: 767px) {
.cs-custom-6 .cs-col-img {
height: 420px;
}
.cs-custom-6 .cs-img-circle {
position: absolute;
right: 0;
}
}
/* Custom Module 7
============================================= */
.cs-custom-7 .cs-img-circle {
height: 530px;
width: 530px;
border-radius: 650px;
background-size: cover;
}
.cs-custom-7 h2 {
margin-top: 60px;
margin-bottom: 20px;
}
.cs-custom-7 p {
margin-bottom: 25px;
}
.cs-custom-7 p em {
font-family: Capitolium2;
font-size: 24px;
font-weight: bold;
font-style: italic;
line-height: 28px !important;
}
@media (max-width: 991px) {
.cs-custom-7 .cs-img-circle {
height: 400px;
width: 400px;
}
.cs-custom-7 h2 {
margin-top: 0px;
}
}
/* Custom Module 8
============================================= */
.cs-custom-8 .cs-wrapper {
height: 280px;
padding: 24px;
background: #00a7dd;
box-sizing: border-box;
position: relative;
-webkit-transition: background 0.2s ease;
-o-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.cs-custom-8 label {
margin-bottom: 15px;
color: #ffffff;
}
.cs-custom-8 h4 {
color: #ffffff;
line-height: 34px;
}
.cs-custom-8 .cs-link-4 {
position: absolute;
left: 24px;
bottom: 24px;
}
.cs-custom-8 .cs-wrapper:hover {
background: #0077b6;
}
/* Custom Module 9
============================================= */
.cs-custom-9 h2 {
color: #ffffff;
margin-bottom: 30px;
}
.cs-custom-9 h2 u {
text-decoration: none;
position: relative;
}
.cs-custom-9 h2 u:after {
content: "";
width: 100%;
position: absolute;
left: 0;
bottom: 0px;
border-bottom: 4px solid #ffffff;
}
@media (max-width: 767px) {
.cs-custom-9 h2 u {
text-decoration: underline;
text-decoration-color: #ffffff;
-webkit-text-decoration-color: #ffffff;
}
.cs-custom-9 h2 u:after {
display: none;
}
}
.cs-custom-9 p {
color: #ffffff;
font-size: 20px;
font-weight: 500;
}
.cs-custom-9 .cs-link-3 {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
color: #00a7dd;
margin-right: 15px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.2px;
line-height: 22px;
position: relative;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.cs-custom-9 .cs-link-3:hover {
color: #ffffff;
}
.cs-custom-9 .cs-link-3:after {
content: "";
display: block;
border-bottom: 2px solid #ffffff;
width: 0;
position: absolute;
left: 0;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.cs-custom-9 .cs-link-3:hover:after {
width: 100%;
}
/* Custom Module 10
============================================= */
.cs-custom-10 {
text-align: right;
max-height: 350px;
}
.cs-custom-10 .cs-icon-wrapper {
margin-top: 10px;
margin-bottom: 10px;
display: none;
}
.cs-custom-10 h6 {
color: #ffffff;
margin-bottom: 16px;
text-align: left;
font-size: 20px;
line-height: 26px;
}
.cs-custom-10 .cs-form-field-group {
display: block;
margin-bottom: 10px;
}
.cs-custom-10 input[type="text"],
.cs-custom-10 input[type="email"] {
width: 100%;
}
.cs-custom-10 .cs-checkbox {
display: block;
margin-top: 15px;
margin-bottom: 15px;
text-align: left;
}
.cs-custom-10 .cs-hide-animate-2 {
max-height: 0px;
margin-bottom: 0px;
opacity: 0;
display: none;
}
.cs-custom-10 .cs-hide-animate-3 {
opacity: 0;
display: none;
}
.cs-custom-10 .cs-hide-animate-4 {
opacity: 0;
display: none;
}
#cs10Input2 {
margin-bottom: 0px;
}
/* Custom Module 11
============================================= */
.cs-custom-11 .row {
padding-top: 30px;
background-color: #00527f;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
}
.cs-custom-11 .cs-col-logo {
padding-left: 46px;
margin-bottom: 30px !important;
}
.cs-custom-11 .cs-col-logo img {
width: 100px;
margin-bottom: 10px;
}
.cs-custom-11 .cs-col-logo p {
font-style: italic;
color: #ffffff;
font-family: Capitolium2;
line-height: 18px;
}
.cs-custom-11 .cs-col-txt {
margin-bottom: 30px !important;
}
.cs-custom-11 .cs-col-txt h6 {
font-size: 20px;
line-height: 26px;
color: #ffffff;
margin-bottom: 10px;
}
.cs-custom-11 .cs-col-txt p {
color: #ffffff;
margin-bottom: 35px;
}
.cs-custom-11 .cs-col-txt .cs-link-2 {
position: absolute;
bottom: 0;
left: 15px;
font-size: 14px;
letter-spacing: 0.2px;
line-height: 20px !important;
height: 20px;
}
.cs-custom-11 .cs-col-txt .cs-link-2 .cs-arrow {
line-height: 20px;
height: 20px;
}
@media (max-width: 991px) {
.cs-custom-11 .cs-col-logo {
padding-left: 15px;
}
}
/* Custom Module 12
============================================= */
.cs-custom-12 .cs-wrapper {
padding: 50px 24px 24px 24px;
background-size: cover;
background-position: center;
position: relative;
}
.cs-company .cs-custom-12 .cs-wrapper {
padding: 24px 24px 24px 24px;
}
.cs-company .cs-custom-12 .cs-wrapper {
border-radius: 10px;
overflow: hidden;
}
.cs-custom-12 .cs-wrapper:after {
position: absolute;
content: "";
width: 100%;
height: 101%;
top: 0px;
right: 0px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #1c1d1d 100%);
opacity: 0.6;
}
.cs-custom-12 .cs-wrapper::before {
position: absolute;
top: 0;
left: 0px;
height: 100%;
width: 100%;
content: " ";
background: #00a7dd;
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
z-index: 1;
}
.cs-custom-12 .cs-wrapper:hover::before {
opacity: 1;
}
.cs-custom-12 h3 {
height: 108px;
position: relative;
z-index: 1;
margin-bottom: 5px;
color: #ffffff;
width: 80%;
}
.cs-company .cs-custom-12 h3 {
font-weight: normal;
margin-bottom: 31px;
}
.cs-custom-12 .cs-link-4 {
position: relative;
z-index: 1;
}
@media (max-width: 575px) {
.cs-custom-12 h3 {
height: auto;
}
}
/* Custom Module 13
============================================= */
.cs-custom-13 .cs-img {
position: relative;
width: 100%;
padding-top: 56.25%;
background-size: cover;
background-position: center;
}
.cs-custom-13 .cs-img:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0px;
right: 0px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, #1c1d1d 100%);
opacity: 0.6;
}
.cs-custom-13 .cs-col-heading {
position: absolute;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.cs-custom-13 .cs-col-button {
position: absolute;
height: 100%;
top: 0;
right: 0;
}
.cs-custom-13 h1 {
color: #ffffff;
}
.cs-custom-13 .cs-heading-wrapper-outer,
.cs-custom-13 .cs-button-wrapper-outer {
display: table;
height: 100%;
}
.cs-custom-13 .cs-heading-wrapper-inner,
.cs-custom-13 .cs-button-wrapper-inner {
display: table-cell;
vertical-align: middle;
}
@media (max-width: 767px) {
.cs-custom-13 .cs-col-heading {
position: relative;
height: auto;
}
.cs-custom-13 .cs-img {
padding-top: 75% !important;
}
.cs-custom-13 h1 {
color: #383d47;
}
.cs-custom-13 .cs-button-wrapper-outer {
width: 100%;
}
.cs-custom-13 .cs-button-wrapper-inner {
text-align: center;
}
}
/* Custom Module 14
============================================= */
.cs-custom-14 .cs-fl-icon {
text-align: center;
font-size: 0px;
margin-bottom: 40px;
}
.cs-custom-14 h5 em {
font-style: normal;
color: #0077b6;
font-weight: bold;
}
.cs-company .cs-custom-14 h5 {
color: #ffffff;
}
/* Custom Module 15
============================================= */
.cs-custom-15 {
opacity: 0;
}
.cs-custom-15 .cs-img-circle {
height: 500px;
width: 500px;
border-radius: 650px;
background-size: cover;
margin-top: 35px;
position: relative;
z-index: 1;
left: -80px;
}
.cs-custom-15 .cs-heading-circle {
height: 570px;
width: 570px;
border-radius: 650px;
background: #00a7dd;
position: absolute;
top: 0px;
left: 300px;
display: table;
}
.cs-custom-15 h1 {
color: #ffffff;
width: 370px;
left: 150px;
display: table-cell;
vertical-align: middle;
position: relative;
opacity: 0;
z-index: 3;
}
.cs-custom-15 .cs-blue-overlay {
height: 570px;
width: 570px;
border-radius: 650px;
background: #00a7dd;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
opacity: 0.5;
}
@media (max-width: 767px) {
.cs-custom-15 {
opacity: 1;
}
.cs-custom-15 .cs-img-circle {
margin-top: 0px;
margin-left: 100px;
left: 0px;
}
.cs-custom-15 .cs-heading-circle {
top: 40px;
left: -115px;
height: 420px;
width: 420px;
}
.cs-custom-15 h1 {
left: 130px;
opacity: 1;
}
.cs-custom-15 .cs-blue-overlay {
height: 420px;
width: 420px;
}
}
/* Custom Module 16
============================================= */
.cs-custom-16 {
opacity: 0;
}
.cs-custom-16 .cs-img-circle {
height: 475px;
width: 475px;
border-radius: 650px;
background-size: cover;
margin-top: 17.5px;
position: relative;
z-index: 1;
left: -80px;
}
.cs-custom-16 .cs-heading-circle {
height: 510px;
width: 510px;
position: absolute;
top: 0px;
left: 260px;
display: table;
background-image: url(../images/commsult/graphic/O_blue.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.cs-custom-16 h1 {
color: #2d333d;
width: 370px;
left: 250px;
display: table-cell;
vertical-align: middle;
position: relative;
opacity: 0;
z-index: 3;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.46);
}
.cs-custom-16 .cs-blue-overlay {
height: 510px;
width: 510px;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
opacity: 0.5;
background-image: url(../images/commsult/graphic/O_blue.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@media (max-width: 767px) {
.cs-custom-16 {
opacity: 1;
}
.cs-custom-16 .cs-img-circle {
margin-top: 0px;
margin-left: 150px;
left: 0px;
}
.cs-custom-16 .cs-heading-circle {
top: 40px;
left: -115px;
height: 420px;
width: 420px;
}
.cs-custom-16 h1 {
left: 130px;
opacity: 1;
}
.cs-custom-16 .cs-blue-overlay {
height: 420px;
width: 420px;
}
}
/* Custom Module 17
============================================= */
.cs-custom-17 .cs-img {
width: 100%;
padding-top: 56.25%;
margin-bottom: 19px;
background-size: cover;
background-position: center;
}
.cs-custom-17 label {
color: #96999e;
}
.cs-custom-17 p {
margin-top: 10px;
margin-bottom: 14px;
}
/* Custom Module 18 - Right Tray
============================================= */
.cs-right-tray {
margin-top: 130px !important;
margin-bottom: 190px !important;
}
.cs-right-tray .container::after {
height: calc(100% + 180px);
content: " ";
position: absolute;
top: -90px;
width: 300vw;
background: #f5f5f5;
left: -100px;
border-top-left-radius: 287.5px;
border-bottom-left-radius: 287.5px;
}
.cs-right-tray .row {
position: relative;
z-index: 1;
}
.cs-right-tray [class*="col-"] {
margin-bottom: 0px !important;
}
@media (max-width: 767px) {
.cs-right-tray [class*="col-"]:first-child {
margin-bottom: 60px !important;
}
}
/* Custom Module 19
============================================= */
.cs-custom-19 .cs-wrapper {
padding: 24px;
background: #009bd0;
box-sizing: border-box;
position: relative;
height: 100%;
min-height: 280px;
}
@media (max-width: 767px) {
.cs-custom-19 .cs-wrapper {
padding-top: unset;
}
}
@media (max-width: 575px) {
.cs-custom-19 .cs-wrapper {
min-height: 180px;
padding-top: unset;
}
}
.cs-custom-19 label {
color: #ffffff;
padding: 25px 24px;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
-webkit-transition: color 0.3s ease;
-o-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.cs-custom-19 h5 {
color: #ffffff;
padding: 25px 24px;
font-weight: bold;
position: absolute;
height: 100%;
width: 100%;
top: 30px;
left: 0px;
}
.cs-custom-19 .cs-txt-overlay {
position: absolute;
padding: 24px;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background-color: #eaeaeb;
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.cs-custom-19 p {
color: #383d47;
padding: 25px 24px;
position: absolute;
height: 100%;
width: 100%;
top: 30px;
left: 0px;
}
.cs-custom-19 .cs-wrapper:hover .cs-txt-overlay {
opacity: 1;
}
.cs-custom-19 .cs-wrapper:hover label {
color: #62666e;
}
/* Custom Module 20
============================================= */
.cs-custom-20 .cs-wrapper {
height: 344px;
width: 347px;
margin: auto;
position: relative;
}
.cs-custom-20 .cs-img-base,
.cs-custom-20 .cs-img-f-data,
.cs-custom-20 .cs-img-f-process,
.cs-custom-20 .cs-img-f-ux {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
background-size: contain;
background-repeat: no-repeat;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.cs-custom-20 .cs-img-base {
background-image: url(../images/commsult/graphic/kreisgrafik/O_00@2x.png);
}
.cs-custom-20 .cs-img-f-data {
background-image: url(../images/commsult/graphic/kreisgrafik/O_01@2x.png);
opacity: 0;
}
.cs-custom-20 .cs-img-f-process {
background-image: url(../images/commsult/graphic/kreisgrafik/O_02@2x.png);
opacity: 0;
}
.cs-custom-20 .cs-img-f-ux {
background-image: url(../images/commsult/graphic/kreisgrafik/O_03@2x.png);
opacity: 0;
}
.cs-custom-20 .cs-img-l-data,
.cs-custom-20 .cs-img-l-process,
.cs-custom-20 .cs-img-l-ux {
position: absolute;
height: 30px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0;
}
.cs-custom-20 .cs-img-l-data {
background-image: url(../images/commsult/graphic/kreisgrafik/label_data@2x.png);
width: 50%;
top: 105px;
left: -23%;
}
.cs-custom-20 .cs-img-l-process {
background-image: url(../images/commsult/graphic/kreisgrafik/label_process@2x.png);
width: 50%;
top: 105px;
right: -23%;
}
.cs-custom-20 .cs-img-l-ux {
background-image: url(../images/commsult/graphic/kreisgrafik/label_ux@2x.png);
width: 100%;
bottom: -8px;
left: 0px;
}
.cs-custom-20 .cs-img {
background-image: url(../images/commsult/graphic/kreisgrafik/image@2x.png);
position: absolute;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 161px;
height: 180px;
left: calc(50% - 80.5px);
top: calc(50% - 90px);
}
.cs-custom-20 .cs-ol-1 {
position: absolute;
width: 100%;
height: 90%;
bottom: 30%;
right: 50%;
border-top-left-radius: 300px;
z-index: 1;
}
.cs-custom-20 .cs-ol-2 {
position: absolute;
width: 100%;
height: 90%;
bottom: 30%;
left: 50%;
border-top-right-radius: 300px;
z-index: 1;
}
.cs-custom-20 .cs-ol-3 {
position: absolute;
width: 200%;
height: 50%;
left: -50%;
top: 70%;
border-bottom-left-radius: 300px;
border-bottom-right-radius: 300px;
z-index: 1;
}
.cs-ol-1:hover ~ .cs-img-f-data,
.cs-ol-1:hover ~ .cs-p-data {
opacity: 1 !important;
}
.cs-ol-2:hover ~ .cs-img-f-process,
.cs-ol-2:hover ~ .cs-p-process {
opacity: 1 !important;
}
.cs-ol-3:hover ~ .cs-img-f-ux,
.cs-ol-3:hover ~ .cs-p-ux {
opacity: 1 !important;
}
.cs-ol-1:hover ~ .cs-p-data {
transition-delay: 0.4s;
}
.cs-ol-2:hover ~ .cs-p-process {
transition-delay: 0.4s;
}
.cs-ol-3:hover ~ .cs-p-ux {
transition-delay: 0.4s;
}
.cs-custom-20 .cs-wrapper p {
width: 250px;
position: absolute;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.cs-custom-20 .cs-wrapper .cs-p-data {
text-align: right;
top: 60px;
left: -290px;
}
.cs-custom-20 .cs-wrapper .cs-p-process {
text-align: left;
top: 60px;
right: -310px;
}
.cs-custom-20 .cs-wrapper .cs-p-ux {
text-align: left;
bottom: 0px;
right: -250px;
}
@media (max-width: 767px) {
.cs-custom-20 {
display: none;
}
}
/* Custom Module 21
============================================= */
.cs-custom-21 .cs-outer-wrapper {
width: 100%;
padding-top: 75%;
position: relative;
/* background-image: url(../images/commsult/graphic/offline_sync_animation/offline_sync_01.svg); */
background-size: cover;
background-position: center;
}
.cs-custom-21 .cs-wrapper {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
display: none;
opacity: 0;
}
.cs-custom-21 .cs-wrapper:before {
content: "";
width: 82%;
height: 100%;
position: absolute;
top: 0%;
left: 11%;
background-image: url(../images/commsult/graphic/offline_sync_animation/offline_sync_03.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.cs-custom-21 .cs-wrapper:after {
content: "";
width: 6%;
padding-top: 6%;
position: absolute;
top: 9.1%;
right: 10.4%;
background-image: url(../images/commsult/graphic/offline_sync_animation/offline_sync_05.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
animation: csspin 4s infinite linear, csspinopacity 1s ease 1s;
animation-fill-mode: forwards;
}
@keyframes csspin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes csspinopacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.cs-custom-21 .cs-complex-sync {
width: 20%;
height: 100%;
position: absolute;
top: 7%;
left: 42%;
background-image: url(../images/commsult/graphic/offline_sync_animation/offline_sync_02.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
animation: cscomplexsync 10s infinite ease;
}
@keyframes cscomplexsync {
57% {
opacity: 0;
}
60% {
opacity: 1;
}
96% {
opacity: 1;
}
99% {
opacity: 0;
}
}
.cs-custom-21 .cs-complex-sync:after {
content: "";
width: 45%;
padding-top: 45%;
position: absolute;
top: 43.6%;
right: 26.8%;
background-image: url(../images/commsult/graphic/offline_sync_animation/offline_sync_04.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: csspin 4s infinite linear, cscomplexsyncarrow 10s infinite ease;
}
@keyframes cscomplexsyncarrow {
63% {
opacity: 0;
}
66% {
opacity: 1;
}
96% {
opacity: 1;
}
99% {
opacity: 0;
}
}
.cs-custom-21 label {
position: absolute;
color: #0077b6;
top: 10%;
left: 10%;
}
.cs-custom-21 .cs-label-offline:after {
content: attr(data-content) "";
}
/* Custom Module 22
============================================= */
.cs-custom-22 .cs-outer-wrapper {
width: 100%;
padding-top: 75%;
position: relative;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_01.svg);
background-size: cover;
background-position: center;
}
.cs-custom-22 .cs-wrapper {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
display: none;
opacity: 0;
}
.cs-custom-22 .cs-scan {
width: 80%;
height: 1px;
position: absolute;
top: 30%;
left: 10%;
opacity: 0;
animation: csuscanlightmove 2s infinite, csuscan 20s infinite ease;
}
@keyframes csuscan {
0% {
}
/* 1.1 */
5% {
}
/* 1.2 */
10% {
}
14% {
}
/* 1.3 */
15% {
}
/* 1.4 */
20% {
}
/* 2.1 */
25% {
}
29% {
opacity: 0;
}
/* 2.2 */
30% {
opacity: 1;
}
/* 2.3 */
35% {
opacity: 1;
}
/* 2.4 */
40% {
opacity: 0;
}
/* 3.1 */
45% {
}
/* 3.2 */
50% {
}
/* 3.3 */
55% {
}
/* 3.4 */
60% {
}
/* 4.1 */
65% {
}
69% {
opacity: 0;
}
/* 4.2 */
70% {
opacity: 1;
}
/* 4.3 */
75% {
opacity: 1;
}
/* 4.4 */
80% {
opacity: 0;
}
/* 5.1 */
85% {
}
/* 5.2 */
90% {
}
/* 5.3 */
95% {
}
/* 5.4 */
100% {
}
}
@keyframes csuscanlightmove {
50% {
top: 80%;
}
}
.cs-custom-22 .cs-scan:after {
content: "";
width: 100%;
height: 1px;
background: #31af81;
position: absolute;
top: 0;
left: 0;
box-shadow: 0 0 4px #31af81;
animation: csuscanlightblink 0.01s infinite;
}
@keyframes csuscanlightblink {
50% {
opacity: 0;
}
}
.cs-custom-22 .cs-wrapper:after {
content: "";
width: 70%;
height: 100%;
position: absolute;
top: 0px;
left: 15%;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_02.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
animation: csuwrapper 20s infinite ease;
}
@keyframes csuwrapper {
0% {
}
/* 1.1 */
5% {
}
/* 1.2 */
10% {
}
14% {
}
/* 1.3 */
15% {
}
/* 1.4 */
20% {
opacity: 0;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_02.svg);
}
/* 2.1 */
25% {
opacity: 1;
}
/* 2.2 */
30% {
}
/* 2.3 */
35% {
opacity: 1;
}
/* 2.4 */
40% {
opacity: 0;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_02.svg);
}
/* 3.1 */
45% {
}
/* 3.2 */
50% {
}
/* 3.3 */
55% {
}
/* 3.4 */
60% {
opacity: 0;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_04.svg);
}
/* 4.1 */
65% {
opacity: 1;
}
/* 4.2 */
70% {
}
/* 4.3 */
75% {
opacity: 1;
}
/* 4.4 */
80% {
opacity: 0;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_04.svg);
}
/* 5.1 */
85% {
}
/* 5.2 */
90% {
}
/* 5.3 */
95% {
}
/* 5.4 */
100% {
}
}
.cs-custom-22 .cs-umlagerung-button {
width: 70%;
height: 16%;
top: 42%;
right: 15%;
position: absolute;
background: #00a7dd;
opacity: 0;
animation: csubutton 20s infinite ease;
}
@keyframes csubutton {
0% {
opacity: 0;
}
1% {
opacity: 1;
}
/* 1.1 */
5% {
}
/* 1.2 */
10% {
}
14% {
background: #00a7dd;
}
/* 1.3 */
15% {
background: #0077b6;
opacity: 1;
}
/* 1.4 */
20% {
opacity: 0;
background: #0077b6;
width: 70%;
height: 16%;
top: 42%;
}
/* 2.1 */
25% {
}
/* 2.2 */
30% {
}
/* 2.3 */
35% {
}
/* 2.4 */
40% {
opacity: 0;
background: #00a7dd;
width: 24%;
height: 14%;
top: 80%;
}
/* 3.1 */
45% {
opacity: 1;
}
/* 3.2 */
50% {
}
54% {
background: #00a7dd;
}
/* 3.3 */
55% {
background: #0077b6;
opacity: 1;
}
/* 3.4 */
60% {
opacity: 0;
background: #0077b6;
width: 24%;
height: 14%;
top: 80%;
}
/* 4.1 */
65% {
}
/* 4.2 */
70% {
}
/* 4.3 */
75% {
}
/* 4.4 */
80% {
opacity: 0;
background: #31af81;
width: 70%;
height: 16%;
top: 55%;
}
/* 5.1 */
85% {
opacity: 1;
}
/* 5.2 */
90% {
}
94% {
background: #31af81;
}
/* 5.3 */
95% {
background: #28936c;
opacity: 1;
}
/* 5.4 */
100% {
opacity: 0;
background: #28936c;
width: 70%;
height: 16%;
top: 55%;
}
}
.cs-custom-22 .cs-umlagerung-button:after {
color: #ffffff;
font-family: Roboto;
font-size: 20px;
font-weight: 500;
content: attr(data-content) "";
position: absolute;
text-align: center;
width: 100%;
height: 30px;
top: calc(50% - 15px);
/* animation: csubuttontext 20s infinite ease; */
}
@keyframes csubuttontext {
0% {
}
/* 1.1 */
5% {
}
/* 1.2 */
10% {
}
14% {
}
/* 1.3 */
15% {
}
/* 1.4 */
20% {
}
/* 2.1 */
25% {
}
/* 2.2 */
30% {
}
/* 2.3 */
35% {
content: "Umlagerung";
}
/* 2.4 */
40% {
content: "Los";
}
/* 3.1 */
45% {
}
/* 3.2 */
50% {
}
54% {
}
/* 3.3 */
55% {
}
/* 3.4 */
60% {
content: "Los";
}
/* 4.1 */
65% {
}
/* 4.2 */
70% {
}
/* 4.3 */
75% {
}
/* 4.4 */
80% {
content: "OK";
}
/* 5.1 */
85% {
}
/* 5.2 */
90% {
}
/* 5.3 */
95% {
}
/* 5.4 */
100% {
content: "OK";
}
}
.cs-custom-22 .cs-touch {
width: 34px;
height: 34px;
top: calc(50% - 17px);
left: 58%;
position: absolute;
border: 4px solid #0077b6;
border-radius: 100px;
opacity: 0;
animation: csutouch 20s infinite ease;
z-index: 1;
}
@keyframes csutouch {
0% {
}
/* 1.1 */
5% {
}
8% {
opacity: 0;
top: calc(50% - 17px);
left: 58%;
height: 34px;
width: 34px;
}
9% {
opacity: 1;
top: calc(50% - 22px);
left: 58%;
height: 44px;
width: 44px;
}
/* 1.2 */
10% {
}
14% {
opacity: 1;
}
/* 1.3 */
15% {
opacity: 0;
}
/* 1.4 */
20% {
opacity: 0;
top: calc(50% - 22px);
left: 58%;
height: 44px;
width: 44px;
}
/* 2.1 */
25% {
}
/* 2.2 */
30% {
}
/* 2.3 */
35% {
}
/* 2.4 */
40% {
}
/* 3.1 */
45% {
}
48% {
opacity: 0;
top: 82%;
left: 75%;
height: 34px;
width: 34px;
}
49% {
opacity: 1;
top: 80.5%;
left: 75%;
height: 44px;
width: 44px;
}
/* 3.2 */
50% {
}
54% {
opacity: 1;
}
/* 3.3 */
55% {
opacity: 0;
}
/* 3.4 */
60% {
opacity: 0;
top: 80.5%;
left: 75%;
height: 44px;
width: 44px;
}
/* 4.1 */
65% {
}
/* 4.2 */
70% {
}
/* 4.3 */
75% {
}
/* 4.4 */
80% {
}
/* 5.1 */
85% {
}
88% {
opacity: 0;
top: calc(63% - 17px);
left: 58%;
height: 34px;
width: 34px;
}
89% {
opacity: 1;
top: calc(63% - 22px);
left: 58%;
height: 44px;
width: 44px;
}
/* 5.2 */
90% {
}
94% {
opacity: 1;
}
/* 5.3 */
95% {
opacity: 0;
}
/* 5.4 */
100% {
opacity: 0;
top: calc(63% - 22px);
left: 58%;
height: 44px;
width: 44px;
}
}
.cs-custom-22 .cs-touch:after {
content: "";
width: 0px;
height: 0px;
top: 18px;
left: 18px;
position: absolute;
background-color: #0077b6;
border-radius: 100px;
animation: csutouchfill 20s infinite ease;
}
@keyframes csutouchfill {
0% {
}
/* 1.1 */
5% {
}
/* 1.2 */
10% {
}
14% {
width: 0px;
height: 0px;
top: 18px;
left: 18px;
}
/* 1.3 */
15% {
width: 38px;
height: 38px;
top: -1px;
left: -1px;
}
/* 1.4 */
20% {
width: 38px;
height: 38px;
top: -1px;
left: -1px;
}
/* 2.1 */
25% {
}
/* 2.2 */
30% {
}
/* 2.3 */
35% {
}
/* 2.4 */
40% {
width: 0px;
height: 0px;
top: 18px;
left: 18px;
}
/* 3.1 */
45% {
}
/* 3.2 */
50% {
}
54% {
width: 0px;
height: 0px;
top: 18px;
left: 18px;
}
/* 3.3 */
55% {
width: 38px;
height: 38px;
top: -1px;
left: -1px;
}
/* 3.4 */
60% {
width: 38px;
height: 38px;
top: -1px;
left: -1px;
}
/* 4.1 */
65% {
}
/* 4.2 */
70% {
}
/* 4.3 */
75% {
}
/* 4.4 */
80% {
width: 0px;
height: 0px;
top: 18px;
left: 18px;
}
/* 5.1 */
85% {
}
/* 5.2 */
90% {
}
94% {
width: 0px;
height: 0px;
top: 18px;
left: 18px;
}
/* 5.3 */
95% {
width: 38px;
height: 38px;
top: -1px;
left: -1px;
}
/* 5.4 */
100% {
width: 38px;
height: 38px;
top: -1px;
left: -1px;
}
}
.cs-custom-22 .cs-bg-alt {
width: 70%;
height: 100%;
position: absolute;
top: 0px;
left: 15%;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_03.svg);
background-position: 0% 20%;
background-size: contain;
background-repeat: no-repeat;
opacity: 0;
animation: csubg 20s infinite ease;
}
@keyframes csubg {
0% {
}
/* 1.1 */
5% {
}
/* 1.2 */
10% {
}
14% {
}
/* 1.3 */
15% {
}
/* 1.4 */
20% {
}
/* 2.1 */
25% {
}
/* 2.2 */
30% {
}
/* 2.3 */
35% {
}
/* 2.4 */
40% {
opacity: 0;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_03.svg);
background-position: 0% 20%;
width: 70%;
left: 15%;
}
/* 3.1 */
45% {
opacity: 1;
}
/* 3.2 */
50% {
}
/* 3.3 */
55% {
opacity: 1;
}
/* 3.4 */
60% {
opacity: 0;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_03.svg);
background-position: 0% 20%;
width: 70%;
left: 15%;
}
/* 4.1 */
65% {
}
/* 4.2 */
70% {
}
/* 4.3 */
75% {
}
/* 4.4 */
80% {
opacity: 0;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_05.svg);
background-position: 0% 35%;
width: 60%;
left: 20%;
}
/* 5.1 */
85% {
opacity: 1;
}
/* 5.2 */
90% {
}
/* 5.3 */
95% {
opacity: 1;
}
/* 5.4 */
100% {
opacity: 0;
background-image: url(../images/commsult/graphic/umlagern_animation/umlagern_05.svg);
background-position: 0% 35%;
width: 60%;
left: 20%;
}
}
/* Custom Module 23
============================================= */
.cs-custom-23 .cs-img {
width: 100%;
padding-top: 54%;
position: relative;
background-image: url(../images/commsult/graphic/map/map_bg.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
@media (max-width: 767px) {
.cs-custom-23 .cs-img {
background-image: url(../images/commsult/graphic/map/map.png);
}
}
.cs-custom-23 [class*="cs-location-point"] {
width: 20px;
height: 32px;
background-image: url(../images/commsult/graphic/map/map_pin.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.cs-custom-23 .cs-location-point1 {
top: 46%;
left: 17.5%;
}
.cs-custom-23 .cs-location-point2 {
top: 41.6%;
left: 18.8%;
}
.cs-custom-23 .cs-location-point3 {
top: 39.4%;
left: 22.2%;
}
.cs-custom-23 .cs-location-point4 {
top: 34%;
left: 22.6%;
}
.cs-custom-23 .cs-location-point5 {
top: 80.4%;
left: 29.4%;
}
.cs-custom-23 .cs-location-point6 {
top: 73%;
left: 33%;
}
.cs-custom-23 .cs-location-point7 {
top: 35.8%;
left: 44.6%;
}
.cs-custom-23 .cs-location-point8 {
top: 27.2%;
left: 45%;
}
.cs-custom-23 .cs-location-point9 {
top: 30.9%;
left: 46.3%;
}
.cs-custom-23 .cs-location-point10 {
top: 33.5%;
left: 48.7%;
}
.cs-custom-23 .cs-location-point11 {
top: 28.2%;
left: 48.7%;
}
.cs-custom-23 .cs-location-point12 {
top: 78.1%;
left: 50.8%;
}
.cs-custom-23 .cs-location-point13 {
top: 36.5%;
left: 54.8%;
}
.cs-custom-23 .cs-location-point14 {
top: 24.9%;
left: 56.9%;
}
.cs-custom-23 .cs-location-point15 {
top: 46.7%;
left: 60.9%;
}
.cs-custom-23 .cs-location-point16 {
top: 48.9%;
left: 66.2%;
}
.cs-custom-23 .cs-location-point17 {
top: 33.8%;
left: 71.1%;
}
.cs-custom-23 .cs-location-point18 {
top: 59%;
left: 74.5%;
}
.cs-custom-23 .cs-location-point19 {
top: 45.9%;
left: 77.7%;
}
.cs-custom-23 .cs-location-point20 {
top: 37.3%;
left: 78%;
}
.cs-custom-23 .cs-location-point21 {
top: 42.5%;
left: 79.4%;
}
.cs-custom-23 .cs-location-point22 {
top: 37.6%;
left: 81.1%;
}
.cs-custom-23 .cs-location-point23 {
top: 38.3%;
left: 84.6%;
}
.cs-custom-23 .cs-location-point24 {
top: 79.1%;
left: 87.6%;
}
/* Contact Overlay
============================================= */
.cs-cookies-overlay {
position: fixed;
bottom: -110px;
width: 100%;
background-color: #ffffff;
box-shadow: 0 4px 29px 0 rgba(0, 0, 0, 0.15);
z-index: 310;
padding: 27px 0;
color: #383d47;
font-family: Roboto;
font-size: 18px;
line-height: 24px;
font-weight: normal;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.cs-cookies-overlay a,
.cs-cookies-overlay a:hover {
color: #009bd0;
}
.cs-contact-overlay,
.cs-impressum-overlay,
.cs-datenschutz-overlay {
background-color: #ffffff;
position: fixed;
left: 0;
bottom: -120vh;
opacity: 0;
z-index: 200;
height: 100%;
width: 100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.cs-contact-overlay .cs-hide-animate-2,
.cs-impressum-overlay .cs-hide-animate-2,
.cs-datenschutz-overlay .cs-hide-animate-2 {
opacity: 0;
display: none;
}
.cs-contact-overlay .cs-hide-animate-3,
.cs-impressum-overlay .cs-hide-animate-3,
.cs-datenschutz-overlay .cs-hide-animate-3 {
opacity: 0;
display: none;
}
.cs-contact-top-border,
.cs-impressum-top-border,
.cs-datenschutz-top-border {
background: linear-gradient(210.75deg, #0077b6 0%, #00527f 100%);
position: fixed;
opacity: 0;
top: -60px;
left: 0;
width: 100%;
z-index: 201;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}
.cs-company .cs-contact-top-border,
.cs-company .cs-impressum-top-border,
.cs-company .cs-datenschutz-top-border {
background: none;
background-color: #383d47;
border-bottom: 5px solid #0077b6;
}
.cs-contact-overlay .cs-img,
.cs-impressum-overlay .cs-img,
.cs-datenschutz-overlay .cs-img {
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.cs-contact-overlay h6,
.cs-impressum-overlay h6,
.cs-datenschutz-overlay h6 {
margin-bottom: 20px;
}
.cs-contact-overlay .cs-chip-container,
.cs-impressum-overlay .cs-chip-container,
.cs-datenschutz-overlay .cs-chip-container {
margin-bottom: 16px;
}
.cs-contact-overlay .icon-line-cross,
.cs-impressum-overlay .icon-line-cross,
.cs-datenschutz-overlay .icon-line-cross {
position: absolute;
top: 90px;
right: 40px;
cursor: pointer;
height: 22px;
width: 22px;
font-size: 22px;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
transition: all 0.8s ease;
}
/* Pop Up
============================================= */
.cs-popup {
box-shadow: 0 4px 29px 0 rgba(0, 0, 0, 0.15);
background-color: #00a7dd;
padding: 60px 60px 60px 160px;
position: fixed;
right: -700px;
bottom: 120px;
z-index: 11;
height: 385px;
width: 670px;
border-top-left-radius: 500px;
border-bottom-left-radius: 500px;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.cs-popup .cs-hide-animate-2 {
opacity: 0;
display: none;
}
.cs-popup h3 {
color: #ffffff;
margin-bottom: 10px;
}
.cs-popup p {
color: #ffffff;
margin-bottom: 15px;
}
.cs-popup .cs-form-field-group.cs-form-field-white-input {
margin-bottom: 10px;
}
.cs-popup .button-cs-outer-wrapper {
min-width: 170px;
}
.cs-popup .icon-line-cross {
position: absolute;
top: 40px;
right: 40px;
color: #ffffff;
cursor: pointer;
}
.cs-popup .cs-icon-wrapper {
display: none;
margin-bottom: 30px;
margin-top: 40px;
}
@media (max-width: 575px) {
.cs-popup {
padding: 80px 40px 60px;
right: 0;
bottom: -520px;
z-index: 11;
height: auto;
width: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.cs-button {
width: 100%;
}
#popupInput1,
#popupInput1 input {
width: 100%;
}
#popupInput1 {
margin-bottom: 15px;
}
#popupInput2 {
margin-bottom: 30px;
}
}
/* Footer
============================================= */
#footer.dark {
background: #4c515b;
border-top: none;
padding: 47px 0;
}
.cs-company #footer.dark {
border-top: 5px solid #0077b6;
}
#footer.dark .row.cs-main-row {
margin-bottom: 15px;
}
#footer.dark h6 {
font-size: 14px;
line-height: 18px;
color: #00a7dd;
margin-bottom: 10px;
}
#footer.dark .cs-body-2,
#footer.dark .cs-body-2 a.cs-link-3 {
color: #96999e;
font-family: Capitolium2;
font-style: italic;
letter-spacing: 0.1px;
text-align: left;
}
.cs-company #footer.dark .cs-body-2,
#footer.dark .cs-body-2 a.cs-link-3 {
color: #f5f5f5;
}
@media (max-width: 991px) {
#footer.dark .cs-body-2 a.cs-link-3 {
color: #00a7dd;
}
#footer.dark .cs-body-2 a[href^="tel"],
#footer.dark .cs-body-2 a[href^="tel"]:hover,
#footer.dark .cs-body-2 a[href^="tel"]:active {
color: #00a7dd;
}
}
#footer.dark .cs-body-2 a.cs-link-3:hover {
color: #00a7dd;
}
#footer.dark .kontakt .cs-body-2 {
display: inline-block;
}
#footer.dark .kontakt .cs-form-field-group {
width: 100%;
}
#footer.dark .kontakt input {
width: 100%;
display: block;
margin-top: 8px;
height: 35px;
}
#footer.dark .cs-wrapper {
padding: 0px 16px;
height: 100%;
}
#footer.dark .cs-link-wrapper {
margin-top: 13px;
}
#footer.dark a h6:hover {
text-decoration: underline;
}
#footer.dark .cs-footer-links .col-lg-4 {
border-left: 1px solid #eaeaeb;
height: 100%;
}
.cs-company #footer.dark .cs-footer-links .col-lg-6 {
border-left: 1px solid #eaeaeb;
height: 100%;
}
.cs-company #footer.dark .cs-footer-products-logo {
display: inline-block;
vertical-align: top;
margin-right: 20px;
}
#footer.dark .cs-footer-address {
margin-bottom: 30px;
}
#footer.dark .cs-form-wrapper {
height: 107px;
}
#footer.dark .cs-form-wrapper h6 {
/* font-family: Capitolium2;
font-weight: bold;
margin-bottom: 0px; */
opacity: 0;
color: #ffffff;
/* font-size: 20px;
line-height: 26px; */
}
#footer.dark .cs-icon-wrapper {
display: none;
margin-bottom: 10px;
}
#footer.dark .cs-form-field-group .cs-link-2 {
font-weight: normal;
font-size: 14px;
letter-spacing: 0.2px;
line-height: 22px;
position: absolute;
right: 30px;
bottom: -46px;
z-index: 5;
}
#footer.dark
.cs-form-field-group
input[type="text"]:placeholder-shown
~ .cs-link-2,
#footer.dark
.cs-form-field-group
input[type="email"]:placeholder-shown
~ .cs-link-2 {
pointer-events: none;
opacity: 0.5;
}
#footer.dark .row.cs-bottom-row .cs-link-3 {
margin-left: 15px;
}
.cs-logo-animate-c1 {
opacity: 1;
transform: translateX(0px);
height: 19px;
/* transform: translateX(6.81px); */
}
/* Custom Keyframe */
@keyframes cslogoanimatec1gone {
0% {
opacity: 1;
transform: translateX(0px);
}
25% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateX(6.81px);
}
}
@keyframes cslogoanimatec1 {
0% {
opacity: 0;
transform: translateX(6.81px);
}
10% {
opacity: 0;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
transform: translateX(6.81px);
}
75% {
transform: translateX(0px);
}
100% {
opacity: 1;
transform: translateX(0px);
}
}
.cs-logo-animate-c2 {
opacity: 1;
transform: translateX(0px);
height: 19px;
/* transform: translateX(-6.81px); */
}
@keyframes cslogoanimatec2gone {
0% {
opacity: 1;
transform: translateX(0px);
}
25% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateX(-6.81px);
}
}
@keyframes cslogoanimatec2 {
0% {
opacity: 0;
transform: translateX(-6.81px);
}
10% {
opacity: 0;
}
25% {
opacity: 0;
}
50% {
opacity: 1;
height: 100px;
transform: translateX(-6.81px);
}
75% {
transform: translateX(0px);
height: 100px;
}
100% {
opacity: 1;
transform: translateX(0px);
height: 100px;
}
}
.cs-logo-animate-letters {
opacity: 1;
height: 19px;
}
@keyframes cslogoanimateletgone {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes cslogoanimateletters {
0% {
opacity: 0;
}
75% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media (max-width: 991px) {
#footer.dark {
padding: 60px 0;
}
#footer.dark .kontakt .cs-wrapper {
margin-bottom: 103px !important;
}
#footer.dark .cs-form-field-group .cs-link-2 {
position: relative;
bottom: initial;
right: initial;
display: inline-block;
text-align: right;
margin-top: 15px;
}
#footer.dark .cs-main-row .cs-wrapper {
padding: 0px 0px;
margin-bottom: 50px;
height: auto;
}
#footer.dark .cs-footer-links .col-lg-4 {
border-left: none;
height: auto;
}
.cs-company #footer.dark .cs-footer-links .col-lg-6 {
border-left: none;
height: auto;
}
}
/* New Custom CS */
#cs-hover-caption {
background: linear-gradient(
-135deg,
rgba(24, 179, 230, 0.8) 0%,
rgba(0, 82, 127, 0.8) 100%
)
rgba(255, 255, 255, 0.2);
width: 100vw;
height: 100%;
left: 0px;
position: absolute;
/* opacity: 0.5 !important; */
z-index: 18;
}
.cs-chip-checkmark-gute {
display: inline-block;
padding: 3px 16px 5px;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
border-radius: 14.5px;
background-color: rgb(0, 119, 182);
color: rgb(255, 255, 255);
font-family: Roboto;
font-size: 14px;
font-weight: normal;
line-height: 22px;
letter-spacing: 0.2px;
height: 28px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#slider-caption-alt {
top: 150px !important;
}
.cs-module-alt-left-1 {
padding-top: 70px;
/* padding-bottom: 60px; */
}
.cs-module-alt-left-1 p {
color: rgb(255, 255, 255);
text-align: left;
font-family: Capitolium2;
font-size: 22px;
font-weight: bold;
line-height: 32px !important;
}
.cs-module-alt-right-1 {
margin-top: 45px;
padding: 10px;
border: 2px solid;
border-image-slice: 1;
border-image-source: linear-gradient(-135deg, #0e75c4 0%, #00a7dd 100%);
}
.cs-module-alt-right-1 p {
color: white;
font-family: Roboto;
font-size: 14px;
font-weight: 500;
}
/* Custom Animation Navbar */
.cs-cont {
width: 100%;
height: 100vh;
background: rgb(59, 66, 78);
position: absolute;
z-index: 95;
opacity: 0;
overflow: hidden;
scrollbar-width: none;
}
.cs-cont::-webkit-scrollbar {
display: none;
}
@keyframes csheaderanimate {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes csheaderanimatealt {
0% {
opacity: 0;
}
3% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes csheaderanimatereverse {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Video Slider */
.slider-video {
position: absolute;
z-index: 15;
width: 100vw;
}
.default-video {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
background-color: #2a2e34;
}