@charset "UTF-8";
/* CSS Document */
/***************************************************
	Main Background
***************************************************/
 .main-banner {
  position: relative;
  background: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/main-bg.png'), #333;
  height: 900px;
  padding-top: 130px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 1;
}
 .main-banner .dgov-grid {
  height: 100%;
}

#body {
    overflow: hidden;
}
/***************************************************
	TITLE
***************************************************/
 .title {
  transform: translate(0, 20%);
justify-content: center;
}
 .title h1 {
  display: block;
  color: #FFF;
  text-align: center;
line-height: .8;
}
 .title h1 .first-line {
  font-family: 'Style Script';
  font-size: 75px;
}
 .title h1 .second-line {
  font-family: 'Archivo Black';
  font-size: 90px;
}
 .title h1 .third-line {
  font-family: 'Style Script';
  font-size: 60px;
}

.title h1 .instructions {
  font-family: 'Archivo Black';
  font-size: 20px; 
    text-transform:uppercase;
}

.social-top {
    display: flex;
    justify-content: center;
}

h1 .instructions {
color: #b2b0b1; font-size: 18px; top: 10px; position: relative;
}

#holiday .fa .fas {
    color: white;
}
#holiday .fa.fa-facebook, #holiday .fa.fa-x-twitter { 
color: white;
    font-size: 25px;
}
#holiday .fa.fa-facebook { 
padding-right: 20px;
}

#holiday .fa.fa-facebook:hover {
    color:#3b5998;
}
#holiday .fa.fa-x-twitter:hover {
    color:#00aced;
}


/***************************************************
	Fireplace
***************************************************/
.fireplace {
  position: absolute;
  width: 300px;
  height: 250px;
  bottom: -4%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/fireplace/fireplace-fire.png');
  background-size: cover;
  z-index: 3;
}
.wreath {
  position: absolute;
  width: 150px;
  height: 150px;
  bottom: 150%;
    left: 24%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/fireplace/wreath.png');
  background-size: cover;
  z-index: 6;
}

.fireplace a img:hover {
    max-width: 91%; 
    left: 5%;
    transition: .3s ease-in-out;
}
.fireplace a img{
    position: absolute; bottom: 65%; max-width: 80%; left: 10%;
transition: .3s ease-in-out;}

/***************************************************
	Countdown Timer
***************************************************/
.timer-box {
  display: flex!important;
  margin-left: auto!important;
  margin-right: auto!important;
  transform: translate(0,-272%)!important;
}
.timer-title {
  position: absolute;
    font-family: 'Archivo Black';
    font-size: 16px;
    color: #FFF;
    text-align: center;
    background-color: #146400;
    padding: 2px;
    width: 100%;
    text-transform: uppercase;
    border-radius: 20px;
}

#timer {
    font-family: 'Style Script';
    font-weight: 600;
    margin: 0;
    color: #FFF;
    font-size: 30px;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    transform: translate(0, 120%);
        margin-left: auto;
    margin-right: auto;
}
/***************************************************
	Stockings
***************************************************/
 .facebook {
  position: absolute;
  width: 45px;
  height: 80px;
  bottom: 60%;
  left: 35%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/fireplace/facebook.png');
  background-size: cover;
  z-index: 7;
}
 .twitter {
  position: absolute;
  width: 45px;
  height: 80px;
  bottom: 60%;
    left: 51%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/fireplace/twitter.png');
  background-size: cover;
  z-index: 8;
}
 .share {
  position: absolute;
  width: 45px;
  height: 80px;
  bottom: 60%;
  left: 60%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/fireplace/share.png');
  background-size: cover;
  z-index: 9;
    display: none;
}

