body{
    background-color: #191919;
    height: calc(4875px + 210vh);
    overflow-x: hidden;
}

.modal-content {
  position: relative;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: 1px;
  outline: 0;
  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .0);
          box-shadow: 0 3px 9px rgba(0, 0, 0, .0);
}
.btn{
    background-color: #202020;
    box-shadow: 0px 0px 6px rgba(0,0,0, .9);
    border-radius: 1px;
    left: 50%;
    margin-left: 500px
    
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: black;
  border-color: white;
}
.modal-body{
    height: 700px;
    overflow-y: scroll;
    background-color: #202020;
    padding-right: 10px;
}
.modal-header, .modal-footer{
    background-color: whitesmoke;
    width: calc(100% + 16px);
    margin-left: -8px;
    box-shadow: 0px 0px 15px rgba(0,0,0, 1);
}
.modal .modal-dialog {
  width: 70%;
}
.btn, .btn-default{
    color: whitesmoke;
    border: 0;
}
.btn:hover, .btn-default:hover{
    color: whitesmoke;
    border: 0;
    background-color: black;
}
::-webkit-scrollbar {
      width: 5px;
}
::-webkit-scrollbar-track {
      background-color: #202020;
} /* the new scrollbar will have a flat appearance with the set background color */
::-webkit-scrollbar-thumb {
      background-color: whitesmoke; 
    border-left: 0px solid #202020;
} /* this will style the thumb, ignoring the track */




#white{
    z-index: 0;
    color:grey;
    
}
#yellow {
    -webkit-transition:      800ms cubic-bezier(0.85,0.1,0.25,1);
    position:absolute;
    z-index:0;
    top:calc(24px + 25vh);
    left:94px;
    width:56px;
    overflow:hidden;
    color:#ffbe00;
    
}
#green {
    -webkit-transition:      800ms cubic-bezier(0.85,0.1,0.25,1);
    position:absolute;
    z-index:0;
    top:calc(106px + 25vh);
    left:76px;
    width:76px;
    overflow:hidden;
    color:#82af00;
    white-space: pre;
}
#blue {
    -webkit-transition:      800ms cubic-bezier(0.85,0.1,0.25,1);
    position:absolute;
    z-index:0;
    height: 30px;
    top:calc(190px + 25vh);
    left:87px;
    width:63px;
    overflow:hidden;
    color:#3c92eb;
    white-space: pre;
}
#purple {
    -webkit-transition:      800ms cubic-bezier(0.85,0.1,0.25,1);
    position:absolute;
    z-index:0;
    top:calc(275px + 25vh);
    left:79px;
    width:72px;
    overflow:hidden;
    color:#6e00df;
}
#red {
    -webkit-transition:      800ms cubic-bezier(0.85,0.1,0.25,1);
    position:absolute;
    z-index:0;
    top:calc(360px + 25vh);
    left:62.6px;
    width:89px;
    overflow:hidden;
    color:#a30700;
    white-space: pre;
}

