/*  for WIDESCREEN devices  */
@media screen and (min-width: 1200px) {  }

/*  for TABLET devices  */
@media screen and (max-width: 750px), screen and (max-width: 780px) and (orientation: portrait) {  }

/* for MOBILE devices */
@media screen and (max-width: 520px) {  }

img, embed, object, video {
	max-width: 100%;
}

.outerwrap {
	width: 100%;
	clear: both;
	display: block;
}

.innerwrap {
	width: 96%;
	max-width: 68.75em;  /* equivilent to 1100px */
	margin: 0 auto;
	display: block;
}

/* Start student code below */

html, a {
    font-family: 'Asap', sans-serif;
    text-decoration: none;
}
a:active, a:visited, a {
    color: #003366;
}
a:hover {
    color:#cc0000;
}
/* Aside Styling */
body {
    background-color: rgb(180, 229, 229);
}
section > div {
    display: flex;
}
div.sidebar {
    flex: 0 0 18%;
}
header h1 {
    display: none;
}
header a.desktop-logo img {
    padding: 1em 1.5em;
}
header a.home-logo img {
    width: 13em;
    margin: 1em 1em -2em 3em;
}
header div.mobile {
    display: none;
}
input.search {
    margin-top: 1em;
    padding: .5em 2.2em .5em 1em;
    border-radius: 5em;
    background: url(../art/search.svg) no-repeat right center;
    background-color: white;
    background-size: 1.75em;
    width: 100%;
    border: 0;
    font-size: .7em;
    border-bottom: 4px solid rgb(180, 229, 229);
}
aside {
    display: flex;
    flex-direction: column;
}
.category div {
    background-color: white;
    border-radius: 1em;
    padding: .5em;
    margin-top: .5em;
}
.category div h4 {
    font-size: .75em;
    padding-left: .5em;
    color: #5a5b5d;
}
.category div ul li {
    background-color: #d6e7e7;
    padding: .5em 1em;
    text-align: center;
    font-size: .7em;
    line-height: 1.25em;
    font-weight: 600;
    margin-top: .5em;
    border-radius: .5em;
    color: #003366;
    transition: .3s all ease;
}
.category div ul li:hover  {
    background-color: rgb(255, 245, 207);
}
.category div ul li:hover a {
    color: #cc0000;
}

/* Homepage Hero Styling */
@keyframes heroanimation {
	0%, 23% {
		background-position: 0 center,
			100vw center,
			200vw center,
			300vw center;
	}
	28%, 48% {
		background-position: -100vw center,
			0vw center,
			100vw center,
			200vw center;
	}
	53%, 72% {
		background-position: -200vw center,
			-100vw center,
			0vw center,
			100vw center;
	}
	78%, 100% {
		background-position: -300vw center,
			-200vw center,
			-100vw center,
			0vw center;
	}

}


.home-hero {
    animation: heroanimation 25s linear 2;
    height: 20em;
    background-image: url(../art/home-hero04.jpg), url(../art/home-hero.jpg), url(../art/home-hero03.jpg), url(../art/home-hero02.jpg);
    background-position: 0 center, 100vw center, 200vw center, 300vw center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1em;
    margin-top: -.25em;
}

@media screen and (max-width: 920px) { 
    .home-hero {
        height: 12em;
        margin-top: 0;
    }
}
@media screen and (max-width: 550px) { 
    .home-hero {
        height: 10em;
    }
}
@media screen and (max-width: 550px) { 
     .home-hero {
        height: 8em;
    }
}

.homepage .category {
    display: flex;
}
.homepage .category div {
    flex: 1 1 30%;
}
.homepage .category div ul {
    display: block;
    font-size: 1.2em;
}
.homepage .category div h4 {
    text-align: center;
}
#third li {
    padding: .95em;
}
#half li {
    padding: 1.85em;
}
#quarter li {
    padding: 1em;
}
.homepage h2 {
    padding-top: 1.5em;
}
@media screen and (max-width: 600px) { 
    .homepage .category {
    display: block;
    }
    .homepage .category ul li {
/*        padding: .5em;*/
        font-size: 1em;
    }
    .homepage .category h4 {
        font-size: 1em;
    }
}

