/* GENERAL MEDIA QUERY*/

/* GRID 2 and GRID 3 MEDIA QUERY */
@media (max-width: 1186px) and (min-width: 0px) {
    /* HOME  / Navbar */
        header, #top-nav {
            padding: 25px;
        }

        nav ul {
            display: flex;
            width: 460px;
        }

        nav ul li {
            font-size: 16px;
        }

        #name {
            font-size: 23px;
            color: #fff;
        }

    /* LAYOUT */
        .grid-3 {
            display: grid;
            grid-template-columns: repeat(2,1fr);
            width: 100%;
            margin: auto;
        }

        .flex-between > div,
        .flex-around > div,
        .flex-evenly > div,
        .break > div {
            width: 100%;
        }


    /* NAVBAR */
            nav ul {
                display: flex;
                width: 460px;
            }

            nav ul li {
                font-size: 16px;
            }


    /* CONTAINER */
        .container {
            width: 95%;
            margin: auto;
            padding: auto;
        }

        .small-container {
            width: 85%;
            margin: auto;
        }
        
        .contain {
            width: 100%;
            margin: 0;
        }
}



@media (max-width: 896px) and (min-width: 0px) {
        /* HEADER && NAV */
        header,
        #top-nav {
            padding: 0;
        }

        #header-container {
            display: block;
        }

        #mobile {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 35px;
            z-index: 101;
            background-color: #222222;
        }

        #menu {
            display: flex;
        }

        #nav {
            margin: 0;
            width: 100%;
            display: flex;
            z-index: 101;
            position: fixed;
            left: -100%;
            transition: all 0.5s ease-in-out;
            background-color: #333333;
            height: 90vh;
            justify-content: center;
            align-items: flex-start;
            padding-top: 25px;
            border-top: 1px solid #fff;
        }

        nav ul {
            width: auto;
            display: block;
        }

        nav ul li {
            margin: 45px 0;
            text-align: center;
        }

        nav ul li:first-child,
        nav ul li:last-child {
            margin: 0;
        }
        
    /* LAYOUT */
        .grid-3:not(.gridd),
        .grid-2,
        .grid-2 p {
            display: grid;
            grid-template-columns: 1fr;
            width: 83%;
        }

        .card,
        .img-card {
            width: 100%;
            margin: 25px auto;
        }
        
        .card:first-child,
        .img-card:first-child {
            margin-top: 0;
        }
        
        .card:last-child,
        .img-card:last-child {
            margin-bottom: 0;
        }

        .hover-card {
            cursor:auto;
            padding: 12px 18px;
        }

        .hovered-card {
            padding: 16px 18px;
        }


    /* NAVBAR */
        #menu {
            display: flex;
        }

        nav {
            display: none;
            margin: 0;
            width: 100%;
            display: flex;
            position: absolute;
            left: -100%;
            background-color: #333333;
            height: 90vh;
            justify-content: center;
            align-items: flex-start;
            padding-top: 25px;
            border-top: 1px solid #fff;
        }

        nav ul {
            width: auto;
            display: block;
        }

        nav ul li {
            margin: 45px 0;
            text-align: center;
        }

        nav ul li:first-child,
        nav ul li:last-child {
            margin: 0;
        }
}



@media (max-width: 757px) and (min-width: 0px) {
        .flex-between:not(.no-break),
        .flex-around:not(.no-break),
        .flex-evenly:not(.no-break),
        .break {
            display: block;
            width: 100%;
            margin: auto;
        }

        .flex-between:not(.no-break) > *,
        .flex-around:not(.no-break) > *,
        .flex-evenly:not(.no-break) > *,
        .break > * {
            width: 100%;
            margin: auto;
        }

        .card,
        .img-card {
            width: 100%;
            margin: 35px 0;
        }

        .img {
            width: 100%;
        }


    /* CONTAINERS */
        .container {
            width: 85%;
            margin: auto;
        }


    /* FORMS */
        #form {
            width: 85%;
            margin: 45px auto;
        }
}



@media (max-width: 575px) and (min-width: 0px) {
    /* HOME / NAME AND INTRO */
        header {
            height: 100%;
        }


    /* CONTAINERS */
        .wrapper{
            margin: 35px auto;
        }
        
        .container {
            width: 100%;
            margin: auto;
            padding: 0;
        }


    /* FORM */
        #form {
            width: 90%;
            margin: 45px auto;
        }


    /* CARDS */
        .hover-card {
            cursor:auto;
            padding: 10px 16px;
        }

        .hovered-card {
            padding: 14px 18px;
        }

        .hover-card:not(.no-hover) {
            transform: scale(1.03);
            border-radius: 5px;
            transition: all 0.3s ease-in-out;
            box-shadow: 0 2px 8px 4px rgba(178, 177, 177, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        .mobile-fade {
            display: none;
        }

        .mobile-appear {
            display: block;
        }
}



@media (max-width: 475px) and (min-width: 0px) {
    /* LAYOUT */
        .flex .break,
        .flex-center .break {
            display: block;
            width: 85%;
            margin: auto;
        }

        .flex .break > *,
        .flex-center .break > * {
            width: 85%;
            margin: auto;
        }


    /* TEXT SIZE */   
        .xsm{
            font-size: 18px;
            font-weight: 450;
            line-height: 1.5em;
        }
        
        .xxsm {
            font-size: 20px;
            font-weight: 400;
            line-height: 1.3em;
        }
        
        .md, .service-name {
            font-size: 25x;
            font-weight: 550;
            line-height: 1.3em;
        }
        
        .xmd{
            font-size: 28px;
            font-weight: 600;
            line-height: 1.2em;
        }
        
        .lg {
            font-size: 31px;
            font-weight: 700;
            line-height: 1em;
        }
        
        .xlg {
            font-size: 33.5px;
            font-weight: bolder;
            line-height: 1em;
        }
        
        .xxlg{
            font-size: 38px;
            font-weight: bolder;
            line-height: 1em;
        }


    /* CONTAINER */
        .wrapper{
            margin: 25x auto;
        }
        
        .container {
            width: 100%;
            padding: 15px;
        }
}