/*
Theme Name: Eat Delve Sweepstakes QNY
Author: Edison Dairo Jimenez / QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

@import url("https://use.typekit.net/ebq7yis.css"); /* new adobe fonts */

@font-face {
	font-family: 'MeltowSan300';
	src: url('fonts/MeltowSan300Regular.woff2') format('woff2'), url('fonts/MeltowSan300Regular.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'ArlaInterFaceW';
	src: url('fonts/ArlaInterFace-Bold.woff2') format('woff2'), url('fonts/ArlaInterFace-Bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* font sizes */
html{ font-size: 19px;}
body{ font-size: 1rem; }

.introText h1{ font-size: 3.474rem /*66px;*/ }
.shopNowButton{  font-size: 3.053rem /*58px;*/}
.button{  font-size: 2.105rem /*40px;*/}
p.bigger,
.h3{ font-size: 1.789rem; /*34px;*/}
.introText{  font-size: 1.474rem /*28px;*/ }
.divMessage.success,
.biggerFont{  font-size: 1.158rem /*22px;*/}
.copy,
.sweepDelve form,
.sweepDelve form select, .sweepDelve form input[type=text]{ font-size: 0.9rem}
.sweepDelve .button{ font-size:0.737rem /*14px;*/}
.sweepDelve form .small{ font-size:0.684rem /*13px;*/}

/* common styles */
.center{ text-align: center;}
.contentCenter{ width: 1200px; margin: 0 auto;}
.clear{ clear: both;}

body{ margin: 0; padding: 0; background: #9dcb3b; font-family: "brandon-grotesque"; font-weight: 400; line-height: 1.95; letter-spacing: -0.19px; color: #005221;}
a{ color: inherit;}
section{ position: relative; padding: 29px 0 0; overflow-x: hidden; width: 100%;}
section .contentCenter{ position: relative; z-index: 2;}
p.bigger{ font-weight: bold; line-height: 1.29; color: #fff;}
.productImages{ animation: levitate 5s infinite; position: relative; background: url(images/products.png) no-repeat center bottom / contain; width: 1026px; height: 560px; margin: -170px auto -22px;}
.mainTitle{ position: relative; background: url(images/headline.png) no-repeat center bottom / contain; width: 759px; height: 245px; margin: 0 auto 43px;}
.discount{ animation: levitate 8s infinite; position: relative; background: url(images/discount.png) no-repeat center bottom / contain; width: 842px; height: 293px; margin: 0 auto;}
.copy{ margin: 0 auto 40px; text-align: center; line-height: 1.2;}
.copy a{ color: inherit; text-decoration: none;}
.shopNowButton{ margin: 4px 0 0 0; display: inline-block; width: 451px; height:78px; line-height: 78px; background: url(images/buttonBg.svg) no-repeat center center / contain; text-decoration: none; font-family: MeltowSan300; color: #fff;}
.recipeList{ margin: 60px auto 0; width: 850px;}
.recipe{ box-shadow: 5px 5px 20px rgba(0,0,0,0.2); margin: 0 0 50px; background: #fff; font-family: "brandon-grotesque"; line-height: 1.65; color: #000;}
.recipe h2{ margin: 0 0 30px; font-family: "brandon-grotesque";  line-height: 1.09; color: #005221;}
.recipe a{ transition: 0.3s ease; display: block; font-family: MeltowSan300; line-height: 1; color: #fff; text-align: center; text-decoration: none; padding: 12px 0; background: #61bf2e;}
.recipe  a:hover{ background: #419f0e;}
.recipe .image{ display: table-cell; width: 50%; position: relative; overflow: hidden;}
.recipe .image div{ position: absolute; left: 0; top:0; width: 100%; height: 100%; transition: 0.3s ease; background:#ccc no-repeat right center / cover;}
.recipe .image:hover div{ transform: scale(1.05);}
.recipe .text{ display: table-cell; width: 50%; padding: 40px 25px 20px; box-sizing: border-box;}
.logo{ position: relative; z-index: 6; display: block; margin: 0 auto 36px; aspect-ratio:300/80; height: 60px; background: url(images/logo.svg) no-repeat center center / contain;}
.sweepsLogo{ /*animation: levitate 5s infinite;*/ position: relative; z-index: 5; display: block; margin: -150px auto 0;}
.sweepsHeader{}
.sweepsHeader img{ border-radius: 30px; overflow: hidden; display: block; width: 100%;}
.introText{ margin: 0 auto; font-family: "brandon-grotesque"; line-height: 1.47; text-align: center; }
.introText .button{ margin-top: 40px;}
.introText h1{ margin: 0 auto -24px; text-shadow: 4px 4px 1px rgba(0, 0, 0, 0.16); -webkit-text-stroke: 1px #75c02c; font-family: MeltowSan300; font-weight: normal; line-height: 1.03;  letter-spacing: -2.04px; text-align: center; color: #fcee20;}
.deco0{ width: 100%; aspect-ratio:1920/1080; display: block; background: no-repeat center center / contain;}
.button{ display: block; margin: 16px auto 0; cursor: pointer; font-family: MeltowSan300; font-weight: normal; text-align: center; color: #fff; width: 350px; padding: 5px 0; background: #005221;}
.fullwidthText{ line-height: 1.2; color: #005221; margin: 0; padding: 20px 0;}
.center{ text-align: center;}
.sweepDelve{ margin: 0; padding: 1px 0 0; /*background: linear-gradient(to bottom,rgba(0, 145, 226,1) 0%, rgba(0, 145, 226,0) 60%);*/ }
.sweepDelve .contentCenter{ margin: 0 auto 70px; width:100%;  color:#6b6f81;}
.sweepDelve form{ box-sizing: border-box; width: 850px; margin:0 auto 60px; background: #fff; border-radius: 22px; border: 2px dashed #005221; padding:20px;}
.sweepDelve form label{ color:inherit; display: block; padding: 0 0 0 30px; margin:0 0 0 150px; position: relative;}
.sweepDelve form label input{ position: absolute; left: 0; top:6px;}
.sweepDelve form select,
.sweepDelve form input[type=text]{ background:#fff; border-radius:4px; float: right; font-family: "brandon-grotesque"; font-weight: 400; display: block; margin: 0 0 10px; box-sizing: border-box; padding: 0 10px; height: 40px !important; border: 1px solid #ccc; width: calc(100% - 130px - 20px);}
.inputColumn{ float: right; width: calc(100% - 130px - 20px);}
.sweepDelve .banner{ width:100%; height:auto; margin:0 auto 30px; }
.sweepDelve .banner img{ display:block; width:100%; height:auto;}
.sweepDelve .center{ text-align: center; color:inherit; }
.sweepDelve .button{ display:block; text-decoration: none; text-align: center; padding: 10px 20px; box-sizing: border-box; border-radius:0; background:#005221; color:#fff !important; text-transform:uppercase; border:none !important; width: 100%;}
.sweepDelve a{ color:#005221;}
.sweepDelve form .button{ display:block; margin:20px 0 0 0; font-size:1rem;}
.divMessage{ display: none; margin: 20px 0 0 0; padding: 0 15px;}
.divMessage.error{ color: #cf0000; background: none !important;}
.divMessage.success{ color: #00A050; margin: 0; text-align: center;}
.redBorder{ border-color: #cf0000 !important;}
.snowflake { z-index: 100; position: absolute; width: 10px; height: 10px; background: linear-gradient(white, white); border-radius: 50%; filter: drop-shadow(0 0 10px white);}
.flatList{ padding: 0 20px; list-style-type:none;}
.h3{ margin:30px auto; }
sup{font-size:0.7rem;}
.sweepDelve form label.forColumn{ color: #005221; font-weight: bold; line-height: 40px; padding: 0; width:130px; text-align: right; float: left; margin: 0 0 10px;}
.instaLink{ display: inline-block; border-radius: 6px; text-decoration: none; box-sizing: border-box; padding: 4px 15px; color: #fff; background:linear-gradient(to right,#e300a5 0%,#ff7c00 100%); margin: 0 0 10px;}
.instaLink:before{ vertical-align: text-top; display: inline-block; content: ''; width: 20px; height: 20px; background: url(images/insta.svg) no-repeat center center / contain; margin: 0 10px 0 0;}
.fbLink{ display: inline-block; border-radius: 6px; text-decoration: none; box-sizing: border-box; padding: 4px 10px; color: #fff; background:#1877f2; margin: 0 0 10px;}
.fbLink:before{ vertical-align: text-top; display: inline-block; content: ''; width: 20px; height: 20px; background: url(images/fb.svg) no-repeat center center / contain; margin: 0 10px 0 0;}

/* animations */
@keyframes levitate {
	0%   { transform: translateY(0);}
	50%   {  transform: translateY(-15px);}
	100%   {  transform: translateY(0);}
}

/* tablet */
@media screen and (min-width:0) and (max-width:1199px)
{
	html{ font-size: 17px;}
	
	.contentCenter,
	.sweepDelve .contentCenter,
	.recipeList{ width: 768px;}
	.sweepsLogo { width: 600px; margin: -100px auto 0;}
	.button {  width: 300px;}
	.topArea::before { height: 815px;}
	.topArea { height: 1430px;}
	.sweepDelve form{ width: 100%;}
}

/* phone */
@media screen and (min-width:0) and (max-width:767px)
{
	html{ font-size: 15px;}
	.introText {font-size: 1.2rem;}
	
	.hideIphone{ display:none !important;}
	.contentCenter,
	.sweepDelve .contentCenter,
	.recipeList{ width: 345px;}
	.sweepsLogo {  width: 250px;  margin: -18px auto 0;}
	.logo { width: 140px; height: 80px; }
	
	.introText h1 { margin: 0 auto 20px;}
	.topArea { height: 1280px;}
	.topArea::before { height: 965px;}
	.recipe .image { display: block; width: 100%; height: 200px;}
	.recipe .text { display: block; width: 100%;}
	.deco1 { height: 102px; top: 513px;}
	.deco2 { height: 183px; left: calc(50% + -683px); top: 87px;}
	.deco3 { height: 234px; left: calc(50% + -730px); top: 100px;}
	.flatList{ padding: 0;}
	.sweepDelve form label.forColumn { width: 100%; text-align: left;}
	.sweepDelve form select,
	.sweepDelve form input[type="text"],
	.inputColumn{ width: 100%;}
	.sweepDelve form label{ margin: 0;}
	.sweepDelve form label.forColumn{ margin:0 0 -2px;}
}