a{
    text-decoration: none;
    color: #1e1e1e;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

a:hover{
    color: #C2E5EB;
    
}

.pointer{
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;

}



.header{
    width: 100%;
    height: 10vh;
    float: left;
    padding-top: 1vh;
    padding-left: 5%;
    padding-right: 5%;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

.logo-con{

    width: 5%;

}

.title-con{
    margin-left: 1%;
   
}

.title{

    font-weight: 600;
    font-size: 3vh;
}

.spacer-con{

    height: 8vh;
    width: 35%;
    float: left;
    margin-left: 4%;
    

}

.nav-con{

    height: 8vh;
    width: 25%;
    float: left;
    margin-left: 15%;
    text-align: right;
    vertical-align: middle;
}

.nav{

    font-weight: 600;
    font-size: 3vh;
    display: inline-block;
    margin-left: 20%;


}



.footer{

    width: 100%;
    height: 9vh;
    float: left;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 3vh;
    margin-bottom: 5vh;
    color: #424242;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.foot-links{

    width: 50%;
    height: 8vh;
    float: left;

}

.foot{

    display: inline-block;
    font-weight: 600;
}

.foot-copyright{

    width: 20%;
    height: 8vh;
    float: left;
    margin-left: 30%;
    text-align: right;
    vertical-align: middle;
    padding: 0;
}

.content-con{

    width: 100%;
    height: auto;
    float: left;

}

.landing-con{

    width: 100%;
    height: 90vh;
    float: left;
    background-color: #f4f4f4;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 10vh;
    padding-bottom: 10vh;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

.carousel-con{

    width: 100%;
    float: left;
    height: 70vh;
    overflow: hidden;

}

.images-con{

    width: 100%;
    float: left;
    height: auto;
    background-color: #f0f0f0;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5vh;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

.works-title{

    width: 100%;
    height: 10vh;
    float: left;
    text-align: center;
    font-weight: 600;
    margin-top: 2vh;

}

.images-space{

    width: 100%;
    height: auto;
    float: left;

}

.img-1{

    width: 30%;
    height: 90vh;
    float: left;

}

.img-1:hover{
    color: #C2E5EB;
}

.img-2:hover{
    color: #f6a45a;
}


.img-3:hover{
    color: #C2E5EB;
}


.img-4:hover{
    color: #f6a45a;
}


.img-5:hover{
    color: #C2E5EB;
}

.img-6:hover{
    color: #f6a45a;
}

.img-7:hover{
    color: #C2E5EB;
}

.img-8:hover{
    color: #f6a45a;
}

.image-1{

    width: 100%;
    height: 90%;
    float: left;
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-image: url(./img/1.jpg);
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.title-1{
    width: 100%;
    height: 10%;
    float: left;
    text-align: left;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.image-2{

    width: 100%;
    height: 90%;
    float: left;
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(./img/2.jpg);
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.title-2{
    width: 100%;
    height: 10%;
    float: left;
    background-color: #f4f4f4;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.image-3{

    width: 100%;
    height: 90%;
    float: left;
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(./img/3.jpg);
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.title-3{
    width: 100%;
    height: 10%;
    float: left;
    background-color: #f4f4f4;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.image-4{

    width: 100%;
    height: 90%;
    float: left;
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    background-image: url(./img/4.jpg);
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.title-4{
    width: 100%;
    height: 10%;
    float: left;
    background-color: #f4f4f4;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.image-5{

    width: 100%;
    height: 90%;
    float: left;
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(./img/5.jpg);
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.title-5{
    width: 100%;
    height: 10%;
    float: left;
    background-color: #f4f4f4;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.image-6{

    width: 100%;
    height: 90%;
    float: left;
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(./img/6.jpg);
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.title-6{
    width: 100%;
    height: 10%;
    float: left;
    background-color: #f4f4f4;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.image-7{

    width: 100%;
    height: 90%;
    float: left;
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(./img/7.jpg);
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.title-7{
    width: 100%;
    height: 10%;
    float: left;
    background-color: #f4f4f4;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.image-8{

    width: 100%;
    height: 90%;
    float: left;
    background-color: #f4f4f4;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(./img/8.jpg);
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.title-8{
    width: 100%;
    height: 10%;
    float: left;
    background-color: #f4f4f4;
    -webkit-transition: color 0.3s ease-in-out;
    transition: color 0.3s ease-in-out;
}

.img-2{

    width: 30%;
    height: 90vh;
    float: left;
    margin-left: 5%;
    margin-right: 5%;
    
}

.img-3{

    width: 30%;
    height: 90vh;
    float: left;
    
}

.img-4{

    width: 30%;
    height: 90vh;
    float: left;
    margin-top: 10vh;

}

.img-5{

    width: 30%;
    height: 90vh;
    float: left;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 10vh;
    
}

.img-6{

    width: 30%;
    height: 90vh;
    float: left;
    margin-top: 10vh;
    
}

.img-7{

    width: 40%;
    height: 55vh;
    float: left;
    margin-top: 10vh;
    margin-left: 5%;
    margin-bottom: 8vh;
    
}

.img-8{

    width: 40%;
    height: 55vh;
    float: left;
    margin-top: 10vh;
    margin-left: 10%;
    margin-bottom: 8vh;
    
}

.carouselImgs {
    width: 100%;
    height: 100%;
    animation: fade 1.5s;
    display: none;
    padding: 20px;
    text-align: center;
    align-items: center;
    justify-items: center;
    justify-content: center;
  }

  .prev, .next {
    position: absolute;
    top: 50%;
    cursor: pointer;
    font-size: 5vh;
  }

  .prev { left: 100px; }
  .next { right: 100px; }

  .slide1 { background-color: #f4f4f4; background-image: url(./img/AdvertisingPhotography/Karabo\ Pare\ -Nu\ Metro\ Advertising\ Photography.jpg); background-position: top; background-repeat: no-repeat; background-size: contain;}

  .slide5 { background-color: #f4f4f4; background-image: url(./img/PortraitPhotography/Karabo\ Pare\ -\ Christianna\ Saunders\ -\ Potrait\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;}

  .slide2 { background-color: #f4f4f4; background-image: url(./img/ArchitecturalPhotography/Karabo\ Pare\ -\ Zeitz\ Museum\ of\ Contemporary\ Art\ Africa\ -\ Architectural\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;}

  .slide3 { background-color: #f4f4f4; background-image: url(./img/ProductShots/Karabo\ Pare\ -\ Tanqueray\ Product\ Shot.jpg); background-position: top; background-repeat: no-repeat; background-size: contain;}

  .slide4 { background-color: #f4f4f4; background-image: url(./img/FoodPhotography/Karabo\ Pare\ -\ Food\ Photography.jpg); background-position: top; background-repeat: no-repeat; background-size: contain;}

  .slide6 { background-color: #f4f4f4; background-image: url(./img/FashionPhotography/Karabo\ Pare\ -\ Christianna\ Saunders\ -\ Fashion\ Photography.jpg); background-position: top; background-repeat: no-repeat; background-size: contain;}

  .slide7 { background-color: #f4f4f4; background-image: url(./img/FineArtPhotography/Karabo\ Pare\ \ Nothing\ but\ Cheese\ -\ Fine\ Art\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;}

  .slide8 { background-color: #f4f4f4; background-image: url(./img/FoodPhotography/Karabo\ Pare\ -\ Too\ Posh\ Dining\ Resturant.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;}

  .slide9 { background-color: #f4f4f4; background-image: url(./img/Photography/Karabo\ Pare\ -\ Reportage\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;}

  .slide10 { background-color: #f4f4f4; background-image: url(./img/PortraitPhotography/Karabo\ Pare\ -\ Gotta\ Get\ Em\ Books\ \ -\ Potrait\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;}

  .slide11 { background-color: #f4f4f4; background-image: url(./img/ProductShots/Karabo\ Pare\ Grey\ Goose\ Concotion-\ Product\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;}

  .slide12 { background-color: #f4f4f4; background-image: url(./img/StreetPhotography/beer\ clean\ IMG\ 0217\ non\ stained\ yellow.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;}
  

  .bg1 { background-color: #f4f4f4; background-image: url(./img/AdvertisingPhotography/Karabo\ Pare\ -\ The\ Famous\ Black\ Heineken\ Butler\ -\ Advertising\ Photography.jpg); background-position: top; background-repeat: no-repeat; background-size: cover; opacity: 0.4;}

  .bg2 { background-color: #f4f4f4; background-image: url(./img/ArchitecturalPhotography/Karabo\ Pare\ -\ Zeitz\ Museum\ of\ Contemporary\ Art\ Africa\ -\ Architectural\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}

  .bg3 { background-color: #f4f4f4; background-image: url(./img/AutomotivePhotography/Karabo\ Pare\ -\ Wat\ Swaai\ Jy\ -Automotive\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}

  .bg4 { background-color: #f4f4f4; background-image: url(./img/BeautyPhotography/Karabo\ Pare\ -\ Sabrina\ Sheltz\ -\ Beauty\ Photography.jpg); background-position: top; background-repeat: no-repeat; background-size: cover;}

  .bg5 { background-color: #f4f4f4; background-image: url(./img/ConceptualPhotography/Karabo\ Pare\ -\ Envy\ Conceptual\ Photography.jpg); background-position: top; background-repeat: no-repeat; background-size: cover;}

  .bg6 { background-color: #f4f4f4; background-image: url(./img/FashionPhotography/Karabo\ Pare\ -\ Christianna\ Saunders\ -\ Fashion\ Photography.jpg); background-position: top; background-repeat: no-repeat; background-size: cover;}

  .bg7 { background-color: #f4f4f4; background-image: url(./img/FineArtPhotography/Karabo\ Pare\ \ Nothing\ but\ Cheese\ -\ Fine\ Art\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}

  .bg8 { background-color: #f4f4f4; background-image: url(./img/FoodPhotography/Karabo\ Pare\ -\ Too\ Posh\ Dining\ Resturant.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}

  .bg9 { background-color: #f4f4f4; background-image: url(./img/Photography/Karabo\ Pare\ -\ Reportage\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;}

  .bg10 { background-color: #f4f4f4; background-image: url(./img/PortraitPhotography/Karabo\ Pare\ -\ Gotta\ Get\ Em\ Books\ \ -\ Potrait\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}

  .bg11 { background-color: #f4f4f4; background-image: url(./img/ProductShots/Karabo\ Pare\ Grey\ Goose\ Concotion-\ Product\ Photography.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}

  .bg12 { background-color: #f4f4f4; background-image: url(./img/StreetPhotography/beer\ clean\ IMG\ 0217\ non\ stained\ yellow.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
  
  @keyframes fade {
    from { opacity: 0.4; }
    to { opacity: 1; }
  }


  .category-card{

    width: 100%;
    height: 500px;
    background-color: #1e1e1e;
    float: left;

  }

  .card{

    width: 40%;
    margin-left: 5%;
    float: left;
    margin-top: 20px;
    height: 200px;
    background-color: #f0f0f0;
    border-radius: 20px;

  }