.gentle-hover-shake:hover {
    animation: swing ease-in-out .8s infinite alternate;
    transform-origin: center -20px;
    float: left;
}
@keyframes swing {
	0% {
		transform: rotate(0deg);
	}
    50% {
		transform: rotate(3deg);
	}
	100% {
		transform: rotate(-3deg);
	}
}
/***************************************************
	Snowy Window
***************************************************/
.window {
  position: absolute;
  width: 220px;
  left: 55%;
  top: 20%;
}
.frame {
  position: absolute;
  width: 220px;
  height: 240px;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/window/window.png');
  background-size: cover;
  z-index: 5;
}
#snow-target {
  position: absolute;
  height: 225px;
  width: 170px;
  background: #1e3a6d;
  overflow: hidden;
  z-index: 4;
  left: 10%;
  top: 5px
}
/***************************************************
	Chair
***************************************************/
.chair {
    position: absolute;
    width: 300px;
    height: 600px;
    left: 50%;
    bottom: -76%;
    background-image: url(/Portals/1/SANDBOXES/ANielsen/HolidayTroops/chair.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 9;
}
/***************************************************
	Presents
***************************************************/
.presents {
}

.hover-title-text {
	visibility: hidden;
    background-color: #fff;
    width:100%;
    color: rgb(35, 119, 35);
    font-size: 17px;
    font-weight: bold;
    text-align: center;
    border-radius: 6px;
    padding: 8px 10px;
    position: absolute;
    z-index: 199;
    top: 100%;
}

a:hover .hover-title-text {
	visibility: visible;
}

.present1 {
  position: absolute;
  width: 120px;
  height: 155px;
--p1width: 120px;
--p1height: 155px;
  left: 5%;
  top: -34%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/Presents/Present1-purple.png');
  background-size: cover;
  z-index: 92;
}
.present2 {
  position: absolute;
  width: 120px;
  height: 175px;
--p2width: 120px;
--p2height: 175px;
  left: 13%;
  top: -43%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/Presents/Present2-yellow.png');
  background-size: cover;
  z-index: 92;
}
.present3 {
  position: absolute;
  width: 140px;
  height: 133px;
--p3width: 140px;
	--p3height: 133px;
  left: 21%;
  top: -24%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/Presents/Present3-red.png');
  background-size: cover;
  z-index: 93;
}
.present4 {
  position: absolute;
  width: 120px;
  height: 155px;
--p4width: 120px;
	--p4height: 155px;
    left: 39%;
  top: -36%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/Presents/Present4-pink.png');
  background-size: cover;
  z-index: 94;
}
.present5 {
  position: absolute;
  width: 120px;
  height: 175px;
--p5width: 120px;
--p5height: 175px;
  left: 31%;
  top: -39%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/Presents/Present5-green.png');
  background-size: cover;
  z-index: 95;
}
.present6 {
  position: absolute;
  width: 140px;
  height: 130px;
--p6width: 140px;
--p6height: 130px;
  left: 48%;
  top: -22%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/Presents/Present6-blue.png');
  background-size: cover;
  z-index: 96;
}
.present7 {
  position: absolute;
  width: 120px;
  height: 155px;
--p7width: 120px;
--p7height: 155px;
  
    left: 66%;
  top: -30%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/Presents/Present7-green.png');
  background-size: cover;
  z-index: 97;
}
.present8 {
  position: absolute;
  width: 120px;
  height: 175px;
--p8width: 120px;
--p8height: 175px;
  left: 58%;
  top: -34%;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/Presents/Present8-red.png');
  background-size: cover;
  z-index: 98;
}


/***************************************************
	PRESENTS SHAKE
***************************************************/
.shake {
  animation: jump-shaking 0.83s;
  animation-duration: 1s;
  animation-delay: 1s;
}
@keyframes jump-shaking {
  0% {
    transform: translateX(0)
  }
  25% {
    transform: translateY(-9px)
  }
  35% {
    transform: translateY(-9px) rotate(17deg)
  }
  55% {
    transform: translateY(-9px) rotate(-17deg)
  }
  65% {
    transform: translateY(-9px) rotate(17deg)
  }
  75% {
    transform: translateY(-9px) rotate(-17deg)
  }
  100% {
    transform: translateY(0) rotate(0)
  }
}


/***************************************************
	MODALS
***************************************************/
.modal-dialog {
		width: 100% !important;
		max-width: 900px !important;
	}

.modal-header h3{
    text-align: center;
    font-family: 'Archivo Black';
}

.modal-header .close{
    margin: -75px -70px -10px -50px;
}

.close {
    font-size: 50px;
    color: #fff;
    opacity: 100%;
    
}

.modal-body h3{
    text-align: center;
    font-family: 'Archivo Black';
}

.modal-body p {
    margin: 20px 10px;  
}

.modal-body video {
    width: 100%;
}

.modal-body img {
    width: 100%;
    heigh: 250px;
}

.modal-body .smallimg img {
    width: 30%;
}

.modal-footer {
   position: absolute;
  width: 1000px;
  height: 300px;
  background-image: url('/Portals/1/SANDBOXES/ANielsen/HolidayTroops/Presents/modal-present.jpg');
  background-size: cover;
  z-index: 9999;
    
}

 .btn-red {
     border: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    outline: none;
    position: relative;
    background: #cb4e4e;
    color: #fff;
    box-shadow: 0 6px #ab3c3c;
    transition: none;
margin: auto;
display: block;
width: fit-content;
}

 .btn-red a {
color: #fff;
}

.dgov-col-md-6 a:hover img {
		opacity: 0.7;
		
	}

.modal-body .timer-boxpopup {
    display: flex;
    justify-content: center;
    
}
.modal-body #timerpopup {
    font-family: 'Style Script';
    font-weight: 600;
    font-size: 30px;
    letter-spacing: 1px;
}


