*{
    margin: 0;
    padding: 0;
    font-family: 'stereogothic-800-regular', sans-serif;
}

html, body{
    background: #030618;
    overflow-x: hidden;
}

.mainBody {
    color: #ffffff;
    /*min-height: 100vh;*/
}

.bodyTest{
    /*background-image: linear-gradient(180deg,#030a20, #05325d, #002b50);*/
    background: #030618;
}

.outer-container {
    width: 100%;
    height: 100%;
    text-align: center;
}

.inner-container {
    position: relative;
}

@media (min-width: 992px) {
  .inner-container {
      height: 48vw;
      width: 100vw;
  }
}


/*XXXXXXXXXXXXXXXXXXXXXXXXX CONTAIN VIDEO XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/



.flaggeStylen img {
    float: right;
    padding-left: 3px;
    padding-right: 3px;
    z-index: 1000000;
    position: relative;
}

.flagStyle{
    padding-top: 15px;
}

.tradexLogosm img {
    width: 100px !important;
    padding: 15px 0 0 15px !important;
}

.tradexLogosm {
    width: 11vh !important;
    padding-right: 100px;
}

.container.containerStart{
  width: 100%;
  max-width: 100%;
}

.startSide.row {
    padding-top: 7vw;
}

.video-overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    padding: 2rem 2rem 0 2rem;
    font-size: 20px;
    z-index: 2;
}

.video-overlay.pb-0.mb-0 {
    background-image: linear-gradient(to right, black, transparent);
}

video {
  width: 100%;
  top: -7rem;
  position: relative;
}

@media (max-width: 991.98px) {
  video {
    width: 100%;
    top: inherit;
    position: relative;
  }
}

@media screen and (max-width: 992px) {
  video {
      width: auto;
  }
}

@media (max-width: 575.98px) {
  video {
    left: -51vw;
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 354px) {
  video {
    left: -84vw;
  }
}

.startSide{
  position: relative;
}

.header{
  z-index: 2;
  position: relative;
}

.header-container{
  position: relative;
  float: left;
}

@media screen and (max-width: 1656px) {
  .startSide img{
    width: 80vw;
  }
}

@media screen and (max-width: 1565px) {
  .startSide img{
    width: 60vw;
  }
}

@media screen and (max-width: 1200px) {
  .startSide img{
    bottom: -70px;
  }
}

.startTextOverline {
    font-weight: bold;
    font-size: 40px;
    line-height: 1;
    color: #ffffff;
    padding-top: 15px;
}

p.startTextOverline{
    margin-bottom: 0px!important;
    padding-bottom: 0px!important;
}

h1.startTextOverline{
    margin-top: 0px!important;
    padding-top: 0px!important;
}

.startTextUnderline{
    max-width: 600px;
}

.startSideText {
    text-align: left !important;
    z-index: 1000000;
}

button.hr.btn.btn-primary{
    background-image: linear-gradient(to right, #5adae4, #003a81);
    width: 7vw;
    height: 0.3vw;
    margin-top: 20px;
    margin-bottom: 30px;
    padding: 0;
    cursor: pointer;
}

.startSideText button{
    border-radius: 0;
    border: 0;
    background-image: linear-gradient(to right, #2dc0d3, #003a81);
    width: 150px;
    padding-top: 5px;
    font-size: 25px;
    position: relative;
    z-index: 3;
}

.startSideText button.en-btn{
  width: 200px;
}

#carouselExampleCaptions img{
    height: 350px;
}

img{
    position: relative;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXX START XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.OMTextHead{
    font-weight: bold;
    font-size: 30px;
    text-align: center;
}

.OMText{
    padding: 30px 0 100px 0;
    text-align: center;
    font-size: 30px;
}


/*XXXXXXXXXXXXXXXXXXXXXXXX CARDS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


.chosseEX p{
    margin-bottom: 0 !important;
    text-align: center;
}

.chosseEX{
    font-weight: bold;
    margin: auto!important;
    font-size: 30px;
    border-style: solid;
    border-width: 0 0 4px 0;
    width: fit-content;
    border-image: linear-gradient(45deg, rgb(90, 218, 228), rgb( 0, 58, 129)) 1;
}

.card {
    min-height: 360px;
    background-color: unset;
    color: #ffffff;
    border-style: solid;
    border-width: 4px;
    width: fit-content;
    border-image: linear-gradient(45deg, rgb(90, 218, 228), rgb( 0, 58, 129)) 1;
}

.row.row-cols-1.row-cols-md-3.g-4 {
    padding-top: 40px;
}

.card-body img{
    width: 100px;
    text-align: center;
    padding-bottom: 20px;
}

.card-body{
    text-align: center;
}


/*XXXXXXXXXXXXXXXXXXXXXXX GET STARTED XXXXXXXXXXXXXXXXXXXXXXXXXX*/
.mainGetStarted {
    padding-top: 50px;
}

@media screen and (max-width: 768px) {
  .mainGetStarted {
      padding-top: 0px;
  }
}

.howStart{
    padding-top: 25px;
}

.mainGetStarted a {
    color: #5adae4;
}

