/**
Theme Name: WebRitter Child Theme
Author: WebRitter
Author URI: https://webritter.ch/
Description: Erstellen Sie mit WebRitter Ihre einzigartige Webseite!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webritter-child
Template: astra
*/


/* SASS and Global Stuff */


:root {
    --secondary-color: #003663;
    --heading-color: #333333;
    --font-color: #333333;
    --bg-color: #ffffff;
    --faded-color: #f5f5f5;
    --faded-color-dark: #dddddd;
    --opacity: 0;
}


[data-theme="dark"] {
    --secondary-color: #ffffff;
    --heading-color: #e2e2e2;
    --font-color: #e2e2e2;
    --bg-color: rgb(179, 189, 209);
    --faded-color: #151a1e;
    --faded-color-dark: #131518;
    --opacity: .9;

}


html {
  scrollbar-color: var(--faded-color) var(--bg-color);
}


#makeStickyWorkAgain { position: -webkit-sticky; position: sticky; top: 0px; }


body {
  color: var(--font-color);
  font-family: "Titillium Web", "Roboto", sans-serif;
  overflow-x: hidden;
  position: relative;
  word-wrap: break-word;
  word-break: break-word;
}


img {
  max-width: 100%;
  height: auto;
}


a {
  color: #c0272c;
  text-decoration: none;
  outline: none;
}


a:focus {
  outline: 1px solid #c0272c !important;
}


.btn--red:focus {
  text-shadow: 1px 1px 1px black;
  outline: 1px solid var(--secondary-color);
}


p, ul, ol {
  margin: 0 0 1.65em 0;
}


ul ul, ol ul {
  margin: 0;
}


p, li {
  list-style-position: inside;
}


.mainColor {
  color:#c0272c;
}


.borderLeft {
  border-left:5px solid #c0272c;
}


.pl5 {
  padding-left: 10px;
}


.container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  word-wrap: break-word;
  word-break: break-word;
}


@media all and (min-width: 767px) {


.container {
    max-width: 768px
}
  }


@media all and (min-width: 920px) {


.container {
    max-width: 920px
}
  }


.container-fluid {
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 2rem;
}


/* BEM Blocks */


/* Customize Login Screen */


body.login .button-primary{
  color: #c0272c;
  background-color: var(--bg-color);
  border-color: rgb(166, 38, 42);
  text-shadow: unset;
  border-radius: 0;
  box-shadow: none;
}


.login form .input, .login input[type="password"], .login input[type="text"] {
  border-radius: 0;
}


body.login p.forgetmenot #rememberme {
    border:1px solid #ddd;
    background: var(--bg-color);
    box-shadow: none;
    border-radius: 0;
  }


body.login .button-primary:hover,
body.login .button-primary:active,
body.login .button-primary:focus {
  background-color: #c0272c;
  color: var(--bg-color);
  border-color: rgb(153, 38, 42);
  box-shadow: 0 1px 0 rgb(128, 38, 41);
}


body.login p.message {
    border-color: #c0272c;
  }


body.login form {
    border: 0px solid #c0272c;
  }


body.login form #rememberme::before {
      color: #c0272c;
    }


body.login form input[type="checkbox"]:focus {
      border-color:#c0272c;
      box-shadow: 0 1px 0 rgb(140, 38, 42);
    }


body.login #nav {
    display: none;
    visibility: hidden;
  }


.login h1 a {
  color: #c0272c;
  background: url(./images/webritter-logox126.png);
  background-size: 84px;
  background-position: center top;
  background-repeat: no-repeat;
  color: #444;
  height: 84px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  margin: 0 auto 25px;
  padding: 0;
  text-decoration: none;
  width: 84px;
  text-indent: -9999px;
  outline: 0;
  overflow: hidden;
  display: block;
}


.worldMap {
    min-width: 100%;
    min-height: 180px;
}


@media all and (min-width: 767px) {


.worldMap {
        min-height: 300px
}
  }


.worldMap > path:not(.lines) {
        fill: url(#linearGradient) #000;
        stroke: #a5a5a5;
        stroke-width: .25;
    }


.worldMap > path.lines {
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: load-lines 5s linear alternate-reverse infinite;
      
      
    }


.worldMap > path:hover:not(.lines), .worldMap path.schweiz {
        fill: #c0272c;
    }


@keyframes load-lines {
    from {
      stroke-dashoffset: 0;
    }
    to {
      stroke-dashoffset: 1000;
    }
  }


#skip a {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}


#skip a:focus
    {
    z-index: 999;
    position:static;
    width:auto;
    height:auto;
    }


#masthead {
 	top: 20px;
	margin-bottom:20px
}

#masthead .site-logo-img .astra-logo-svg{
    width: auto;
}


.link-list {
  list-style-type:none;
}


.link-list li {
    border-bottom: .5px solid var(--faded-color-dark);
  }


.search-overlay .link-list li {
      font-size: 1.3rem;
    }


.link-list li:last-child {
    border-bottom: none;
  }


.link-list a {
    display: block;
    font-size: 1.3rem;
    padding: 1rem 0;
    color: var(--heading-color);
  }


