body {
  font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-style: normal;
  font-size:100%;
  line-height:1em;
  margin:0px;
  padding:0px;  
  background: url(../assets/base/background_tile_blue.jpg);
  background-size:contain;
  overflow-x: hidden;
}
body.preload,
body.exit-bumper-open {
  overflow:hidden;
}

a {
  text-decoration:none;
}

.full-container {
  width:100%;  
  position:relative;
}
.container {
  width:100%;  
  margin:0 auto;
  /*padding:0px;*/
  position:relative;
  /*
  padding-left:10px;
  padding-right:10px;
  */
}
.img-responsive {
  max-width:100%;
}

.icon-rollover-btn-wrapper,
.rollover-btn-wrapper {
  position:relative;
  cursor:pointer;
}
/*.icon-rollover-btn,*/
.rollover-btn {
  transition: all 0.5s;
}
.rollover-btn {
  width:100%;
}
.icon-rollover-btn.on,
.rollover-btn.on {
  opacity:0;
  position:absolute;
  top:0px;
  left:0px;
}
.icon-rollover-btn-wrapper.active .icon-rollover-btn.on,
.rollover-btn-wrapper.active .rollover-btn.on {
  opacity:1;
}

#body-wrapper {
  position:relative;
  overflow:hidden;  
  /*min-height:500px;*/
}

#header-snowflake,
#overlay-header-snowflake {
  width:100%;
  height:auto;
  background:url(../assets/base/header_snowflakes.png) repeat-x;
  background-size:contain;
  position:absolute;
  top:0px;
  left:0px;
  z-index:2;
}
#header-snowflake img,
#overlay-header-snowflake img {
  visibility: hidden;
}

#main {  
  position:relative;
  margin-top:10%;
  text-align:center;
  background-color:#fff;
}
#main-wrap {
  width:100%;
  position:relative;
  color:#fff;
}
#main-wrap a,
#main-wrap a:visited,
#main-wrap a:hover {
  color:#fff;
}
#main-content-header,
#main-content {
  box-sizing: border-box;
  padding:0px 45px 45px 45px;
  width:100%;
  position:relative;
}
#main-content-header {
  padding-top:45px;
  padding-bottom:0px;
}
#main-header-mobile {
  display:none;
}
#main-top-border,
#main-bottom-border {
  width:100%;
  height:25px;
  background:url(../assets/base/border_horizontal.jpg) center center repeat-x;   
}
#main-left-border,
#main-right-border {
  width:25px;
  height:100%;
  background:url(../assets/base/border_vertical.jpg) center center repeat-y;  
}
#main-top-border {
  position:absolute;
  top:0px;
}
#main-bottom-border {
  position:absolute;
  bottom:0px;
}
#main-left-border {
  position:absolute;
  left:0px;
}
#main-right-border {
  position:absolute;
  right:0px;
}

#main-header {
  margin:0px 0px 20px 0px;
}
#main-header .main-return {
  display:none;
  cursor: pointer;
}

#main-header .main-return.active {
  display:inline-block;
}

/* Nav
############################ */
#nav-container {
  margin:0px 0px 20px 0px;
}
.main-nav-item.selected {
  opacity: 0.5;
}
#nav-gift,
#nav-video {
  width:374px;
  height:48px;
  display:inline-block;
}

#gift-container,
#videos-container {
  flex-direction: row;
  flex-wrap: wrap;  
  justify-content:space-evenly;
  align-items:center;
  align-content:flex-start;
  position:relative;
  display:none;
}
#gift-container.active,
#videos-container.active {
  display:flex;  
}
.gift-item-wrap,
.video-item-wrap {
  width: 100%;  
  position:relative;
  text-align:center;  
  margin-bottom:15px;
  box-sizing: border-box;
}
.gift-text,
.video-text {
  width: 100%;
  position:absolute;
  bottom:11%;
  text-align:center;
}
.video-btn {
  width:78px;
  height:78px;
  position:absolute;
  top:10%;
  right:7%;
}

/* Tiles
############################ */
#calendar-container {
  display:flex;  
  flex-direction: row;
  flex-wrap: wrap;  
  justify-content:flex-start;
  align-items:center;
  align-content:flex-start;
}
.calendar-tile-wrap {
  width:164px;
  height:164px;  
  position:relative;
}
body.small-screen .calendar-tile-wrap {
  width:84px;
  height:84px;  
}
.calendar-tile-wrap.clickable {
  cursor: pointer;
}
.calendar-tile-wrap-sparkle {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}

