body { overflow-x:hidden; }

a, a:hover { color: inherit;text-decoration:inherit; }

.white { color: #fff !important; }
.bg-red { background-color: #CC2027 !important; }

.home header img.logo { display:none !important; }
/* .header-wrapper { padding-top:15px; } */

#fullpage { padding-top: 50px; }
.slider:not(.flickity-enabled) {
    white-space: nowrap;
    overflow-y: visible !important;
    overflow-x: visible !important;
    width: auto;
    -ms-overflow-style: none !important;
}

.multi-range, .multi-range * { box-sizing: border-box; padding: 0; margin: 0; }
.multi-range { 
    position: relative; width: 160px; height: 28px; margin: 16px;
    border: 1px solid #ddd; font-family: monospace;
}
.multi-range > hr { position: absolute; width: 100%; top: 50%; }
.multi-range > input[type=range] {
    width: calc(100% - 16px); 
    position: absolute; bottom: 6px; left: 0;
}
.multi-range > input[type=range]:last-of-type { margin-left: 16px; }
.multi-range > input[type=range]::-webkit-slider-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-moz-range-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-moz-range-track { -webkit-appearance: none; height: 0px; }
.multi-range > input[type=range]::-ms-thumb { transform: translateY(-18px); }
.multi-range > input[type=range]::-ms-track { -webkit-appearance: none; height: 0px; }
.multi-range::after { 
    content: attr(data-lbound) ' - ' attr(data-ubound); 
    position: absolute; top: 0; left: 100%; white-space: nowrap;
    display: block; padding: 0px 4px; margin: -1px 2px;
    height: 26px; width: auto; border: 1px solid #ddd; 
    font-size: 13px; line-height: 26px;
}

/* .main-bg { background: url(../img/gifs/4main-bg.gif) no-repeat;background-position: bottom;background-size: 100%;min-height: 65vh; } */
.main-bg { background: url(../img/main-bg.png) no-repeat;background-position: bottom;background-size: 100%;min-height: 65vh; }

.thumbs .thumbnail img { max-height:100px;max-width:100%; }

input[name="gender"], input[name^="interests"] { display:none !important; }

.menu-item-login:hover ul.sub-menu { 
	opacity:1;
	transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out; 
}
.menu-item-login .sub-menu::before { right:50%; }

ul.products li img { max-height: 250px;max-width:100%; }

#gift_list:not(.admin) .product:not(.gift-card)::before { display:none !important; }

#gift_list li .product .add_cart {
	font-family: FontAwesome;
    content: "\f00c";
    position: absolute;
    right: -15px;
    border-radius: 100%;
    top: -15px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    background-color: #ccc;
    font-weight: 100;
    font-size: 16px;
    z-index:6;
}
#gift_list li .product.selected .add_cart {
    font-family: FontAwesome;
    content: "\f00c";
    position: absolute;
    right: -15px;
    border-radius: 100%;
    top: -15px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    background-color: #cc2027;
    font-weight: 100;
    font-size: 16px;
}

.products li { position:relative; }
#gift_list:not(.admin) .profile-pic .icon.selected-img { width:150px;height:150px;text-align:center;font-size: 6em; }
#gift_list:not(.admin) .purchased_by { background: #cc2027;color: #fff;border-radius: 20px;width: 90%;margin: 0 auto;position: absolute;top: 220px;z-index: 5; }
#gift_list:not(.admin) .purchased_by i { float: right;padding-right: 3px;font-size: 1.5em; }

.modal-box .register-form { width: 100% !important; }

/* Outer */
.popup {
	width:100%;
	height:100%;
	display:none;
	position:fixed;
	top:0px;
	left:0px;
	background:rgba(0,0,0,0.75);
	z-index: 999;
}
/* Inner */
.popup-inner {
	max-width:700px;
	width:65%;
	/* padding:40px; */
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
	box-shadow:0px 2px 6px rgba(0,0,0,1);
	border-radius:3px;
	background:#fff;
}
/* Close Button */
.popup-close {
	width:30px;
	height:30px;
	padding-top:4px;
	display:inline-block;
	position:absolute;
	top:0px;
	right:0px;
	transition:ease 0.25s all;
	-webkit-transform:translate(50%, -50%);
	transform:translate(50%, -50%);
	border-radius:1000px;
	background:rgba(0,0,0,0.8);
	font-family:Arial, Sans-Serif;
	font-size:20px;
	text-align:center;
	line-height:100%;
	color:#fff;
}
.popup-close:hover {
	-webkit-transform:translate(50%, -50%) rotate(180deg);
	transform:translate(50%, -50%) rotate(180deg);
	background:rgba(0,0,0,1);
	text-decoration:none;
}

.popup-inner img { max-width:100%; }

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.slider-labels {
	position: absolute;
	padding: 5px 10px;
	top: -50px;
	line-height: 20px;
	font-size: 20px;
	border-radius: 5px;
	z-index: 4;
	background-color: #fff;
	color: #cc2027;
	left: calc(50% - 20px);
}