.spinner-loader {
  margin-top: 45px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 0.25rem solid rgba(0, 0, 0, 0.2);
  border-top-color: var(--heading-color);
  animation: spin 1s infinite linear;
}


@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* Make Top WP Admin Bar Fixed on Mobile */


@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed;
  }
}


/* Seach Form */


.search-form {
  background-color: #DEDEDE;
  padding: 20px;
  text-align: center;
}


.search-form label {
  display: block;
}


.search-form-row {
  display: flex;
}


.search-form .s {
  min-width: 20px;
  flex-basis: auto;
  flex-grow: 1;
  border: none;
  padding: 10px;
}


@media all and (min-width: 530px) {


.search-form .s {
    font-size: 1.4rem
}
  }


.search-submit {
  color: #FFF;
  border: none;
  border-radius: 4px;
  outline: none;
  background-color: #c0272c;
  padding: 0 20px;
  margin-left: 10px;
}


.note-limit-message {
  visibility: hidden;
  opacity: 0;
  transition: all .3s ease-out;
  color: #c32929;
  font-weight: bold;
}


.note-limit-message.active {
  visibility: visible;
  opacity: 1;
}


.chess {
  min-width: 100%;
  min-height: 200px;
}


@media all and (min-width: 767px) {


.chess {
     min-height: 250px
}
  }


.chess > path:last-child{
    fill:var(--heading-color);
  }


.orderIcons {
  display: flex;
  width: 100%;
}


.orderIcons .orderConfig, .orderIcons .orderContact {
    width: 33%;
    text-align: center;
    display: block;
    height: auto;
    font-family: inherit;
    border: 1px solid var(--faded-color-dark);
    padding: 1rem;
    margin: 0px auto;
    background: var(--bg-color);
    box-shadow: 1px 5px 25px var(--faded-color);
    font-size: 1rem;
    color: var(--font-color);
    cursor: pointer;
  }


.orderIcons .orderConfig.fade, .orderIcons .orderContact.fade {
      color: var(--faded-color-dark);
    }


.orderIcons .orderConfig.fade:hover, .orderIcons .orderContact.fade:hover {
        color: var(--bg-color);
      }


.orderIcons .orderConfig:hover, .orderIcons .orderContact:hover {
      color: var(--bg-color);
      background: #c0272c;
    }


@media all and (min-width: 530px) {


.orderIcons .orderConfig, .orderIcons .orderContact {
      font-size: 1.2rem;
      padding: 2rem 1rem
  }
  }


@media all and (min-width: 920px) {


.orderIcons .orderConfig, .orderIcons .orderContact {

      font-size: 1.5rem
  }
  }


.orderIcons .orderConfig::before, .orderIcons .orderContact::before {
    display: block;
    font-size: 3rem;
    font-family: dashicons;
  }


@media all and (min-width: 530px) {


.orderIcons .orderConfig::before, .orderIcons .orderContact::before {
      font-size: 4rem
  }
  }


@media all and (min-width: 920px) {


.orderIcons .orderConfig::before, .orderIcons .orderContact::before {
      font-size: 5rem
  }
  }


.tags {
  display: inline-block;
  padding: 5px 10px;
  background: var(--faded-color);
  border-left: 5px solid #c0272c;
  color: var(--font-color);
  text-transform: capitalize;
  margin: 5px 0;
  font-size: .8rem;
}


.tags:not(:last-child){
    margin-right: 1rem;
  }


.tags:hover {
    background: #c0272c;
    color: #fff;
  }


.tagTitle {
  font-weight: bold;
  display: block;
  margin-bottom: 1rem;
  margin-top: 1rem;
}


.blink{
  text-decoration: blink;
  display: inline-block;
  animation: blinkingText 1s infinite
}


@keyframes blinkingText{
  0%{     color: #c0272c;   }
  49%{    color: transparent; }
  50%{    color: transparent; }
  99%{    color:transparent;  }
  100%{   color: #c0272c;   }
}


.search-overlay {
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 110;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-color);
  visibility: hidden;
  opacity: 0;
  transform: scale(1.09);
  transition: opacity .3s, transform .3s, visibility .3s;
  box-sizing: border-box;
}


.search-overlay p {
    padding-top: 15px;
  }


body.admin-bar .search-overlay {
    top: 32px;
  }


.search-overlay__top {
    background-color: var(--faded-color);
  }


.search-overlay .header-search {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }


.search-overlay .search {
    font-size: 1.3rem;
    padding: 10px;
    color: var(--font-color);
  }


@media all and (min-width: 530px) {


.search-overlay .search {
      font-size: 1.8rem
  }
  }


@media all and (min-width: 920px) {


.search-overlay .search {
      font-size: 2.5rem
  }
  }


.search-overlay .close {
    position: relative;
    font-size: 1.3rem;
    padding: 10px;
    cursor: pointer;
    color: var(--font-color);
  }


@media all and (min-width: 530px) {


.search-overlay .close {
      font-size: 1.8rem
  }
  }


@media all and (min-width: 920px) {


.search-overlay .close {
      font-size: 2.5rem
  }
  }


.search-overlay .close:hover {
    opacity: 1;
  }


.search-overlay--active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }


