@media only screen and (max-width: 900px) {
    .shadow {
        box-shadow: none;
    }
    footer-form a {
        text-align: center;
        margin: auto;
    }
    .item-bottom a, .item-bottom select {
        display: block;
        width: 97.5%;
        margin: 5% 0;
    }
    .btn i {
        font-size: 1rem;
        position: relative;
        top: 0.3rem;
        margin-left: 0;
    }
    .btn i.icon {
        font-size: 1.5rem;
    }
    input, textarea {
        font-size: 1rem;
    }
    h1,h2,h3,h4 {
        font-family: var(--h);
        font-size: 3rem;
        line-height: 2rem;
        margin-top: 0;
        font-weight: 800;
    }
    h1.small, h2.small, h3.small, h4.small {
        font-size: 1.25rem;
        line-height: 0.7;
        font-weight: 100;
    }
    .btn {
        font-size: 1rem;
    }
    nav {
        display: block;
    }
    .nav-bg {
        height: 100vh;
        background: url(../img/head-bg.jpg) top center / auto 100% no-repeat;
    }
    #nav-toggle {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        min-height: 48px;
        min-width: 48px;
        font-size: 2rem;
        padding-left: 1.3rem;
        z-index: 101;
    }
    #logo {
        display: none;
    }
    #logo-bright {
        margin-bottom: 20vh;
        grid-row-start: 2;
        padding-top: 6rem;
    }
    #mobile-header {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        text-align: center;
        width: 100vw;
        height: 100vh;
        color: white;
        text-shadow: 0px 0px 15px rgba(0,0,0,0.78);
        background: rgba(0,0,0,0.5);
    }
    #mobile-header div {
        grid-row-start: 3;
    }
    #mobile-header div::after {
        font-family: "Ionicons";
        content: "\f3d0";
        font-size: 1.5rem;
        top: 1rem;
        position: relative;
    }
    #mobile-header h1 {
        margin-bottom: 0.5rem;
        font-size: 2rem;
        letter-spacing: 0.1rem;
    }
    #mobile-header h1.small {
        font-size: 1rem;
    }
    #cart {
        position: fixed;
        right: 0;
        top: 0;
        z-index: 99;
        min-height: 48px;
        min-width: 48px;
        font-size: 1rem;
    }
    #cart i {
        font-size: 1.5rem;
    }
    #search, #browse, #contact-btn, #location {
        display: none;
    }
    #search, #browse {
        position: fixed;
    }
    #search {
        top: 280px;
        z-index: 101;
        width: 100vw;
    }
    #search-bar {
        width: 80%;
        height: 5rem;
        padding: 1rem;
        font-size: 1rem;
    }
    #search-btn {
        padding: 1rem;
        height: 5rem;
        width: 20%;
    }
    #search-btn i {
        font-size: 2rem;
    }
    #browse {
        background: rgba(0,0,0,0.8);
        width: 100vw;
        height: 100vh;
        padding-top: 80px;
        top: 0;
        z-index: 100;
    }
    #browse a {
        font-size: 1rem;
        padding: 2rem;
        height: auto;
    }
    #browse a i {
        float: right;
        font-size: 1.5rem;
    }
    #livechat {
        transform: translateX(220px);
        bottom: 0;
        transition: transform 0s ease;
    }
    #livechat-header {
        min-height: 48px;
        height: 4rem;
    }
    #livechat-header h3 {
        font-size: 2rem;
        padding-top: 1.3rem;
    }
    #chat-toggle::before {
        font-size: 2rem;
        height: 4rem;
        min-width: 48px;
        padding: 1rem 1rem 0 1.5rem;
    }
    #livechat.show-chat #chat-toggle::before {
        font-size: 2.5rem;
        padding: 0.3rem 0 0 1.5rem;
    }
    #livechat.show-chat {
        height: 100vh;
        width: 100vw;
        z-index: 102;
        transition: transform 1s ease;
    }
    #livechat-content {
        transition: height 0s ease, padding 0s ease;
    }
    #livechat-reply button {
        padding: 1rem 1rem 1.5rem 1rem;
    }
    #livechat-reply button i {
        position: relative;
        top: 0.4rem;
        left: 1rem;
    }
    #livechat-reply button::before {
        content: "Send message ";
    }
    #livechat-reply textarea {
        min-height: 20vh;
    }
    #livechat #livechat-reply {
        grid-template-columns: 1fr;
    }
    #livechat.show-chat #livechat-content {
        transition: height 0.5s ease, padding 1s ease;
    }
    nav.show-nav #search, nav.show-nav #browse {
        display: block;
    }
    
    #intro-content {
        display: block;
        padding: 8rem 1rem;
        text-align: center;
        background: var(--3);
        color: var(--1);
        text-shadow: none;
    }
    #intro-bg {
        display: none;
    }
    #intro-content .qoute {
        max-width: 70%;
        margin: auto;
        margin-top: 10rem;
    }
    #intro-content .qoute::before {
        left: 45%;
        top: -4rem;
        filter: invert(1);
    }
    #pick-shoes {
        margin: 0 auto;
    }
    #pick-shoes .box-title {
        text-align: center;
    }
    #pick-shoes .box-title h2.small {
        margin-bottom: 0;
    }
    #pick-shoes .box-title:hover {
        opacity: 0.5;
    }
    #pick-shoes .box-title h2:not(.small) {
        line-height: 2rem;
        font-size: 3rem;
    }
    #pick-shoes .box-title *::selection {
        background: transparent;
    }
    #pick-shoes .box-title i {
        transform: rotate(-90deg);
        transition: transform 0.5s ease;
    }
    #by-traits.show-traits .box-title i {
        transform: rotate(0);
    }
    #by-occasion.show-occasion .box-title i {
        transform: rotate(0);
    }
    #pick-shoes .box-title {
        padding: 3rem 0 0 0;
    }
    #by-traits {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: auto;
        grid-auto-rows: 10rem;
        max-height: 10rem;
        overflow: hidden;
        transition: all 0.5s ease;
    }
    #by-traits .box-title {
        grid-area: 1 / 1 / 2 / 3;
        width: 100vw;
    }
    #by-traits.show-traits .box-title {
        grid-area: 1 / 1 / 2 / 3;
        width: 100%;
    }
    #by-traits .box-title h2.small::after {
        content: " by";
    }
    #by-traits .box-title h2 span {
        display: none;
    }
    #by-traits .box-title h2 i::before {
        font-family: "Ionicons";
        opacity: 1;
        content: "\f3d0";
        font-style: normal;
    }
    #by-traits h2:not(.small) {
        max-width: 100%;
    }
    #by-traits .box-title h2 i {
        text-align: center;
        display: inline-block;
        margin: auto;
        position: relative;
        top: 0.3rem;
    }
    #by-traits li a, #by-traits #accessories span {
        height: 15rem;
        font-size: 1.5rem;
        margin-top: -0.5rem;
    }
    #by-traits li span::after {
        content: " \f3d1";
        font-size: 3rem;
        position: relative;
        top: 0.6rem;
        left: 1rem;
        font-family: "Ionicons";
    }
    #by-traits:hover {
        cursor: pointer;
    }
    #by-traits.show-traits {
        max-height: 50rem;
        transition: all 0.5s ease;
    }
    #by-traits li:not(.box-title) {
        max-height: 0;
        height: auto;
        transition: all 0.5s ease;
    }
    #by-traits.show-traits li:not(.box-title) {
        max-height: 100%;
    }
    #by-occasion {
        display: grid;
        grid-template-columns: 1fr;
        height: auto;
        grid-auto-rows: 10rem;
        max-height: 10rem;
        overflow: hidden;
        transition: all 0.5s ease;
        grid-gap: 0;
    }
    #by-occasion .occ-item a {
        height: 10rem;
    }
    .sidebar {
        display: block;
        margin: 0;
    }
    #by-occasion:hover {
        cursor: pointer;
    }
    #by-occasion .box-title {
        text-align: center;
        padding: 5rem 0 rem 0;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    #by-occasion .box-title h2.small {
        font-size: 1rem;
    }
    #by-occasion .box-title h2.small::after {
        content:" by";
    }
    #by-occasion .box-title h2:not(.small) span {
        display: none;
    }
    #by-occasion .box-title h2 i {
        text-align: center;
        display: inline-block;
        margin: auto;
        position: relative;
        top: 0.3rem;
    }
    #by-occasion .occ-item a {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 0;
    }
    #by-occasion .occ-item a span {
        grid-column: 2;
        text-align: left;
        padding-left: 2rem;
        font-size: 1.5rem;
        text-shadow: none;
        padding-top: 4rem;
    }
    #by-occasion .occ-item a span {
        background: var(--3);
        color: var(--1);
        display: block;
    }
    #by-occasion .occ-item a span::after {
        content: "\f3d1";
        font-family: "Ionicons";
        float: right;
        padding-right: 2rem;
    }
    #by-occasion .occ-item a img {
        height: 100%;
        width: auto;
    }
    #by-occasion.show-occasion .box-title i {
        transform: rotate(0);
    }
    #by-occasion.show-occasion {
        max-height: 50rem;
        transition: all 0.5s ease;
    }
    #by-occasion li:not(.box-title) {
        max-height: 0;
        height: auto;
        transition: all 0.5s ease;
    }
    #by-occasion.show-occasion li:not(.box-title) {
        max-height: 100%;
    }
    
    #what-to-wear {
        padding: 5rem 0 5rem 0;
    }
    #what-to-wear .arrow-links {
        padding: 0 2rem 2.5rem 2rem;
    }
    #what-to-wear div {
        padding: 2rem;
        text-align: center;
    }
    #what-to-wear li a {
        padding: 1rem 0rem;
        font-size: 1.25rem;
    }
    #what-to-wear a.btn {
        border-radius: 0;
        border-top-left-radius: 2.5rem;
        border-bottom-left-radius: 2.5rem;
        height: auto;
        padding: 0.5rem 2rem 1rem 1rem;
        margin: 0 0 0 2rem;
    }
    #what-to-wear a.btn i {
        position: relative;
        top: 0.4rem;
        left: 1rem;
    }
    footer {
        max-width: 100vw;
        margin: 0;
    }
    #footer-top {
        display: block;
    }
    #footer-bottom {
        display: block;
    }
    #visit-us {
        border: 0;
        display: grid;
        height: 100vh;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        padding: 5rem;
    }
    #visit-us-text {
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
        text-align: center;
    }
    #visit-us #map {
        position: relative;
    }
    #visit-us #map .btn {
        position: absolute;
        top: 45%;
        border-radius: 2.5rem;
        padding: 1rem;
        text-align: center;
    }
    #visit-us #map .btn::after {
        content: "Get directions";
    }
    #get-in-touch {
        border: 0;
        background: var(--4);
        padding: 10rem 2rem;
    }
    #get-in-touch h3 {
        width: 100%;
        display:grid;
        grid-template-columns: 1fr 1fr;
        text-align: center;
        max-width: 12rem;
        margin: auto;
        grid-gap: 2rem;
        padding-bottom: 3rem;
    }
    #get-in-touch h3 span {
        order: 2;
    }
    #get-in-touch h3 .icon {
        position: relative;
        top: 1rem;
        order: 2;
    }
    #get-in-touch form {
        display: block;
    }
    #get-in-touch form input, 
    #get-in-touch form textarea {
        width: 100%;
        padding: 1.5rem;
        margin: 0.3rem 0 0 0;
        font-weight: bold;
    }
    #get-in-touch button {
        width: 100%;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 2.5rem;
        border-bottom-left-radius: 2.5rem;
        padding: 1rem 1rem 1.5rem 1rem;
    }
    #get-in-touch button i {
        position: relative;
        top: 0.3rem; left: 1rem;
    }
    #footer-links {
        grid-template-columns: 1fr;
        grid-gap: 5rem;
        padding: 8rem 2rem
    }
    #footer-links h4 {
        text-align: center;
    }
    #footer-links .arrow-links a {
        padding: 1rem;
        font-size: 1rem;
        font-weight: bold;
        font-family: var(--ui);
    }
    .arrow-links li a::after {
        font-size: 1.5rem;
        position: relative; top: -0.3rem;
    }
    #members-login {
        height: 100vh;
        grid-template-rows: repeat(6,1fr);
        grid-gap: 2rem;
        background: url(../img/leather-bg@2x.jpg) center center / cover no-repeat;
    }
    #members-login img {
        margin: auto;
        grid-row-start: 3;
        width: 80%;
    }
    #members-login a {
        height: 4rem;
        grid-row-start: 4;
    }
    #members-login a i {
        position: relative;
        top: 0.4rem;
        left: 1rem;
    }
    #members-login a {
        background: none;
        border: 2px solid var(--2);
        color: var(--4);
        width: 80%;
        border-radius: 2.5rem;
        margin: auto;
        line-height: 2.3em;
    }
    #members-login a:hover {
        background: var(--2);
    }
    .modal-window {
        width: 100vw;
        text-align: left;
    }
    .modal-window .btn {
        text-align: center;
    }
    .modal-window .terms {
        text-align: center;
    }
    .modal-window form .inputs {
        grid-template-columns: 1fr;
    }
    
    
    
    .item-top, .item, .accessories {
        display: block;
    }
    .item-bottom, .cart-info {
        grid-template-columns: 1fr 1fr;
    }
    .top-bar {
        grid-template-columns: 1fr;
    }
    .shop-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1.5em;
    }
    .top-bar .btn {
        float: none;
        display: block;
        width: 100%;
        min-height: auto;
        margin: 0;
    }
    #size-cart {
        display: none;
    }
    .finish {
        margin: 5em 0;
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .accessories p {
        width: 80%;
        margin: 1em auto 2em auto;
    }
    input {
        min-height: 3em;
    }
    section.content {
       padding: 2em;
    }
    h1,h2,h3,h4 {
        text-align: center;
    }
    .item-top hr {
        display: none;
    }
    #club-code {
        font-size: 2em;
    }
    .price {
        font-size: 2em;
        border-top: 2px solid rgba(255,255,255,0.4);
        border-bottom: 2px solid rgba(255,255,255,0.4);
        margin: 2em 0;
        padding: 0.5em;
    }
    .btn, select.btn::placeholder, .accessories {
        text-align: center;
        text-align-last:center;
    }
    .btn i {
        padding-left: 1em;
    }
    .btn {
        min-height: 4em;
    }
    select.btn {
        height: 3em;
    }
    #visit-us-text {
        padding: 4em 0;
        
    }
    #visit-us {
        padding: 0em;
        height: auto;
        grid-template-rows: auto auto;
    }
    #visit-us #map .btn {
        width: 80%;
        margin: auto;
        left: 0;
        right: 0;
    }
    .top-bar {
        margin: 5em auto auto auto;
    }
    #footer-top {
        border-left: 0;
        border-right: 0;
    }
    #footer-form .btn {
        margin: 1em auto 0 auto;
        display: block;
        width: 100%;
    }
    .customizer {
        display: block;
        margin-top: 5em;
    }
    .customizer-img {
        width: 100%;
        height: 10em;
    }
    .customizer-traits .btn {
        margin: 0 0 0 auto;
        display: block;
        line-height: 3em;
    }
    .stars {
        margin-top: 1em;
        width: 10em;
    }
    .qoute-line {
        margin: 5em auto auto auto;
        width: 80%;
    }
    .description {
        display: block;
    }
    .units {
        width: 100%;
        display: block;
        margin-top: 2rem;
    }
    .sizing {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 5em;
    }
    .sizing select {
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .materials {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .description p {
        width: 80%; margin: auto;
    }
    .bottom-nav {
        grid-template-columns: 1fr 1fr;
    }
    .bottom-nav, .materials {
        margin-bottom: 5em;
    }
    .item-traits {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 3em;
    }
    .item-traits li {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .item-traits li img {
        width: 80%;
    }
    .item-buttons {
        display: block;
    }
    .item-buttons .btn {
        margin: 5% 0;
        width: 97.5%;
    }
    .accessories-img img:first-of-type {
        display: none;
    }
    .accessories-img {
        grid-template-columns: max-content 1fr 1fr max-content;
        grid-gap: 2rem;
    }
}
@media only screen and (min-width: 901px) and (max-width: 1200px) {
    .item-top, .item, .accessories {
        display: block;
    }
    .item-bottom, .cart-info {
        grid-template-columns: 1fr 1fr;
    }
    .top-bar {
        grid-template-columns: 1fr;
    }
    .shop-menu {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1.5em;
    }
    .top-bar .btn {
        float: none;
        display: block;
        width: 100%;
        min-height: auto;
        margin: 0;
    }
    #size-cart {
        display: none;
    }
    .finish {
        margin: 5em 0;
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .accessories p {
        width: 80%;
        margin: 1em auto 2em auto;
    }
    input {
        min-height: 3em;
    }
    section.content {
       padding: 2em;
    }
    h1,h2,h3,h4 {
        text-align: center;
    }
    .item-top hr {
        display: none;
    }
    #club-code {
        font-size: 2em;
    }
    .price {
        font-size: 2em;
        border-top: 2px solid rgba(255,255,255,0.4);
        border-bottom: 2px solid rgba(255,255,255,0.4);
        margin: 2em 0;
        padding: 0.5em;
    }
    .btn, select.btn::placeholder, .accessories {
        text-align: center;
        text-align-last:center;
    }
    .btn i {
        padding-left: 1em;
    }
    .btn {
        min-height: 4em;
    }
    select.btn {
        height: 3em;
    }
    #visit-us-text {
        padding: 4em 0;
        
    }
    #visit-us {
        padding: 0em;
        height: auto;
        grid-template-rows: auto auto;
    }
    #visit-us #map .btn {
        width: 80%;
        margin: auto;
        left: 0;
        right: 0;
    }
    .top-bar {
        margin: 5em auto auto auto;
    }
    #footer-top {
        border-left: 0;
        border-right: 0;
    }
    #footer-form .btn {
        margin: 1em auto 0 auto;
        display: block;
        width: 100%;
    }
    .customizer {
        display: block;
        margin-top: 5em;
    }
    .customizer-img {
        width: 100%;
        height: 10em;
    }
    .customizer-traits .btn {
        margin: 0 0 0 auto;
        display: block;
        line-height: 3em;
    }
    .stars {
        margin-top: 1em;
        width: 10em;
    }
    .qoute-line {
        margin: 5em auto auto auto;
        width: 80%;
    }
    .description {
        display: block;
    }
    
    .units {
        width: 100%;
        display: block;
        margin-top: 2rem;
    }
    .sizing {
        grid-template-columns: 1fr 1fr;
        margin-bottom: 5em;
    }
    .sizing select {
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .materials {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
    .description p {
        width: 80%; margin: auto;
    }
    .bottom-nav {
        grid-template-columns: 1fr 1fr;
    }
    .bottom-nav, .materials {
        margin-bottom: 5em;
    }
    .item-traits {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 3em;
    }
    .item-traits li {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .item-traits li img {
        width: 80%;
    }
    .item-buttons {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 1em;
    }
    .item-buttons .btn {
        margin: 0;
    }
    
}