@import url('https://fonts.googleapis.com/css?family=Lobster|Open+Sans:400,400i,600,600i,700,700i');

@font-face {
	font-family:'Brandon Grotesque Bold';
	src:url('fonts/BrandonGrotesque-Bold.eot');
	src:url('fonts/BrandonGrotesque-Bold.eot?#iefix') format('embedded-opentype'), 	
		url('fonts/BrandonGrotesque-Bold.woff2') format('woff2'),
		url('fonts/BrandonGrotesque-Bold.woff') format('woff'),
		url('fonts/BrandonGrotesque-Bold.ttf') format('truetype'),
		url('fonts/BrandonGrotesque-Bold.svg#BrandonGrotesque-Bold') format('svg');
	font-weight:450;
	font-style:normal;
	font-stretch:normal;
 	unicode-range:U+0020-00FE;
}

body{font-family: 'Lobster', cursive; font-size: 16px; color: #000;}

.loader{ background:#fff url(../images/loader.gif) no-repeat center center; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 2000;}

.volumeCtrl{position: absolute; right: 35px; bottom: 20px; width: 5%; max-width: 30px; z-index: 10; opacity: 1;}
.volumeCtrl img{ max-width: 100%;}
.volumeCtrl a img.jpg{ display: none;}
.volumeCtrl a.active img.jpg{ display: block;}
.volumeCtrl a.active img.gif{ display: none;}

.wrapper{ width: 100%; height: 100%; float: left; overflow: hidden; position: relative;}
.logo{ left: 30px; top: 15px; position: absolute; width: 140px; opacity: 0; z-index: 1000;}
.logo img{ width: 100%;}

.timer{ opacity: 0; right: 30px; top: 15px; position: absolute; width: 70px; z-index: 1001;}
.timer #this_svg{ position: absolute; left: 0; top: 0;}
.timer svg{ width: 70px;}
.timer span{ color: #fff; font-size: 30px; position: absolute; width: 70px; height: 70px; line-height: 70px; left: 0; top: 0;} 
.timer p{font-family:'Brandon Grotesque Bold'; color: #fff; text-transform: uppercase; width: 100%; float: left; font-size: 12px;}

.footer{ width: 100%; text-align: center; font-size: 13px; color: #000; position: absolute; left: 0; bottom: 20px; font-family: 'Open Sans', sans-serif; opacity: 0; z-index: 1;}

.introscreen{ opacity: 0; width: 100%; height: 100vh; float: left; background: url(../images/screen1_bg.jpg) no-repeat center center; background-size: cover;}
.introscreen .innerCnt{ position: relative; width: calc(100% - 9px); display: inline-block; vertical-align: middle;}
.introscreen .innerCnt .biglogo{ opacity: 0; max-width: 550px; width: 60%; display: inline-block;}
.introscreen .innerCnt .biglogo img{ width: 100%;}
.introscreen .innerCnt p{ font-size: 17px; max-width: 550px; width: 50%; display: inline-block; margin: 40px 0 30px; opacity: 0;}
.introscreen .innerCnt .cta a{ max-width:450px; width: 50%; background:#e43d15; border-radius: 40px; font-size: 40px; color: #fff; padding: 10px 0; display: inline-block; opacity: 0; }
.introscreen .innerCnt .parachute{ z-index: 1; position: absolute; right: 25%; top: -100px; width: 80px;}
.introscreen .innerCnt .parachute img{width: 100%;}
.introscreen .innerCnt .fish{ width: 90px; position: absolute; left: 10%; bottom: 10%;}
.introscreen .innerCnt .fish img{ max-width: 100%;}
.introscreen .innerCnt .boat{ width: 100px; position: absolute; right: 15%; bottom: 0;}
.introscreen .innerCnt .boat img{ max-width: 100%;}
.introscreen .innerCnt .fish2{ width: 90px; position: absolute; left: 5%; bottom: 50%;}
.introscreen .innerCnt .fish2 img{ max-width: 100%;}
.introscreen .innerCnt .fish3{ width: 100px; position: absolute; right: 25%; bottom: 60%;}
.introscreen .innerCnt .fish3 img{ max-width: 100%;}


.hunting{ width: 100%; height: 100vh; float: left; background: url(../images/screen2_bg.jpg) no-repeat center center; background-size: cover; opacity: 0;}
.hunting .innerCnt{ width: calc(100% - 9px); display: inline-block; vertical-align: middle; position: relative;}
.hunting .innerCnt .fish{ width: 90px; position: absolute; left: 10%; bottom: 10%;}
.hunting .innerCnt .fish img{ max-width: 100%;}
.hunting .innerCnt .boat{ width: 100px; position: absolute; right: 15%; bottom: 0;}
.hunting .innerCnt .boat img{ max-width: 100%;}

.hunting .innerCnt .islandpop{ width: 70%; max-width:800px; display: inline-block; background: url(../images/popupBg.png) no-repeat top center; background-size: 100% auto; position: relative;}
.hunting .innerCnt .islandpop .parachute{ z-index: 1; position: absolute; right: 15%; top: -70px; width: 80px;}
.hunting .innerCnt .islandpop .parachute img{width: 100%;}
.hunting .innerCnt .islandpop .huntingpopup{ width: 70%; display: inline-block; background: #fff; border-radius: 15px; overflow: hidden;}
.huntingpopup .popupinner{ padding: 40px; width: 100%; float: left;}
.huntingpopup .popupinner h1{ font-size:35px; width: 90%; display: inline-block; margin: 0 0 20px;}
.huntingpopup .popupinner ul{width: 100%; float: left;}
.huntingpopup .popupinner ul li{ padding: 0 10px; margin: 0 0 30px; width: calc(33.3% - 3px); display: inline-block; vertical-align: bottom; box-sizing: border-box; position: relative;}
.huntingpopup .popupinner ul li .imgBx{ height: 100px; width: 100%; float: left;}
.huntingpopup .popupinner ul li .imgBx img{max-height: 100%;}
.huntingpopup .popupinner ul li h2{font-family:'Brandon Grotesque Bold'; font-size: 13px; text-transform: uppercase; width: 100%; float: left; margin: 5px 0 0;}
.huntingpopup .popupinner .dealsBanner{ width: 100%; float: left; background:#f8d541  url(../images/excl_dealBg.png) no-repeat left center; background-size: auto 100%; padding: 10px;}
.huntingpopup .popupinner .dealsBanner .dealsInner{ border: 1px dashed #fff; width: 100%; padding: 20px; text-align: right;}
.huntingpopup .popupinner .dealsBanner .dealsInner h2{ width: 60%; display: inline-block; text-align: left; text-transform: uppercase; font-size: 15px; font-family:'Brandon Grotesque Bold';}
.huntingpopup .starthunting{width: 100%; float: left;}
.huntingpopup .starthunting a{ width: 100%; float: left; padding: 15px 0; font-size: 30px; color: #fff; background:#e43d15; }
.huntingpopup .popupinner .total{ position: relative; width: 100%; float: left; margin: 10px 0; padding: 30px 0 0;}
.huntingpopup .popupinner .total li{ vertical-align: middle;}
.huntingpopup .popupinner .total:after{content: ""; width: 60%; position: absolute; top: 0; left:20%; border-top: 1px solid #e5e5e5; height: 2px;}
.huntingpopup .popupinner .total .fintot{ width: 99px; height: 141px; display: inline-block; background: url(../images/totalBg.png) no-repeat top center; background-size: cover; color: #fff; padding: 25px 0 0;}
.huntingpopup .popupinner .total .fintot span{ width: 100%; font-size: 20px; float: left; margin: 0 0 5px;}
.huntingpopup .popupinner .total .fintot abbr{ width: 100%; font-size: 14px; float: left; font-family:'Brandon Grotesque Bold'; text-decoration: none; border: none; margin: 0 0 5px; padding: 0; text-transform: uppercase;}

.huntingpopup .popupinner .total .fst:after, .huntingpopup .popupinner .total .equal:after{ content: "+"; position: absolute; top: 25%; right:-15px; font-family:'Brandon Grotesque Bold'; font-size: 40px; color: #666666;}
.huntingpopup .popupinner .total .equal:after{ content: "=";}

.countpopup .popupinner h1{ color: #e43d15; font-size: 35px;}
.countpopup .popupinner h1 span{ color: #000; font-size: 15px; width: 100%; float: left; font-family:'Brandon Grotesque Bold';}

.huntingpopup .popupinner ul li .count{ position: absolute; top: 10px; left: 30px; background: #e43d15; color: #fff; width: 25px; height: 25px; border-radius: 50%; font-family:'Brandon Grotesque Bold'; font-size: 15px; line-height: 25px; z-index: 1;}

.huntingpopup .sharepop{ width: 100%; float: left; padding: 20px 0 0; display: none;}
.huntingpopup .sharepop .inside{ padding:0 40px 30px;}
.huntingpopup .sharepop .winnerId{ position: relative; width: 100%; float: left; z-index: 2;}
.huntingpopup .sharepop .winnerId img{ max-width: 100%;}
.huntingpopup .sharepop .fintot{ width: 99px; height: 141px; display: inline-block; background: url(../images/totalBg.png) no-repeat top center; background-size: cover; color: #fff; padding: 25px 0 0; margin: -25px 0 0;}
.huntingpopup .sharepop .fintot span{ width: 100%; font-size: 20px; float: left; margin: 0 0 5px;}
.huntingpopup .sharepop .fintot abbr{ width: 100%; font-size: 14px; float: left; font-family:'Brandon Grotesque Bold'; text-decoration: none; border: none; margin: 0 0 5px; padding: 0; text-transform: uppercase;}
.huntingpopup .sharepop .sharebtn{ width: 100%; float: left; padding: 20px 0; font-size: 30px; color: #fff; background:#e43d15; cursor: pointer;}
.huntingpopup .sharepop .sharebtn span{ width: calc(20% - 3px); padding: 0 10px 0 0; box-sizing: border-box; text-align: right; display: inline-block; vertical-align: middle; position: relative;
z-index: 2;}
.huntingpopup .sharepop .sharebtn span img{ max-width: 100%;}
.huntingpopup .sharepop .sharebtn .shareCnt{ width: calc(75% - 3px); display: inline-block; vertical-align: middle;}
.huntingpopup .sharepop .sharebtn .shareCnt h2{ font-size: 25px; width: 100%; float: left; text-align: left;}
.huntingpopup .sharepop .sharebtn .shareCnt p{ font-size: 14px; width: 100%; float: left; text-align: left; color: #f6ca00; text-transform: uppercase; font-family:'Brandon Grotesque Bold';}

.maparea{width: 100%; height: 100vh; float: left; opacity: 0; }
.lowerBar{ opacity: 0; width: 80%; display: inline-block; position: absolute; bottom: 0; left: 10%; z-index: 999;}
.lowerBar .glow{ position: absolute; right: 0; top: 0;}
.lowerBar .left{ width: calc(5% - 3px); background: url(../images/lowbarleft.png) no-repeat left top; float: left; background-size: cover; height: 80px;}
.lowerBar .right{ width: calc(5% - 3px); background: url(../images/lowbarright.png) no-repeat left top; float: left; background-size: cover; height: 80px;}
.lowerBar .mid{ background: url(../images/lowbarmid.png) repeat-x left top;  width: calc(90% - 3px); float: left; height:80px;}
.lowerBar .mid ul{width: 100%; float: left;}
.lowerBar .mid ul li{ cursor: pointer; padding: 0 10px; margin: 0 0 30px; width: calc(14.28% - 3px); height: 80px; display: inline-block; vertical-align: bottom; box-sizing: border-box; position: relative;}
.lowerBar .mid ul li .imgBx{ position: relative; height: 70px; width: 100%; display: inline-block; margin: -35px 0 0;}
.lowerBar .mid ul li .imgBx img{max-height: 100%;}
.lowerBar .mid ul li h2{font-family:'Brandon Grotesque Bold'; font-size: 13px; text-transform: uppercase; width: 100%; float: left; margin: 10px 0;}
.lowerBar .mid ul li.last{ background: url(../images/lowbarmid2.png) repeat-x left top;}
.lowerBar .mid ul li.last .imgBx{ position: relative; z-index: 1001;}

.lowerBar .mid ul li .count{ position: absolute; top: 20px; left: 30px; background: #e43d15; color: #fff; width: 25px; height: 25px; border-radius: 50%; font-family:'Brandon Grotesque Bold'; font-size: 15px; line-height: 25px; z-index: 20; display: none;}

.lowerBarMobile{opacity: 0; display: none; width: 100%; padding: 0 20px; position: absolute; bottom: 0; left: 0; z-index: 999;}
.lowerBarMobile ul{width: 100%; float: left;}
.lowerBarMobile ul li{ text-align: left; cursor: pointer; padding: 0; margin: 0; width: calc(50% - 3px); height: 80px; display: inline-block; vertical-align: bottom; box-sizing: border-box; position: relative;}
.lowerBarMobile ul li .imgBx{ position: relative; height: 70px; width: 100%; display: inline-block; margin: -35px 0 0;}
.lowerBarMobile ul li .imgBx img{max-height: 100%;}
.lowerBarMobile ul li .count{ position: absolute; top: 20px; left: 30px; background: #e43d15; color: #fff; width: 25px; height: 25px; border-radius: 50%; font-family:'Brandon Grotesque Bold'; font-size: 15px; line-height: 25px; z-index: 20; display: none;}
.lowerBarMobile ul li:last-child{ text-align: right;}
.lowerBarMobile ul li .innerbx{ width: 100%; max-width: 150px; display: inline-block; text-align: center;}
.lowerBarMobile ul li h2{font-family:'Brandon Grotesque Bold'; font-size: 13px; text-transform: uppercase; width: 100%; float: left; margin: 10px 0;}
.lowerBarMobile ul li:last-child .imgBx{ position: relative; z-index: 1001;}


.hintpopup{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); display: none; z-index: 1000;}
.hintpopup .timerhint{ position: absolute; right: 7%; top: 20px; width: 200px; }
.hintpopup .dealshint{ position: absolute; right: 7%; bottom: 15%;}

.hintpopup .mainhint{ width: 60%; display: inline-block; vertical-align: middle; margin: 15% 0 0;}
.hintpopup .mainhint div.hintone{ display: inline-block; vertical-align: top; width: 40%; border-right: 1px solid #fff; padding: 20px 0 0;}
.hintpopup .mainhint div.hinttwo{ display: inline-block; vertical-align: top; width: 40%;  padding: 20px 0 0;}

.hintpopup .closehint{ padding: 10px 25px; text-transform: uppercase; background: #fff; font-size: 15px; color: #000; font-family:'Brandon Grotesque Bold'; position: absolute; right: 0; bottom: 0;}
.hintpopup .closehint a{ display: block;}
.hintpopup img{ max-width: 100%;}


a.loading{ background: url(../images/loading.jpg) repeat 0 0 !important;  -webkit-animation: slide 20s linear infinite;}
@-webkit-keyframes slide {
    from { background-position: 0 0; }
    to { background-position: -400px 0; }
}

.ImageWrapper {text-align:center;width:100%;height:100vh;overflow:hidden;}
.viewport{height:100% !important;max-height:100vh;}
#ZoomImage1, #ZoomImage2 {width:100%;}
.leaflet-container{ background: url(../images/screen2_bg.jpg) no-repeat center center / cover !important;}
.leaflet-control-container{ display: none;}


.dealScreen{ opacity: 0; width: 100%; height: 100vh; float: left; background: url(../images/screen2_bg.jpg) no-repeat center center; background-size: cover;}
.dealScreen .innerCnt{ position: relative; width: calc(100% - 9px); display: inline-block; vertical-align: middle;}

.dealScreen .innerCnt .dealpopup{ width: 100%; padding: 0 100px; display: inline-block; vertical-align: middle; position: relative;}
.dealScreen .innerCnt .dealpopup .inner{ width: 90%; display: inline-block; background: url(../images/dealpopbg.png) no-repeat bottom center; padding: 15px 0 0; background-size: 100% auto;}
.dealScreen .innerCnt .dealpopup .inner .pop{ background: #fff; border-radius:15px; width: 80%; display: inline-block; padding: 50px 0 0; overflow: hidden;}
.dealScreen .innerCnt .dealpopup .inner .pop h1{ font-size: 40px; color: #e43d15; width: 100%; float: left; margin: 0 0 30px;}
.dealScreen .innerCnt .dealpopup .inner .pop p{ font-size: 20px; color: #000; width: 100%; float: left; margin: 0 0 30px; font-family:'Brandon Grotesque Bold';}

.dealScreen .innerCnt .dealpopup .inner .fish{ width: 90px; position: absolute; left: 0; bottom: 0;}
.dealScreen .innerCnt .dealpopup .inner .fish img{ max-width: 100%;}
.dealScreen .innerCnt .dealpopup .inner .boat{ width: 100px; position: absolute; right: 5%; bottom: 0;}
.dealScreen .innerCnt .dealpopup .inner .boat img{ max-width: 100%;}
.dealScreen .innerCnt .dealpopup .inner .parachute{ z-index: 1; position: absolute; right: 40%; top: -70px; width: 70px;}
.dealScreen .innerCnt .dealpopup .inner .parachute img{ max-width: 100%;}

.dealScreen .innerCnt .dealList{ width: calc(40% - 4px); max-width: 575px; display: inline-block; vertical-align: middle; padding: 40px 50px;}
.dealScreen .innerCnt ul{ width: 100%; float: left;}
.dealScreen .innerCnt ul li{ width: calc(50% - 63px); float: left; margin: 0 30px 15px; background: #fff; border: 1px solid #d5d5d5;}
.dealScreen .innerCnt ul li div.imgbox{width: calc(40% - 2px); display: inline-block; vertical-align: middle; height: 150px;}
.dealScreen .innerCnt ul li div.imgbox img{ max-width: 100%;}
.dealScreen .innerCnt ul li .cnt{width: calc(60% - 2px); display: inline-block; vertical-align: middle; padding: 15px; text-align: left;} 
.dealScreen .innerCnt ul li .cnt h2{ font-size: 18px; color: #e43d15; width: 100%; float: left; margin: 0 0 10px;}
.dealScreen .innerCnt ul li .cnt span{ font-size: 13px; font-family: 'Open Sans', sans-serif; color: #000; width: 100%; float: left; text-transform: uppercase; margin: 0 0 10px;}
.dealScreen .innerCnt ul li .cnt p.test{ font-size: 12px; font-family:'Brandon Grotesque Bold'; color: #000; width: 100%; float: left; text-transform: uppercase; margin: 0 0 10px;}
.dealScreen .innerCnt ul li .cnt a{ font-size: 12px; font-family:'Brandon Grotesque Bold'; color: #fff; width: auto; float: left; text-transform: uppercase; padding: 5px 10px; background: #e43d15;}
.dealScreen .innerCnt .dealpopup .inner .pop ul li .cnt p.test{ font-size: 12px; font-family:'Brandon Grotesque Bold'; color: #000; width: 100%; float: left; text-transform: uppercase; margin: 0 0 10px;}

.dealScreen .innerCnt .dealpopup .inner .pop .dealfooter{ background: #f4f3f3; padding: 40px 0; width: 100%; float: left; margin: 40px 0 0;}
.dealfooter span{ font-size: 25px; display: inline-block; vertical-align: middle; margin: 0 15px 0 0;}
.dealScreen .innerCnt .dealpopup .inner .pop a.button{ max-width:450px; width: auto; background:#e43d15; border-radius: 40px; font-size: 25px; color: #fff; padding: 10px 50px; display: inline-block; opacity: 1; margin: 0 0 0 15px;}


.winnerScreen{ width: 100%; float: left; background: url(../images/winnerBg.jpg) no-repeat top center; padding: 200px 0 100px;}
.winnerLogo{ width: 100%; padding: 100px; display: inline-block; background: url(../images/glow.png) no-repeat center center; background-size: auto 100%; }
.winnerLogo img{ width: 270px;}

.grandWinnerList{ width: 100%; max-width: 1200px; display: inline-block; margin: 80px 0 0;}
.grandWinnerList h1.title{ width: 100%; max-width: 600px; display: inline-block; position: relative;}
.grandWinnerList h1.title span{font-size: 45px; color: #ff3d31;  display: inline-block; background: url(../images/grandWinnerTitle.png) no-repeat center center; height: 40px; line-height: 40px; background-size: 100% 100%; padding: 10px 30px;   position: relative; z-index: 2;}
.grandWinnerList h1.title:after{ content: ""; width: 100%; position: absolute; left: 0; top: calc(50% - 2px); height: 2px; background: #fff; }

.grandWinnerList ul{ width: 100%; float: left; margin: 50px 0 0;}
.grandWinnerList ul li{ width: calc(33.3% - 103px); display: inline-block; vertical-align: middle; background: url(../images/glow.png) no-repeat center center; background-size: auto 100%;}
.grandWinnerList ul li .imgBx{ width: 300px; height: 300px; display: inline-block; border-radius: 50%; overflow: hidden;}
.grandWinnerList ul li .imgBx img{ width: 100%;}
.grandWinnerList ul li h1{ font-family: 'Open Sans', sans-serif; font-size: 22px; color: #fff; letter-spacing: 0.5px; background: url(../images/winnerNameBg.png) no-repeat center center; background-size: 100% auto; padding: 5px 30px; margin: -40px 0 0; position: relative; width: auto; display: inline-block; }
.grandWinnerList ul li h2{ font-family: 'Open Sans', sans-serif; font-size: 17px; color: #000; position: relative; margin: 5px 0 0;}



.winnerList{ width: 100%; max-width: 1200px; display: inline-block; margin: 80px 0 0;}
.winnerList h1.title{ width: 100%; display: inline-block; position: relative;}
.winnerList h1.title span{font-size: 30px; color: #fff;  display: inline-block; background: url(../images/winnerNameBg2.png) no-repeat center center; height:30px; line-height: 30px; background-size: 100% 100%; padding: 10px 30px;   position: relative; z-index: 2; font-family:'Brandon Grotesque Bold';}
.winnerList h1.title:after{ content: ""; width: 100%; position: absolute; left: 0; top: calc(50% - 2px); height: 2px; background: #fff; }
.winnerList ul{ width: 100%; float: left; margin: 50px 0 0;}
.winnerList ul li{ width: calc(33.3% - 103px); display: inline-block; vertical-align: middle;}
.winnerList ul li .imgBx{ width: 200px; height: 200px; display: inline-block; overflow: hidden;}
.winnerList ul li .imgBx img{ width: 100%;}
.winnerList ul li h2{ font-family:'Brandon Grotesque Bold'; font-size: 22px; color: #fff; position: relative; margin: 5px 0 0;}

.winnerScreen .slick-dots{ margin: 0; bottom: -40px;}