.search-overlay__section-title {
    margin: 1rem 0 1px 0;
    font-weight: 400;
    color: #c0272c;
    font-size: 2rem;
    padding: 15px 0;
    border-bottom: 1px solid var(--faded-color-dark);
  }


.search-overlay .one-half {
    padding-bottom: 0;
  }


input[type="text"].search-term {
  width: 80%;
  box-sizing: border-box;
  border: none;
  padding: 15px 0;
  margin: 0;
  background-color: transparent;
  font-size: 1rem;
  font-weight: normal;
  outline: none;
  color: #c0272c;

}


@media all and (min-width: 530px) {


input[type="text"].search-term {
    width: 85%;
    font-size: 1.5rem

}
  }


@media all and (min-width: 920px) {


input[type="text"].search-term {
    width: 90%;
    font-size: 3rem

}
  }


.body-no-scroll {
  overflow: hidden;
}


/* HOMEPAGE SERVICES START*/


.services {
	display: flex;
	flex-wrap: wrap;
}


.services .grid {
		position: relative;
		width:100%;
	}


@media all and (min-width: 530px) {


.services .grid {
			width: 50%
	}
  }


@media all and (min-width: 920px) {


.services .grid {
			width: 33%
	}
  }


.services .grid .clonexsvg {
			display: flex;
			background-color: var(--bg-color);
			text-align: center;
			position: relative;
			margin: 20px;
			height: 200px;
			box-shadow: 1px 5px 25px var(--faded-color);
			border-radius: 10px;
			}


.services .grid .clonexsvg span {
				position: absolute;
				bottom: -9px;
				left: 47%;
				color: var(--bg-color);
				background-color: #c0272c;
				width: 30px;
				height: 30px;
				text-align: center;
				border-radius: 50%;
				}


.services .grid .clonexsvg span > i {
						font-size: 1.5rem;
						text-align: center;
						line-height: 1.75rem;
						padding-left: 2px;
					}


@media all and (min-width: 530px) {


.services .grid .clonexsvg span > i {
							line-height: 1.6rem
					}
  }


.services .grid .clonexsvg > a {flex:1}


.services .grid .clonexsvg > a > svg {
					width: 70px;
					margin: 0;
					stroke: var(--heading-color);
					padding-top: 40px;
					padding-bottom: 20px
				}


.services .grid .clonexsvg .hovsvg {
					fill: none;
					stroke-width: 6;
					stroke-miterlimit: 10;
					stroke-dasharray: 1800;
				}


.services .grid .clonexsvg:hover > a > svg .hovsvg, .services .grid .clonexsvg a:focus > svg .hovsvg {
					animation: svg-loaded 4s cubic-bezier(0, .23, 1, .1);
					stroke: #c0272c;
					stroke-width: 8
				}


.services .grid .clonexsvg:hover {
					box-shadow: 1px 5px 25px var(--faded-color-dark);
					z-index: 2;
				}


.services .grid .top-line-fill {
			position: absolute;
			top: 0;
			left: 44%;
			background-color: #c0272c;
			width: 12%;
			height: 3px
		}


.services .grid .clonexanimate {
			font-weight: 600;
			font-size: 22px;
			padding-bottom: 35px;
			margin: 0;
			color: var(--heading-color);
		}


.services .grid .clonexsvg a:hover .clonexanimate {
			-webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, var(--heading-color) 50%, rgba(0, 0, 0, .6) 70%);
			-webkit-mask-size: 200%;
			animation: shine 3s infinite;
			color: #c0272c;
			transition: .5s
		}