.slider-labels::after {
	position: absolute;
	content: "";
	border-top: 5px solid #fff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	bottom: -5px;
	left: calc(50% - 5px);
}

.slider-labels div, #slider-range, .min-value, .max-value { display:inline-block;margin:0 5px; }
#slider-range { width: 92%; }

#loginform label { font-size:18px;color:#fff; }
#loginform input.input { float:left; }
#loginform #wp-submit { float:left;margin-top: -10%; }

#catalog .catalog .products { height:44vh; }
#catalogue .catalog .products { height:44vh; }

#main-content .content { max-width: 95%; }
.wizard { z-index:9; }

/* .bg { */
    /* background: url(../img/how-to-bg.png) no-repeat; */
    /* height: 100%; */
    /* background-position: bottom center; */
    /* background-repeat: no-repeat; */
    /* background-size: contain; */
/* } */

@media screen and (min-width: 600px){
	.bg + form, .story #how-to, .page-story #how-to {
		background: url(../img/how-to-bg.png) no-repeat;
		height: 100%;
		background-position: bottom;
		background-repeat: no-repeat;
		background-size: contain;
		background-attachment: fixed;
	}
}


.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main, #main-content {
    transition: margin-left .5s;
    /* padding: 15px; */
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

ul.wish-products { max-width:250px; }
ul.wish-products li { display:block; }

/* #how-to div.content { */
    /* position: relative; */
    /* width: 100%; */
    /* height: calc(100vh - 50px); */
    /* height: calc(100vh - 0px); */
    /* overflow: hidden; */
/* } */
#summary .thumbnail img { max-height:100px; }

@media only screen and (max-width: 600px) {
    #section3 .interests .interests-b { padding:0 3% !important; }
	#how-to #section1 .story-toys { bottom:35px !important; }
	#how-to .boy.always { bottom:100px !important; }
}

@media only screen and (max-height: 553px) {
	/* #how-to #section1 .story-toys { bottom:39px !important; } */
	/* #how-to .boy.always { bottom:50px !important; } */
}

/* .fp-section { display:none !important; } */
/* .fp-section.active { display:block !important; } */

#how-to #section0 .boy, #how-to #section0 .girl { bottom:10px; }
#how-to #section1 .story-toys { bottom:39px; }
#how-to #section1 .boy { bottom:10px; }
/* #how-to #section2 .story-presents1 { bottom:22px; } */
#how-to #section2 .story-presents1 { bottom:10px; }
#how-to #section2 .boy { bottom:10px; }
#how-to #section3 .boy { bottom:10px;background: none; }
/* #how-to #section4 .story-presents2 { bottom:22px; } */
#how-to #section4 .story-presents2 { bottom:0px; }
#how-to #section4 .boy { bottom:118px; }

#how-to #section4 .bar { z-index:999; }
#how-to #section4 .bar a { cursor:pointer; }

/* #how-to .boy.always { bottom:40px;display:none; } */
#how-to .boy.always { 
	bottom:50px;
	display:none;
	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
}

h5.how-it-works { text-align:center;font-size:36px;position:absolute;top:5px; }
.section { padding:0 !important; }
.page-calc .section { height:100vh;overflow: auto; }

button:focus {
    outline: 0px dotted !important;
    outline: 0px auto -webkit-focus-ring-color !important;
}

.page-calc #fp-nav ul li a.active span, .page-calc #fp-nav ul li:hover a.active span, .page-calc .fp-slidesNav ul li a.active span, .page-calc .fp-slidesNav ul li:hover a.active span { height:15px;width:15px; }
.page-calc #fp-nav ul li .fp-tooltip { font-size:21px;font-family: "Almoni Tzar Light", Tahoma; }
.page-calc #fp-nav ul li .fp-tooltip.fp-left { left: 25px; }

.page-calc #fp-nav ul li, .page-calc .fp-slidesNav ul li { margin:13px 7px; }

.page-story #fp-nav ul li a.active span, .page-story #fp-nav ul li:hover a.active span, .page-story .fp-slidesNav ul li a.active span, .page-story .fp-slidesNav ul li:hover a.active span { height:15px;width:15px; }
.page-story #fp-nav ul li .fp-tooltip { font-size:21px;font-family: "Almoni Tzar Light", Tahoma; }
.page-story #fp-nav ul li .fp-tooltip.fp-left { left: 25px; }

.page-story #fp-nav ul li, .page-story .fp-slidesNav ul li { margin:13px 7px; }

/* .page-calc header .section-header, .page-story header .section-header { background-color:transparent !important; } */

.story-button.present { height:auto; }

/* .page-calc .action { position:absolute;bottom:-5vh; } */