@media screen and (max-width: 780px) { 
    section > div {
        display: block;
    }
    header a.desktop-logo img {
        display: none;
    }
    header a.home-logo img {
        display: none;
    }
    header div.mobile {
        display: block;
        padding: 1em;
        margin-top: 1em;
    }
    header a.mobile-logo img {
        width: 8em;
    }
    header div.mobile ul {
        display: flex;
        justify-content: flex-end;
    }
    header div.mobile ul li {
        text-align: right;
        font-size: 2.2em;
        margin-top: -1.4em;
        margin-bottom: .25em;
        padding-left: .5em;
    }
    #mobilenav {
        cursor: pointer;
    }
    header div.mobile ul li a.signin, header div.mobile ul li a.cart {
        font-size: .55em;
        margin-bottom: -.25em;
    }
    .category {
        display: none;
    }
    nav.primary {
        display: none;
    }
    .primary .signin, .primary .cart {
        display: none;
        padding: 0;
    }
    input {
        display: none;
    }
}


/* Primary Navigation Styling */

nav.primary ul {
    display: flex;
    flex-direction: row;
    padding: 1em 1em .5em 2.75em;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.primary ul li {
    padding: 0 .75em;
    text-align: center;
    transition: .3s all ease;
}
.primary ul li a{
    color: #003366;
    font-weight: 600;
}

/* Down Arrow */
i {
    border: solid #003366;
    border-width: 0 2px 2px 0;
    border-radius: .12em;
    display: inline-block;
    padding: .2em;
    margin-left: .5em;
    margin-bottom: .1em;
    transform: rotate(45deg);
}

/*Primary Nav Styling Cont.*/

a.cart {
    display: inline-block;
    margin-top: -.25em;
    background: url(../art/cart.svg) no-repeat 0;
    padding: .85em;
}
a.signin {
    display: inline-block;
    margin-top: -.25em;
    background: url(../art/sign_in.svg) no-repeat 0;
    padding: .85em;
}

nav.primary a:hover, nav.primary a:active {
    color: #cc0000;
}
nav.primary a.cart:hover {
    -webkit-mask: url(../art/cart.svg) no-repeat 100% 100%;
    mask: url(../art/cart.svg) no-repeat cover;
    background-color: white;
    background-image: none;
    margin-top: -.5em;   
}
nav.primary a.signin:hover {
    -webkit-mask: url(../art/sign_in.svg) no-repeat 0;
    mask: url(../art/sign_in.svg) no-repeat cover;
    background-color: white;
    background-image: none;
    margin-top: -.25em;
}

/* Dropdown Styling */

.dropdown-content {
    display: none;
    position: absolute;
    font-size: .85em;
    transition:.3s all ease;
    z-index: 1;
/*    background-color: rgb(180, 229, 229);*/
    color: #003366;
    width: 10em;
    padding-top: .5em;
    border-radius: 0 0 1em 1em;
}
.dropdown-content ul {
    display: block;
    margin-top: .3em;
}
.dropdown-content ul li {
    padding: 1em 2em;
    background-color: rgb(180, 229, 229);
/*    border: 3px solid transparent;*/
    font-size: 1em;
}
.dropdown-content ul li:hover {
    background-color: rgb(225, 245, 245);
/*    border: 3px solid #003366;*/
}
.dropdown-content ul li a:hover {
    color: #003366;
}
.dropdown-content ul li:last-child {
    border-radius: 0 0 1em 1em;
}
nav ul li:hover > .dropdown-content {
    display: block;
}
nav.primary ul li .dropdown-content ul {
    padding: 0;
    justify-content: center;
}

@media screen and (max-width: 780px) {
    nav.primary ul {
        display: block;
        z-index: 1;
        text-align: center;
        font-size: 1.5em;
        padding: 0;
    }
    nav.primary > ul li {
        padding: .5em;
    }
    i {
        display: none;
    }
    nav.primary {
        display: none;
    }
    input {
        margin-bottom: 1.5em;
    }
    nav .dropdown-content {
        display: block;
        position: relative;
        width: 100%;
        font-size: .5em;
    }
    nav .dropdown-content ul {
        border-radius: 1em;
        background-color: #e2f5f5;
    }
    nav .dropdown-content ul li {
        background-color: transparent;
    }
    .dropdown-content ul li:hover {
        background-color: white;
    }
    nav .dropdown-content ul li:first-child {
        border-top: none;
        border-radius: 1em 1em 0 0;
    }
}

/* Article Styling */

article {
    background-color: white;
/*    border: 4px solid #737475;*/
    border-radius: 1.5em;
    padding: 1.5em ;
}
article > div {
    display: flex;
    justify-content: space-around;
    margin-top: .5em;
}

article div div.partone {
    flex: 0 0 35%;
    margin-right: 1.5em;
}

/* Breadcrumbs Styling */

.breadcrumbs {
    font-size: .75em;
    padding-bottom: 1em;
    justify-content: flex-start;
}
.breadcrumbs li::after {
    content: "//";
    padding-left: .5em;
}
.breadcrumbs li:last-child::after {
    display: none;
}
.breadcrumbs li {
    flex: 0 auto;
    padding-right: .5em;
}
article div ul {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
article div ul li {
    flex: 0 0 23%;
}
article div ul li > img {
    border-radius: 50%;
}
.partone img {
    margin-bottom: .5em;
}
article div img.mainimg {
    border-radius: 1em;
}

/* Article Column Two */

h2 {
    font-size: 2em;
    font-weight: 600;
    color: #cc0000;
    padding-bottom: .2em;
}
div.product {
    display: flex;
    margin-top: 1.25em;
    justify-content: space-between;
}
div.one p {
    font-size: .7em;
    padding-bottom: 1em;
}
.one-mobile {
    display: none;
}
.one img {
    width: 8em;
    margin-bottom: -.3em;
}
.two {
    width: 30%;
    margin-left: 1.5em;
    text-align: center;
}
.product div h1 {
    font-size: 2.75em;
    font-weight: 700;
    color: #003366;
}
.quantity {
    background-color: #cdcdce;
    padding: .25em 1.75em;
    border-radius: 1em;
    margin: 1em 0 .5em;
    color: #737475;
    font-size: .8em;
    width: 100%;
    margin: 1em auto .5em;
}
.quantity select {
    background-color: transparent;
/*    padding: .5em 1.75em;*/
    border: 0;
    font-size: 1em;
    outline: none;
    text-align: center;
    box-shadow: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none;
    }
.two img {
    width: 20%;
    margin: .5em 1em;
}
.two img.first {
    width: 17%;
}
div.details {
    padding-top: 1.5em;
}
@media screen and (max-width: 700px) {
    article > div {
        display: block;
    }
    article {
        padding: .5em ;
    }
    div.parttwo div {
        display: block;
        text-align: center;
    }
    div.parttwo div .two img {
        height: 1.5em;
    }
    .quantity {
        display: block;
        width: 40%;
    }
    .product .one {
        display: none;
    }
    .partone .breadcrumbs {
        justify-content: flex-start;
        font-size: .85em;
        padding-bottom: 2em;
        margin-left: 1em;
    }
    .one-mobile {
        display: block;
        text-align: center;
        margin: .5em 0 2em 0;
    }
    .one-mobile h2 {
        font-size: 2em;
    }
    .one-mobile img {
        width: 8em;
        margin-bottom: -.3em;
    }
    div.one-mobile p {
        font-size: .8em;
    }
    .partone {
        text-align: center;
    }
    .partone .mainimg {
        width: 18em;
        padding-bottom: .5em;
    }
    .partone ul {
        justify-content: center;
    }
    .partone ul.galleryimg li {
        margin: 0 .5em;
    }
    article div ul.galleryimg li {
        flex: 0 0 20%;
    }
    .partone ul.galleryimg li:last-child {
        display: none;
    }
    .two {
        margin-left: 0;
        width: 100%;
    }
   .product div h1 {
    font-size: 3.5em;
    }
    article div div.partone {
        margin-right: 0;
    }
}

/* Tabs Styling */

#tab_nav {
    padding: 0 0 .3em;
}
#tab_nav ul {
    display: flex;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9em;
    letter-spacing: .5px;
}
#tab_nav ul li:first-child {
    border-radius: 1em 0 0 0;
}
#tab_nav ul li:last-child {
    border-radius: 0 1em 0 0;
}
#tab_nav ul li {
    flex: 0 0 24%;
}
#tab_nav ul #details {
    background-color: #FFCC00;
}
#tab_nav ul #reviews {
    background-color: #F7931D;
}
#tab_nav ul #faq {
    background-color: #CC0000;
}
#tab_nav ul #find {
    background-color: #8B0037;
}