@keyframes svg-loaded {
5%{stroke-dasharray:200;stroke:#c0272c}
10%{stroke-dasharray:300;stroke:#c0272c}
15%{stroke-dasharray:350;stroke:#c0272c}
20%{stroke-dasharray:400;stroke:#c0272c}
25%{stroke-dasharray:450;stroke:#c0272c}
30%{stroke-dasharray:500;stroke:#c0272c}
35%{stroke-dasharray:650;stroke:#c0272c}
40%{stroke-dasharray:700;stroke:#c0272c}
45%{stroke-dasharray:800;stroke:#c0272c}
50%{stroke-dasharray:1000;stroke:#c0272c}
55%{stroke-dasharray:1100;stroke:#c0272c}
60%{stroke-dasharray:1200;stroke:#c0272c}
65%{stroke-dasharray:1400;stroke:#c0272c}
70%{stroke-dasharray:1600;stroke:#c0272c}
75%{stroke-dasharray:1800;stroke:#c0272c}
80%{stroke-dasharray:2000;stroke:#c0272c}
85%{stroke-dasharray:2200;stroke:#c0272c}
90%{stroke-dasharray:2400;stroke:#c0272c}
95%{stroke-dasharray:2600;stroke:#c0272c}
100%{stroke-dasharray:2800;stroke:#c0272c}
}


/* HOMEPAGE SERVICES END*/


#customizer {
    position: fixed;
    z-index:999;
    top: 30%;
    right: -115px;
    box-shadow:0 10px 20px rgba(0, 0, 0, 0.08);
}


#customizer > ul {
            margin:0px;
    }


#customizer > ul > li {
            list-style-type:none;
            position:relative;
            right:0;
            top:0;
            transition:.5s;
        }


#customizer > ul > li:hover {
                right:115px;
            }


#customizer > ul > li:hover > a#lang {
                    text-align: center
                }


#customizer > ul > li > a {
                display:block;
                padding:12px 15px;
                background:#fff;
                font-size:18px;
            }


#customizer > ul > li > a > i {
                    margin-right:10px;
                    font-size:20px;
                }


#customizer > ul > li > a:hover {
                    background:#c0272c;
                    color:#fff;
                }


#customizer > ul > li > a#lang {
                    display: inline-block;
                    font-size: 18px;
                    padding: 0;
                    width: 50%;
                }


#customizer > ul > li > a#lang > img {
                        padding: 20px 15px
                    }


@media (max-width:768px){
    #customizer {
        bottom: 0;
        top: auto;
        width: 100%;
        right: 0;
        left: 0;
        box-shadow:0px -10px 20px rgba(0, 0, 0, 0.08);
    }
       
        #customizer > ul {
        display: flex;
        align-items: stretch; /* Default */
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
        }

            #customizer > ul > li {
            float:left;
            display: block;
            flex: 0 1 auto; /* Default */
            min-width:25%;
            }
                #customizer > ul > li:hover {
                    right: 0px;
                }
                #customizer > ul > li > a {
                text-align:center;
                padding:12px 10px 8px 10px;
                }
                    #customizer > ul > li > a > span{
                    display:none;
                    }
                    #customizer > ul > li > a > i {
                    margin:0;
                    }
                    #customizer > ul > li > a:hover {
                    right:0px;
                    }
                    #customizer > ul > li > a#lang {
                        height: 100%;
                    }
                        #customizer > ul > li > a#lang > img {
                            padding: 15px 0 0;
                        }
}


#customizer {
	position: fixed;
	z-index: 999;
	top: 30%;
	right: -115px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
	transition: .5s
}


#customizer>ul {
	margin: 0
}


#customizer>ul>li {
	list-style-type: none;
	position: relative;
	right: 0;
	top: 0;
	transition: .5s
}


#customizer>ul>li:hover,
#customizer>ul>li:focus-within {
	right: 115px
}


#customizer>ul>li:hover>a#lang,
#customizer>ul>li:focus-within>a#lang {
	text-align: center
}


#customizer>ul>li>a {
	display: block;
	padding: 12px 15px;
	background: #fff;
	font-size: 18px
}


#customizer>ul>li>a>i {
	margin-right: 10px;
	font-size: 20px
}


#customizer>ul>li>a:hover,
#customizer>ul>li>a:focus-within {
	background: #c0272c;
	color: #fff
}


#customizer>ul>li>a#lang {
	display: inline-block;
	font-size: 18px;
	padding: 0;
	width: 50%
}


#customizer>ul>li>a#lang>img {
	padding: 20px 15px
}


@media (max-width:768px) {
	#customizer {
		bottom: 0;
		top: auto;
		width: 100%;
		right: 0;
		left: 0;
		box-shadow: 0 -10px 20px rgba(0, 0, 0, 0.08)
	}
	#customizer>ul {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		width: 100%;
		margin: 0;
		padding: 0
	}
	#customizer>ul>li {
		float: left;
		display: block;
		flex: 0 1 auto;
		min-width: 25%
	}
	#customizer>ul>li:hover,
	#customizer>ul>li:focus-within {
		right: 0
	}
	#customizer>ul>li>a {
		text-align: center;
		padding: 12px 10px 8px
	}
	#customizer>ul>li>a>span {
		display: none
	}
	#customizer>ul>li>a>i {
		margin: 0
	}
	#customizer>ul>li>a:hover {
		right: 0
	}
	#customizer>ul>li>a#lang {
		height: 100%
	}
	#customizer>ul>li>a#lang>img {
		padding: 15px 0 0
	}
}


.progress {
	position: relative;
	display: block;
	height: 550px;
	width: 100%;
}


@media all and (min-width: 530px) {


.progress {
    height: 450px
}
  }


.progress * {
		box-sizing: border-box;
  }


