/*
####################################################
Title: DivinePixtures CD Styles
Autor: Divine Pictures
Date: 2023-06-25
####################################################
*/

@font-face {
  font-family: dpHeadFont;
  src: url(../fonts/bebasneue-regular.ttf);
}

@font-face {
  font-family: dpBoldFont;
  src: url(../fonts/inter_semibold.ttf);
}

@font-face {
  font-family: dpBasicFont;
  src: url(../fonts/inter_light.ttf);
}

@font-face {
  font-family: dpThinFont;
  src: url(../fonts/barlowcondensed-thin.ttf);
}

@font-face {
  font-family: dpComicFont;
  src: url(../fonts/amaticsc-regular.ttf);
}

:root {
  scroll-behavior: auto !important; /* Need for lenis smooth scrolling */
  /* Project CD */
  /* Colors Gray */
  --color-DPblack: #161712;
  --color-DPdarkgray: #1f201b;
  --color-DPanthracite: #495057;
  --color-DPmoongray: #525457;
  --color-DPgray: #727477;
  --color-DPmidgray: #929597;
  --color-DPashgray: #adb5bd;
  --color-DPlight: #d2d4d7;
  --color-DPwhite: #e9ecef;

  /* Colors BlueGreens */
  --color-DPbluegray: #333f48;
  --color-DPmidnightblue: #13314a;
  --color-DPlagune2: #014953;
  --color-DPlagune: #015460;
  --color-DPcarbbian: #026c7c;
  --color-DPazure: #008295;
  --color-DPocean: #25547b;

  /* Colors Browngreens */
  --color-DPjungle: #3e4124;
  --color-DPbrown: #5d4800;
  --color-DPgras: #556e1d;
  --color-DPgarden: #416d49;
  --color-DPcappuchino: #b6910f;
  --color-DPsand: #a69b75;

  /* Colors Divisions */

  --color-DPwebStudio: #ffc600;
  --color-DPAccentPink: #d51883;
  --color-DPAccentLime: #d2e806;
  --color-DPbasic: var(--color-DPazure);

  --color-DPrecruting: #0385bc;

  --timeline-gradient: rgb(210, 210, 215) 0%, rgba(210, 212, 215, 1) 50%,
    rgba(206, 233, 228, 0) 100%;
  --white: #fff;
  --black: #323135;
  --crystal: #a8dadd;
  --columbia-blue: #cee9e4;
  --scrollbar: #adb5bd;
  --scrollbar-scroller: #008295;

  /* Fonts */

  --dp-Font-Comic: "dpComicFont";
  --dp-Font-Thin: "dpThinFont";

  --dp-Font-Basic: "dpBasicFont";
  --dp-Font-HEAD: "dpHeadFont";

  --dp-bootstrap: "dpHeadFont"; /* this is used for navigation menu */
  --dp-bootstrap-mono: "Courier New";

  /* MasterSpacing */

  --dp-MasterPadding: 200px;

  --dp-ContactButtonWidthCollapse: 200px;
  --dp-ContactButtonWidthOpen: 220px;

  --dp-NumberOfSliderItems: 11;
  --dp-SliderItemsWidth: 250px;
  --dp-SliderItemsHeight: 250px;
}

body {
  background-color: var(--color-DPblack);
  color: var(--color-DPblack);
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--dp-Font-Basic);
  overflow-x: hidden;
}

:root {
  --dp-MasterPadding: 20px;
}
body {
  font-size: 16px;
}

h1 {
  font-size: 2em;
  font-weight: 100;
  font-family: var(--dp-Font-HEAD);
}
h1 b {
  font-weight: 900;
}

h2 {
  font-family: var(--dp-Font-Basic);
  font-size: 1.4em;
}

h3 {
  font-family: var(--dp-Font-Basic);
  font-size: 1.3em;
  font-weight: 100;
}
h3 b {
  font-weight: 900;
}

u {
  text-decoration-color: var(--color-DPAccentLime);
  text-decoration-thickness: 0.2em;
}

a {
  color: var(--color-DPbasic);
  font-weight: bolder;
  font-size: 1em;
}

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}

/*
####################################################
Nav Bar
####################################################
*/

.navbar-toggler {
  width: 20px;
  height: 20px;
  position: relative;
  transition: 0.5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}

.navbar-toggler span {
  margin: 0;
  padding: 0;
}

.toggler-icon {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: var(--color-DPwhite);
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: all 0.5s ease-in-out;
}

.middle-bar {
  margin-top: 0px;
}

/*when navigation is opend */

.navbar-toggler {
  left: var(--dp-MasterPadding);
  z-index: 20000;
}

/* navigation button when navigation is open */
.navbar-toggler .top-bar {
  margin-top: 0px;
  width: 31px;
  left: 9px;
  transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
  opacity: 0;
  width: 31px;
  left: 9px;
  fill: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
  margin-top: 0px;
  width: 31px;
  left: 9px;
  transform: rotate(-135deg);
}