@media only screen and (min-width: 800px) and (max-width: 1600px) {
	.big-bubble, .small-bubble1, .small-bubble2, .small-bubble3 { transform:scale(0.8); }
	.small-bubble1 { top: -300px; }
	.star-lg, .star-md, .star-md2, .star-md3, .star-sm, .star-xs { transform:scale(0.8); }
	.star-sm { top: -6vh; }
	.cloud-share { transform:scale(0.8); }
	/* .star-md2 { top: -30vh; } */
	.story-icon1, .story-icon2, .story-icon3, .story-icon4, .story-icon5, .story-icon6 { transform:scale(0.8); }
}

@media only screen and (max-width: 700px) {
	#interests.gfx-select .nav li .icon { 
		width: 75px !important;
		height: 75px !important;
		line-height: 75px !important;
		/* font-size: 40px !important; */
	}
	.interests .gfx-select .nav li label {
		/* width: 100%; */
		/* display:block; */
	}
	.gfx-select .nav li.selected::after {
		width:75px !important;
	}
	/* #how-to h5.how-it-works { top:10%; } */
	/* #how-to #section0 .boy, #how-to #section0 .girl { bottom:20px; } */
	/* #how-to #section1 .story-toys { bottom:90px; } */
	/* #how-to .boy.always { bottom:4.2em; } */
	/* #how-to #section2 .story-presents1 { bottom:70px; } */
	/* #how-to #section3 .boy { background-image:none !important; } */
	/* #how-to #section4 .story-presents2 { bottom:27px; } */
	/* #how-to #section4 .boy { bottom:95px; } */
	
	.header-wrapper { background-color: #CC2027; }
	.page-home .main-container.fullview { height:auto;min-height:auto; }
	.page-home #how-to { position:fixed; }
	.interests .greeting { padding: 15px 0 0 0;position:relative; }
}

@media only screen and (min-width: 700px) and (max-width: 1200px) {
	h5.how-it-works { top:10px; }
	#how-to #section1 .story-toys { bottom:42px; }
	#how-to .boy.always { bottom:4em; }
	.safari #how-to .boy.always { bottom:2.5em; }
	#how-to #section4 .story-presents2 { bottom:75px; }
}

@media only screen and (min-width: 1200px) and (max-width: 1400px) {
	.cloud-share { top: 13vh !important; }
}

@media only screen and (min-width: 1200px) {
	#how-to #section1 .story-toys { bottom:52px; }
	#how-to #fullpage .boy.always { bottom: 25px !important; }
}

/* @media only screen and (max-width: 600px) and (-webkit-device-pixel-ratio: 3) { */
	/* #how-to .boy.always { bottom:160px; } */
/* } */

/* @media (aspect-ratio: 19.5/9) { */
	/* #how-to .boy.always { bottom:90px; } */
/* } */

@media only screen and (min-width: 700px) and (max-width: 1600px) and (orientation: landscape) {
	#how-to #section4 .story-presents2 { bottom:107px; }
}

/* @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { /* iPhone 7/8 */
@media only screen and (-webkit-device-pixel-ratio : 2) { /* iPhone 7/8 */
	.cloud { scale: 0.7; }
	.cloud.large { top: 10% !important; }
	.cloud.small.left, .cloud.small.right { top: 35% !important; }
	#how-to .boy.always { bottom: -5px !important; }
	.cloud-share, .story-icon1, .story-icon2, .story-icon3, .story-icon4, .story-icon5, .story-icon6 { scale: 0.8; }
	/* .story-icon6 { top: -50px !important; } */
	#how-to #section4 .boy { bottom: 120px !important; }
}

@media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3) { /* iPhone 6+/6s+/7+/8+ */
	.cloud { scale: 0.7; }
	.cloud.small.left { top: 40% !important; }
	#how-to .boy.always { bottom: 5em !important; }
	.cloud-share, .story-icon1, .story-icon2, .story-icon3, .story-icon4, .story-icon5, .story-icon6 { scale: 0.8; }
	.story-icon6 { top: -130px !important; }
	#how-to #section4 .boy { bottom: 120px !important; }
}

@media only screen and (min-width: 700px) and (max-width: 1200px) (min-aspect-ratio: 16/10) and (orientation: landscape) {
	#fp-nav { top: 45% !important; }
	#how-to .boy.always { bottom: 115px !important; }
	.star-md2 { top: -18vh !important; }
	.story-icon3, .story-icon6 { display:none !important; }
	.cloud-share { top: 10vh; }
}

/* @media (min-resolution: 144dpi) { */
  /* .c144 { */
    /* background: green; */
    /* color: white; */
  /* } */
/* } */


#landscape { display:none; }
/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */
@media only screen and (max-width: 850px) and (orientation: landscape) {
  #landscape { display:block;height: 100vh;text-align:center; }
  #landscape img { max-height:200px; }
  header, main, #fp-nav { display:none; }
}

/* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #landscape { display:none; }
  header, main, #fp-nav { display:block; }
}