html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
body{
margin:0;
padding:0;
background-color:#fff;
font-family: 'Lora', Georgia, serif;
color: #955836;
background: url("../img/bg_xadrez.gif") repeat;
}
a, a:visited, a:focus, a:hover{color: #fff; text-decoration: none;}
.wrapper{
margin-top: 4em;
display: grid;
grid-template-columns: 5% 65% 25% 5%;
grid-template-rows: auto;
grid-template-areas:
    ". box1 box2 ."
    ". box3 box3 .";
grid-column-gap: 10px;
grid-row-gap: 15px;
}
#box1{
	grid-area: box1;
}
#box1 ul{
	background: url('../img/coxinha.png') 90% 90% no-repeat;
	background-size: contain;
	background-size: 198px 198px;
}
#box1 li, #box2 li{
	margin: .75em .75em .75em 0;
}
#box1 li span{
	background: rgba(255,255,255,.5);
	padding: .25em .25em .25em 0;
}
#box1 div{
	z-index: -2;
	background-color:#fff;
	/* width:300px; */
	text-align:left;
	padding: 12px;
	border-radius: 12px;
	  -webkit-box-shadow: 2px 2px 0px #d5bdb1;
	  box-shadow:         2px 2px 0px #d5bdb1;
		padding-top: 4em;
		padding-left: 1.5em;
		position: relative;
		top: -4.5em;
		max-width: 810px;
}
#box2{
	grid-area: box2;
	/* margin-top: 30px; */
	padding: 20px 10px;
	background-color:#ca9176;
	color: #fff;
	width:90%;
	margin: 0 auto;
	text-align:left;
	/* clear:both; */
	border-radius: 12px;
	  -webkit-box-shadow: 2px 2px 0px rgb(149, 103, 78);
	  box-shadow:         2px 2px 0px rgb(149, 103, 78);
}
#box2{
	background-image: url('../img/highlight-bg.png');
	background-position: 90% 90%;
	background-repeat: no-repeat;
	background-size: contain;
	background-size: 198px 198px;
}
#box3{
	margin-top: 3em;
	grid-area: box3;
	background-color: transparent;
	width:100%;
	text-align:center;
}
#box3 h2{
	color: rgb(149, 103, 78);
	text-transform: none;
}
#box3 p{
	border-radius: 12px;
	  -webkit-box-shadow: 2px 2px 0px rgb(207, 141, 5);
	  box-shadow:         2px 2px 0px rgb(207, 141, 5);
	padding: 12px;
	background-color: rgb(246, 167, 6);
	color: #fff;
}
.sticker{
	width: 300px;
	z-index: 3;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
	text-transform: none;
	/* background: rgb(246, 231, 222); */
	 background: rgb(246, 167, 6);
	 color: #fff;
	font-size: 1em;
	border-radius: 30px;
	padding: .75em;
	-webkit-transform: translate(-30px, -21px) rotate(-12deg);
	        transform: translate(-30px, -21px) rotate(-12deg);
	-webkit-box-shadow: 1px 1px 0px rgb(213, 189, 177);
	        box-shadow: 1px 1px 0px rgb(213, 189, 177);
}
.highlight{
	background: rgb(209, 120, 33);
	border-radius: 60px;
	width: 60px;
	height: 60px;
}
h1{
background-color:transparent;
font-size: 1.5em;
color:#ca886a;
margin-top:0px;
margin-left:5px;
padding-left: 5px;
padding-right: 5px;
text-transform: uppercase;
text-align: center;
}
h2{
/*text-shadow: #bf7450 1px 1px 2px;*/
text-align: center;
/* text-transform: uppercase; */
background-color: transparent;
color:#ca886a;
padding-left:3px;
padding-top:3px;
font-size: 1.2em;
margin-top:0px;
margin-left:5px;
}
#box2 h2{color: #955836;}
h3{
background-color: transparent;
font-variant: small-caps;
padding-left:12px;
font-size: 1.0em;
text-align:center;
}
p{
background-color: transparent;
margin-bottom:60px;
margin-left:10px;
}
em{
font-weight:bold;
font-style:normal;
font-size:1.2em;
}
ul li{
vertical-align: bottom;
list-style-type:none;
/*padding: 3px 3px 3px 3px;*/
}
.moldura{
background: url("../img/bordado.gif") repeat-x;
width: 100%;
height:108px;
margin-top:-15px;
text-align: center;

}
.rodape{
position:fixed;
background: url("../img/bordado_small.gif") repeat-x;
bottom:0;
width: 100%;
height:30px;
}

@media screen and (max-width: 800px) {
	.wrapper{
	display: grid;
	grid-template-columns: 5% 80% 5%;
	grid-template-rows: auto;
	grid-template-areas:
	    ". box1."
			". box2 ."
	    ". box3 .";
	grid-column-gap: 10px;
	grid-row-gap: 15px;
	}
	#box2{
		height: 360px;
	}
 }