/* Big tablet to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-width: 1200px) {
    /*.main-nav { padding-right: 30px; }*/
    .top-text-box {
        width: 100%;
        padding: 0 6%;
        /*margin-left: 50px;*/
        font-size: 160%;
    }

    .row { padding: 0 4%; }

    .service-subtype { font-size: 200%;}

    .service-subtype-extra-wide {
      font-size: 200%;
    }
}


/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
    body { font-size: 18px; }
    section { padding: 60px 0; }

    /*.main-nav { padding-right: 30px; }*/

    .top-text-box {
        /*margin-left: 20px;*/
        font-size: 130%;
    }

    .long-copy {
        width: 80%;
        margin-left: 10%;
    }

    .steps-box { margin-top: 10px; }
    .steps-box:last-child { margin-top: 10px; }
    .booking-steps { margin-bottom: 40px; }
    .booking-step:last-of-type { margin-bottom: 60px; }

    .booking-screen {
        width: 50%;
    }

    .icon-small {
        width: 17px;
        margin-right: 5px;
    }

    .city-feature { font-size: 90%; }

    .service-box {
        width: 100%;
        margin-left: 0%;
    }

    .service-subtype { font-size: 190%;}
    .contact-form { width: 80%; }
}



/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
    body { font-size: 18px; font-size: 1.02em }
    section { padding: 30px 0; }

    .row,
    .top-text-box { padding: 0 6%; }
    .top-text-box h1 { margin-top: 20%; font-size: 150%;}
    .col {
        width: 100%;
        margin: 0 0 4% 0;
    }

    .main-nav { display: none; }
    .mobile-nav-icon {display: inline-block;}

    .main-nav {
        float: left;
        margin-top: 30px;
        margin-left: 25px;
    }

    .main-nav li {
        display: block;
    }

    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
    }

    .sticky .main-nav { margin-top: 10px; }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited { padding: 10px 0; }
    .sticky .mobile-nav-icon { margin-top: 10px; }
    .sticky .mobile-nav-icon i { color: #555; }



    h1 { font-size: 180%; }
    h2 { font-size: 150%; }

    .long-copy {
        width: 100%;
        margin-left: 0%;
    }

    .booking-screen {
        width: 40%;
    }
    .steps-box:first-child { text-align: center; }

    .booking-step div {
        height: 40px;
        width: 40px;
        margin-right: 15px;
        padding: 4px;
        font-size: 120%;
    }

    .booking-step { margin-bottom: 20px; }
    .booking-step:last-of-type { margin-bottom: 20px; }

    .nails-showcase li {
        width: 100%;
    }

    .spa-showcase li {
        width: 100%;
    }

    /* ----- BUTTONS ----- */

    .btn-ghost:link {
      color: white;
    }

    .btn-ghost:visited {
      color: white;
    }

    .btn-ghost:hover,
    .btn-ghost:active {
        color: #fff;
        /*background-color: #cc0099;*/
        background-color: transparent;
    }

}

/* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {
    body { font-size: 16px }
    section { padding: 25px 0; }

    .row,
    .top-text-box { padding: 0 6%; top: 60%; font-size: 120%; }
    .top-text-box h1 { margin-top: 50px; font-size: 120% }
    .col {
        width: 100%;
        margin: 0 0 4% 0;
    }


    .main-nav { display: none; }
    .mobile-nav-icon {display: inline-block;}

    .main-nav {
        float: left;
        margin-top: 30px;
        margin-left: 25px;
    }

    .main-nav li {
        display: block;
    }

    .main-nav li a:link,
    .main-nav li a:visited {
        display: block;
        border: 0;
        padding: 10px 0;
        font-size: 100%;
    }

    .sticky .main-nav { margin-top: 10px; }

    .sticky .main-nav li a:link,
    .sticky .main-nav li a:visited { padding: 10px 0; }
    .sticky .mobile-nav-icon { margin-top: 10px; }
    .sticky .mobile-nav-icon i { color: #555; }

    h1 { font-size: 160%; }
    h2 { font-size: 130%; }

    .long-copy {
        width: 100%;
        margin-left: 0%;
    }

    .booking-screen {
        width: 40%;
    }
    .steps-box:first-child { text-align: center; }

    .booking-step div {
        height: 40px;
        width: 40px;
        margin-right: 15px;
        padding: 4px;
        font-size: 120%;
    }

    .booking-step { margin-bottom: 20px; }
    .booking-step:last-of-type { margin-bottom: 20px; }

    .nails-showcase li {
        width: 100%;
    }

    .spa-showcase li {
        width: 100%;
    }

    /* ----- LOCATION ----- */
    .section-cities h2 {
      font-size: 1.1em;
    }

    /* ----------------------------------------------- */
    /* TESTIMONIALS */
    /* ----------------------------------------------- */

    .section-testimonials h2 {
      font-size: 100%;
    }

    /* ----------------------------------------------- */
    /* SERVICES */
    /* ----------------------------------------------- */

    .service-subtype {
        font-size: 150%;
        height: 50px;
        margin-bottom: 10px;
        font-weight: 300;
        color: #cc0099;
    }

    .service-subtype-low {
      height: 30px;
    }

    /* ----- LINKS ----- */

    a:link,
    a:visited {
        color: #cc0099;
        text-decoration: none;
        padding-bottom: 1px;
        border-bottom: 1px solid #cc0099;
        -webkit-transition: border-bottom 0.2s, color 0.2s;
        transition: border-bottom 0.2s, color 0.2s;
    }

    a:hover,
    a:active {
        color: #555;
        border-bottom: 1px solid transparent;
    }


    /* ----- BUTTONS ----- */
    .btn:link,
    .btn:visited,
    input[type=submit] {
        display: inline-block;
        padding: 10px 10px;
        font-weight: 300;
        font-size: 110%;
        text-decoration: none;
        border-radius: 200px;
        -webkit-transition: background-color 0.2s, border 0.2s, color 0.2s;
        transition: background-color 0.2s, border 0.2s, color 0.2s;
    }

    .btn-full:link,
    .btn-full:visited,
    input[type=submit] {
        background-color: #cc0099;
        border: 1px solid #cc0099;
        color: #fff;
        /*margin-right: 15px;*/
        font-weight: 300;
        font-size: 95%;
    }

    .btn-ghost:link {
      color: white;
    }

    .btn-ghost:visited {
      color: white;
    }
    .btn-ghost:link,
    .btn-ghost:visited {
        border: 1px solid #cc0099;
        font-weight: 300;
        font-size: 95%;
    }

    .btn:hover,
    .btn:active,
    input[type=submit]:hover,
    input[type=submit]:active {
        background-color: #cf6d17;
        font-size: 95%;
    }

    .btn-full:hover,
    .btn-full:active {
        border: 1px solid #cf6d17;
    }

    .btn-ghost:hover,
    .btn-ghost:active {
        border: 1px solid #cf6d17;
        color: #fff;
          background-color: transparent;
    }


    .contact-form {width: 100%; }

    /* ----------------------------------------------- */
    /* FOOTER */
    /* ----------------------------------------------- */

    footer {
        padding: 30px;
    }

    .social-links li a:link,
    .social-links li a:visited {
        font-size: 120%;
    }

    footer p {
        color: #888;
        text-align: center;
        margin-top: 10px;
    }
}