*, *::after, *::before {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	box-sizing: border-box;
}

div#fixedheader {
	position: fixed;
	background: #333;
	padding: 10px;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 99;
}

div#fixedfooter {
	position: fixed;
	background: black;
	padding: 8px;
	text-align: center;
	font-size: 0.1rem;
	color: #CCC;
	bottom: 0px;
	right: 0px;
	width: 100%;
}

/*style guide, citations, git in footer*/
footer#footer {					
	margin-bottom: 25px;
	position: fixed;
	background: black;
	padding: 5px;
	text-align: center;
	font-size: 0.6rem;
	color: white;
	bottom: 0px;
	right: 0px;
	width: 100%;
}

a#foot-1, a#foot-2, a#foot-3 {
	color: #ccc;
	transition: color 0.5s;
	text-decoration: none; 
}

a#foot-1:active, a#foot-1:hover, a#foot-1:focus, 
a#foot-2:active, a#foot-2:hover, a#foot-2:focus,
a#foot-3:active, a#foot-3:hover, a#foot-3:focus {
	color: #FFEBCD; 
	text-decoration: none;
}

body {
	font-family: "OpenSans-Light", sans-serif;
	margin: 1rem;
	font-size: 1rem;
	padding-left: 20px;
	padding-right: 20px;
}

h1 {
	font-family: "HaloHandletter", cursive;
	font-size: 4rem;
	margin-bottom: 20px;
	margin-top: 40px;
	text-align: center;
	text-decoration: underline;
}

h2 {
	font-family: "OpenSans-Light", sans-serif;
	font-size: 1.2rem;
	margin-bottom: 0;
	width: 100%;
}

h3 {
	font-size: 1rem;
	margin-bottom: 0;
}

element.style {
	clear: both;
}

p, ol, ul {
	max-width: 40rem;
}

img {
	height: auto; 
	max-width: 100%;
}

figure {
	margin: 0;
}

a {
	color: rgb(200,0,0);
	transition: color 0.5s;
	text-decoration: none; 
}

a:active, a:hover, a:focus {
	color: rgb(50,0,0); 
	text-decoration: none;
}

.bplogo {
	position: relative;
	display: block;
	height: 90px; 
	width: 90px;
	margin-top: 30px;
	margin-bottom: 5px;
	margin-left: 45%;
}

/*Bag icon*/
img#bagicon {								
	width: 18px;
	height: 18px;
	margin-left: 50%;
	margin-top: 3%;
	margin-bottom: 7%;
	margin-right: 0%;
	outline: none;
}

.nav-main-item {
	display: inline-block;
	font-family: 'Lato', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	padding-top: 0.5rem;
	text-decoration: none;
	width: 100%;
	text-align: center;
	color: black;
}

.selected {													/*font color changes indicates which page your on*/
	color: #bd202e; 
}

.nav-main-item:active, .nav-main-item:hover, .nav-main-item:focus {
	color: #bd202e;
}

#revealonclick {
    display: none;
}

#revealonclick:target {					/*image of bubble tea reveal on click*/
    display: inline;
}

.grid-col-1of1 {
	align-content: center;	
	width: 50%;
}

#aboutus {
	position: relative;
	width: 60%;
	height: 55%;
	background-color: #d6d8db;
	margin-top: 25px;
	margin-bottom: 50px;
	margin-left: 20%;
	margin-right: 20%;

	color: black;
	padding-left: 30px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

#notaboutus {
	width: 90%;
	height: 300px;
	background-color: none;
	margin-top: 20px;
	margin-bottom: 0;
	margin-left: 15px;
	margin-right: 5px;
}


.Nextbutton {		
	background-color: white;
	color: black;
	width: 40%;
	height: 40px;
	border: 1px solid black;
	font-family: "Lato", sans-serif;
	font-size: 0.5em;					
	display: inline-block;
	position: right;
	margin-left: 0%;
	margin-right: 0%;
	margin-top: 0%;
	margin-bottom: 15%;
}

.Nextbutton:hover {
	color: white;
	background-color: #bd202e; 
}