#tab_nav li {
  color: white;
  display: block;
  margin: 0 auto;
  padding: .5em;
  cursor: pointer;
    outline: none;
}
#tab_nav li {
    transition: .3s all ease;
}
#tab_nav li:hover {
    opacity: .75;
}
.details div section {
    background-color: white;
    border-radius: 1em;
    padding: 1em;
    margin-bottom: 1em;
    text-align: left;
}
.details div {
    padding: 1em;
}
#tab_content {
    height: 30em;
    overflow: scroll;
    padding: 0;
}

/* Details Box Styling */

#detailsBox {
    background-color: #FFF0B2;
    display: block;
}
#detailsBox h2 {
    color: #F7931D;
    font-size: 1.4em;
    text-transform: none;
}
#detailsBox table {
    margin: .5em;
}
#detailsBox td {
    padding: .5em 1em .5em ;
    font-size: .8em;
}
#detailsBox p {
    padding-top: .75em;
    line-height: 1.2em;
}

/* Reviews Box Styling */

#reviewsBox {
    background-color: #FDDFBB;
    text-align: center;
    display: none;
}
#reviewsBox > p {
    margin-bottom: 1em;
}
#reviewsBox img.profilepic {
    width: 4em;
    float: left;
    margin:0 .5em 1em 0;
    border-radius: 50%;
}
#reviewsBox img.stars {
    border-radius: 0;
    width: 6em;
}
#reviewsBox > img.stars {
    width: 50%;
    padding-bottom: .25em;
}
#reviewsBox img.helpful {
    border-radius: 0;
    width: 6em;
    float: left;
}
#reviewsBox h1 {
    font-weight: 700;
    color: #cc0000;
    font-size: 1.3em;
    padding-bottom: .25em;
}
#reviewsBox p.author {
    font-size: .75em;
    padding-bottom: 1em;
}
#reviewsBox p.reviewtext {
    clear: both;
    padding-bottom: .5em;
    letter-spacing: 0;
    line-height: 1.2;
}
#reviewsBox .breadcrumbs {
    display: inline-block;
    font-size: .75em;
    text-transform: none;
    padding: .75em;
    margin: 0;
}
#reviewsBox ul.breadcrumbs li {
    border-right: 1px solid #737475;
    padding: 0 .5em;
    margin-left: 1em;
}
#reviewsBox ul.breadcrumbs li:first-child {
    margin-left: 0;
}
#reviewsBox ul.breadcrumbs li:last-child {
    border-right: 0;
}

