* {margin:0; padding:0;}
body {height:100%; width:100%; background-color:white;}

h1, h2, h3, h4 {font-family: 'Luckiest Guy', sans-serif; text-align: center; max-width:100%;letter-spacing: 1px; }

h1 {font-size: 2.00em; }
h2 {font-size: 1.50em; }
h3 {font-size: 1.20em; }

h4 /*active*/{font-size: 1.0em; opacity: 0.85;}

p {font-family: 'Lato', sans-serif; color:inherit; text-align: inherit; }

a {text-decoration: none; color: inherit;}
header, main, content, footer, nav {width:100%; padding:0;}
main, content, footer {margin:0 auto;}
header {margin:100px auto 0 auto;}

footer {text-align: center; padding:20px 0 0 0; color:gray; bottom: 0;}
	footer p {font-size: 0.75em; padding:10px 20px;}

.deal {z-index:100; font-weight: bold; text-align: center; padding:18px 12px; background-color:#25D366; position: fixed; width: 100%; top:0;

		-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.33);
		-moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.33);
	        box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.33);
}

	}
	.deal:hover {background-color:#34B7F1;}
	.deal p {font-size: 1.5em; vertical-align: middle; color: black;}
	.deal img {max-width:30px; vertical-align: -5px;}
		.no_wrap {white-space:nowrap;}

		.deal-antojitos {z-index:100; font-weight: bold; text-align: center; padding:18px 12px; background-color:#A52641; position: fixed; width: 100%; top:0;

		-webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.33);
		-moz-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.33);
	        box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.33);
	}

		}
		.deal-antojitos:hover {background-color:#400000;}
		.deal-antojitos p {font-size: 1.5em; vertical-align: middle; color: white;}
		.deal-antojitos img {max-width:30px; vertical-align: -5px;}


.logo {width:100%; height: 80px; margin-top:30px; background-image: url("https://tarjetoon.com/display/logo.png");background-size: contain; background-repeat: no-repeat; background-position: center;}
.slogan {width:100%; margin:0 0 50px 0; text-align: center; padding-top:10px;}
    .slogan p {font-family: 'Luckiest Guy', sans-serif; font-size: 1.25em; opacity: 0.95; text-shadow: -2px 0 white, 0 2px white, 2px 0 white, 0 -2px white;}

.social {text-align: center; display: inline-block;}
	.socialbutton img {max-width:40px; margin:0 20px 20px 20px; padding: 20px auto; opacity: 0.95; bottom: 0;}
	.socialbutton img:hover {opacity: 0.5;}


/* CONTENT */

.main, .half {width:96%; margin:0 2% 2% 2%;}

.quarter {width:21%; float:left; margin: 2%; background: #FFF; height: 185px; display: inline-block;border-radius: 5px;}
	.quarter h1, .quarter h2, .quarter h3 {text-shadow: none;}

.main, .half, .quarter {background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; }
	.main img, .half img, .quarter img, .square img {width: 100%;}

.box {width:100%; max-width: 1024px; margin: 0 auto; padding:36px 0; overflow: auto;}
	.box p {text-align: left; padding: 0 36px;}
	.box h1, h2, h3 {text-shadow: 2px 2px rgba(0, 0, 0, 0.5); padding-bottom:0.75em;}
		.box_in {padding:0 36px;}

		.colorA {background: #F2E50B; color: #FFF;} /*Yellow*/
		.colorB {background: #F16937; color: #FFF;} /*Orange*/
		.colorC {background: #DF2D54; color: #FFF;} /*Rose*/
		.colorD {background: #8B4BE4; color: #FFF;} /*Violet*/
		.colorE {background: #0084BA; color: #FFF;} /*Blue*/
		.colorF {background: #83D72E; color: #FFF;} /*Green*/

		.color1 {background: #A52641; color: #FFF;} /*Deli*/
		.color2 {background: #400000; color: #FFF;} /*Wine*/
		.color3 {background: #FFD780; color: #000;} /*Custard*/

.box_act {width:100%; max-width: 1024px; margin: 0 auto; padding:18px 0;}

.show {max-width:23%; padding:1%; float:left; height: auto; overflow: auto; background-color: #FFF; background-image:"thumbs/h2o.png"; background-repeat: no-repeat; background-position: center; color:#000;}
	.show h4 {font-size: 125%; line-height: 1.25em; margin-top: 12px;}
	.buy {font-size: 75%; color: #FFF; background-color:#F00; padding:6px 10px; }

.menu {width:25%; float:left; height: auto; overflow: auto; display: inline-block;}
	.show img {width:100%; margin: 0; vertical-align:top;}

.fav {z-index:50; width:50px; height:50px; position: absolute; background-image: url("../display/fav.png"); background-repeat: no-repeat; background-position: center;}

	.menu h3 {letter-spacing: 1px; text-shadow: 2px 2px rgba(0, 0, 0, 0.5); vertical-align: middle; padding-top:0.5em;}

/* END OF CONTENT */


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

	.slogan {padding-top:6px; margin:0 0 30px 0;}
        .slogan p {font-size: 1.0em; text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;}

		.socialbutton img {max-width:30px;}
		.deal {padding:18px auto}
		.deal p {font-size: 1.0em; vertical-align: middle; color: black;}
		.deal img {max-width:15px; vertical-align: -1%;}

		.quarter {width:46%;}
	
		.show {max-width:48%;}
		.menu {width:50%;}

}