.progress .progress_inner #step-5:checked + div + div + div + div > .box_base, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_base, .progress .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_base, .progress .progress_inner #step-3:checked + input + input + div + div + div + div > .box_base, .progress .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_base {
		top: 50%;
		left: 0px;
    opacity: 1;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_item, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_item, .progress .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item, .progress .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, .progress .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_item {
		top: -30px;
		left: 0px;
		opacity: 0;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_lid, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_lid, .progress .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_lid {
		top: -20px;
		left: 0px;
		opacity: 0;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_item, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_item, .progress .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item {
			top: -10px;
			left: 0px;
			opacity: 1;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_item, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_item, .progress .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item {
		top: 10px;
		left: 0px;
		opacity: 1;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_lid, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_lid, .progress .progress_inner #step-3:checked + input + input + div + div + div + div > .box_lid {
		top: -1px;
		left: 0px;
		opacity: 1;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon, .progress .progress_inner #step-3:checked + input + input + div + div + div + div > .box_ribbon {
		top: 70%;
		left: 0px;
		opacity: 0;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_bow, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_bow, .progress .progress_inner #step-3:checked + input + input + div + div + div + div > .box_bow {
		top: 0px;
		left: 0px;
		opacity: 0;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon {
		top: 50%;
		left: 0px;
		opacity: 1;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_bow, .progress .progress_inner #step-4:checked + input + div + div + div + div > .box_bow {
			top: -10px;
			left: 0px;
			opacity: 1;
		}


.progress .progress_inner #step-5:checked + div + div + div + div > .box_tag, .progress .progress_inner #step-5:checked + div + div + div + div > .box_string {
				top: 10px;
				left: 20px;
				opacity: 1;
			}


.progress .progress_inner__step:before, .progress .progress_inner {
		position: absolute;
		top: 230px;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		margin: auto;
    display: inline-block;
	}


@media all and (min-width: 530px) {


.progress .progress_inner__step:before, .progress .progress_inner {
      top: 200px
	}
  }


.progress .progress_inner__status .box_base, .progress .progress_inner__status .box_item, .progress .progress_inner__status .box_ribbon, .progress .progress_inner__status .box_bow, .progress .progress_inner__status .box_bow__left, .progress .progress_inner__status .box_bow__right, .progress .progress_inner__status .box_tag, .progress .progress_inner__status .box_string {
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		margin: auto;
		}


.progress .progress_inner__bar, .progress .progress_inner__bar--set {
		height: 6px;
		left: 10%;
		background: repeating-linear-gradient(45deg, #c0272c, #c0272c 4px, rgb(140, 38, 42) 4px, rgb(140, 38, 42) 10px);
		transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
		border-radius: 6px;
		width: 0;
		position: relative;
		z-index: -1;
	}


.progress .progress_inner__step {

		width: 20%;
		font-size: 14px;
		padding: 0 10px;
		transition: all .4s;
		float: left;
		text-align: center;
		position: relative;
	}


.progress .progress_inner__step:before {
      width: 30px;
      height: 30px;
      color: #c0272c;
      background: var(--bg-color);
      line-height: 1.9;
      border: 3px solid var(--faded-color);
      font-size: 12px;
      top: 3px;
      border-radius: 100%;
      transition: all .4s;
      cursor: pointer;
      pointer-events: none;
		}


.progress .progress_inner__step label {
      padding-top: 50px;
      top: -20px;
      display: block;
      position: relative;
      cursor: pointer;
		}


.progress .progress_inner__step:hover {
		  color: #c0272c;
		}


.progress .progress_inner__step:hover:before {
        color: white;
        background: #c0272c;
      }


.progress .progress_inner {
		height: 200px;
		width: 90%;
		max-width: 700px;
	}


@media all and (min-width: 920px) {


.progress .progress_inner {
      width: 700px
	}
  }


.progress .progress_inner #step-5:checked + div {
		width: 80%;
		}


.progress .progress_inner #step-5:checked + div + div + div > .tab:nth-of-type(5) {
          opacity: 1;
          top: 0;
        }


.progress .progress_inner #step-5:checked + div + div + div + div {
          right: 10%;
        }


.progress .progress_inner #step-4:checked + input + div {
		  width: 60%;
		}


.progress .progress_inner #step-4:checked + input + div + div + div > .tab:nth-of-type(4) {
          opacity: 1;
          top: 0;
        }


.progress .progress_inner #step-4:checked + input + div + div + div + div {
          right: 30%;
        }


.progress .progress_inner #step-3:checked + input + input + div {
		  width: 40%;
		}


.progress .progress_inner #step-3:checked + input + input + div + div + div > .tab:nth-of-type(3) {
          opacity: 1;
          top: 0;
        }


.progress .progress_inner #step-3:checked + input + input + div + div + div + div {
          right: 50%;
        }


.progress .progress_inner #step-2:checked + input + input + input + div {
      width: 20%;
		}


.progress .progress_inner #step-2:checked + input + input + input + div + div + div > .tab:nth-of-type(2) {
          opacity: 1;
          top: 0;
        }


.progress .progress_inner #step-2:checked + input + input + input + div + div + div + div {
          right: 70%;
        }


.progress .progress_inner #step-1:checked + input + input + input + input + div {
		width: 0%;
		}


.progress .progress_inner #step-1:checked + input + input + input + input + div + div + div > .tab:nth-of-type(1) {
			opacity: 1;
			top: 0;
			}


.progress .progress_inner #step-1:checked + input + input + input + input + div + div + div + div {
			right: 90%;
			}


.progress .progress_inner__step:nth-of-type(1):before {
		content: "1";
		}


.progress .progress_inner__step:nth-of-type(2):before {
		content: "2";
		}


.progress .progress_inner__step:nth-of-type(3):before {
		content: "3";
		}


.progress .progress_inner__step:nth-of-type(4):before {
		content: "4";
		}


.progress .progress_inner__step:nth-of-type(5):before {
		content: "5";
		}


.progress .progress_inner__bar--set {
		width: 80%;
		top: -6px;
		background: #c0272c;
		position: relative;
		z-index: -2;
	}


