.bg-light {
  background-color:#fff !important;
}

hr {
  color: #D70A8D;
  margin: 0;
}

.navbar {
  background-color: rgb(179, 212, 255, 0.8) !important;
}

.logo {
  height: 50px;
  width: 95px;
  margin-left: 15px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.nav-link {
  background-color: #D70A8D !important;
  color: white !important;
  font-size: 20px !important;
  margin: 4px 15px 0px 15px !important;
  border-radius: 5px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease 0s;
  font: 500 normal 1.2em 'tahoma' !important;
  letter-spacing: 1.5px;
}

.nav-link:hover {
  background-color: #118DFF !important;
}

.nav-link.active {
  background-color: #118DFF !important; 
}


.dropdown-menu {
  background-color: #118DFF !important;
  width: 250px;
}

.dropdown-item {
  color: white !important;
  font-size: 20px;
}
.dropdown-item:hover {
  color: black !important;
}

#navbarDropdown {
  background-color: #118DFF !important;
  padding:10px;
  font-size: 20px !important;
  box-shadow: none !important;
}
#navbarDropdown:hover {
  background-color: #118DFF !important;
  padding:10px;
  font-size: 20px !important;
  color: black !important;
  box-shadow: none !important;
}

h2 {
  background-color: #118DFF;
  color: whitesmoke;
  border-radius: 10px;
  padding: 10px;
  margin-left: -10px;
  width: 103% !important;
  letter-spacing: 2.5px !important;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5em;
}

h4 {
  letter-spacing: 2px !important;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 1.5em;
}

.text-center {
  text-align: left !important;
  font: 500 normal 1.3em 'tahoma';
  letter-spacing: 1.5px;
  line-height: 1.3;
  letter-spacing: 2px !important;
}

.navigationListProjBesch {
  list-style-type: none;
  display: inline-block;
  position: fixed;
  top: 100px;
  left: 10px;
  z-index: 1000;
}

#Upbutton {
  text-decoration: none;
  display: inline-block;
  background-color: #D70A8D;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#Upbutton::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
}
#Upbutton:hover {
  cursor: pointer;
  background-color: #118DFF;
}
#Upbutton:active {
  background-color: #118DFF;
}
#Upbutton.showup {
  opacity: 1;
  visibility: visible;
}

