@media only screen and (min-width: 1441px) {
    
}


@media only screen and (max-width: 1024px) {
    
}



@media only screen and (max-width: 800px) {
    .header-ins {
        flex-direction: column;
        align-items: flex-start;
    }

    .hamburger {
        display: block;
        top: 20px;
    }

    .navigation {
        display: none;
    }

    header.active {
        height: 100vh;
        background-color: #fff;
        z-index: 100;
    }

    .header-ins.active {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        height: 100vh;        
    }

    .navigation.active {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding-bottom: 40px;
        padding-top: 50px;
        width: 100%;
    }

    .navigation ul {
        flex-direction: column;
        align-items:flex-start;
        width: 100%;
    }

    .navigation ul li {
        margin: 20px 0;
        width: 100%;
    }

    .navigation ul li a {
        display: block;
        font-size: 1.5rem;
    }

    .sign-in, .sign-up {
        width: 100%;
    }

    .hero-ins{
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-ins-txt {
        width: 100%;
        margin-bottom: 40px;
    }

    .hero-ins-img {
        width: 100%;
        padding-bottom: 100%;
    }

    

}



@media only screen and (max-width: 480px) {
    
    h2 {
        font-size: 2.2rem;
    }

    h3 {
        font-size: 1.8rem;
    }
    
    .hero-section {
        padding-bottom: 0;
    }
    
    .hero-ins {
        padding: 20px 0 50px;
    }

    .hero-ins-txt {
        width: 100%;
        margin-bottom: 40px;
    }

    .hero-ins-txt h2 {
        font-size: 2rem;
    }

    .hero-ins-img {
        width: 100%;
        padding-bottom: 100%;
        order: -1;
        margin-bottom: 40px;
    }

    .welcome {
        width: 100%;
    }

    .welcome p {
        font-size: 1.35rem;
    }

    .boxes {
        flex-direction: column;;
    }

    .box-itm {
        width: 100% !important;
        flex: 1 !important;
        min-height: 200px;
    }

    .boxes .box-itm:hover {
        flex: 1;
    }

    .box-itm-ins {
        padding: 20px;
    }

    .box-itm-ins h3 {
        font-size: 1.5rem;
    }
    
    .cta {
        width: 100%;
    }

    .cta h2 {
        font-size: 2.5rem;
        font-weight: 700;
    }

    .cta p {
        width: 100%;
    }

    .flagship-product {
        flex-direction: column;
    }

    .flagship-product .text {
        width: 100%;
    }

    .flagship-product .img {
        width: 80%
    }

    .section2{
        padding: 40px 0;
    }

    .section3 {
        padding: 40px 0 0;
    }

    .section4 {
        padding-top: 20px;
    }

    .extra-info h2 {
        font-size: 2rem;
    }

    .extra-info.with-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .extra-info.with-flex h2 {
        width: 100%;
    }

    .extra-info.with-flex p {
        width: 100%;
        text-align: left;
    }

    .alt-hero-section {
        min-height: 50vh;
    }

    .alt-hero-ins .img {
        padding-bottom: 42%;
    }

    .sect3-ins {
        flex-direction: column;
    }

    .sect3-img {
        width: 100%;
        padding-bottom: 70%;
        margin-bottom: 30px;
    }

    .sect3-txt {
        width: 100%;
    }

    .vision {
        margin-bottom: 30px;
    }

    .competence {
        flex-direction: column;
    }

    .competence-itm {
        width: 100%;
    }

    .feature-ins {
        flex-direction: column;
    }

    .feat-img {
        width: 100%;
        order: -1;
        margin-bottom: 20px;
    }

    .feat-txt {
        width: 100%;
    }

    .alt-section2 {
        padding: 0 0 30px;
    }


    .contact-section-ins {
        flex-direction: column;
    }

    .contact-form {
        width: 100%;
        margin-bottom: 40px;
    }

    .contact-txt {
        width: 100%;
    }

    .footer-ins {
        flex-direction: column;
    }

    .footer-left {
        width: 100%;
        margin-bottom: 30px;
    }

    .subscribe {
        width: 100%;
        margin-bottom: 30px;
    }

    .footer-nav {
        width: 100%;
        justify-content: flex-start;
    }

    .footer-nav-ins {
        margin: 0 0px 20px;
        width: 100%;
    }

    .copyright {
        flex-direction: column;;
    }

    .socials {
        order: -1;
    }


}


@media only screen and (max-width: 380px) {
    .box-itm {
        width: 100% !important;
        flex: 1 !important;
        min-height: 190px;
    }
}


@media only screen and (max-width: 320px) {
    .box-itm {
        width: 100% !important;
        flex: 1 !important;
        min-height: 170px;
    }
}