.progress .progress_inner__tabs .tab {
		opacity: 0;
		position: absolute;
		top: 40px;
		text-align: center;
		margin-top: 80px;
		box-shadow: 0px 2px 1px rgb(232, 38, 45);
		padding: 30px;
		background: var(--bg-color);
		border-radius: 10px;
		transition: all .2s;
	}


.progress .progress_inner__tabs .tab h3 {
		margin-top: 0;
		}


.progress .progress_inner__tabs .tab p {
      font-weight: 400;
      opacity: 0.8;
      margin-bottom: 0;
      font-size: 1rem;
		}


@media all and (min-width: 530px) {


.progress .progress_inner__tabs .tab p {
        font-size: inherit
		}
  }


.progress .progress_inner__status {
		width: 40px;
		height: 40px;
		top: -80px;
		transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
		transform: translateX(50%);
		position: absolute;
	}


.progress .progress_inner__status div {
		opacity: 0;
		transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
		transition-delay: 300ms;
		position: absolute;
		}


.progress .progress_inner__status .box_base {
      background: repeating-linear-gradient(45deg, #986c5d, #986c5d 2px, #775144 2px, #775144 4px);
      width: 36px;
      height: 40px;
      z-index: 1;
      border-radius: 1px;
		}


.progress .progress_inner__status .box_base::after {
        display: inline-block;
        font-size: .6rem;
        text-transform: uppercase;
        padding-left: 4.5px;
        padding-top: 10px;
        color:var(--bg-color);
        content: "www";
      }


.progress .progress_inner__status .box_lid {
		width: 40px;
		height: 13.3333333333px;
		background: #775144;
		z-index: 2;
		border-radius: 1px;
		top: 0;
		}


.progress .progress_inner__status .box_item {
		width: 20px;
		height: 20px;
		background: #c0272c;
		z-index: 0;
		border-radius: 4px;
		transform: rotate(45deg);
		}


.progress .progress_inner__status .box_ribbon {
		width: 10px;
		height: 42px;
		background: #c0272c;
		z-index: 4;
		border-radius: 1px;
		}


.progress .progress_inner__status .box_bow__left, .progress .progress_inner__status .box_bow__right {
		width: 6px;
		height: 10px;
		background: #be0c21;
		position: absolute;
		z-index: 3;
		opacity: 1;
		border-radius: 1px;
		}


.progress .progress_inner__status .box_bow {
		top: -6px;
		z-index: 1;
		transition-delay: 500ms;
		}


.progress .progress_inner__status .box_bow__left {
		left: 6px;
		transform: rotate(45deg);
		}


.progress .progress_inner__status .box_bow__right {
		left: -4px;
		transform: rotate(-45deg);
		}


.progress .progress_inner__status .box_tag {
		width: 20px;
		height: 10px;
		background: var(--secondary-color);
		z-index: 4;
		transform: rotate(-10deg) translateX(-40px) translateY(0px);
		border-radius: 2px;
		transition-delay: 500ms;
		}


.progress .progress_inner__status .box_string {
		width: 17px;
		height: 2px;
		background: #343434;
		z-index: 4;
		transform: rotate(-39deg) translateX(-22px) translateY(-12px);
		}


.progress .progress_inner input[type="radio"] {
		display: none;
	}


#primary {
    margin:0;
    padding: 0;
}


.homeBg {
	background-color: var(--bg-color);
	background: url(./images/home_bg_transparent.gif);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	width: 100%;
	height: 100%;
	position: relative;
	}


.homeBg::before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--bg-color);
    opacity: var(--opacity, 1);
}


.laptopSlider {
  background: initial;
}


@media all and (min-width: 920px) {


.laptopSlider {
    background-image: url(./images/laptop.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 100%;
    height: 100%
}
  }


.uabb-pricing-table .uabb-pricing-table-column .uabb-pricing-table-price {
  padding: 0px 0;
  letter-spacing: normal;
}


.uabb-adv-accordion-item:nth-child(2n) > .uabb-adv-accordion-button {
  background:  #ffffff;
}


.uabb-adv-accordion-item:nth-child(2n) > .uabb-adv-accordion-button.hover {
    background: #ddd;
  }


#openModal div.uabb-infobox-content {
    width: calc(100% - 120px);
  }


#openModal .uabb-icon{
    border-radius: 62px;
    border: 10px solid rgba(192,39,44,.32);
    background-clip: padding-box;
  }


.width100 .uabb-heading-text {
  display:inline-block;
  width:100%;
  min-width: 100%;
}


.site-branding {
  line-height: 0;
}


.site-branding > .ast-site-identity {
      z-index: 2;
    }


.ast-masthead-custom-menu-items.text-html-custom-menu-item {
  position: absolute;
  right: 42px;
  font-size: 1.3rem;
  top: 4px;
  padding: 0;
  line-height: 1.6;
  z-index: 2;
   
}


@media all and (min-width: 920px) {


.ast-masthead-custom-menu-items.text-html-custom-menu-item {
    position: relative;
    right: 5px;
    top: 0
   
}
  }


.search-trigger {
  position: relative;
  top: 0px;
  margin: 1px;
}


