/*----------------------------------------------------------*/
/* Si Senor													*/
/* CSS name: page.css										*/
/* Developer: MindPick Software LLC							*/
/* Date: 5/5/2017											*/
/*															*/
/* Description: Style sheet for elements specific to	  	*/
/* 		individual pages (i.e., not all pages) with all 	*/
/*      media.												*/
/*----------------------------------------------------------*/

/*----------------------------------*/
/* Styles for the Home page.	 	*/
/*----------------------------------*/

/* Set up the slide show. */
/*
 * Container for the slides: slides will be absolutely
 * positioned inside and have overflow hidden for when photo
 * expands. */
#slideshow {
	position: relative;
	width: 270px;
	height: 180px;
	background-color: #222;
	border: 8px solid #b4b4b4;
	margin: 2em auto 3em;
	overflow: hidden;
}

@media screen and (min-width: 480px) {
	#slideshow {
		width: 405px;
		height: 270px;
	}
}

@media screen and (min-width: 600px) {
	#slideshow {
		width: 540px;
		height: 360px;
	}
}

/* Slides start out hidden (0 opacity) and cover background. */
.slideshow-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	opacity: 0;
}

/* Each slide expands from a different corner. */
#slide1 {
	background-image: url(../images/slideshow-1.jpg);
	-webkit-animation: kenburns-1 16s ease-in-out 0s infinite;
	animation: kenburns-1 16s ease-in-out 0s infinite;
	-ms-transform-origin: bottom left;
	-webkit-transform-origin: bottom left;
	transform-origin: bottom left;
	opacity: 1;		/* 1st slide shows at start */
}

#slide2 {
	background-image: url(../images/slideshow-2.jpg);
	-webkit-animation: kenburns-2 16s ease-in-out 0s infinite;
	animation: kenburns-2 16s ease-in-out 0s infinite;
	-ms-transform-origin: top right;
	-webkit-transform-origin: top right;
	transform-origin: top right;
}

#slide3 {
	background-image: url(../images/slideshow-3.jpg);
	-webkit-animation: kenburns-3 16s ease-in-out 0s infinite;
	animation: kenburns-3 16s ease-in-out 0s infinite;
	-ms-transform-origin: top left;
	-webkit-transform-origin: top left;
	transform-origin: top left;
}

#slide4 {
	background-image: url(../images/slideshow-4.jpg);
	-webkit-animation: kenburns-4 16s ease-in-out 0s infinite;
	animation: kenburns-4 16s ease-in-out 0s infinite;
	-ms-transform-origin: bottom right;
	-webkit-transform-origin: bottom right;
	transform-origin: bottom right;
}

/* Animate the slideshow. */
@-webkit-keyframes kenburns-1 {
	0% { opacity: 1; -webkit-transform: scale(1);  transform: scale(1); }
	20% { opacity: 1; -webkit-transform: scale(1.1);  transform: scale(1.1); }
	25% { opacity: 0; -webkit-transform: scale(1.1);  transform: scale(1.1); }
	95% { opacity: 0; -webkit-transform: scale(1);  transform: scale(1); }
	100% { opacity: 1; -webkit-transform: scale(1);  transform: scale(1); }
}

@-webkit-keyframes kenburns-2 {
	0% { opacity: 0; -webkit-transform: scale(1);  transform: scale(1); }
	20% { opacity: 0; -webkit-transform: scale(1);  transform: scale(1); }
	25% { opacity: 1; -webkit-transform: scale(1);  transform: scale(1); }
	45% { opacity: 1; -webkit-transform: scale(1.1);  transform: scale(1.1); }
	50% { opacity: 0; -webkit-transform: scale(1.1);  transform: scale(1.1); }
}

@-webkit-keyframes kenburns-3 {
	0% { opacity: 0; -webkit-transform: scale(1);  transform: scale(1); }
	45% { opacity: 0; -webkit-transform: scale(1);  transform: scale(1); }
	50% { opacity: 1; -webkit-transform: scale(1);  transform: scale(1); }
	70% { opacity: 1; -webkit-transform: scale(1.1);  transform: scale(1.1); }
	75% { opacity: 0; -webkit-transform: scale(1.1);  transform: scale(1.1); }
}

@-webkit-keyframes kenburns-4 {
	0% { opacity: 0; -webkit-transform: scale(1);  transform: scale(1); }
	70% { opacity: 0; -webkit-transform: scale(1);  transform: scale(1); }
	75% { opacity: 1; -webkit-transform: scale(1);  transform: scale(1); }
	95% { opacity: 1; -webkit-transform: scale(1.1);  transform: scale(1.1); }
	100% { opacity: 0; -webkit-transform: scale(1.1);  transform: scale(1.1); }
}

