/* 
	

*/

@import "foundation.css";


/*	--------------------------------------------------
	:: Base Styles
	-------------------------------------------------- */

	body, html {overflow-x: hidden;}

	body {
		background: #FFF;
	}

	body, button, input, select, textarea {
		color: #555;
		font-family: sans-serif;
	}

	/* Links */
	a { color: #AAA; }
	a:hover { color: #999; }

	/* Selection */
	.highlight, ::selection, ::-moz-selection, ::-o-selection, ::-ms-selection { 
		background: #F7323F;
		color: #FFF;
		text-shadow: none;
	}
	
	.container { overflow: hidden; }
	
	/*
	
		Colors
		
		Yellow: #F8CE78
	
	
	*/

	.yellow { color: #F8CE78; }
	.black { color: #000; font-weight: bold; }


/*	--------------------------------------------------
	:: Headings
	-------------------------------------------------- */
	
	
	h3, h4, h5, h6 {
		text-transform: uppercase;
	}
	
	h1 {
	
	}
	
	h2 {
	
	}
	
	h3 {
	
	}

/*	--------------------------------------------------
	:: Header
	-------------------------------------------------- */

	header {
		padding: 10px 0;
		letter-spacing: 1px;
		font-size: 1.2em;
		text-transform: uppercase;
	}
	
		header a {
			display: block;
			line-height: 100px;
			height: 100px;
		}
		
			header .logo a {
				background: none;
				margin-top: 0px;
			}
			
			header a.chicks { background: url(img/nav-bg-01.png) no-repeat center -100px; }
			header a.order { background: url(img/nav-bg-03.png) no-repeat center -100px; }
			header a.about { background: url(img/nav-bg-02.png) no-repeat center -100px; }
			header a.press { background: url(img/nav-bg-04.png) no-repeat center -100px; }
			
			header a:hover {
				background-position: center center;
				color: #FFF;
			}
		
		@media screen and (max-width:767px) {
		
			header .logo {
				display: block !important;
				position: absolute;
				top: -10px; left: 0;
				width: 100% !important;
				text-align: center;
			}
			
				header .logo a {
					height: 120px;
				}
				
					header .logo a img {
						display: block;
						margin: 0 auto;
					}
			
			header .two.columns {
				font-size: 10px;
				float: left !important;
				margin: 60px 0 0 0 !important;
				padding: 0 !important;
				width: 25% !important; height: 50px;
			}
			
				header .two.columns a {
					height: 50px;
					line-height: 50px;
				}
		
		}
			


/*	--------------------------------------------------
	:: Footer
	-------------------------------------------------- */

	footer {
		padding: 40px 0;
		text-transform: uppercase;
	}
	
		footer .seal {
			border-right: 1px #DDD solid;
			display: block;
			float: left;
			margin-right: 20px;
			padding-right: 15px;
		}
		
		footer nav {
			font-size: 1.3em;
			margin: 10px 0;
		}
		
			footer nav a {
				margin-left: 10px;
			}
			
				footer nav a:first-child {
					margin-left: 0;
				}
				
				footer nav a:hover {
					color: #000;
				}
				
		footer .social {
		
		}
		
			footer .social a {
				margin-left: 5px;
			}
			
				footer .social a img {
					opacity: 0.3;
				}
				
					footer .social a:hover img {
						opacity: 1;
					}
			
				footer .social a:first-child {
					margin-left: 0;
				}
				
				
		footer .phone, footer .address {
			letter-spacing: 1px;
			font-size: 1.3em;
			margin: 7px 0 8px;
		}
		
		footer .copyright {
			color: #AAA;
			font-size: 8px;
			letter-spacing: 1px;
		}
		
		@media screen and (max-width:767px) {
		
			footer nav  {
				font-size: 9px;
				margin: 15px 0 10px;
			}
		
			footer .phone {
				margin-top: 20px;
			}
		
			footer .phone, footer .address {
				font-size: 10px;
				text-align: center;
			}
		
			footer .copyright {
				font-size: 6px;
				text-align: center;
			}
		}


/*	--------------------------------------------------
	:: Shared Styles
	-------------------------------------------------- */

	.main {
		background-repeat: no-repeat !important;
		background-position: center center !important;
		background-color: #EEE !important;
		margin: 0 -20px;
		min-height: 575px;
		position: relative;
	}
	
	.flower-bar {
		width: 100%; height: 20px;
	}
	
		.container .flower-bar {
			margin-left: -20px;
			margin-right: -20px;
			padding: 0 20px;
		}
	
		.flower-bar.top {
			background: url(img/flower-bar-01.jpg) repeat-x center center;
			margin-bottom: 40px;
		}
		
		.flower-bar.bottom {
			background: url(img/flower-bar-02.jpg) repeat-x center center;
			margin-top: 30px;
		}


/*	--------------------------------------------------
	:: Home
	-------------------------------------------------- */

	.main.home {
		background: url(img/main.jpg) no-repeat center center;
		overflow: hidden;
	}
		.main.home .slide {
			position: absolute;
			width: 100%; height: 575px;
		
			top: 575px;
			
			-webkit-transition: all 0.5s ease-in;
			-moz-transition: all 0.5s ease-in;
			-o-transition: all 0.5s ease-in;
			-ms-transition: all 0.5s ease-in;
			transition: all 0.5s ease-in;
		}
	
		.main.home .one {
			background: url(img/main_1.jpg) no-repeat center center;
		}
		
		.main.home .two {
			background: url(img/main_2.jpg) no-repeat center center;
		}
		
		.main.home .three  {
			background: url(img/main_3.jpg) no-repeat center center;
		}
		
		.main.home .four {
			background: url(img/main_0.jpg) no-repeat center center;
		}

		.main.home .current {
			top: 0;
		}
	
	
		@media screen and (max-width:767px) {

			
			.main.home, .main.home .slide {
				background-size: 260%;
				height: 240px;
				min-height: 0;
			}
			
			.main.home .slide {
				margin-left: -5px;
				padding-right: 5px;
			}
			
		}
		


/*	--------------------------------------------------
	:: The chicks
	-------------------------------------------------- */


	.main.chicks {
		background: #FFF !important;
		text-align: center;
	}
	
		.chicks .chick {
			background-size: cover !important;
			background-position: center center !important;
			cursor: pointer;
			display: block;
			display: inline-block;
			margin: 0 15px;
			opacity: 0;
			position: relative;
			width: 300px; height: 250px;
			
			-webkit-transform: translate3D(0, 0, 0);
		}
		
			.chick .chick-info-wrap {
				background: #FFF;
				border-radius: 51%;
				position: absolute;
				top: 10.5%; left: 10.5%;
				width: 78%; height: 78%;
				
			
				-webkit-perspective: 800px;
				-moz-perspective: 800px;
				-o-perspective: 800px;
				-ms-perspective: 800px;
				perspective: 800px;
			
				-webkit-transition: all 0.4s ease-in-out;
				-moz-transition: all 0.4s ease-in-out;
				-o-transition: all 0.4s ease-in-out;
				-ms-transition: all 0.4s ease-in-out;
				transition: all 0.4s ease-in-out;
			}
		
				.chick .chick-info-wrap .chick-info {
					border-radius: 50%;
					position: absolute;
					padding: 2px;
					top: -3px; left: -3px;
					width: 100%; height: 100%;
				
					/* Transition Settings */
					-webkit-transition: all 0.3s ease-in-out;
					-moz-transition: all 0.3s ease-in-out;
					-o-transition: all 0.3s ease-in-out;
					-ms-transition: all 0.3s ease-in-out;
					transition: all 0.3s ease-in-out;
						
					-webkit-transform-style: preserve-3d;
					-moz-transform-style: preserve-3d;
					-o-transform-style: preserve-3d;
					-ms-transform-style: preserve-3d;
					transform-style: preserve-3d;
				}
		
					.chick .chick-info-wrap .chick-info > div {
						background-position: center center;
						border-radius: 50%;
						display: block;
						position: absolute;
						width: 100%; height: 100%;
					
						-webkit-backface-visibility: hidden;
						-moz-backface-visibility: hidden;
						-o-backface-visibility: hidden;
						-ms-backface-visibility: hidden;
						backface-visibility: hidden;
					}
		
					.chick .chick-info-wrap .chick-info .chick-info-back {
					
						box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;
						border: 5px #FFF solid;
						box-shadow: 0 0 1px rgba(0,0,0,0.5);
						overflow: hidden;
						
						text-align: center;
						width: 100%; height: 100%;
					
						-webkit-transform: rotate3d(0,1,0,180deg);
						-moz-transform: rotate3d(0,1,0,180deg);
						-o-transform: rotate3d(0,1,0,180deg);
						-ms-transform: rotate3d(0,1,0,180deg);
						transform: rotate3d(0,1,0,180deg);
						
						
					}
					
						.chick .chick-info-wrap .chick-info .chick-info-back .text {
							position: relative;
							top: 20px;
							opacity: 0;
						
							/* Transition Settings */
							-webkit-transition: all 0.5s ease-in-out;
							-moz-transition: all 0.5s ease-in-out;
							-o-transition: all 0.5s ease-in-out;
							-ms-transition: all 0.5s ease-in-out;
							transition: all 0.5s ease-in-out;
						}
					
		
					/* chick Info Styling */
		
					.chick-info h3 {
						color: #FFF;
						letter-spacing: 1px;
						font-size: 20px;
						margin: 0 12px;
						padding: 55px 0 0 0;
					}
					
						.chicks .chick.drop-dead-gourdgeous .chick-info h3 {
							padding-top: 50px;
						}
					
					.chick-info h4, .chick-info h5 {
						color: #FFF;
						font-size: 10px;
					}
					
					.chick-info h4 {
						border-top: 1px #FFF solid;
						border-bottom: 1px #FFF solid;
						margin: 10px 20px;
						padding: 10px 0;
					}
					
						.chick-info h5 .arrow {
							font-size: 10px;
							margin-left: 4px;
						}
						
					/* Hover Animation Effects */
					.chick:hover .chick-info {
						-webkit-transform: rotate3d(0,1,0,-180deg);
						-moz-transform: rotate3d(0,1,0,-180deg);
						-o-transform: rotate3d(0,1,0,-180deg);
						-ms-transform: rotate3d(0,1,0,-180deg);
						transform: rotate3d(0,1,0,-180deg);
					}
					
					.chick:hover .chick-info-wrap .chick-info .chick-info-back .text {
						opacity: 1;
						top: 0;
					}
					
		@media screen and (max-width:767px) {
		
		
			.chick .chick-info {
				-webkit-transform: rotate3d(0,1,0,-180deg);
				-moz-transform: rotate3d(0,1,0,-180deg);
				-o-transform: rotate3d(0,1,0,-180deg);
				-ms-transform: rotate3d(0,1,0,-180deg);
				transform: rotate3d(0,1,0,-180deg);
			}
			
			.chick .chick-info-wrap .chick-info .chick-info-back .text {
				opacity: 1;
				top: 0;
			}
			
		
		}
					
/*	--------------------------------------------------
	:: A chick
	-------------------------------------------------- */
	
	.main.a-chick {
		padding: 0 20px;
	}
	
		.a-chick h5 { font-size: 1.3em; letter-spacing: 1px; margin-top: 80px;}
			.a-chick h5 a { color: #FFF; }
			.a-chick h5 a:hover { color: #000; }
	
		.a-chick h3 {
			color: #FFF;
			letter-spacing: 0.05em;
			line-height: 1em;
			font-size: 9em;
			margin-top: 50px;
			padding: 0;
			white-space: normal;	
		}
		
		.a-chick .description {
			color: #FFF;
			font: normal 1.5em "Courier", Courier;
			letter-spacing: 2px;
			line-height: 1.8em;
			margin-top: 50px;
			text-transform: uppercase;

		}
		
			.a-chick .description p {
				font-size: 1em;
			}
		
		@media screen and (min-width:768px) and (max-width:1024px) {
		
			.main.a-chick {
				background-position: 30% center !important;
			}
			
			.a-chick h3 {
				font-size: 7em;
			}
			
				.a-chick h3 span {
					display: block;
				}
		}
		
		@media screen and (max-width:767px) {
		
			.main.a-chick {
				background-position: 30% center !important;
			}
			
				.a-chick h5 {
					font-size: 1em;
					margin-top: 40px;
				}
		
				.a-chick h3 {
					margin-top: 40px;
					font-size: 2.5em;
				}
				
				.a-chick .description {
					margin-top: 20px;
					font-size: 0.9em;
				}
		}

/*	--------------------------------------------------
	:: About
	-------------------------------------------------- */

	.main.about {
		background: #FAFAFA !important;
		min-height: 0;
		font-family: "Courier", Courier;
	}
	
		.about #map {
			background: url(img/map-bg.jpg) no-repeat center center;
			border: 5px #FFF solid;
			height: 350px;
			width: 100%;
		}
		
		.about h2 {
			margin: 20px 0;
		}
		
		.about p {
			line-height: 1.8em;
		}
		
		.about .hours p {
			margin: 0 0 5px;
		}
		
		.about .address {
			border-top: 2px #DDD solid;
			margin-top: 20px;
			padding-top: 20px;
			text-align: right;
		}
		
			.about .address img {
				float: right;
				margin-left: 10px;
			}
		
			.about .address h2 {
				font-size: 1.9em;
				margin: 0 0 10px;
			}
			
			.about .address h2.phone {
				border-top: 2px #DDD solid;
				float: right;
				font-size: 1.5em;
				margin: 20px 0 0 0;
				padding: 20px 0 0 0;
			}
			
		@media screen and (min-width:768px) and (max-width:1024px) {
			
			.about .address img {
				width: 140px;
			}
			
			.about .address h2 {
				font-size: 1.3em;
			}
			
				.about .address h2.phone {
					font-size: 1.3em;
				}
		}
		
		@media screen and (max-width:767px) {
			
			.about {

			}
				.about .flower-bar.top {
					margin-bottom: 10px;
				}
			

				.about p {
					font-size: 10px;
				}
			
				.about #map {
					margin-top: 20px;
					height: 200px;
				}
				
				.about .address img {
					display: none;
				}
			
				.about .address h2, .about .address h2.phone {
					float: none;
					font-size: 1em;
					text-align: center;
				}
		}

/*	--------------------------------------------------
	:: Press
	-------------------------------------------------- */
	
	
	.main.press {
		background: url(img/press-bg.jpg) no-repeat center center;
		text-align: center;
	}
		
		
		.main.press h4 {
			color: #FFF;
			font-size: 1.8em;
			letter-spacing: 1px;
			margin: 60px 0 40px;
		}
		
		.main.press .logos {
		
		}
		
			.main.press .logos a {
				border: 6px #FFF solid;
				display: block;
				text-align: center;
				height: 60px;
				padding: 30px 10px;
			}
			
				.main.press .logos a img {
					max-height: 60px;
				}
				
				.main.press .logos .bottom a {
					height: 35px;
				}
				
					.main.press .logos .bottom a:img {
						max-height: 35px;
					}
			
			.main.press .logos .row {
				margin-bottom: 10px;
			}
		
		
		.main.press .content {
			border: 6px #FFF solid;
			padding: 10px 10px 105px;
		}
		
			.main.press .content p {
				margin: 30px 0;
			}
			
			.main.press, .main.press a {
				color: #FFF;
				font-family: "Courier", Courier;
			}
			
				.main.press a:hover {
					border-color: #000 !important;
					color: #000;
					
				}
		
			.main.press .content h6 {
				color: #FFF;
				margin-bottom: 20px;
			}
		
				.main.press .content h6 a {
					border-bottom: 2px #FFF solid;
					padding-bottom: 3px;
				}
				
			
				
			@media screen and (min-width:768px) and (max-width:1024px) {
			
				.main.press h4 {
					font-size: 1.3em;
				}
			
				.main.press .logos a {
					height: 40px;
				}
				
					.main.press .logos a img {
						max-height: 40px;
					}
				
			
				.main.press .content {
					padding-bottom: 58px;
				}
			
					.main.press .content h6 {
						font-size: 1em;
					}
			
			}
			
			@media screen and (max-width:767px) {
			
				.main.press {
					background-size: 260%;
					height: 240px;
					min-height: 0;
					width: 100%;
		
				}
			
				.main.press .logos .row {
					margin: 0;
				}
			
				.main.press .logos a {
					margin-top: -6px;
				}
				
				.main.press .content {
					margin-bottom: 40px;
				}
				
					.main.press .content h6 {
						font-size: 0.8em;
					}
			}
			
/*	--------------------------------------------------
	:: FAQ
	-------------------------------------------------- */
	
	.faq {
		
	}
	
		.faq .content {
			margin: 0 auto;
			width: 95%;
		}
	
		.faq .q {
			margin: 75px 0;
		}
		
			.faq .q h4 {
				margin-bottom: 10px;
				font-size: 1.7em;
				overflow: hidden;
			}
			
				.faq .q h4 img {
					display: block;
					float: left;
					margin-top: 3px;
					margin-bottom: 20px;
				}
				
			.faq .q p {
				margin-left: 30px;
			}
			
	@media screen and (max-width:767px) {
		
		.faq .q h4 {
			font-size: 1em;
		}
		
	}