/* =============================================================================
  GLOBAL
============================================================================= */
		.navbar {
			background-color: #000000 !important;
			margin-bottom: 20px;
			padding: 20px;
			border-bottom: .5em solid #00aeef;
		}

		.logo {
			align-content: center;
			width: 300px;
			height: 100px;

		}
		.rale {
			font-family: "Raleway Regular";
		}
		.navbar-brand {
			background-color: #000000;	
			
		}

		.ftrlinks {
			color: #ffffff;
		}
		
		.mbot {
			margin-bottom: 5em;
		}

		.mbot2 {
					margin-bottom: 2em;
				}
        .quarter-circle {
            position: fixed;
            top: 0;
            right: 0;
            width: 150px;
            height: 150px;
            background-color: #00aeef;
            border-radius: 0 0 0 150px;
            z-index: 2;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: width 0.3s, height 0.3s, border-radius 0.3s; 
        }

		.quarter-circle.expanded {
            width: 200px;
            height: 200px;
            border-radius: 0 0 0 200px;
			z-index: 2;
		}
		
        .navbar-toggler {
            position: fixed;
			top: 0;
            right: 20px;
            z-index: 3;
			margin-top: 40px;
			border: 2px solid #FFFFFF;
			border-radius: 10px;
			justify-content: center;
			align-items: center;
			display: block !important;
			color: #FFFFFF;
		}

		.navbar-toggler-icon {
			background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
			
		}

		.quarter-circle .nav-link {
		    position: absolute;
		    color: white;
		    text-align: right;
		    width: 100%;
		    display: none;
		}

		.quarter-circle.expanded .nav-link {
		    display: block;
		}

		.quarter-circle .nav-link.order {
		    top: 20px;
		    right: 110px;
		}

		.quarter-circle .nav-link.contact {
		    top: 50px;
			right: 110px;
		}

		.quarter-circle .nav-link.about {
		    top: 80px;
			right: 110px;
		}

		.bottom-strip {
			background-color: #F9B4A8;
			height: 20px;
			position: static;
			left: 100%;
			right: 100%;
			bottom: 100%;
			width: 100%;
			margin-top: 75px;
		}

		#copyright {
			color: #fff;
		}
/* =============================================================================
  INDEX PAGE
============================================================================= */

.vid {
	align-content: center;
	text-align: center;
}

.rotatetxt {
	transform: rotate(-90deg);
	color: #FFFFFF;
	padding-right: 13em;
	
}

.portbutton {
	background-color: #000000;
  color: white;
	border: 2px solid #00aeef;
  padding: 14px 25px;
	margin-bottom: 8em;
	margin-left: 2em;
  text-align: center !important;
  text-decoration: none;
  display: inline-block;
	align-content: center;
	
}

.ind {
	margin-bottom: 1em;
	margin-top: 1em;
}

.rotatetxtr {
	transform: rotate(90deg);
	color: #FFFFFF;
	padding-top: 15em;
	
}

.explore {
    display: flex;
    width: 100%;
	justify-content: center;
    height: 35px;
    background: #000000;
	padding-left: 10em;
	padding-right: 10em;
    padding-bottom: 1em;
    text-align: center;
    border-radius: 5px;
	border: 2px solid #FFFFFF; 
    color: white;
	font-size: 15pt;
	text-decoration: none;
    font-weight: bold;
    line-height: 25px;
	margin-bottom: 6em;
}

.home-nav-1 {
	font-size: 2em;
	color: #00aeef;
	font-family: 'Raleway Regular', sans-serif;
	text-align: center;
	text-decoration: none;
	display: block;
	
}

.home-nav-2 {
	font-size: 2.5em;
	color: #8C1828;
	text-align: center;
	text-decoration: none;
	display: block;
}

.home-nav-3 {
	font-size: 2.5em;
	color: #8C1828;
	text-align: center;
	text-decoration: none;
	display: block;
}

.footer-container {
	background-color: #000000 !important;
	position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
	border-top: .5em solid #00aeef;
	padding-top: 1em;
}

body {
	background-color: #000000;
	font-family: 'Raleway Regular';
	margin: none;
	padding: none;
}

.home-imgs {
	align-content: center;
	width: 400px;
	height: 300px;
}

.flavor-text {
	font-size: 1.5em;
	color: #8C1828;
	text-align: center;
	text-decoration: none;
	display: block;
}