/* FAQ Box Styling */

#faqBox {
    background-color: #F0B2B2;
    display: none;
}
#faqBox h2 {
    color: #8B0037;
    text-align: center;
    padding-bottom: .5em;
    font-size: 1.5em;
}
#faqBox section {
    background-color: white;
}
#faqBox dl {
    display: flex;
}
#faqBox dl:first-child {
    border-bottom: 1px solid #ccc;
    margin-bottom: 1em;
}
#faqBox dl dt {
    flex: 1 1 5%;
    font-weight: 700;
    text-align: right;
    padding-right: .25em;
    width: 5em;
    color: #8B0037;
    font-size: 1.5em;
    letter-spacing: .2em;
}
#faqBox dl dd {
    text-align: left;
    flex: 0 0 95%;
    padding: .3em 1em 1em;
    line-height: 1.2;
}
#faqBox dd.byline, #faqBox dd.helpful {
    font-size: .75em;
    padding: .75em 0 0 0;
    text-align: right;
}
#faqBox dd.helpful {
    flex: 1 1 100%;
}
#faqBox dd.helpful a {
    padding-left: 1.5em;
}

/* In Store Box Stying */

#findBox {
    background-color: #DCB2C3;
    display: none;
}
#findBox input[type=text] {
    outline: none;
    border: 1px solid rgb(180, 229, 229);
    border-width: 0 0 4px 0;
    padding: .5em;
    width: 100%;
    font-size: 1.4em;
    margin: .5em 0 .25em;
    border-radius: 0;
    color: #737475;
    background: url(../art/search.svg) no-repeat center right;
    background-size: 1.2em;
}
#findBox p.zip {
    margin-bottom: 5em;
    font-size: .75em;
}
#findBox input[type=text]:focus {
    border: 1px solid rgb(106, 204, 204);
    border-width: 0 0 4px 0;
    color: #003366;
}
#findBox dl.store {
    display: flex;
    justify-content: space-between;
    padding: 1em 0; 
    border-top: 1px solid #ccc; 
}
#findBox dl.store h2 {
    font-size: 1.5em;
}
#findBox dl.store h2.yes {
    color: #21a321;
}
#findBox dl.store dd.address {
    text-align: right;
    font-size: .75em;
    align-self: center;
    line-height: 1.4em;
    padding-left: .75em;
}

