/*------------------------------------------------------------------
Project:    Christmas Landing Page

[Table of contents]

1. GENERAL CLASSES
2. LOADER
3. PARALLAX CONTAINER
4. PARALLAX PHOTOS
5. CHRISTMAS TREE
6. E-MAIL POLE
7. COUNTDOWN CONTAINER
8. MERRY CHRISTMAS TEXT
9. HAPPY NEW YEAR PHOTO
10. E-MAIL FORM
11. SOCIAL ICONS
-------------------------------------------------------------------*/

/* 1. GENERAL CLASSES */
body {
	padding: 0;
	margin: 0;
	font-family: 'Lobster', cursive;
	font-size:30px;
	color:#fff;
}
.padding-none{
	padding-left:0;
	padding-right:0;
}
.padding-half{
	padding-left:7px;
	padding-right:7px;
}
.text-small{
	font-size:20px;
}
.text-large{
	font-size:60px;
}
.left{
	float: left;
}
.right{
	float:right;
}
div[class*='col-']{
	position: relative;
}
form input{
	border-left:0;
	border-right: 0;
	border-top:0;
	border-bottom:2px solid #EF5241;
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	min-width:150px;
}
form textarea{
	border-left:0;
	border-right: 0;
	border-top:0;
	border-bottom:2px solid #EF5241;
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	min-width:350px;
}
form input::-webkit-input-placeholder, 
form textarea::-webkit-input-placeholder{
	color: #EF5241;
}
form input:-moz-placeholder, 
form textarea:-moz-placeholder {
	color: #EF5241;  
}
form input::-moz-placeholder, 
form textarea::-moz-placeholder {
	color: #EF5241;  
}
form input:-ms-input-placeholder, 
form textarea:-ms-input-placeholder {  
	color: #EF5241;  
}
/* END GENERAL CLASSES */

/* 2. LOADER */
#loader{
	background: -webkit-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -o-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -ms-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -moz-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: linear-gradient(to bottom, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	position:fixed;
	overflow:hidden;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	z-index: 99;
}
#loader::after{
	content:'';
	background:url('https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/intro.png');
	background-repeat: no-repeat;
	background-size:contain;
	width:70px;
	height: 70px;
	position: absolute;
	margin-left:-35px;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-animation: snowflake-rotate 2s linear infinite;
	-moz-animation:    snowflake-rotate 2s linear infinite;
	-o-animation:      snowflake-rotate 2s linear infinite;
	animation:         snowflake-rotate 2s linear infinite;
}
@-webkit-keyframes snowflake-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@-moz-keyframes snowflake-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@-o-keyframes snowflake-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
@keyframes snowflake-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
}
/* END LOADER */

/* 3. PARALLAX CONTAINER */
#container.parallax-container {
	position: relative;
	max-width: 2560px;
	margin: 0 auto;
	overflow: hidden;
	background: -webkit-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -o-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -ms-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: -moz-linear-gradient(top, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
	background: linear-gradient(to bottom, rgb(14, 81, 133) 0%, rgb(26, 139, 178) 60%, rgb(33, 159, 193) 100%);
}
#container .christmas-scene{
	padding: 0;
	margin: 0;
}
#container .christmas-scene::before {
	content:'';
	background:url("https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/top-snow-pattern.png");
	background-repeat: repeat-x;
	width: 100%;
	height:35px;
	position: absolute;
	z-index: 10;
	left:0;
	top:0;
}
/* END PARALLAX CONTAINER */

/* 4. PARALLAX PHOTOS */
#christmas_scene .layer{
	width: 100%;
}
#christmas_scene .layer-photo {
	background-position: bottom center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 900px;
}
#christmas_scene .layer-photo.photo-zoom{
	transform: scale(1.05);
}
#christmas_scene .layer-1 {
	background-image: url("https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/parallax/layer1.png");
	background-position: 40% bottom;
}
#christmas_scene .layer-2 {
	background-image: url("https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/parallax/layer2.png");
	background-position: center bottom;
}
#christmas_scene .layer-3 {
	background-image: url("https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/parallax/layer3.png");
	background-position: center bottom;
}
#christmas_scene .layer-4 {
	background-image: url("https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/parallax/layer4.png");
	background-position: center bottom;
}
#christmas_scene .layer-5 {
	background-image: url("https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/parallax/layer5.png");
	background-position: center bottom;
}
/* END PARALLAX PHOTOS */

/* 5. CHRISTMAS TREE */
#container #christmas_tree{
	position: absolute;
	bottom: 35px;
	left: 50%;
}
/* END CHRISTMAS TREE */

