/*
	Hi Andy <3
	pls use only rem, %, and vw
*/
@media screen and (max-width:1499px){
    main{
        width:auto;
    }

    main#news{
        width:auto;
    }

    main#about{
        width:auto;
    }

    #about #mike{
        margin: 0;
    }

    main#shop{
        width:auto;
    }

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

    #home blockquote{
        text-align: center;
        margin-left: -2em;
        padding-right: 8rem;
    }
    #home blockquote span:not(.quote):before {
        content: "";
        display: block;
        height: 0;
    }
    #home blockquote span:not(.quote){
        margin-left: 8em;
        display: inline-block;
        clear: both;
    }

    #hero h2{
        padding:0;
        text-align: center;
    }
    .news-item img{
        margin: 0 7.5rem 0 2rem;
    }

}
@media screen and (max-width:1024px){
    html { font-size: .520833333vw; }
    
    main {
        width:auto;
    }

    main#news{
        padding:5rem; 
    }

    main#about{
        display: flex;
        flex-direction: column;
    }

    #about #mike{
        display: block;
        margin: 0 auto;
        padding-bottom: 5rem;
    }

    main#shop{
        padding:5rem 0rem 5rem 0rem;
    }

    #hero h2{
        bottom:8rem;
    }

    #home blockquote{
        height:25rem;
    }
    .news-item h2{
        text-align: left;
        font-size: 4rem;
    }
    #search #results .product{width:calc(35% - 1.875rem);}
    #search.has-query .form-container {
        flex-direction: column;
    }

}
@media screen and (max-width: 850px){
    #news-archive .news-item{
        flex-direction: column;
    }
    a[rel="home"]:before{
        display: none;
    }
    a[rel="home"]{
        margin: 2rem 0 2rem 0;
    }
    a[rel="home"]:after{
        display: none;
    }

    header nav ul{
        padding: 0;
    }

    main#news{
        padding:5rem 0 0 2rem;
        display: flex;
        flex-direction: column;
        width:auto;
    }

    #news .news-image{
        margin: 0;
    }
    .news-item img{
        width:30rem;
        margin: 5rem 0rem;
    }
    .news-item > div{
        padding-left: 3rem;
    }
    #home blockquote{
        margin-left:auto;
    }
    #contact-form fieldset div{
        flex-direction: column;
    }
    #contact-form input[type="text"], #contact-form input[type="email"], #contact-form textarea{
        width:100%;
    }
    #contact-form label{
        width:auto;
        padding: auto;
    }
    #contact-form label[for="input-enquiry"]{
        height: auto;
    }
    #hero h2{
        font-size: 10rem;
    }
    #search .product-heading {
        flex-direction: column;
    }
    #search .product-heading .sort {
        margin: auto;
    }
    #search .product-heading .limit {
        margin: 2.5rem 0 0 -13rem;
    }
    #product .wrapper {
        flex-direction: column;
    }
    #product > .wrapper > div {
        width: 100%;
    }
    #product #purchase {
        margin: 0;
    }
}
@media screen and (max-width: 775px){
    #search #results .product {
        width: calc(47% - 1.875rem);
    }
    #search #input-search {
        width: 63rem;
    }
}
@media screen and (max-width: 650px){
    #search #input-search {
        width: 52rem;
    }
    ul.breadcrumb a {
        font-size: 1.25rem;
    }
}
@media screen and (max-width: 575px){
    #search #results .product {
        width: calc(78% - 1.875rem);
        margin-right: 0;
    }
    #search #input-search {
        width: 47rem;
    }
    #product h1 {
        font-size: 2.5rem;
    }
    #product > .wrapper > div:first-of-type {
        padding-right: 0;
    }
    #product > .wrapper > div:last-of-type {
        padding-left: 0;
    }
}
@media screen and (max-width: 500px)
{
    html { font-size: 2vw; min-width: 450px;}

    header > div{
        flex-direction: column-reverse;
    }
    header .social{
        margin: 0;
    }
    header > nav{
        margin-top: -5rem;
    }

    #hero{
        margin-top: 9rem;
        height:28rem;
    }
    #home blockquote h2{
        font-size: 8.5vw;
    }

    #home blockquote span:not(.quote){
        margin-left:2rem;
        display: block;
    }

    #home blockquote cite{
        font-size: 9.25vw;
    }
    #find-brands > ul{
        display: flex;
    }
   div  #find-brands > section{
        margin-top: 20rem;
        position: initial;
    }

    a[rel="home"]{
        margin: 3rem 0 3rem 0;
    }

    #find-brands > ul li:after{
        display: none;
    }

    header nav ul{
        padding: 0;
    }
    header nav ul li a{
        font-size: 3.75rem;
    }

    main#about{
        padding-top: 10rem;
    }

    main#shop{
        padding-top: 10rem;
    }

    main#news{
        padding:10rem 0 0 2rem;
        display: flex;
        flex-direction: column;
    }
    main#news-archive{
        padding-top:10rem;
    }
    main#contact{
        padding-top: 10rem;
    }
    #news .news-image{
        margin: 0;
    }
    .news-item img{
        display: contents;
    }
    .news-item > div{
        padding-left: 3rem;
    }
    main#shop{
        padding-left: 3rem;
    }
    #shop h1{
        font-size: 8.5rem;
    }
    #shop input[type="email"]{
        width:40rem;
        margin-bottom:2rem;
    }
    footer nav > div:first-child > a{
        font-size: 1.75rem;
        padding: .6rem 1rem;
        margin: 0;
    }
    #hero h2{
        font-size: 7rem;
    }
    #search #input-search {
        margin-top: 9rem;
        width: auto;
    }
    #search h1 {
        margin-top: 9rem;
    }
    #product {
        padding: 3rem;
        margin-top: 12rem;
    }
    ul.breadcrumb a {
        font-size: 1.1rem;
    }
}