@media screen and (max-width: 780px) {
    #reviewsBox h1 {
        font-size: 1.5em;
    }
    #findBox form {
        display: flex;
        flex-direction: row;
    }
    #findBox form input {
        display: block;
    }
}
@media screen and (max-width: 580px) {
    #findBox dl.store h2 {
        font-size: 1.2em;
    }
    #findBox dl.store p {
    font-size: .75em;
    }
}

/* Products Page Styling */

.productpage h1 {
    text-align: center;
    font-size: 1.2em;
    font-weight: 700;
    margin-top: .5em;
    color: #cc0000;
    transition: .3s all ease;
}
h1.hero {
    padding: 2em;
    font-size: 2.5em;
/*    border-radius: 3em;*/
    margin: 0 -.6em;
    color: #333;
    text-align: center;
    font-weight: 600;
}
.productpage .hero {
    background: url(../art/hero_02.jpg) no-repeat center center;
    background-size: cover;
}

a:hover h1 {
    color: #003366;
}
article.productpage h3 {
    margin: .5em 0 .25em;
    font-size: 2.2em;
}
article.productpage p {
    font-size: .5em;
    padding-top: .5em;
    text-align: center;
}
article.productpage a img {
    transition: .3s all ease;
}
#fav:hover img, #cart:hover img {
    border-radius: 0;
}
article.productpage a:hover img {
    border-radius: 50%;
}
article.productpage p img {
    width: 45%;
    margin-bottom: -.3em;
}
article.productpage ul {
    flex-wrap: wrap;
}
article.productpage div ul li {
    flex: 0 0 25%;
    margin: 1em;
    padding-bottom: 2em;
    border-bottom: 1px solid #ccc;
}
article.productpage ul li div {
    text-align: center;
}
article.productpage ul li div a img {
    height: 1.2em;
    margin: .5em 1em;
}
article.productpage > div {
    border-bottom: 1px solid #ccc;
    padding-bottom: 1.5em;
    margin-top: 2em;
}
article.productpage > div:last-child {
    border-bottom: 0;
}
.productpage .homepage {
    display: none;
}
#product-search {
    text-align: right;
    margin-top: -1.5em;
    padding-right: 3em;
}
#category {
    display: none;
}

@media screen and (max-width: 720px) {
    article.productpage > div {
        border-bottom: 0;
        margin: 2em;
    }
    article.productpage ul li {
        margin: 1em;
    }
    article.productpage div ul li {
        margin: 1em;
        flex: 0 0 40%;
    }
    h1.hero {
        margin: 0 -.2em;
        padding: 2em .5em;
        font-size: 2.5em;
    }
    .productpage .homepage {
        display: block;
    }
    .homepage input {
        display: block;
        margin: 2em auto;
        padding: .5em 1em;
        border-radius: 0;
        width: 50%;
        font-size: 1em;
        background-size: 1.3em;
    }
}
@media screen and (max-width: 500px) {
    article.productpage div ul {
        display: block;
    }
    article.productpage > div ul li {
        margin-top: 3em;
    }
    h1.hero {
        margin: 0 -.25em;
        padding: 1em;
        font-size: 2em;
    }
    .homepage input {
        width: 80%;
    }
    .homepage .category ul li {
        margin: .25em;
        font-size: .75em;
    }
    #product-search {
        padding-right: 2em;
        font-size: .85em;
    }
}