/*XXXXXXXXXXXXXXXXXXXXXXX WHATS ON THE HORIZON XXXXXXXXXXXXXXXXXXXXXXXXXX*/

.horizonBox{
    margin-top: 80px;
    text-align: center;
    background-color: unset;
    color: #ffffff;
    border-style: solid;
    border-width: 4px;
    width: fit-content;
    border-image: linear-gradient(45deg, rgb(90, 218, 228), rgb( 0, 58, 129)) 1;
    padding: 0 10px;
}

@media screen and (max-width: 768px) {
  .horizonBox{
      margin-top: 0px;
  }
}

.horizonHead{
    font-weight: bold;
    margin: auto!important;
    font-size: 30px;
    border-style: solid;
    border-width: 0 0 4px 0;
    width: fit-content;
    border-image: linear-gradient(45deg, rgb(90, 218, 228), rgb(	0, 58, 129)) 1;
}

.horizonHead p{
    margin-bottom: 0 !important;
}

.horizonText{
    font-size: 20px;
    padding-top: 20px;
}

.joinUsHead{
    font-size: 30px;
    font-weight: bold;
}





.getStarted p{
    font-weight: bold;
    margin: auto!important;
    font-size: 30px;
    border-style: solid;
    border-width: 0 0 4px 0;
    width: fit-content;
    border-image: linear-gradient(45deg, rgb(90, 218, 228), rgb(	0, 58, 129)) 1;
    text-align: center;
}


/*XXXXXXXXXXXXXXXXXXXXXXX Team XXXXXXXXXXXXXXXXXXXXXXXXXX*/
.teamHead{
    padding-top: 50px;
    font-weight: bold;
    margin: auto!important;
    font-size: 30px;
    border-style: solid;
    border-width: 0 0 4px 0;
    width: fit-content;
    border-image: linear-gradient(45deg, rgb(90, 218, 228), rgb(	0, 58, 129)) 1;
}

@media screen and (max-width: 768px) {
  .teamHead{
      padding-top: 0px;
    }
}

.teamHead p{
    margin-bottom: 0;
}

.team{
    text-align: center !important;
}

.positionDetail{
    text-align: center;
    padding-top: 10px;
}

.teamReihe{
    padding: 50px 0 0 0;
}

@media screen and (max-width: 768px) {
  .teamReihe{
      padding: 50px 0 0px 0;
  }
}

.teamReihe img{
  width:40px;
  padding: 5px;
}

.contact a{
    color: #ffffff;
    text-decoration: none;
}

.tab-pane .d-flex{
  flex-wrap: wrap;
}

@media (min-width: 768px){
  .tab-pane .radial-gardient-box{
    flex: 0 0 calc((100% - 3*3rem)/4); /* 4 Spalten, 3 gaps */
  }
}
@media (max-width: 767.98px){
  .tab-pane .radial-gardient-box{
    width: 100%; /* mobile: untereinander */
  }
}

table a{
    color: #ffffff;
}

/* Make the base table background transparent */
.table.table-dark.table-transparent {
    background-color: transparent !important;
  }

  /* Table headers/cells default to transparent */
  .table.table-dark.table-transparent thead th,
  .table.table-dark.table-transparent thead td,
  .table.table-dark.table-transparent tbody td {
    background-color: transparent !important;
  }

  /* Provide subtle transparency for striped rows */
  .table.table-dark.table-transparent tbody tr:nth-of-type(odd) > * {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
  .table.table-dark.table-transparent tbody tr:nth-of-type(even) > * {
    background-color: rgba(255, 255, 255, 0.02) !important;
  }

  /* On hover, add a slightly darker overlay so the user knows it's highlighted */
  .table.table-dark.table-transparent tbody tr:hover > * {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  .table button.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
  }


/*XXXXXXXXXXXXXXXXXXXXXXX Imprint XXXXXXXXXXXXXXXXXXXXXXXXXX*/
.pageHead{
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    padding-top: 20px;
}

.impritDetails{
    text-align: center;
}


/*XXXXXXXXXXXXXXXXXXXXXXX AGB XXXXXXXXXXXXXXXXXXXXXXXXXX*/
.pageHead.agb{
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    padding-top: 20px;
}

.agbDetails{
    text-align: left;
}

/*XXXXXXXXXXXXXXXXXXXXXXXX FOOTER XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.footer{
  color: #fff;
  margin-top: 6rem!important;
}

.footerHead{
    padding-top: 120px;
    padding-bottom: 80px;
    text-align: center;
}

.footerHead p{
    font-weight: bold;
    font-size: 40px;
    margin: 0;
    line-height: 1;
}

.kontakt.col{
    text-align: left;
    line-height: 18px;
    padding-top: 76px;
    text-decoration: none !important;
}

a.mailStyle {
    text-decoration: none;
    color: #fff;
    font-weight: normal !important;
}

.footerLogo.col {
    text-align: center;
}

.footerLogo.col img{
    width: 200px;
}

.socialMedia.col{
    text-align: right;
    padding-top: 53px;
}

.socialMedia.col p{
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}

.socialMedia.col img{
    width: 80px;
    margin-right: 10px;
}

.footerEnd{
  padding: 0 1rem;
}

.footerEnd a p{
    text-align: center;
    color: #ffffff;
}

.footerEnd .btn{
  width: auto;
  height: fit-content;
}

.btnAMS{
    text-align: center;
    color: #ffffff;
}

.footerEnd a{
    text-decoration: none;
}

.powerIt a{
    text-align: center;
    color: #00f9ff !important;
    font-weight: 300;
    font-style: italic;
    opacity: 0.3;
    margin: 20px 0;
    text-decoration: none;
}

.mainFooter {
  padding: 0 2rem;
}

.mainFooter img.tradexLogo{
  max-height: 150px;
  position:relative;
  top:-10px;
}

.mainFooter .linkedIn p{
      margin-bottom: 0.5rem;
}

.mainFooter .linkedIn .glow-line{
  display: none;
}

@media (max-width: 992px) {
  .mainFooter .linkedIn p{
    text-align: center;
    padding-top: 15px;
    margin-top: 30px;
  }
  .mainFooter .linkedIn .glow-line{
    display:inherit;
  }

}

.mainFooter .linkedIn img{
  max-height: 3rem;
}

@media (max-width: 992px) {
  .mainFooter .linkedIn img{
    max-height: 80px;
    right: inherit;
  }
  .mainFooter img.tradexLogo{
    max-height: 120px;
  }
}

.mainFooter a{
    color: #ffffff;
    text-decoration: none;
}

.footerKf{
    color: #ffffff;
    text-decoration: none;
}

.footerKfu{
    color: #5adae4;
}


/*XXXXXXXXXXXXXXXXXXXXXXXXXX AMS BUTTON XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.footerEnd a:nth-child(4) {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: #002b50;*/
}