/***************************************************
	RESPONSIVE
***************************************************/
@media (max-width: 1200px) {
.modal-dialog {
    width: 900px;
    margin: 30px auto;
    }
	
 .title {
  transform: translate(0, 50%);
}
 .title h1 .first-line {
  font-size: 60px;
}
 .title h1 .second-line {
  font-size: 60px;
}
 .title h1 .third-line {
  font-size: 50px;
}
.hover-title-text {
	visibility: hidden;
    width:100%;
    font-size: 15px;
    border-radius: 6px;
    padding: 4px 7px;
    position: absolute;
    z-index: 199;
    top: 100%;
}		
.present1 {
  left: 6%;
    top:-20%;
}
.present2 {
  left: 16.5%;
    top:-26%;
}
.present3 {
  left: 27%;
    top:-10%;
}
.present4 {
  left: 39%;
    top:-20%;
}
.present5 {
  left: 50%;
    top:-26%;
}
.present6 {
  left: 61%;
    top:-10%;
}
.present7 {
	left: 73%;
    top:-20%;
}
.present8 {
	left: 83.5%;
    top:-26%;
}
.chair{
	top:-80%;
	left: 50%;
}
    .fireplace {
        bottom:-11%;
    }
}

@media (max-width: 992px) {
.modal-dialog {
    width: 100% !important;
		max-width: 90% !important;
    }
 .main-banner {
			overflow: visible;
			background-size: 100% 101%;
		}
	
 .title {
	transform: translate(0, 0%);
	height:280px;
    top:-5%;
	position:relative;
    
}
.fireplace {
	position:relative;
	top: 0;
	transform: translate(0, 10px);
	margin-left: auto;
	margin-right: auto;
}
.wreath {
	display:none
}
.window {
	display:none
}
.chair {
	display:none	
}
.present1 {
top: 200%;
	left: 5%;
	}
		
		.present2 {
			top: -70%;
			left: 5%;
		}
		
		.present3 {
			top: -19%;
			left: 30%;
		}
		
		
		.present4 {
			top: 198%;
			left: 30%;
		}
		
		.present5{
			top: -71%;
			left: 55%;
		}
		
		.present6 {
			top: -14%;
			left: 80%;
		}
		
		.present7 {
			top: 207%;
			left: 55%;
		}
		
		.present8 {
			top: 191%;
			left: 80%;
		}
    .mobile-spacer {
			display: block;
    background: #907882;
    height: 400px;
    width: 100%;
    z-index: -1;
    position: relative;
		}
    
.hover-title-text {
	visibility: visible;
}
}