/* navigation button when nav state is collapsed */

.navbar-toggler.collapsed .top-bar {
  margin-top: -20px;
  width: 31px;
  left: 9px;
  transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  width: 31px;
  left: 9px;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
  margin-top: 20px;
  width: 31px;
  left: 9px;
  transform: rotate(0deg);
}

/*  Navbar content menu when opend  */

.navbar-nav {
  position: absolute;
  top: 0px;
  height: 100vh;
  width: 100vw;
  padding-left: var(--dp-MasterPadding);
  padding-top: 100px;
  background-color: var(--color-DPlight);

  z-index: 2000;
  scroll-behavior: auto;
  overflow-y: scroll;
}

/*  Navigation when  we scroll  */

#mainNav {
  padding-top: 35px;
  padding-bottom: 25px;
  margin: 0 -15px;
  transition: padding-top 0.3s, padding-bottom 0.3s;
  border: none;
}
#mainNav .navbar-brand {
  font-size: 1.75em;
  transition: all 0.3s;
}
#mainNav .navbar-nav .nav-item .nav-link {
  padding: 0.2em 1em !important;
  font-family: var(--dp-Font-HEAD);
  font-size: 1.6em;
}
.nav-item > .nav-link:hover {
  color: var(--color-DPbasic);
}

#mainNav.navbar-shrink {
  padding-top: 0px;
  padding-bottom: 0px;
}
#mainNav.navbar-shrink .navbar-brand {
  font-size: 1.25em;

  opacity: 0;
}

#mainNav .navbar-toggler {
  background-color: transparent;
  width: 50px;
  height: 50px;
  transition: width 0s, height 0s;
}

#mainNav.navbar-shrink .navbar-toggler {
  background-color: var(--color-DPblack);
  width: 50px;
  height: 50px;
  border-radius: 0px;
  transition: width 0s, height 0s;
  transition: background-color 0.3s;
}

#mainNav.navbar-shrink .toggler-icon {
  background: var(--color-DPlight);
}

#mainNav hr {
  margin: 1.3em;
  height: 2px;
  background-color: var(--color-DPazure);
  opacity: 1;
  max-width: 350px;
}
.navBar-Footer-SocialMedia {
  text-align: right;
  padding: 0.2em 3em !important;
}

.navBar-Footer-SocialMedia i {
  font-size: 1.2em;
  padding: 0.2em 0.3em !important;
  color: var(--color-DPblack);
}

.navBar-Footer-SocialMedia i:hover {
  color: var(--color-DPbasic);
}

.navBar-Footer-SocialMedia i:active {
  color: var(--color-DPbluegray);
}

/*
####################################################
General
####################################################
*/

.masterPadding-without-top-offset {
  padding: 0px var(--dp-MasterPadding); /* Frame of content to colored image background */
  margin: 0px;
}

.master-padding-with-top-offset {
  padding: 100px var(--dp-MasterPadding); /* Frame of content to colored image background */
  margin: 0px;
}

.master-center {
  width: 100%;
  justify-content: center;
}

/*
####################################################
Sections   Main Page
####################################################
*/

.section-1 {
  height: 100vh;
}

/*
.parallax::before {
  content: " ";
  display: block;
  background-image: url(../img/Icon_Transparent_Web.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
}


.parallax-inner {
  padding-top: 30%;
  padding-bottom: 30%;
}
*/