.footerEnd a span {
    padding: 0;
    list-style-type: none;
}

.footerEnd a span {
    font-size: 19px;
    width: 165px;
    height: 27px;
    color: #ffffff;
    border-left: 0.08em solid;
    position: relative;
    cursor: pointer;
}

.footerEnd a span::before,
.footerEnd a span::after
{
    content: '';
    position: absolute;
    width: inherit;
    border-left: inherit;
    z-index: 0;
}

.footerEnd a span::before {
    height: 80%;
    top: 10%;
    left: calc(-0.15em - 0.08em * 2);
    filter: brightness(0.8);
}

.footerEnd a span::after {
    height: 60%;
    top: 20%;
    left: calc(-0.15em * 2 - 0.08em * 3);
    filter: brightness(0.6);
}

.footerEnd a span {
    position: relative;
    height: 120%;
    top: -10%;
    box-sizing: border-box;
    border: 0.08em solid;
    background-color: #002b50;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    transform: translateX(calc(-0.15em * 3 - 0.08em * 2));
    transition: 0.3s;
    z-index: 1;
}

 .footerEnd a span:hover {
    transform: translateX(0.15em);
}

/*XXXXXXXXXXXXXXXXXXX RESPONSIVE XXXXXXXXXXXXXXXXXXXX*/

@media screen and (max-width: 599px) {
    .notShowing{
        display: none;
    }
    .startSideText img {
        width: 55vw;
        margin: 0 !important;
    }
    .startSide.row{
        padding-top: 2vw;
    }
    .startSideText.col-6.showing{
        text-align: center !important;
        padding-top: 20px;
        width: 100% !important;
    }
    .welcomeText p{
        font-size: 16px !important;
        padding-top: 30px;
    }
    .startSideText button{
        width: 93px;
        height: 40px;
        padding-top: 4px;
        font-size: 20px;
    }
    .OMText{
        font-size: 16px;
    }
    .footerHead p{
        font-size: 30px !important;
    }
    .footerHead{
        padding-top: 30px !important;
    }
}

@media screen and (min-width: 600px) {
    .showing{
        display: none;
    }
}



@media screen and (min-width: 1200px){
    .startSideText p, .startSideText h1{
        padding-top: 20px;
    }
    .startSideText button{
        margin-top:30px;
    }
}




@media screen and (max-width: 768px){
    button.hr.btn.btn-primary{
        margin-top: 0;
        margin-bottom: 0;
    }
    .startSideText p,
    .startSideText h1{
        margin-bottom: 0;
    }
    p.startTextUnderline{
      font-size: 20px;
    }
    .languageIcon.row img{
        width: 6vh;
    }
    .welcomeText p{
        font-size: 20px;
    }
    .OMText{
        font-size: 20px;
        padding:20px 0 50px 0;
    }
    .kontakt.col{
        padding-top: 20px;
    }
}

@media screen and (max-width: 621px){
  .startSideText p,
  h1.startTextOverline,
  .startTextOverline,
  .startTextOverline span{
    font-size: 2rem;
  }
  p.startTextUnderline{
    font-size: 18px;
    padding-top: 10px;
  }
  .startSide.row{
    display: block;
    width: 100%;
    margin-top: 40px;
  }
}

