@import "3dParty/bootstrap/css/bootstrap.min.css";
@import "css/global.css";
@import "3dParty/rs-plugin/css/pi.settings.css";
@import "css/typo.css";
@import "css/tooltips.css";
@import "3dParty/colorbox/colorbox.css";
@import "css/boxes.css";
@import "css/shadows.css";
@import "css/portfolio.css";
@import "css/accordion.css";
@import "css/slider.css";
@import "css/counters.css";
@import "css/social.css";
@import "css/boot.css";
@import "css/pricing-tables.css";
@import "3dParty/fontello/css/fontello.css";
@import "css/font.css";
@import "css/flag-icon.min.css";
/*/ @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'); /*/

.dataspace {
    height: 15px;
}

.dataspace_big {
    height: 30px;
}

.dataspace_small {
    height: 8px;
    font-size: 8px;
    font-display: auto;
}

.dataspace_line {
    height: 10px;
    font-size: 10px;
    font-display: auto;
    border-top: 1px solid #D5D5D5;
}

.fixed, .clear {
    clear: both;
}

.footmsg {
    font-family: 'lucida grande', tahoma, sans-serif;
    font-size: 10px;
    font-display: auto;
    color: #2E2E2E;
}

.title {
    font-family: 'lucida grande', tahoma, sans-serif;
    font-size: 18px;
    font-display: auto;
    font-weight: bold;
}

.small {
    font-family: 'lucida grande', tahoma, sans-serif;
    font-size: 10px;
    font-display: auto;
}

.sideblock p {
    margin: 0px;
    padding: 0px;
}

.inputfield {
    padding: 3px;
    border: 1px solid #CCCCCC;
    color: #303641;
    background-color: #F5F5F5;
}

.selectfield {
    padding: 2px;
    border: 1px solid #CCCCCC;
    color: #303641;
    background-color: #F5F5F5;
}

.textfield {
    padding: 3px;
    border: 1px solid #CCCCCC;
    color: #303641;
    background-color: #F5F5F5;
}

.open {
    display: visible;
}

.close {
    display: none;
}

.button_login:link, .button_login:visited {
    border: 1px solid #CCCCCC;
    padding: 2px 7px 3px 7px;
    line-height: 20px;
    font-weight: normal;
    font-display: auto;
    color: #303641;
    text-decoration: none;
    background: #ebebeb;
    -moz-box-shadow: inset 1px 1px 0px 0px #f9f9f9;
    -webkit-box-shadow: inset 1px 1px 0px 0px #f9f9f9;
    box-shadow: inset 1px 1px 0px 0px #f9f9f9;
}

.button_login:hover, .button_login:active {
    text-decoration: none;
    background: #FAEBB8;
}

.button_form:link, .button_form:visited {
    border: 1px solid #CCCCCC;
    padding: 6px 10px 7px 10px;
    line-height: 24px;
    font-weight: normal;
    font-display: auto;
    color: #303641;
    text-decoration: none;
    background: #ebebeb;
    -moz-box-shadow: inset 1px 1px 0px 0px #f9f9f9;
    -webkit-box-shadow: inset 1px 1px 0px 0px #f9f9f9;
    box-shadow: inset 1px 1px 0px 0px #f9f9f9;
}

.button_form:hover, .button_form:active {
    text-decoration: none;
    background: #FAEBB8;
}

#errorbox {
    border: 1px solid #E75754;
    background-color: #FFCDCC;
}

#errorboxin {
    padding: 8px;
    background-color: #FFCDCC;
}

#okbox {
    border: 1px solid #56E459;
    background-color: #CEFFCC;
}

#okboxin {
    padding: 8px;
    background-color: #CEFFCC;
}