/* Related Products Styling */

h3 {
    margin-top: 3em;
    color: #003366;
    text-align: center;
    font-weight: 700;
    font-size: 1.4em;
}
div.related {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 3em;
}
div.related section {
    padding-top: 1em;
}
div.related section img {
    width: 5em;
    margin: 0 1.2em;
    transition: .3s all ease;
    border-radius: .5em;

}
div.related section a p, div.related section:hover a p {
    color: #737475;
}
div.related section a p {
    font-size: .75em;
    padding-top: .5em;
}
div.related section a p em {
    color: #333;
    font-weight: 700;
    font-size: 1.3em;
}
div.related section:hover img {
    border-radius: 50%;
}

@media screen and (max-width: 780px) {
    h3 {
        font-size: 1.7em;
    }
    div.related section img {
        width: 7em;
        margin: 1em 1em .5em;
    }
    div.related section a p {
    font-size: 1em;
    }
}

/* Featured Products Styling */

.homepage article h2 {
    text-align: center;
}

div.featured {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
div.featured section {
    flex: 0 0 20%;
    margin: 2em 1em;
    text-align: center;
}
div.featured section img {
    transition: .3s all ease;
    border-radius: .5em;
}
div.featured section:hover img {
    border-radius: 50%;
}
div.featured section a p, div.featured section:hover a p {
    color: #737475;
}
div.featured section a p {
    font-size: .85em;
    padding-top: .5em;
}
div.featured section a p em {
    color: #333;
    font-weight: 700;
    font-size: 1.6em;
}

@media screen and (max-width: 780px) {
    .homepage h2 {
        font-size: 2.5em;
    }
    div.featured section {
        flex: 0 0 40%;
    }
    div.featured section a p {
        font-size: 1em;
    }
}
@media screen and (max-width: 400px) {
    .home-hero {
        height: 7em;
    }
    div.featured section {
        flex: 0 0 35%;
        margin: 1em;
    }
}

/* Cart Styling */

.cart {
    background-color: rgb(180, 229, 229);
}
fieldset#cart {
    border: 4px solid #cc0000;
    text-align: left;
}
article.cart fieldset#cart legend{
   text-align: left;
    margin: 0;
    font-size: 1.4em;
    background-color: #cc0000;
}
.cart table {
    margin: 0 auto;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}
.cart table th {
    text-align: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: .5em;
}
.cart table td {
    vertical-align: middle;
    margin: 1em 0;
}
.cart table tr {
    border-bottom: 1px solid #ccc;
}
.cart table tr:last-child {
    border-bottom: none;
}
.cart table tr:last-child td {
    padding-top: 1em;
}
.cart .flex {
    display: flex;
    align-items: center;
}
.cart .flex div {
    margin: 0 .5em;
}
.cart table h3 {
    margin: 0;
    text-align: center;
    padding-top: 0;
}
#subtotal {
    border-bottom: 0;
}
#subtotal td h4:first-child {
    padding-top: 1em;
    border-bottom: 0;
}
#subtotal td h4 {
    border-bottom: 2px solid transparent;
    text-align: right;
}
#subtotal td h4:last-child {
    border-bottom: 1px solid #ccc;
/*    margin-top: -em;*/
    padding-bottom: .75em;
}
#subtotal h4 input[type=text] {
    padding: 0;
    margin: 0 0 0 .75em;
    border-width: 2px;
    width: 80%;
}
#subtotal h4.scoot {
    border-bottom: 0;
    margin-bottom: -.25em;
}
.cart table h3.total {
    text-align: right;
}
.cart table h4 {
    text-align: right;
}
.cart table h2 {
    font-size: 1.2em;
    color: #003366;
}
.cart table img {
    width: 6em;
/*    border-radius: 1em;*/
}
.cart table img.delete {
    width: 1em;
    border-radius: 0;
}
button {
    margin: .5em;
    border: 0;
    color: #003366;
    font-weight: 600;
    font-size: 1em;
    border-radius: 50%;
    background-color: rgb(180, 229, 229);
    outline: none;
    box-shadow: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none;
}
.plus1, .plus2 {
    padding: .25em .5em;
}
.min1, .min2 {
    padding: .25em .6em;
}
#cart input[type=text] {
    padding:.25em .5em;
    text-align: center;
    margin: .5em;
}