/* Footer
############################ */
#footer-graphic-container {
  width:100%;
  position:relative;
  margin-top:-35px;
  text-align: center;
  z-index:2;
}
.footer-graphic-item img {
  display:block;
  margin: 0 auto;
}
#footer-snow {
  width:100%;
  height:97px;
  background:url(../assets/base/footer_snow.png) center bottom repeat-x;
  background-size:cover;
  position:absolute;
  bottom:0px;
  left:0px;
  z-index:3;
  color:#093170;
  font-size:0.8em;
}
#footer-snow a,
#footer-snow a:visited,
#footer-snow a:hover {
  color:#093170;
}
#footer-legal {
  position:relative;
  top:55px;
  text-align:center;
}

/* Preload
############################ */
#preload-container {  
  width:100%;
  height:100%;
  overflow:hidden;
  position:fixed;
  top:0px;
  left:0px;
  z-index:9999;
  background-color:#062f6e;
  background-size: 80px 80px;
  font-size:1em;
  line-height:2em;
}
#preload-container.hidden {
  display:none;
}
#preload-gif {
  position: absolute;
  top:50%;
  left:50%;
  margin-left:-100px;
  margin-top:-130px;
  width:200px;
  height:200px;
  color: #e3be25;
  text-align:center;
}
#preload-gif img {
  display:block;
}
#preload-progress {
  /*
  position: absolute;
  top:50%;
  left:50%;
  margin-left:-60px;
  margin-top:-60px;
  width:120px;
  height:20px;
  color: #fff;
  text-align:center;
  */
}

/* exit Bumper 
************************************** */
#exit-bumper-container {
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  left:0px;
  display:flex;  
  justify-content:center;
  align-items: center;  
  display:none;
  z-index: 9999;  
}
.exit-bumper-open #exit-bumper-container{
  display:flex;
}
#exit-bumper-bg{
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  background-color:#062f6e;  
  opacity: 0.85;
  display:none;  
}
.exit-bumper-open #exit-bumper-bg{
  display:block;
}
#exit-bumper-content {
  width:100%;   
  background:url(../assets/base/exit_stripe.png) repeat-x;
  background-size:cover;
  color:#fff;
  padding:0px;
  text-align:center;    
  position:relative;  
}
#exit-bumper-text {
  padding-top: 50px;
  padding-bottom: 20px;
  font-size:1.3em;
  line-height:1.4em;
}
#exit-bumper-btn {
  padding-bottom:50px;  
  display: flex;
  justify-content: center;  
}
.exit-btn {
  width:274px;
  margin:0px 10px;
}

/* overlay
************************************** */
#overlay-container{
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:999;
  box-sizing: border-box;
  padding: 0px 20px;
  display:none;
}
#overlay-container.active{
  display:block;
}
#overlay-container .container{
  text-align:center;
}
#overlay-bg {
  width:100%;
  height:100%;
  position:fixed;
  top:0px;
  left:0px;
  background: url(../assets/base/background_tile_green.jpg);
  background-size:contain;
}
#overlay-header {
  display:flex;
  justify-content:center;
  align-items: flex-start;
  position:relative;
  top:0px;
  margin-top:60px;
  margin-bottom:30px;
  z-index:3;
}
#overlay-closebtn {
  width:108px;
  height:108px;
  position:absolute;
  right:0px;
}
#overlay-content-closebtn {
  width:30px;
  height:30px;
  position:absolute;
  top: -15px;
  right: -15px;
  z-index:9;
  display:none;
}
#overlay-content {
  background-color:#fff;
  box-sizing: border-box;
  padding:15px;
  text-align: center;
  position:relative;
  top:0px;
  display: inline-block;
}
#overlay-content img.overlay-image {
  border: 15px solid #f1544b;
  box-sizing: border-box;
}