.soda {
	border: none;
	margin-left: 15%;
	margin-right: 15%;
	width: 70%;
	height: 100%;
}

.grid-col-1of2#ordertea {
	width: 100%;
	height: 100%;
	opacity: 100; 
	margin-top: 5px;
	margin-left: 10%;
	margin-right: 10%;
	padding-bottom: 15%;
}


.PlaceOrder {
	display: inline-block;
	text-decoration: none;							
	font-family: "Lato", sans-serif;
	font-size: 2em;					
	position: right;
	margin-left: 50%;
	margin-right: 20%;
	margin-top: 20px;
	margin-bottom: 20px;
}

#receipt {
	font-family: "OpenSans-Semibold", sans-serif;
	padding-top: 30px;
	padding-bottom: 20px;
	padding-left: 20px;
	font-size: 1.2rem;
}

#purchaseimg {
	border: none;
}

#textbox {
	width: 330px;
	height: 400px;
	margin-top: 80px;
	background-color: #d6d8db;
	font-size: 0.9em;
}

.alignleft {
	float: left;
	margin-left: 7%;
}

.alignright {
	float: right;
	margin-right: 7%;
}

.alignleft_total {
	float: left;
	margin-left: 7%;
	margin-top: 50%;
}

.alignright_total {
	float: right;
	margin-right: 7%;
	margin-top: 50%;
}



																/* Main Page */

.grid-col-1of6 {
	padding-top: 5%;
	margin-right: -80px;
	margin-left: 0px;
}

.grid-col-1of3-1 {
	padding-left: 2%;
}

.backgroundimg .image { 
   position: absolute;
   height: auto;
   margin-left: 0px;
   margin-right: 35px;
   margin-bottom: 41px;
   margin-top: 5px;
   z-index: -1;
}

.backgroundimg .innerbox {
	width: 80%;
	height: auto;
	position: absolute;
	background: rgba(0,0,0,0.6);
	padding: 20px 20px;	
	margin: 0 10%;
	margin-top: -35%;
}

@media (max-width: 48.75em) {
.backgroundimg .innerbox {
	width: 80%;
	height: auto;
	position: absolute;
	background: rgba(0,0,0,0.6);
	padding: 20px 20px;	
	margin: 0 10%;
	margin-top: -5px;
	margin-bottom: 50px;
	font-size: 0.7em; 
	}
}

.innerbox h2 {
	color: white;
	font-weight: 100;
}

p#main-1 {
	font-family: 'Lato', sans-serif;
	font-weight: 200;
	position: relative;
	overflow: hidden; 
	width: 100%; 
	display: inline;
	color: white;
	font-size: 0.88em; 
}

														/* Featured Products */

.col-1, .col-2 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  .col-2 {
    float: left;
  }
   .col-2 {
    width: 50%;
  }
}

@media (min-width: 992px) {
	.col-1 {
	float: left;
}
	.col-1 {
    width: 25%;
  }
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: 15%;
  margin-left: 15%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

/*Text above boxes*/
.group {									
  margin-right: 0%;
  margin-left: -15%;
}

.features .section-title {
	font-family:'Lato', sans-serif;
	font-size: 30px;
	color: black;
	padding-left: 30%;
	padding-right: 25%;
	margin-top: 120px;
	margin-bottom: 25px;
	letter-spacing: 6px;
}

.features .section-padding {
    padding-bottom: 0px;
}

.feature-details .item {
    padding: 15px 15px;
}

.feature-details .col-2:first-child .item, .col-2:nth-child(2) .item, .col-2:nth-child(3) .item {
    border: 1px solid black;
    margin-bottom: 80px;
}

.feature-details .item-icon {
    font-size: 5em;
}

/*text color when hovered*/
.feature-details .item:hover {					
    color: red;
}

.item-details .item-title {
	color: black;
}

.item-details .item-title:hover {
	color: red;
}

/*product description*/
.feature-details .item-description {			
    font-size: .8125em;
    padding-top: 12px;
    padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
    .service-details .item {
        margin: 15px 0px;
    }
}*/


															/* Bubble Tea */

.grid-row-1 {							
	padding-left: 11%;
	padding-right: 11%;
	padding-top: 2%;
	padding-bottom: 0%;
}

.grid-col-1of4-bbt {
	margin-top: 8%;
}


#bbtpictures {
	width: 100%;
	height: 100%;
	opacity: 100; 
	margin-top: 5px;
	margin-left: 20%;
	margin-right: 20%;
	padding-bottom: 15%;
}