.errorbox {
    padding: 8px;
    border: 1px solid #E75754;
    background-color: #FFCDCC;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.okbox {
    padding: 8px;
    border: 1px solid #56E459;
    background-color: #CEFFCC;
    -moz-border-radius: 4px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.impressumtable {
    width: 100%;
    border: 0px;
}

.impressumtable td {
    padding-top: 2px;
    padding-bottom: 2px;
}

.inputtable {
    border: 0px;
}

.inputtable td {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* SHOP */
.shopdetailstable {
    border: 0px;
}

.shopdetailstable td {
    padding-top: 2px;
    padding-bottom: 2px;
}

.shopdetailstable td .selectfield {
    width: 188px;
}

.shopdetailstable td .inputfield {
    width: 180px;
}

.productinfo {
    padding-left: 10px;
}

.productlist {
    padding-left: 10px;
}

.buttoncalc {
    text-align: right;
}

.buttonlist {
    text-align: right;
}

.buttonadd {
    text-align: right;
}

.buttoncheckout {
    text-align: center;
}

.buttonaddress {
    text-align: center;
}

.buttonshipping {
    text-align: center;
}

.buttonpayment {
    text-align: center;
}

.basket {
    width: 100%;
}

.basket td {
    padding: 3px;
}

.baskettop {
    height: 30px;
    background: #0A74A7;
    color: #ffffff;
}

.basketa {
    background: #F5F5F5;
}

.basketb {
    background: #F9F9F9;
}

.steptable {
    width: 100%;
    border: 0px;
}

.steptable td {
    padding-left: 5px;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 15px;
    color: #000000;
}

.stepactive {
    color: #ff3300;
}

.shipping {
    width: 100%;
}

.shipping td {
    padding: 3px;
}

.shippinga {
    background: #F5F5F5;
}

.shippingb {
    background: #F9F9F9;
}

.shippingdiv {
    width: 100%;
    border-bottom: 1px solid #D5D5D5;
}

.payment {
    width: 100%;
}

.payment td {
    padding: 3px;
}

.paymenta {
    background: #F5F5F5;
}

.paymentb {
    background: #F9F9F9;
}

.paymentdiv {
    width: 100%;
    border-bottom: 1px solid #D5D5D5;
}

.address {
    width: 100%;
    background: #F5F5F5;
}

.address td {
    padding: 10px;
}

.userpic {
    float: left;
    padding-right: 10px;
}

.userpic img {
    width: 50px;
    height: 50px;
}

.userpic_big {
    float: left;
    padding-right: 10px;
}

.userpic_big img, .userpic_forum {
    width: 75px;
    height: 75px;
    border: 1px solid #cccccc;
    padding: 2px;
    -moz-box-shadow: 0px 3px 4px -3px #333333;
    -webkit-box-shadow: 0px 3px 4px -3px #333333;
    box-shadow: 0px 3px 4px -3px #333333;
}

.show_usercard {
}

.user_hovercard {
    border: 1px solid #83939A;
    background-color: #ffffff;
    width: 300px;
    height: 81px;
    padding: 10px 10px 10px 10px;
}

.user_hovertxt {
    float: left;
    width: 189px;
    word-break: normal;
}

.ui-tooltip, .qtip {
    position: absolute;
    left: -28000px;
    top: -28000px;
    display: none;
    max-width: 280px;
    min-width: 50px;
}

.ui-tooltip-content {
    position: relative;
    overflow: hidden;
    text-align: left;
    word-wrap: break-word;
}

.ui-tooltip-titlebar {
    position: relative;
    min-height: 14px;
    padding: 5px 35px 5px 10px;
    overflow: hidden;
    border-width: 0 0 1px;
    font-weight: bold;
    font-display: auto;
}

.ui-tooltip-titlebar + .ui-tooltip-content {
    border-top-width: 0 !important;
}

.ui-tooltip-titlebar .ui-state-default {
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -9px;
    cursor: pointer;
    outline: medium none;
    border-width: 1px;
    border-style: solid;
}

* html .ui-tooltip-titlebar .ui-state-default {
    top: 16px;
}

/* IE fix */
.ui-tooltip-titlebar .ui-icon, .ui-tooltip-icon .ui-icon {
    display: block;
    text-indent: -1000em;
    direction: ltr;
}

.ui-tooltip-icon, .ui-tooltip-icon .ui-icon {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}

.ui-tooltip-icon .ui-icon {
    width: 18px;
    height: 14px;
    text-align: center;
    text-indent: 0;
    color: inherit;
    background: transparent none no-repeat -100em -100em;
}

.ui-tooltip-focus {
}

.ui-tooltip-hover {
}

.ui-tooltip-shadow {
    -moz-box-shadow: 0px 2px 3px -1px #333333;
    -webkit-box-shadow: 0px 2px 3px -1px #333333;
    box-shadow: 0px 2px 3px -1px #333333;
}

.ui-tooltip .ui-tooltip-tip {
    margin: 0 auto;
    overflow: hidden;
    z-index: 10;
}

.ui-tooltip .ui-tooltip-tip,
.ui-tooltip .ui-tooltip-tip .qtip-vml {
    position: absolute;
    line-height: 0.1px !important;
    font-size: 0.1px !important;
    font-display: auto;
    color: #123456;
    background: transparent;
    border: 0 dashed transparent;
}

.ui-tooltip .ui-tooltip-tip canvas {
    top: 0;
    left: 0;
}

.ui-tooltip .ui-tooltip-tip .qtip-vml {
    behavior: url(#default#VML);
    display: inline-block;
    visibility: visible;
}

.boxContent {
    position: relative;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 5%;
    padding-right: 2%;
    width: 292px;
    background-color: rgba(0, 0, 0, 0.60);
}

.boxFooter {
    position: relative;
    padding-top: 2%;
    padding-bottom: 2%;
    text-align: center;
    color: #227ba6;
    background-color: #d7d7d7;
    font-size: 17px;
}

.supplement-section {
    position: relative;
    top: -11px;
    z-index: 98;
}

.supplement-section h4 {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-display: auto;
    color: #ffffff;
    margin: 8px;
}

.supplement-section .supplement-element-left,
.supplement-section .supplement-element-middle,
.supplement-section .supplement-element-right {
    position: absolute;
    display: inline-block;
}

.supplement-section .supplement-element-left,
.supplement-section .supplement-element-right {
    width: 2%;
    height: 0;
}

.supplement-section .supplement-element-left {
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-right: 14px solid #ffffff;
}

.supplement-section .supplement-element-left.supplement-element-grey {
    border-right: 14px solid #ededed;
}

.supplement-section .supplement-element-left.supplement-element-light-grey {
    border-right: 14px solid #f5f5f5;
}

.supplement-section .supplement-element-left.supplement-element-red {
    border-right: 14px solid #000;
}

.supplement-section .supplement-element-left.supplement-element-black {
    border-right: 14px solid #383838;
}

.supplement-section .supplement-element-middle {
    background-color: #ffffff;
    height: 22px;
    left: 2%;
    width: 96%;
}

@media (max-width: 444px) {
    .supplement-section .supplement-element-middle {
        left: 3.5%;
        width: 93%;
    }
}

@media (min-width: 445px) and (max-width: 513px) {
    .supplement-section .supplement-element-middle {
        left: 3%;
        width: 94%;
    }
}

@media (min-width: 514px) and (max-width: 609px) {
    .supplement-section .supplement-element-middle {
        left: 2.5%;
        width: 95%;
    }
}

.supplement-section .supplement-element-middle.supplement-element-grey {
    background-color: #ededed;
}

.supplement-section .supplement-element-middle.supplement-element-light-grey {
    background-color: #f5f5f5;
}

.supplement-section .supplement-element-middle.supplement-element-red {
    background-color: #d50c2d;
}

.supplement-section .supplement-element-middle.supplement-element-black {
    background-color: #383838;
}

.supplement-section .supplement-element-right {
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 14px solid #ffffff;
    right: 0;
}

.supplement-section .supplement-element-right.supplement-element-grey {
    border-left: 14px solid #ededed;
}

.supplement-section .supplement-element-right.supplement-element-light-grey {
    border-left: 14px solid #f5f5f5;
}

.supplement-section .supplement-element-right.supplement-element-red {
    border-left: 14px solid #d50c2d;
}

.supplement-section .supplement-element-right.supplement-element-black {
    border-left: 14px solid #383838;
}

.topbox {
    position: relative;
    border: 1px solid #2184b3;
}

.topboxHead {
    position: relative;
}

.topboxFooter {
    position: relative;
    padding-top: 4%;
    padding-bottom: 5%;
    width: 100%;
    height: 50px;
    background-color: #2d2d2d;
    color: #fff;
    margin: 0 auto;
    text-align: center;
}

.title {
    position: relative;
    -webkit-perspective: 400;
    perspective: 400;
    padding-left: 17px;
    font-family: Arial;
    font-weight: bold;
    font-size: 15px;
    font-display: auto;
    text-transform: uppercase;
    color: #000;
}

.title:before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 10px;
    background: #3090c0;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transform: translateX(-150px);
    transform: translateX(-150px);
    -webkit-animation: title-border-slide-in 0.35s ease-out forwards;
    animation: title-border-slide-in 0.35s ease-out forwards;
}

.title .title-word {
    opacity: 0;
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}

.title .title-word:nth-child(1) {
    -webkit-animation: roll-in 0.15s 0s ease-out forwards;
    animation: roll-in 0.15s 0s ease-out forwards;
}

.title .title-word:nth-child(2) {
    -webkit-animation: roll-in 0.15s 0.175s ease-out forwards;
    animation: roll-in 0.15s 0.175s ease-out forwards;
}

.title .title-word:nth-child(3) {
    -webkit-animation: roll-in 0.15s 0.35s ease-out forwards;
    animation: roll-in 0.15s 0.35s ease-out forwards;
}

.title .title-word:nth-child(4) {
    -webkit-animation: roll-in 0.15s 0.525s ease-out forwards;
    animation: roll-in 0.15s 0.525s ease-out forwards;
}

@-webkit-keyframes title-border-slide-in {
    0% {
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes title-border-slide-in {
    0% {
        -webkit-transform: translateX(-150px);
        transform: translateX(-150px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes roll-in {
    0% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes roll-in {
    0% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg);
        opacity: 1;
    }
}

.newsNav {
    position: relative;
    padding-top: 4%;
    padding-bottom: 5%;
    padding-left: 5%;
    width: 100%;
    height: 50px;
    background-color: #2d3036;
    border-bottom: 2px solid #3090c0;
    color: #bababa;
}

.serviceBox {
    background: #fff;
    text-align: center;
    padding: 20px 0 40px;
    position: relative;
}

.serviceBox:hover {
    background: linear-gradient(#3b6093, #214667);
}

.serviceBox .service-icon {
    width: 100px;
    height: 100px;
    line-height: 95px;
    font-size: 50px;
    font-display: auto;
    margin: 0 auto;
    transition: all 0.5s ease-in-out;
}

.service-icon img {
    width: 100px;
    height: 100px;
}

.serviceBox:hover .service-icon {
    transform: rotateY(360deg);
    color: #fff;
    border-color: #fff;
}

.serviceBox .service-content h3 a {
    font-size: 22px;
    font-display: auto;
    color: #333;
}

.serviceBox .service-content p {
    font-size: 14px;
    font-display: auto;
    padding: 0 20px;
    margin: 15px 0 30px;
    color: #333;
}

.serviceBox:hover h3 a,
.serviceBox:hover p {
    color: #fff;
}

.serviceBox .btn {
    background: linear-gradient(#3b6093, #214667);
    color: #fff;
    padding: 10px 35px;
    transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
}

.serviceBox:hover .btn {
    background: #333;
    color: #fff;
}

@media screen and (max-width: 990px) {
    .serviceBox {
        margin-bottom: 20px;
        padding: 20px 0;
    }
}

.domainbox {
    position: relative;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    border: 1px solid #bbb;
    border-radius: 5px;
    background-color: #fff;
}

.loginButton {
    padding: 1px 10px;
    text-transform: none;
    font-family: Roboto, sans-serif;
    font-size: .8rem;
    font-display: auto;
    color: #fff;
    background-color: #686868;
}

.rootBox {
    background: #fff;
    border: 1px solid #ccc;
    padding: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: all ease-in-out 0.25s;
    -webkit-transition: all ease-in-out 0.25s;
    border-radius: 8px !important;
}

.rootBox:hover {
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    border-radius: 8px !important;
}

.rootBoxH3 {
    font-size: 18px;
    font-weight: bold;
    font-display: auto;
}

.rootBoxH4 {
    font-size: 50px;
    font-weight: bold;
    font-display: auto;
}

.rootBoxSpan {
    font-size: 14px;
    font-weight: bold;
    font-display: auto;
    opacity: 0.6;
    display: inline-block;
}

.rootBoxUL {
    margin: 0;
    padding: 0;
    line-height: 20px;
    list-style: none;
    font-size: 14px;
    font-display: auto;
    opacity: 0.8;
}

.rootBoxBuy {
    background: #fff;
    border: 1px solid #000;
    padding: 10px 40px;
    text-align: center;
    text-decoration: navajowhite;
    border-radius: 4px;
    color: #000;
    font-size: 14px;
    font-display: auto;
    display: inline-block;
}

.rootBoxBuy:hover {
    background: linear-gradient(to right, #295c91 0%, #244d78 100%);
    color: #fff;
    transition: all ease-in 0.5s;
}

.rootBox a:hover {
    color: #fff;
}
.gameUeberschrift {
    background-color: #fff;
    padding-top: 3%;
    width: 100%;
    height: 100%;
    background: none repeat scroll 0 0 #FFFFFF;
    box-shadow: 1px 1px 5px #CCCCCC;
    margin-bottom: 16px;
    margin: 0 auto;
}
.gameHR {
    border-bottom: 1px solid #155e87;
    font-size: 14px;
    font-display: auto;
    line-height: 55px;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.gameBox {
    background: #fff;
    border: 1px solid #ccc;
    padding: 40px;
    padding-top: 20px;
    padding-bottom: 5px;
    transition: all ease-in-out 0.25s;
    -webkit-transition: all ease-in-out 0.25s;
    border-radius: 5px !important;
}

/*.gameBox:hover {*/
    /*transform: scale(1.1, 1.1);*/
    /*-webkit-transform: scale(1.1, 1.1);*/
    /*border-radius: 8px !important;*/
/*}*/

.gameBoxH3 {
    font-size: 18px;
    font-weight: bold;
    font-display: auto;
    text-shadow: 2px 2px #000; color: #fff;
}

.gameBoxH4 {
    font-size: 50px;
    font-weight: bold;
    font-display: auto;
}

.gameBoxSpan {
    font-size: 14px;
    font-weight: bold;
    font-display: auto;
    opacity: 0.6;
    color: #fff;
    display: inline-block;
}

.gameBoxUL {
    margin: 0;
    padding: 0;
    line-height: 20px;
    list-style: none;
    font-size: 14px;
    font-display: auto;
    opacity: 0.8;
}

.gameBoxBuy {
    background: #fff;
    border: 1px solid #000;
    padding: 5px 40px;
    text-align: center;
    text-decoration: navajowhite;
    border-radius: 4px;
    color: #000;
    font-size: 14px;
    font-display: auto;
    display: inline-block;
}

.gameBoxBuy:hover {
    background: linear-gradient(to right, #295c91 0%, #244d78 100%);
    color: #fff;
    transition: all ease-in 0.5s;
}

.gameBox a:hover {
    color: #fff;
}
.detailsUeberschrift {
    position: relative;
    left: 5%;
    z-index: 5;
    font-size: 18px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 48px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    background-color: #458abe;
    color: #fff;
    padding-top: 1%;
    padding-bottom: 4px;
    padding-left: 2%;
    padding-right: 3%;
}
.detailsSlogan {
    position: relative;
    z-index: 5;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 48px;
    font-size: 16px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    width: 50%;
    text-align: center;
    background-color: #232323;
    color: #fff;
    padding-top: 2%;
    padding-bottom: 4px;
    padding-left: 4%;
    padding-right: 3%;
}
.sliderUeberschrift {
    position: relative;
    min-width: 60%;
    max-width: 80%;
    left: 5%;
    z-index: 5;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 48px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    background-color: #458abe;
    color: #fff;
    padding-top: 1%;
    padding-bottom: 4px;
    padding-left: 2%;
    padding-right: 3%;
}
.sliderSlogan {
    position: relative;
    z-index: 5;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 48px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    width: 30%;
    background-color: #232323;
    color: #fff;
    text-align: left;
    padding-top: 1%;
    padding-bottom: 4px;
    padding-left: 4%;
    padding-right: 3%;
}
.service-process {
    position: relative;
    width: 100%;
}
.wshipping-content-block {
}
.service-process::before {
    display: block;
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    border-top: 1px dashed #cccccc;
    border-bottom: 1px dashed #fff;
    width: 100%;
}
*::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.section-title {
    text-align: center;
    padding-bottom: 30px;
}
.section-title h2 {
    margin-top: 0px;
    text-transform: uppercase;
    color: #444444;
}
.process-row {
    padding-top: 40px;
}
.process-step::before {
    position: absolute;
    right: -123px;
    width: 110px;
    height: 2px;
    background-color: #3090c0;
    content: "";
    top: 80px;
    display: block;
}

.process-icon {
    width: 164px;
    text-align: center;
    height: 164px;
    float: left;
    border-radius: 100%;
    background-color: #fff;
    border: 2px solid #3090c0;
    position: relative;
    padding-top: 44px;
    margin-bottom: 10px;
}
.process-icon span {
    width: 56px;
    height: 56px;
    background-color: #3090c0;
    border: 2px solid #fff;
    color: #fff;
    line-height: 56px;
    font-size: 28px;
    font-display: auto;
    position: absolute;
    left: -30px;
    top: 50%;
    margin-top: -30px;
    border-radius: 100%;
    font-weight: 700;
}
.process-step p {
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    clear: both;
}
.process-step p {
    margin-bottom: 0px;
}
.process-step {
    float: left;
    width: 164px;
    margin-right: 14%;
    position: relative;
}
.process-step:last-child {
    margin-right: 0px;
}
.process-step:last-child::before
{
    display:none;
}
.info-card {
    width: 100%;
    border: 1px solid rgb(215, 215, 215);
    position: relative;
    font-family: 'Lato', sans-serif;
    font-display: auto;
    margin-bottom: 20px;
    overflow: hidden;
}
.info-card > img {
    width: 100px;
    margin-bottom: 60px;
}
.info-card .info-card-details,
.info-card .info-card-details .info-card-header  {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -100%;
    left: 0;
    padding: 0 15px;
    background: rgb(255, 255, 255);
    text-align: center;
}
.info-card .info-card-details::-webkit-scrollbar {
    width: 8px;
}
.info-card .info-card-details::-webkit-scrollbar-button {
    width: 8px;
    height: 0px;
}
.info-card .info-card-details::-webkit-scrollbar-track {
    background: transparent;
}
.info-card .info-card-details::-webkit-scrollbar-thumb {
    background: rgb(160, 160, 160);
}
.info-card .info-card-details::-webkit-scrollbar-thumb {
    background: rgb(130, 130, 130);
}

.info-card .info-card-details .info-card-header {
    height: auto;
    bottom: 100%;
    padding: 10px 5px;
}
.info-card:hover .info-card-details {
    bottom: 0px;
    overflow: auto;
    padding-bottom: 25px;
}
.info-card:hover .info-card-details .info-card-header {
    position: relative;
    bottom: 0px;
    padding-top: 45px;
    padding-bottom: 25px;
}
.info-card .info-card-details .info-card-header h1,
.info-card .info-card-details .info-card-header h3 {
    color: rgb(62, 62, 62);
    font-size: 22px;
    font-weight: 900;
    font-display: auto;
    text-transform: uppercase;
    margin: 0 !important;
    padding: 0 !important;
}
.info-card .info-card-details .info-card-header h3 {
    color: rgb(142, 182, 52);
    font-size: 15px;
    font-weight: 400;
    font-display: auto;
    margin-top: 5px;
}
.info-card .info-card-details .info-card-detail .social {
    list-style: none;
    padding: 0px;
    margin-top: 25px;
    text-align: center;
}
.info-card .info-card-details .info-card-detail .social a {
    position: relative;
    display: inline-block;
    min-width: 40px;
    padding: 10px 0px;
    margin: 0px 5px;
    overflow: hidden;
    text-align: center;
    background-color: rgb(215, 215, 215);
    border-radius: 40px;
}
.animate {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.pt-100 {
    padding-top: 100px;
}
.pb-100 {
    padding-bottom: 100px;
}
.services-area {
    background-color: #f6f6f6;
}
.section-title {
    margin-bottom: 60px;
}
.section-title p {
    color: #777;
    font-size: 16px;
    font-display: auto;
}
.section-title h4 {
    text-transform: capitalize;
    font-size: 40px;
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-display: auto;
    font-weight: 600;
}
.section-title h4:before {
    position: absolute;
    content: "";
    width: 60px;
    height: 2px;
    background-color: #ff3636;
    bottom: 0;
    left: 50%;
    margin-left: -30px;
}
.section-title h4:after {
    position: absolute;
    background-color: #ff3636;
    content: "";
    width: 10px;
    height: 10px;
    bottom: -4px;
    left: 50%;
    margin-left: -5px;
    border-radius: 50%;
}
.single-service {
    border: 1px solid #eee;
    padding: 30px 10px;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
}
.single-service i.fa {
    width: 60px;
    height: 60px;
    background-color: #ff3636;
    font-size: 25px;
    font-display: auto;
    color: #fff;
    line-height: 60px;
    text-align:center;
    margin-bottom:20px;
}
.single-service i.fa {
    -webkit-transition: .4s;
    transition: .4s;
}
.single-service:hover i.fa {
    border-radius: 50%;
}
.single-service h4 {
    text-transform: capitalize;
    font-size: 22px;
    margin-bottom: 10px;
    font-weight: 500;
    font-display: auto;
}
.productBox {
    position: relative;
    border: 1px solid #bbb;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    border-radius: 4px;
}
.productSidebar {
    position: relative;
    border: 1px solid #bbb;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    border-radius: 4px;
}

/* PRICE TABLE - Lizenz */

.siteNav {
    position: relative;
    background: rgba(207, 210, 213, 0.29) !important;
    height: 40%;
    font-size: 16px;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    /*text-shadow: 2px 2px #1f1f22; color: #fff;*/
    color: #fff;
}
.detailsBeschreibung {
    position: relative;
    float: right;
    width: 90%;
    background: rgba(207, 210, 213, 0.29) !important;
    color: #fff;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 5%;
    padding-left: 2%;
    padding-right: 2%;
}
.gameRow {
    position: relative;
    background-color: #fff;
    color: #1f1f22;
    padding-top: 2%;
    padding-bottom: 1%;
    padding-left: 1%;
    padding-right: 1%;
}
.cloudGames {
    background-color: #5284bc;
    color: #fff;
    height: 40%;
    font-size: 16px;
    font-weight: bold;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 2%;
    padding-right: 2%;
    text-align: center;
}
.loginContent {
    position: relative;
    border-radius: 5px;
    background-color: #fff;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
}
.basketContent {
    position: relative;
    border-radius: 5px;
    background-color: #fff;
    padding-top: 5%;
    padding-bottom: 2%;
    padding-left: 3%;
    padding-right: 3%;
}
.stepNav {
    margin: 0 0;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    list-style: none;
    left: -4%;
}

/* z-index to make sure the buttons stack from left to right */

.stepNav li {
    float: left;
    position: relative;
    z-index: 3;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.12);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.12);
    box-shadow: 0 1px 1px rgba(0,0,0,0.12);
}

.stepNav li:first-child {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.stepNav li:nth-child(2) { z-index: 1; }
.stepNav li:nth-child(3) { z-index: 0; }

/* different widths */

.stepNav.twoWide li { width: 50%; }
.stepNav.threeWide li { width: 25%; }

/* step links */

.stepNav a, .stepNav a:visited {
    width: 100%;
    height: 43px;
    padding: 0 0 0 25px;
    color: #717171;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    line-height: 43px;
    white-space: nowrap;
    border: 1px solid #cbcbcb;
    text-decoration: none;
    border-top-color: #dddddd;
    border-right: 0;
    background-color: #fbfbfb;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(251, 251, 251)), to(rgb(233, 233, 233)));
    background-image: -webkit-linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
    background-image: -moz-linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
    background-image: -o-linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
    background-image: -ms-linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
    background-image: linear-gradient(top, rgb(251, 251, 251), rgb(233, 233, 233));
    float: left;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.stepNav li:first-child a {
    padding-left: 12px;
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.stepNav a:before {
    content: "";
    width: 29px;
    height: 29px;
    border-right: 1px solid #dddddd;
    border-bottom: 1px solid #cbcbcb;
    background-image: -webkit-gradient(linear, right top, left bottom, from(rgb(251, 251, 251)), to(rgb(233, 233, 233)));
    background-image: -webkit-linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
    background-image: -moz-linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
    background-image: -o-linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
    background-image: -ms-linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
    background-image: linear-gradient(right top, rgb(251, 251, 251), rgb(233, 233, 233));
    display: block;
    position: absolute;
    top: 6px;
    right: -16px;
    z-index: -1;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.stepNav a:hover {
    color: #2e2e2e;
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(242, 242, 242)), to(rgb(217, 217, 217)));
    background-image: -webkit-linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
    background-image: -moz-linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
    background-image: -o-linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
    background-image: -ms-linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
    background-image: linear-gradient(top, rgb(242, 242, 242), rgb(217, 217, 217));
}

.stepNav a:hover:before {
    background-image: -webkit-gradient(linear, right top, left bottom, from(rgb(242, 242, 242)), to(rgb(217, 217, 217)));
    background-image: -webkit-linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
    background-image: -moz-linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
    background-image: -o-linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
    background-image: -ms-linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
    background-image: linear-gradient(right top, rgb(242, 242, 242), rgb(217, 217, 217));
}

/* selected */

.stepNav li.selected {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.stepNav li.selected a, .stepNav li.selected a:before {
    background: #ebebeb;
}

.stepNav li.selected a {
    border-top-color: #bebebe;
    -webkit-box-shadow: inset 2px 1px 2px rgba(0,0,0,0.12);
    -moz-box-shadow: inset 2px 1px 2px rgba(0,0,0,0.12);
    box-shadow: inset 2px 1px 2px rgba(0,0,0,0.12);
}

.stepNav li.selected a:before {
    border-right: 1px solid #bebebe;
    border-bottom: 1px solid #cbcbcb;
    -webkit-box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1);
    box-shadow: inset -1px -1px 1px rgba(0,0,0,0.1);
}
.paymentContainer {
    border: 1px solid #bbb;
}

.paymentHead {
    background-color: #3b3b3b;
    color: #fff;
    padding-top: 2%;
    padding-bottom: 2%;
}

.paymentContent {
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: #fff;
}

.paymentFooter {
    color: #fff;
    padding-top: 4%;
    padding-bottom: 4%;
    background-color: #3b3b3b;
}
.shopEnd_Headbox {
    border-radius: 3px;
    background-color: #548cc5;
    color: #fff;
    padding-top: 2%;
    padding-bottom: 2%;
    font-weight: bold;
    text-align: center;
}

.shopEnd_PriceBox {
    border-radius: 3px;
    background-color: #fff;
    padding-top: 2%;
    border: 1px solid #ccc;
}

.shopEnd_Contentbox {
    border-radius: 3px;
    background-color: #fff;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 4%;
    border: 1px solid #ccc;
}
/* G-Factory Modern v4: light, responsive presentation layer */
:root{--gf-blue:#1169e8;--gf-ink:#14243a;--gf-soft:#f4f8fd}
html{scroll-behavior:smooth}
body{color:var(--gf-ink);background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55}
a{color:#1266d5}a:hover{color:#0749a0}
img{max-width:100%;height:auto}
.pi-section-white,.pi-section-grey{background-color:#fff}
.pi-section-grey{background-color:var(--gf-soft)}
.pi-btn,.btn,.btn-primary{border-radius:8px}
.pi-btn-primary,.btn-primary{background-color:var(--gf-blue);border-color:var(--gf-blue)}
.pi-box,.pi-shadow-effect,.thumbnail{border-radius:12px}
h1,h2,h3,h4{color:var(--gf-ink)}
@media(max-width:767px){body{font-size:15px} .container,.pi-section-w{max-width:100%} .pi-text-center-xs{text-align:center} .tp-banner-container{max-width:100%;overflow:hidden}}