/* Portfolie Marsha van Bezouw*/

/*algemeen*/
body {
    width: 100%;
    height: 100%;
    font-family: verdana;
    margin: 0;
}

lu {
    margin: 0;
}
header{
    background-color: #ffc0cb;
    height: 50px;
    width: 100%;
}

.mvb{
    color: white;
    margin: auto;
    text-shadow: 1px 1px 4px #000000;
}
.navigatie {
    list-style: none;
    display: flex;
    /*align-items: baseline;*/
    font-size: 17px;
    /*overflow: hidden;*/
    background-color: pink;
}
  
  .navigatie a {
    /*float: left;*/
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    text-shadow: 1px 1px 4px #000000;
  }
  
  .navigatie a:hover {
    background-color: lightgray;
    color: black;
    text-shadow: 1px 1px 4px #ffffff;
  }

.dropdown .dropbtn {   
    border: none;
    outline: none;
    background-color: inherit;
}

.dropdown:hover .dropbtn {
    background-color: gray;

}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: gray;
    width: 110px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
}

.dropdown-content a {
    color: white;
    display: block;
    text-align: center;
    font-size: 14px;
}

.dropdown-content a:hover {
    background-color: lightgray;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.kopjea {
    margin-left: 300px;
}

.kopjeb {
    margin-left: 600px;
}

.nav {
    height: 550px;
    width: 100%;
    color: white;
    font-size: 100px;
}

.onderwerp {
    text-align: center;
    padding: 225px 0;
}

footer{
    height: 60px;
    width: 100%;
    background-color: gray;
}

.footer{
    margin-top: 20px;
}

.onderwerpKopjes {
    width: 100%;
    height: 110px;
    background-image: url(img/balk.jpg);
    font-size: 80px;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 4px #000000;
}

.center{
    text-align: center;
}

.tekst {
    margin-left: 460px;
}

.tekst1 {
    margin-left: 400px;
}

.tekst2 {
    margin-left: 270px;
}

/* Home pagina*/
#navIndex {
    background-image: url(img/palmhome.jpg);
    text-shadow: 4px 4px 4px #000000;
}

.maina {
    display: flex;
    justify-content: space-evenly;
}

.aboutenwork {
    height: 490px;
    width: 550px;
    border-style: double;
    margin-top: 50px;
    margin-bottom: 50px;
} 

.homeAbout{
    margin-left: 50px;
    margin-right: 50px;
}

#een {
    margin-left: 70px;
}

#twee {
   margin-right: 70px;
}

/* About Pagina*/
#navAbout {
    background-image: url(img/view.jpg);
    text-shadow: 4px 4px 4px #000000;
}

.containerAbout {
    display: flex;
    flex-direction: row;
}
#asideAbout {
    border-right: double;
    width: 25%;
    text-align: center;
}

#aboutMain {
    width: 75%;
    margin: 50px 65px; 
}

#pf{
    margin-top: 50px;
}

.CV{
    display:block;
    background-image: url(img/CV.png);
    width: 45px;
    height: 45px;
    margin: auto;
    margin-top: 50px;
}

.CV:hover {
    background-image: url(img/CV0.png);
}

.icoonInsta {
    display:block;
    background-image: url(img/instaicoon.png);
    width: 45px;
    height: 45px;
    margin: auto;
}

#ii {
    margin-top: 50px;
    margin-bottom: 50px;
}

.icoonInsta:hover {
    background-image: url(img/instaicoon0.png);
}
/* Contact Pagina*/
#navContact {
    background-image: url(img/boot.jpg);
    text-shadow: 4px 4px 4px #000000;
}

.po{
    margin: 50px;
}

/* Work Pagina */
#navWork {
    background-image: url(img/restaurant.jpg);
    text-shadow: 4px 4px 4px #000000;
}

.containerMain {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    
}

.itemWork {
    width: 300px;
    height: 350px;
    margin-top: 50px;
    
}

.textOnderaan {
    text-align: center;  

}

.box{
    position: relative;
    
}

.imageVaag {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

.klik {
    background-color: rgb(253, 86, 95);
    border-radius: 15px;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
    text-decoration: none;
    text-shadow: 1px 1px 4px #000000;
  }

.box:hover .imageVaag {
    opacity: 0.3;
}

.box:hover .middle {
    opacity: 1;
}
/* Photografic pagina */

.boxPG {
    width: 700px;
    height: 500px;
    margin-top: 25px;
    margin-bottom: 25px;
}

#insta {
    width: 100%;
    height: 200px;
}

#instaL {
    margin: 15px;
}

.urlImg {
   display:block;
    background-image: url('img/PG/instalogo.png');
    width: 100px;
    height: 100px;
}

.urlImg:hover {
    /*background-color: black;*/
    background-image: url('img/PG/instalogo2.png');
}


/* Verbeelden */

#verbeelden {
    margin-left: 510px;
}

.lengte {
    height: 535px;
}
.lengt {
    height: 412px;
}

/* 3D Tools pagina */

#vv{
    height: 500px; 
    width: 700px;
}
#mm{
    margin-left: 10px;
    margin-bottom: 52px;
    height: 394px; 
    width: 600px;
}

/* Animatie Tools */

#ball{
    
    height: 550px;
}
/* Slice pagina */

.kopmidden{
    margin-top: 50px;
}
.containerSlice {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.itemSlice {
    margin: 10px;
}

  #poep {
      height: 250px;
      width: 250px;
      background-color: gray;
  }

  #einde {
      margin-bottom: 10px;
  }

  .containerBK {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
  }
 /* Game Design */
#middle {
    margin-left: 100px;
}
  /* Natural Interfaces */
  #kuk {
      width: 550px;
      height: 400px;
      background-color: gray;
  }

  #manquette {
    height: 500px; 
    width: 700px;
  }

   /* Back Button */
   .button {
    text-decoration: none;
    display: inline-block;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    outline: none;
    color: white;
    background-color: rgb(253, 86, 95);
    border: none;
    border-radius: 15px;
    box-shadow: 0 2px #999;
    margin: 10px;
    text-shadow: 1px 1px 4px #000000;
  }
  
  .button:hover {
      background-color: gray
    }
  
  .button:active {
    background-color: rgb(253, 86, 95);
    box-shadow: 0 5px #666;
    transform: translateY(4px);
  }