.grid-row-1 .Nextbutton {
	display: inline-block;
	text-decoration: none;											
	font-family: "Lato", sans-serif;
	font-size: 1em;					
	position: right;
	padding-left: 35px;
	padding-top: 12px;
	margin-left: 50%;
	margin-right: 20%;
	margin-top: 60px;
	margin-bottom: 15px;
}

button {
	font-family: "Lato", sans-serif;
	font-weight: 400;
	width: 90%;
	height: 50px;
	margin-top: 20px;
	margin-left: 0%;
	margin-right: 15%;
	color: black;
	background: white;
	border: 1.5px solid black; 
}

button:hover button:active {
  border: 2px solid red;
  outline-color: red;
}

#milk-tea, #green-tea, #red-tea, #black-tea, #juice, #soda, #coffee, #calpis, #mocktail {
	margin-top: 30px;
	margin-left: 15%;
}


															/* Toppings */

.grid-row-2 {							
	padding-left: 20%;
	padding-right: 20%;
	padding-top: 2%;
	padding-bottom: 0%;
}

#pearls, #sugar, #ice, #jelly, #none {			
	margin-top: 12%;
	margin-right: 20%
	margin-left: 5%;
	margin-bottom: 0%;
}

#bbtpictures2 {
	width: 100%;
	height: 100%;
	opacity: 100; 
	margin-top: 5px;
	margin-left: 0%;
	margin-right: 10%;
	padding-bottom: 15%;
}

.grid-col-1of3 {
	padding-bottom: 10px;
	padding-top: 0px;
}

.grid-col-1of3 button {
	width: 80%;
	height: 50px;
	margin-left: 10%;
	margin-bottom: 0%;
	color: black;
	background: white;
	border: 1.5px solid black; 
}


.Nextbutton_op {		
	background-color: white;
	color: black;
	width: 50%;
	height: 40px;
	border: 1px solid black;
	font-family: "Lato", sans-serif;
	font-size: 0.9em;					
	display: inline-block;
	position: right;
	padding-left: 35px;
	padding-top: 10px;
	margin-left: 25%;
	margin-right: 0%;
	margin-top: 20%;
	margin-bottom: 15%;
}

.Nextbutton_op:hover {
	color: white;
	background-color: #bd202e; 
}

#LayoutDiv1 .press {
    display: inline-block;
}


.images-0, .images-1, .images-2, .images-3, .images-4, .images-5, 		/*displays drink images*/
.images-6, .images-7, .images-8, .images-9, .images-10,
 .images-12, .images-13, .images-14 {
	display: none;
	border: none;
}

.active {
	display: inline;
}

																	/* Order */

.grid-row-3 {							
	padding-left: 25%;
	padding-right: 5%;
	padding-top: 3%;
}



.grid-col-1of3-2 {
	margin-top: 8%;
	margin-bottom: 15%;
}

#order {
	font-family: "Lato", sans-serif;
	font-size: 1.2em;
	letter-spacing: 3px;
	color: black;
	padding-top: 33px;
	padding-bottom: 8px;
	padding-left: 10px;
	padding-right: 10px;
}

.ordertext {
	color: black;
	font-size: 0.85em;
	margin-top: 5%;
	padding-left: 10px;
	padding-right: 10px;
}

.Addtocart {
	font-size: 0.9em;
	color: black;
	background: white;
	border: 1px solid black;
	display: inline-block;
	font-family: "Lato", sans-serif;
	width: 80%;
	height: 45px; 
	padding-top: 14px;
	padding-left: 50px;
	padding-right: 10px;
	margin-left: 6%;
	margin-top: 2%;
}

.Addtocart:hover {
	background-color: #bd202e;
	color: white;
}

