/*
Moxie Green: #338c7c
mobile: <768px
tablet: 768px
desktop: 1250px
*/
body {
    background-color      : #f6f6f6;
    color                 : #696c77;
    font-family           : Raleway,sans-serif;
    font-size             : 16px;
    font-style            : normal;
    font-weight           : 500;
    line-height           : 1.625;
    padding               : 20px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    margin     : 0;
    padding    : 0;
}

h1 {
    font-size  : 1.5rem;
}

h2 {
    font-size  : 1.1rem;
}

@media screen and (min-width : 768px) {
    h1 {
        font-size  : 2.5rem;
    }

    h2 {
        font-size  : 1.5rem;
    }
}

.ng-hide {
    display: none !important;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

#moxie-logo {
    height   : auto;
    max-width: 100%;
}

.header {
    align-items: stretch;
    display    : flex;
}

.header .logo {
    margin-right: 3rem;
    max-width   : 150px;
    width       : 25%;
}

.header .title {
    color      : #338c7c;
    line-height: normal;
    width      : 75%;
}

.info {
    display        : flex;
    justify-content: flex-start;
}

.version-info {
    margin-right: 3rem;
}

.cart-info {
    color      : #7aab56;
    font-size  : 1.2rem;
    font-weight: 700;
}

.cart-remove {
    font-size      : 2rem;
    color          : firebrick;
    font-weight    : 700;
    line-height    : 1;
    text-decoration: none;
}

nav ul.menu {
    display        : flex;
    justify-content: flex-start;
    list-style     : none;
    margin         : 0;
    padding        : 0;
    width          : 100%;
}

nav ul.menu li {
    margin-right: 3rem;
}

.checkout {
    width: 100%;
}

@media screen and (min-width : 768px) {
    nav ul.menu, .checkout {
        width: 50%;
    }
}

@media screen and (min-width : 1250px) {
    nav ul.menu, .checkout {
        width: 50%;
    }
}

.product-block {
    background-color: #fff;
    margin-top      : 20px;
    padding         : 20px;
}

.product-block .title-block {
    display        : flex;
    justify-content: space-between;
}

.cart-button {
    border-color : rgb(9, 184, 151);
    border-radius: 26px;
    color        : rgb(9, 184, 151);
    cursor       : pointer;
    font-style   : normal;
    font-weight  : 700;
    margin-left  : 3rem;
    padding      : 10px 20px;
}

.product-block .prod-img {
    float: left;
    width: 100px;
}

@media screen and (min-width : 768px) {
    .product-block .prod-img {
        width: 200px;
    }
}

@media screen and (min-width : 1250px) {
    .product-block .prod-img {
        width: 308px;
    }
}

.clear {
    clear: both;
}

.checkout tr td, .checkout th td {
    padding: 5px;
}