@media (max-width: 768px) {
.modal-dialog {
    width: 800px;
    margin: 30px auto;
}

 .title {
	height:5%;
	line-height: .8;
}
    .title h1 .instructions {
    font-size: 15px;
    }

.fireplace {
	top: 0;
	transform: translate(0%, 10%);
	z-index: 10;
}
.wreath {
	display:none;
}
.window {
	display:none;
}
.chair {
	display:none;
}
/* top layer */
/* yellow tall */.present2 {
	width: calc(var(--p2width) - 2%);
	height: calc(var(--p2height) - 2%);
}
/* red wide*/.present3 {
	width: calc(var(--p3width) - 2%);
	height: calc(var(--p3height) - 2%);
	
}
/* green tall */.present5 {
	width: calc(var(--p5width) - 2%);
	height: calc(var(--p5height) - 2%);
	
}
/* blue wide */.present6 {
	width: calc(var(--p6width) - 2%);
	height: calc(var(--p6height) - 2%);
	
}

/* bottom  layer */
/* purple */.present1 {
	width: calc(var(--p1width) - 1%);
	height: calc(var(--p1height) - 2%);
	
}

/* pink */.present4 {
	width: calc(var(--p4width) - 1%);
	height: calc(var(--p4height) - 2%);
	
}	

/* green small */.present7 {
	width: calc(var(--p7width) - 2%);
	height: calc(var(--p7height) - 2%);
}
/* red big */.present8 {
	width: calc(var(--p8width) - 2%);
	height: calc(var(--p8height) - 12%);
	
}
}

@media (max-width: 500px) {
    
.modal-dialog {
    width: 450px;
    margin: 30px auto;
}

 .title {
	transform: translate(0, -15%);
	height:200px;
	position:relative;
}	
 .title h1 .first-line {
  font-size: 50px;
}
 .title h1 .second-line {
  font-size: 55px;
}
 .title h1 .third-line {
  font-size: 45px;
}
    h1 .instructions {
        font-size: 16px;
    }

/* top layer */
/* yellow tall */.present2 {
	width: calc(var(--p2width) - 25px);
	height: calc(var(--p2height) - 40px);
	left: 5%;
    top: calc( -180px + 100px);	
}
/* red wide*/.present3 {
	width: calc(var(--p3width) - 20px);
	height: calc(var(--p3height) - 10px);
	left: 36%;
    top: calc( -170px + 100px);
}
/* green tall */.present5 {
	width: calc(var(--p5width) - 30px);
	height: calc(var(--p5height) - 40px);
	left: 72%;
    top: calc( -180px + 100px);
}
/* blue wide */.present6 {
	width: calc(var(--p6width) - 20px);
	height: calc(var(--p6height) - 10px);
	left: 34%;
    top: calc( -50px + 100px);
	z-index:99;
}

/* bottom  layer */
/* purple */.present1 {
	width: calc(var(--p1width) - 40px);
	height: calc(var(--p1height) - 30px);
	left: 18%;
    top: calc( -120px + 100px);
	z-index:98;
}

/* pink */.present4 {
	width: calc(var(--p4width) - 35px);
	height: calc(var(--p4height) - 20px);
	left: 60%;
    top: calc( -120px + 100px);
	z-index:98;
}	

/* green small */.present7 {
	width: calc(var(--p7width) - 40px);
	height: calc(var(--p7height) - 35px);
	left: 5%;
    top: calc(-40px + 100px);
	z-index:99;
}
/* red big */.present8 {
	width: calc(var(--p8width) - 25px);
	height: calc(var(--p8height) - 40px);
	left: 70%;
    top: calc( -50px + 100px);
}	
    
.hover-title-text {
			visibility: hidden;
		}
		
		.mobile-spacer {
			height: 150px;
		}
.modal-header .close{
     margin: -52px -9px -10px -24px;
}
    .modal-header h3 {
        font-size: 26px;}

.close {
    font-size: 32px;
    color: #333;
    opacity: 100%;
    
}
    #body {overflow: hidden;}
    .main-banner {padding-top: 150px;}
}