.grid-col-1of3-2 .field {
	margin-top: 35%;
	margin-left: 5%;
	margin-right: 20%;
}

.field .add {
	height: 33px;
	width: 15%;
    margin: 4px;
    cursor: pointer;
}

.field .sub {
	height: 8%;
	width: 15%;
    margin: 4px;
    cursor: pointer;
}

.field .field-input {
    text-align: center;
    height: 30px;
    width: 30px;
    margin: 4px;
    color: salmon;
}


																/* Checkout */
.checkout {					/*container*/
	position: relative;
	width: 100%;
	background: white;
	overflow: hidden;
	margin-bottom: 300px;  
}

.checkout .content {
	position: relative;
	width: 900px;
	margin: 40px auto 65px auto;
}

.checkout h2 {
	font-family: "Lato", sans-serif;
	font-size: 32px;
	color: black;
	text-align: center;
	margin-top: 120px;
	letter-spacing: 6px;
}

.content-1 {
	margin-top: -5%;
	padding-left: 5%;
	padding-right: 5%;
}

.content-1 .Items-in-cart {
	font-family: "Lato", sans-serif;
	font-size: 18px;
	letter-spacing: 0px;
}

.content-1 hr {
	width: 80%;
	border: 0.5px solid black;
}

.soda-bubble {
	width: 134px;
	height: 300px;
	margin-top: 5%;
	margin-right: 30%;
	margin-left: 33%;

}

.grid-col-1of3-3 #check {			/*Soda with pearls*/
	font-family: "Lato", sans-serif;
	font-size: 15px;
	margin-top: 40%;
	padding-left: 0%;
	padding-right: 10%;
}

.grid-col-1of3-3 .item-text {
	font-family: "Lato", sans-serif;
	color: black;
	padding-left: 10%;
	padding-right: 10%;
	font-size: 12px;
	margin-top: 5%;
}

.item-price h2 {
	font-size: 1.05em; 
	margin-top: 40%;
	margin-left: -5%;
}

.Next-checkout {
	background-color: white;
	color: black;
	border: 1px solid black;
	width: 25%;
	height: 60px;
	font-family: "Lato", sans-serif;
	font-size: 0.8em;					
	display: inline-block;
	padding-top: 2%;
	padding-left: 6%;
	padding-right: 6%;
	padding-bottom: 2%;
	margin-left: 30%;
	margin-right: 0%;
	margin-top: 10%;
	margin-bottom: 15%;
}

.Next-checkout:hover {
	color: white;
	background-color: #bd202e; 
}

															/* Pay */

.input-field1 {
	font-family: "Lato", sans-serif;
	font-size: 0.95em;
	color: black;
	float: right;
	max-width: 50%;
	margin-left: 5%;
	margin-right: 45%;
	margin-top: 5%;
	margin-bottom: 2%;
}

.input-field2 {
	font-family: "Lato", sans-serif;
	font-size: 0.95em;
	color: black;
	float: right;
	max-width: 50%;
	margin-left: 5%;
	margin-right: 45%;
	margin-top: 0.5%;
	margin-bottom: 2%;
}

.input-field {
	font-family: "Lato", sans-serif;
	font-size: 0.95em;
	color: black;
	float: right;
	max-width: 50%;
	margin-left: 5%;
	margin-right: 45%;
	margin-top: 0.2%;
	margin-bottom: 2%;
}

.box {
	width: 65%;
	height: 60%;
	margin-bottom: 5%;
	margin-left: 20%;
	border: 1px solid gray;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 5%;
}

.payment-title {
	font-family:'Lato', sans-serif;
	font-size: 30px;
	color: black;
	padding-left: 45%;
	padding-right: 45%;
	margin-top: 120px;
	margin-bottom: 25px;
	letter-spacing: 6px;
}

.Complete {
	display: inline-block;
	border: 1px solid black;	
	width: 65%;
	height: 45px; 						
	font-family: "Lato", sans-serif;
	font-size: 0.9em;					
	padding-top: 12px;
	padding-left: 20%;
	padding-right: 20%;
	margin-left: 20%;
	margin-top: 10px;
	margin-bottom: 20px;
}

