/*******************************************
********************************************
RESPONSIVE STYLES */

@media screen and (max-width:1000px) { /* Target Screen Width */

}

@media screen and (max-width:930px) {
	.container-left ul li {
	    font-size: 12px;
	}
	.container-left ul + ul {
    padding-left: 10px;
	}
	.cell.spacer {
    width: 15px;
	}
	.main-nav > li > a {
		font-size: 12px;
	}
	.main-nav > li + li::before {
		margin: 0px 5px;
	}
	.social {
		width: 52px;
	}
	.cell .social .facebook,
	.cell .social .mail {
		padding-left: 10px;
	}
	
	#award > .cell {
		padding: 50px 25px;
	}
	.award-text,
	.award-img {
		display: block;
		padding: 0 0 10px;
		height: auto;
		width: 100%;
	}
	.award-img {
		background-position: top center;
		min-height: 79vw;
	}
}

@media screen and (max-width:800px) { 

	/* iOS Clicking Fix */
	body {
		cursor: pointer;
	}	
	.main-nav > li > a {
	    font-size: 11px;
	}
	#bg-image figure {
    padding: 20% 0px;
	}
	.cell.spacer {
		display: none;
	}
	.container-left, .container-right {
    display: block;
    width: 100%;
    height: auto;
		margin: auto;
		padding: 15px;
	}
	.container-left {
		padding-bottom: 30px;
	}
	.container-left p:nth-child(2) {
    padding: 10px 0px 35px 0px;
	}
	.flavor-list {
		text-align: center !important;
	}
	.container-left ul li {
		text-align: center;
	}
	.container-left ul + ul {
    padding-left: 0px;
		margin-left: 30px;
	}
	.container-right ul {
    max-width: 450px;
    margin: auto;
	}
	#meet .meet-text,
	#meet .meet-img {
		display: block;
		height: auto;
		width: 100%;
	}
	#meet .meet-img {
		height: 400px !important;
	}
	
}

@media screen and (max-width:770px) {
	.header-stamp img {
		display: none;
	}
	.shoppe {
    padding: 30px 10px 0px;
	}
	#ramone h3 {
    padding: 25px 0px 15px;
	}
}


 
@media screen and (max-width:740px) {
	.nav-links {
		display: none;
	}
	nav {
		min-height: 60px;
	}	
	#nav {
		height: 60px;
	}
	#nav .mobile-menu {
		padding-right: 80px;
	}
	.mobile-logo {
		position: absolute;
		width: 180px;
		top: -100%;
		left: 0px;
		right: 0px;
		display: block;
		margin: 0 auto;
		transition: top 0.3s ease 0s;
	}
	.show-logo .mobile-logo {
		top: 5px;
	}
	.menu-button {
		display: block;
		height: 50px;
		width: 50px;
		position: absolute;
		top: 0px;
		bottom: 0px;
		right: -60px;
		margin: auto;
		z-index: 9998;
	}
	.menu-button span {
		display: block;
		height: 5px;
		width: 30px;
		position: absolute;
		top: 0px;
		bottom: 0px;
		right: 0px;
		left: 0px;
		margin: auto;
		background-color: #221F20;
	}
	.menu-button span:before,
	.menu-button span:after {
		content: "";
		display: block;
		height: 5px;
		width: 30px;
		position: absolute;
		right: 0px;
		left: 0px;
		margin: auto;
		background-color: #221F20;
	}
	.menu-button span:before {
		top: -8px;
	}
	.menu-button span:after {
		top: 8px;
	}
}

@media screen and (max-width:670px) { /* Phone View */

	.alert .button {
		display: block;
		margin-top: 15px;
		margin-left: 5px;
	}
	.alert form > span {
		margin-top: 0 !important;
	}

	#logo-info .cell {
		display: block;
		width: 100%;
    height: auto;
		margin: auto;
		padding: 10px 0px !important;
		text-align: center !important;
	}
	.top-banner {
    padding-top: 110px;
	}
	#ramone .who .cell {
		display: block;
		width: 100%;
		height: auto;
		text-align: center;
		padding: 0px;
	}
	
	#ramone img {
    float: none;
    width: 300px;
	}
}


@media screen and (max-width:480px) {
	#bg-image figure {
    padding: 30% 0px;
	}
	.flavor-list ul {
		display: block;
		margin-left: 0px !important;
	}
	.shoppe {
		line-height: 25px;
	}
	#grand-opening p {
		font-size: 19px;
	}
	#flavors h2, #contact h2 {
		margin-bottom: 15px;
	}
	#ramone .who {
    padding: 50px 50px 45px;
	}
	#contact .cell .table .cell {
    padding: 40px 0px 45px;
	}
	.container-left p:nth-child(2),
	#contact p,
	#footer p {
		line-height: 20px;
	}
	.social {
		width: 50px;
	}
	.cell .social .facebook {
		padding-left: 3px;
	}
	.cell .social .mail {
		padding-left: 5px;
	}
	.mobile-logo {
		width: 37vw;
	}
	
	/* Modals */
	.catering-modal h1,
	.donate h1 {
	  font-size: 22px;
		line-height: 25px;
	}
	
}

@media screen and (max-width:400px) {
	.social {
		width: 50px;
	}
	#nav .order-btn {
		width: 86px;
	}
	/* Recaptcha */
	#recaptcha1 {
	  -webkit-transform: scale(0.9);
	      -ms-transform: scale(0.9);
	          transform: scale(0.9);
	  -webkit-transform-origin:0;
	      -ms-transform-origin:0;
	          transform-origin:0;
	}
}

@media screen and (max-width:380px) {
	#bg-image figure {
    padding: 35% 0px !important;
	}
	#flavors h2, #contact h2 {
		font-size: 13px;
		background: none;
	}
	
	#flavors h1,
	#contact h1 {
    font-size: 34px;
	}
	#contactForm .close {
    padding: 5px 10px;
	}
	
	/* Recaptcha */
	#recaptcha1 {
	  -webkit-transform: scale(0.75);
	      -ms-transform: scale(0.75);
	          transform: scale(0.75);
	  -webkit-transform-origin:0;
	      -ms-transform-origin:0;
	          transform-origin:0;
	}
}


@media screen and (max-width:330px) {
	
	/* Recaptcha */
	#recaptcha1 {
	  -webkit-transform: scale(0.65);
	      -ms-transform: scale(0.65);
	          transform: scale(0.65);
	  -webkit-transform-origin:0;
	      -ms-transform-origin:0;
	          transform-origin:0;
	}
}