/*
.parallax-overlayImage-rec {
  height: 100vh;
  background-image: url(../img/film_studio.svg);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 3;
  opacity: 0.05;
}
*/
.parallax-overlayImage {
  height: 100vh;
  background-image: url(../img/Icon_Transparent_Web.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 3;
  opacity: 0.05;
}

.parallax-overlayColorFilter {
  height: 100vh;
  background-color: var(--color-DPdarkgray);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 2;
  opacity: 0.43;
}

.positiontop {
  margin-top: 0px;
  padding-top: 0px;
}

.center-vertical {
  margin: 0;
  display: flex;
  /*position: relative;*/
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.center-horizontal {
  width: 100%;
  justify-content: center;
}

.BackgroundVideo {
  object-fit: cover;
  height: 100vh;
  width: 100vw;

  position: absolute;
  top: 0;
  left: 0;
}
.RealVideo {
  object-fit: cover;
  height: 100vh;
  width: 100vw;

  position: absolute;
  top: 0;
  left: 0;
}
.video-wrapper {
  /* Telling our absolute positioned video to 
    be relative to this element */
  background-color: #000;
  position: absolute;
  display: block;
  height: 100vh;
  width: 100vw;

  /* Will not allow the video to overflow the 
    container */
  overflow: hidden;

  /* Centering the container's content vertically 
    and horizontally */
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* slogan Box with frame */
.borderBox {
  width: auto; /* Change with FontSize */
  border: 0px solid transparent; /* Change with FontSize */

  border-image: linear-gradient(
    to right,
    #fff 10%,
    transparent 10% 90%,
    #fff 90%
  );

  border-image-slice: 1;
}

.video-overlay-content-box {
  margin: 0px 0px;
  padding: 0px;
  left: var(--dp-MasterPadding);
  position: relative;

  justify-content: left;
  align-items: left;
}

.video-overlay-slogan {
  z-index: 4;
}
.slogan {
  color: var(--color-DPwhite);
  font-family: var(--dp-Font-HEAD);
  opacity: 1;
  font-size: 2em;

  vertical-align: baseline;
}

.slogan-highlighte,
.slogan-highlighte-rec {
  font-family: var(--dp-Font-HEAD);
  opacity: 1;
  font-size: 3em;
  font-weight: bold;
  vertical-align: baseline;
  line-height: 70%;
}
.slogan-highlighte {
  color: var(--color-DPbasic);
}
.slogan-highlighte-rec {
  font-size: 3.7em;
  color: var(--color-DPrecruting);
}

.show-real-button {
  position: absolute;
  right: 0;
  bottom: 0px;
  z-index: 101;
  display: flex;
  transform-origin: 50% -50%;
  rotate: -90deg;
}

.rectangle {
  width: 50px;
  height: 10px;
  background-color: var(--color-DPbasic);

  margin: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: -60px;
}
.show-real-button a {
  margin: 0;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: larger;
  font-family: var(--dp-Font-HEAD);
  margin-left: 10px;
  color: var(--color-DPwhite);
}
.show-real-button a:hover {
  color: var(--color-DPbasic);
}
.show-real-button a:active {
  color: var(--color-DPbluegray);
}

.reel-popup {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;

  background-color: var(--color-DPbasic);
  z-index: 3000;
  visibility: hidden;
  opacity: 0;
  transition: all 700ms ease;
}

.reel-popup.active {
  visibility: visible;

  opacity: 1;
  transition: all 700ms ease;
}

.popupcloser {
  position: absolute;
  right: 5%;
  top: 0px;
  width: 50px;
  height: 60px;
  background-color: black;
}

.popup-close-btn {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: lighter;
  text-align: center;
  color: var(--color-DPlight);
}

.popup-close-btn:hover {
  color: var(--color-DPbasic);
}

.popup-close-btn:active {
  color: var(--color-DPbluegray);
}

/*****************/
/* popup contact */
/*****************/

.contact-popup {
  width: calc(var(--dp-calendar-width) + 20px);
  position: fixed;

  bottom: -20000px;
  right: calc(var(--dp-MasterPadding) + 60px);
  background: var(--color-DPlagune);
  border-radius: 10px;

  color: var(--color-DPlight);
  font-size: 15px;
  opacity: 1;
  z-index: 2999;
  padding: 10px;
}

.contact-popup i {
  font-size: 27px;
}
.contact-popup.active {
  bottom: 20px;

  /* transition: all 1000ms ease-in-out 200ms; */
  transition: background-color 200ms linear;
}
.contact-popup-x {
  overflow: auto;
  position: absolute;
  right: -15px;
  top: -25px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 17px;
  background-color: var(--color-DPcarbbian);
  align-items: center;
  text-align: center;
  padding-top: 5px;
  cursor: pointer;
}

.contact-popup-x:hover {
  color: var(--color-DPmidgray);
}

.popup-contact-step1 {
  /* display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 600ms ease-in-out;
  justify-content: left;
  align-items: left;
  text-align: left;
  */
}

.popup-contact-step1 > div {
  overflow: hidden;
}

.popup-contact-step2 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 600ms ease-in-out;
  margin: 0px;
  padding: 0px;
}
.popup-contact-step2 > div {
  overflow: hidden;
}

.popup-contact-step3 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 600ms ease-in-out;
}
.popup-contact-step3 > div {
  overflow: hidden !important;
}

.popup-contact-step1.enabled {
  grid-template-rows: 1fr;
  transition: grid-template-rows 600ms ease-in-out;
}
.popup-contact-step2.enabled {
  grid-template-rows: 1fr;
  transition: grid-template-rows 600ms ease-in-out;
}

.popup-contact-step3.enabled {
  grid-template-rows: 1fr;
  transition: grid-template-rows 600ms ease-in-out;
}

.smallCarrangement {
  width: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 10fr;
  column-gap: 5px;
  text-align: left;
}
.bigCarrangement {
  display: flexbox;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0px;
  padding: 0px;
}

.contact-popup .controls {
  display: flex;
  justify-content: space-between;
  margin: 20px;
}
.contact-popup .controls button {
  padding: 10px 20px;
  border: none;
  outline: none;
  font-size: 15px;
  border-radius: 20px;
  cursor: pointer;
  color: var(--color-DPwhite);
}

.contact-popup .controls button:hover {
  color: var(--color-DPmidgray);
}

.contact-form {
  justify-content: center;
  text-align: center;
  -webkit-appearance: none;

  margin: 0px;
  padding: 0px;
  background-color: transparent;
}

.inputPlacment {
  justify-content: left;
  text-align: left;
  background-color: transparent;
}

.contact-form-element {
  margin-left: 30px;
  margin-top: 20px;
  width: calc(var(--dp-calendar-width) - 60px);
  height: 40px;
  border: none;
  border-bottom: 2px solid var(--color-DPwhite);
  font-size: 17px;
  outline: none;
}
/*************/
/* Section 2 */
/*************/

.section-2 {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPdarkgray);
  z-index: 4; /* Über 3 wird das DP Logo nicht angezeigt */
  color: var(--color-DPwhite);
}

