/* desktop */
@media (min-width: 800px) {
.logo{
  width: 100%;
  margin-top: 20px;
}
}


/* telefoon */
@media (max-width: 800px) {
  .logo{
    width: 80%;
    margin-top: 40px;
    text-align: center;
  }
}

 .wrapper {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}
 .box {
   display: block;
   min-width: 200px;
   max-width: 450px;
   margin: 10px;
   border-radius: 5px;
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   overflow: hidden;
}
 .upload-options {
   position: relative;
   height: 75px;
   background-color: cadetblue;
   cursor: pointer;
   overflow: hidden;
   text-align: center;
   transition: ease-in-out 150ms;
}
 .upload-options:hover {
   background-color: #7fb1b3;
}
 .upload-options input {
   width: 0.1px;
   height: 0.1px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   z-index: -1;
}
 .upload-options label {
   display: flex;
   align-items: center;
   width: 100%;
   height: 100%;
   font-weight: 400;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
   overflow: hidden;
}
 .upload-options label::after {
   position: absolute;
   font-size: 2.5rem;
   color: rgba(230, 230, 230, 1);
   top: calc(50% - 2.5rem);
   left: calc(50% - 1.25rem);
   z-index: 0;
}
 .upload-options label span {
   display: inline-block;
   width: 50%;
   height: 100%;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   vertical-align: middle;
   text-align: center;
}
 .upload-options label span:hover i.material-icons {
   color: lightgray;
}
 .js--image-preview {
   justify-content: center;
   text-align: center;
   height: 250px;
   width: 250px;
   object-fit: cover;
   overflow: hidden;
   background-color: transparent;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   border-radius: 170px;
   margin-left: auto;
   margin-right: auto;
}
 .js--image-preview::after {
   font-size: 4.5em;
   color: rgba(230, 230, 230, 1);
   top: calc(50% - 3rem);
   left: calc(50% - 2.25rem);
   z-index: 0;
   border-radius: 170px;
}
 .js--image-preview.js--no-default::after {
   display: none;
}
 .drop {
   display: block;
   position: absolute;
   background: rgba(95, 158, 160, 0.2);
   border-radius: 100%;
   transform: scale(0);
}
 .animate {
   animation: ripple 0.4s linear;
}
 @keyframes ripple {
   100% {
     opacity: 0;
     transform: scale(2.5);
  }
}