/* 6. E-MAIL POLE */
#container #mail_pole{
	position: absolute;
	margin-left:-250px;
	left:50%;
	bottom:50px;
	z-index: 10;
	cursor: pointer;
}
#container #mail_pole img{
	width: 100px;
}
/* END E-MAIL POLE */

/* 7. COUNTDOWN CONTAINER */
#container #countdown_container{
	width:600px;
	position: absolute;
	margin-left:-300px;
	left:50%;
	top:0;
	text-align: center;
	font-size:40px;
	color:#fff;
}
#container #countdown_container .countdown-globe{
	height: 200px;
	text-align: center;
	padding-top:65px;
	line-height: 1.3;
	z-index: 2;
}
#container #countdown_container .countdown-globe div{
	font-size:20px;
}
#container #countdown_container .countdown-globe::after{
	content:'';
	background: url('https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/countdown-globe.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 100%;
	position: absolute;
	left:50%;
	margin-left:-55px;
	top:-40px;
	z-index: -1;
}
/* END COUNTDOWN CONTAINER */

/* 8. MERRY CHRISTMAS TEXT */
#container .merry-christmas-text{
	font-family: 'Parisienne', cursive;
	position: absolute;
	top: 150px;
	width: 100%;
	text-align: center;
	font-size:80px;
	color:#fff;
	/* z-index: 9999;	 */
}
/* END MERRY CHRISTMAS TEXT */

/* 9. HAPPY NEW YEAR PHOTO */
#container .happy-new-year{
	/* background:url('https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/happy-new-year.png'); */
	background-repeat: no-repeat;
	background-size:contain;
	text-decoration: none;
	width: 400px;
	height: 112px;
	position: absolute;
	margin-left:-200px;
	top: 265px;
	text-align: center;
	left: 50%;
	z-index: 1;
}
/* END HAPPY NEW YEAR PHOTO */

/* 10. E-MAIL FORM */
#contact_modal .mail-container{
	width: 900px;
	position: relative;
	padding-bottom:0;
	z-index: 3;
}
#contact_modal .mail-container::after{
	content:'';
	position: absolute;
	left:0;
	right: 0;
	z-index: -1;
	background:url('https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/form-message-pattern.png');
	background-size: contain;
	background-repeat: repeat-x;
	width: 100%;
	height:380px;
}
#contact_modal .mail-container .form-submit-button{
	background:#EF5241;
	color:#fff;
	font-size:20px;
	padding:4px 25px 5px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	position: absolute;
	bottom:5px;
	width: 60%;
	right:45px;
}
#contact_modal .bg-color{
	background:#fffaee;
	color:#EF5241;
	height:350px;
	margin-top:15px;
	padding-top:10px;
	line-height: 1;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
#contact_modal .mail-container input{
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	background: #fffaee;
	font-size:16px;
	margin-top:25px;
	height:32px;
}
#contact_modal .mail-container textarea{
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	background: #fffaee;
	margin-top:20px;
	font-size:16px;
	min-height: 65px;
}
#contact_modal .mail-container img{
	padding-top:35px;
	padding-bottom:50px;
	width: 320px;
}
#contact_modal .modal-dialog{
	width: 900px;
}
#contact_modal .modal-body{
	padding:0;
}
#contact_modal .modal-content{
	display: table;
	height: 382px;
}
#contact_modal button.close{
	position: absolute;
	right: 0;
	top: -15px;
	font-size: 50px;
}
#contact_modal .modal-content .thank-you-msg{
	text-align: center;
	padding-top:100px;
}
/* END E-MAIL FORM */

/* 11. SOCIAL ICONS */
.icons-container{
	width:260px;
	position: absolute;
	z-index: 1051;
	right:0px;
	bottom:15px;
	text-align: center;
}
.icons-container img{ 
	height:36px;
}
/* END SOCIAL ICONS */

.santa-btn{
	display: inline-block;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    width: auto;
    height: 57px;
	background: #ed1c24;
    min-width: 200px;
    padding: 0 30px 0 30px;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: bold;
	user-select: none;
    line-height: 55px;
    text-align: center;
    box-shadow: 0 6px 7px rgb(0 0 0 / 25%);
    border-radius: 30px;
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    font-family: 'Open Sans','Arial','Droid Sans',sans-serif;
	text-decoration: none !important;
}
.santa-btn:hover{
	color: #ed1c24;
	background: white;
	border: 2px  solid #ed1c24;
}

.container-fluid{
	margin-top: 75px;
  }
  .my-0{
	height: 75px;
  }
  #sidebarTop img{
	  max-height: 50px;
	  margin-left: -10px;
  }
  .social-login{
	text-align: center;
	margin-top: 20px;
  }
  .hidden{
	display: none;
  }
  #pre-verify button{
	margin: 0px 5px;
  }
  .modal-content{
	  /* height: 400px; */
	  padding: 20px;
	  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	  /* border:  2px solid red; */
  }

  #pre-verify,#set-gender{
	  color: black;
	  font-size: 14px;
  }
  #set-gender i{
	  font-size: 45px;
	  /* padding: 10px; */
  }


  /* HIDE RADIO */