.Complete:hover {
	background-color: #bd202e;
	color: white;
}

.credit {
	width: 50%;
	margin-left: 5%;
	margin-top: 5%;
}


															/*thank you for your order page*/
h1#thanks {														
	font-family: "HaloHandletter", Helvetica, sans-serif;
	font-size: 3rem;
	margin-bottom: 20px;
	margin-top: 130px;
	text-align: center;
	text-decoration: none;
	color: #bd202e;
}

																/* Stamps */
.grid-row-stamps {
	margin-top: -80px;
	padding: 10%;
}

.square {						
	margin-left: 35%;
	margin-right: 5%;
	margin-top: 20%;
	width: 100px;
	height: 100px;
	border:1px solid #000;
}

.redeem {
	font-size: 0.9em;
	color: black;
	background: white;
	border: 1px solid black;
	display: inline-block;
	font-family: "Lato", sans-serif;
	width: 25%;
	height: 45px; 
	padding-top: 14px;
	padding-left: 80px;
	margin-left: 40%;
	margin-top: 5%;
	margin-bottom: 10%;
}

.redeem:hover {
	background-color: #bd202e;
	color: white;
}




																	/* Contact */

.contact {					/*container*/
  position: relative;
  width: 100%;
  background: white;
  overflow: hidden;
  margin-bottom: 300px;  
}

.contact .content {
	position: relative;
	width: 900px;
	margin: 40px auto 65px auto;
	}

.contact h2 {
	font-size: 32px;
	color: black;
	text-align: center;
	margin-top: 120px;
	letter-spacing: 6px;
}

.contact .content .form {
	width: 455px;
	overflow: hidden;
	height: auto;
	float: left;
}

.contact .content .form .column {
	width: 180px;
	overflow: hidden;
	height: auto;
	float: left;
	letter-spacing: 1px;
	margin-bottom: 30px;
}

.contact .content .form .column-2 {
	width: 210px;
	padding-left: 60px;
	overflow: hidden;
	height: auto;
	float: left;
	letter-spacing: 1px;
	margin-bottom: 30px;  
}

.contact .content .form .column-3 {
	width: 450px;
	overflow: hidden;
	height: auto;
	float: left;
	letter-spacing: 1px;
}

.contact .content .contact-text {
	width: 340px;
	float: left;
	padding-left: 40px;
	color: black;
	font-size: 14px;
	overflow: hidden;
	font-weight: 400;
	line-height: 26px;
}

strong {
	font-weight: 700;
}

input {						/*name and email box*/
	width: 180px;
	height: 40px;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	background: #f8f7f7;
	border: none;
	outline: none;
	color: #333;
	font-weight: 300;
	padding-left: 15px;
	margin-bottom: 10px;
}

input:focus {
	background: #ededed;
}

textarea {					/*Message box*/
	  width: 420px;
	  height: 150px;
	  padding: 15px 0 0 15px;
	  background: #f8f7f7;
	  color: #333;
	  font-family: 'Lato', sans-serif;
	  font-size: 14px;
	  font-weight: 300;
	  margin-bottom: 10px;
	  outline: none;
	  border: none;
}

textarea:focus {
	background: #ededed;
}

input.submit {			
	width: 100px;
	height: 34px;
	float: right;
	margin: 20px 10px 0 0;
	border: 0;
	font-weight: 800;
	text-align: right;
	background: none;
	outline: none;
}







															/* Style Guide */
.style-guide {
	margin-top: 5%;
	font-size: 2em;
	font-family: "Lato", sans-serif;
}

.logo {
	width: 100px;
	height: 100px;
}

#logo-text {
	font-family: "Lato", sans-serif;
	font-size: 1.5em;
}

.font {
	font-family: "Lato", sans-serif;
	font-size: 1.5em;
}

.font#font-text {
	font-family: "Lato", sans-serif;
}

#images {
	width: 100%;
	height: 100%;
}