span{
    z-index: 0;
}
#picpage{
    width: 100%;
    height: 2600px;
    top: calc(285px + 110vh);
    position: absolute;
    background-color: #f5f5f5;
    z-index: 2;
}
#block{
    background-color: #f5f5f5;
    height: 290px;
    width: 100%;
    z-index: 999;
    margin-top: -290px;
}
#homepage{
    width: calc(100% + 20px);
    height: 110vh;
    top: 0px;
    position: absolute;
    background-color: #202020;
    z-index: 4;
}
#drawpage{
    width: calc(100% + 20px);
    height: 1200px;
    top: calc(2800px + 110vh);
    position: absolute;
    background-color: #202020;
    z-index: 3;
}
#contactpage{
    width: 100%;
    height: 100vh;
    top: calc(4050px + 110vh);
    position: absolute;
}
#aboutpage{
    width: calc(100% + 20px);
    height: 100vh;
    top: calc(4070px + 210vh);
    position: absolute;
    background-color: #202020;
    z-index: 2;
}
#contactpage2{
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
    z-index: 1;
    position: fixed;
}
h1{
    font-size: 72px;
}
#picpage h1{
    font-size: 2vw;
    width: 500px;
}
::selection{
  background: whitesmoke; /* WebKit/Blink Browsers */
    
}
::-moz-selection{
  background: whitesmoke; /* Gecko Browsers */
}
#aboutpage ::selection{
  background: white; /* WebKit/Blink Browsers */
}
#aboutpage ::-moz-selection{
  background: whitesmoke; /* Gecko Browsers */
}
#contactpage2 ::selection{
  background: #505050; /* WebKit/Blink Browsers */
    color: whitesmoke;
}
#contactpage2 ::-moz-selection{
  background: #505050; /* Gecko Browsers */
    color: whitesmoke;
}
#homepage ::selection{
  background: whitesmoke; /* WebKit/Blink Browsers */
    
}
#homepage ::-moz-selection{
  background: whitesmoke; /* Gecko Browsers */
}
#drawpage ::selection{
  background: whitesmoke; /* WebKit/Blink Browsers */
    
}
#drawpage ::-moz-selection{
  background: whitesmoke; /* Gecko Browsers */
}
#picpage ::selection{
  background: #505050; /* WebKit/Blink Browsers */
  color: white;
}
#picpage ::-moz-selection{
  background: #505050; /* Gecko Browsers */
    color: white;
}
#picpage a{
    color: dimgrey;
}
.circle p{
    position: relative;
    color: grey;
    font-size: 150%;
    height: 60px;
    z-index: 4;
}
#picpage a:hover{
    text-decoration: none;
    color: black;
}

.textpage2{
    position: absolute;
    margin-top: 0px;
    z-index: 1;
}


#PR{
    margin-top: 30px;
    margin-bottom: -3vw;
    left: 10px;
    
    
}
#titel1{
    margin-top: 5vh;
}




.shape{
    margin-top: 110vh;
   width: calc(100% + 20px);
    z-index: 3;
    position: absolute;
}
#shape2{
    pointer-events: none;
    margin-top: calc(3200px + 110vh);
   width: 100vw;
    z-index: 2;
    position: absolute;
    right: 0px;
}
#shape3{
    pointer-events: none;
    bottom: 1200px;
   width: 100vw;
    z-index: 3;
    position: absolute;
    right: 0px;
}
.gif{
    width: 300px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 0;
    visibility: hidden;
    pointer-events: none;
}
#black{
    width: 2000px;
    height: 2000px;
    right: -1000px;
    top: -1400px;
    background-color: black;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    position: absolute;
    
    
}
#black3{
    position: absolute;
    top: 0%;
   width: 80vw;
    left: 30%;
    height: 80%;
    margin-left: 100px;
    margin-top: -200px;
    overflow: hidden;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    
}
#black4{
    position: absolute;
    width: 105vw;
    left: -0%;
    top: -0%;
}


.blink {
    width: 300px;
    
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 0;
    visibility: hidden;
}

.blink2 {
    
   width: 300px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 0;
    visibility: visible;
}
.modal-body img{
   width: 100%;
    
}
.divjes{
    display:inline-block;
    z-index: 1;
    margin-right: -100px;
}
.divjes2 a{
    text-decoration: none;
    color: #6e00df;
    z-index: 8;
}
.divjes2 a:hover {
    text-decoration: none;
    color: midnightblue;
}
.divjes2 a:visited {
    text-decoration: none;
    color: darkred;
}
#signlogo{
    position: absolute;
    bottom: 1vh;
    width: 90px;
    display: block;
    margin-left: 0;
    z-index: 100;
    
    
    
}
#foto{ 
    border-radius: 1px; 
}

#aboutpage b{
 color: #a30700;   
}

#line{
    width: 0px;
    height: 70vh;
    position: absolute;
    bottom: calc(11vh + 22px);
    left: 42vw;
    border: 0.2vw solid black;
    z-index: 101;
}

