/*
    P02: Company Website
    Group 12 - Anshula Dekate, Jarielle Lim
    March 10th, 2017

    CSS for all Media Queries (for Responsiveness of the website)
*/

@media (min-width: 1500px) {
    .about-flex-text {
        margin: 0.3em 26em;
    }
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@media (max-width: 1200px) {
    .about-flex-text {
        margin: 0.3em 3em;
    }
}

@media (max-width: 1100px) {
    .event-item {
        flex-direction: column;
    }
    .events-img {
        margin: auto;
    }
    .events-content {
        margin: auto;
        padding: 0em 6em 4em 6em;
    }
    .events-title {
        margin: auto;
        text-align: center;
    }
    .events {
        margin: auto;
        padding: 0;
    }
}

@media (max-width: 1020px) {
    /*cart items~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .cart-title-flex {
        flex-direction: column;
        margin-left: auto;
    }
    .cart-title-flex h2 {
        margin: 1em;
        padding: 0;
    }
    .cart-container .cart-flex-item {
        flex-direction: column;
    }
    .cart-flex-item.titles {
        display: none;
    }
    .cart-flex-item .delete img {
        margin: 2em 0;
    }
    .cart-flex-item .like img {
        margin: 2em 0;
    }
    .cart-flex-item .prodName h4 {
        text-align: center;
        margin: 2em 0;
    }
    .cart-flex-item .price {
        max-width: none;
    }
    .cart-flex-item .price p {
        text-align: center;
    }
    .cart-flex-item#total-price {
        flex-direction: row;
        margin: auto;
        width: 50%;
        text-align: center;
    }
    .cart-flex-item#total-price .delete {
        display: none;
    }
    .cart-flex-item#total-price .like {
        display: none;
    }
    .cart-flex-item#total-price .prodName {
        display: none;
    }
    .cart-flex-item#total-price .image {
        display: none;
    }
    .cart-flex-item#total-price .delete {
        display: none;
    }
    .cart-flex-item#total-price .price p {
        text-align: left;
    }
    .cart-flex-item#total-price .total {
        max-width: none;
    }

    .cart-title-flex {
      padding: 3em 0em;
    }

    .thanks img{
      width: 70%;
    }
}

@media (max-width: 850px) {
    .welcome-banner-text {
        top: 4%;
    }
}

@media (max-width: 650px) {
    .nav-item.logo {
        order: -1;
    }
    .nav-item {
        padding: 1.5em;
    }
    .cart {
        float: none;
    }
    .welcome-banner-text {
        top: 12%;
        font-size: 40%;
    }
    .main-nav-flex {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .about-flex-text {
        margin: 0.3em 0em;
        padding: 2em;
    }
    .about-flex-image {
        margin: auto;
        width: 50%;
        padding: 5em 1em 0em 1em;
    }
    .cart-shipping-title {
        padding: 1em;
    }

    .cart-container{
      margin: 0em;
    }
    #address, #exp-date, #card-num {
        width: 90%;
    }
    .cart-shipping-flex select {
        width: 100%;
    }
    .quantity select.quant {
        width: auto;
    }

.thanks{
  padding: 4em 0em;
}

.product-about p {
    padding: 2em 2em;
    padding-bottom: 4em;
}


}

@media (max-width: 500px) {
    .welcome-banner-text {
        top: 12%;
    }
    .event-title h3 {
        flex-direction: column;
        text-align: center;
    }
    .event-title {
        flex-direction: column;
    }

		.review-post{
			margin: 2em 1em;
		}
}

@media (max-width:405px) {
    .welcome-banner-text {
        top: 22%;
        font-size: 30%;
    }

		.button-default.adding{
		  margin: 1em 0em;
		}
}


/* ------- FAQ page media queries ----- */

@media (max-width: 50em) {
    .faq-list li {
        padding: 0.5rem 0rem 0.5rem 0rem;
    }
    .faq-list {
        padding: 1rem 0rem 1rem 0rem;
    }
    .faq-answers {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .faq-answers h2 {
        max-width: 40rem;
    }
    .faq-answers p {
        max-width: 40rem;
    }
    .sub-answers {
        padding: 0rem 2.5rem;
    }
}


/* -------- Product Lisitng -------- */

@media (max-width: 40em) {
    .opt-box {
        height: 2.5rem;
        width: 20rem;
    }
    .opt-title {
        font-size: 1rem;
    }
    .opt {
        padding: 0em;
        text-align: left;
    }
}

/* --------- Product details --------- */
/* --- Portrait view --- */

@media (max-width: 50em) {
    .product-image {
        display: inline;
    }

    .product-image img {
        width: 100%;
    }

    .product-basics h1 {
        text-align: left;
        font-size: 1.6rem;
    }

    .product-basics h2 {
        text-align: left;
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
        padding-left: 0rem;
        padding-top: 0rem;
        border-bottom: 1px solid black;
        font-size: 1.3rem;
    }

    .product-basics p {
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid black;
    }

    .button-qty {
        padding: 1em 0.5em;
    }

    .button-default {
        padding: 1.5em 2em;
        font-size: 0.75em;
    }
    table {
        padding: 1rem 2rem 4rem 2rem;
    }
}

@media (max-width: 1100px) {
    .product-basics-item {
        flex-direction: column;
    }
    .product-basics {
        margin: auto;
        padding: 2em 3em 2em 3em;
    }
}


/* ------ Style Guide ------ */

@media (max-width: 40em) {
    .guide-subsec {
        padding: 0.5rem 0rem 1rem 1.5rem;
    }
    .guide-header {
        padding-top: 1.5rem;
    }
}