body{
    font-family: sans-serif;
}


.row{
    display: flex;
}

.col-4 {
    width: 33.333%;
    height: auto;
}
.container-fluid{
    width: 100%;
    height: auto;
}

.container{
    width: 80%;
    height: auto;
    margin: 0 auto;
}

.content {
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: 2s;
}

.content p {
    color: #999;

}

.content a {
    width: 100px;
    text-decoration: none;
    border-radius: 50px;
    border: 1px solid #fff;
    display: block;
    margin: auto;
    padding: 10px ;
    color: #fff;

}

.cardone{
    width: 360px;
    height: 360px;
    background: #000;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    margin: 10% auto;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.cardone span{
    height: 100%;
    background: url(../img/CL1.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    transition: 1s;
}



.cardone span:nth-child(1){
    z-index: 10;
    width: 25%;
    transition-delay: 0;
}

.cardone span:nth-child(2){
    z-index: 9;
    width: 50%;
    transition-delay: 0.3s;
}

.cardone span:nth-child(3){
    z-index: 8;
    width: 75%;
    transition-delay: 0.6s;
}

.cardone span:nth-child(4) {
    z-index: 7;
    width: 100%;
    transition-delay: 0.8s;
}

.cardone:hover span {
    transform: translateY(-100%);
    transition: 1s;
}

.cardone:hover span:nth-child(1) {
    transition-delay: 0.8s;
}

.cardone:hover span:nth-child(2) {
    transition-delay: 0.6s;
}

.cardone:hover span:nth-child(3) {
    transition-delay: 0.3s;
}

.cardone:hover span:nth-child(4) {
    transition-delay: 0s;
}



.cardone:hover .content {
    transform: translateY(0);
}

/* card two */

.cardtwo{
    width: 360px;
    height: 360px;
    background: #000;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    margin: 10% auto;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.cardtwo span{
    height: 100%;
    background: url(../img/CL2.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    transition: 1s;
}



.cardtwo span:nth-child(1){
    z-index: 10;
    width: 25%;
    transition-delay: 0;
}

.cardtwo span:nth-child(2){
    z-index: 9;
    width: 50%;
    transition-delay: 0.3s;
}

.cardtwo span:nth-child(3){
    z-index: 8;
    width: 75%;
    transition-delay: 0.6s;
}

.cardtwo span:nth-child(4) {
    z-index: 7;
    width: 100%;
    transition-delay: 0.8s;
}

.cardtwo:hover span {
    transform: translateY(-100%);
    transition: 1s;
}

.cardtwo:hover span:nth-child(1) {
    transition-delay: 0.8s;
}

.cardtwo:hover span:nth-child(2) {
    transition-delay: 0.6s;
}

.cardtwo:hover span:nth-child(3) {
    transition-delay: 0.3s;
}

.cardtwo:hover span:nth-child(4) {
    transition-delay: 0s;
}



.cardtwo:hover .content {
    transform: translateY(0);
}

/* card three */
.cardthree{
    width: 360px;
    height: 360px;
    background: #000;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    margin: 10% auto;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.cardthree span{
    height: 100%;
    background: url(../img/CL3.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    transition: 1s;
}



.cardthree span:nth-child(1){
    z-index: 10;
    width: 25%;
    transition-delay: 0;
}

.cardthree span:nth-child(2){
    z-index: 9;
    width: 50%;
    transition-delay: 0.3s;
}

.cardthree span:nth-child(3){
    z-index: 8;
    width: 75%;
    transition-delay: 0.6s;
}

.cardthree span:nth-child(4) {
    z-index: 7;
    width: 100%;
    transition-delay: 0.8s;
}

.cardthree:hover span {
    transform: translateY(-100%);
    transition: 1s;
}

.cardthree:hover span:nth-child(1) {
    transition-delay: 0.8s;
}

.cardthree:hover span:nth-child(2) {
    transition-delay: 0.6s;
}

.cardthree:hover span:nth-child(3) {
    transition-delay: 0.3s;
}

.cardthree:hover span:nth-child(4) {
    transition-delay: 0s;
}



.cardthree:hover .content {
    transform: translateY(0);
}


/* card four */

.cardfour{
    width: 360px;
    height: 360px;
    background: #000;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    margin: 10% auto;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.cardfour span{
    height: 100%;
    background: url(../img/CL4.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    transition: 1s;
}



.cardfour span:nth-child(1){
    z-index: 10;
    width: 25%;
    transition-delay: 0;
}

.cardfour span:nth-child(2){
    z-index: 9;
    width: 50%;
    transition-delay: 0.3s;
}

.cardfour span:nth-child(3){
    z-index: 8;
    width: 75%;
    transition-delay: 0.6s;
}

.cardfour span:nth-child(4) {
    z-index: 7;
    width: 100%;
    transition-delay: 0.8s;
}

.cardfour:hover span {
    transform: translateY(-100%);
    transition: 1s;
}

.cardfour:hover span:nth-child(1) {
    transition-delay: 0.8s;
}

.cardfour:hover span:nth-child(2) {
    transition-delay: 0.6s;
}

.cardfour:hover span:nth-child(3) {
    transition-delay: 0.3s;
}

.cardfour:hover span:nth-child(4) {
    transition-delay: 0s;
}



.cardfour:hover .content {
    transform: translateY(0);
}

/* card five */
.cardfive{
    width: 360px;
    height: 360px;
    background: #000;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    margin: 10% auto;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.cardfive span{
    height: 100%;
    background: url(../img/CL5.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    transition: 1s;
}



.cardfive span:nth-child(1){
    z-index: 10;
    width: 25%;
    transition-delay: 0;
}

.cardfive span:nth-child(2){
    z-index: 9;
    width: 50%;
    transition-delay: 0.3s;
}

.cardfive span:nth-child(3){
    z-index: 8;
    width: 75%;
    transition-delay: 0.6s;
}

.cardfive span:nth-child(4) {
    z-index: 7;
    width: 100%;
    transition-delay: 0.8s;
}

.cardfive:hover span {
    transform: translateY(-100%);
    transition: 1s;
}

.cardfive:hover span:nth-child(1) {
    transition-delay: 0.8s;
}

.cardfive:hover span:nth-child(2) {
    transition-delay: 0.6s;
}

.cardfive:hover span:nth-child(3) {
    transition-delay: 0.3s;
}

.cardfive:hover span:nth-child(4) {
    transition-delay: 0s;
}



.cardfive:hover .content {
    transform: translateY(0);
}

/* card six */

.cardsix{
    width: 360px;
    height: 360px;
    background: #000;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    margin: 10% auto;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}

.cardsix span{
    height: 100%;
    background: url(../img/CL6.jpg) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    transition: 1s;
}



.cardsix span:nth-child(1){
    z-index: 10;
    width: 25%;
    transition-delay: 0;
}

.cardsix span:nth-child(2){
    z-index: 9;
    width: 50%;
    transition-delay: 0.3s;
}

.cardsix span:nth-child(3){
    z-index: 8;
    width: 75%;
    transition-delay: 0.6s;
}

.cardsix span:nth-child(4) {
    z-index: 7;
    width: 100%;
    transition-delay: 0.8s;
}

.cardsix:hover span {
    transform: translateY(-100%);
    transition: 1s;
}

.cardsix:hover span:nth-child(1) {
    transition-delay: 0.8s;
}

.cardsix:hover span:nth-child(2) {
    transition-delay: 0.6s;
}

.cardsix:hover span:nth-child(3) {
    transition-delay: 0.3s;
}

.cardsix:hover span:nth-child(4) {
    transition-delay: 0s;
}



.cardsix:hover .content {
    transform: translateY(0);
}


@media(max-width:1500px) {
    .container {
        width: 100%;

    }
}

@media(max-width:1200px) {
    .row{
        width: 25%;
        margin: 0 auto;
        display: grid;
    }
}