@media(max-width: 1450px) {
    .testimonials header h3 {
        color: #3C3D40;
    }
}

@media(max-width: 1024px) {
    .portfolio-container {
        padding-top: 2em;
    }

    .portfolio-container .dot {
        left: 0;
    }

    .portfolio-container .mark:before,
    .portfolio-container .mark:after {
        left: 0;
    }

    .portfolio-container .mark:nth-of-type(even):after {
        transform: none;
    }

    .portfolio-container .card {
        flex: 0 1 90%;
    }

    .portfolio-container .mark {
        padding-left: 0;
    }

    .portfolio-container .mark:nth-of-type(even) {
        flex-direction: row-reverse;
        padding-right: 0;
        padding-left: 0;
    }

    .er-slider .slick-prev {
        left: 0;
    }

    .er-slider .slick-next {
        right: 5%;
    }

    .er-slider .slick-prev,
    .er-slider .slick-next {
        top: 85%;
    }
}


@media(max-width: 900px) {
    section,
    .footer,
    .thank-you {
        padding: 2em;
    }

    .content {
        padding-top: 2em;
    }
}

@media(max-width: 768px) {
    .top-nav .nav-container {
        padding: 1em;
    }

    .portfolio-container {
        padding: 2em;
    }
}

@media(max-width: 667px) {
    a:hover {
        text-decoration: none;
    }

    .top-nav {
        display: none;
    }
    
/*** MOBILE MENU ***/
    .mobile-nav {
        display: block;
    }
    
    .mobile-nav .hamburger {
        display: block;
        position: fixed;
        width: 100%;
        top: 0;
        right: 0;
        z-index: 10;
        background-color: #f2f2f2;
        padding: .5em 1em;
        text-align: center;
        box-shadow: none;
    }
    
    .mobile-nav .hamburger.change {
        transition: .5s ease;
        box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
    }
    
    .mobile-nav .hamburger p {
        color: #3c3d40;
        letter-spacing: 20px;
        font-size: 1.25rem;
        margin-bottom: 0;
    }
    
    .mobile-nav .hamburger.change p {
        transition: .5s ease;
    }
    
    .mobile-nav .hamburger > span {
        font-size: 3rem;
    }
    
    .mobile-nav .menu {
        background-color: #B6CCDB; /*8aa3b4*/
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 100%;
        z-index: 100;
        transition: .5s ease;
        flex-wrap: wrap;
        flex-direction: column;
        padding: 1em;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-nav .menu.show {
        left: 0;
        transition: .5s ease;
    }
    
    .mobile-nav .menu .close {
        text-align: right;
    }
    
    .mobile-nav .menu .close span {
        font-size: 2rem;
    }
    
    .mobile-nav .menu ul {
        flex-direction: column;
        text-align: center;
    }
    
    .mobile-nav .menu ul li {
        border-bottom: 1px solid #8aa3b4;
        padding: .5em 0;
    }
    
    .mobile-nav .menu a {
        color: #3C3D40;
        font-size: 2rem;
    }
    
    .mobile-nav .menu .social {
        flex-direction: row;
        justify-content: space-around;
    }
    
    .mobile-nav .menu .social li {
        border-bottom: none;
    }
    
    .er-slider .slick-next {
        right: 10%;
    }

    .contact .flex .input-container {
        flex: 0 1 100%;    
    }
    
    .contact .flex .input-container input {
        flex: 0 1 100%;
    }
    
    .footer .flex {
        flex-wrap: wrap;
        text-align: center;
    }
    
    .footer .flex .links-container {
        flex: 0 1 100%;
        margin-bottom: 1.5em;
    }
    
    .footer .flex .links-container h5 {
        text-align: center;
        margin: 0;
    }
    
    .footer .footer-bottom {
        justify-content: center;
    }
    
    .footer .footer-bottom .social {
        display: none;
    }
    
    .slick-prev,
    .slick-next {
        display: none !important;
    }
    
    .er-slider {
        padding: 0;
    }
    
    .thank-you {
        padding: 0 2em;
    }
    
    .photo {
        width: 50%;
    }
}

@media(max-width: 450px) {
    .hero-image {
        height: 100vh;    
        position: relative;
    }
    
    .hero-image > header {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .portfolio-container{
        padding: 2em 0;
    }
    
    .portfolio-container .dot,
    .portfolio-container .mark:before,
    .portfolio-container .mark:after {
        display: none;
    }
    
    .portfolio-container .card {
        flex: 0 1 100%;
    }
    
    section, 
    .footer {
        padding: 1em;
    }
    
    .articles {
        padding: 1em;
    }
    
    .footer .footer-links {
        padding-bottom: 0;
    }
    
    .thank-you .icon {
        margin: 1em 0;
    }
    
    .thank-you .icon span {
        font-size: 3rem;
    }
    
    .thank-you h1 {
        font-size: 3.1rem;
        padding: 0;
    }
    
    .thank-you p {
        font-size: 1rem;
    }
    
    .thank-you .buttons {
        margin: 3em 0; 
    }
    
    .thank-you .buttons .btn {
        margin: 0 2em;
    }
    
    .fixed-footer {
        position: relative;
    }
}