@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-columns-mobile:		4;
	dw-num-columns-tablet:		8;
	dw-num-columns-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.big { display: none;}
.sma { display: block;}
.earn {
	width: auto;
	text-align:center;
	display: block;
    color: #fff;
    text-decoration: none;
    font-size: 25pt;
    border-radius: 40px;
    border: 1px solid #fff;
    padding: 3% 2%;
    margin-top: 4%;
}
.earn:hover {
    cursor: pointer;
    font-weight: 700;
    background: #fdb913;
    border: 1px solid #fdb913;
}
header {
    clear: both;
	float: left;
    display: block;
    width: 100%;
    background: url("../img/background-01.jpg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    margin-bottom: 6px;
}
#logo {
	clear: both;
	float: left;
	width: 40%;
	text-align:center;
	margin: 0 30% 0%;
	display: block;
    z-index: 100;
}
#slide {
    clear: both;
	float: left;
    padding: 0%;
	width: 100%;
	display: block;
    z-index: 1;
    position: relative;
}
#slide .sl-txt {
    position: absolute;
    z-index: 10;
    width: 80%;
    margin: 48% 10% 0;
}
header.trip {
    background: url("../img/background-3.jpg");
    width: 100%;
    background-size: auto 105%;
    background-position: 120% 50%;
}
.wel {
    width: 70%;
    margin: 15% 15% 4%;
}
.line {
    height: 2px;
    background-color: #000;
    width: 100%;
    margin: 5% 0;
}
.flavour {
    width: 100%;
    margin: 10% 0;
}
header #column1 {
    width: 30%;
    border-right: 6px solid #fff;
    background: #ffba1b;
    clear: both;
    display: block;
    margin: 0;
    padding: 7% 5%;
}
header #column2 {
    width: 70%;
    text-align: right;
    margin: 0 15% 15%;
    padding: 0;
    clear: both;
    display: block;
    background: none;
}
#section {
    clear: both;
	float: left;
    display: block;
    width: 70%;
    background: url("../img/background-01.jpg");
    background-size: auto 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 15% 15% 20%;
    border-bottom: 6px solid #fff;
}
#section img { width: 100%; margin: 10% 0 0;}
#section1 {
    clear: both;
	float: left;
    padding: 0%;
	width: 100%;
	display: block;
    border-bottom: 6px solid #fff;
    background: url("../img/background-02.jpg");
    background-size: 100% auto;
}
#section2 {
    clear: both;
	float: left;
    padding: 10%;
	width: 80%;
	display: block;
    border-top: 6px solid #fff;
    text-align: center;
    background: url("../img/background-02.jpg");
    background-size: auto 100%;
    background-position: center;
}
#reward {
    clear: both;
	float: left;
    display: block;
    width: 100%;
    padding: 15% 0% 0;
    background: #fdf4e7;
}
#policy {
    clear: both;
	float: left;
    display: block;
    width: 70%;
    padding: 15%;
    background: #fdf4e7;
}
#app {
    clear: both;
	float: left;
    display: block;
    width: 70%;
    margin: 0 15% 0;
    text-align: center;
}
#app img {
    width: 40%;
    margin-bottom: 8%;
}
#app2 {
    clear: both;
	float: left;
    display: block;
    width: 70%;
    background-color: #f04e23;
    text-align: center;
    padding: 10% 15%;
    margin: 15% 0;
}
#join {
    clear: both;
	float: left;
    display: block;
    width: 70%;
    margin: -7% 15% 0;
    text-align: center;
    position: relative;
    z-index: 100;
}
#butt-izq, #butt-der {
    clear: both;
	float: left;
    display: block;
    width: 70%;
    text-align: center;
    margin: 8% 15% 0;
}
#ios {
    width: 60%;
    text-align: center;
    border-radius: 40px;
    background-image: url("../img/ios.svg");
    background-color: #fdb913;
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 80% 20% 10%;
    margin-top: 5%;
}
#and {
    width: 60%;
    text-align: center;
    border-radius: 40px;
    background-image: url("../img/and.svg");
    background-color: #fdb913;
    background-size: 100% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 80% 20% 10%;
    margin-top: 5%;
}
#ios:hover , #and:hover {
    background-size: 107%;
    cursor: pointer;
    transition: 1s ease;
}
#ios img, #and img {
    max-width: 500px;
}
#earn {
    clear: both;
	float: left;
    display: block;
    width: 100%;
    text-align: center;
}
#icon1, #icon2, #icon3, #icon4, #icon5, #icon6 {
    display: block;
    float: left;
    clear: none;
     width: 60%;
    margin: 0 20% 7%;
}
#icon7 {
    display: block;
    float: left;
    clear: none;
    width: 60%;
    margin: 0 20% 0%;
}
#earn img {
    width: 40%;
    margin-bottom: 5%;
    max-width: 500px;
}
#mod1 {
    clear: both;
	float: left;
    padding: 15% 15% 25%;
	width: 70%;
	display: block;
    text-align: center;
    border-bottom: 6px solid #fff;
    background-size: cover;
}
#mod2 {
    clear: both;
	float: left;
    padding: 10% 15%;
	width: 70%;
	display: block;
    background: url("../img/background-03.jpg");
    background-size: cover;
}
#mod2 img {
    margin-top: -50%;
}
#locations {
    clear: both;
	float: left;
    display: block;
    width: 70%;
    background: #231f20;
    padding: 10% 15%;
}
#column1 {
    background: url("../img/plaza-mexico-restaurant-bar-and-grill-spring-hill.jpg");
    background-size: 101% auto;
    background-position: center;
    clear: none;
	float: left;
    display: block;
    text-align: center;
    text-shadow: 1px 3px 15px rgb(0,0,0,0.8);
    width: 100%;
    padding: 25% 0%;
    margin-bottom: 7%;
}
#column2 {
    background: url("../img/plaza-mexico-restaurant-bar-and-grill-palm-harbor.jpg");
    background-size: 102% auto;
    background-position: center;clear: none;
	float: left;
    display: block;
    text-align: center;
    text-shadow: 1px 3px 15px rgb(0,0,0,0.8);
    width: 100%;
    padding: 25% 0%;
    margin-bottom: 7%;
}
#column3 {
    background: url("../img/plaza-mexico-restaurant-bar-and-grill-charlotte.jpg");
    background-size: 102% auto;
    background-position: center;clear: none;
	float: left;
    display: block; 
    text-align: center;
    text-shadow: 1px 3px 15px rgb(0,0,0,0.8);
    width: 100%;
    padding: 25% 0%;
    margin-bottom: 7%;
}
#column4 {
    background: url("../img/plaza-mexico-restaurant-bar-and-grill-venice.jpg");
    background-size: 100% auto;
    background-position: center;clear: none;
	float: left;
    display: block;
    text-align: center;
    text-shadow: 1px 3px 15px rgb(0,0,0,0.8);
    width: 100%;
    padding: 25% 0%;
    margin-bottom: 7%;
}
#column5 {
    background: url("../img/plaza-mexico-restaurant-bar-and-grill-sarasota.jpg");
    background-size: 102% auto;
    background-position: center;
    clear: none;
	float: left;
    display: block;
    text-align: center;
    text-shadow: 1px 3px 15px rgb(0,0,0,0.8);
    width: 100%;
    padding: 25% 0%;
    margin-bottom: 7%;
}
#column6 {
    background: url("../img/plaza-mexico-restaurant-bar-and-grill-zephyrhills.jpg");
    background-size: 102% auto;
    background-position: center; clear: none;
	float: left;
    display: block; 
    text-align: center;
    text-shadow: 1px 3px 15px rgb(0,0,0,0.8);
    width: 100%;
    padding: 25% 0%;
    margin-bottom: 7%;
}
#column7 {
    background: url("../img/plaza-mexico-restaurant-bar-and-grill-emeraldisle.jpg");
    background-size: 102% auto;
    background-position: center; clear: none;
	float: left;
    display: block; 
    text-align: center;
    text-shadow: 1px 3px 15px rgb(0,0,0,0.8);
    width: 100%;
    padding: 25% 0%;
    margin-bottom: 7%;
}
#column8 {
    background: url("../img/plaza-mexico-restaurant-bar-and-grill-lakeland.jpg");
    background-size: auto 101%;
    background-position: center; clear: none;
	float: left;
    display: block; 
    text-align: center;
    text-shadow: 1px 3px 15px rgb(0,0,0,0.8);
    width: 100%;
    padding: 25% 0%;
    margin-bottom: 7%;
}
#column9 {
    background: url("../img/plaza-mexico-restaurant-bar-and-grill-sun-city.jpg");
    background-size: 102% auto;
    background-position: center; clear: none;
	float: left;
    display: block; 
    text-align: center;
    text-shadow: 1px 3px 15px rgb(0,0,0,0.8);
    width: 100%;
    padding: 25% 0%;
    margin-bottom: 7%;
}
footer {
	clear: none;
	float: left;
    display: block;
	width: 100%;
	padding: 0;
	margin: 0;
	background: #ffba1b;
    border-top: 6px solid #fff;
}
#footer {
	clear: none;
	float: left;
    display: block;
	width: 70%;
	padding: 15% 15% 12%;
	margin: 0;
	background: #1a1a1c;
    border-bottom: 6px solid #fff;
    text-align: center;
}
#foot1 {
    clear: both;
	float: left;
    padding: 0%;
	width: 100%;
	display: block;
}
#foot2, #foot3 {
    clear: both;
	float: left;
    padding: 0%;
	width: 100%;
	display: block;
    margin-top: 3%;
}
#copy {
	clear: none;
	float: left;
	padding: 5% 10%;
	width: 80%;
	display: block;
    text-align: center;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 581px) {
.gridContainer {
	background-size: 100% auto;
}
.big { display: block;}
.sma { display: none;}
header {
    background-size: 100% auto;
    background-position: center right;
    margin-bottom: 6px;
    background: none;
}
header #column1 {
    width: 15%;
    padding: 5%;
    margin: 0;
}
header #column2 {
    width: 50%;
    margin: 0 0 0 14%;
    padding: 0;
    clear: none;
}
.earn {
    font-size: 3.6vw;
    padding: 3% 2%;
    margin-top: 3%;
}
.wel {
    width: 53%;
    margin: 10% 0 4% 9%;
}
#logo {
	clear: both;
	float: left;
	width: 18%;
	text-align:center;
	margin: 0 0 0 6%;
	display: block;
    position: absolute;
}
#slide .sl-txt {
    width: 50%;
    margin: 11% 28% 0 32%;
}
#section {
    width: 70%;
    padding: 9% 15% 12%;
    background-size: auto 100%;
}
#section img { margin: 8% 0 0 15%; width: 85%;}
header.trip {
    background-size: 78% auto;
    background-position: center right;
}
#mod1 {
    padding: 13% 14% 7% 10%;
	width: 41%;
    background-size: auto 100%;
    border-bottom: none;
}
#mod2 {
    clear: none;
    padding: 2% 6% 2% 2%;
	width: 26.106%;
    background-size: auto 100%;
    border-left: 0.9vw solid #fff;
}
#mod2 img {
    margin-left: -45%;
    margin-top: 0;
}
#locations {
    clear: both;
	float: left;
    display: block;
    width: 88%;
    padding: 6% 6% 3%;
}
#section2 {
    padding: 8% 15%;
	width: 70%;
    background-size: 100% auto;
}
#reward {
    width: 100%;
    padding: 8% 0 7%;
}
#policy {
    width: 80%;
    padding: 8% 10%;
}
#app {
    width: 60%;
    margin: 0 20% 5%;
}
#app img {
    width: 25%;
    margin-bottom: 5%;
}
#app2 {
    width: 70%;
    margin: 10% 0 0;
    padding: 6% 15%;
}
#join {
    width: 60%;
    margin: -7% 20% 3%;
}
#butt-izq {
    width: 32%;
    margin: 0 6% 0 15%;
}
#butt-der {
    clear: none;
    width: 32%;
    margin: 0 15% 0 0;
}
#ios, #and {
    margin-top: 4%;
    width: 62%;
    padding: 82% 19% 12%;
}
#icon1, #icon3, #icon5 {
    width: 45%;
    clear: none;
    margin: 0 10% 5% 0;
}
#icon2, #icon4, #icon6 { clear: none; width: 45%; margin: 0 0 5%;}
#icon7  {
    clear: none;
    width: 45%;
    margin: 0 27.5%;
}
#earn {
    width: 80%;
    padding:  8% 10% 1%;
}
#earn img {
    width: 40%;
    margin-bottom: 8%;
}
#copy {
	clear: none;
	float: left;
	padding: 3% 10%;
	width: 80%;
	display: block;
}
#column1, #column2, #column4, #column5, #column7, #column8 {
	clear: none;
	float: left;
	width: 30.666%;
	margin: 0 4% 3% 0;
	display: block;
    padding: 10% 0 14%;
}
#column3, #column6, #column9 {
	clear: none;
	float: left;
    margin: 0 0 3% 0;
	width: 30.666%;
	display: block;
    padding: 10% 0 14%;
}
#footer {
    width: 80%;
    padding: 12% 10%;
    text-align: left;
}
#foot1, #foot2 {
    clear: none;
	width: 30%;
    margin-right: 5%;
    margin-top: 0;
}
#foot3 {
    clear: none;
	width: 30%;
    margin-top: 0;
}
}

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 100%;
	max-width: 1920px;
	margin: auto;
	background-size: 100% auto;
}
header {
    background-size: 76% auto;
}
#logo {
	clear: both;
	float: left;
	width: 11%;
	text-align:center;
	margin-left: 6%;
	display: block;
}
header #column1 {
    width: 15.4%;
    padding: 3% 4%;
    margin: 0;
}
header #column2 {
    width: 46%;
    margin: 0 0 0 18%;
    padding: 0;
}
.wel {
    width: 53%;
    margin: 6% 0 2% 9%;
}
#slide .sl-txt {
    width: 50%;
    margin: 13% 26% 0 24%;
}
#section {
    width: 60%;
    padding: 7% 20% 8%;
    background-size: cover;
}
#section img { margin: 10% 0 0 20%; width: 80%;}
#section2 {
    padding: 6% 10%;
	width: 80%;
}
#mod1 {
    padding: 13% 16% 7% 12%;
	width: 37%;
}
#mod2 {
    clear: none;
    padding: 0% 6% 0% 2%;
	width: 26.3%;
    background-size: auto 100%;
    border-left: 0.7vw solid #fff;
}
#column1, #column2, #column4, #column5, #column7, #column8 {
	clear: none;
	float: left;
	width: 30.666%;
	margin: 0 4% 4% 0;
	display: block;
    padding: 10% 0 14%;
}
#column3, #column6, #column9 {
	clear: none;
	float: left;
    margin: 0 0 4% 0;
	width: 30.666%;
	display: block;
    padding: 10% 0 14%;
}
.flavour {
    width: 50%;
    margin: 2% 25%;
}
#footer {
    width: 66%;
    padding: 7% 8% 9%;
    border-right: 6px solid #fff;
    border-bottom: 0;
    }