@media screen and (max-width: 520px) {
    .kontakt.col{
        display: block;
        text-align: center;
        padding-left: auto;
        padding: 10px 10px 0;
    }
    .socialMedia.col{
        display: block;
        text-align: center;
    }
}

@media screen and (max-width: 493px) {
    li{
        width: 150px;
        height: 26px;
        font-size: 18px;
    }
}

@media screen and (max-width: 375px) {
    .kontakt.col{

        padding-right: 10px !important;
    }
}

@media screen and (max-width: 320px){
    .kontakt.col{
        padding-left: 0 !important;
    }
}

@media screen and (max-width: 768px) {
    li:hover span {
        transform: translateX(-10px);
    }
}

.startSide .mobile-car{
  display: none;
}

@media screen and (max-width: 599px) {
  .startSide .mobile-car{
    display: inherit;
    top: 20vw;
    transform: translateX(-50%);
    position: relative;
    left: 50%;
    width: 85vw;
  }
}

img.wa {
    width: 28px;
    padding: 0;
    margin: 0;
    top: -2px;
}


/*XXXXXXXXXXXXXXXXXXXX Contact XXXXXXXXXXXXXXXXXXXXXXXXX*/
.mb-6.row.check {
    padding-left: 10px;
    padding-top: 0.5rem;
}

/*
.mb-6.row.check a{
    color: #ffffff;
}
*/

button.btn.btn-primary {
    margin-top: 20px;
    border-radius: unset;
}

.numberMail{
    line-height: 0.5;
}

.adress{
    line-height: 0.5;
}

.extraContact{
    text-align: center;
}

.contactFormular label{
    padding-top: 10px;
}


.row button{
    background-color: #01f1fa;
    border-color: #01f1fa;
    color: #ffffff;
    position: relative;
}


.alert {
    border-radius: unset;
}

/*XXXXXXXXXXXXXXXXXXXXX Team Taps XXXXXXXXXXXXXXXXXXXX*/

.nav-taps.nav-link{
    height: 50px;
}

img.teamMate{
    width: 100%;
}

.col-lg-4.col-md-6.mb-5 {
    text-align: center;
}

ul#myTab {
    padding-top: 50px;
}

button.nav-link {
    border-radius: 0!important;
    color: #ffffff;
}
button.nav-link:hover {
    color: #ffffff;
}

.btnKontaktTeam {
    text-align: center !important;
}

.btnKontaktTeam button.btn.btn-primary {
    margin-top: 0;
}

li.nav-item.col {
    background-color: unset;
    display: flex;
}

button.nav-link {
    background-color: unset;
}

@media screen and (min-width: 494px) {
    .nav-item.col.justify-content-center{
        padding: 0 10px 0 10px;
    }
}

@media screen and (max-width: 494px) {
    li.nav-item.col.justify-content-center {
        padding: 0 50px 50px 50px;
    }
}

.nav-link.active {
    height: fit-content;
    min-height: 50px;
}

.nav-tabs .nav-link{
  min-height: 35px;
}

/* MAREIKE NEU */