.search-trigger:hover {
    opacity: .65;
  }


@media all and (min-width: 767px) {


.search-trigger {
    top: 6px
}
  }


@media all and (min-width: 920px) {


.search-trigger {
    top: 3px
}
  }


.ast-mobile-menu-buttons .menu-toggle.main-header-menu-toggle {
  position: absolute;
  display: inline-block;
  right: -2px;
  top: -15px;
  padding: 0;
  font-size: 2rem !important;
  line-height: 1;
  height: unset;
  z-index: 2;

}


@media all and (min-width: 767px) {


.ast-mobile-menu-buttons .menu-toggle.main-header-menu-toggle {
    top: -9px

}
  }


.main-header-bar .main-header-bar-navigation.toggle-on > #site-navigation {
  position: fixed;
  height: auto;
  top:0;
  left: 0;
  width: 100%;
  padding-top: 80px;
  background: var(--faded-color);
}


.ast-header-break-point .main-header-bar .main-header-bar-navigation {
  line-height: 2;
}


.ast-header-break-point .main-navigation li {
	
	font-size: 1rem;
}


.ast-header-break-point .main-navigation li li {
		font-size: .9rem;
}


@media all and (min-width: 530px) {
	
	.ast-header-break-point .main-navigation li li {
		font-size: 1.1rem
	}
	.ast-header-break-point .main-navigation li {
		font-size: 1.3rem
	}
}

.ast-header-break-point .main-navigation li a {
		padding-top: 5px 20px;
	}


.ast-header-break-point .main-header-menu {
	background:none;
}


.ast-header-break-point .main-header-menu ul {
		background:none;
	}


footer div.uabb-info-list-content{
  width: inherit !important;
}


.playCircle i.uabb-modal-icon {
  background: #bf272c;
  background-clip: border-box;
  border-radius: 50px;
  text-align: center;
  border: 10px solid rgba(192, 39, 44, 0.322);
  background-clip: padding-box;
  color: white;
  font-size: 3rem;
  padding: 10px 10px 12px 16px;
}


.playCircle i.uabb-modal-icon:hover {
    box-shadow:0px 0px 17px rgba(192, 39, 44, 0.322)
  }


.ast-breadcrumbs .trail-items > li.trail-item span {
  font-size: .7rem;
}

@media all and (min-width: 530px) {

.playCircle i.uabb-modal-icon {
    font-size: 4rem;
    border-radius: 100px;
    border: 12px solid rgba(192, 39, 44, 0.322)
}
.ast-breadcrumbs .trail-items > li.trail-item span {
	font-size: .9rem
}

}

 


#pe_rating{width:100%}


.vision .uabb-infobox:hover{
  transition: all 0.5s ease;
  background-color: var(--secondary-color);
}


.vision .uabb-infobox:hover .uabb-icon i::before, .vision .uabb-infobox:hover .uabb-infobox-title, .vision .uabb-infobox:hover .uabb-infobox-text > p {
    color:var(--bg-color);
}
@media all and (max-width: 530px) {
.tableCompare {
	overflow-x:scroll;
}
.tableCompare .uabb-table {
	width:max-content;
}
}
.beratung-team .fl-callout-content {
	padding:20px;
}

.ast-primary-sticky-header-active .main-header-bar-wrap {
	background:#fff
}

.hoverJump:hover {
  transform: translate3d(0,-.125rem,0);
  transition: all .15s cubic-bezier(0.25,0.1,0.25,.99);
}

.lang-item .menu-link {
  padding: 0px 15px 0px 5px;
}

.wa__btn_popup {
  bottom: 30px;
  cursor: pointer;
  font-family: Arial,Helvetica,sans-serif;
  position: fixed;
  right: 30px;
  z-index: 999999999;
}