.section-3 {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPlight);
  z-index: 3;
}

.section-4 {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPbluegray);
  z-index: 3;
  color: var(--color-DPlight);
}
.section-5 {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPlight);
  z-index: 30;
}
.section-6 {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  color: var(--color-DPwhite);
  z-index: 30;
}

.section-7 {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPlight);

  color: var(--color-DPblack);

  z-index: 3;
}

.section-8 {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  top: 0px;
  height: auto;

  background: var(--color-DPbluegray);
  color: var(--color-DPwhite);
  z-index: 30;
}

/*
####################################################
Sections   Web Studio Page
####################################################
*/

.section-1-web {
  height: 100vh;
}
.section-1-web-alternative {
  height: 100vh;
  background-image: url(../img/webstudio/desk1_sw.png);
  display: block;
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -12;
}

.parallax::before {
  content: " ";
  display: block;
  background-image: url(../img/webstudio/laptop_gray_sw.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
}

.parallax-inner {
  padding-top: 30%;
  padding-bottom: 30%;
}

.parallax-overlayImage {
  height: 100vh;
  background-image: url(../img/webstudio/icon_transparent.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 2;
  opacity: 0.03;
}

.parallax-overlayImageDownload {
  height: 100vh;
  background-image: url(../img/webstudio/dark_fill.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 2;
  opacity: 0.8;
}

.section-2-web {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPdarkgray);
  z-index: 4; /* Über 3 wird das DP Logo nicht angezeigt */
  color: var(--color-DPwhite);
}

.section-3-web {
  height: 75vh;
  background-image: url(../img/webstudio/meeting_desktop_view_sw.png);

  /*   background-attachment: fixed !important; */
  background-size: cover !important;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-position: 50%;
  z-index: 4;
}

.section-4-web {
  background-color: var(--color-DPazure);
  height: auto;
  position: relative;
  z-index: 5;
}
.section-5-web {
  height: auto;
  display: block;
  background-position: center;
  background-size: cover;
  z-index: 6;
}
.section-6-web {
  position: relative;
  background-color: var(--color-DPmidgray);
  height: auto;
  overflow-y: visible;
  z-index: 7;
}

.section-7-web {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPlight);

  color: var(--color-DPblack);

  z-index: 3;
}

.section-8-web {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  top: 0px;
  height: auto;

  background: var(--color-DPbluegray);
  color: var(--color-DPwhite);
  z-index: 30;
}

/*
####################################################
Sections   Recruiting Page
####################################################
*/

.section-header-rec {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPlight);

  color: var(--color-DPblack);

  z-index: 3;
}

.parallax-rec::before {
  content: " ";
  display: block;
  background-image: url(../img/recruting/RecrutingImgIphone.png);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
}
.section-1-rec {
  height: 100vh;
}
.section-2-rec {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPdarkgray);
  z-index: 4; /* Über 3 wird das DP Logo nicht angezeigt */
  color: var(--color-DPwhite);
}

.section-3-rec {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPlight);

  color: var(--color-DPblack);
  min-height: 120px;
  z-index: 3;
}

.section-4-rec {
  position: relative;
  background-color: var(--color-DPmidgray);
  height: auto;
  overflow-y: visible;
  z-index: 7;
}

.section-5-rec {
  position: relative;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: var(--color-DPlight);

  color: var(--color-DPblack);

  z-index: 3;
}

.section-6-rec {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  top: 0px;
  height: auto;

  background: var(--color-DPbluegray);
  color: var(--color-DPwhite);
  z-index: 30;
}

/* ----------------------------------------- */

.overlay_fill {
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(49, 50, 40, 0.65);
  opacity: 1;
  /*
  background-image: url(../img/webstudio/dark_fill.png);
  opacity: 0.9;*/
}

.section-1-support {
  min-height: 100vh;
  height: auto;
  background-image: url(../img/support/DesktopLaptopPhone_SW.png);
  background-size: cover !important;
  opacity: 1;
}

.section-legal {
  background-color: var(--color-DPashgray);
  padding-top: 150px;
}
/*
####################################################
Arranging
####################################################
*/

.arrange-box {
  border-width: 0px;
  border-style: none;
  border-radius: 0px;
}

.block {
  padding: 0.5em;
  margin: 0.5em;
}

