#me{
    /* color:white; */
    text-align: center;
    animation: zoomin 1s;
    /* font-size:3.5rem; */
}

#tile1,#tile2,#tile3,#tile4,#tile5,#tile6{
    opacity:0 ;
}

#r2-t4,#r2-t5,#r2-t6{

    margin:10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding:0px;
    z-index:0;
    height:13em;
}
#row1{

    margin:10px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding:0px;
    z-index:0;
    height:13em;
}
.overlay{
    text-align:center;
    height:0em;
    width:100%;
    background-color: rgb(73, 73, 73);
    transition: height 1s ;
    overflow:hidden;
    z-index:1;
}

#row1:hover > .overlay{
    height:100%;
}


.card-image > .fa {
    font-size: 8rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    color: #4a4a4a;;
  }
  
  .card-content .content {
    font-size: 14px;
    margin: 1rem 1rem;
  }
  
  
  .card {
    box-shadow: 0 3rem 3rem -1rem rgba(10,10,10,.2);
    margin-bottom: 2rem;
  }

  .hyper_header {
    display: inline-block;
    background: #fff;
    border-radius: 6px;
    margin: 0px auto;
    padding: 1.2rem;
  }

@media only screen and (min-width: 600px){
    #banner{
        max-width:80%;
        min-width:70%;
    }
    .is-child{
        height:200px;
        width: auto;
    }
    .features{
        padding:2em;
        margin: 1.5em 0em;
    }


}

@media only screen and (max-width: 600px) {
    #aboutme{
        max-width:100%;
        min-width:80%;
        font-size:6vw;
    }
    #checkproject{
        text-align: center;
        font-size: 9vw;
        line-height: 1.5em;
        padding:0.5em;

    }
    #container-tile{
        padding:5px;
    }
    .features{
        padding:0.6em;
    }

}

#soon{
    animation: fadein 3s;
    color:white;
    margin:10px;

}

@keyframes fadein{
    0%{opacity:0;}
    33%{opacity:0;}
    100%{opacity:1;}
}

@keyframes zoomin{
    0%{transform:scale(0);}
    100%{transform:scale(1);}
}