[type=radio] { 
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
  }
  
  /* IMAGE STYLES */
  [type=radio] + i {
	cursor: pointer;
	color: grey;
  }
  
  /* CHECKED STYLES */
  [type=radio]:checked + i {
	/* outline: 2px solid #f00; */
	color: green;
  }
  .gentable{
	  width: 100%;
  }
  .gentable td{
	  width: 33.33%;
  }
  .gentable span{
	font-size: 12px;
	margin-top: 10px;
	display: block
}





.cookiesContent {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	color: #000;
	text-align: center;
	border-radius: 20px;
  }
  .cookiesContent button.close {
	width: 30px;
	font-size: 20px;
	color: #c0c5cb;
	align-self: flex-end;
	background-color: transparent;
	border: none;
	margin-bottom: 10px;
  }
  .cookiesContent img {
	width: -webkit-fill-available;
	/* margin-bottom: 15px;  */
	/* width: 107%; */
    /* margin-bottom: 0; */
    margin-top: -20px;
	margin-left: -20px;
    margin-right: -21px;
  }
  .cookiesContent p {
	margin-bottom: 40px;
	font-size: 17px;
  }
  .cookiesContent button.accept {
	background-color: #ed6755;
	border: none;
	border-radius: 5px;
	width: 200px;
	padding: 14px;
	font-size: 16px;
	color: white;
	box-shadow: 0px 6px 18px -5px #ed6755;
  }
  .cookiesContent .nob{
	  margin-bottom: 10px;
	  font-size: 16px;
	  color: green;
  }

  .alertify-notifier{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
  }
  .santa-modal{
	background: url('https://i.pinimg.com/originals/49/5d/03/495d03fb10419c25744bc7600a7dd7f6.png');
	background-size: cover;
	background-position:center;
  }
  .santa-modal-in{
	background: url('https://www.wishandgreet.com/wp-content/uploads/2019/12/Christmas-Background-1.jpg');
	background-size: cover;
	background-position: bottom;
  }
  .santa-modal-in hr{
	margin: 5px;
  }
  .santa-modal-in button{
	width: 200px;
  }
  .mb-20{
	  color: darkblue;
	  font-size: 20px;
  }
  .santa-field{
	width: 100%;
	min-width: 220px;
	max-width: 400px;
	padding: 10px;
	text-align: center;
  }
  .santa-field *,*::placeholder{
	text-align: center;
    font-size: 16px;
	letter-spacing: normal;
	font-weight: normal;
  }
#join-code{
	font-weight: bold;
	letter-spacing: 20px;
	text-transform:uppercase;
  }
  #btn-join, #btn-invite,#btn-create,#logout{
	padding: 5px 30px;
	line-height: 25px;
	height: 35px;
}
.box-img{
	cursor: pointer;
}
.box-icon{
	width: 85px !important;
}
.txt-white{
	color: white;
}
.ico_ch_txt{
	display: block;
    color: brown;
}
.box-title{
	font-size: 18px;
	font-weight: bold;
	display: block;
	/*max-width: 200px;*/
    min-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.box-role{
	font-size: 14px;
	/*max-width: 200px;*/
    min-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.santa-modal .card{
	background: white;
    width: 90%;
	min-width: 260px;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
    padding: 5px;
	margin: 5px 5%;
	text-decoration: none;
	cursor: pointer;
}
.left-img *{
	float: left !important;
	margin-top: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
	width: 50px !important;
}
.card-content{
	display: grid;
}
.def-div{
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
	line-height: 1.42857143;
	color: #333 !important;
}
.my-card{
	background: #FFFFFF99;
	width: 100%	;
	margin: 20px;
	margin-right: 60px;
	border-radius: 10px;
	padding: 10px;
}
.p20{
	padding: 20px;
}
.p20 span{
	display: block
}
.my-card p{
	font-size: 18px;
	font-weight: bold;
}
.close{
	color: red !important;
	font-size: 15px !important;
	opacity: 1;
	margin: 0px !important;
}
.ic_55_left{
	width: 55px !important;
	float: left;
	margin: -8px;
}
table{
	border-collapse: separate;
	border-spacing: 5px;
}
.box-icon{
	border : 1px solid #ccc;
	border-radius: 180px;
}
.prof_name{
	display: block;
	font-size: 18px;
	font-weight: bold;
	margin-top: -10px;
}
.prof_email{
	display: block;
	font-size: 16px;
	color: green;
	margin-bottom: 15px;
}
@media (max-width: 768){
	.modal-lg{
		width: 90%;
	}
}

.dataTables_length{
	display: none;
}

.santa-field-dt{
	width: 100%;
	text-align: center;
	max-width: unset;
}
.santa-field-dt button{
	margin-top: 10px;
	font-size: 13px;
	min-width: auto;
	width: 150px;
	line-height: 0px;
	height: 30px;
}
#mail_list{
	height: 125px;
	resize: none;
	margin-bottom: 5px;
	font-size: 12px;
}
.or{
	font-size: 12px;
}
#mail_file{
	font-size: 12px;
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

#editor {
	width: 100%;
    height: 125px;
    padding: 10px;
    background: white;
    color: black;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    text-align: left;
    font-family: monospace;
	overflow: auto;
}
[contenteditable][placeholder]:empty:before {
	content: attr(placeholder);
	position: absolute;
	color: gray;
	background-color: transparent;
}
#editor label{
	background: blanchedalmond;
	margin: 3px;
	padding: 2px 5px;
	border-radius: 5px;
	line-height: 2;
	-webkit-user-modify: read-only;
	-moz-user-modify:read-only;
}
#editor i{
	color: #c00000;
}
.dt-img{
	height: 43px;
    margin: 0px !important;
	width: auto !important;
	float: left;
    border-radius: 180px;
}
#dt_userlist thead{
	/* display: none; */
	visibility: collapse;
}	