.text-block {
  padding: 0.5em;
  margin: 0.5em;
}

.text-block-small-margin {
  padding: 0.2em;
  padding-left: 0.3em;
  padding-right: 0.3em;
  margin: 0.2em;
}
/*
.CenterBox {
  padding: 0px 200px;
}
*/
/*
.Videoblock {
  padding: 50px;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 0px;
  margin-bottom: 0px;
}
*/
.dotted-inner-spacing {
  margin: 20px;
}

.dotted-moons {
  background-color: transparent;
  background-image: radial-gradient(
    color-mix(in srgb, var(--color-DPmoongray) 50%, transparent) 1.2px,
    transparent 1.2px
  );
  background-size: 0.85em 0.85em;
}

.dotted-darks {
  background-color: transparent;
  background-image: radial-gradient(
    color-mix(in srgb, var(--color-DPdarkgray) 50%, transparent) 1.2px,
    transparent 1.2px
  );
  background-size: 0.85em 0.85em;
}
.dotted-carbbian {
  background-color: transparent;
  background-image: radial-gradient(
    color-mix(in srgb, var(--color-DPcarbbian) 50%, transparent) 1.2px,
    transparent 1.2px
  );
  background-size: 0.85em 0.85em;
}
.icon-placement {
  width: 4.1em;
  padding-right: 0px;
  padding-top: 0px;
  margin: 0px;
}

/*
.icon-placementLeft {
  width: 140px;
  padding-left: 0px;
  padding-top: 20px;
  margin: 0px;
}
*/
/*
.icon-placementTop {
  width: 100px;
  padding-left: 0px;
  padding-top: 0px;
  margin-top: 0px;
}
*/
.headline-container {
  padding-top: 10px;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 99fr;
  column-gap: 10px;
}
.headline-image {
  max-width: 100%;
}
.headline-text {
  margin: 0px;
  padding-top: 0px;
  padding-left: 0px;
}
.HeadlineCounter {
  margin: 0;
  padding-top: 0px;
  padding-left: 20px;
  width: 140px;
  color: var(--color-DPbasic);
}
.HeadlineCounter span {
  font-size: 90px;
}

.SupportHeadline {
  font-family: var(--dp-Font-HEAD);
  margin-top: 1em;
  line-height: 90%;
  font-size: calc(4em + 2.6vw);
  font-weight: bolder;
  letter-spacing: 0px;
  color: var(--color-DPbasic);
  z-index: 999;
  opacity: 1;
}

.WebDesignNumbersBigAzure {
  font-family: var(--dp-Font-HEAD);
  margin-left: -10px;
  line-height: 90%;
  font-size: 10em;
  font-weight: bolder;
  letter-spacing: 0px;
  color: var(--color-DPbasic);
  z-index: 999;
  opacity: 1;
}

.WebDesignNumbersBigCarbbian {
  line-height: 88%;
  margin-left: -10px;
  font-family: var(--dp-Font-HEAD);
  font-size: 10em;
  font-weight: bold;
  letter-spacing: 0px;
  color: var(--color-DPcarbbian);
}
.WebDesignTextHeading {
  line-height: 90%;
  font-family: var(--dp-Font-HEAD);
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--color-DPwhite);
}
.WebDesignTextHeadingExtraWhite {
  line-height: 90%;
  font-family: var(--dp-Font-HEAD);
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--color-DPwhite);
}
.WebDesignTextLight {
  font-family: var(--dp-Font-Basic);
  font-size: 1em;
  letter-spacing: 0px;
  font-weight: lighter;
  color: var(--color-DPwhite);
}
/*
####################################################
Carousel
####################################################
*/

.carouselDiv {
  width: 100%;
}

.carousel-inner {
  height: auto;
}

.carousel-item {
  height: 100%;
}

.carousel-item-content {
  background-color: var(--color-DPlight);
  margin: 10px;
  padding: 10px;
  height: 100%;
  display: flex;
}

.carousel-control-prev-icon {
  margin-left: -50px;
}
.carousel-control-next-icon {
  margin-right: -50px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 50px;
  width: 50px;
  padding: 0px;

  outline: transparent;
  background-color: transparent;
  background-size: 100%, 100%;
  border-radius: 0%;
  background-color: var(--color-DPblack);
  border: 1px solid var(--color-DPblack);
}
.carousel-control-prev-icon:focus,
.carousel-control-prev-icon:hover,
.carousel-control-next-icon:focus,
.carousel-control-next-icon:hover {
  background-color: var(--color-DPmoongray);
  border: 1px solid var(--color-DPblack);
}

.carousel-control-prev-icon:active,
.carousel-control-next-icon:active {
  background-color: var(--color-DPbluegray);
  border: 1px solid var(--color-DPbluegray);
}

/*
####################################################
Buttons
####################################################
*/

