.port-item {
    width: 100%;
    height: 100%;
    margin-bottom: -100%;
}
.port-pad {
    margin-bottom: 50px;
    padding-left: 25px;
    padding-right: 25px;
}
.row-port {
    margin-left: -10px;
    margin-right: -10px;
}
.proj-ratio {
    padding-top: 100%;
    width: 100%;
    position: relative;
}
.proj-kleur {
    opacity: 0;
    -moz-transition: opacity .3s linear;
   -webkit-transition: opacity .3s linear;
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: auto;
    width: auto;
    border-radius: 4px;
}
.proj-kleur:hover {
    opacity: 100;
}
.proj-name {
    text-align: center;
    color: #000;
    line-height: 30px;
    font-size: 18px;
    font-weight: 600;
    -moz-transition: opacity .3s linear;
   -webkit-transition: opacity .3s linear;
    position: relative;
    top: 50%;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: auto;
    width: auto;
        transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.work {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 4px;
}
@media screen and (max-width: 400px) and (min-width: 0px) {
    .proj-kleur {
        display: none;
    }
    .proj-name {
        display: none;
    }
}
@media screen and (max-width: 575px) and (min-width: 0px) {
    .port-mob {
        width: 50%;
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 991px) and (min-width: 0px) {
    .row-port {
    margin-left: 5px;
    margin-right: 5px;
}
    .port-pad {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;;
}
}
@media screen and (max-width: 575px) and (min-width: 0px) {
    .row-port {
    margin-left: 0px;
    margin-right: 0px;
}
    .port-pad {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;;
}
}
.flyer-row-fix {
    margin-left: -10px;
    margin-right: -10px;
}




/*kleur*/
.iedereenschijnt-kleur {
    background-color: rgba(255,237,0,0.8);
    opacity: 0;
}
.iedereenschijnt-kleur:hover {
    opacity: 100;
}
.wijnignl-kleur {
    background-color: rgba(200,071,0,0.8);
    opacity: 0;
    color: #fff;
}
.wijnignl-kleur:hover {
    opacity: 100;
}
.amuseer-kleur {
    background-color: rgba(63,28,5,0.9);
    opacity: 0;
    color: #fff;
}
.amuseer-kleur:hover {
    opacity: 100;
}
.location-kleur {
    background-color: rgba(25,0,124,0.9);
    opacity: 0;
    color: #fff;
}
.location-kleur:hover {
    opacity: 100;
}
.volta-kleur {
    background-color: rgba(62,148,195,0.9);
    opacity: 0;
    color: #fff;
}
.volta-kleur:hover {
    opacity: 100;
}
.hopper-kleur {
    background-color: rgba(250,177,20,0.9);
    opacity: 0;
}
.hopper-kleur:hover {
    opacity: 100;
}
.scouting-kleur {
    background-color: rgba(48,137,31,0.9);
    opacity: 0;
    color: #fff;
}
.scouting-kleur:hover {
    opacity: 100;
}
.mwendo-kleur {
    background-color: rgba(240,57,40,0.9);
    opacity: 0;
    color: #fff;
}
.mwendo-kleur:hover {
    opacity: 100;
}
/*kleur*/
.port-wit {
    color: #fff;
}


/*portfolio items*/
.work-1 {
    background-image: url(../img/portfolio/thumbnail/iedereenschijnt.jpg);
}
.work-2 {
    background-image: url(../img/portfolio/thumbnail/wijnig.jpg);
}
.work-3 {
    background-image: url(../img/portfolio/thumbnail/amuseer.jpg);
}
.work-4 {
    background-image: url(../img/portfolio/thumbnail/location-alarm.jpg);
}
.work-6 {
    background-image: url(../img/portfolio/thumbnail/volta.jpg);
}
.work-7 {
    background-image: url(../img/portfolio/thumbnail/hopper.jpg);
}
.work-8 {
    background-image: url(../img/portfolio/thumbnail/scouting.jpg);
}
.work-9 {
    background-image: url(../img/portfolio/thumbnail/mwendo.jpg);
}
/*portfolio items*/
.img-full-porto {
    width: auto;
    height: 70vh;
    background-size: cover;
    background-position: center;
}
.port-content {
        position: absolute;
        top: 100%;
        width: 100%;
        background-color: #fff;
        z-index: 2;
}
.img-2 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.no-pad {
    padding: 0px;
}
.text-l {
    margin-left: auto;
    padding-right: 195px;
    width: 540px;
}
.text-r {
    margin-right: auto;
    padding-left: 195px;
    width: 540px;
}
.text-r-r {
    margin-right: auto;
    padding-left: 195px;
    width: 540px;
    transform: translateX(-250px)
}
.wrapper-tekst {
    width: 100%;
}
@media screen and (max-width: 1199px) and (min-width: 0px) { 
    .text-l {
        margin-left: auto;
        padding-right: 105px;
        width: 450px;
}
    .text-r {
        margin-right: auto;
        padding-left: 105px;
        width: 450px;
}
    .wrapper-tekst {
        width: 345px;
}
}
@media screen and (max-width: 991px) and (min-width: 0px) { 
    .text-l {
        margin-left: auto;
        margin-right: auto;
        width: 660px;
        padding-left: 0px;
}
        .text-r {
        margin-right: auto;
        margin-left: auto;
        width: 660px;
        padding-left: 0px;
}
        .wrapper-tekst {
        width: 430px;
}
    .img-2 {
        height: 278px;
    }
}
@media screen and (max-width: 767px) and (min-width: 0px) { 
    .text-l {
        margin-left: auto;
        margin-right: auto;
        width: 430px;
        padding-left: 0px;
}
        .text-r {
        margin-left: auto;
        margin-right: auto;
        width: 430px;
        padding-left: 0px;
    }
        .wrapper-tekst {
        width: 430px;
        margin-left: -25px;
}
    .slider-desktop-mob-fix {
    margin-top: 25px;
}
}
@media screen and (max-width: 575px) and (min-width: 0px) { 
    .text-l {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
}
        .text-r {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
}
        .wrapper-tekst {
        width: 100%;
        margin-left: 0px;
}
}
.footer-omhoog {
    position: relative;
    z-index: 5;
}
.terug-container {
    background-color: #EFEFEF;
    height: 70px;
    width: auto;
    cursor: pointer;
    -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.terug-container:active {
    background-color: #fff;
}
.terug-pijl-portfolio {
    width: 300px;
    padding-left: 28px;
    height: 23px;
    line-height: 22px;
    text-align: left;
    background-image: url(../img/structure/terug-pijl.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 19px;
    color: #363636;
    font-size: 16px;
    margin-top: 25px;
    font-weight: 400;
    cursor: pointer;
}
#meer {
    position: relative;
    width: 30px;
    height: 1px;
    top: 0px;
    transform: translateY(-115px);
}
.flyer-l {
    padding-top: 142%;
    width: 100%;
    background-size: cover;
    background-position: center;
    margin-left: 20px;
    margin-right: auto;
    transform: rotate(-4deg);
    border-radius: 4px;
    background-repeat: no-repeat;
}
.flyer-r {
    padding-top: 142%;
    width: 100%;
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: auto;
    transform: rotate(4deg);
    border-radius: 4px;
    background-repeat: no-repeat;
}
.flyer-shadow {
    box-shadow: 0px 6px 23px 3px rgba(0,0,0,0.3);
}
.flyer-shadow-1 {
    box-shadow: 0px 6px 23px 3px rgba(0,0,0,.2);
}
.flyer-txt {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
    margin-top: -15px;
}
.logo-vis-txt {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.webdesign-txt {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.col-weg-991 {
    display: block;
}
@media screen and (max-width: 991px) and (min-width: 0px) {
    .col-weg-991 {
        display: none;
    }
    .flyer-r {
        padding-top: 113.6%;
        width: 80%;
        margin-right: auto;
}
    .flyer-l {
        padding-top: 113.6%;
        width: 80%;
        margin-left: auto;
}
}
.visual-bg {
    height: 379px;
    width: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.poster {
    padding-top: 142%;
    width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 4px;
    background-repeat: no-repeat;
}
.mobile {
    padding-top: 177.8%;
    width: 100%;
    position: relative;
    background-size: 100%;
    background-position: center;
    border-radius: 4px;
    background-repeat: no-repeat;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
.poster-pad {
    padding-left: 25px;
    padding-right: 25px;
}
.grey-bg-1 {
    background-color: #EFEFEF;
    
}
.grey-bg-2 {
    background-color: #EFEFEF;
}
.grey-bg-3 {
    background-color: #FFF;
}


@media screen and (max-width: 991px) and (min-width: 0px) {
.grey-bg-1 {
    background-color: #EFEFEF;
}
.grey-bg-2 {
    background-color: #FFF;
}
.grey-bg-3 {
    background-color: #EFEFEF;
}
.visual-bg {
    height: 279px;
}
}

.w3-button {
    background-color: rgba(255,255,255,0.3);
    border: none;
    height: 15px;
    width: 15px;
    border-radius: 15px;
    padding: 0px;
    margin-left: 8px;
    margin-right: 8px;
    padding-top: 0px;
    box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
    float: left;
    cursor: pointer;
}
.w3-button-1 {
    background-color: rgba(0,0,0,0.3);
    border: none;
    height: 15px;
    width: 15px;
    border-radius: 15px;
    padding: 0px;
    margin-left: 8px;
    margin-right: 8px;
    padding-top: 0px;
    box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.1);
    float: left;
    cursor: pointer;
}
.w3-red {
    background-color: #FFFFFF;
}
.w3-center {
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    text-align: center;
}
.w3-content {
    width: 100vw;
}
.sec-slider {
    display: none;
}
.sec-posters {
    display: block;
}
@media screen and (max-width: 767px) and (min-width: 0px) {
    .sec-slider {
        display: block;
    }
    .sec-posters {
        display: none;
    }
    .terug-container {
    background-color: #EFEFEF;
    height: 54px;
}
    .terug-pijl-portfolio {
    width: 200px;
    padding-left: 28px;
    height: 23px;
    line-height: 22px;
    text-align: left;
    background-image: url(../img/structure/terug-pijl.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 19px;
    color: #363636;
    font-size: 16px;
    margin-top: 16px;
    font-weight: 400;
}    
    .flyer-txt-onder {
        margin-bottom: 50px;
    }
    .flyer-txt-boven {
        margin-top: 50px;
    }
    .icon-boven {
        margin-top: 25px;
    }
    .web-txt-boven {
        margin-top: 30px;
    }
    .web-txt-in {
        padding-left: 15px;
        padding-right: 15px;
    }
    .web-txt-onder {
        padding-bottom: 50px;
    }
#flexxie > #a { order: 2; }
#flexxie > #b { order: 1; }
}
.webdesign {
    width: 100%;
    padding-top: 56.20%;
    background-image: url(../img/portfolio/projecten/placeholders/a5a4a3.jpg);
    border-radius: 4px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
      position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.mob-des {
    display: none;
}
@media screen and (max-width: 767px) and (min-width: 0px) {
    .slider-webdesign {
        display: block;
    }
    .mobile-beeld-weg-mobile {
        display: none;
    }
    .mob-des {
    display: block;
}
        .poster-pad {
            padding-left: 15px;
            padding-right: 15px;
    }
}
@media screen and (max-width: 575px) and (min-width: 0px) {
    .webdesign-txt {
      position: relative;
      top: auto;
      transform: translateY(0%);
      -webkit-transform: translateY(0%);
    }
    .flyer-txt {
              position: relative;
      top: auto;
      transform: translateY(0%);
      -webkit-transform: translateY(0%);
    }
}
.mobile-slide-pad {
    padding-left: 12%;
    padding-right: 12%;
}
.shirt {
    background-size: contain;
    padding-top: 100%;
    filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.2));
    -webkit-filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.2));
    -moz-filter: drop-shadow(0px 6px 6px rgba(0,0,0,0.2));
}
.logo-vis {
    background-size: contain;
    padding-top: 100%;
    transform: rotate(0);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.icon-vis {
    background-size: contain;
    padding-top: 160%;
    transform: rotate(0);
    border-radius: 0px;
    background-repeat: no-repeat;
}
.flyer-vrijstaand {
    background-size: contain;
    padding-top: 80%;
    transform: rotate(0);
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
@media screen and (max-width: 575px) and (min-width: 0px) {
.flyer-vrijstaand {
    margin: 0px;
    background-position: center;
    margin-left: 6%;
    background-size: 110%;
}
}

@media screen and (max-width: 767px) and (min-width: 0px) {
    .logo-vis {
        padding-top: 70%;
        margin-bottom: -5%;
        margin-top: -50px;
    }
    .icon-vis {
    background-size: contain;
    padding-top: 80%;
    transform: rotate(0);
    border-radius: 0px;
    background-repeat: no-repeat;
}
    .shirt {
    margin-top: -15%;
    margin-bottom: -20%;
    }

}
.slid-but-desktop {
    padding: 0px;
    margin: 0px 0px 20px;
    float: none; 
}
.w3-center-destop {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    
}
@media screen and (max-width: 757px) and (min-width: 0px) { 
    .slid-but-desktop {
        padding: 0px;
        margin-left: 8px;
        margin-right: 8px;
        padding-top: 0px;
        box-shadow: 0px 3px 10px 3px rgba(0,0,0,0.2);
        float: left;
}
    .w3-center-destop {
        position: none;
        top: 0%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        width: 93px;
}
}
.scroll-mob {
    display: none;
}
@media screen and (max-width: 767px) and (min-width: 0px) { 
    .scroll-mob {
        display: block;
    }
}
.eigenschap {
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #EFEFEF;
    margin-top: 20px;
    margin-right: 20px;
    float: left;
    font-weight: 300;
    font-size: 15px;
    border-radius: 4px;
    color: #000;
}
.eigenschap-donker {
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #EFEFEF;
    margin-top: 20px;
    margin-right: 20px;
    float: left;
    font-weight: 300;
    font-size: 15px;
    border-radius: 4px;
    color: #000;
}
@media screen and (max-width: 400px) and (min-width: 0px) { 
    .eigenschap-donker {
        margin-right: 10px;
    }
}
@media screen and (max-width: 320px) and (min-width: 0px) { 
    .eigenschap {
        margin-right: 100%;
    }
    .eigenschap-donker {
        margin-right: 0px;
    }
}
.la-logo {
    height: 100%;
    width: 45%;
    background-image: url(../img/portfolio/projecten/locationalarm/locationalarm-logo.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
}
.hopper-logo {
    height: 100%;
    width: 45%;
    background-image: url(../img/portfolio/projecten/hopper/hopper-logo.gif);
    background-size: 35%;
    background-repeat: no-repeat;
    background-position: center;
    margin: auto;
}
.hopper {
    background-image: url(../img/portfolio/projecten/hopper/hopper.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.center {
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 575px) and (min-width: 0px) {
    .poster-pad-txt {
        padding-left: 11px;
        padding-right: 11px;
    }
    .mobile-vw {
    margin-left: -25px;
    margin-right: 0px;
    width: 100%;
    background-size: 95%;
    
}
    .mobile-vw-1 {
    margin-right: -25px;
    margin-left: 0px;
    width: 100%;
    background-size: 95%;
    
}
}