#p1{
    position: relative;
    margin-top: 25vh;
    width: 800px;
    font-size: 55px;
    color: whitesmoke;
    margin-left: 44vw;
    z-index: 2;
}
#p2{
    
    font-size: 40px;
    color: #f5f5f5;
    text-align: right;
    right: 1vw;
    position:inherit;
    margin-right: 60vw;
    padding-right: 0px;
}
#p6{
    
    font-size: 40px;
    color: #f5f5f5;
    text-align: right;
    right: 1vw;
    position:inherit;
    margin-right: 60vw;
    margin-top: 194px;
    padding-right: 0px;
}
#p3{
    width: 250px;
    font-size: 40px;
    color: white;
    margin-left: 44vw;
    margin-top: 165px;
    position: relative;
}
#p5{
    width: 519px;
    font-size: 19px;
    color: #f5f5f5;
    margin-left: 44vw;
    margin-top: 215px;
    position: relative;
    
}
#p4{
    width: 500px;
    font-size: 35px;
    color: white;
    margin-right: 60vw;
    right: 1vw;
    position: inherit;
    text-align: right;
    
}
#homepage p{
    z-index: 10000;
}
#homepage c{
  color: #ffbe00;  
}
divjes2{
    z-index: 100;
}
textarea{
    width: calc(200% - 60px);
    
}
#picpage p{
    top: -30px;
    
}
.crop{
    position: absolute;
    top: 0%;
   width: 270px;
    height: 281px;
    overflow: hidden;
    
    

}
.crop1{
    position: absolute;
    top: 0%;
   width: 540px;
    height: 281px;
    overflow: hidden;
    
    

}
.crop2, .crop3, .crop4, .crop5, .crop6, .crop7, .crop8, .crop9{
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: white;
    opacity: 0.2;
    z-index: 2;
    
}

.crop10{
    width: 200%;
    height: 100%;
    position: absolute;
    background-color: white;
    opacity: 0.2;
    z-index: 2;
    
}
.circle{
    padding-left: 0px;
    margin-right: 0px;
    margin-top: 40px;
    margin-bottom: -0px;
}

.circle10{
    
    
}
#black2{
    position: absolute;
    width: 2000px;
    height: 1000px;
    bottom: -600px;
    left: -30%;
    background-color: black;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    
}
#cropblack2{
    bottom: 0px;
    position: absolute;
    overflow: hidden;
    width: 2000px;
    height: 1000px;
}
#drawpage c{
    color: #3c92eb;
}
.knop{
    top: 0%;
    position: absolute;
    width: 393px;
    z-index: 1;
}
.knop2{
    margin-bottom: -40px;
    position: relative;
    width: 393px;
    z-index: 1;
    height: 400px;
    
}
.borders{
    position: absolute;
    margin-top: -4px;
    margin-left: -2px;
    width: 326px;
    height: 341px;
    z-index: 2222222;
}
.submit{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    background-color: #202020;
    color: #f5f5f5;
    border: 0px;
    font-size: 20px;
    padding-left: 9px;
    padding-right: 9px;
    height: 30px;
    border-bottom: 3px solid #202020;
}
.submit:hover{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-bottom: 3px solid #6e00df; 
}

.inhoud1{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 300px;
    margin-left: 60px;
    margin-top: -200px;
    opacity: 0.6;
    
    }
.inhoud2{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 400px;
    margin-left: -160px;
    margin-top: -10px;
    opacity: 0.6;
    }

.inhoud3{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 380px;
    margin-left: 0px;
    margin-top: 65px;
    opacity: 0.6;
    }
.inhoud4{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 400px;
    margin-left: -150px;
    margin-top: 71px;
    opacity: 0.6;
    }
.inhoud5{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 600px;
    margin-left: -180px;
    margin-top: -100px;
    opacity: 0.6;
    }
.inhoud6{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 900px;
    margin-left: -305px;
    margin-top: 10px;
    opacity: 0.6;
    }
.inhoud7{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 220px;
    margin-left: -45px;
    margin-top: 10px;
    opacity: 0.6;
    }