#foot1 {
    clear: none;
	width: 30%;
    margin-right: 5%;
}
#foot2 {
    clear: none;
	width: 30%;
    margin-right: 5%;
}
#foot3 {
    clear: none;
	width: 30%;
}
#copy {
    width: 7%;
	padding: 7% 5% 0;
    text-align: left;
}
#app2 {
    width: 70%;
    margin: 5% 0 0;
    padding: 6% 15%;
}
#butt-izq {
    width: 28%;
    margin: 0 8% 0 18%;
}
#butt-der {
    clear: none;
    width: 28%;
    margin: 0 18% 0 0;
}
#ios, #and {
    margin-top: 4%;
    width: 58%;
    padding: 76% 21% 10%;
}
#earn {
    width: 80%;
    padding:  7% 10% 0%;
}
#icon1, #icon2, #icon3 {
    width: 21.25%;
    clear: none;
    margin: 0 5% 4% 0;
}
#icon4 { clear: none; width: 21.25%;}
#icon5 {
    clear: both;
    width: 25%;
    margin-right: 5%;
    margin-left: 7.5%;
}
#icon6  {
    clear: none;
    width: 25%;
    margin-right: 5%;
}
#icon7  {
    clear: none;
    width: 25%;
    margin: 0 7.5% 0 0;
}
#earn img {
    width: 60%;
    margin-bottom: 8%;
}
.earn {
    font-size: 3.2vw;
    padding: 2% 1.5%;
    margin-top: 5%;
}
}