.icon {
	max-height: 75%;
	padding-left: 10em;
	align-content: center;
}

.home-img-1 {
    max-width: 75%;
    max-height: 70%;
	align-content: center;

}

/* =============================================================================
  "PORTFOLIO" PAGE
============================================================================= */
.porttxt {
	font-size: 1.75em;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	display: block;
	margin-bottom: 1em;
	margin-top: 1.5em;
}

.porttitle {
	font-size: 1.75em;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	display: block;
	margin-top: 3em;
}

.editmock {
	justify-content: center;
	padding-top: 5em;
	padding-left: 2em;
	width: 110%;
}

.editorial {
	justify-content: center;
	padding-top: 5em;
	padding-left: 2em;
	width: 70%;
}

.yeti {
	 
	padding-top: 5em;
	padding-left: 3em;
	width: 80%;
}

.editorialtxt {
	font-size: 1.25em;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	margin-top: 2em;
}

.food-button {
    background-color: transparent;
    border: 0;
    padding: none;
	font-family: 'Kanit', sans-serif;
}

.space {
    margin-top: 8em;
}

p {
    
    color: #8C1828;
	font-family: 'Kanit', sans-serif;
}

/* Style for the unchecked state */
.btn-check:checked + label.btn.btn-primary {
    background-color: #F9B4A8;
    color: #8C1828;
    border: 2px solid #8C1828;
    border-radius: 10px;
    max-width: 250px;
    text-align: left;
	font-family: 'Kanit', sans-serif;
}

/* Style for the unchecked state */
.btn.btn-primary {
    color: #8C1828;
    border: 2px solid #8C1828;
    background-color: #FFFFFF;
    border-radius: 10px !important;
    max-width: 250px;
    text-align: left;
	font-family: 'Kanit', sans-serif;
}

/* Style for hover, focus, and active states */
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #8C1828 !important;
    border: 2px solid #8C1828 !important;
    background-color: #F6BE61 !important;
    border-radius: 10px !important;
    max-width: 250px;
    text-align: left;
	font-family: 'Kanit', sans-serif;
}

.order-btn {
    color: #8C1828;
    background-color: #FFFFFF;
    border: 2px solid #8C1828;
    border-width: 1px;
    border-radius: 10px;
	font-family: 'Kanit', sans-serif;
}

.total-display {
    font-size: 1.2em;
    font-weight: bold;
    color: #8C1828;
    margin-left: 10px;
	font-family: 'Kanit', sans-serif;
}


#selected-items,
#subtotal,
#total-with-tax {
    font-weight: bold;
	color: #8C1828;
	font-family: 'Kanit', sans-serif;
}

body {
    font-family: 'Kanit', sans-serif;
    
}

.checkbox-btn {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    cursor: pointer;
    background-color: #f0f0f0;
    transition: background-color 0.3s, color 0.3s;
	font-family: 'Kanit', sans-serif;
}

.checkbox-btn.active {
    background-color: #007BFF;
    color: white;
	font-family: 'Kanit', sans-serif;
}

#name {
	color: #8C1828 !important;
}

#phone {
	color: #8C1828 !important;
}

input[name="amount"],
#order_space,
#info {
    color: #8C1828;
}

.boxes {
	color: #8C1828;
    background-color: #FFFFFF;
    border: 2px solid #F6BE61;
    border-radius: 10px;
	outline: none;
	padding: 5px;
}

.calculate-button {
	border: 2px solid #8C1828;
}

.order-btn {
	border: 2px solid #8C1828;
}

/* =============================================================================
  "ABOUT" PAGE
============================================================================= */

.abouttxt {
	font-size: 2em;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	display: block;
	margin-top: 1em;
}

.abouttxt2 {
	font-size: 1.23em;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	display: block;
	margin-bottom: 6em;
}

.blep {
	justify-content: center;
	padding-top: 5em;
	width: 75%;
	padding-left: 15em;
}

.hacker {
	justify-content: center;
	padding-top: 5em;
}

/* =============================================================================
  "CONTACT" PAGE
============================================================================= */
.emailtxt {
	font-size: 1.23em;
	color: #ffffff;
	text-align: left;
	text-decoration: none;
	display: block;
	margin-bottom: 6em;
}

