@media screen and (max-width: 1024px) {
    .port-text-1 {
        font-size:25px;
    }
    
    .port-text-2 {
        font-size:14px;
    }

    .right-side-text-inner h1 {
        font-size: 56px;
        padding-bottom: 30px;
    }
    
    .right-side-text-inner p {
        font-size: 20px;
        padding-bottom: 20px;
    }
}

@media screen and (max-width: 768px) {
    .banner {
        height:560px;
    }

    .left-side {
        width:60%;
        height:560px;
    }

    .right-side {
        width:40%;
        height:560px;
    }

    .ms-logo {
        padding: 90px 0px;
    }
    
    nav .ms-logo img {
        width:230px;
        height: 230px;
        margin-top: -115px; /* Half the height */
        margin-left: -115px; /* Half the width */
    }

    .ms-logo img {
        width:230px;
        height: 230px;
    }

    .right-side-text-inner {
        top: 40%;
    }

    .right-side-text-inner h1 {
        font-size: 50px;
        padding-bottom: 25px;
    }
    
    .right-side-text-inner p {
        font-size: 17px;
        padding-bottom: 15px;
    }

    .image-opacity {
        width:100%;
        height:560px; 
        position:absolute;
        background-color: black;
        opacity: 0.7;
        z-index: 1;
    }
    
    .right-image {
        width:100%;
        height:560px;
        background-image: url(../img/designer.jpg);
        background-size:cover;
        background-repeat:no-repeat;
        background-position:top;
        position: relative;
    }

    .port-text-1 {
        font-size:19px;
        padding-bottom:3px;
    }
}

@media screen and (max-width: 480px) {
    
    .hamburger-background {
        width:60px;
        height:60px;
    }

    #hamburger-icon {
        display:;
        top:21px;
        width:25px;
        margin:0 auto;
        padding-top:14px;
        height:6px;
        position:relative;
    }

    .close-button {
        width: 30px;
        height: 30px;
    }
    .close-button :after {
        height: 30px;
    }
    
    .close-button :before {
        height: 30px;

    }

    .banner {
        height:auto; 
    }

    .about-inner {
        width:80%;
    }

    .right-side {
        display: none;
    }

    .left-side {
        width:100%;
        height:auto; 
    }

    .social-icons {
        display: inline;
        width: 100%;
        float: none;
        padding-left: 26px;
    }

    .social-icons ul li {
        display: inline-block;
        float: left;
    }

    .social-icons ul {
        padding-bottom: 30px;
    }

    .social-icons ul li {
        float: none;
    }

    .drib,
    .in,
    .inst,
    .up {
        padding: 7px;
        height: 34px;
        width: 34px;
    }

    .ms-logo {
        padding: 130px 0px;
    }
    
    .ms-logo img {
        width:230px;
        height: 230px;
    }

    .router,
    .wolf,
    .reminder,
    .transport,
    .geo,
    .tourist,
    .worlds,
    .unicorn
    {
        width:100%;
    }

    .carousel-inner {
        width:80%;
    }

    .contact-text {
        width:80%;
    }

    .contact-text input[type="text"],
    .contact-text input[type="email"],
    .contact-text textarea,
    .contact-text select {
        font-size: 17px;
    }

    .contact-text textarea {
        font-size:18px;
    }
}

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