.first{
    text-align:right;
    font-family: Arial, Helvetica, sans-serif;
    background-image: url(png/h_img.jpg);
    background-size: cover;
    padding-top:-60px;
    width: 137rem;
    margin-left:-50rem;
    height:-400vh;
    max-height:50vh;
    margin-top: -30vh;
    margin-bottom:0vh;
     padding:80vh;
    color: aliceblue;
   
}

.welcome{
    
    text-align:right;
     text-align: 40px;
     height:20vh;
    color: rgb(255, 255, 255);

}
.delani{
     text-justify: kashida;
     color: aliceblue;
     text-align: right;
     
     
}
.mouse{
    text-align: center;
    background-color:white;
    top: 50rem;
    padding-top: 50;
   }
      
#bounce{
        animation: bounce 1s infinite;
 }
 @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-55px);
    }
    60% {
        transform: translateY(-45px);
    }
}

.aboutus{
    text-align: center;
    height:50vh;

}
.services{
    text-align: center;
    background-image: url(png/s_image.jpg);
    color: aliceblue;
    height:70vh;
    width: 90rem;
    margin-right:30rem;

}
.do{
      text-align: center;

}

.ddesign{
    text-align:center;
 
    display: none;
}
.development{
    text-align: center;
    display:none;

}
.productmanagement{
    display: none;
    text-align: center;
}
/* i'll come back to do the hover effect and transition effect */
.portfolio{
     text-align: center;
     width: 90rem;
     
}
.form-control{
    text-align: center;
    background-image: url(png/c_image.jpg);
    background-position: center center;
    background-size: 100%;
    background-repeat:no-repeat;
    background-color:transparent;
    
}
.contactus{
    text-align: center;
    margin-right: -25vh;
    width: 90rem;
}


.blackstudio{
    position: absolute;
    margin-top: -200px;
    margin-left: 0vh;
    column-width:42vh ;
    color: rgb(228, 15, 199);
    background-color: rgb(0, 0, 0,.2);
    padding: 50px 30px 50px 40px;
    display: none;
}




.brown{
    position: absolute;
    margin-top: -200px;
    column-width: 42vh;
    color: rgb(238, 53, 53);
    background-color: rgb(0, 0, 0,.2);
    padding: 50px 30px 50px 40px;
    display: none;
}



.ontario{
    position: absolute;
    margin-top: -200px;
    column-width: 42vh;
    color: rgb(40, 182, 187);
    background-color: rgb(0, 0, 0,.2);
    padding: 50px 30px 50px 40px;
    display: none;
}



.Black{
    position: absolute;
    margin-top: -200px;
    column-width: 42vh;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0,.2);
    padding: 50px 30px 50px 40px;
    display: none;
}



.elena{
    position: absolute;
    margin-top: -200px;
    column-width: 42vh;
    color: rgb(255, 196, 196);
    background-color: rgb(0, 0, 0,.2);
    padding: 50px 30px 50px 40px;
    display: none;
}

.button{
    position: absolute;
    margin-top: -200px;
    column-width: 42vh;
    color: rgb(255, 196, 196);
    background-color: rgb(0, 0, 0,.2);
    padding: 50px 30px 50px 40px;
    display: none;
}


.burned{
    position: absolute;
    margin-top: -200px;
    column-width: 42vh;
    color: rgb(255, 196, 196);
    background-color: rgb(0, 0, 0,.2);
    padding: 50px 30px 50px 40px;
    display: none;
}




.giraffe{
    position: absolute;
    margin-top: -200px;
    column-width: 42vh;
    color: rgb(255, 196, 196);
    background-color: rgb(0, 0, 0,.2);
    padding: 50px 30px 50px 40px;
    display: none;
}

.social{
    text-align:center;
}