@media only screen and (max-width: 1230px){
    .pf-inner{
        width:45%;
    }
}
@media only screen and (max-width: 1120px){
    section#home{
        grid-template-columns: 1fr;
    }
    div#home-animation{
        width:100%;
        height: auto;
    }
    div#home-animation svg{
        width: 100%;
    }
    div#home-content{
        height: 100vh;
    }
    div#services-new{
        width:100%;
        align-items: center;
    }
}
@media only screen and (max-width: 950px){
    .project-cover{
        width:calc(50% - 2rem);
    }
    .about-intro, div#about-animation{
        width:80%;
        height: auto;
        margin: 2rem 0;
    }
    .rb-grid li{
        width: 32%;
    }
}
@media only screen and (max-width: 900px){
    section#contact{
        grid-template-columns: 1fr;
    }
    div#contact-form-section{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
@media only screen and (max-width: 850px){
    .service-in{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 500px;
        justify-content: center;
    }
    section#services{
        padding: calc(80px + 1rem) 20px;
    }
    .service-infor{
        padding: 0;
    }
    img.serv-img{
        width:300px;
    }
    .service-infor h3{
        text-align: center;
    }
    .serv-details{
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        padding: 0;
        width: 95%;
    }
    span.s-detail{
        width: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
   /* div#services-new{
        width:50%;
    }*/
}
@media only screen and (max-width: 800px){
    .pf-inner{
        width:90%;
    }
}
@media only screen and (max-width: 700px){
    .rb-grid li{
        width: 49%;
    }
    div#service-section{
        width: 80%;
    }
}
@media only screen and (max-width: 650px){
    nav#createrix-navigation{
        display: none;
    }
    nav#responsive-navigation{
        display: block;
    }
}
@media only screen and (max-width: 550px){
    .project-cover{
        width: calc(100% - 2rem);
    }
    .rb-grid li{
        width:99%;
    }
    .service-in{
        width:100%;
    }
}
@media only screen and (max-width: 500px){
    p#home-main-title{
        width:100%;
        text-align: center;
        font-size: 3rem;
    }
    #portfolio h1{
        font-size: 3rem;
    }
}
@media only screen and (max-width: 470px){
    p#home-main-title, h2.sec-title{
        font-size: 2rem !important;
        text-align: center !important;
    }
    p#home-subtitle-title{
        font-size: 1rem;
        width: 100%;
    }
    div#home-content{
        padding: 0 10px;
    }
    section#portfolio{
        padding: 3rem 10px;
        justify-content: center;
    }
    .about-intro p{
        font-size: 1rem;
        text-align: justify;
    }
    section#about, section#services{
        padding: calc(80px + 1rem) 20px;
    }
    div#service-section{
        width:95%;
    }
    div#service-description p{
        text-align: justify;
    }
    .share-button, .share-toggle-button{
        width:50px;
        height: 50px;
        line-height: 50px;
        margin-left: -25px;
        margin-top:-25px;
    }
}
@media only screen and (max-width: 350px){
    img.serv-img{
        width:95%;
    }
}