.ContactButton {
  position: absolute;
  background-color: transparent;
  position: relative;
  padding: 10px 20px;
  margin: 10px 0px;
  font-family: var(--dp-Font-Basic);
  font-weight: bold;
  font-size: 16px;
  border: 2px solid var(--color-DPblack);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-DPblack);
  cursor: pointer;
  overflow: hidden;
  width: var(--dp-ContactButtonWidthCollapse);
  white-space: nowrap;
  transition: 0.4s;
}
.ContactButton::after {
  display: inline-block;
  font-family: FontAwesome;

  opacity: 0;
  content: "";
}
.ContactButton:hover:after {
  opacity: 1;

  content: "\f101";
  transform: translateX(5px);
  transition: 0.4s;
}

.ContactButton:hover {
  width: var(--dp-ContactButtonWidthOpen);
  transition: 0.3s;
}

.ContactButtonGreen {
  position: absolute;
  background-color: transparent;
  position: relative;
  padding: 10px 20px;
  margin: 10px 0px;
  font-family: var(--dp-Font-Basic);
  font-weight: bold;
  font-size: 16px;
  border: 2px solid var(--color-DPAccentLime);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-DPAccentLime);
  cursor: pointer;
  overflow: hidden;
  width: var(--dp-ContactButtonWidthCollapse);
  white-space: nowrap;
  transition: 0.4s;
}

.ContactButtonGreen::after {
  display: inline-block;
  font-family: FontAwesome;

  opacity: 0;
  content: "";
}
.ContactButtonGreen:hover:after {
  opacity: 1;

  content: "\f101";
  transform: translateX(5px);
  transition: 0.4s;
}

.ContactButtonGreen:hover {
  width: var(--dp-ContactButtonWidthOpen);
  transition: 0.3s;
}

.more-info-button {
  position: absolute;
  background-color: var(--color-DPbasic);
  position: relative;
  padding: 10px 20px;
  margin: 10px 0px;
  font-family: var(--dp-Font-Basic);
  font-weight: bold;
  font-size: 16px;
  border: 2px solid var(--color-DPbasic);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-DPwhite);
  cursor: pointer;
  overflow: hidden;
  width: var(--dp-ContactButtonWidthCollapse);
  white-space: nowrap;
  transition: 0.4s;
}

.more-info-button::after {
  display: inline-block;
  font-family: FontAwesome;

  opacity: 0;
  content: "";
}
.more-info-button:hover:after {
  opacity: 1;

  content: "\f101";
  transform: translateX(15px);
  transition: 0.4s;
}

.more-info-button:hover {
  width: var(--dp-ContactButtonWidthOpen);
  transition: 0.3s;
}

.more-info-button-rec {
  position: absolute;
  background-color: var(--color-DPrecruting);
  position: relative;
  padding: 10px 20px;
  margin: 10px 0px;
  font-family: var(--dp-Font-Basic);
  font-weight: bold;
  font-size: 16px;
  border: 2px solid var(--color-DPbasic);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-DPwhite);
  cursor: pointer;
  overflow: hidden;
  width: var(--dp-ContactButtonWidthCollapse);
  white-space: nowrap;
  transition: 0.4s;
}

.more-info-button-rec::after {
  display: inline-block;
  font-family: FontAwesome;

  opacity: 0;
  content: "";
}
.more-info-button-rec:hover:after {
  opacity: 1;

  content: "\f101";
  transform: translateX(15px);
  transition: 0.4s;
}

.more-info-button-rec:hover {
  width: var(--dp-ContactButtonWidthOpen);
  transition: 0.3s;
}

.support-button {
  position: absolute;
  background-color: var(--color-DPlagune2);
  position: relative;
  padding: 10px 20px;
  margin: 10px 0px;
  font-family: var(--dp-Font-Basic);
  font-weight: bold;
  font-size: 16px;
  border: 2px solid var(--color-DPlagune2);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-DPwhite);
  cursor: pointer;
  overflow: hidden;
  width: var(--dp-ContactButtonWidthCollapse);
  white-space: nowrap;
  transition: 0.4s;
}

.support-button::after {
  display: inline-block;
  font-family: FontAwesome;

  opacity: 0;
  content: "";
}
.support-button:hover:after {
  opacity: 1;

  content: "\f101";
  transform: translateX(15px);
  transition: 0.4s;
}

.support-button:hover {
  width: var(--dp-ContactButtonWidthOpen);
  transition: 0.3s;
}

.support-area-button {
  min-width: 370px;
  position: absolute;
  background-color: var(--color-DPbasic);
  position: relative;
  padding: 10px 20px;
  margin: 0.5em 0px;
  font-family: var(--dp-Font-Basic);
  font-weight: bold;
  font-size: 1em;
  border: 2px solid var(--color-DPbasic);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-DPwhite);
  cursor: pointer;
  overflow: hidden;

  white-space: nowrap;
  transition: 0.4s;
}

.support-area-button:hover {
  background-color: var(--color-DPlagune2);
  border: 2px solid var(--color-DPlagune2);
  color: var(--color-DPwhite);
}