/*color palette boxes*/
#square1 {
	border-radius: 10px;
	margin: 20px; 
	float:left;
	position: relative;
	width: 120px;
	height: 120px;
	background: #333;
}

#square2 {
	border-radius: 10px;
	margin: 20px; 
	float:left;
	position: relative;
	width: 120px;
	height: 120px;
	background:  #FFEBCD;
}

#square3 {
	border-radius: 10px;
	margin: 20px; 
	float:left;
	position: relative;
	width: 120px;
	height: 120px;
	background: #BD202E;
}

#square4 {
	border-radius: 10px;
	margin: 20px; 
	float:left;
	position: relative;
	width: 120px;
	height: 120px;
	background:  #00746C;
}

#square5 {
	border-radius: 10px;
	margin: 20px; 
	float:left;
	position: relative;
	width: 120px;
	height: 120px;
	background: #5F5A59;
}

#content-0, #content-2, #content-3, #content-4  {		/*text inside of the color palette boxes*/
	font-family: OpenSans-Light, sans-serif;
	position: relative;
	margin-top: 90px;
	margin-left: 25px;
	color: white;
}

#content-1 {		
	font-family: OpenSans-Light, sans-serif;
	position: relative;
	margin-top: 90px;
	margin-left: 25px;
	color: #333;
}

.grid-col-1of9 {
	margin-top: 30px;
	margin-bottom: 30px;
}

.grid-row-style {
	padding: 2%;
}

.para {
	margin-top: 0.5rem;
}

.styleheader {
	font-family: "Lato", sans-serif;
	font-size: 2rem;
	margin-bottom: 0;
	width: 100%;
}

.sec2 {
	display: block;
	margin-bottom: 5rem;
}

.numbers { 
	display:block;
	color: lightgray; 
	font-family: "OpenSans-Light", sans-serif; 
}

.numbers2, .numbers3 { 
	display:block;
	color: lightgray; 
	font-family: "OpenSans-Light", sans-serif; 
	margin-top: 30px;
}

.sub { 
	font-size: 20px;
	color: black; 
	font-family: "OpenSans-Light", sans-serif; 
}

.frames {
	max-width: 100%;
}

.codebox {
	max-width: 100%;
	padding: 0.23em 0.75em;
	margin-top: -1rem;
	font-size:0.9rem;
	color: #FF0000;
	margin-top: 5px;
}

/* Styling for the navigation button */
.button-nav {
  	display: inline-block;
	font-family: "Lato", sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	padding-top: 0.02rem;
	text-decoration: none;
	width: 100%;
	text-align: left;
	color: black;
}

.button-nav:hover, .button-nav:focus {
  color: #BD202E;
}

.in-textlink{
	color: #BD202E;
	text-decoration: none;
	font-family: "Lato", sans-serif;
	font-size: 1.5em;
}

.in-textlink:hover {
	text-decoration: none;
	color: black;
}

.button-submit, .button-reset {
	font-size: 1em;
	color: black;
	background: white;
	border: 1.5px solid black;
	display: inline-block;
	font-family: "Lato", sans-serif;
	width: 10%;
	height: 40px; 
	padding-left: 35px;
	padding-top: 10px;
	margin-left: 6%;
	margin-top: 2%;
}

.button-submit:hover, .button-submit:focus, 
.button-reset:hover, .button-reset:focus {
	background-color: #BD202E;
	color: white;
}

.input-field {

}

.h1-head {
	font-size: 2.5rem;
	font-family: "Lato", sans-serif;
	color: black;
	text-decoration: none;
}

.h2-head {
	font-size: 1.2rem;
	font-family: "Lato", sans-serif;
	color: black;
}

.h3-head {
	font-size: 1rem;
	font-family: "Lato", sans-serif;
	color: black;
}

.bullet-list, .number-list {
	font-family: "OpenSans-Light", sans-serif;
}

.p-body {
	font-family: "OpenSans-Light", sans-serif;
	margin-top: 30px;

}

#product-listings {
	margin-bottom: 40px;
}

div#cite {
	margin-top: 5%;
	margin-left: 5%;
	margin-bottom: 10%;
	font-size: 0.8em;
}