/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    section{
        display: block;
        text-align: justify;
    }

    p{
        width: 100%;
    }

    .aboutUs-content{
        display: block;
    }
    .aboutUs-content img{
        width: 100%;
        margin: 10px 0;
        padding: 0;
        -webkit-clip-path: none;
                clip-path: none;
    }

    .paint a,
    .aboutUs-footer a{
        padding: 5px;
        width: 300px;
    }

    .rekar-quote h3{
        font-size: 90%;
    }

    .reynaers-section{
        display: block;
    }

    .description{
        display: block;
    }

    .description img{
        width: 100%;
    }

    .description p{
        width: 100%;
    }

    textarea {
        height: 70px;
      }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .right{
        -webkit-clip-path: polygon(0% 15%, 0 0, 15% 0%, 85% 0%, 100% 0, 100% 15%, 100% 95%, 84% 95%, 50% 100%, 16% 95%, 0 95%);
                clip-path: polygon(0% 15%, 0 0, 15% 0%, 85% 0%, 100% 0, 100% 15%, 100% 95%, 84% 95%, 50% 100%, 16% 95%, 0 95%);
    }

    .right:last-child{
        -webkit-clip-path:polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
                clip-path:polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }

    .certificate-img{
        width: 100%;
    }

    .hero-location-section{
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }

    .point-container{
        top: 20%;
        left: 10%;
    }

    #contact{
        top: 20%;
        left: 50%;
        -webkit-transform: translate(-50%;-50%);
                transform: translate(-50%;-50%);
    }

    .point-container,
    #contact{
        width: 50%;
    }

    .location-point a{
        font-size: 1.2em;
    }

    textarea {
        height: 50px;
      }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .nav-bg-onScroll {
        background-color: #444;
    }

    .intro-text h1 {
        font-size: 200%;
    }

    .intro-text p {
        font-size: 100%;
    }

    .who-we-are h2, .partners h2, .what-we-do h2, .social-media h2, .paint h2, .certif h2{
        font-size: 1.4em;
    }

    .aboutUs-content{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .aboutUs-content p{
        width: 50%;
        text-align: justify;
    }

    .paint-3 p{
        font-size: 1.5em;
        margin: auto 0;
    }
    
    

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .certificate-description{
        font-size: 130%;
    }

    .description p{
        width: 30%;
        font-size: 105%;
    }

    .default-work p{
        width: 70%;
        font-size: 75%;
    }

    #hero-text{
        font-size: 150%;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    .colors p{
        -webkit-writing-mode: horizontal-tb;
            -ms-writing-mode: lr-tb;
                writing-mode: horizontal-tb;
    }

    textarea {
        height: 60px;
      }

      .social-media h2 {
        font-size:130%;
    }
    .hero-location-section{
        height: 90vh;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .hero-location-section{
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .point-container h3{
        font-size: 4em;
    }

    .location-point a{
        font-size: 1.7em;
    }
}