.wa__btn_popup .wa__btn_popup_icon::before {
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NzguMTY1IDQ3OC4xNjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3OC4xNjUgNDc4LjE2NSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiPjxwYXRoIGQ9Ik00NzguMTY1IDIzMi45NDZjMCAxMjguNTY3LTEwNS4wNTcgMjMyLjk2Ni0yMzQuNjc5IDIzMi45NjYtNDEuMTAyIDAtNzkuODE0LTEwLjU5OS0xMTMuNDQ1LTI4Ljk2OUwwIDQ3OC4xNjVsNDIuNDM3LTEyNS4wNGMtMjEuNDM4LTM1LjA2NS0zMy43Ny03Ni4yMDctMzMuNzctMTIwLjE1OUM4LjY2NyAxMDQuMzQgMTEzLjc2MyAwIDI0My40ODUgMGMxMjkuNjIzIDAgMjM0LjY4IDEwNC4zNCAyMzQuNjggMjMyLjk0NnpNMjQzLjQ4NSAzNy4wOThjLTEwOC44MDIgMC0xOTcuNDIyIDg3LjgwMy0xOTcuNDIyIDE5NS44NjggMCA0Mi45MTUgMTMuOTg2IDgyLjYwMyAzNy41NzYgMTE0Ljg3OWwtMjQuNTg2IDcyLjU0MiA3NS44NDktMjMuOTY4YzMxLjEyMSAyMC40ODEgNjguNDU3IDMyLjI5NiAxMDguNTgzIDMyLjI5NiAxMDguNzIzIDAgMTk3LjMyMy04Ny44NDMgMTk3LjMyMy0xOTUuOTA4IDAtMTA3Ljg4Ni04OC42LTE5NS43MDktMTk3LjMyMy0xOTUuNzA5ek0zNjEuOTMxIDI4Ni42MmMtMS4zOTUtMi4zMzEtNS4yMi0zLjc0Ni0xMC44OTgtNi44MTQtNS45MTctMi44NDktMzQuMDg5LTE2LjQ5Ny0zOS41MDgtMTguMzctNS4xNi0xLjkxMy04Ljk4Ni0yLjg0OS0xMi44MTEgMi44MjktNC4wMDUgNS42MzgtMTQuOTAzIDE4LjYyOS0xOC4yMyAyMi4zNTQtMy41NDYgMy43ODUtNi44NTQgNC4yNjQtMTIuNTUyIDEuNDM1LTUuNjE4LTIuODA5LTI0LjI2Ny04Ljg2Ni00Ni4yMDMtMjguMzkxLTE3LjA1NS0xNS4wNDItMjguNjctMzMuNzExLTMxLjk5Ny0zOS41MDgtMy40MjctNS43NTgtLjM5OC04LjgyNiAyLjQ3MS0xMS42MzUgMi42OS0yLjU5IDUuNzc4LTYuNzM0IDguNjI3LTEwLjA0MSAyLjk2OS0zLjI4NyAzLjkwNS01LjYzOCA1Ljc5OC05LjQyNCAxLjkxMy0zLjkwNS45MzYtNy4xOTItLjQ3OC0xMC4xNDEtMS40MTUtMi44NDktMTMuMDEtMzAuODgxLTE3Ljc1Mi00Mi4zMzctNC44NDEtMTEuNDE2LTkuNTQzLTkuNTIzLTEyLjg3MS05LjUyMy0zLjQ2NyAwLTcuMjEyLS40NzgtMTEuMTE3LS40NzgtMy43ODUgMC0xMC4wNDEgMS4zOTUtMTUuMzgxIDcuMTkyLTUuMiA1LjY1OC0yMC4xMjMgMTkuNDY1LTIwLjEyMyA0Ny41OTcgMCAyOC4wNTIgMjAuNjAxIDU1LjMwOCAyMy41NSA1OS4wNTMgMi44NjkgMy43ODUgMzkuNzQ3IDYzLjE5NyA5OC4zMDMgODYuMDcgNTguNDc2IDIyLjg3MiA1OC40NzYgMTUuMzIxIDY5LjExNSAxNC4zNjUgMTAuMzgtLjk1NiAzNC4wNjktMTMuODY3IDM4LjgxMS0yNy4wOTYgNC42Ni0xMy40NSA0LjY2LTI0Ljc2NiAzLjI0Ni0yNy4xMzd6IiBmaWxsPSIjRkZGIi8+PC9zdmc+) 50% no-repeat;
    background-size: auto;
  background-size: 30px auto;
  -webkit-background-size: 30px auto;
  -moz-background-size: 30px auto;
  z-index: 1;
}

.wa__btn_popup .wa__btn_popup_icon::after {
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTguNjU5IDYuOTk4IDUtNWExLjE3NyAxLjE3NyAwIDAgMCAwLTEuNjU3IDEuMTc3IDEuMTc3IDAgMCAwLTEuNjU3IDBsLTUgNS01LTVBMS4xNzIgMS4xNzIgMCAwIDAgLjM0NSAxLjk5OGw1IDUtNSA1YTEuMTcyIDEuMTcyIDAgMCAwIDAgMS42NTcgMS4xNzcgMS4xNzcgMCAwIDAgMS42NTcgMGw1LTUgNSA1YTEuMTc3IDEuMTc3IDAgMCAwIDEuNjU3IDAgMS4xNzcgMS4xNzcgMCAwIDAgMC0xLjY1N2wtNS01WiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==) 50% no-repeat;
    background-size: auto;
  background-size: 14px auto;
  -webkit-background-size: 14px auto;
  -moz-background-size: 14px auto;
  opacity: 0;
  -ms-transform: scale(0) rotate(-1turn);
  transform: scale(0) rotate(-1turn);
  -webkit-transform: scale(0) rotate(-1turn);
  -moz-transform: scale(0) rotate(-1turn);
  z-index: 2;
}

.wa__btn_popup .wa__btn_popup_icon {
  background: #2db742;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  box-shadow: 0 6px 8px 2px rgba(0,0,0,.14);
  -webkit-box-shadow: 0 6px 8px 2px rgba(0,0,0,.14);
  -moz-box-shadow: 0 6px 8px 2px rgba(0,0,0,.14);
  height: 56px;
  width: 56px;
}

.wa__btn_popup .wa__btn_popup_icon::after, .wa__btn_popup .wa__btn_popup_icon::before {
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all .4s ease;
  -webkit-transition: all .4s ease;
  -moz-transition: all .4s ease;
  width: 100%;
}