/* Cube
*************************************/
#cubeContainer{
  position:absolute;
  top:0px;
  left:0px;
  z-index:997;
}
#cubeContainer.active{
  display:block;
}
#cubeParent{
  height:1000px;
  width:1000px;
  position:relative;
}
.cubeFace{
  cursor: pointer;
}
#cubeContentBG,
#cubeContent,
.cubeFace{
  height:1000px;
  width:1000px;
  position:absolute;
}
#face1{
  background: url(../assets/giftbox/gift_frontside.jpg) no-repeat;
  background-size:contain;
}
#face2{
  background: url(../assets/giftbox/gift_backside.jpg) no-repeat;
  background-size:contain;
}
#face3{
  background: url(../assets/giftbox/gift_leftside.jpg) no-repeat;
  background-size:contain;
}
#face4{
  background: url(../assets/giftbox/gift_rightside.jpg) no-repeat;
  background-size:contain;
}
#face5{
  background: url(../assets/giftbox/gift_top.jpg) no-repeat;
  background-size:contain;
}
body.mobile #face5 {
  background: url(../assets/giftbox/gift_top_mobile.jpg) no-repeat;
  background-size:contain;
}
#face6,
#cubeContentBG{
  background: url(../assets/giftbox/gift_bottom.jpg) no-repeat;
  background-size:contain;
}

.explosion {
  position: absolute;
  width: 1000px;
  height: 1000px;
  pointer-events: none;
  z-index:998;
}
.explosion .particle {
  position: absolute;
  width: 100px;
  height: 100px;
  background: url(../assets/giftbox/sparkle.png) center no-repeat;
  background-size:contain;
  animation: pop 0.7s reverse forwards;
  transition-timing-function: ease-in;
}

@keyframes pop {
  
  0%   {opacity: 0;}  
  10%  {opacity: 0.4;}
  15%  {opacity: 0.6;}
  25%  {opacity: 0.7;}
  50%  {opacity: 0.8;}
  75%  {opacity: 0.9;}
  100% {
    top: 50%;
    left: 50%;
    margin-left:-50px;
    margin-top:-50px;
    opacity: 1;
  }
  
  /*
  from {
    opacity: 0;
  }
  to {
    top: 50%;
    left: 50%;
    margin-left:-50px;
    margin-top:-50px;
    opacity: 1;
  }
  */
}

@keyframes blinker {
  50% {
    opacity: 0.4;
  }
}

/*
Media Queries
######################### */
@media (min-width: 480px) {
  .container {
    width: 450px;
  }    
}

@media (min-width: 768px) {
  .container {
    width: 728px;
  }
}

@media (max-width: 991px) {
  
}

@media (min-width: 992px) {
  .container {
    width: 962px;
  }
}

@media (min-width: 1260px) {
  .container {
    width: 1240px;
  }
}

@media (max-width: 1260px) {
  #calendar-container {    
    justify-content:center;
  }
}

@media (max-width: 992px) {
  
}
@media (max-width: 768px) {  
  #overlay-content-closebtn {
    display:block;
  }
  #overlay-closebtn {
    display:none;
  }
  .exit-btn {
    width:180px;
  }
  
}
@media (max-width: 500px) {
  #overlay-content img.overlay-image {
    border: 7px solid #f1544b;
  }
  #overlay-content {
    padding:7px;
  }
  #overlay-header {
    margin-top:20px;
  }
  #header-snowflake, #overlay-header-snowflake {
    height:60px;
    background: url(../assets/base/header_snowflakes.png) repeat-x;    
    background-size:cover;
  }
  #main {
    margin-top:15%;
  }
  #main-top-border, #main-bottom-border {
    height: 13px;
    background: url(../assets/base/border_horizontal.jpg) center center repeat-x;
    background-size: contain;
    z-index:1;
  }
  #main-left-border, #main-right-border {
    width: 13px;
    background: url(../assets/base/border_vertical.jpg) center center repeat-y;
    background-size: contain;
    z-index:1;
  }
  #main-content-header{
    padding:45px 0px 0px 0px;     
  }
  #main-header-mobile {
    display:block;
  }
  #main-header-desktop {
    display:none;
  }
  #nav-gift, #nav-video {
    width: 230px;
    height:auto;
  }  
  #footer-snow{
    height:57px;
  }
  #footer-legal {
    top: 25px;
    font-size: 0.8em;
    line-height: 1.3em;
  }
  .exit-btn {
    width:130px;
  }
  .video-btn {
    width:48px;
    height:48px;
  }
  
}
@media (max-width: 480px) {
  .container {
    width:100%;
    padding-left:0px;
    padding-right:0px;
  }
}