@keyframes kenburns-1 {
	0% { opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	20% { opacity: 1; -ms-transform: scale(1.1); -webkit-transform: scale(1.1);  transform: scale(1.1); }
	25% { opacity: 0; -ms-transform: scale(1.1); -webkit-transform: scale(1.1);  transform: scale(1.1); }
	95% { opacity: 0; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	100% { opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
}

@keyframes kenburns-2 {
	0% { opacity: 0; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	20% { opacity: 0; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	25% { opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	45% { opacity: 1; -ms-transform: scale(1.1); -webkit-transform: scale(1.1);  transform: scale(1.1); }
	50% { opacity: 0; -ms-transform: scale(1.1); -webkit-transform: scale(1.1);  transform: scale(1.1); }
}

@keyframes kenburns-3 {
	0% { opacity: 0; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	45% { opacity: 0; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	50% { opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	70% { opacity: 1; -ms-transform: scale(1.1); -webkit-transform: scale(1.1);  transform: scale(1.1); }
	75% { opacity: 0; -ms-transform: scale(1.1); -webkit-transform: scale(1.1);  transform: scale(1.1); }
}

@keyframes kenburns-4 {
	0% { opacity: 0; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	70% { opacity: 0; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	75% { opacity: 1; -ms-transform: scale(1); -webkit-transform: scale(1);  transform: scale(1); }
	95% { opacity: 1; -ms-transform: scale(1.1); -webkit-transform: scale(1.1);  transform: scale(1.1); }
	100% { opacity: 0; -ms-transform: scale(1.1); -webkit-transform: scale(1.1);  transform: scale(1.1); }
}

/*------------------------------*/
/* Styles for Glossary page.	*/
/*------------------------------*/

#glossary dt, #sitemap dt {
	margin-top: 1em;
	font-weight: bold;
	color: #00cc00;
}

/*------------------------------*/
/* Styles for Info page.		*/
/*------------------------------*/

/* The Info page must be wider than the others to accommodate the map.	*/
#info #page_body {
/*	min-width: 1000px;*/
}

#info #storefront {
	margin: 1em auto 0;
}

#info #storefront .photo {
	width: 264px;
	height: 199px;
	background-image: url(../images/exterior-m.jpg);
}

#creditcards {
	margin: 0 0 0 5em;
}

.modzr-no-js #dir_instr {  /* Hide map instructions until map drawn. 	*/
	display: none;
}

#map {
	height: 520px;
	width: 300px;
	margin: 2em auto 3em;
	color: #222;
	clear: both;
}

.modzr-no-js #map {
	background-image: url(../images/staticmap-s.png);
}

@media screen and (min-width: 500px) {
	#map {
		width: 400px;
	}
	
	.modzr-no-js #map {
		background-image: url(../images/staticmap-m.png);
	}
}

@media screen and (min-width: 625px) {
	#info #storefront {
		float: right;
		margin: -10em 0 1em 1em;
	}
	
	#info #storefront .photo {
	}
	
	#map {
		width: 500px;
	}
	
	.modzr-no-js #map {
		background-image: url(../images/staticmap-l.png);
	}
}

@media screen and (min-width: 740px) {
	#info #storefront {
		margin: -10em 0 1em 1em;
	}
	
	#info #storefront .photo {
		width: 384px;
		height: 288px;
		background-image: url(../images/exterior-l.jpg);
	}
}

/*------------------------------*/
/* Styles for Margaritas page.	*/
/*------------------------------*/

#margaritas #traditional {
	float: right;
	margin: 0 0 1em 1em;
}

#margaritas #traditional .photo {
	width: 120px;
	height: 160px;
	background-image: url(../images/traditional.jpg);
}

#margaritas #strawberry {
	float: left;
	margin: 0 1em 1em 0;
}

#margaritas #strawberry .photo {
	width: 120px;
	height: 160px;
	background-image: url(../images/strawberry.jpg);
}

#margaritas #texana {
	float: right;
	margin: 0 0 1em 1em;
}

#margaritas #texana .photo {
	width: 120px;
	height: 160px;
	background-image: url(../images/texana.jpg);
}

@media screen and (min-width: 420px) {
	#margaritas #traditional, #margaritas #texana {
		margin-right: 3em;
	}
	
	#margaritas #strawberry {
		margin-left: 3em;
	}
}

/*------------------------------*/
/* Styles for Sitemap page.		*/
/*------------------------------*/

#sitemap dt {
	margin-top: 1em;
	font-weight: bold;
	color: #00cc00;
}

#sitemap dt a {
	color: #00cc00;
	font-weight: bold;
}

body#sitemap dd {
	padding: 0 0 1em;
	margin-left: 30px;
}

/*----------------------------------*/
/* Styles for the Specials page.	*/
/*----------------------------------*/

#special_list p {
	display: block;
	margin: .6em 0 0;
}

.special_day {
	margin: 2em auto 0;
	color: #db43b5;
	font: italic bold 1.3em "Times New Roman", Times, serif;
}

/* Photos */
#specials #chimichanga {
	margin: 1em auto;
}

#specials #chimichanga .photo {
	width: 250px;
	height: 168px;
	background-image: url(../images/special1.jpg);
}

#specials #speedy {
	margin: 1em auto 0;
}

#specials #speedy .photo {
	width: 250px;
	height: 168px;
	background-image: url(../images/special17.jpg);
}

#specials #tacosalad {
	margin: 1em auto 0;
}

#specials #tacosalad .photo {
	width: 250px;
	height: 168px;
	background-image: url(../images/special15.jpg);
}


#specials #flautitas {
	margin: 1em auto 0;
}

#specials #flautitas .photo {
	width: 250px;
	height: 168px;
	background-image: url(../images/special16.jpg);
}