@charset "UTF-8";
/* CSS Document */


/* Preload image */
body::after{
  position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
  content:url(http://burkeholidayrecipes.com/images/2020/card-BG.png) url(http://burkeholidayrecipes.com/images/2020/intro-BG.png) url(http://burkeholidayrecipes.com/images/2020/intro-BG2.png) url(http://burkeholidayrecipes.com/images/2020/intro-BG3.png url(http://burkeholidayrecipes.com/images/2020/backgroundpaper.jpg);
}

.burke-link {position: fixed; left:0; bottom:0; width:3vw; height:20vh; z-index:9999999;}

.card-wrapper-wrapper {position:fixed; top:0; bottom:100px; width:100%; display:flex; justify-content: center; align-items: center; z-index:99; }
.card-wrapper {display:block; position:relative; top:-100%; width:100%; max-width:896px; margin:auto; padding:0 15%; vertical-align:middle;}
.card {position:relative; width:100%; padding-bottom:69.0972%; height:0; background-image:url('../images/2020/card-BG.png'); background-size:cover;}
.card-photo {position:absolute; top:0; left:0; width:49.074074%;}
.card-photo img {width:100%; display:block;}
.card-photo .photo-caption {position:absolute; width:94.3%; height:9.8%; left:5.6%; bottom:10.8%; transform:rotate(-5deg); text-align:center; font-family: 'Rock Salt', cursive, sans-serif; color:#2d77d1; font-size:1.1vw; line-height:2.8; text-transform:capitalize;}
.card-right {position:absolute; top:11.15%; right:4%; width:38%; padding:4%; height:62.85%;}
.card-right .logo {width:100%; overflow:hidden; text-align:center; cursor: pointer;}
.card-right .title {font-family: 'Amatic SC', cursive, sans-serif; font-weight:700; font-size: 4vw; line-height:1;}
.card-right img {width:32.75%; width:44.2125%;}
.card-right .dashed-line {width:100%; display:block; margin:10px 0;}
.card-right ul {list-style:none; font-size: 1.7vw;}
.card-right ul li:last-child {float:right; opacity:.5; transform:rotate(-3deg); margin-top:5px;}

.card-intro.top {position:relative; width:100%; padding-bottom:29.63%; height:0; background-image:url('../images/2020/intro-BG.png'); background-size:cover; background-repeat:no-repeat;}
.card-intro.middle {width:100%; background-image:url('../images/2020/intro-BG2.png'); background-size:100%; background-repeat:repeat-y;}
.card-intro.bottom {width:100%; padding-bottom:2.662%; height:0; background-image:url('../images/2020/intro-BG3.png'); background-size:100%; background-repeat:no-repeat;}
.card-intro .bow {position:absolute; top:0; left:0; width:31.134%;}
.card-intro .bow img {width:100%; display:block;}
.intro-content {width:80%; margin-left:10%; text-align:center; font-size:2.3vw; line-height:1.3;}
.intro-content h1 {font-family:'Amatic SC', cursive, sans-serif; font-weight:700; font-size:7vw; line-height:1.6; color:#da9d1b;}
.intro-content .fa {font-size:4.5vw; line-height:2; margin-bottom:2rem; position: relative;}
.intro-content .fa::after {content:'browse recipes below'; font-family:'Amatic SC', cursive, sans-serif; font-size:1.25rem; width:250px; position: absolute; left:calc(-125px + 50%); bottom:-1rem;}

.credit {position:absolute; width:42%; padding-bottom:7.176%; height:0; bottom:4%; left:8%; font-family:'Amatic SC', cursive, sans-serif; font-weight:400; font-size:1.6vw; line-height:3.3;}
.credit span {font-size:1.2vw; margin-left:3%;}
.recipe-link {position:absolute; width:42%; padding-bottom:7.176%; height:0; bottom:4%; right:8%; text-align:right; font-family:'Amatic SC', cursive, sans-serif; font-weight:400; font-size:2.2vw; line-height:2.3; cursor:pointer;}
.recipe-link .fa {font-size:3vw; vertical-align:middle; color:#826645; margin-left:2%;}
.recipe-link:hover .fa {color:#900010;}

.recipe {overflow: auto; background-image: url('../images/2020/backgroundpaper.jpg'); background-repeat: no-repeat; background-size: cover; }
.recipe {position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; background-color:#f6d2a2; display:none;}
.recipe-close {cursor:pointer;}
.recipe-share {cursor:pointer;}

.mobile-footer {width:100%; overflow:hidden; display:none;}
.mobile-footer img {display:block; width:100%;}

.burke {display:block; top:0;}

/* Expand Width of Card for Smaller Devices in Portrait Orientation */

 @media screen and (orientation:portrait) {
	.card-wrapper {padding:0;}
	.card-right .title {font-size:5.4vw;}
	.card-right ul {font-size:2.3vw;}
	.credit {font-size:2.2vw;}
	.credit span {font-size:1.8vw;}
	.recipe-link {font-size:3.2vw;}
	.recipe-link .fa {font-size:3.6vw;}
	.card-photo .photo-caption {font-size:1.5vw;}
 }
 
 
 
/* Clean Up Layout fo Devices smaller than iPad Mini */

 @media screen and (max-height: 700px) {
	#thumbs {display:none;}
	#wrapper {overflow-y:scroll; -webkit-overflow-scrolling: touch;}
	.card-wrapper-wrapper {position:absolute; top:0; height:auto; display:table;}
	.card-wrapper {position:relative; display:block !important; top:auto !important; padding:0;}
 }

 @media screen and (max-width: 767px) {
	#thumbs, .bg-tl, .bg-tr, .bg-bl, .bg-br {display:none;}
	#wrapper {overflow-y:scroll; -webkit-overflow-scrolling: touch;}
	.burke-link {display: none;}
	.card-wrapper-wrapper {position:absolute; top:0; height:auto; display:table;}
	.card-wrapper {position:relative; display:block !important; top:auto !important; padding:0;}
	.card-right .title {font-size:5.4vw;}
	.card-right ul {font-size:2.3vw;}
	.credit {font-size:2.2vw;}
	.credit span {font-size:1.8vw;}
	.recipe-link {font-size:3.2vw;}
	.recipe-link .fa {font-size:3.6vw;}
	.card-photo .photo-caption {font-size:1.5vw;}
/* 	.mobile-footer {display:block;} */
	.intro-content {font-size:3vw;}
	.intro-content h1 {font-size:9vw;}
	.intro-content .fa {font-size:7.5vw;}
 }
 
 @media screen and (max-width: 414px) {
	 .card-right .dashed-line, .card-right ul, .credit {display:none;}
	 .card-right .title {font-size:7vw;}
	 .card-right ul li:last-child {display:none;}
	 .recipe-link {bottom:20%; font-size:5vw;}
	 .recipe-link .fa {font-size:7vw;}
	.intro-content {font-size:3.5vw;}
	.intro-content h1 {font-size:10vw;}
	.intro-content .fa {font-size:8.5vw;}
 }

 @media screen and (min-width : 1280px) 
{
.intro-content {font-size:30px;}
.intro-content h1 {font-size:90px}
.intro-content .fa {font-size: 58px;}
.card-photo .photo-caption {font-size:14px;}
.card-right .title {font-size:51px;}
.card-right ul {font-size:22px;}
.recipe-link {font-size:28px;}
.recipe-link .fa {font-size:38px;}
.credit {font-size:20px;}
.credit span {font-size:15px;}
}

  @media screen and (max-width : 540px) 
{
.card-intro.top {background-image:url('../images/2020/intro-BG-mob.png'); padding-bottom:38%;}
.card-intro .bow {width:25%;}
.intro-content {font-size:3.5vw;}
}