.OverMij {
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.OverMij:nth-of-type(even) {
  transform: translateX(-100%);
}

.OverMij.show {
  transform: translateX(0);
}

.overmijText {
  margin-left: -60px;
  width: 650px;
}

.overmijvoorstellen {
  margin-left: 10px;
  width: 700px !important;
}

.portret {
  margin-left: 320px;
  margin-top: 50px;
  height: 400px;
  width: 400px;
  position: right;
}

.DvdO {
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.DvdO:nth-of-type(even) {
  transform: translateX(-100%);
}

.DvdO.show {
  transform: translateX(0);
}

.OvdO {
  
  transform: translateX(73.5%);
  transition: transform 0.8s ease;
}

.OvdO:nth-of-type(even) {
  transform: translateX(73.5%);
}

.OvdO.show {
  transform: translateX(0);
}

.DvdOIMG {
  transform: translateX(70%);
  transition: transform 0.8s ease;
}

.DvdOIMG:nth-of-type(even) {
  transform: translateX(70%);
}

.DvdOIMG.show {
  transform: translateX(0);
}

.BrabantZorg {
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.BrabantZorg:nth-of-type(even) {
  transform: translateX(-100%);
}

.BrabantZorg.show {
  transform: translateX(0);
}

.BrabantZorgIMG {
  margin-left: 100px !important;
  transform: translateX(22%);
  transition: transform 0.8s ease;
}


.BrabantZorgIMG:nth-of-type(even) {
  transform: translateX(22%);
}

.BrabantZorgIMG.show {
  transform: translateX(0);
}

.bedrijven {
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.bedrijven:nth-of-type(even) {
  transform: translateX(-100%);
}

.bedrijven.show {
  transform: translateX(0);
}

.BedrijfCompaan {
  transform: translateX(-100%);
  transition: transform 0.8s ease;
}

.BedrijfCompaan:nth-of-type(even) {
  transform: translateX(-100%);
}

.BedrijfCompaan.show {
  transform: translateX(0);
}

.BedrijfMedido {
  transform: translateX(70%);
  transition: transform 0.5s ease;
}

.BedrijfMedido:nth-of-type(even) {
  transform: translateX(70%);
}

.BedrijfMedido.show {
  transform: translateX(0);
}

.BedrijfBince {
  transform: translateX(70%);
  transition: transform 1s ease;
}

.BedrijfBince:nth-of-type(even) {
  transform: translateX(70%);
}

.BedrijfBince.show {
  transform: translateX(0);
}

.AvdO {
  transform: translateX(39%);
  transition: transform 1s ease;
}

.AvdO:nth-of-type(even) {
  transform: translateX(39%);
}

.AvdO.show {
  transform: translateX(0);
}

.PStelling {
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.PStelling:nth-of-type(even) {
  transform: translateX(-100%);
}

.PStelling.show {
  transform: translateX(0);
}

.VStelling {
  transform: translateX(39%);
  transition: transform 1s ease;
}

.VStelling:nth-of-type(even) {
  transform: translateX(39%);
}

.VStelling.show {
  transform: translateX(0);
}

.DStelling {
  transform: translateX(39%);
  transition: transform 1s ease;
}

.DStelling:nth-of-type(even) {
  transform: translateX(39%);
}

.DStelling.show {
  transform: translateX(0);
}

.PAanpak {
  width: 17.5em; 
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.PAanpak:nth-of-type(even) {
  transform: translateX(-100%);
}

.PAanpak.show {
  transform: translateX(0);
}

.ProjectaanpakIMG {
  margin-left: 100px !important;
  transform: translateX(15%);
  transition: transform 0.4s ease;
}

.ProjectaanpakIMG:nth-of-type(even) {
  transform: translateX(15%);
}

.ProjectaanpakIMG.show {
  transform: translateX(0);
}

.DOTF {
  transform: translateX(39%);
  transition: transform 1s ease;
}

.DOTF:nth-of-type(even) {
  transform: translateX(39%);
}

.DOTF.show {
  transform: translateX(0);
}

.DOTimg {
  margin-bottom: 3px;
  transform: translateX(-800%);
  transition: transform 1s ease;
}

.DOTimg:nth-of-type(even) {
  transform: translateX(-800%);
}

.DOTimg.show {
  transform: translateX(0);
}

.TScope {
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.TScope:nth-of-type(even) {
  transform: translateX(-100%);
}

.TScope.show {
  transform: translateX(0);
}

.TMoSCoW {
  transform: translateX(39%);
  transition: transform 1s ease;
}

.TMoSCoW:nth-of-type(even) {
  transform: translateX(39%);
}

.TMoSCoW.show {
  transform: translateX(0);
}

.GvD {
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.GvD:nth-of-type(even) {
  transform: translateX(-100%);
}

.GvD.show {
  transform: translateX(0);
}

.TUsers {
  transform: translateX(39%);
  transition: transform 1s ease;
}

.TUsers:nth-of-type(even) {
  transform: translateX(39%);
}

.TUsers.show {
  transform: translateX(0);
}

/* kaarten voor Compaan, medido en Bince */

.bedrijven {
  text-align: center !important;
  width: 100%;
  margin-left: -15px !important;
}

.bedrijfText {
  height: 240px;
  font: 500 normal 0.85em 'tahoma' !important;

}

.card-header {
  background-color: #D70A8D !important;
  text-align: center !important;
}

.w-100 {
  background-color: #D70A8D !important;
  color: white !important;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}
.w-100:hover {
  background-color:#118DFF !important;
  color: white !important;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}


 /* DASHBOARD-DISIGN */

.materialDesButton {
  background-color:#118DFF !important;
  color: white !important;
}
.materialDesButton:hover {
  background-color: #D70A8D !important;
  color: white !important;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}

 #show_image_popup{
  width: 700px;
  height: auto;
  border: 2px solid #333;
  box-sizing: border-box;
  padding: 2px;
  text-align: center;
  z-index: 1000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(179, 212, 255, 1);
  display: none;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}
#show_image_popup img{
  max-width: 100%;
  height: auto;
}

#all-images .active{
  filter: blur(5px);
}
.close-btn-area{
  width: 100%;
  text-align: right;
  margin: 5px 0px 5px -5px;
  font-size: 15px;
}
.close-btn-area button{
  background-color: #fff;
  cursor: pointer;
}
#close-btn {
  height: 30px !important;
}
#popup-text {
  margin-top: 10px;
  margin-left: 10px;
  padding: 10px;
}


.DashboardDesign {
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.DashboardDesign:nth-of-type(even) {
  transform: translateX(-100%);
}

.DashboardDesign.show {
  transform: translateX(0);
}

.Datavisualisatie {
  width: 1250px !important;
  background-color: #D70A8D;
  transform: translateX(23.5%);
  transition: transform 1s ease;
}

.Datavisualisatie:nth-of-type(even) {
  transform: translateX(23.5%);
}

.Datavisualisatie.show {
  transform: translateX(0);
}

.DatavisualisatieIMG {
  padding: 10px;
  transform: translateX(63%);
  transition: transform 1s ease;
}

.DatavisualisatieIMG:nth-of-type(even) {
  transform: translateX(63%);
}

.DatavisualisatieIMG.show {
  transform: translateX(0);
}

.TMaterialDesign {
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.TMaterialDesign:nth-of-type(even) {
  transform: translateX(-100%);
}

.TMaterialDesign.show {
  transform: translateX(0);
}

.MaterialDesignText {
  margin-top: 12px;
}

.MaterialDesignIMG {
  padding: 10px;
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.MaterialDesignIMG:nth-of-type(even) {
  transform: translateX(-100%);
}

.MaterialDesignIMG.show {
  transform: translateX(0);
}

/* ------------------------------DASHBOARD ONTWIKKELING------------------------------ */

.home {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.TitelProto {
  width: 500px;
  padding: 10px;
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.TitelProto:nth-of-type(even) {
  transform: translateX(-100%);
}

.TitelProto.show {
  transform: translateX(0);
}

.eerstepr {
  margin-left: 90px !important;
}

.EerstePrMiBI {
  width: 500px;
}

.EerstePrMiBI-IMG {
  margin-left: 90px !important;
}

.TitelProtoMid {
  text-align: center !important;
  padding: 10px;
  font-size: 27px;
  transform: translateX(-100%);
  transition: transform 1s ease;
}
.TitelProtoMid:nth-of-type(even) {
  transform: translateX(-100%);
}

.TitelProtoMid.show {
  transform: translateX(0);
}

.D41IMG {
  height: 100%;
  width: 100%;
}
.D42IMG {
  height: 100%;
  width: 100%;
}

.pr2DOT {
  width: 800px;
  overflow: visible !important;
}

.imgPT7 {
  margin-left: -140px;
  width: 1100px;
  height: 650px;
}


/* -----------------VOORBLAD NU INDEX.HTML----------------------- */

#indexAchtergrond, #overmijAchtergrond  {
  background-image: url("./images/indexAchtergrond2.8.png") !important;
  background-repeat: no-repeat;
  background-size: 100%;
}

.indexBlokL {
  margin-left: -75px;
}

.wordAnime {
  height: 70px;
  width: 800px;
  border: 5px solid rgb(123, 175, 248);
  border-radius: 10px;
}

.word {
  font: 700 normal 2.5em 'tahoma';
  color: rgb(123, 175, 248);
  text-align: center;
  padding: 5px;
  overflow: hidden;
  letter-spacing: 7px;
}
.word span {
  display: inline-block;
  opacity: 0;
  animation: fadeSlide 1.5s forwards;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateX(200px);
  } 
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  } 
  to {
    opacity: 0;
    transform: translateX(-600px);
  }
}



.DGZ {
  width: 100% !important;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 2.5em;
}

.dataGedrZorg {
  padding-top: 20px;
  padding-bottom: 20px;
  width: 5em;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight:700;
  font-style: normal;
  font-size: 12em;
  line-height: 170px;

}

.indexText1 {
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;

}

/* FOOTER */

.footer {
  margin-left: -10em;
}

.footerNamen1 {
  font-size: 1em;
}
.footerNamen2 {
  font-size: 1em;
}
.footerNamen3 {
  margin: 0px;
}

.footerTitel {
  padding-bottom: 5px;
  text-decoration: underline;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2em;
}

.footerText {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1em;
}


/* -----------------ADVIESRAPPORT------------------ */

.deelvraag {
  background-color: #D70A8D;
  color: whitesmoke;
  border-radius: 10px;
  padding: 10px;
  margin-left: -10px;
  width: 103% !important;
  font: 500 normal 1.4em 'tahoma' !important;
}

.adviesLi {
  margin-top: 30px;
  margin-bottom: 30px;
  font: 550 normal 1.2em 'tahoma' !important;
}

.icon-text {
  display: flex;
  align-items: center;
}
.icon-text svg {
  margin-left: -10px;
  margin-right: 10px;
  margin-bottom: 40px;
  color: #118DFF;
}
.icon-text-D1 {
  display: flex;
  align-items: center;
}
.icon-text-D1 svg {
  margin-left: -10px;
  margin-right: 10px;
  margin-bottom: 40px;
  color: #D70A8D;
}
.icon-text-D2 {
  display: flex;
  align-items: center;
}
.icon-text-D2 svg {
  margin-left: -10px;
  margin-right: 10px;
  margin-bottom: 15px;
  color: #D70A8D;
}
.icon-text-D3 {
  display: flex;
  align-items: center;
}
.icon-text-D3 svg {
  margin-left: -10px;
  margin-right: 10px;
  margin-bottom: 40px;
  color: #D70A8D;
}
.icon-text-D4 {
  display: flex;
  align-items: center;
}
.icon-text-D4 svg {
  margin-left: -10px;
  margin-right: 10px;
  margin-bottom: 40px;
  color: #D70A8D;
}
.icon-text-D5 {
  display: flex;
  align-items: center;
}
.icon-text-D5 svg {
  margin-left: -10px;
  margin-right: 10px;
  margin-bottom: 15px;
  color: #D70A8D;
}



/* -----------------OVER MIJ------------------ */

#overmijAchtergrond  {
  background-image: url("./images/overmijAchtergrond1.3-2.png") !important;
  background-repeat: no-repeat;
  background-size: 100%;
}

:root {
  --main-color: #D70A8D;
  --secondary-color: #2c4755;
  --section-padding: 40px;
  --section-background: #fff;
  --main-duration: 0.5s;}

.my-skills {
	padding-top: 0px;
	padding-bottom: 0px;
	overflow: hidden;
  width: 100%;
}

.skillsCol1 {
  margin-left: -70px;
}
.skillsCol2 {
  margin-left: -200px;
}
.ulSkills1 {
  width: 25em;
}
.ulSkills2 {
  width: 25em;
}

.my-skills .progress {width: 50%; height: 25em; background-color:#fff;}

h3 {font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2em;}


.my-skills .progress .technique {margin-left: 0px; width: 100%;}

.progress .technique .bar {
    background-color: #D9ECFE;
    height: 30px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 20px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.progress .technique .bar:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.technique .bar span {
	background-color: var(--main-color);
	height: 30px;
    float: left;
	text-align: right;
	color: #fff;
	font-weight: bold;
  font-size: 1.3em;
  padding-top: 5px;
}
.HTML {
    width: 80%;
    animation: HTML 3s;
}
@keyframes HTML {
    0% {
        width: 0%;
    }
    100% {
        width: 80%;
    }
}
.CSS {
    width: 75%;
    animation: CSS 3s;
}
@keyframes CSS {
    0% {
        width: 0%;
    }
    100% {
        width: 75%;
    }
}
.javascript {
    width: 60%;
    animation: javascript 3s;
}
@keyframes javascript {
    0% {
        width: 0%;
    }
    100% {
        width: 60%;
    }
}
.indesign2 {
  width: 60%;
  animation: indesign 3s;
}
@keyframes indesign {
  0% {
      width: 0%;
  }
  100% {
      width: 60%;
  }
}
.illustrator2 {
  width: 90%;
  animation: illustrator 3s;
}
@keyframes illustrator {
  0% {
      width: 0%;
  }
  100% {
      width: 90%;
  }
}

/* -----------------LEERUITKOMSTEN----------------- */

.icon-text-leeruitkomsten {
  display: flex;
  align-items: center;
}
.icon-text-leeruitkomsten svg {
  margin-left: 0px;
  margin-right: 10px;
  margin-bottom: 15px;
  color: #118DFF;
}

.icon-text-LU1 {
  display: flex;
  align-items: center;
}
.icon-text-LU1 svg {
  margin-left: -10px;
  margin-right: 10px;
  margin-bottom: 15px;
  color: #D70A8D;
}
.lu1subonderdelen {
  margin-left: 20px;
}