.res-mod-content{
	padding: 40px 20px 20px 20px;
	background: transparent;
    margin-top: 23%;
}
.dataTables_info{
	display: none;
}
tbody td { max-width: 200px; min-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.res-img{
	background-image: url('https://cdn.jsdelivr.net/gh/fedbytes/santabox.in@main/images/paper.png');
	text-align: center;
}
.res_icon{
	width: 60px !important;margin-top: 24px !important;
    text-align: center;
}
.res_name{
	font-size: 12px;
    display: block;
    font-weight: bold;
}
.res_mail{
	font-size: 8px;
    display: block;
}
.amazon-gifts{
    width:100% !important;
    max-width:100% !important;
}
.__mobile-associates-search-widget{
    width:100% !important;
}
iframe[width*="728"] {
   max-width:100%;
}

iframe[width*="728"] a{
   max-width:100%;
}
.card-ncenter{
    align-items: unset !important;
}

.balloon-center {   
    text-align: center;
    right: 25px;
    bottom: 150px;
    position: absolute;
    font-size: 16px;}

.balloon {
  display: inline-block;
  cursor:pointer;
    width: 100px;
    height: 115px;
    background: #007bff;
    border-radius: 80%;
    position: relative;
    font-weight: bold;
    color: white;
    box-shadow: inset -10px -10px 0 rgb(0 0 0 / 7%);
    margin: 20px 30px;
    transition: transform 0.5s ease;
    z-index: 10;
    animation: balloons 4s ease-in-out infinite;
    transform-origin: bottom center;
    padding-top: 40px;
}

@keyframes balloons {
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  50%{ transform:translateY(-25px) rotate(4deg); }
}


.balloon:before {
  content:"▲";
  font-size:20px;
  color:#007bff;
  display:block;
  text-align:center;
  width:100%;
  position:absolute;
  bottom:-12px;
  z-index:-100;
}

.balloon:after {
 display:inline-block; top:120px;
  position:absolute;
  left:50px;
  height:150px;
  width:1px;
  margin:-19;
  content:"";
  background:rgba(0,0,0,0.2); 
}
	.helper-container img{
	    height:46px ;
	}
	.helper-container{
    z-index:1051;
    float: left; 
    position: absolute;
    left: 10px;  
    bottom: 10px;
}
@media only screen and (min-width: 1200px){
	.icons-container{
	    right:30px !important;
	}
	.helper-container{
    left: 20px;  
    bottom: 20px;
}
	.icons-container img{
	    height:60px  !important;
	}
	.helper-container img{
	    height:60px  !important;
	}
}


.helper-container{
    z-index:1051;
    float: left; 
    position: absolute;
    left: 10px;  
    bottom: 10px;
}
.sanc {
    /* position: fixed; */
    /* bottom: 10px; */
    float: left;
    position: absolute;
    /* left: -207px; */
    /* top: 10px; */
    width: 35px;
    margin-top: 53px;
    margin-left: -43px;
    border-radius: 180px;
    font-size: 22px;
    background: green;
    color: white;
}
.swal2-modal *{
    font-family: sans-serif !important;
}
.swal2-modal {
    zoom:1.5 !important;
}