/* Form Styling */

.cart div {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 50em;
    margin: 1em auto 0;
}
.cart div div {
    display: block;
    flex: 45%
}
fieldset{
    margin: 0 1em 2em;
    background-color: white;
/*    border: 4px solid #F7931D;;*/
    border: 0;
    padding: 1em 3em;
    text-align: center;
    border-radius: 2em;
}
fieldset legend {
    color: white;
    background-color: #003366;
    padding: .5em 1em;
    border-radius: .5em;
    margin: 0 auto;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .1em;
}
.cart dl dt {
    display: none;
}

.cart input {
    padding: .5em 1em;
/*    border-radius: 5em;*/
    background-color: white;
    margin: 0 auto 1em;
    font-size: 1em;
    color: #5a5b5d;
    border: 1px solid rgb(180, 229, 229);
    border-width: 0 0 4px 0;
    width: 100%;
}
input[type=radio], input[type=checkbox] {
    margin: 0 .5em 1em 1em;
    width: 1em;
    text-align: right;
}
input[type=checkbox] {
    margin-top: 1em;
}
.one label {
    margin-right: 1em;
}
textarea {
    font-family: "Asap", sans-serif;
    width: 100%;
    height: 5em;
    font-size: 1em;
    border: 4px solid rgb(180, 229, 229);
    border-radius: 1em;
    padding: .5em .8em;
    text-align: left;
    color: #5a5b5d;
    outline: none;
    box-shadow: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none;
}
textarea:focus {
    border: 4px solid rgb(94, 183, 183);
    color: #003366;
}
input:focus {
    border: 1px solid rgb(94, 183, 183);
    border-width: 0 0 4px 0;
    color: #003366;
}
input[type=submit] {
    width: 15em;
    padding: .75em 1em;
    font-size: 1.2em;
    border-radius: .75em;
    border: 5px solid #003366;
    transition: .3s all ease;
    color: #003366;
    font-weight: 700;
}
input[type=submit]:hover {
/*    border: 3px solid white;*/
    background-color: #003366;
    color: white;
}
.date {
    padding: .5em 1em;
    color: #737475;
    margin: 0 .25em 1em;
    border: 1px solid rgb(180, 229, 229);
    border-width: 0 0 4px 0;
    font-size: 1em;
    text-align: left;
}
.location  {
    text-align: left;
}
.location input {
    margin: .5em .5em .5em 0;
}
input.date {
    width: 3em;
    padding: .5em 0;
    margin-left: .25em;
    text-align: center;
}
.state {
    padding: .5em 1em;
    color: #737475;
    width: 100%;
    margin: 0 auto .5em;
    border: 1px solid rgb(180, 229, 229);
    border-width: 0 0 4px 0;
    font-size: 1em;
    text-align: left;
}
select {
    border-radius: 0;
    background-color: transparent;
    border: 0;
    font-size: 1em;
    outline: 0;
    text-align: center;
    box-shadow: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none;
}
.category input {
    font-size: 1em;
}
#cart input[type=text] {
        width: 2em;
    }
.breadcrumbs {
    display: flex;
}

@media screen and (max-width: 780px) { 
    #cart {
        margin: 1em 0;
    }
    fieldset {
        padding: 1em;
    }
    .cart input[type=text], .cart input[type=password] {
        display: inline-block;
    }
    .cart input[type=radio], .cart input[type=checkbox] {
        display: inline-block;
    }
    #cart .flex {
        display: block;
    }
    #cart table h2 {
        font-size: 1.2em;
    }
    #cart table h3 {
        font-size: 1em;
    }
    #cart table div:first-child {
        margin: 1em 0 0;
    }
    #cart table div:last-child {
        margin: .5em 0;
    }
    #cart table img {
        width: 5em;
    }
    #cart img.delete {
        width: 1em;
    }
    #cart div {
        display: flex;
    }
    #cart table th {
        text-align: center;
    }
    #cart table h3 {
        text-align: center;
    }
    #cart table h3.total {
        text-align: right;
    }
	input[type=submit] {
		display: block;
	}
}