.inhoud72{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 600px;
    margin-left: -200px;
    margin-top: 50px;
    opacity: 0.6;
    }
.inhoud8{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 400px;
    margin-left: -55px;
    margin-top: 70px;
    opacity: 0.6;
    }

.inhoud10{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 900px;
    margin-left: -200px;
    margin-top: -150px;
    opacity: 0.6;
    
}
.inhoud9{
    z-index: 2;
    position: absolute;
    pointer-events: none;
    width: 600px;
    margin-left: -200px;
    margin-top: -20px;
    opacity: 0.6;
    
}

#contactpage2 c{
    color: #6e00df;
}
.clickformore1, .clickformore2, .clickformore3, .clickformore4, .clickformore5, .clickformore6, .clickformore7, .clickformore8, .clickformore9, .clickformore10{
    margin-left: 100px;
    opacity: 0;
    position: absolute;
    z-index: 0;
    margin-top: 20px;
    font-size: 20px;
    color: #82af00;
}

.extraimage{
    margin-left: 0px;
    opacity:0;
    position: absolute;
    z-index: 0;
    margin-top: 0px;
    height:280px

    
}
#preferable{
    color: #ffbe00;
    position: absolute;
    right: 30px;
    top: 10px;
}
#design{
    margin-top: 20px;
    left: 10px;
    
}
.socialize{
    margin-top: 25px;
}
.social{
    position: absolute;
    opacity: 0.8;
    width: 70px;
    z-index: 1;
    margin-top: 20px;
    
}
#contactpage2 h3{
    Color: black;

}
#social1{
    margin-left: -70px;
    margin-top: 100px;
}
#social11{
    position: absolute;
    margin-left: -70px;
    margin-top: 100px;
    width: 70px;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
#social2{
    margin-top: 180px;
    margin-left: -70px;
}
#social22{
    position: absolute;
    margin-top: 180px;
    margin-left: -70px;
    width: 70px;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
#social3{
    margin-left: -70px;
}
#social33{
    position: absolute;
    margin-left: -70px;
    margin-top: 20px;
    width: 70px;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}
#carousel {
    
    top: -180px;
    margin-top: -34vh;
    width: 600px;
    height: 90vh;
    display: relative;
    position: absolute;
    left: 55vw;
    z-index: 22222222222222;
    
  }
#drawpage p{
    margin-left:20px;
    color: whitesmoke;
    margin-top: 115px;
    font-size: 17px;
}
  #carousel img {
      width: 600px;
    display: hidden; /* hide images until carousel prepares them */
    cursor: pointer; /* not needed if you wrap carousel items in links */
  }
input, textarea{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    background-color: rgba(0,0,0,0.03);
    border: 0px solid black;
    border-bottom: 3px solid #999999;
    
}
input:focus, textarea:focus {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    outline: none;
    border-bottom: 3px solid #6e00df;
    
}
.designedby{
    position: absolute;
    bottom: 20px;
    margin-left: 17%;
    z-index: 99999999;
    font-family: serif;
    font-size: 18px;
    color: grey;
}

}
@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: auto;
    margin-top: 6%;
      
  }
}
@media (min-width: 1200px){
    .modal-dialog {
    width: 600px;
    margin: auto;
    margin-top: 3%;
      
  }
    
}
@media (max-width: 768px){
    .modal-header, .modal-footer{
    width: 103%
    
    }
    .modal .modal-dialog {
  width: 100%;
        left: -10px;
}
    .modal-header, .modal-footer{
    background-color: whitesmoke;
    width: 100%;
    margin-left: 0px;
    box-shadow: 0px 0px 15px rgba(0,0,0, 1);
}
}

@media (max-height: 940px){
    .mailarea{
        height: 18vh;
    }
    .clickformore1, .clickformore2, .clickformore3, .clickformore4, .clickformore5, .clickformore6, .clickformore7, .clickformore8, .clickformore9, .clickformore10{
    margin-left: 10px;
    opacity: 0;
    position: absolute;
    z-index: 0;
    margin-top: 0px;
    font-size: 10px;
    
}
}