body{
    margin:0;
    padding:0;
    font-family: sans-serif;
    background: #262626;
    /* overflow: hidden; */
}

.container{
    position: absolute; /*Using fixed position will prevent scrolling in mobile view*/
    top:65%; /*50%----------------------------------------------------------------Change Back*/
    left:60%; /*50%*/
    transform:translate(-60%, -65%); /*(80%, -50%)--------left top----------------Change Back*/
    width:1000px;
    height:500px;
    display:flex;
}


.container > .box{
    position:relative;
    width:250px;
    height:500px;
    background:transparent;/*pink*/
    transition:0.5s;
}

.container > .box:hover{
    transform: scale(1.1); /*on hover, the box div will be rescaled into a slightly bigger size, creating a zoom-in effect*/
    z-index: 1;
    box-shadow:0 5px 20px rgba(0,0,0,1);
}

.container > .box > .thumb{
    position:absolute;
    width:100%;
    height:250px;
    overflow:hidden;
}

.container > .box:nth-child(odd) > .thumb {
    /*I'm the odd images and sticking them to the very bottom */
    bottom:0;
    left:0;
}

.container > .box > .flip-card {
    position:absolute;
    width:100%;
    height:250px;
    overflow:hidden;
}

.container > .box:nth-child(even) > .flip-card{
    /*Now im taking the colored divs and stciking them to the bottom as well*/
    bottom:0;
    left:0;
}

/*project preview image*/
.container > .box > .thumb > img{
    height:100%;
    width:100%;
}

/*Im now applying personalised styles DIRECTLY to specified divs with the "details" classname using their nth values*/
/*Front of card background color + background color of the box itself to make the rotation subtle*/
.container > .box:nth-child(1) > .flip-card > .flip-card-inner > .details,.box:nth-child(1) {
background:#789391; /*#8553cb purple*/
}

.container > .box:nth-child(2) > .flip-card > .flip-card-inner > .details,.box:nth-child(2) {
    background:#c9985f; /*#fe8f01 orange*/
}

.container > .box:nth-child(3) > .flip-card > .flip-card-inner > .details,.box:nth-child(3) {
    background:#aab7c9; /*#79d400 green*/
}

.container > .box:nth-child(4) > .flip-card > .flip-card-inner > .details,.box:nth-child(4) {
    background:#b7b094; /*#ff3b34 red ish*/
}

.container > .box > .flip-card > .flip-card-inner > .details > .content {
    position:absolute;
    top: calc(50% + 16px ); /*this places everything withing the content classname, a little above the halfway/50% mark*/
    transform:translateY(-50%);
    width:100%;
    padding:20px;
    box-sizing: border-box;
    text-align:center;
    transition:0.5s;
}

.container > .box:hover > .flip-card > .flip-card-inner > .details > .content{
    top:calc(50%); /*Ive set a hover effect, so that when the user hovers over the box, the content classnem is repositioned to the 50% mark*/
}

.container > .box > .flip-card > .flip-card-inner > .details > .content > .fas {
    color:#fff;/*white*/
    font-size:80px;
}

.container > .box > .flip-card > .flip-card-inner > .details > .content > h3{
    margin:0;
    padding:0;
    padding:10px 0;
    color:#fff;
}

/*styling for the [Read More] button*/
.container > .box > .flip-card > .flip-card-inner > .details > .content > a{
    display:inline-block;
    padding:5px 20px;
    color:#fff;/*white*/
    border:2px solid #fff;
    text-decoration: none;
    transition: 0.5s;
    border-radius: 20px;
    transform: scale(0); /*practically makes the button invisible*/
}
 /*On hover, display the [Read More] Button*/
.container > .box:hover > .flip-card > .flip-card-inner > .details > .content > a{
    transform: scale(1);
}

/*When user hovers over the botton, change it's color*/
.container > .box > .flip-card > .flip-card-inner > .details > .content > a:hover{
    background: #fff;
    color:#262626;
}

                                        /*Card Back View*/

/*Back view button*/
.container > .box > .flip-card > .flip-card-inner > .flip-card-back > .readMoreBtn{}

.container > .box > .flip-card > .flip-card-inner > .flip-card-back > .backCardIcon-Container{
    display:flex;
    position: absolute;
    width:100%;
    height:auto;
    bottom:0;
}

/*divs within the flexbox*/
.container > .box > .flip-card > .flip-card-inner > .flip-card-back > .backCardIcon-Container > div{
    width:33%; /*100% ÷ 3 icons is worth 33% of space for each icon*/
}

/*the code icon, for users to acess the github link to that particluar project*/
.container > .box > .flip-card > .flip-card-inner > .flip-card-back > .backCardIcon-Container > div > a > .code{
    font-size: 20px;
    color:#fff;
    /* float:left;
    padding-left:50px; */
    margin-top:7px;
} 

/*For users to acess the project's preview page*/
.container > .box > .flip-card > .flip-card-inner > .flip-card-back > .backCardIcon-Container > div > a > .preview{
    font-size: 30px;
    color:#fff;
    /* float:left;
    padding-left:50px; */
    padding-bottom:10px;
}

/*the refresh button for users the flip the card back*/
.container > .box > .flip-card > .flip-card-inner > .flip-card-back > .backCardIcon-Container > div > a > .rotate{
    font-size:15px;
    color:#fff;
    /* float:right;
    padding-right:52px; */
    margin-top:7px;
}

/*text behind the card - project description text*/
.container > .box > .flip-card > .flip-card-inner > .flip-card-back > .projectDescription{
    font-family: 'Rajdhani', sans-serif;
    color:black;
    padding:1px 2px 0 2px; /*top right bottom left*/
    text-align: center;
} 

@media (max-width: 1000px){
    .container{
        width: 100%;
        height:auto;
        padding:20px;
        box-sizing: border-box;

        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
    }
    .container > .box{
        height:250px;
        margin: auto;
    }
    /* .container > .box > .thumb{
        display:none;
    } */
    .container > .box:hover {
        height:500px;
    }
}


@media(max-width: 768px){
    .container{
        top:20%;
        left:0;
        transform:translate(0);
    }
    .container > .box{
        width:50%;
        height:250px;
        float:left;
    }

    .fp-section,
    .fp-slide,
    .fp-tableCell, .section{
        height:1050px !important;
    }

}

@media(max-width: 480px){
    .container{
        top: 0;
        display:initial; /*stacks the boxes on top of each other*/
    }
    .container > .box{
        width:100%;
        height:250px;
        float:none;
    }

    .fp-section,
    .fp-slide,
    .fp-tableCell, .section{
        height:1300px !important;
    }

    .portfolioSlideTitle {
        display: none !important;
    }
}

/******************* Flipping div effect starts here ********************/
.flip-card {
  position: relative;
  background-color: transparent;
  width:auto;
  height:250px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

}

.flip-card:hover .flip-card-inner {
 /*transform: rotateY(180deg);*/
}

/*These two classes are activated everytime the [Read More] button*/
.flipped{
  transform: rotateY(180deg);    
}

.flipBack{
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 2;
}

.flip-card-back {
  background-color:transparent;
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
}