@font-face {
    font-family: 'Poppins';
    src: url('/assets/fonts/Poppins-Regular.woff2') format('woff2'),
        url('/assets/fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('/assets/fonts/BebasNeue-Regular.woff2') format('woff2'),
        url('/assets/fonts/BebasNeue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}

hr{
  opacity: 1;
}

.hide{
  display: none;
}

@media (max-width: 991.98px) {
  .lg-hide{
    display: none;
  }
  .lg-show{
    display: inherit;
  }
  .lg-pe-0{
    padding-bottom: 0!important;
  }
  .lg-ps-0{
    padding-top: 0!important;
  }
}



.startTextOverline,
.startTextOverline span,
h1,h2,h3,h4,h5,h6,
.headline{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  font-weight: normal;
  text-align: left;
}

.headline.thin{
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
}

.headline.small-headline{
  font-size: 1.2rem;
}

.headline.big-headline{
  font-size: 4.2rem!important;
}

.headline.medium-headline,
.headline.medium-headline span{
  font-size: 2.5rem!important;
}

h1,h2,h3,h4,h5,h6{
  text-align: center;
}

.start-h2{
  margin-top: 5rem;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span,
.headline span{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  color: #5adae4;
}

.xLogo img{
  width:auto;
  max-width: 8.5rem;
  opacity: 1;
  padding: 0;
  margin: 0;
}

.languageIcon {
    position: absolute;
    right: 1rem;
}

.Login{
  position: absolute;
  right: 6.25rem;
  /*top: -0.7rem;*/
}

.header-undersites .Login {
    position: absolute;
    right: 7.25rem!important;
}

.header-undersites .languageIcon{
  right: 2rem;
}

.languageIcon img{
  height: 2.5rem;
}

.languageIcon a{
  color: #fff;
  text-decoration: none;
  transition: all .2s;
}

.languageIcon a:hover{
  transform: scale(1.2);
}

.languageIcon a span{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.5rem;
  color: #fff;
  margin-left: 0.3rem;
  color: #5adae4;
}

@media screen and (max-width: 621px){
    .startSideText p,
    h1.startTextOverline,
    .startTextOverline,
    .startTextOverline span{
      font-size: 2rem;
    }
  }

  @media screen and (max-width: 385px) {
      .startSideText img {
        max-width: 5.5rem;
      }
    }

.radial-gardient-box{
  position: relative;
  background: rgb(25,70,91);
  background: -moz-radial-gradient(circle, rgba(25,70,91,1) 0%, rgba(4,27,46,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(25,70,91,1) 0%, rgba(4,27,46,1) 100%);
  background: radial-gradient(circle, rgba(25,70,91,1) 0%, rgba(4,27,46,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#19465b",endColorstr="#041b2e",GradientType=1);
  border-radius: 0.6rem;
  padding: 1rem;
  transition: transform .2s;
  z-index: 2;
}

.radial-gardient-box:hover{
  transform: scale(1.2);
  cursor: pointer;
}

.contact-block .radial-gardient-box:hover{
  transform: none;
}

.radial-gardient-box.one{
  position: relative;
  left: -5rem;
}

.radial-gardient-box.three{
  position: relative;
  left: -2rem;
}

@media (max-width: 991.98px) {
  .radial-gardient-box.one,
  .radial-gardient-box.three{
    left: auto;
  }
}

.radial-gardient-box .headline,
.radial-gardient-box .headline span{
  font-size: 1.2rem;
}

.radial-gardient-box.exclusivity .headline img,
.radial-gardient-box.customer-centric .headline img,
.radial-gardient-box.trade-exchange .headline img{
  width: 4rem;
}

.radial-gardient-box.trade-exchange .headline img{
  padding: 0;
}

.perspective-container {
  position: relative;
  height: 6rem;
  margin: 0 auto 0rem;
  -webkit-perspective: 600;
  transition: transform .2s;
  z-index: 2;
}

.laptop{
  position: absolute;
  right: 0;
  top: -3.5rem;
  z-index: 2;
}

.laptop img{
  width: 9rem;
}

@media (max-width: 991.98px) {
  .laptop {
    right: -3rem;
    top: -1.5rem;
  }
  .laptop img{
    width: 5rem;
  }
}

@media (max-width: 575.98px) {
  .laptop {
    transform: translateX(-50%);
    left: 50%;
    top: -3rem;
    text-align: center;
  }
}

.silver-tray-car{
  transition: transform .2s;
  z-index: 2;
}

.perspective-container:hover,
.silver-tray-car:hover{
transform: scale(1.5);
}

.perspective-container.one{
  width: 90%;
}

.perspective-container.two{
  width: 80%;
}

.perspective-container.three{
  width: 70%;
}

.perspective-container.four{
  width: 60%;
}

.perspective-container.five{
  width: 50%;
}

.perspective .panel {
    -webkit-transform: rotateX( -37deg );
    border-radius: 1rem;
}

.panel {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.7;
    color: white;
    background: rgb(27,77,97);
    background: -moz-radial-gradient(circle, rgba(27,77,97,1) 0%, rgba(27,77,97,1) 51%, rgba(4,27,46,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(27,77,97,1) 0%, rgba(27,77,97,1) 51%, rgba(4,27,46,1) 100%);
    background: radial-gradient(circle, rgba(27,77,97,1) 0%, rgba(27,77,97,1) 51%, rgba(4,27,46,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1b4d61",endColorstr="#041b2e",GradientType=1);
    z-index: 1;
}

.perspective .text{
  position: relative;
  z-index: 2;
  transform: translateY(-50%);
  top: 2rem;
}

.perspective .text .headline,
.perspective .text .headline span{
  font-size: 1.2rem;
}

@media (max-width: 767.98px) {
  .perspective .text .headline{
    margin-top: 1rem;
  }
}

.radial-gardient-background{
  background: rgb(25,70,91);
  background: -moz-radial-gradient(circle, rgba(25,70,91,1) 0%, rgba(4,27,46,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(25,70,91,1) 0%, rgba(4,27,46,1) 100%);
  background: radial-gradient(circle, rgba(25,70,91,1) 0%, rgba(4,27,46,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#19465b",endColorstr="#041b2e",GradientType=1);
  padding: 1rem;
}

@media (max-width: 767.98px) {

}

.radial-gardient-background .headline.small{
  font-size: 1.2rem;
}

.box-button{
  font-family: 'Bebas Neue', sans-serif;
  background: #5adae4;
  border-radius: 1rem;
  padding: 0.3rem 1.2rem 0.5rem 1.2rem;
  color:#030619;
  text-transform: uppercase;
  text-decoration: none;
}

button.box-button{
  color:#030619;
  border: none;
}

.circle{
  position: relative;
  background: #fff;
  overflow: hidden;
  border-radius: 100%;
  min-width: 4.2rem;
  height: 4.2rem;
}

.circle img{
  position: absolute;
  height: 100%;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
  margin-right: 2rem;
}

.small-text{
  font-size: 0.6rem;
  font-style: italic;
}

.glow-line{
  width: 100%;
  height: 3px;
  background: rgb(3,10,32);
  background: -moz-radial-gradient(circle, rgba(3,10,32,1) 0%, rgba(198,245,249,1) 0%, rgba(139,231,238,1) 34%, rgba(90,218,228,1) 86%, rgba(3,10,32,1) 100%);
  background: -webkit-radial-gradient(circle, rgba(3,10,32,1) 0%, rgba(198,245,249,1) 0%, rgba(139,231,238,1) 34%, rgba(90,218,228,1) 86%, rgba(3,10,32,1) 100%);
  background: radial-gradient(circle, rgba(3,10,32,1) 0%, rgba(198,245,249,1) 0%, rgba(139,231,238,1) 34%, rgba(90,218,228,1) 86%, rgba(3,10,32,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#030a20",endColorstr="#030a20",GradientType=1);
  box-shadow: 0px 0px 12px #5adae4;
  border-radius: 50%;
}

.glow-background{
  box-shadow: 0px 0px 40px rgb(198,245,249);
}

.picture-background{
  position: relative;
  overflow: hidden;
  height: 20rem;
  z-index: 2;
}

@media (max-width: 991.98px) {
  .picture-background{
    height: 22vw;
  }
}

@media (max-width: 767.98px) {
  .picture-background{
    height: 11rem;
  }
}

@media (max-width: 390px) {
  .picture-background{
    height: 11rem;
  }
  ul#myTab {
    padding-top: 26px;
}
}

.picture-background img{
  position: absolute;
  width: 100%;
  top: -11vw;
  opacity: 0.5;
}

.team {
  position: relative;
  top: -11rem;
  width: 80%;
  z-index: 3;
}

.offers.team{
  top: inherit;
}

.nav-tabs{
  border-bottom: 1px solid #5adae4;
}

.nav-tabs .nav-item{
  font-family: 'Bebas Neue', sans-serif;
  border: none;
  font-size: 1.2rem;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active{
  background: none;
  color:#5adae4;
  border: none;
}

.nav-tabs .nav-link{
  border: none;
  padding: 0.2rem;
  transition: transform .2s;
}

.nav-tabs .nav-link:hover{
transform: scale(1.5);
text-shadow: #5adae4 1px 0 10px;
}

.nameHead p{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.2rem;
  margin: 0.3rem 0;
}

.positionDetail{
  padding: 0;
}

.positionDetail p{
  font-size: 0.8rem;
  margin: 0.3rem 0;
  padding: 0;
}

.contact a{
  font-size: 0.8rem;
  margin: 0.3rem 0;
  padding: 0;
  text-decoration: underline;
}

.team .circle{
  width: 15vw;
  min-width: inherit;
  height: 15vw;
  transform: translateX(-50%);
  left: 50%;
  box-shadow: 0px 0px 30px 0px #00c6ca;
  -webkit-box-shadow: 0px 0px 30px 0px #00c6ca;
}

@media (max-width: 768px) {
  .team .circle{
    width: 10rem;
    height: 10rem;
  }
}

.team .circle img{
  margin: 0;
  padding: 0;
  height: auto;
  width: 100%;
}

.our-mission{
  margin-bottom: 7rem;
}

  input,
  textarea{
    border-radius: 1rem;
    border: none;
  }

  .contact-block{
    position: relative;
    width: 80%;
    margin-bottom: 6rem!important;
  }

  .contact-text img,
  .footer .contact-links img{
    width: 1.5rem;
    min-width: 1.5rem;
    margin-right: 0.8rem;
  }

  .contact-text a{
    color:#5adae4;
    text-decoration: none;
  }

  .footer .contact-links a{
    text-decoration: underline;
  }


/* ANIMATED BUTTON */

.btn:link,
.btn:visited,
button.btn:link,
button.btn:visited {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.1rem 1.2rem 0.2rem 1.2rem;
    display: inline-block;
    border-radius: 1rem;
    transition: all .2s;
}

.btn:hover,
button.btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(90, 218, 228, 0.2);
    color: #fff;
}

.btn:active,
button.btn:active{
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(90, 218, 228, 0.2);
}

.btn-white,
button.btn-white{
  position: relative;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  border-radius: 1rem;
  background-color: #5adae4;
  color: #030619;
  padding: 0.1rem 1.2rem 0.2rem 1.2rem;
}

.btn::after,
button.btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 1rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s;
}

.btn-white::after,
button.btn-white::after{
    background-color: #5adae4;
}

.btn:hover::after,
button.btn:hover::after {
    transform: scaleX(1.4) scaleY(1.6);
    opacity: 0;
}

.btn-animated,
button.btn-animated {
    animation: moveInBottom 5s ease-out;
    animation-fill-mode: backwards;
}

@keyframes moveInBottom {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
}

.header-car {
    bottom: -5rem;
    position: absolute;
    left: 0;
    z-index: 2;
}

.header-car img{
  max-width: 100vw;
  opacity: 0.7;
}

@media (max-width: 991.98px) {
  .header-car {
      bottom: -7vw;
  }
}

.form-check-input:checked {
    background-color: #01f1fa;
    border-color: #01f1fa;
}

.experience-cars img{
  max-width: 5.5rem;
  opacity: 0.6;
  top: 1rem;
  z-index: 2;
}

@media (max-width: 767.98px) {
  .experience-cars img{
    max-width: 10vw;
  }
}

.silver-tray-car{
  top: -7rem;
  position: relative;
}

.silver-tray-car img{
  max-width: 20rem;
}

.rating-stars img{
  width: 0.7rem;
}

.exclusivity img,
.customer-centric img,
.trade-exchange img{
  max-width: 100%;
}

.trade-exchange{
  position: relative;
}

.trade-exchange .headline{
  line-height: 1.2rem;
  margin-top: 2rem;
}

.trade-exchange .headline.medium-headline{
  line-height: 2.5rem;
}

.trade-exchange .headline.one,
.trade-exchange .headline.two{
  position: absolute;
  margin-top: 0;
}

.trade-exchange .headline.two{
  bottom: 5.5rem;
}

@media (max-width: 408px) {
  .trade-exchange .headline.two{
    bottom: 8rem;
  }
}

.trade-exchange img{
  padding-left: 4rem;
}

.fast-delivery.headline{
  line-height: 1.2rem;
}

.counter{
}

.counter .num{
  position: relative;
  background: rgb(131,132,132);
  background: -moz-linear-gradient(0deg, rgba(131,132,132,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(194,195,195,1) 51%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(131,132,132,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(194,195,195,1) 51%, rgba(255,255,255,1) 100%);
  background: linear-gradient(0deg, rgba(131,132,132,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(194,195,195,1) 51%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#838484",endColorstr="#ffffff",GradientType=1);
  border-radius: 1rem;
  border: 2px solid #000;
  padding: 0 1rem;
}

.counter .num span{
  font-family: 'Bebas Neue', sans-serif!important;
  font-size: 12rem;
  line-height: 10rem;
  color: #000;
  opacity: 0.8;
  display: block;
  padding-top: 1.2rem;
}

@media (max-width: 767.98px) {
  .counter .num span{
    font-size: 4rem;
    line-height: 4rem;
  }
}

.counter .num span::before,
.counter .num span::after{
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  content: "";
  width: 4px;
  height: 20px;
  border: 1px solid #000;
  background: rgb(0,0,0);
  background: -moz-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(112,112,112,1) 66%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(112,112,112,1) 66%, rgba(255,255,255,1) 100%);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(112,112,112,1) 66%, rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ffffff",GradientType=1);
}

.counter .num span::before{
  left: 0;
}

.counter .num span::after{
right: 0;
}

.countries img{
  transition: transform .2s;
}

.countries img:hover{
  transform: scale(1.2);
}

.countries img{
  max-width: 5rem;
}

.countries img.germany{
  max-width: 4rem;
}

.countries img.italy{
  max-width: 6rem;
}

@media (max-width: 767.98px) {
  .countries img,
  .countries img.germany,
  .countries img.italy{
    max-width: 3rem;
  }
}

.order{
  position: relative;
  z-index: 2;
}

@media (max-width: 991.98px) {
  .order{
    display: flex;
  }
  .order .one{
    padding-bottom: 1rem!important;
  }
  .order .two{
    padding-top: 0!important;
  }
  .order .three{
    order:4;
    padding-top: 0!important;
  }
  .order .four{
    order:3;
    padding-bottom: 1rem!important;
  }
  .order .five{
    padding-bottom: 1rem!important;
  }
  .order .six{
    padding-top: 0!important;
  }
  .order .seven{
    order:8;
    padding-top: 0!important;
  }
  .order .eight{
    order:7;
    padding-bottom: 1rem!important;
  }
}

.grecaptcha-badge{
  z-index: 3;
}

.header-undersites{
  padding: 2rem;
}

.container-undersites{
  max-width: 50rem;
  padding: 0 2rem;
}

.glow-circle-background{
  position: relative;
}

.glow-circle-background::after,
.glow-circle-background::before{
  position: absolute;
  content: "";
  width: 1px;
  height: 1px;
  background: #1b4e67;
  -webkit-box-shadow: 0px 0px 80px 70px #00c6ca;
  box-shadow: 0px 0px 80px 70px #00c6ca;
  right: 4rem;
  bottom: 14rem;
  border-radius: 100%;
  z-index: 1;
}

.glow-circle-background::before{
  -webkit-box-shadow: 0px 0px 200px 70px #1b4e67;
  box-shadow: 0px 0px 200px 70px #1b4e67;
}

.glow-circle-background.two::after,
.glow-circle-background.two::before{
  right: -2rem;
  bottom: 0rem;
}

.glow-circle-background.three::after,
.glow-circle-background.three::before{
  right: 9rem;
  bottom: 0rem;
}

.contact-block .glow-circle-background::after,
.contact-block .glow-circle-background::before{
  right: inherit;
  left: 3rem;
  top: 12rem;
}

.glow-circle-background.right::after,
.glow-circle-background.right::before{
  right: 2rem;
  left: inherit;
}

.logistics{
  position: relative;
  margin-bottom: 5rem;
  margin-top: 5rem;
  padding: 2rem;
}

.logistics img.logo{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 7rem;
}

@media (max-width: 991.98px) {

  #special-container{
    height: 1870px;
    padding: 1rem;
  }

  .street-signs {
    height: 1870px;
  }

  .logistics-column.one,
  .logistics-column.three{
    padding-left: 2rem;
  }

  .logistics-column.two{
    position: absolute;
    left: 0;
    top: 0;
  }

  .logistics .step-one{
    order: 1;
  }
  .logistics .step-two{
    order: 2;
  }
  .logistics .step-three{
    order: 3;
  }


}

@media (max-width: 400px) {

  #special-container{
    height: 1960px;
    padding: 1rem;
  }
  .street-signs {
    height: 1960px;
  }

}

.step-one{}
.step-two{
  margin-top: 10rem;
}
.step-three{
  margin-top: 10rem;
  position: relative;
}
.step-three .headline,
.step-three p{
  position: relative;
  z-index: 2;
}

.step-three img{
  width: 100%;
  position: relative;
  z-index: 2;
}
.step-three .glow-circle-background::after,
.step-three .glow-circle-background::before{
  left: 0;
  right: inherit;
  bottom: 0;
}
.step-four{
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 991.98px){
  .logistics-column .step-four{
    padding-left: 2rem;
    margin: 10rem 0 0;
  }
}

.step-four .headline,
.step-four p{
  position: relative;
  z-index: 2;
}

.step-four .headline img{
  width: 5rem;
}

.step-four.offers .headline img{
  width: 10rem;
}

.step-four .glow-circle-background::after,
.step-four .glow-circle-background::before{
  right: 1rem;
  bottom: 7rem;
}

/*Europa styles*/

.st0{fill:#ECECEC;stroke:#000000;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:round;}
.st1{fill:#C8102E;}
.st2{fill:#FFFFFF;}
.st3{fill:#EF3340;}
.st4{fill:#FDDA25;}
.st5{fill:#FF0000!important;}
.st6{fill:#DD0000;}
.st7{fill:#FFCE00;}
.st8{fill:#002F6C;}
.st9{fill:#009246;}
.st10{fill:#CE2B37;}
.st11{fill:#C81329;}
.st12{fill:#14275B;}
.st13{fill:#006AA7;}
.st14{fill:#FECC00;}
.st15{fill:#21468B;}
.st16{fill:#AE1C28;}
.st17{fill:#CE1126;}
.st18{fill:#002654;}
.st19{fill:#006600!important;}
.st20{fill:#FFFF00;}
.st21{fill:none;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;}
.st22{fill:none;stroke:#FFFF00;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;}
.st23{fill:none;stroke:#FF0000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;}
.st24{fill:#003399;}
.cls-2 {
  fill: #d7141a;
}

.cls-3 {
  fill: #006a44;
}

.cls-4 {
  fill: #171796;
}

.cls-5 {
  fill: #ee1c25;
}

.cls-6 {
  fill: blue;
}

.cls-7 {
  fill: #0d5eaf;
}

.cls-8 {
  fill: #0b4ea2;
}

.cls-9 {
  fill: #002b7f;
}

.cls-10 {
  fill: #fff;
}

.cls-11 {
  fill: #11457e;
}

.cls-12 {
  fill: #fcd116;
}

.cls-13 {
  fill: #ce1126;
}

.cls-14 {
  fill: #dc143c;
}

.cls-15 {
  fill: #d62612;
}

.cls-16 {
  fill: red;
}

.cls-17 {
  fill: #fdb913;
}

.cls-18 {
  fill: #c1272d;
}

.cls-19 {
  fill: #0087d0;
}

.cls-20 {
  fill: #ffc400;
}

.cls-21 {
  fill: #00966e;
}

.cls-22 {
  fill: #c60b1e;
}

svg g{
  cursor: pointer;
  /*fill: #c4c2c2;*/
  transform-origin: center;
  transform-box: fill-box;
  transition: all .2s ease-in-out;
}

svg path.st0:hover{
  fill: darkgray;
}

.countries svg{
width: 100%;
}

.countries a,
.countries image{
transition: 1s all;
transform-origin: 50% 50%;
transform-box: fill-box;
}

.countries a:hover,
.countries image:hover{
transform: scale(1.2, 1.2);
}

#country-flags svg path{
position: relative;
z-index: 1;
}

#country-flags g{
transition: 1s all;
transform-origin: 50% 50%;
transform-box: fill-box;
}

#country-flags g:hover{
  transform: scale(1.2, 1.2);

}

/* ############ POPUP ############ */

/* Overlay styles */
#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Popup container */
.popup-content {
  position: relative;
  background: #fff;
  border-radius: 8px;
  max-width: 1000px;
  text-align: center;
}

/* Close button (X) */
.close-btn {
  position: absolute;
  top: -3px;
  right: 10px;
  font-size: 31px;
  font-weight: bold;
  z-index: 2;
  cursor: pointer;
  color: #5adae4;
}

.close-btn:hover {
  color: #fff;
}

/* Image styling */
.popup-image {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}