@media screen and (max-width: 650px) { 
    .cart div {
        display: block;
    }
    fieldset legend, input, select, textarea {
        font-size: 1.2em;
    }
    .show {
        font-size: 1.2em;
    }
    label {
        text-align: left;
        font-size: .75em;
    }   
    textarea {
        font-size: .8em;
    }
}
@media screen and (max-width: 500px) {
    button {
        font-size: .5em;
        margin: 1.5em 0;
    }
    #cart table img {
        width: 3em;
    }
    #cart table h2 {
        font-size: .75em;
    }
    #cart table h3 {
        font-size: .75em;
    }
    #cart table img.delete {
        width: .5em;
    }
    #cart input[type=text] {
        padding: .25em 0;
    }
}

/* Gizmo Project Styling */
article.gizmo div {
    display: block;
    width: 100%;
}

img.map {
    width: 100%;
    padding: 2em 1em;
    border-bottom: 2px dashed #ccc;
}
.gizmo .homepage {
    display: none;
}
#gizmo-hero {
    background-image: url(../art/hero04.jpg);
    background-size: cover;
    line-height: 1.2;
}
.gizmo article div {
    justify-content: space-around;
    align-items: center;
}
.gizmo article div div:first-child{
    flex: 1 0 50%;
}
.gizmo article div p {
    text-align: left;
    font-size: 1em;
    margin-left: 1em;
    padding-bottom: .5em;
}
.callout h4 {
    color: #333;
    font-weight: 600;
}
#bubble01 {
    width: 50%;
    margin-top: 1em;
}
#bubble02 {
    margin-bottom: 2em;
}
.callout {
    background-color: #f7931d;
    color: white;
    padding: 1em;
    border-radius: 1em;
    margin: 2em 0 2em 1.5em;
    text-align: center;
    flex: 1 1 25%;
    box-shadow: 3px 3px 8px #8b0037;
}
.callout img {
    margin-bottom: 1em;
}
.callout h4 {
    font-size: 1.3em;
    padding-bottom: .25em;
    line-height: 1.2;
    margin-top: 0;
}
.callout em {
    font-weight: 600;
    font-size: 3em;
}
.callout p {
    text-align: left;
    margin-top: 1em;
}
.callout p.btn {
    display: block;
    font-weight: 600;
    font-size: 1.3em;
    text-align: center;
    background-color: #ffcf95;
    border-radius: 1em;
    padding: .5em;
    color: #cc0000;
    transition: .3s all ease;
}
.callout p.btn:hover {
    background-color: #ffe2c0;
}

@media screen and (max-width: 780px) {
    .gizmo .homepage {
    display: block;
    }
    .gizmo .homepage input {
        margin-top: 1em;
        width: 80%;
    }
    .breadcrumbs {
        margin: 1em;
    }
    
    .callout {
        margin: 5em 1em 3em;
    }
    .gizmo article div p {
        margin: 0;
        padding: .5em 1em;
        font-size: 1.2em;
        line-height: 1.5;
    }
    .gizmo .callout > p {
        padding: 2em 0em;
    }
    
}

.coming-soon div.fill {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 35em;
}
.coming-soon img{
    width: 10em;
}

/*Footer Styling*/

footer {
    text-align: center;
    font-size: .7em;
    margin-bottom: 25em;
}
a, a:active, a:visited {
    text-decoration: none;
    color: #003366;
}
a:hover{
    color: #cc0000;
}
footer img {
    width: 15em;
}
footer ul {
    display: flex;
    justify-content: center;
}
footer ul li {
    font-size: 1.2em;
    padding: 2em 1em;
}

/*Footer Styling*/

footer {
    text-align: center;
    font-size: .7em;
    margin-top: 15em;
    margin-bottom: 25em;
}
footer img {
    width: 15em;
}
footer ul {
    display: flex;
    justify-content: center;
}
footer ul li {
    font-size: 1.2em;
    padding: 2em 1em;
}

@media screen and (max-width: 520px) {
    footer {
        margin-top: 8em;
    }
    footer ul {
        display: block;
        margin: 2em 0;
    }
    footer ul li {
        padding: .5em;
        font-weight: 700;
        font-size: 1.5em;
    }
}