.close-btn,
.submit-btn {
  background-color: var(--color-DPbasic);
  border: 2px solid var(--color-DPcarbbian);
}
/*
####################################################
Employee Images 
####################################################
*/
.employee {
  padding: 1em;
  padding-top: 3.7em;
  margin: 0;
}
.employee .image-border {
  justify-content: center;
  display: flex;
  align-items: center;
  bottom: 0px;
  margin: auto;
}
.employee-img {
  border-radius: 50%;
  width: 90%;
  border: 3px solid transparent;
  background-image: linear-gradient(
      var(--color-DPashgray),
      var(--color-DPashgray)
    ),
    linear-gradient(to bottom, var(--color-DPazure), var(--color-DPazure));
  background-origin: border-box;
  background-clip: content-box, border-box;
}

/*
###################################################
Contact 
###################################################
*/

.contact-SocialMedia {
  padding: 0;
  margin-top: 1em;
  font-weight: 900;
  font-size: 0.7em;
}

.contact-SocialMedia i {
  font-size: 1.6em;
  padding: 0.2em 0.3em !important;
  color: var(--color-DPblack);
}

.contact-SocialMedia i:hover {
  color: var(--color-DPazure);
}

.contact-SocialMedia i:active {
  color: var(--color-DPazure);
}

.contact-text p {
  font-size: 0.78em;
  color: var(--color-DPanthracite);
}

.contact-text a {
  font-size: 0.85em;
  color: var(--color-DPanthracite);
}
.contact-text a:hover {
  color: var(--color-DPazure);
}
.contact-text a:active {
  color: var(--color-DPazure);
}

/*
####################################################
Footer
####################################################
*/

.footer-arrangement {
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
  font-family: var(--dp-Font-Thin);
  font-size: 0.9em;
}

.legalLink a {
  font-family: var(--dp-Font-Thin);
  color: var(--color-DPwhite);
}
.legalLink a:hover {
  color: var(--color-DPazure);
}
.legalLink a:active {
  color: var(--color-DPAccentPink);
}

/*
####################################################
Accordion
####################################################
*/

/************************************************* 
    Accordion element - open and close elements
**************************************************/

.accordionhr {
  height: 0px;
  border-color: var(--color-DPdarkgray);

  border-radius: 0%;

  /*
    width: 180px;
    margin-left: 0;
    */
}

.accordion {
  text-align: left;
  color: var(--color-DPdarkgray);
  max-width: 500px;
  font-size: 0.95em;
}

.accordion .contentBx {
  position: relative;
  margin: 10px 20px;
}

.accordion .contentBx .label {
  position: relative;
  padding: 10px;
  cursor: pointer;
  font-weight: 600;
}

.accordion .contentBx .label::before {
  content: "+";
  position: absolute;
  top: 40%;
  right: -20px;

  font-size: 1.5em;
}

.accordion .contentBx.active .label::before {
  content: "-";
}

.content {
  overflow-y: hidden;
  /* white-space: nowrap; */
}

.accordion .contentBx .content {
  position: relative;
  height: 0;
  top: 30px;
  padding-left: 10px;
  overflow: hidden;
  transition: 0.5s;
  overflow-y: auto;
}

.accordion .contentBx.active .content {
  height: auto;
  top: 0px;
  padding: 10px;
}

/*
####################################################
Silde 
####################################################
*/

.sliderbox {
  display: grid;
  place-items: center;
  width: 100%;
}

.slider {
  height: var(--dp-SliderItemsHeight);
  margin: auto;
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.slider-track {
  display: flex;
  width: calc(var(--dp-SliderItemsWidth) * 5);
  animation: ScrollThroughAnimation 15s linear infinite;
}

@keyframes ScrollThroughAnimation {
  0% {
    transform: translateX(0);
  }
  7% {
    transform: translateX(0);
  }
  9% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 1));
  }
  16% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 1));
  }
  18% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 2));
  }
  25% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 2));
  }
  27% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 3));
  }
  34% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 3));
  }
  36% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 4));
  }
  43% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 4));
  }
  45% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 5));
  }
  52% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 5));
  }
  54% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 6));
  }
  61% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 6));
  }
  63% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 7));
  }
  70% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 7));
  }
  72% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 8));
  }
  79% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 8));
  }
  81% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 9));
  }
  88% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 9));
  }
  90% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 10));
  }

  98% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 10));
  }
  100% {
    transform: translateX(calc(-1 * var(--dp-SliderItemsWidth) * 11));
  }
}

.slideElement {
  height: var(--dp-SliderItemsHeight);
  width: var(--dp-SliderItemsWidth);
  display: flex;
  align-items: center;
  padding: 15px;
}

.sliderimg {
  width: var(--dp-SliderItemsWidth);
  transition: transfprm 1s;
  padding: 20px;
}

.sliderimg:hover {
  transform: scale(1.2);
}