.boxes {
	color: #000000;
    background-color: #FFFFFF;
    border-color: #00aeef;
    border-width: 2px;
    border-radius: 10px;
	outline: none;
	padding: 5px;
}

.contactButton {
	color: #00aeef;
    background-color: #000000;
    border: 2px solid #00aeef !important;
    border-radius: 10px;
	outline: none;
	padding: 5px;
}

/*=============================================================================
  MEDIA QUERIES
============================================================================= */

@media screen and (max-width: 1200px) {
	
	.bottom-strip {
		background-color: #F9B4A8;
		height: 20px;
		position: static;
		left: 100%;
		right: 100%;
		bottom: 100%;
		width: 100%;
		margin-top: 50px;
	}
	
	.about-img-1 {
	
		float: left;
		padding-left: 20px;
		padding-right: 20px;
		width: 325px;
		height: 425px;
	}

	.about-img-2 {

		float: left;
		padding-left: 20px;
		padding-right: 20px;
		width: 325px;
		height: 425px;
	}

	.bartender {
		text-align: right;
		padding-top: 100px;
		padding-left: 150px;
		padding-right: 50px;
		color: #8C1828;
		font-weight: bold;
		font-size: 20px;
	}

	.kitchen {
		text-align: right;
		padding-top: 100px;
		padding-left: 150px;
		padding-right: 50px;
		color: #8C1828;
		font-weight: bold;
		font-size: 20px;
	}

	.border1 {
		border: 2px solid #F6BE61;
		border-radius: 10px;
		padding: 20px;
		background-color: #FFFFFF;
		margin-top: 20px;
		margin-left: 10px;
		margin-bottom: 10px;
		margin-right: 40px;
		}

	.border2 {
		border: 2px solid #F6BE61;
		border-radius: 10px;
		padding: 20px;
		background-color: #FFFFFF;
		margin-top: 20px;
		margin-right: 40px;
		margin-left: 10px;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 1119px) {
	
	.about-img-1 {
	
		float: left;
		padding-left: 20px;
		padding-right: 20px;
		width: 325px;
		height: 425px;
	}

	.about-img-2 {

		float: left;
		padding-left: 20px;
		padding-right: 20px;
		width: 325px;
		height: 425px;
	}

	.bartender {
		text-align: right;
		padding-top: 100px;
		padding-left: 150px;
		padding-right: 50px;
		color: #8C1828;
		font-weight: bold;
		font-size: 20px;
	}

	.kitchen {
		text-align: right;
		padding-top: 100px;
		padding-left: 150px;
		padding-right: 50px;
		color: #8C1828;
		font-weight: bold;
		font-size: 20px;
	}

	.border1 {
		border: 2px solid #F6BE61;
		border-radius: 10px;
		padding: 20px;
		background-color: #FFFFFF;
		margin-right: 40px;
		}

	.border2 {
		border: 2px solid #F6BE61;
		border-radius: 10px;
		padding: 20px;
		background-color: #FFFFFF;
		margin-top: 20px;
		margin-right: 40px;
		margin-left: 10px;
		margin-bottom: 10px;
	}
}

@media screen and (max-width: 767px) {
	
	.about-img-1 {
	
		float: left;
		padding-left: 20px;
		padding-right: 20px;
		width: 325px;
		height: 425px;
	}

	.about-img-2 {
	
		float: left;
		padding-left: 20px;
		padding-right: 20px;
		width: 325px;
		height: 425px;
	}

	.bartender {
		text-align: right;
		padding-top: 100px;
		padding-left: 150px;
		padding-right: 50px;
		color: #8C1828;
		font-weight: bold;
		font-size: 20px;
	}

	.kitchen {
		text-align: right;
		padding-top: 100px;
		padding-left: 150px;
		padding-right: 50px;
		color: #8C1828;
		font-weight: bold;
		font-size: 20px;
	}

	.border1 {
		border: 2px solid #F6BE61;
		border-radius: 10px;
		padding: 20px;
		background-color: #FFFFFF;
		margin-right: 40px;
		}

	.border2 {
		border: 2px solid #F6BE61;
		border-radius: 10px;
		padding: 20px;
		background-color: #FFFFFF;
		margin-top: 20px;
		margin-right: 40px;
		margin-left: 10px;
		margin-bottom: 10px;
	}
}