/*
####################################################
numCounter 
####################################################
*/

/*
####################################################
TimeLine 
####################################################
*/

.timeline {
  display: block;

  background-color: var(--color-DPlight);
}

.timeline ol {
}

.timeline h3 {
  background-color: var(--color-DPrecruting);
  color: #fff;
  font-weight: bold;
  padding: 5px;
}
.timeline li {
  list-style-type: none;
  height: auto;
  margin-top: 30px;
}

.timeline div {
  height: auto;
}

@media (min-width: 576px) {
  .timeline {
    position: relative;
    white-space: nowrap;

    padding: 0 30px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px auto;
    grid-gap: 20px;
  }
  .timeline {
    display: block;

    background-color: var(--color-DPlight);
  }

  .timeline::before,
  .timeline::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 30px;
    width: 100px;
    z-index: 2;
  }

  .timeline::after {
    right: 0;
    height: 100%;
    background: linear-gradient(270deg, var(--timeline-gradient));
  }

  .timeline::before {
    left: 0px;
    height: 100%;
    background: linear-gradient(90deg, var(--timeline-gradient));
  }

  .timeline ol::-webkit-scrollbar {
    height: 12px;
  }

  .timeline ol::-webkit-scrollbar-thumb,
  .timeline ol::-webkit-scrollbar-track {
    border-radius: 92px;
  }

  .timeline ol::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
  }

  .timeline ol::-webkit-scrollbar-track {
    background: var(--scrollbar-scroller);
  }

  .timeline ol {
    font-size: 0;
    padding: 300px 0;
    transition: all 1s;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-color: var(--scrollbar-scroller) var(--scrollbar);
  }

  .timeline ol li {
    position: relative;
    display: inline-block;
    list-style-type: none;
    width: 160px;
    height: 6px;
    background: var(--black);
    scroll-snap-align: start;
  }

  .timeline ol li:last-child {
    width: 340px;
  }

  .timeline ol li:not(:first-child) {
    margin-left: 14px;
  }

  /* Time Dots */
  .timeline ol li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(100% - 1px);
    bottom: 0;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 2px solid var(--color-DPrecruting);
    background: var(--color-DPlight);
    z-index: 1;
  }

  /* Time Block */
  .timeline ol li div {
    position: absolute;
    left: calc(100% - 9px);
    width: 290px;
    padding: 15px;

    font-size: 0.8rem;
    font-weight: 700;
    white-space: normal;
    color: var(--color-DPblack);
    background: transparent;
    border: 1px solid var(--color-DPmidgray);
    border-top: 3px solid var(--color-DPrecruting);
    border-radius: 0;
  }

  .timeline h3 {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-DPblack);
    background-color: transparent;
  }

  .timeline ol li div::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 26px;
    width: 1px;
    height: 20px;

    background: var(--color-DPmidgray);
  }

  .timeline ol li:nth-child(odd) div {
    top: -36px;
    transform: translateY(-100%);
    border-radius: 0;
  }

  .timeline ol li:nth-child(odd) div::before {
    top: 100%;
    border-width: 8px 8px 0 0;
    border-color: var(--white) transparent transparent transparent;
  }

  .timeline ol li:nth-child(even) div {
    top: calc(100% + 36px);
  }

  .timeline ol li:nth-child(even) div::before {
    top: -22px;
    border-width: 8px 0 0 8px;
    border-color: transparent transparent transparent var(--white);
  }
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– 
        GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 800px) {
  .timeline {
    display: block;
  }

  .timeline::before,
  .timeline::after {
    width: 50px;
  }

  .timeline::before {
    left: 0;
  }

  .timeline .info {
    display: none;
  }
}

/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 5 breakpoints
*/

/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/

@media (min-width: 576px) {
  body {
    font-size: 16px;
  }
}

/* Medium devices (tablets - iphone max landscape, 768px and up) The navbar toggle appears at this breakpoint */

@media (min-width: 768px) {
  :root {
    --dp-MasterPadding: 100px;
  }
  body {
    font-size: 18px;
  }

  .parallax-rec::before {
    background-image: url(../img/recruting/RecrutingImgIpad.png);
  }
}

/* Large devices (desktops , ipad mini landscape, ipad landscape, ipad pro 12.9 portait, 992px and up) */

@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

/* Extra large devices (large desktops, ipad pro 12.9 landscape 1200px and up) */

@media (min-width: 1200px) {
  :root {
    --dp-MasterPadding: 80px;
  }
  body {
    font-size: 25px;
  }
  .parallax-rec::before {
    background-image: url(../img/recruting/RecrutingImgLandscape.png);
  }
}

/* Extra extra large devices (extra large desktops, 1400px and up) */

@media (min-width: 1400px) {
  body {
    font-size: 25px;
  }
}

@media (min-width: 1800px) {
  :root {
    --dp-MasterPadding: 200px;
  }
  body {
    font-size: 25px;
  }
}